CODEWITHSUNDEEP
javascriptclassobjectmootoolsjsfiddle
Carlos Cabo
Carlos Cabo

Reputation: 741

External JS library stops working when I add Mootools

I'm testing a JS library to triangulate an array of points (it returns an array of triangles), and seems to work great but when I add MooTools (this lib will be intregrated in a larger project using MooTools so I need it) it stops to work. :(

I mean I ONLY need to add MooTools in the header (neither adding a domready event) and I get an error...

Uncaught TypeError: Object function (){
            return lower;
        } has no method 'InCircumcircle'

I tried adding JQuery instead of MooTools and It works perfectly even inside the domready block... so I don't have any idea about what is wrong with mootools... (maybe MooTools changes something in the JS Object model incompatible with this library?)

I don't know how to solve it... Or maybe I'm noob and it's a small detail I can't see... :)

I prepared a small demo in JSFiddle where you can view it by yourselves:
http://jsfiddle.net/6KcW9/

The library, delauny.js, is linked in the Manage resources section.

Running this simple code as is, you'll see that it outputs an arrray of elements to the console... try adding MooTools in the framework section and run it again.
Any help / clue / whatever will be great apretiated...

Upvotes: 2

Views: 176

Answers (2)

Dimitar Christoff
Dimitar Christoff

Reputation: 26165

have you seen their source code?

http://www.travellermap.com/tmp/delaunay.js

MooTools is a prototypical framework. This means, it adds methods to Native prototypes, which can be iterated through.

var i;
for( i in vertices )
{
    // NOTE: This is O(n^2) - can be optimized by sorting vertices
    // along the x-axis and only considering triangles that have 
    // potentially overlapping circumcircles

    var vertex = vertices[i];
    AddVertex( vertex, triangles );
}

code like this where vertices is an array - will totally break. the for (var in object) construct is a way of iterating through properties of an Object. Instead, an Array is being passed (which - like almost anything in js - is an object but with array-like properties). 

var g_vertices = [];
for( var i = 0; i < 50; i++ ) {
    g_vertices.push( new Vertex( Math.random() * 350 + 25, Math.random() * 250 + 25 ) );
}
// var triangles = Triangulate( g_vertices );
// console.log(triangles);

console.log(g_vertices);

for (var i in g_vertices) {
    console.log(i);
}

when you add mootools to the page, the result of that is:

0, 1, 2 .... 49, $family, $constructor, each, clone, clean, invoke ... etc.

basically, you need to fix their library. either use hasOwnProperty check -> if (g_vertices.hasOwnProperty(i)) ... - or use a proper for array iterator or while or even Array.forEach, whatever you like.

find an alternative like this: https://github.com/sokeroner/Delaunay-Triangulation - which seems to be written better and more modular.

Upvotes: 1

Josh
Josh

Reputation: 44916

Because you are adding all your stuff to the global namespace, you are probably going to run into trouble.

You really should wrap your code in a module so you don't pollute the global namespace.

Upvotes: 0

Related Questions