How to use addDiv method in wpt

Best JavaScript code snippet using wpt

tests.js

Source:tests.js

...39// };40//41// var _addDivs = function (ids, parent) {42// for (var i = 0; i < ids.length; i++)43// support.addDiv(ids[i], parent);44// };45var defaults = null, support,46 _cleanup = function (_jsPlumb) {47 _jsPlumb.reset();48 _jsPlumb.unbindContainer();49 if (_jsPlumb.select().length != 0)50 throw "there are connections!";51 _jsPlumb.Defaults = defaults;52 support.cleanup();53 /*54 var svg = document.querySelectorAll("svg");55 for (var i = 0; i < svg.length; i++) {56 svg[i].parentNode.removeChild(svg[i]);57 }*/58 document.getElementById("container").innerHTML = "";59 };60var testSuite = function (_jsPlumb) {61 var renderMode = jsPlumb.SVG;62 support = jsPlumbTestSupport.getInstance(_jsPlumb);63 module("jsPlumb", {64 teardown: function () {65 _cleanup(_jsPlumb);66 },67 setup: function () {68 defaults = jsPlumb.extend({}, _jsPlumb.Defaults);69 _jsPlumb.setContainer("container");70 }71 });72 // setup the container73 var container = document.createElement("div");74 container.id = "container";75 document.body.appendChild(container);76 //*77/*78 test(" : getElementObject", function () {79 var e = document.createElement("div");80 e.id = "FOO";81 document.body.appendChild(e);82 var el = jsPlumb.getElementObject(e);83 equal(jsPlumbTestSupport.getAttribute(el, "id"), "FOO");84 });85 */86 test(" : getElement", function () {87 var e = document.createElement("div");88 e.id = "FOO";89 document.body.appendChild(e);90 var e2 = jsPlumb.getElement(e);91 equal(e2.id, "FOO");92 var e3 = jsPlumb.getElement("FOO");93 equal(e3.id, "FOO");94 });95 test(': _jsPlumb setup', function () {96 ok(_jsPlumb, "loaded");97 });98 test(': getId', function () {99 var d10 = support.addDiv('d10');100 equal(_jsPlumb.getId(jsPlumb.getElement(d10)), "d10");101 });102 test(': create a simple endpoint', function () {103 var d1 = support.addDiv("d1");104 var e = _jsPlumb.addEndpoint("d1", {});105 ok(e, 'endpoint exists');106 support.assertEndpointCount("d1", 1);107 ok(e.id != null, "endpoint has had an id assigned");108 });109 test(': create and remove a simple endpoint', function () {110 var d1 = support.addDiv("d1");111 var ee = _jsPlumb.addEndpoint(d1, {uuid: "78978597593"});112 ok(ee != null, "endpoint exists");113 var e = _jsPlumb.getEndpoint("78978597593");114 ok(e != null, "the endpoint could be retrieved by UUID");115 ok(e.id != null, "the endpoint has had an id assigned to it");116 support.assertEndpointCount("d1", 1);117 _jsPlumb.deleteEndpoint(ee);118 support.assertEndpointCount("d1", 0);119 e = _jsPlumb.getEndpoint("78978597593");120 equal(e, null, "the endpoint has been deleted");121 });122 test('endpoint with overlays', function() {123 var d1 = support.addDiv("d1");124 var e = _jsPlumb.addEndpoint(d1, {125 "overlays": [["Label", {"label": "Label text", "cssClass": 'kw_port_label', "id": "66"}]]126 });127 var o = e.getOverlay("66");128 ok(o != null, "overlay exists");129 });130 test(': create two simple endpoints, registered using a selector', function () {131 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");132 jsPlumb.addClass(d1, "window");133 jsPlumb.addClass(d2, "window");134 var endpoints = _jsPlumb.addEndpoint(jsPlumb.getSelector(".window"), {});135 equal(endpoints.length, 2, "endpoint added to both windows");136 support.assertEndpointCount("d1", 1);137 support.assertEndpointCount("d2", 1);138 });139 test(': create two simple endpoints, registered using an array of element ids', function () {140 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");141 jsPlumb.addClass(d1, "window");142 jsPlumb.addClass(d2, "window");143 var endpoints = _jsPlumb.addEndpoint(["d1", "d2"], {});144 equal(endpoints.length, 2, "endpoint added to both windows");145 support.assertEndpointCount("d1", 1);146 support.assertEndpointCount("d2", 1);147 });148 test(' jsPlumb.remove after element removed from DOM', function () {149 var d = document.createElement("div");150 d.innerHTML = '<div id="container2"><ul id="targets"><li id="in1">input 1</li><li id="in2">input 2</li></ul><ul id="sources"><li id="output">output</li></ul></div>';151 var container = d.firstChild;152 document.body.appendChild(jsPlumb.getElement(container));153 var e1 = _jsPlumb.addEndpoint("in1", { maxConnections: 1, isSource: false, isTarget: true, anchor: [ 0, 0.4, -1, 0 ] }),154 e2 = _jsPlumb.addEndpoint("in2", { maxConnections: 1, isSource: false, isTarget: true, anchor: [ 0, 0.4, -1, 0 ] }),155 e3 = _jsPlumb.addEndpoint("output", { isSource: true, isTarget: false, anchor: [ 1, 0.4, 1, 0 ] });156 _jsPlumb.connect({source: e3, target: e1});157 // the element gets removed out of jsplumb's control158 var op = document.getElementById("output");159 op.parentNode.removeChild(op);160 // but you can tell jsPlumb about it after the fact161 _jsPlumb.remove("output");162 equal(_jsPlumb.selectEndpoints({element: "output"}).length, 0, "no endpoints registered for in1");163 });164 test(' jsPlumb.connect an endpoint to a div.', function () {165 var d1 = support.addDiv("d1");166 var d2 = support.addDiv("d2");167 var e1 = _jsPlumb.addEndpoint(d2);168 _jsPlumb.connect({source: e1, target: d1});169 equal(_jsPlumb.select().length, 1, "one connection established");170 });171 test(": lineWidth specified as string (eew)", function () {172 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");173 var c = _jsPlumb.connect({174 source: "d1",175 target: "d2",176 paintStyle: {177 stroke: "red",178 strokeWidth: "3"179 }180 });181 equal(c._jsPlumb.paintStyleInUse.strokeWidth, 3, "line width converted to integer");182 });183 test(": outlineWidth specified as string (eew)", function () {184 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");185 var c = _jsPlumb.connect({186 source: "d1",187 target: "d2",188 paintStyle: {189 stroke: "red",190 strokeWidth: 3,191 outlineWidth: "5"192 }193 });194 c.repaint();195 equal(c._jsPlumb.paintStyleInUse.outlineWidth, 5, "outline width converted to integer");196 });197 test(": strokeWidth and outlineWidth specified as strings (eew)", function () {198 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");199 var c = _jsPlumb.connect({200 source: "d1",201 target: "d2",202 paintStyle: {203 stroke: "red",204 strokeWidth: "3",205 outlineWidth: "5"206 }207 });208 c.repaint();209 equal(c._jsPlumb.paintStyleInUse.outlineWidth, 5, "outline width converted to integer");210 equal(c._jsPlumb.paintStyleInUse.strokeWidth, 3, "line width converted to integer");211 });212 test(': defaultEndpointMaxConnections', function () {213 var d3 = support.addDiv("d3"), d4 = support.addDiv("d4");214 var e3 = _jsPlumb.addEndpoint(d3, {isSource: true});215 ok(e3.anchor, 'endpoint 3 has an anchor');216 var e4 = _jsPlumb.addEndpoint(d4, {isSource: true});217 support.assertEndpointCount("d3", 1, _jsPlumb);218 support.assertEndpointCount("d4", 1, _jsPlumb);219 ok(!e3.isFull(), "endpoint 3 is not full.");220 _jsPlumb.connect({source: d3, target: 'd4', sourceEndpoint: e3, targetEndpoint: e4});221 assertConnectionCount(e3, 1); // we have one connection222 _jsPlumb.connect({source: d3, target: 'd4', sourceEndpoint: e3, targetEndpoint: e4});223 assertConnectionCount(e3, 1); // should have refused the connection; default max is 1.224 });225 test(': specifiedEndpointMaxConnections', function () {226 var d5 = support.addDiv("d5"), d6 = support.addDiv("d6");227 var e5 = _jsPlumb.addEndpoint(d5, {isSource: true, maxConnections: 3});228 ok(e5.anchor, 'endpoint 5 has an anchor');229 var e6 = _jsPlumb.addEndpoint(d6, {isSource: true, maxConnections: 2}); // this one has max TWO230 support.assertEndpointCount("d5", 1, _jsPlumb);231 support.assertEndpointCount("d6", 1, _jsPlumb);232 ok(!e5.isFull(), "endpoint 5 is not full.");233 _jsPlumb.connect({sourceEndpoint: e5, targetEndpoint: e6});234 assertConnectionCount(e5, 1); // we have one connection235 _jsPlumb.connect({sourceEndpoint: e5, targetEndpoint: e6});236 assertConnectionCount(e5, 2); // two connections237 _jsPlumb.connect({sourceEndpoint: e5, targetEndpoint: e6});238 assertConnectionCount(e5, 2); // should have refused; max is 2, for d4.239 });240 test(': noEndpointMaxConnections', function () {241 var d3 = support.addDiv("d3"), d4 = support.addDiv("d4");242 var e3 = _jsPlumb.addEndpoint(d3, {isSource: true, maxConnections: -1});243 var e4 = _jsPlumb.addEndpoint(d4, {isSource: true, maxConnections: -1});244 _jsPlumb.connect({sourceEndpoint: e3, targetEndpoint: e4});245 assertConnectionCount(e3, 1); // we have one connection246 _jsPlumb.connect({sourceEndpoint: e3, targetEndpoint: e4});247 assertConnectionCount(e3, 2); // we have two. etc (default was one. this proves max is working).248 var d5 = support.addDiv("d5"), d6 = support.addDiv("d6");249 var e5 = _jsPlumb.addEndpoint(d3, {isSource: true, maxConnections: -1});250 _jsPlumb.connect({sourceEndpoint: e5, targetEndpoint: e4});251 assertConnectionCount(e4, 3);252 });253 test(': endpoint.isConnectdTo', function () {254 var d3 = support.addDiv("d3"), d4 = support.addDiv("d4");255 var e3 = _jsPlumb.addEndpoint(d3, {isSource: true, maxConnections: -1});256 var e4 = _jsPlumb.addEndpoint(d4, {isSource: true, maxConnections: -1});257 _jsPlumb.connect({sourceEndpoint: e3, targetEndpoint: e4});258 ok(e3.isConnectedTo(e4), "e3 is connected to e4");259 ok(e4.isConnectedTo(e3), "e4 is connected to e3");260 });261// ************** ANCHORS ******************************************** 262 test(': anchors equal', function () {263 var a1 = _jsPlumb.makeAnchor([0, 1, 1, 1], null, _jsPlumb);264 var a2 = _jsPlumb.makeAnchor([0, 1, 1, 1], null, _jsPlumb);265 ok(a1.equals(a2), "anchors are the same");266 });267 test(': anchors equal with offsets', function () {268 var a1 = _jsPlumb.makeAnchor([0, 1, 1, 1, 10, 13], null, _jsPlumb);269 var a2 = _jsPlumb.makeAnchor([0, 1, 1, 1, 10, 13], null, _jsPlumb);270 ok(a1.equals(a2), "anchors are the same");271 });272 test(': anchors not equal', function () {273 var a1 = _jsPlumb.makeAnchor([0, 1, 0, 1], null, _jsPlumb);274 var a2 = _jsPlumb.makeAnchor([0, 1, 1, 1], null, _jsPlumb);275 ok(!a1.equals(a2), "anchors are different");276 });277 test(': anchor not equal with offsets', function () {278 var a1 = _jsPlumb.makeAnchor([0, 1, 1, 1, 10, 13], null, _jsPlumb);279 var a2 = _jsPlumb.makeAnchor([0, 1, 1, 1], null, _jsPlumb);280 ok(!a1.equals(a2), "anchors are different");281 });282 test('simple makeAnchor, dynamicAnchors', function () {283 expect(0);284 var spec = [285 [0.2, 0, 0, -1],286 [1, 0.2, 1, 0],287 [0.8, 1, 0, 1],288 [0, 0.8, -1, 0]289 ];290 _jsPlumb.makeAnchor(spec);291 });292 test(": unknown anchor type should throw Error", function () {293 try {294 support.addDiv("d1");295 support.addDiv("d2");296 _jsPlumb.connect({source: "d1", target: "d2", anchor: "FOO"});297 }298 catch (e) {299 // ok 300 ok(e.msg == "jsPlumb: unknown anchor type 'FOO'", "useful error message");301 }302 });303 test(": unknown anchor type should not throw Error because it is suppressed in Defaults", function () {304 try {305 support.addDiv("d1");306 support.addDiv("d2");307 _jsPlumb.Defaults.DoNotThrowErrors = true;308 _jsPlumb.connect({source: "d1", target: "d2", anchor: "FOO"});309 }310 catch (e) {311 // ok 312 ok(e.msg != "jsPlumb: unknown anchor type 'FOO'", "no error message");313 }314 });315 test(": unknown endpoint type should throw Error", function () {316 try {317 support.addDiv("d1");318 support.addDiv("d2");319 _jsPlumb.Defaults.DoNotThrowErrors = false;320 _jsPlumb.connect({source: "d1", target: "d2", endpoint: "FOO"});321 }322 catch (e) {323 // ok 324 ok(e.msg == "jsPlumb: unknown endpoint type 'FOO'", "useful error message");325 }326 });327 test(": unknown endpoint type should not throw Error because it is suppressed in Defaults", function () {328 try {329 support.addDiv("d1");330 support.addDiv("d2");331 _jsPlumb.Defaults.DoNotThrowErrors = true;332 _jsPlumb.connect({source: "d1", target: "d2", endpoint: "FOO"});333 }334 catch (e) {335 // ok 336 ok(e.msg != "jsPlumb: unknown endpoint type 'FOO'", "no error message");337 }338 });339 test(": unknown connector type should throw Error", function () {340 try {341 support.addDiv("d1");342 support.addDiv("d2");343 _jsPlumb.Defaults.DoNotThrowErrors = false;344 _jsPlumb.connect({source: "d1", target: "d2", connector: "FOO"});345 }346 catch (e) {347 // ok 348 ok(e.message == "jsPlumb: unknown connector type 'FOO'", "useful error message");349 }350 });351 test(": unknown connector type should not throw Error because it is suppressed in Defaults", function () {352 try {353 support.addDiv("d1");354 support.addDiv("d2");355 _jsPlumb.Defaults.DoNotThrowErrors = true;356 _jsPlumb.connect({source: "d1", target: "d2", connector: "FOO"});357 }358 catch (e) {359 // ok 360 ok(e.message != "jsPlumb: unknown connector type 'FOO'", "no error message");361 }362 });363// ************** / ANCHORS ********************************************364// **************************** DETACHING CONNECTIONS ****************************************************365 test(': deleteConnection does not fail when no arguments are provided', function () {366 var d3 = support.addDiv("d3"), d4 = support.addDiv("d4");367 _jsPlumb.connect({source: d3, target: d4});368 _jsPlumb.deleteConnection();369 expect(0);370 });371 // test that detach does not fire an event by default372 test(': _jsPlumb.detach should fire detach event by default', function () {373 var d5 = support.addDiv("d5"), d6 = support.addDiv("d6");374 var conn = _jsPlumb.connect({source: d5, target: d6});375 var eventCount = 0;376 _jsPlumb.bind("connectionDetached", function (c) {377 eventCount++;378 });379 _jsPlumb.deleteConnection(conn);380 equal(eventCount, 1);381 });382 // test that detach does not fire an event by default383 test(': _jsPlumb.detach should fire detach event by default, using params object', function () {384 var d5 = support.addDiv("d5"), d6 = support.addDiv("d6");385 var conn = _jsPlumb.connect({source: d5, target: d6});386 var eventCount = 0;387 _jsPlumb.bind("connectionDetached", function (c) {388 eventCount++;389 });390 _jsPlumb.deleteConnection(conn);391 equal(eventCount, 1);392 });393 // test that detach fires an event when instructed to do so394 test(': _jsPlumb.detach should not fire detach event when instructed to not do so', function () {395 var d5 = support.addDiv("d5"), d6 = support.addDiv("d6");396 var conn = _jsPlumb.connect({source: d5, target: d6});397 var eventCount = 0;398 _jsPlumb.bind("connectionDetached", function (c) {399 eventCount++;400 });401 _jsPlumb.deleteConnection(conn, {fireEvent: false});402 equal(eventCount, 0);403 });404 // issue 81405 test(': _jsPlumb.detach should fire only one detach event (pass Connection as argument)', function () {406 var d5 = support.addDiv("d5"), d6 = support.addDiv("d6");407 var conn = _jsPlumb.connect({source: d5, target: d6});408 var eventCount = 0;409 _jsPlumb.bind("connectionDetached", function (c) {410 eventCount++;411 });412 _jsPlumb.deleteConnection(conn);413 equal(eventCount, 1);414 });415 // issue 81416 test(': _jsPlumb.detach should fire only one detach event (pass Connection as param in argument)', function () {417 var d5 = support.addDiv("d5"), d6 = support.addDiv("d6");418 var conn = _jsPlumb.connect({source: d5, target: d6});419 var eventCount = 0;420 _jsPlumb.bind("connectionDetached", function (c) {421 eventCount++;422 });423 _jsPlumb.deleteConnection(conn);424 equal(eventCount, 1);425 });426 // issue 81427 test(': delete should fire only one detach event (pass source and targets as strings as arguments in params object)', function () {428 var d5 = support.addDiv("d5"), d6 = support.addDiv("d6");429 var conn = _jsPlumb.connect({source: d5, target: d6});430 var eventCount = 0;431 _jsPlumb.bind("connectionDetached", function (c) {432 eventCount++;433 });434 _jsPlumb.select({source: "d5", target: "d6"}).delete();435 equal(eventCount, 1);436 });437 // issue 81438 test(': detach should fire only one detach event (pass source and targets as divs as arguments in params object)', function () {439 var d5 = support.addDiv("d5"), d6 = support.addDiv("d6");440 var conn = _jsPlumb.connect({source: d5, target: d6});441 var eventCount = 0;442 _jsPlumb.bind("connectionDetached", function (c) {443 eventCount++;444 });445 _jsPlumb.select({source: d5, target: d6}).delete();446 equal(eventCount, 1);447 });448 //TODO make sure you run this test with a single detach call, to ensure that449 // single detach calls result in the connection being removed. detachEveryConnection can450 // just blow away the connectionsByScope array and recreate it.451 test(': getConnections (simple case, default scope)', function () {452 var d5 = support.addDiv("d5"), d6 = support.addDiv("d6");453 _jsPlumb.connect({source: d5, target: d6});454 var c = _jsPlumb.getConnections(); // will get all connections in the default scope.455 equal(c.length, 1, "there is one connection");456 });457 test(': getConnections (simple case, multiple targets, default scope)', function () {458 var d5 = support.addDiv("d5"), d6 = support.addDiv("d6"), d7 = support.addDiv("d7");459 _jsPlumb.connect({source: d5, target: d6});460 _jsPlumb.connect({source: d5, target: d7});461 var c = _jsPlumb.getConnections(); // will get all connections in the default scope.462 equal(c.length, 2, "there are two connections");463 });464 test('getConnections (uuids)', function () {465 var d5 = support.addDiv("d5"),466 d6 = support.addDiv("d6"),467 e5 = _jsPlumb.addEndpoint(d5, {uuid:"foo"}),468 e6 = _jsPlumb.addEndpoint(d6, {uuid:"bar"});469 _jsPlumb.connect({uuids:["foo", "bar"]});470 var c = _jsPlumb.getConnections(); // will get all connections in the default scope.471 equal(c.length, 1, "there is one connection");472 equal(c[0].getUuids()[0], "foo");473 equal(c[0].getUuids()[1], "bar");474 });475 test('getConnections (simple case, default scope; detach by element id using params object)', function () {476 var d5 = support.addDiv("d5"), d6 = support.addDiv("d6"), d7 = support.addDiv("d7");477 _jsPlumb.connect({source: d5, target: d6});478 _jsPlumb.connect({source: d6, target: d7});479 var c = _jsPlumb.getConnections(); // will get all connections480 equal(c.length, 2, "there are two connections initially");481 _jsPlumb.select({source: 'd5', target: 'd6'}).delete();482 c = _jsPlumb.getConnections(); // will get all connections483 equal(c.length, 1, "after detaching one, there is now one connection.");484 });485 test(': getConnections (simple case, default scope; detach by id using params object)', function () {486 var d5 = support.addDiv("d5"), d6 = support.addDiv("d6"), d7 = support.addDiv("d7");487 _jsPlumb.connect({source: d5, target: d6});488 _jsPlumb.connect({source: d6, target: d7});489 var c = _jsPlumb.getConnections(); // will get all connections490 equal(c.length, 2, "there are two connections initially");491 _jsPlumb.select({source: "d5", target: "d6"}).delete();492 c = _jsPlumb.getConnections(); // will get all connections493 equal(c.length, 1, "after detaching one, there is now one connection.");494 });495 test(': getConnections (simple case, default scope; detach by element object using params object)', function () {496 var d5 = support.addDiv("d5"), d6 = support.addDiv("d6"), d7 = support.addDiv("d7");497 _jsPlumb.connect({source: d5, target: d6});498 _jsPlumb.connect({source: d6, target: d7});499 var c = _jsPlumb.getConnections(); // will get all connections500 equal(c.length, 2, "there are two connections initially");501 _jsPlumb.select({source: d5, target: d6}).delete();502 c = _jsPlumb.getConnections(); // will get all connections503 equal(c.length, 1, "after detaching one, there is now one connection.");504 });505 test(': getConnections (simple case, default scope; detach by Connection)', function () {506 var d5 = support.addDiv("d5"), d6 = support.addDiv("d6"), d7 = support.addDiv("d7");507 var c56 = _jsPlumb.connect({source: d5, target: d6});508 var c67 = _jsPlumb.connect({source: d6, target: d7});509 var c = _jsPlumb.getConnections(); // will get all connections510 equal(c.length, 2, "there are two connections initially");511 _jsPlumb.deleteConnection(c56);512 c = _jsPlumb.getConnections(); // will get all connections513 equal(c.length, 1, "after detaching one, there is now one connection.");514 });515// beforeDetach functionality516 test(": detach; beforeDetach on connect call returns false", function () {517 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");518 var c = _jsPlumb.connect({source: d1, target: d2, beforeDetach: function (conn) {519 return false;520 }});521 var beforeDetachCount = 0;522 _jsPlumb.bind("beforeDetach", function (connection) {523 beforeDetachCount++;524 });525 equal(c.endpoints[0].connections.length, 1, "source endpoint has a connection initially");526 _jsPlumb.deleteConnection(c);527 equal(c.endpoints[0].connections.length, 1, "source endpoint has a connection after detach call was denied");528 equal(beforeDetachCount, 0, "jsplumb before detach was not called");529 });530 test(": detach; beforeDetach on connect call returns undefined", function () {531 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");532 var c = _jsPlumb.connect({source: d1, target: d2, beforeDetach: function (conn) { }});533 var beforeDetachCount = 0;534 _jsPlumb.bind("beforeDetach", function (connection) {535 beforeDetachCount++;536 });537 equal(c.endpoints[0].connections.length, 1, "source endpoint has a connection initially");538 _jsPlumb.deleteConnection(c);539 equal(c.endpoints, null, "connection's endpoints were removed");540 });541 test(": detach; beforeDetach on connect call returns true", function () {542 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");543 var c = _jsPlumb.connect({source: d1, target: d2, beforeDetach: function (conn) {544 return true;545 }});546 equal(c.endpoints[0].connections.length, 1, "source endpoint has a connection initially");547 _jsPlumb.deleteConnection(c);548 equal(c.endpoints, null, "connection's endpoints were removed");549 });550 test(": detach; beforeDetach on connect call throws an exception; we treat it with the contempt it deserves and pretend it said the detach was ok.", function () {551 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");552 var c = _jsPlumb.connect({source: d1, target: d2, beforeDetach: function (conn) {553 throw "i am an example of badly coded beforeDetach, but i don't break jsPlumb ";554 }});555 equal(c.endpoints[0].connections.length, 1, "source endpoint has a connection initially");556 _jsPlumb.deleteConnection(c);557 equal(c.endpoints, null, "connection's endpoints were removed");558 });559 test(": detach; beforeDetach on addEndpoint call to source Endpoint returns false", function () {560 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");561 var e1 = _jsPlumb.addEndpoint(d1, { isSource: true, beforeDetach: function (conn) {562 return false;563 } }),564 e2 = _jsPlumb.addEndpoint(d2, { isTarget: true });565 var c = _jsPlumb.connect({source: e1, target: e2});566 var beforeDetachCount = 0;567 _jsPlumb.bind("beforeDetach", function (connection) {568 beforeDetachCount++;569 });570 equal(c.endpoints[0].connections.length, 1, "source endpoint has a connection initially");571 _jsPlumb.deleteConnection(c);572 equal(c.endpoints[0].connections.length, 1, "source endpoint has a connection after detach call was denied");573 equal(beforeDetachCount, 0, "jsplumb before detach was not called");574 });575 test(": detach; beforeDetach on addEndpoint call to source Endpoint returns true", function () {576 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");577 var e1 = _jsPlumb.addEndpoint(d1, { isSource: true, beforeDetach: function (conn) {578 return true;579 } }),580 e2 = _jsPlumb.addEndpoint(d2, { isTarget: true });581 var c = _jsPlumb.connect({source: e1, target: e2});582 equal(c.endpoints[0].connections.length, 1, "source endpoint has a connection initially");583 _jsPlumb.deleteConnection(c);584 equal(c.endpoints, null, "connection's endpoints were removed");585 });586 test(": Endpoint.detach; beforeDetach on addEndpoint call to source Endpoint returns false; Endpoint.detach returns false too (the UI needs it to)", function () {587 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");588 var e1 = _jsPlumb.addEndpoint(d1, { isSource: true, beforeDetach: function (conn) {589 return false;590 } }),591 e2 = _jsPlumb.addEndpoint(d2, { isTarget: true });592 var c = _jsPlumb.connect({source: e1, target: e2});593 equal(c.endpoints[0].connections.length, 1, "source endpoint has a connection initially");594 var success = _jsPlumb.deleteConnection(c);595 equal(c.endpoints[0].connections.length, 1, "source endpoint has a connection after detach call was denied");596 ok(!success, "Endpoint reported detach did not execute");597 });598 test(": _jsPlumb.deleteConnection; beforeDetach on addEndpoint call to target Endpoint returns false", function () {599 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");600 var e1 = _jsPlumb.addEndpoint(d1, { isSource: true }),601 e2 = _jsPlumb.addEndpoint(d2, { isTarget: true, beforeDetach: function (conn) {602 return false;603 } });604 var c = _jsPlumb.connect({source: e1, target: e2});605 equal(c.endpoints[1].connections.length, 1, "target endpoint has a connection initially");606 _jsPlumb.deleteConnection(c);607 equal(c.endpoints[1].connections.length, 1, "target endpoint has a connection after detach call was denied");608 });609 test(": _jsPlumb.deleteConnection; beforeDetach on addEndpoint call to target Endpoint returns false but detach is forced", function () {610 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");611 var e1 = _jsPlumb.addEndpoint(d1, { isSource: true }),612 e2 = _jsPlumb.addEndpoint(d2, { isTarget: true, beforeDetach: function (conn) {613 return false;614 } });615 var c = _jsPlumb.connect({source: e1, target: e2});616 equal(c.endpoints[1].connections.length, 1, "target endpoint has a connection initially");617 _jsPlumb.deleteConnection(c, {force: true});618 equal(c.endpoints, null, "connection's endpoints were removed");619 });620 test(": _jsPlumb.deleteConnection; beforeDetach on addEndpoint call to target Endpoint returns true", function () {621 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");622 var e1 = _jsPlumb.addEndpoint(d1, { isSource: true }),623 e2 = _jsPlumb.addEndpoint(d2, { isTarget: true, beforeDetach: function (conn) {624 return true;625 } });626 var c = _jsPlumb.connect({source: e1, target: e2});627 equal(c.endpoints[1].connections.length, 1, "target endpoint has a connection initially");628 _jsPlumb.deleteConnection(c);629 equal(c.endpoints, null, "connection's endpoints were removed");630 equal(e1.connections.length, 0, "source endpoint has no connections");631 equal(e2.connections.length, 0, "target endpoint has no connections");632 });633 test(": _jsPlumb.deleteConnection; beforeDetach bound to _jsPlumb returns false", function () {634 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");635 var e1 = _jsPlumb.addEndpoint(d1, { isSource: true }),636 e2 = _jsPlumb.addEndpoint(d2, { isTarget: true });637 var c = _jsPlumb.connect({source: e1, target: e2});638 var beforeDetachCount = 0;639 _jsPlumb.bind("beforeDetach", function (connection) {640 ok(connection.sourceId === "d1", "connection is provided and configured with correct source");641 ok(connection.targetId === "d2", "connection is provided and configured with correct target");642 beforeDetachCount++;643 return false;644 });645 equal(c.endpoints[1].connections.length, 1, "target endpoint has a connection initially");646 _jsPlumb.deleteConnection(c);647 equal(c.endpoints[1].connections.length, 1, "target endpoint has a connection after detach call was denied");648 equal(beforeDetachCount, 1, "beforeDetach was called only one time");649 });650 test(": _jsPlumb.deleteConnection; beforeDetach bound to _jsPlumb returns true", function () {651 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");652 var e1 = _jsPlumb.addEndpoint(d1, { isSource: true }),653 e2 = _jsPlumb.addEndpoint(d2, { isTarget: true });654 var c = _jsPlumb.connect({source: e1, target: e2});655 _jsPlumb.bind("beforeDetach", function (connection) {656 ok(connection.sourceId === "d1", "connection is provided and configured with correct source");657 ok(connection.targetId === "d2", "connection is provided and configured with correct target");658 return true;659 });660 equal(c.endpoints[1].connections.length, 1, "target endpoint has a connection initially");661 _jsPlumb.deleteConnection(c);662 equal(c.endpoints, null, "connection's endpoints were removed");663 equal(e1.connections.length, 0, "source endpoint has no connections");664 equal(e2.connections.length, 0, "target endpoint has no connections");665 });666 test(": _jsPlumb.deleteConnection; beforeDetach bound to _jsPlumb returns false", function () {667 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");668 var e1 = _jsPlumb.addEndpoint(d1, { isSource: true }),669 e2 = _jsPlumb.addEndpoint(d2, { isTarget: true });670 var c = _jsPlumb.connect({source: e1, target: e2});671 _jsPlumb.bind("beforeDetach", function (connection) {672 return false;673 });674 equal(c.endpoints[1].connections.length, 1, "target endpoint has a connection initially");675 var deleted = _jsPlumb.deleteConnection(c);676 equal(e1.connections.length, 1, "source endpoint's connection was not removed");677 equal(deleted, false, "deleteConnection reports connection not deleted");678 });679 test("Endpoint.deleteEveryConnection", function() {680 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");681 var e1 = _jsPlumb.addEndpoint(d1, { isSource: true }),682 e2 = _jsPlumb.addEndpoint(d2, { isTarget: true });683 var c = _jsPlumb.connect({source: e1, target: e2});684 equal(_jsPlumb.select().length, 1, "there is one connection in the instance");685 e1.deleteEveryConnection();686 equal(_jsPlumb.select().length, 0, "there are no connections in the instance");687 });688 test(": _jsPlumb.deleteConnectionsForElement ; beforeDetach on addEndpoint call to target Endpoint returns true so we detach", function () {689 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");690 var e1 = _jsPlumb.addEndpoint(d1, { isSource: true }),691 e2 = _jsPlumb.addEndpoint(d2, { isTarget: true, beforeDetach: function (conn) {692 return true;693 } });694 var c = _jsPlumb.connect({source: e1, target: e2});695 equal(_jsPlumb.select().length, 1, "there is one connection in the instance");696 equal(c.endpoints[1].connections.length, 1, "target endpoint has a connection initially");697 _jsPlumb.deleteConnectionsForElement(d1);698 equal(_jsPlumb.select().length, 0, "there are no connections in the instance");699 equal(c.endpoints, null, "connection's endpoints were removed");700 equal(e1.connections.length, 0, "source endpoint has no connections");701 equal(e2.connections.length, 0, "target endpoint has no connections");702 });703 test(": _jsPlumb.deleteConnectionsForElement ; beforeDetach on addEndpoint call to target Endpoint returns false so we do not detach", function () {704 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");705 var e1 = _jsPlumb.addEndpoint(d1, { isSource: true }),706 e2 = _jsPlumb.addEndpoint(d2, { isTarget: true, beforeDetach: function (conn) {707 return false;708 } });709 var c = _jsPlumb.connect({source: e1, target: e2});710 equal(_jsPlumb.select().length, 1, "there is one connection in the instance");711 equal(c.endpoints[1].connections.length, 1, "target endpoint has a connection initially");712 _jsPlumb.deleteConnectionsForElement(d1);713 equal(_jsPlumb.select().length, 1, "there is still 1 connection in the instance");714 equal(c.endpoints.length, 2, "connection's endpoints are in place");715 equal(e1.connections.length, 1, "source endpoint has one connection");716 equal(e2.connections.length, 1, "target endpoint has one connection");717 });718//719 test(": _jsPlumb.deleteConnectionsForElement ; beforeDetach on jsPlumb returns false and we dont detach", function () {720 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");721 var e1 = _jsPlumb.addEndpoint(d1, { isSource: true }),722 e2 = _jsPlumb.addEndpoint(d2, { isTarget: true });723 var c = _jsPlumb.connect({source: e1, target: e2});724 equal(c.endpoints[1].connections.length, 1, "target endpoint has a connection initially");725 _jsPlumb.bind("beforeDetach", function (conn) {726 return false;727 });728 _jsPlumb.deleteConnectionsForElement(d1);729 equal(c.endpoints.length, 2, "connection's endpoints were not removed");730 equal(e1.connections.length, 1, "source endpoint has a connection");731 equal(e2.connections.length, 1, "target endpoint has a connection");732 });733//734 test(": _jsPlumb.deleteConnectionsForElement ; beforeDetach on jsPlumb returns true and we do detach", function () {735 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");736 var e1 = _jsPlumb.addEndpoint(d1, { isSource: true }),737 e2 = _jsPlumb.addEndpoint(d2, { isTarget: true });738 var c = _jsPlumb.connect({source: e1, target: e2});739 equal(c.endpoints[1].connections.length, 1, "target endpoint has a connection initially");740 _jsPlumb.bind("beforeDetach", function (conn) {741 return true;742 });743 _jsPlumb.deleteConnectionsForElement(d1);744 equal(c.endpoints, null, "connection's endpoints were removed");745 equal(e1.connections.length, 0, "source endpoint has no connections");746 equal(e2.connections.length, 0, "target endpoint has no connections");747 });748 test(": _jsPlumb.deleteEveryConnection ; beforeDetach on jsPlumb returns false and we dont detach", function () {749 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");750 var e1 = _jsPlumb.addEndpoint(d1, { isSource: true }),751 e2 = _jsPlumb.addEndpoint(d2, { isTarget: true });752 var c = _jsPlumb.connect({source: e1, target: e2});753 equal(c.endpoints[1].connections.length, 1, "target endpoint has a connection initially");754 _jsPlumb.bind("beforeDetach", function (conn) {755 return false;756 });757 _jsPlumb.deleteEveryConnection();758 equal(c.endpoints.length, 2, "connection's endpoints were not removed");759 equal(e1.connections.length, 1, "source endpoint has a connection");760 equal(e2.connections.length, 1, "target endpoint has a connection");761 });762 test(": _jsPlumb.deleteEveryConnection ; beforeDetach on jsPlumb returns true and we do detach", function () {763 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");764 var e1 = _jsPlumb.addEndpoint(d1, { isSource: true }),765 e2 = _jsPlumb.addEndpoint(d2, { isTarget: true });766 var c = _jsPlumb.connect({source: e1, target: e2});767 equal(c.endpoints[1].connections.length, 1, "target endpoint has a connection initially");768 _jsPlumb.bind("beforeDetach", function (conn) {769 return true;770 });771 _jsPlumb.deleteEveryConnection();772 equal(c.endpoints, null, "connection's endpoints were removed");773 equal(e1.connections.length, 0, "source endpoint has no connections");774 equal(e2.connections.length, 0, "target endpoint has no connections");775 });776 test(": _jsPlumb.deleteEveryConnection ; beforeDetach on jsPlumb returns true but we have forced deletion of the connection", function () {777 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");778 var e1 = _jsPlumb.addEndpoint(d1, { isSource: true }),779 e2 = _jsPlumb.addEndpoint(d2, { isTarget: true });780 var c = _jsPlumb.connect({source: e1, target: e2});781 equal(c.endpoints[1].connections.length, 1, "target endpoint has a connection initially");782 _jsPlumb.bind("beforeDetach", function (conn) {783 return false;784 });785 var deletedCount = _jsPlumb.deleteEveryConnection({force: true});786 equal(c.endpoints, null, "connection's endpoints were removed");787 equal(e1.connections.length, 0, "source endpoint has no connections");788 equal(e2.connections.length, 0, "target endpoint has no connections");789 equal(deletedCount, 1, "deleteEveryConnection reports one connection deleted");790 });791 test(": _jsPlumb.deleteEveryConnection ; beforeDetach on addEndpoint call to target Endpoint returns false so we do not delete the connection", function () {792 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");793 var e1 = _jsPlumb.addEndpoint(d1, { isSource: true }),794 e2 = _jsPlumb.addEndpoint(d2, { isTarget: true, beforeDetach: function (conn) {795 return false;796 } });797 var c = _jsPlumb.connect({source: e1, target: e2});798 equal(c.endpoints[1].connections.length, 1, "target endpoint has a connection initially");799 _jsPlumb.deleteEveryConnection();800 equal(c.endpoints.length, 2, "connection's endpoints were not removed");801 equal(e1.connections.length, 1, "source endpoint has 1 connection");802 equal(e2.connections.length, 1, "target endpoint has 1 connection");803 equal(_jsPlumb.select().length, 1, "one connection in the instance");804 });805 test(": Endpoint.deleteEveryConnection ; beforeDetach on addEndpoint call to target Endpoint returns false so we dont delete the connection", function () {806 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");807 var e1 = _jsPlumb.addEndpoint(d1, { isSource: true }),808 e2 = _jsPlumb.addEndpoint(d2, { isTarget: true, beforeDetach: function (conn) {809 return false;810 } });811 var c = _jsPlumb.connect({source: e1, target: e2});812 equal(c.endpoints[1].connections.length, 1, "target endpoint has a connection initially");813 e1.deleteEveryConnection();814 equal(c.endpoints.length, 2, "connection's endpoints were not removed");815 equal(e1.connections.length, 1, "source endpoint has one connection");816 equal(e2.connections.length, 1, "target endpoint has one connection");817 });818 test(": Endpoint.deleteEveryConnection ; beforeDetach on addEndpoint call to target Endpoint returns false but force is true so we delete the connection", function () {819 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");820 var e1 = _jsPlumb.addEndpoint(d1, { isSource: true }),821 e2 = _jsPlumb.addEndpoint(d2, { isTarget: true, beforeDetach: function (conn) {822 return false;823 } });824 var c = _jsPlumb.connect({source: e1, target: e2});825 equal(c.endpoints[1].connections.length, 1, "target endpoint has a connection initially");826 e1.deleteEveryConnection({force:true});827 equal(c.endpoints, null, "connection's endpoints were not removed");828 equal(e1.connections.length, 0, "source endpoint has no connections");829 equal(e2.connections.length, 0, "target endpoint has no connections");830 });831// ******** end of beforeDetach tests **************832// detachEveryConnection/detachAllConnections fireEvent overrides tests833 test(": _jsPlumb.deleteEveryConnection fires events", function () {834 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2"), connCount = 0;835 _jsPlumb.bind("connection", function () {836 connCount++;837 });838 _jsPlumb.bind("connectionDetached", function () {839 connCount--;840 });841 _jsPlumb.connect({source: d1, target: d2});842 _jsPlumb.connect({source: d1, target: d2});843 equal(connCount, 2, "two connections registered");844 _jsPlumb.deleteEveryConnection();845 equal(connCount, 0, "no connections registered");846 });847 test(": _jsPlumb.deleteEveryConnection doesn't fire events when instructed not to", function () {848 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2"), connCount = 0;849 _jsPlumb.bind("connection", function () {850 connCount++;851 });852 _jsPlumb.bind("connectionDetached", function () {853 connCount--;854 });855 _jsPlumb.connect({source: d1, target: d2});856 _jsPlumb.connect({source: d1, target: d2});857 equal(connCount, 2, "two connections registered");858 _jsPlumb.deleteEveryConnection({fireEvent: false});859 equal(connCount, 2, "two connections registered");860 });861 test(": _jsPlumb.deleteConnectionsForElement fires events", function () {862 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2"), connCount = 0,863 e1 = _jsPlumb.addEndpoint(d1), e2 = _jsPlumb.addEndpoint(d2);864 _jsPlumb.bind("connection", function () {865 connCount++;866 });867 _jsPlumb.bind("connectionDetached", function () {868 connCount--;869 });870 _jsPlumb.connect({source: d1, target: d2});871 _jsPlumb.connect({source: d1, target: d2});872 equal(connCount, 2, "two connections registered");873 _jsPlumb.deleteConnectionsForElement("d1");874 equal(connCount, 0, "no connections registered after delete connections for element");875 });876 test(": _jsPlumb.deleteConnectionsForElement doesn't fire events when instructed not to", function () {877 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2"), connCount = 0,878 e1 = _jsPlumb.addEndpoint(d1), e2 = _jsPlumb.addEndpoint(d2);879 _jsPlumb.bind("connection", function () {880 connCount++;881 });882 _jsPlumb.bind("connectionDetached", function () {883 connCount--;884 });885 _jsPlumb.connect({source: d1, target: d2});886 _jsPlumb.connect({source: d1, target: d2});887 equal(connCount, 2, "two connections counted by event listener");888 _jsPlumb.deleteConnectionsForElement("d1", {fireEvent: false});889 equal(connCount, 2, "two connections still registered by event listener");890 });891// **************************** / DETACHING CONNECTIONS **************************************************** 892 test(" : deletions, simple endpoint case", function () {893 // 1. simplest case - an endpoint that exists on some element. 894 var d1 = support.addDiv("d1"),895 e = _jsPlumb.addEndpoint(d1);896 //dt = _jsPlumb.deleteObject({endpoint: e});897 equal(_jsPlumb.selectEndpoints().length, 1, "1 endpoint registered");898 _jsPlumb.deleteEndpoint(e);899 equal(_jsPlumb.selectEndpoints().length, 0, "0 endpoints registered");900// equal(jsPlumbUtil.isEmpty(dt.endpoints), false, "one endpoint to delete");901// equal(dt.endpointCount, 1, "one endpoint to delete");902// equal(jsPlumbUtil.isEmpty(dt.connections), true, "zero connections to delete");903// equal(dt.connectionCount, 0, "zero connections to delete");904 // 2. create two endpoints and connect them, then delete one. the other endpoint should905 // still exist.906 var d2 = support.addDiv("d2"), d3 = support.addDiv("d3"),907 e2 = _jsPlumb.addEndpoint(d2),908 e3 = _jsPlumb.addEndpoint(d3);909 _jsPlumb.connect({source: e2, target: e3});910 equal(_jsPlumb.select({source: d2}).length, 1, "one connection exists");911//912 equal(_jsPlumb.getEndpoints(d3).length, 1, "one endpoint on d3");913 _jsPlumb.deleteEndpoint(e2);914// var dt2 = _jsPlumb.deleteObject({endpoint: e2});915// equal(jsPlumbUtil.isEmpty(dt2.endpoints), false, "one endpoint to delete");916// equal(jsPlumbUtil.isEmpty(dt2.connections), false, "one connection to delete");917 equal(_jsPlumb.select({source: d2}).length, 0, "zero connections exist");918 equal(_jsPlumb.getEndpoints(d2).length, 0, "zero endpoints on d2");919 equal(_jsPlumb.getEndpoints(d3).length, 1, "one endpoint on d3");920//921// // 3. create two endpoints and connect them, then detach the connection. the two endpoints922// // should still exist, because they did not set `deleteOnEmpty`.923 var d4 = support.addDiv("d4"), d5 = support.addDiv("d5"),924 e4 = _jsPlumb.addEndpoint(d4),925 e5 = _jsPlumb.addEndpoint(d5);926 var c = _jsPlumb.connect({source: e4, target: e5});927 equal(_jsPlumb.select({source: d4}).length, 1, "one connection exists");928 _jsPlumb.deleteConnection(c);929 equal(_jsPlumb.select({source: d4}).length, 0, "zero connections exist");930 equal(_jsPlumb.getEndpoints(d4).length, 1, "one endpoint on d4");931 equal(_jsPlumb.getEndpoints(d5).length, 1, "one endpoint on d5");932 // set deleteOnEmpty on e4933 e4.setDeleteOnEmpty(true);934 // 4. same as (3) but now deleteOnEmpty is set on e4935 c = _jsPlumb.connect({source: e4, target: e5});936 equal(_jsPlumb.select({source: d4}).length, 1, "one connection exists between e4 and e5");937 _jsPlumb.deleteConnection(c);938 equal(_jsPlumb.select({source: d4}).length, 0, "zero connections exist after connection delete");939 equal(_jsPlumb.getEndpoints(d4).length, 0, "no endpoints on d4");940 equal(_jsPlumb.getEndpoints(d5).length, 1, "one endpoint on d5");941//942// // 5.set deleteEndpointsOnDetach on the connect call, then delete the connection.943 var d6 = support.addDiv("d6"), d7 = support.addDiv("d7");944 var c2 = _jsPlumb.connect({source: d6, target: d7, deleteEndpointsOnEmpty: true});945 equal(_jsPlumb.select({source: d6}).length, 1, "one connection exists");946 _jsPlumb.deleteConnection(c2);947//948 equal(_jsPlumb.select({source: d6}).length, 0, "zero connections exist");949 equal(_jsPlumb.getEndpoints(d6).length, 0, "no endpoints on d6");950 equal(_jsPlumb.getEndpoints(d7).length, 0, "no endpoints on d7");951 });952 test(': getConnections (scope testScope)', function () {953 var d5 = support.addDiv("d5"), d6 = support.addDiv("d6");954 _jsPlumb.connect({source: d5, target: d6, scope: 'testScope'});955 var c = _jsPlumb.getConnections("testScope"); // will get all connections in testScope 956 equal(c.length, 1, "there is one connection");957 equal(c[0].sourceId, 'd5', "the connection's source is d5");958 equal(c[0].targetId, 'd6', "the connection's source is d6");959 c = _jsPlumb.getConnections(); // will get all connections in default scope; should be none.960 equal(c.length, 0, "there are no connections in the default scope");961 });962 test(': _jsPlumb.getAllConnections (filtered by scope)', function () {963 var d8 = support.addDiv("d8"), d9 = support.addDiv("d9"), d10 = support.addDiv('d10');964 _jsPlumb.connect({source: d8, target: d9, scope: 'testScope'});965 _jsPlumb.connect({source: d9, target: d10}); // default scope966 var c = _jsPlumb.getAllConnections(); // will get all connections 967 equal(c.length, 2, "all connections has two entries");968 // now supply a list of scopes969 c = _jsPlumb.getConnections();970 equal(c.length, 1, "1 connection in default scope");971 c = _jsPlumb.getConnections("testScope");972 equal(c.length, 1, "there is one connection in 'testScope'");973 });974 test(': _jsPlumb.getConnections (filtered by scope and sourceId)', function () {975 var d8 = support.addDiv("d8"), d9 = support.addDiv("d9"), d10 = support.addDiv('d10');976 _jsPlumb.connect({source: d8, target: d9, scope: 'testScope'});977 _jsPlumb.connect({source: d9, target: d8, scope: 'testScope'});978 _jsPlumb.connect({source: d9, target: d10}); // default scope979 var c = _jsPlumb.getConnections({scope: 'testScope', source: 'd8'}); // will get all connections with sourceId 'd8' 980 equal(c.length, 1, "there is one connection in 'testScope' from d8");981 });982 test(': _jsPlumb.getConnections (filtered by scope, source id and target id)', function () {983 var d11 = support.addDiv("d11"), d12 = support.addDiv("d12"), d13 = support.addDiv('d13');984 _jsPlumb.connect({source: d11, target: d12, scope: 'testScope'});985 _jsPlumb.connect({source: d12, target: d13, scope: 'testScope'});986 _jsPlumb.connect({source: d11, target: d13, scope: 'testScope'});987 var c = _jsPlumb.getConnections({scope: 'testScope', source: 'd11', target: 'd13'});988 equal(c.length, 1, "there is one connection from d11 to d13");989 });990 test(': _jsPlumb.getConnections (filtered by a list of scopes)', function () {991 var d11 = support.addDiv("d11"), d12 = support.addDiv("d12"), d13 = support.addDiv('d13');992 _jsPlumb.connect({source: d11, target: d12, scope: 'testScope'});993 _jsPlumb.connect({source: d12, target: d13, scope: 'testScope2'});994 _jsPlumb.connect({source: d11, target: d13, scope: 'testScope3'});995 var c = _jsPlumb.getConnections({scope: ['testScope', 'testScope3']});996 equal(c['testScope'].length, 1, 'there is one connection in testScope');997 equal(c['testScope3'].length, 1, 'there is one connection in testScope3');998 equal(c['testScope2'], null, 'there are no connections in testScope2');999 });1000 test(': _jsPlumb.getConnections (filtered by a list of scopes and source ids)', function () {1001 var d11 = support.addDiv("d11"), d12 = support.addDiv("d12"), d13 = support.addDiv('d13');1002 _jsPlumb.connect({source: d11, target: d12, scope: 'testScope'});1003 _jsPlumb.connect({source: d13, target: d12, scope: 'testScope'});1004 _jsPlumb.connect({source: d12, target: d13, scope: 'testScope2'});1005 _jsPlumb.connect({source: d11, target: d13, scope: 'testScope3'});1006 var c = _jsPlumb.getConnections({scope: ['testScope', 'testScope3'], source: ['d11']});1007 equal(c['testScope'].length, 1, 'there is one connection in testScope');1008 equal(c['testScope3'].length, 1, 'there is one connection in testScope3');1009 equal(c['testScope2'], null, 'there are no connections in testScope2');1010 });1011 test(': _jsPlumb.getConnections (filtered by a list of scopes, source ids and target ids)', function () {1012 _jsPlumb.deleteEveryConnection();1013 var d11 = support.addDiv("d11"), d12 = support.addDiv("d12"), d13 = support.addDiv('d13'), d14 = support.addDiv("d14"), d15 = support.addDiv("d15");1014 _jsPlumb.connect({source: d11, target: d12, scope: 'testScope'});1015 _jsPlumb.connect({source: d13, target: d12, scope: 'testScope'});1016 _jsPlumb.connect({source: d11, target: d14, scope: 'testScope'});1017 _jsPlumb.connect({source: d11, target: d15, scope: 'testScope'});1018 _jsPlumb.connect({source: d12, target: d13, scope: 'testScope2'});1019 _jsPlumb.connect({source: d11, target: d13, scope: 'testScope3'});1020 var c = _jsPlumb.getConnections({scope: ['testScope', 'testScope3'], source: ['d11'], target: ['d14', 'd15']});1021 equal(c['testScope'].length, 2, 'there are two connections in testScope');1022 equal(c['testScope3'], null, 'there are no connections in testScope3');1023 equal(c['testScope2'], null, 'there are no connections in testScope2');1024 var anEntry = c['testScope'][0];1025 ok(anEntry.endpoints[0] != null, "Source endpoint is set");1026 ok(anEntry.endpoints[1] != null, "Target endpoint is set");1027 equal(anEntry.source.getAttribute("id"), "d11", "Source is div d11");1028 equal(anEntry.target.getAttribute("id"), "d14", "Target is div d14");1029 });1030 test(': getEndpoints, one Endpoint added by addEndpoint, get Endpoints by selector', function () {1031 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");1032 _jsPlumb.addEndpoint(d1);1033 var e = _jsPlumb.getEndpoints(d1);1034 equal(e.length, 1, "there is one endpoint for element d1");1035 });1036 test(': getEndpoints, one Endpoint added by addEndpoint, get Endpoints by id', function () {1037 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");1038 _jsPlumb.addEndpoint(d1);1039 var e = _jsPlumb.getEndpoints("d1");1040 equal(e.length, 1, "there is one endpoint for element d1");1041 });1042 test(': addEndpoint, css class on anchor added to endpoint artefact and element', function () {1043 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");1044 var ep = _jsPlumb.addEndpoint(d1, { anchor: [0, 0, 1, 1, 0, 0, "foo" ]});1045 ok(jsPlumb.hasClass(ep.canvas, "jtk-endpoint-anchor-foo"), "class set on endpoint");1046 ok(jsPlumb.hasClass(d1, "jtk-endpoint-anchor-foo"), "class set on element");1047 _jsPlumb.deleteEndpoint(ep);1048 ok(!jsPlumb.hasClass(d1, "jtk-endpoint-anchor-foo"), "class removed from element");1049 });1050 test(': addEndpoint, blank css class on anchor does not add extra prefix ', function () {1051 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");1052 var ep = _jsPlumb.addEndpoint(d1, { anchor: [0, 0, 1, 1, 0, 0 ]});1053 ok(jsPlumb.hasClass(ep.canvas, "jtk-endpoint-anchor"), "class set on endpoint");1054 ok(jsPlumb.hasClass(d1, "jtk-endpoint-anchor"), "class set on element");1055 _jsPlumb.deleteEndpoint(ep);1056 ok(!jsPlumb.hasClass(d1, "jtk-endpoint-anchor"), "class removed from element");1057 });1058 test(': connect, jsplumb connected class added to elements', function () {1059 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2"), d3 = support.addDiv("d3");1060 // connect two elements and check they both get the class.1061 var c = _jsPlumb.connect({source:d1, target:d2});1062 ok(jsPlumb.hasClass(d1, "jtk-connected"), "class set on element d1");1063 ok(jsPlumb.hasClass(d2, "jtk-connected"), "class set on element d2");1064 // connect d1 to another element and check d3 gets the class1065 var c2 = _jsPlumb.connect({source:d1, target:d3});1066 ok(jsPlumb.hasClass(d3, "jtk-connected"), "class set on element d3");1067 // now disconnect original connection. d2 should no longer have the class, but d1 should, since it has1068 // still one connection.1069 _jsPlumb.deleteConnection(c);1070 ok(jsPlumb.hasClass(d1, "jtk-connected"), "class still on element d1");1071 ok(!jsPlumb.hasClass(d2, "jtk-connected"), "class removed from element d2");1072 _jsPlumb.deleteConnection(c2);1073 ok(!jsPlumb.hasClass(d1, "jtk-connected"), "class removed from element d1");1074 ok(!jsPlumb.hasClass(d3, "jtk-connected"), "class removed from element d3");1075 });1076 test(': connection event listeners', function () {1077 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");1078 var returnedParams = null;1079 _jsPlumb.bind("connection", function (params) {1080 returnedParams = jsPlumb.extend({}, params);1081 });1082 var c = _jsPlumb.connect({source: d1, target: d2});1083 ok(returnedParams != null, "new connection listener event was fired");1084 ok(returnedParams.connection != null, 'connection is set');1085 equal(returnedParams.sourceId, "d1", 'sourceid is set');1086 equal(returnedParams.targetId, "d2", 'targetid is set');1087 equal(returnedParams.source.getAttribute("id"), "d1", 'source is set');1088 equal(returnedParams.target.getAttribute("id"), "d2", 'target is set');1089 ok(returnedParams.sourceEndpoint != null, "source endpoint is not null");1090 ok(returnedParams.targetEndpoint != null, "target endpoint is not null");1091 _jsPlumb.bind("connectionDetached", function (params) {1092 returnedParams = jsPlumb.extend({}, params);1093 });1094 _jsPlumb.deleteConnection(c);1095 ok(returnedParams.connection != null, 'connection is set');1096 });1097 test(': detach event listeners (detach by connection)', function () {1098 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");1099 var returnedParams = null;1100 _jsPlumb.bind("connectionDetached", function (params) {1101 returnedParams = jsPlumb.extend({}, params);1102 });1103 var conn = _jsPlumb.connect({source: d1, target: d2});1104 _jsPlumb.deleteConnection(conn);1105 ok(returnedParams != null, "removed connection listener event was fired");1106 ok(returnedParams.connection != null, "removed connection listener event passed in connection");1107 });1108 test(': detach event listeners (detach by element ids)', function () {1109 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");1110 var returnedParams = null;1111 _jsPlumb.bind("connectionDetached", function (params) {1112 returnedParams = jsPlumb.extend({}, params);1113 });1114 _jsPlumb.connect({source: d1, target: d2});1115 _jsPlumb.select({source: "d1", target: "d2"}).delete();1116 ok(returnedParams != null, "removed connection listener event was fired");1117 });1118 test(': detach event listeners (detach by elements)', function () {1119 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");1120 var returnedParams = null;1121 _jsPlumb.bind("connectionDetached", function (params) {1122 returnedParams = jsPlumb.extend({}, params);1123 });1124 var conn = _jsPlumb.connect({source: d1, target: d2});1125 _jsPlumb.select({source: d1, target: d2}).delete();1126 ok(returnedParams != null, "removed connection listener event was fired");1127 });1128 test(': detach event listeners (via jsPlumb.deleteConnection method)', function () {1129 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");1130 var e1 = _jsPlumb.addEndpoint(d1, {});1131 var e2 = _jsPlumb.addEndpoint(d2, {});1132 var returnedParams = null;1133 _jsPlumb.bind("connectionDetached", function (params) {1134 returnedParams = jsPlumb.extend({}, params);1135 });1136 var conn = _jsPlumb.connect({sourceEndpoint: e1, targetEndpoint: e2});1137 _jsPlumb.deleteConnection(conn);1138 ok(returnedParams != null, "removed connection listener event was fired");1139 });1140 test(': detach event listeners (via Endpoint.detachFrom method)', function () {1141 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");1142 var e1 = _jsPlumb.addEndpoint(d1, {});1143 var e2 = _jsPlumb.addEndpoint(d2, {});1144 var returnedParams = null;1145 _jsPlumb.bind("connectionDetached", function (params) {1146 returnedParams = jsPlumb.extend({}, params);1147 });1148 _jsPlumb.connect({sourceEndpoint: e1, targetEndpoint: e2});1149 e1.detachFrom(e2);1150 ok(returnedParams != null, "removed connection listener event was fired");1151 });1152 test(': detach event listeners (via Endpoint.deleteEveryConnection method)', function () {1153 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");1154 var e1 = _jsPlumb.addEndpoint(d1, {});1155 var e2 = _jsPlumb.addEndpoint(d2, {});1156 var returnedParams = null;1157 _jsPlumb.bind("connectionDetached", function (params) {1158 returnedParams = jsPlumb.extend({}, params);1159 });1160 _jsPlumb.connect({sourceEndpoint: e1, targetEndpoint: e2});1161 e1.deleteEveryConnection();1162 ok(returnedParams != null, "removed connection listener event was fired");1163 });1164 test(': detach event listeners (via _jsPlumb.deleteEndpoint method)', function () {1165 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");1166 var e1 = _jsPlumb.addEndpoint(d1, {});1167 var e2 = _jsPlumb.addEndpoint(d2, {});1168 var returnedParams = null;1169 _jsPlumb.bind("connectionDetached", function (params) {1170 returnedParams = jsPlumb.extend({}, params);1171 });1172 _jsPlumb.connect({sourceEndpoint: e1, targetEndpoint: e2});1173 _jsPlumb.deleteEndpoint(e1);1174 ok(returnedParams != null, "removed connection listener event was fired");1175 });1176 test(': detach event listeners (ensure cleared by _jsPlumb.reset)', function () {1177 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");1178 var returnedParams = null;1179 _jsPlumb.bind("connectionDetached", function (params) {1180 returnedParams = jsPlumb.extend({}, params);1181 });1182 var conn = _jsPlumb.connect({source: d1, target: d2});1183 _jsPlumb.select({source: d1, target: d2}).delete();1184 ok(returnedParams != null, "removed connection listener event was fired");1185 returnedParams = null;1186 _jsPlumb.reset();1187 conn = _jsPlumb.connect({source: d1, target: d2});1188 _jsPlumb.select({source: d1, target: d2}).delete();1189 ok(returnedParams == null, "connection listener was cleared by _jsPlumb.reset()");1190 equal(_jsPlumb.select({source: d1}).length, 0, "no connections from d1 after detach with two connections as arguments");1191 });1192 test(': connection events that throw errors', function () {1193 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");1194 var returnedParams = null, returnedParams2 = null;1195 _jsPlumb.bind("connection", function (params) {1196 returnedParams = jsPlumb.extend({}, params);1197 throw "oh no!";1198 });1199 _jsPlumb.connect({source: d1, target: d2});1200 var d3 = support.addDiv("d3"), d4 = support.addDiv("d4");1201 _jsPlumb.connect({source: d3, target: d4});1202 ok(returnedParams != null, "new connection listener event was fired; we threw an error, _jsPlumb survived.");1203 });1204 test(': unbinding connection event listeners, connection', function () {1205 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");1206 var count = 0;1207 _jsPlumb.bind("connection", function (params) {1208 count++;1209 });1210 var c = _jsPlumb.connect({source: d1, target: d2});1211 ok(count == 1, "received one event");1212 _jsPlumb.unbind("connection");1213 var c2 = _jsPlumb.connect({source: d1, target: d2});1214 ok(count == 1, "still received only one event");1215 _jsPlumb.bind("connectionDetached", function (params) {1216 count--;1217 });1218 _jsPlumb.deleteConnection(c);1219 ok(count == 0, "count of events is now zero");1220 });1221 test(': unbinding connection event listeners, detach', function () {1222 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");1223 var count = 0;1224 _jsPlumb.bind("connection", function (params) {1225 count++;1226 });1227 var c = _jsPlumb.connect({source: d1, target: d2});1228 ok(count == 1, "received one event");1229 var c2 = _jsPlumb.connect({source: d1, target: d2});1230 ok(count == 2, "received two events");1231 _jsPlumb.bind("connectionDetached", function (params) {1232 count--;1233 });1234 _jsPlumb.deleteConnection(c);1235 ok(count == 1, "count of events is now one");1236 _jsPlumb.unbind("connectionDetached");1237 _jsPlumb.deleteConnection(c2);1238 ok(count == 1, "count of events is still one");1239 });1240 test(': unbinding connection event listeners, all listeners', function () {1241 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");1242 var count = 0;1243 _jsPlumb.bind("connection", function (params) {1244 count++;1245 });1246 var c = _jsPlumb.connect({source: d1, target: d2}),1247 c2 = _jsPlumb.connect({source: d1, target: d2}),1248 c3 = _jsPlumb.connect({source: d1, target: d2});1249 ok(count == 3, "received three events");1250 _jsPlumb.bind("connectionDetached", function (params) {1251 count--;1252 });1253 _jsPlumb.deleteConnection(c);1254 ok(count == 2, "count of events is now two");1255 _jsPlumb.unbind(); // unbind everything1256 _jsPlumb.deleteConnection(c2);1257 _jsPlumb.deleteConnection(c3);1258 _jsPlumb.connect({source: d1, target: d2});1259 _jsPlumb.connect({source: d1, target: d2});1260 _jsPlumb.connect({source: d1, target: d2});1261 _jsPlumb.connect({source: d1, target: d2});1262 ok(count == 2, "count of events is still two");1263 });1264 test(": Endpoint.detachFrom", function () {1265 var d16 = support.addDiv("d16"), d17 = support.addDiv("d17");1266 var e16 = _jsPlumb.addEndpoint(d16, {isSource: true});1267 ok(e16.anchor, 'endpoint 16 has an anchor');1268 var e17 = _jsPlumb.addEndpoint(d17, {isSource: true});1269 var conn = _jsPlumb.connect({sourceEndpoint: e16, targetEndpoint: e17});1270 assertConnectionCount(e16, 1);1271 assertConnectionCount(e17, 1);1272 assertConnectionByScopeCount(_jsPlumb.getDefaultScope(), 1, _jsPlumb);1273 e16.detachFrom(e17);1274 // but the connection should be gone, meaning not registered by _jsPlumb and not registered on either Endpoint:1275 assertConnectionCount(e16, 0);1276 assertConnectionCount(e17, 0);1277 assertConnectionByScopeCount(_jsPlumb.getDefaultScope(), 0, _jsPlumb);1278 });1279 test(": Endpoint.detachFromConnection", function () {1280 var d16 = support.addDiv("d16"), d17 = support.addDiv("d17");1281 var e16 = _jsPlumb.addEndpoint(d16, {isSource: true});1282 ok(e16.anchor, 'endpoint 16 has an anchor');1283 var e17 = _jsPlumb.addEndpoint(d17, {isSource: true});1284 var conn = _jsPlumb.connect({sourceEndpoint: e16, targetEndpoint: e17});1285 assertConnectionCount(e16, 1);1286 assertConnectionCount(e17, 1);1287 assertConnectionByScopeCount(_jsPlumb.getDefaultScope(), 1, _jsPlumb);1288 e16.detachFromConnection(conn);1289 // but endpoint e16 should have no connections now.1290 assertConnectionCount(e16, 0);1291 assertConnectionCount(e17, 1);1292 assertConnectionByScopeCount(_jsPlumb.getDefaultScope(), 1, _jsPlumb);1293 });1294 test(": Endpoint.detachAll", function () {1295 var d16 = support.addDiv("d16"), d17 = support.addDiv("d17"), d18 = support.addDiv("d18");1296 var e16 = _jsPlumb.addEndpoint("d16", {isSource: true, maxConnections: -1});1297 ok(e16.anchor, 'endpoint 16 has an anchor');1298 var e17 = _jsPlumb.addEndpoint("d17", {isSource: true});1299 var e18 = _jsPlumb.addEndpoint("d18", {isSource: true});1300 _jsPlumb.connect({sourceEndpoint: e16, targetEndpoint: e17});1301 _jsPlumb.connect({sourceEndpoint: e16, targetEndpoint: e18});1302 assertConnectionCount(e16, 2);1303 assertConnectionCount(e17, 1);1304 assertConnectionCount(e18, 1);1305 assertConnectionByScopeCount(_jsPlumb.getDefaultScope(), 2, _jsPlumb);1306 e16.deleteEveryConnection();1307 assertConnectionCount(e16, 0);1308 assertConnectionCount(e17, 0);1309 assertConnectionByScopeCount(_jsPlumb.getDefaultScope(), 0, _jsPlumb);1310 });1311 test(": Endpoint.detach", function () {1312 var d16 = support.addDiv("d16"), d17 = support.addDiv("d17");1313 var e16 = _jsPlumb.addEndpoint(d16, {isSource: true});1314 ok(e16.anchor, 'endpoint 16 has an anchor');1315 var e17 = _jsPlumb.addEndpoint(d17, {isSource: true});1316 var conn = _jsPlumb.connect({sourceEndpoint: e16, targetEndpoint: e17});1317 assertConnectionCount(e16, 1);1318 assertConnectionCount(e17, 1);1319 assertConnectionByScopeCount(_jsPlumb.getDefaultScope(), 1, _jsPlumb);1320 _jsPlumb.deleteConnection(conn);1321 // but the connection should be gone, meaning not registered by _jsPlumb and not registered on either Endpoint:1322 assertConnectionCount(e16, 0);1323 assertConnectionCount(e17, 0);1324 assertConnectionByScopeCount(_jsPlumb.getDefaultScope(), 0, _jsPlumb);1325 });1326 test("Image Endpoint remove", function() {1327 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");1328 _jsPlumb.makeSource(d1, {1329 endpoint:[ "Image", { src:"atom.png" }]1330 });1331 _jsPlumb.makeTarget(d2, {1332 endpoint:[ "Image", { src:"atom.png" }]1333 });1334 var c = _jsPlumb.connect({source:d1, target:d2});1335 var ep = c.endpoints[0];1336 ok(ep.canvas.parentNode != null, "endpoint 1 is in the DOM");1337 _jsPlumb.deleteConnection(c);1338 ok(ep.canvas.parentNode == null, "endpoint 1 is no longer in the DOM");1339 });1340 // Some race condition causes this to fail randomly.1341 // asyncTest(" jsPlumbUtil.setImage on Endpoint, with supplied onload", function() {1342 // var d1 = support.addDiv("d1"), d2 = support.addDiv("d2"),1343 // e = {1344 // endpoint:[ "Image", {1345 // src:"../demo/home/endpointTest1.png",1346 // onload:function(imgEp) {1347 // _jsPlumb.repaint("d1");1348 // ok(imgEp._jsPlumb.img.src.indexOf("endpointTest1.png") != -1, "image source is correct");1349 // ok(imgEp._jsPlumb.img.src.indexOf("endpointTest1.png") != -1, "image elementsource is correct");1350 // imgEp.canvas.setAttribute("id", "iwilllookforthis");1351 //_jsPlumb.removeAllEndpoints("d1");1352 // ok(document.getElementById("iwilllookforthis") == null, "image element was removed after remove endpoint");1353 // }1354 // } ]1355 // };1356 // start();1357 // _jsPlumb.addEndpoint(d1, e);1358 // expect(3);1359 // });1360 test(": setting endpoint uuid", function () {1361 var uuid = "14785937583175927504313";1362 var d16 = support.addDiv("d16"), d17 = support.addDiv("d17"), d18 = support.addDiv("d18");1363 var e16 = _jsPlumb.addEndpoint(d16, {isSource: true, maxConnections: -1, uuid: uuid});1364 equal(e16.getUuid(), uuid, "endpoint's uuid was set correctly");1365 });1366 test(": _jsPlumb.getEndpoint (by uuid)", function () {1367 var uuid = "14785937583175927504313";1368 var d16 = support.addDiv("d16");1369 var e16 = _jsPlumb.addEndpoint(d16, {isSource: true, maxConnections: -1, uuid: uuid});1370 var e = _jsPlumb.getEndpoint(uuid);1371 equal(e.getUuid(), uuid, "retrieved endpoint by uuid");1372 });1373 test(": _jsPlumb.deleteEndpoint (by uuid, simple case)", function () {1374 var uuid = "14785937583175927504313";1375 var d16 = support.addDiv("d16");1376 var e16 = _jsPlumb.addEndpoint(d16, {isSource: true, maxConnections: -1, uuid: uuid});1377 var e = _jsPlumb.getEndpoint(uuid);1378 equal(e.getUuid(), uuid, "retrieved endpoint by uuid");1379 _jsPlumb.deleteEndpoint(uuid);1380 var f = _jsPlumb.getEndpoint(uuid);1381 equal(f, null, "endpoint has been deleted");1382 var ebe = _jsPlumb.getEndpoints("d16");1383 equal(ebe.length, 0, "no endpoints registered for element d16 anymore");1384 });1385 test(": deleteEndpoint (by uuid, connections too)", function () {1386 // create two endpoints (one with a uuid), add them to two divs and then connect them.1387 var uuid = "14785937583175927504313";1388 var d16 = support.addDiv("d16"), d17 = support.addDiv("d17");1389 var e16 = _jsPlumb.addEndpoint(d16, {isSource: true, maxConnections: -1, uuid: uuid});1390 var e17 = _jsPlumb.addEndpoint(d17, {isSource: true, maxConnections: -1});1391 _jsPlumb.connect({sourceEndpoint: e16, targetEndpoint: e17});1392 // check that the connection was ok.1393 equal(e16.connections.length, 1, "e16 has one connection");1394 equal(e17.connections.length, 1, "e17 has one connection");1395 // delete the endpoint that has a uuid. verify that the endpoint cannot be retrieved and that the connection has been removed, but that1396 // element d17 still has its Endpoint.1397 _jsPlumb.deleteEndpoint(uuid);1398 var f = _jsPlumb.getEndpoint(uuid);1399 equal(f, null, "endpoint has been deleted");1400 equal(e16.connections.length, 0, "e16 has no connections");1401 equal(e17.connections.length, 0, "e17 has no connections");1402 var ebe = _jsPlumb.getEndpoints("d16");1403 equal(ebe.length, 0, "no endpoints registered for element d16 anymore");1404 ebe = _jsPlumb.getEndpoints("d17");1405 equal(ebe.length, 1, "element d17 still has its Endpoint");1406 // now delete d17's endpoint and check that it has gone.1407 _jsPlumb.deleteEndpoint(e17);1408 f = _jsPlumb.getEndpoint(e17);1409 equal(f, null, "endpoint has been deleted");1410 ebe = _jsPlumb.getEndpoints("d17");1411 equal(ebe.length, 0, "element d17 no longer has any Endpoints");1412 });1413 test(": deleteEndpoint (by reference, simple case)", function () {1414 var uuid = "14785937583175927504313";1415 var d16 = support.addDiv("d16");1416 var e16 = _jsPlumb.addEndpoint(d16, {isSource: true, maxConnections: -1, uuid: uuid});1417 var e = _jsPlumb.getEndpoint(uuid);1418 equal(e.getUuid(), uuid, "retrieved endpoint by uuid");1419 _jsPlumb.deleteEndpoint(e16);1420 var f = _jsPlumb.getEndpoint(uuid);1421 equal(f, null, "endpoint has been deleted");1422 });1423 test(": _jsPlumb.deleteEndpoint (by reference, connections too)", function () {1424 var uuid = "14785937583175927504313";1425 var d16 = support.addDiv("d16"), d17 = support.addDiv("d17");1426 var e16 = _jsPlumb.addEndpoint(d16, {isSource: true, maxConnections: -1, uuid: uuid});1427 var e17 = _jsPlumb.addEndpoint(d17, {isSource: true, maxConnections: -1});1428 _jsPlumb.connect({sourceEndpoint: e16, targetEndpoint: e17});1429 equal(e16.connections.length, 1, "e16 has one connection");1430 equal(e17.connections.length, 1, "e17 has one connection");1431 _jsPlumb.deleteEndpoint(e16);1432 var f = _jsPlumb.getEndpoint(uuid);1433 equal(f, null, "endpoint has been deleted");1434 equal(e16.connections.length, 0, "e16 has no connections");1435 equal(e17.connections.length, 0, "e17 has no connections");1436 });1437 test(": _jsPlumb.deleteEveryEndpoint", function () {1438 var uuid = "14785937583175927504313";1439 var d16 = support.addDiv("d16"), d17 = support.addDiv("d17");1440 var e16 = _jsPlumb.addEndpoint(d16, {isSource: true, maxConnections: -1, uuid: uuid});1441 var e17 = _jsPlumb.addEndpoint(d17, {isSource: true, maxConnections: -1});1442 var e = _jsPlumb.getEndpoint(uuid);1443 equal(e.getUuid(), uuid, "retrieved endpoint by uuid");1444 _jsPlumb.deleteEveryEndpoint();1445 var f = _jsPlumb.getEndpoint(uuid);1446 equal(f, null, "endpoint e16 has been deleted");1447 var g = _jsPlumb.getEndpoint(e17);1448 equal(g, null, "endpoint e17 has been deleted");1449 });1450 test(": _jsPlumb.deleteEveryEndpoint (connections too)", function () {1451 var uuid = "14785937583175927504313";1452 var d16 = support.addDiv("d16"), d17 = support.addDiv("d17");1453 var e16 = _jsPlumb.addEndpoint(d16, {isSource: true, maxConnections: -1, uuid: uuid});1454 var e17 = _jsPlumb.addEndpoint(d17, {isSource: true, maxConnections: -1});1455 _jsPlumb.connect({sourceEndpoint: e16, targetEndpoint: e17});1456 assertConnectionByScopeCount(_jsPlumb.getDefaultScope(), 1, _jsPlumb);1457 var e = _jsPlumb.getEndpoint(uuid);1458 equal(e.getUuid(), uuid, "retrieved endpoint by uuid");1459 _jsPlumb.deleteEveryEndpoint();1460 var f = _jsPlumb.getEndpoint(uuid);1461 equal(f, null, "endpoint e16 has been deleted");1462 var g = _jsPlumb.getEndpoint(e17);1463 equal(g, null, "endpoint e17 has been deleted");1464 assertConnectionByScopeCount(_jsPlumb.getDefaultScope(), 0, _jsPlumb);1465 });1466 test(": removeAllEndpoints, referenced as string", function () {1467 var d1 = support.addDiv("d1");1468 _jsPlumb.addEndpoint(d1);1469 _jsPlumb.addEndpoint(d1);1470 _jsPlumb.addEndpoint(d1);1471 _jsPlumb.removeAllEndpoints("d1");1472 _jsPlumb.repaintEverything();1473 _jsPlumb.addEndpoint(d1);1474 equal(_jsPlumb.getEndpoints("d1").length, 1, "one endpoint for the given element");1475 expect(1);1476 });1477 test(": removeAllEndpoints, referenced as selector", function () {1478 var d1 = support.addDiv("d1");1479 _jsPlumb.addEndpoint(d1);1480 _jsPlumb.addEndpoint(d1);1481 _jsPlumb.addEndpoint(d1);1482 _jsPlumb.removeAllEndpoints(d1);1483 _jsPlumb.repaintEverything();1484 _jsPlumb.addEndpoint(d1);1485 equal(_jsPlumb.getEndpoints("d1").length, 1, "one endpoint for the given element");1486 expect(1);1487 });1488 //1489 //test(": removeAllEndpoints - element already deleted", function() {1490 //var d1 = support.addDiv("d1");1491 // _jsPlumb.addEndpoint(d1);1492 // _jsPlumb.addEndpoint(d1);1493 // _jsPlumb.addEndpoint(d1);1494 // d1.remove();1495 // _jsPlumb.removeAllEndpoints("d1");1496 // _jsPlumb.repaintEverything();1497 //expect(0);1498 // });1499 test(": jsPlumb.remove, element identified by string", function () {1500 var d1 = support.addDiv("d1");1501 var e1 = _jsPlumb.addEndpoint(d1);1502 _jsPlumb.remove("d1");1503 _jsPlumb.repaintEverything(); // shouldn't complain1504 equal(_jsPlumb.getEndpoints("d1").length, 0, "no endpoints for the given element");1505 ok(e1.canvas.parentNode == null, "e1 cleaned up");1506 });1507 test(": jsPlumb.remove, element identified by selector", function () {1508 var d1 = support.addDiv("d1");1509 var e1 = _jsPlumb.addEndpoint(d1);1510 _jsPlumb.addEndpoint(d1);1511 _jsPlumb.addEndpoint(d1);1512 _jsPlumb.remove(d1);1513 _jsPlumb.repaintEverything(); // shouldn't complain1514 equal(_jsPlumb.getEndpoints("d1").length, 0, "no endpoints for the given element");1515 ok(e1.canvas.parentNode == null, "e1 cleaned up");1516 });1517 test(": jsPlumb.remove, element identified by string, nested endpoints", function () {1518 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2"), d3 = support.addDiv("d3");1519 d1.appendChild(d2);1520 d1.appendChild(d3);1521 _jsPlumb.addEndpoint(d1);1522 _jsPlumb.addEndpoint(d2);1523 _jsPlumb.addEndpoint(d2);1524 _jsPlumb.addEndpoint(d3);1525 ok(_jsPlumb.getEndpoints("d1").length == 1, " 1 endpoint exists for the parent div");1526 ok(_jsPlumb.getEndpoints("d2").length == 2, " 2 endpoints exist for the first nested div");1527 ok(_jsPlumb.getEndpoints("d3").length == 1, " 1 endpoint exists for the first nested div");1528 _jsPlumb.remove("d1");1529 _jsPlumb.repaintEverything(); // shouldn't complain1530 equal(_jsPlumb.getEndpoints("d1").length, 0, "no endpoints for the main div");1531 equal(_jsPlumb.getEndpoints("d2").length, 0, "no endpoints for the nested div");1532 equal(_jsPlumb.getEndpoints("d3").length, 0, "no endpoints for the nested div");1533 });1534 test(": jsPlumb.remove, nested element, element identified by string, nested endpoints", function () {1535 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");1536 d1.appendChild(d2);1537 _jsPlumb.addEndpoint(d2);1538 _jsPlumb.addEndpoint(d2);1539 _jsPlumb.addEndpoint(d2);1540 _jsPlumb.remove("d2");1541 _jsPlumb.repaint("d1"); // shouldn't complain1542 equal(_jsPlumb.getEndpoints("d1").length, 0, "no endpoints for the main div");1543 equal(_jsPlumb.getEndpoints("d2").length, 0, "no endpoints for the nested div");1544 expect(2);1545 });1546 test("jsPlumb.remove fires connectionDetached events", function () {1547 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2"), d3 = support.addDiv("d3");1548 _jsPlumb.connect({source: d1, target: d2});1549 _jsPlumb.connect({source: d1, target: d3});1550 var o = 0;1551 _jsPlumb.bind("connectionDetached", function () {1552 o++;1553 });1554 _jsPlumb.remove(d1);1555 equal(o, 2, "connectionDetached event was fired twice.");1556 });1557 test("jsPlumb.removeAllEndpoints fires connectionDetached events", function () {1558 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2"), d3 = support.addDiv("d3");1559 _jsPlumb.connect({source: d1, target: d2});1560 _jsPlumb.connect({source: d1, target: d3});1561 var o = 0;1562 _jsPlumb.bind("connectionDetached", function () {1563 o++;1564 });1565 _jsPlumb.removeAllEndpoints(d1);1566 equal(o, 2, "connectionDetached event was fired twice.");1567 });1568 test(": jsPlumb.empty, element identified by string", function () {1569 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2"), d3 = support.addDiv("d3");1570 d1.appendChild(d2);1571 d1.appendChild(d3);1572 _jsPlumb.addEndpoint(d1);1573 _jsPlumb.addEndpoint(d2);1574 _jsPlumb.addEndpoint(d2);1575 _jsPlumb.addEndpoint(d3);1576 ok(_jsPlumb.getEndpoints("d1").length == 1, " 1 endpoint exists for the parent div");1577 ok(_jsPlumb.getEndpoints("d2").length == 2, " 2 endpoints exist for the first nested div");1578 ok(_jsPlumb.getEndpoints("d3").length == 1, " 1 endpoint exists for the first nested div");1579 _jsPlumb.empty("d1");1580 _jsPlumb.repaintEverything(); // shouldn't complain1581 equal(_jsPlumb.getEndpoints("d1").length, 1, " 1 endpoint exists for the parent div");1582 equal(_jsPlumb.getEndpoints("d2").length, 0, "no endpoints for the first nested div");1583 equal(_jsPlumb.getEndpoints("d3").length, 0, "no endpoints for the second nested div");1584 });1585 //1586 //I'm on the fence about this one. There is a method you can call to tell jsPlumb that an element1587 //has been deleted, so in theory you should not get into a situation where you are doing what this1588 //test does. But you can of course get there accidentally, which is one reason why it would be good1589 //for this test to exist.1590 //test(": deleting endpoints of deleted element should not fail", function() {1591 //var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");1592 //var ep1 = _jsPlumb.addEndpoint(d1);1593 //_jsPlumb.addEndpoint(d1);1594 //_jsPlumb.addEndpoint(d1);1595 //_jsPlumb.connect({source:ep1, target:"d2"});1596 //d1.remove();1597 //var eps = _jsPlumb.getEndpoints(d1);1598 //equal(eps.length, 3, "there are three endpoints for d1");1599 //for (var i = 0; i < eps.length; i++) {1600 //_jsPlumb.deleteEndpoint(eps[i]);1601 //}1602 //eps = _jsPlumb.getEndpoints("d1");1603 //equal(eps, null, "there are zero endpoints for d1");1604 //equal(_jsPlumb.getEndpoints("d1").length, 0, "no endpoints for the given element");1605 //});1606 test(": _jsPlumb.addEndpoint (simple case)", function () {1607 var d16 = support.addDiv("d16"), d17 = support.addDiv("d17");1608 var e16 = _jsPlumb.addEndpoint(d16, {anchor: [0, 0.5, 0, -1]});1609 var e17 = _jsPlumb.addEndpoint(d17, {anchor: "TopCenter"});1610 equal(e16.anchor.x, 0);1611 equal(e16.anchor.y, 0.5);1612 equal(e17.anchor.x, 0.5);1613 equal(e17.anchor.y, 0);1614 });1615 test(": _jsPlumb.addEndpoint (simple case, dynamic anchors)", function () {1616 var d16 = support.addDiv("d16"), d17 = support.addDiv("d17");1617 var e16 = _jsPlumb.addEndpoint(d16, {anchor: [1618 [0, 0.5, 0, -1],1619 [1, 0.5, 0, 1]1620 ]});1621 var e17 = _jsPlumb.addEndpoint(d17, {anchor: ["TopCenter", "BottomCenter"]});1622 equal(e16.anchor.isDynamic, true, "Endpoint 16 has a dynamic anchor");1623 equal(e17.anchor.isDynamic, true, "Endpoint 17 has a dynamic anchor");1624 });1625 test(": _jsPlumb.addEndpoint (simple case, two arg method)", function () {1626 var d16 = support.addDiv("d16"), d17 = support.addDiv("d17");1627 var e16 = _jsPlumb.addEndpoint(d16, {isSource: true, isTarget: false}, {anchor: [0, 0.5, 0, -1]});1628 var e17 = _jsPlumb.addEndpoint(d17, {isTarget: true, isSource: false}, {anchor: "TopCenter"});1629 equal(e16.anchor.x, 0);1630 equal(e16.anchor.y, 0.5);1631 equal(false, e16.isTarget);1632 equal(true, e16.isSource);1633 equal(e17.anchor.x, 0.5);1634 equal(e17.anchor.y, 0);1635 equal(true, e17.isTarget);1636 equal(false, e17.isSource);1637 });1638 test(": _jsPlumb.addEndpoints (simple case)", function () {1639 var d16 = support.addDiv("d16"), d17 = support.addDiv("d17");1640 var e16 = _jsPlumb.addEndpoints(d16, [1641 {isSource: true, isTarget: false, anchor: [0, 0.5, 0, -1] },1642 { isTarget: true, isSource: false, anchor: "TopCenter" }1643 ]);1644 equal(e16[0].anchor.x, 0);1645 equal(e16[0].anchor.y, 0.5);1646 equal(false, e16[0].isTarget);1647 equal(true, e16[0].isSource);1648 equal(e16[1].anchor.x, 0.5);1649 equal(e16[1].anchor.y, 0);1650 equal(true, e16[1].isTarget);1651 equal(false, e16[1].isSource);1652 });1653 test(": _jsPlumb.addEndpoint (empty array)", function () {1654 _jsPlumb.addEndpoint([], {isSource: true});1655 _jsPlumb.repaintEverything();1656 expect(0);1657 });1658 test(": _jsPlumb.addEndpoints (with reference params)", function () {1659 var d16 = support.addDiv("d16"), d17 = support.addDiv("d17");1660 var refParams = {anchor: "RightMiddle"};1661 var e16 = _jsPlumb.addEndpoints(d16, [1662 {isSource: true, isTarget: false},1663 { isTarget: true, isSource: false }1664 ], refParams);1665 equal(e16[0].anchor.x, 1);1666 equal(e16[0].anchor.y, 0.5);1667 equal(false, e16[0].isTarget);1668 equal(true, e16[0].isSource);1669 equal(e16[1].anchor.x, 1);1670 equal(e16[1].anchor.y, 0.5);1671 equal(true, e16[1].isTarget);1672 equal(false, e16[1].isSource);1673 });1674 test(": _jsPlumb.addEndpoint (simple case, dynamic anchors, two arg method)", function () {1675 var d16 = support.addDiv("d16"), d17 = support.addDiv("d17");1676 var e16 = _jsPlumb.addEndpoint(d16, {isSource: true, isTarget: false}, {anchor: [1677 [0, 0.5, 0, -1],1678 [1, 0.5, 0, 1]1679 ]});1680 var e17 = _jsPlumb.addEndpoint(d17, {isTarget: true, isSource: false}, {anchor: ["TopCenter", "BottomCenter"]});1681 equal(e16.anchor.isDynamic, true, "Endpoint 16 has a dynamic anchor");1682 equal(e17.anchor.isDynamic, true, "Endpoint 17 has a dynamic anchor");1683 });1684 test(": _jsPlumb.addEndpoints (default overlays)", function () {1685 _jsPlumb.Defaults.Overlays = [1686 [ "Label", { id: "label" } ]1687 ];1688 var d16 = support.addDiv("d16"), d17 = support.addDiv("d17"),1689 e1 = _jsPlumb.addEndpoint(d16),1690 e2 = _jsPlumb.addEndpoint(d17);1691 ok(e1.getOverlay("label") != null, "endpoint 1 has overlay from defaults");1692 });1693 test(": _jsPlumb.addEndpoints (default overlays)", function () {1694 _jsPlumb.Defaults.Overlays = [1695 [ "Label", { id: "label" } ]1696 ];1697 var d16 = support.addDiv("d16"), d17 = support.addDiv("d17"),1698 e1 = _jsPlumb.addEndpoint(d16, {1699 overlays: [1700 ["Label", { id: "label2", location: [ 0.5, 1 ] } ]1701 ]1702 }),1703 e2 = _jsPlumb.addEndpoint(d17);1704 ok(e1.getOverlay("label") != null, "endpoint 1 has overlay from defaults");1705 ok(e1.getOverlay("label2") != null, "endpoint 1 has overlay from addEndpoint call");1706 });1707 test(": _jsPlumb.addEndpoints (end point set label)", function () {1708 var d16 = support.addDiv("d16"), d17 = support.addDiv("d17"),1709 e1 = _jsPlumb.addEndpoint(d16),1710 e2 = _jsPlumb.addEndpoint(d17);1711 e1.setLabel("FOO");1712 equal(e1.getLabel(), "FOO", "endpoint's label is correct");1713 });1714 test(": _jsPlumb.addEndpoints (end point set label in constructor, as string)", function () {1715 var d16 = support.addDiv("d16"), d17 = support.addDiv("d17"),1716 e1 = _jsPlumb.addEndpoint(d16, {label: "FOO"}),1717 e2 = _jsPlumb.addEndpoint(d17);1718 equal(e1.getLabel(), "FOO", "endpoint's label is correct");1719 });1720 test(": _jsPlumb.addEndpoints (end point set label in constructor, as function)", function () {1721 var d16 = support.addDiv("d16"), d17 = support.addDiv("d17"),1722 e1 = _jsPlumb.addEndpoint(d16, {label: function () {1723 return "BAZ";1724 }, labelLocation: 0.1}),1725 e2 = _jsPlumb.addEndpoint(d17);1726 equal(e1.getLabel()(), "BAZ", "endpoint's label is correct");1727 equal(e1.getLabelOverlay().getLocation(), 0.1, "endpoint's label's location is correct");1728 });1729 test(": jsPlumb.addEndpoint (events)", function () {1730 var d16 = support.addDiv("d16"),1731 click = 0,1732 e16 = _jsPlumb.addEndpoint(d16, {1733 isSource: true,1734 isTarget: false,1735 anchor: [0, 0.5, 0, -1],1736 events: {1737 click: function (ep) {1738 click++;1739 }1740 }1741 });1742 e16.fire("click", function () {1743 click++;1744 });1745 equal(click, 1, "click event was fired once");1746 });1747// ***************** setConnector ************************************************************1748 test(": setConnector, check the connector is set", function () {1749 support.addDiv("d1");1750 support.addDiv("d2");1751 var def = {1752 Connector: [ "Bezier", { curviness: 45 } ]1753 };1754 var j = jsPlumb.getInstance(def);1755 var c = j.connect({source: "d1", target: "d2"});1756 equal(c.getConnector().type, "Bezier", "connector is the default");1757 c.setConnector(["Bezier", { curviness: 789 }]);1758 equal(def.Connector[1].curviness, 45, "curviness unchanged by setConnector call");1759 j.unbindContainer();1760 });1761 test(": setConnector, overlays are retained", function () {1762 support.addDiv("d1");1763 support.addDiv("d2");1764 var def = {1765 Connector: [ "Bezier", { curviness: 45 } ]1766 };1767 var j = jsPlumb.getInstance(def);1768 var c = j.connect({1769 source: "d1", target: "d2",1770 overlays:[1771 [ "Label", { label:"foo" } ]1772 ]1773 });1774 equal(c.getConnector().type, "Bezier", "connector is the default");1775 equal(support.length(c.getOverlays()), 1, "one overlay on the connector");1776 c.setConnector(["StateMachine", { curviness: 789 }]);1777 equal(def.Connector[1].curviness, 45, "curviness unchanged by setConnector call");1778 equal(support.length(c.getOverlays()), 1, "one overlay on the connector");1779 j.unbindContainer();1780 });1781// ****************** makeTarget (and associated methods) tests ******************************************** 1782 test(": _jsPlumb.makeTarget (simple case)", function () {1783 var d16 = support.addDiv("d16"), d17 = support.addDiv("d17");1784 var e16 = _jsPlumb.addEndpoint(d16, {isSource: true, isTarget: false}, {anchors: [1785 [0, 0.5, 0, -1],1786 [1, 0.5, 0, 1]1787 ]});1788 _jsPlumb.makeTarget(d17, { isTarget: true, anchor: "TopCenter" });1789 equal(true, jsPlumb.hasClass(d17, support.droppableClass));1790 });1791 test(": _jsPlumb.makeTarget (specify two divs in an array)", function () {1792 var d16 = support.addDiv("d16"), d17 = support.addDiv("d17");1793 _jsPlumb.makeTarget([d16, d17], { isTarget: true, anchor: "TopCenter" });1794 equal(true, jsPlumb.hasClass(d16, support.droppableClass));1795 equal(true, jsPlumb.hasClass(d17, support.droppableClass));1796 });1797 test(": _jsPlumb.makeTarget (specify two divs by id in an array)", function () {1798 var d16 = support.addDiv("d16"), d17 = support.addDiv("d17");1799 _jsPlumb.makeTarget(["d16", "d17"], { isTarget: true, anchor: "TopCenter" });1800 equal(true, jsPlumb.hasClass(d16, support.droppableClass));1801 equal(true, jsPlumb.hasClass(d17, support.droppableClass));1802 });1803 test(": _jsPlumb.makeTarget (specify divs by selector)", function () {1804 var d16 = support.addDiv("d16"), d17 = support.addDiv("d17");1805 jsPlumb.addClass(d16, "FOO");1806 jsPlumb.addClass(d17, "FOO");1807 _jsPlumb.makeTarget(jsPlumb.getSelector(".FOO"), { isTarget: true, anchor: "TopCenter" });1808 equal(true, jsPlumb.hasClass(d16, support.droppableClass));1809 equal(true, jsPlumb.hasClass(d17, support.droppableClass));1810 });1811 test(": _jsPlumb.connect after makeTarget (simple case)", function () {1812 var d16 = support.addDiv("d16"), d17 = support.addDiv("d17");1813 var e16 = _jsPlumb.addEndpoint(d16, {isSource: true, isTarget: false}, {anchors: [1814 [0, 0.5, 0, -1],1815 [1, 0.5, 0, 1]1816 ]});1817 _jsPlumb.makeTarget(d17, { isTarget: true, anchor: "LeftMiddle" }); // give it a non-default anchor, we will check this below.1818 equal(true, jsPlumb.hasClass(d17, support.droppableClass));1819 _jsPlumb.connect({source: e16, target: "d17"});1820 support.assertEndpointCount("d16", 1, _jsPlumb);1821 support.assertEndpointCount("d17", 1, _jsPlumb);1822 var e = _jsPlumb.getEndpoints("d17");1823 equal(e.length, 1, "d17 has one endpoint");1824 equal(e[0].anchor.x, 0, "anchor is LeftMiddle"); //here we should be seeing the anchor we setup via makeTarget1825 equal(e[0].anchor.y, 0.5, "anchor is LeftMiddle"); //here we should be seeing the anchor we setup via makeTarget1826 });1827 test(": _jsPlumb.connect after makeTarget (simple case, two connect calls)", function () {1828 var d16 = support.addDiv("d16"), d17 = support.addDiv("d17");1829 var e16 = _jsPlumb.addEndpoint(d16, {isSource: true, isTarget: false, maxConnections: -1}, {anchors: [1830 [0, 0.5, 0, -1],1831 [1, 0.5, 0, 1]1832 ]});1833 _jsPlumb.makeTarget(d17, { isTarget: true, anchor: "LeftMiddle" }); // give it a non-default anchor, we will check this below.1834 equal(true, jsPlumb.hasClass(d17, support.droppableClass));1835 _jsPlumb.connect({source: e16, target: "d17"});1836 _jsPlumb.connect({source: e16, target: "d17"});1837 support.assertEndpointCount("d16", 1, _jsPlumb);1838 support.assertEndpointCount("d17", 2, _jsPlumb);1839 var e = _jsPlumb.getEndpoints("d17");1840 equal(e[0].anchor.x, 0, "anchor is LeftMiddle"); //here we should be seeing the anchor we setup via makeTarget1841 equal(e[0].anchor.y, 0.5, "anchor is LeftMiddle"); //here we should be seeing the anchor we setup via makeTarget1842 });1843 test(": _jsPlumb.connect after makeTarget (simple case, two connect calls, uniqueEndpoint set)", function () {1844 var d16 = support.addDiv("d16"), d17 = support.addDiv("d17");1845 var e16 = _jsPlumb.addEndpoint(d16, {isSource: true, isTarget: false, maxConnections: -1}, {anchors: [1846 [0, 0.5, 0, -1],1847 [1, 0.5, 0, 1]1848 ]});1849 _jsPlumb.makeTarget(d17, { isTarget: true, anchor: "LeftMiddle", uniqueEndpoint: true, maxConnections: -1 }); // give it a non-default anchor, we will check this below.1850 equal(true, jsPlumb.hasClass(d17, support.droppableClass));1851 _jsPlumb.connect({source: e16, target: "d17"});1852 _jsPlumb.connect({source: e16, target: "d17"});1853 support.assertEndpointCount("d16", 1, _jsPlumb);1854 support.assertEndpointCount("d17", 1, _jsPlumb);1855 var e = _jsPlumb.getEndpoints("d17");1856 equal(e[0].anchor.x, 0, "anchor is LeftMiddle"); //here we should be seeing the anchor we setup via makeTarget1857 equal(e[0].anchor.y, 0.5, "anchor is LeftMiddle"); //here we should be seeing the anchor we setup via makeTarget1858 equal(e[0].connections.length, 2, "endpoint on d17 has two connections");1859 });1860 test(": _jsPlumb.connect after makeTarget (newConnection:true specified)", function () {1861 var d16 = support.addDiv("d16"), d17 = support.addDiv("d17");1862 var e16 = _jsPlumb.addEndpoint(d16, {isSource: true, isTarget: false}, {anchors: [1863 [0, 0.5, 0, -1],1864 [1, 0.5, 0, 1]1865 ]});1866 _jsPlumb.makeTarget(d17, { isTarget: true, anchor: "LeftMiddle" }); // give it a non-default anchor, we will check this below.1867 equal(true, jsPlumb.hasClass(d17, support.droppableClass));1868 _jsPlumb.connect({source: e16, target: "d17", newConnection: true});1869 support.assertEndpointCount("d16", 1, _jsPlumb);1870 support.assertEndpointCount("d17", 1, _jsPlumb);1871 var e = _jsPlumb.getEndpoints("d17");1872 equal(e[0].anchor.x, 0.5, "anchor is BottomCenter"); //here we should be seeing the default anchor1873 equal(e[0].anchor.y, 1, "anchor is BottomCenter"); //here we should be seeing the default anchor1874 });1875// jsPlumb.connect, after makeSource has been called on some element1876 test(": endpoint source and target scope", function () {1877 var d16 = support.addDiv("d16"), d17 = support.addDiv("d17"), d18 = support.addDiv("d18");1878 var e16 = _jsPlumb.addEndpoint(d16, {scope: "foo"});1879 var e18 = _jsPlumb.addEndpoint(d18, {scope: "bar"});1880 var e17 = _jsPlumb.addEndpoint(d17, { scope: "foo" }); // give it a non-default anchor, we will check this below.1881 var c = _jsPlumb.connect({source: e17, target: e16});1882 ok(c != null, "connection with matching scope established");1883 c = _jsPlumb.connect({source: e17, target: e18});1884 ok(c == null, "connection with non-matching scope not established");1885 });1886 test(": endpoint source and target scope, multiple scope", function () {1887 var d16 = support.addDiv("d16"), d17 = support.addDiv("d17"), d18 = support.addDiv("d18"), d19 = support.addDiv("d19");1888 var e16 = _jsPlumb.addEndpoint(d16, {scope: "foo baz", maxConnections: -1});1889 var e18 = _jsPlumb.addEndpoint(d18, {scope: "bar"});1890 var e17 = _jsPlumb.addEndpoint(d17, { scope: "baz", maxConnections: -1 }); // give it a non-default anchor, we will check this below.1891 var e19 = _jsPlumb.addEndpoint(d17, { scope: "foo" }); // give it a non-default anchor, we will check this below.1892 var c = _jsPlumb.connect({source: e17, target: e16});1893 ok(c != null, "connection with matching scope established");1894 c = _jsPlumb.connect({source: e17, target: e18});1895 ok(c == null, "connection with non-matching scope not established");1896 c = _jsPlumb.connect({source: e19, target: e16});1897 ok(c != null, "connection with second matching scope established");1898 });1899// *********************** end of makeTarget (and associated methods) tests ************************ 1900 test(': _jsPlumb.connect (between two Endpoints)', function () {1901 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");1902 var e = _jsPlumb.addEndpoint(d1, {});1903 var e2 = _jsPlumb.addEndpoint(d2, {});1904 ok(e, 'endpoint e exists');1905 ok(e2, 'endpoint e2 exists');1906 support.assertEndpointCount("d1", 1, _jsPlumb);1907 support.assertEndpointCount("d2", 1, _jsPlumb);1908 var c = _jsPlumb.connect({target: 'd2', sourceEndpoint: e, targetEndpoint: e2});1909 support.assertEndpointCount("d1", 1, _jsPlumb); // no new endpoint should have been added1910 support.assertEndpointCount("d2", 1, _jsPlumb); // no new endpoint should have been added1911 ok(c.id != null, "connection has had an id assigned");1912 });1913 test(': _jsPlumb.connect (between two Endpoints, and dont supply any parameters to the Endpoints.)', function () {1914 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");1915 var e = _jsPlumb.addEndpoint(d1);1916 var e2 = _jsPlumb.addEndpoint(d2);1917 ok(e, 'endpoint e exists');1918 ok(e2, 'endpoint e2 exists');1919 support.assertEndpointCount("d1", 1, _jsPlumb);1920 support.assertEndpointCount("d2", 1, _jsPlumb);1921 _jsPlumb.connect({target: 'd2', sourceEndpoint: e, targetEndpoint: e2});1922 support.assertEndpointCount("d1", 1, _jsPlumb); // no new endpoint should have been added1923 support.assertEndpointCount("d2", 1, _jsPlumb); // no new endpoint should have been added1924 });1925 test(" : _jsPlumb.connect, passing 'anchors' array", function () {1926 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2"),1927 c = _jsPlumb.connect({source: d1, target: d2, anchors: ["LeftMiddle", "RightMiddle"]});1928 equal(c.endpoints[0].anchor.x, 0, "source anchor is at x=0");1929 equal(c.endpoints[0].anchor.y, 0.5, "source anchor is at y=0.5");1930 equal(c.endpoints[1].anchor.x, 1, "target anchor is at x=1");1931 equal(c.endpoints[1].anchor.y, 0.5, "target anchor is at y=0.5");1932 });1933 test(': _jsPlumb.connect (by endpoint)', function () {1934 var d16 = support.addDiv("d16"), d17 = support.addDiv("d17");1935 var e16 = _jsPlumb.addEndpoint(d16, {isSource: true});1936 ok(e16.anchor, 'endpoint 16 has an anchor');1937 var e17 = _jsPlumb.addEndpoint(d17, {isSource: true});1938 _jsPlumb.connect({sourceEndpoint: e16, targetEndpoint: e17});1939 });1940 test(': _jsPlumb.connect (cost)', function () {1941 var d16 = support.addDiv("d16"), d17 = support.addDiv("d17");1942 var e16 = _jsPlumb.addEndpoint(d16, {isSource: true});1943 ok(e16.anchor, 'endpoint 16 has an anchor');1944 var e17 = _jsPlumb.addEndpoint(d17, {isSource: true});1945 var c = _jsPlumb.connect({sourceEndpoint: e16, targetEndpoint: e17, cost: 567});1946 equal(c.getCost(), 567, "connection cost is 567");1947 });1948 test(': _jsPlumb.connect (default cost)', function () {1949 var d16 = support.addDiv("d16"), d17 = support.addDiv("d17");1950 var e16 = _jsPlumb.addEndpoint(d16, {isSource: true});1951 ok(e16.anchor, 'endpoint 16 has an anchor');1952 var e17 = _jsPlumb.addEndpoint(d17, {isSource: true});1953 var c = _jsPlumb.connect({sourceEndpoint: e16, targetEndpoint: e17});1954 equal(c.getCost(), undefined, "default connection cost is 1");1955 });1956 test(': _jsPlumb.connect (set cost)', function () {1957 var d16 = support.addDiv("d16"), d17 = support.addDiv("d17");1958 var e16 = _jsPlumb.addEndpoint(d16, {isSource: true});1959 ok(e16.anchor, 'endpoint 16 has an anchor');1960 var e17 = _jsPlumb.addEndpoint(d17, {isSource: true});1961 var c = _jsPlumb.connect({sourceEndpoint: e16, targetEndpoint: e17});1962 equal(c.getCost(), undefined, "default connection cost is 1");1963 c.setCost(8989);1964 equal(c.getCost(), 8989, "connection cost is 8989");1965 });1966 test(': _jsPlumb.connect two endpoints (connectionCost)', function () {1967 var d16 = support.addDiv("d16"), d17 = support.addDiv("d17");1968 var e16 = _jsPlumb.addEndpoint(d16, {isSource: true, connectionCost: 567});1969 ok(e16.anchor, 'endpoint 16 has an anchor');1970 var e17 = _jsPlumb.addEndpoint(d17, {isSource: true});1971 var c = _jsPlumb.connect({sourceEndpoint: e16, targetEndpoint: e17});1972 equal(c.getCost(), 567, "connection cost is 567");1973 });1974 test(': _jsPlumb.connect two endpoints (change connectionCost)', function () {1975 var d16 = support.addDiv("d16"), d17 = support.addDiv("d17"),1976 e16 = _jsPlumb.addEndpoint(d16, {isSource: true, connectionCost: 567, maxConnections: -1}),1977 e17 = _jsPlumb.addEndpoint(d17, {isSource: true, maxConnections: -1});1978 c = _jsPlumb.connect({sourceEndpoint: e16, targetEndpoint: e17});1979 equal(c.getCost(), 567, "connection cost is 567");1980 e16.setConnectionCost(23);1981 var c2 = _jsPlumb.connect({sourceEndpoint: e16, targetEndpoint: e17});1982 equal(c2.getCost(), 23, "connection cost is 23 after change on endpoint");1983 });1984 test(': _jsPlumb.connect (directed is undefined by default)', function () {1985 var d16 = support.addDiv("d16"), d17 = support.addDiv("d17"),1986 e16 = _jsPlumb.addEndpoint(d16, {isSource: true}),1987 e17 = _jsPlumb.addEndpoint(d17, {isSource: true}),1988 c = _jsPlumb.connect({sourceEndpoint: e16, targetEndpoint: e17});1989 equal(c.isDirected(), undefined, "default connection is not directed");1990 });1991 test(': _jsPlumb.connect (directed true)', function () {1992 var d16 = support.addDiv("d16"), d17 = support.addDiv("d17"),1993 e16 = _jsPlumb.addEndpoint(d16, {isSource: true}),1994 e17 = _jsPlumb.addEndpoint(d17, {isSource: true}),1995 c = _jsPlumb.connect({sourceEndpoint: e16, targetEndpoint: e17, directed: true});1996 equal(c.isDirected(), true, "connection is directed");1997 });1998 test(': _jsPlumb.connect two endpoints (connectionsDirected)', function () {1999 var d16 = support.addDiv("d16"), d17 = support.addDiv("d17");2000 var e16 = _jsPlumb.addEndpoint(d16, {isSource: true, connectionsDirected: true, maxConnections: -1});2001 ok(e16.anchor, 'endpoint 16 has an anchor');2002 var e17 = _jsPlumb.addEndpoint(d17, {isSource: true, maxConnections: -1});2003 var c = _jsPlumb.connect({sourceEndpoint: e16, targetEndpoint: e17});2004 equal(c.isDirected(), true, "connection is directed");2005 });2006 test(': _jsPlumb.connect two endpoints (change connectionsDirected)', function () {2007 var d16 = support.addDiv("d16"), d17 = support.addDiv("d17"),2008 e16 = _jsPlumb.addEndpoint(d16, {isSource: true, connectionsDirected: true, maxConnections: -1}),2009 e17 = _jsPlumb.addEndpoint(d17, {isSource: true, maxConnections: -1});2010 c = _jsPlumb.connect({sourceEndpoint: e16, targetEndpoint: e17});2011 equal(c.isDirected(), true, "connection is directed");2012 e16.setConnectionsDirected(false);2013 var c2 = _jsPlumb.connect({sourceEndpoint: e16, targetEndpoint: e17});2014 equal(c2.isDirected(), false, "connection is not directed");2015 });2016 test(": _jsPlumb.connect (two Endpoints - that have been already added - by UUID)", function () {2017 var srcEndpointUuid = "14785937583175927504313", dstEndpointUuid = "14785937583175927534325";2018 var d16 = support.addDiv("d16"), d17 = support.addDiv("d17");2019 var e1 = _jsPlumb.addEndpoint("d16", {isSource: true, maxConnections: -1, uuid: srcEndpointUuid});2020 var e2 = _jsPlumb.addEndpoint("d17", {isSource: true, maxConnections: -1, uuid: dstEndpointUuid});2021 _jsPlumb.connect({ uuids: [ srcEndpointUuid, dstEndpointUuid ] });2022 assertConnectionCount(e1, 1);2023 assertConnectionCount(e2, 1);2024 });2025 test(": _jsPlumb.connect (two Endpoints - that have not been already added - by UUID)", function () {2026 var srcEndpointUuid = "14785937583175927504313", dstEndpointUuid = "14785937583175927534325";2027 var d16 = support.addDiv("d16"), d17 = support.addDiv("d17");2028 _jsPlumb.connect({ uuids: [ srcEndpointUuid, dstEndpointUuid ], source: d16, target: d17 });2029 assertConnectionByScopeCount(_jsPlumb.getDefaultScope(), 1, _jsPlumb);2030 var e1 = _jsPlumb.getEndpoint(srcEndpointUuid);2031 ok(e1 != null, "endpoint with src uuid added");2032 ok(e1.canvas != null);2033 var e2 = _jsPlumb.getEndpoint(dstEndpointUuid);2034 ok(e2 != null, "endpoint with target uuid added");2035 assertConnectionCount(e1, 1);2036 assertConnectionCount(e2, 1);2037 assertConnectionByScopeCount(_jsPlumb.getDefaultScope(), 1, _jsPlumb);2038 });2039 test(": _jsPlumb.connect (two Endpoints - that have been already added - by endpoint reference)", function () {2040 var d16 = support.addDiv("d16"), d17 = support.addDiv("d17");2041 var e1 = _jsPlumb.addEndpoint("d16", {isSource: true, maxConnections: -1});2042 var e2 = _jsPlumb.addEndpoint("d17", {isSource: true, maxConnections: -1});2043 _jsPlumb.connect({ sourceEndpoint: e1, targetEndpoint: e2 });2044 assertConnectionCount(e1, 1);2045 assertConnectionCount(e2, 1);2046 assertConnectionByScopeCount(_jsPlumb.getDefaultScope(), 1, _jsPlumb);2047 });2048 test(": _jsPlumb.connect (two elements)", function () {2049 var d16 = support.addDiv("d16"), d17 = support.addDiv("d17");2050 _jsPlumb.connect({ source: d16, target: d17 });2051 assertConnectionByScopeCount(_jsPlumb.getDefaultScope(), 1, _jsPlumb);2052 });2053 test(": _jsPlumb.connect (Connector test, straight)", function () {2054 var d16 = support.addDiv("d16"), d17 = support.addDiv("d17");2055 var conn = _jsPlumb.connect({ source: d16, target: d17, connector: "Straight" });2056 assertConnectionByScopeCount(_jsPlumb.getDefaultScope(), 1, _jsPlumb);2057 equal(conn.getConnector().type, "Straight", "Straight connector chosen for connection");2058 });2059 test(": _jsPlumb.connect (Connector test, bezier, no params)", function () {2060 var d16 = support.addDiv("d16"), d17 = support.addDiv("d17");2061 var conn = _jsPlumb.connect({ source: d16, target: d17, connector: "Bezier" });2062 assertConnectionByScopeCount(_jsPlumb.getDefaultScope(), 1, _jsPlumb);2063 equal(conn.getConnector().type, "Bezier", "Bezier connector chosen for connection");2064 equal(conn.getConnector().getCurviness(), 150, "Bezier connector chose 150 curviness");2065 });2066 test(": _jsPlumb.connect (Connector test, bezier, curviness as int)", function () {2067 var d16 = support.addDiv("d16"), d17 = support.addDiv("d17");2068 var conn = _jsPlumb.connect({ source: d16, target: d17, connector: ["Bezier", { curviness: 200 }] });2069 assertConnectionByScopeCount(_jsPlumb.getDefaultScope(), 1, _jsPlumb);2070 equal(conn.getConnector().type, "Bezier", "Canvas Bezier connector chosen for connection");2071 equal(conn.getConnector().getCurviness(), 200, "Bezier connector chose 200 curviness");2072 });2073 test(": _jsPlumb.connect (Connector test, bezier, curviness as named option)", function () {2074 var d16 = support.addDiv("d16"), d17 = support.addDiv("d17");2075 var conn = _jsPlumb.connect({ source: d16, target: d17, connector: ["Bezier", {curviness: 300}] });2076 assertConnectionByScopeCount(_jsPlumb.getDefaultScope(), 1, _jsPlumb);2077 equal(conn.getConnector().type, "Bezier", "Bezier connector chosen for connection");2078 equal(conn.getConnector().getCurviness(), 300, "Bezier connector chose 300 curviness");2079 });2080 test(": _jsPlumb.connect (anchors registered correctly; source and target anchors given, as arrays)", function () {2081 var d16 = support.addDiv("d16"), d17 = support.addDiv("d17");2082 var conn = _jsPlumb.connect({ source: d16, target: d17, connector: "Straight", anchors: [2083 [0.3, 0.3, 1, 0],2084 [0.7, 0.7, 0, 1]2085 ] });2086 assertConnectionByScopeCount(_jsPlumb.getDefaultScope(), 1, _jsPlumb);2087 equal(conn.getConnector().type, "Straight", "Canvas Straight connector chosen for connection");2088 equal(0.3, conn.endpoints[0].anchor.x, "source anchor x");2089 equal(0.3, conn.endpoints[0].anchor.y, "source anchor y");2090 equal(0.7, conn.endpoints[1].anchor.x, "target anchor x");2091 equal(0.7, conn.endpoints[1].anchor.y, "target anchor y");2092 });2093 test(": _jsPlumb.connect (anchors registered correctly; source and target anchors given, as strings)", function () {2094 var d16 = support.addDiv("d16"), d17 = support.addDiv("d17");2095 var conn = _jsPlumb.connect({ source: d16, target: d17, connector: "Straight", anchors: ["LeftMiddle", "RightMiddle"] });2096 assertConnectionByScopeCount(_jsPlumb.getDefaultScope(), 1, _jsPlumb);2097 equal(conn.getConnector().type, "Straight", "Straight connector chosen for connection");2098 equal(0, conn.endpoints[0].anchor.x, "source anchor x");2099 equal(0.5, conn.endpoints[0].anchor.y, "source anchor y");2100 equal(1, conn.endpoints[1].anchor.x, "target anchor x");2101 equal(0.5, conn.endpoints[1].anchor.y, "target anchor y");2102 });2103 test(": _jsPlumb.connect (anchors registered correctly; source and target anchors given, as arrays)", function () {2104 var d16 = support.addDiv("d16"), d17 = support.addDiv("d17");2105 var conn = _jsPlumb.connect({ source: d16, target: d17, connector: "Straight", anchors: [2106 [0.3, 0.3, 1, 0],2107 [0.7, 0.7, 0, 1]2108 ] });2109 assertConnectionByScopeCount(_jsPlumb.getDefaultScope(), 1, _jsPlumb);2110 equal(conn.getConnector().type, "Straight", "Straight connector chosen for connection");2111 equal(0.3, conn.endpoints[0].anchor.x, "source anchor x");2112 equal(0.3, conn.endpoints[0].anchor.y, "source anchor y");2113 equal(0.7, conn.endpoints[1].anchor.x, "target anchor x");2114 equal(0.7, conn.endpoints[1].anchor.y, "target anchor y");2115 });2116 test(": _jsPlumb.connect (two argument method in which some data is reused across connections)", function () {2117 var d16 = support.addDiv("d16"), d17 = support.addDiv("d17"), d18 = support.addDiv("d18"), d19 = support.addDiv("d19");2118 var sharedData = { connector: "Straight", anchors: [2119 [0.3, 0.3, 1, 0],2120 [0.7, 0.7, 0, 1]2121 ] };2122 var conn = _jsPlumb.connect({ source: d16, target: d17}, sharedData);2123 var conn2 = _jsPlumb.connect({ source: d18, target: d19}, sharedData);2124 assertConnectionByScopeCount(_jsPlumb.getDefaultScope(), 2, _jsPlumb);2125 equal(conn.getConnector().type, "Straight", "Straight connector chosen for connection");2126 equal(conn2.getConnector().type, "Straight", "Straight connector chosen for connection");2127 equal(0.3, conn.endpoints[0].anchor.x, "source anchor x");2128 equal(0.3, conn.endpoints[0].anchor.y, "source anchor y");2129 equal(0.7, conn.endpoints[1].anchor.x, "target anchor x");2130 equal(0.7, conn.endpoints[1].anchor.y, "target anchor y");2131 equal(0.3, conn2.endpoints[0].anchor.x, "source anchor x");2132 equal(0.3, conn2.endpoints[0].anchor.y, "source anchor y");2133 equal(0.7, conn2.endpoints[1].anchor.x, "target anchor x");2134 equal(0.7, conn2.endpoints[1].anchor.y, "target anchor y");2135 });2136 test(": _jsPlumb.connect (Connector as string test)", function () {2137 var d16 = support.addDiv("d16"), d17 = support.addDiv("d17");2138 var conn = _jsPlumb.connect({ source: d16, target: d17, connector: "Straight" });2139 assertConnectionByScopeCount(_jsPlumb.getDefaultScope(), 1, _jsPlumb);2140 equal(conn.getConnector().type, "Straight", "Straight connector chosen for connection");2141 });2142 test(": _jsPlumb.connect (Endpoint test)", function () {2143 var d16 = support.addDiv("d16"), d17 = support.addDiv("d17");2144 var conn = _jsPlumb.connect({ source: d16, target: d17, endpoint: "Rectangle" });2145 assertConnectionByScopeCount(_jsPlumb.getDefaultScope(), 1, _jsPlumb);2146 equal(conn.endpoints[0].endpoint.constructor, jsPlumb.Endpoints[renderMode].Rectangle, "Rectangle endpoint chosen for connection source");2147 equal(conn.endpoints[1].endpoint.constructor, jsPlumb.Endpoints[renderMode].Rectangle, "Rectangle endpoint chosen for connection target");2148 });2149 test(": _jsPlumb.connect (Endpoint as string test)", function () {2150 var d16 = support.addDiv("d16"), d17 = support.addDiv("d17");2151 var conn = _jsPlumb.connect({ source: d16, target: d17, endpoint: "Rectangle" });2152 assertConnectionByScopeCount(_jsPlumb.getDefaultScope(), 1, _jsPlumb);2153 equal(conn.endpoints[0].endpoint.constructor, jsPlumb.Endpoints[renderMode].Rectangle, "Rectangle endpoint chosen for connection source");2154 equal(conn.endpoints[1].endpoint.constructor, jsPlumb.Endpoints[renderMode].Rectangle, "Rectangle endpoint chosen for connection target");2155 });2156 test(": _jsPlumb.connect (Endpoints test)", function () {2157 var d16 = support.addDiv("d16"), d17 = support.addDiv("d17");2158 var conn = _jsPlumb.connect({ source: d16, target: d17, endpoints: ["Rectangle", "Dot" ] });2159 assertConnectionByScopeCount(_jsPlumb.getDefaultScope(), 1, _jsPlumb);2160 equal(conn.endpoints[0].endpoint.constructor, jsPlumb.Endpoints[renderMode].Rectangle, "Rectangle endpoint chosen for connection source");2161 equal(conn.endpoints[1].endpoint.constructor, jsPlumb.Endpoints[renderMode].Dot, "Dot endpoint chosen for connection target");2162 });2163 test(": _jsPlumb.connect (Blank Endpoint specified via 'endpoint' param)", function () {2164 var d16 = support.addDiv("d16"), d17 = support.addDiv("d17");2165 var conn = _jsPlumb.connect({ source: d16, target: d17, endpoint: "Blank" });2166 assertConnectionByScopeCount(_jsPlumb.getDefaultScope(), 1, _jsPlumb);2167 equal(conn.endpoints[0].endpoint.constructor, jsPlumb.Endpoints[renderMode].Blank, "Blank endpoint chosen for connection source");2168 equal(conn.endpoints[1].endpoint.constructor, jsPlumb.Endpoints[renderMode].Blank, "Blank endpoint chosen for connection target");2169 });2170 test(": _jsPlumb.connect (Blank Endpoint specified via 'endpoints' param)", function () {2171 var d16 = support.addDiv("d16"), d17 = support.addDiv("d17");2172 var conn = _jsPlumb.connect({ source: d16, target: d17, endpoints: ["Blank", "Blank" ] });2173 assertConnectionByScopeCount(_jsPlumb.getDefaultScope(), 1, _jsPlumb);2174 equal(conn.endpoints[0].endpoint.constructor, jsPlumb.Endpoints[renderMode].Blank, "Blank endpoint chosen for connection source");2175 equal(conn.endpoints[1].endpoint.constructor, jsPlumb.Endpoints[renderMode].Blank, "Blank endpoint chosen for connection target");2176 });2177 test(": _jsPlumb.connect (Endpoint as string test)", function () {2178 var d16 = support.addDiv("d16"), d17 = support.addDiv("d17");2179 var conn = _jsPlumb.connect({ source: d16, target: d17, endpoints: ["Rectangle", "Dot" ] });2180 assertConnectionByScopeCount(_jsPlumb.getDefaultScope(), 1, _jsPlumb);2181 equal(conn.endpoints[0].endpoint.constructor, jsPlumb.Endpoints[renderMode].Rectangle, "Rectangle endpoint chosen for connection source");2182 equal(conn.endpoints[1].endpoint.constructor, jsPlumb.Endpoints[renderMode].Dot, "Dot endpoint chosen for connection target");2183 });2184 test(": _jsPlumb.connect (by Endpoints, connector test)", function () {2185 var d16 = support.addDiv("d16"), d17 = support.addDiv("d17");2186 var e16 = _jsPlumb.addEndpoint(d16, {});2187 var e17 = _jsPlumb.addEndpoint(d17, {});2188 window.FOO = "BAR"2189 var conn = _jsPlumb.connect({ sourceEndpoint: e16, targetEndpoint: e17, connector: "Straight" });2190 assertConnectionByScopeCount(_jsPlumb.getDefaultScope(), 1, _jsPlumb);2191 equal(e16.connections[0].getConnector().type, "Straight", "Straight connector chosen for connection");2192 window.FOO = null;2193 });2194 test(": _jsPlumb.connect (by Endpoints, connector as string test)", function () {2195 var d16 = support.addDiv("d16"), d17 = support.addDiv("d17");2196 var e16 = _jsPlumb.addEndpoint(d16, {});2197 var e17 = _jsPlumb.addEndpoint(d17, {});2198 var conn = _jsPlumb.connect({ sourceEndpoint: e16, targetEndpoint: e17, connector: "Straight" });2199 assertConnectionByScopeCount(_jsPlumb.getDefaultScope(), 1, _jsPlumb);2200 equal(e16.connections[0].getConnector().type, "Straight", "Straight connector chosen for connection");2201 });2202 test(": _jsPlumb.connect (by Endpoints, anchors as string test)", function () {2203 var d16 = support.addDiv("d16"), d17 = support.addDiv("d17");2204 var a16 = "TopCenter", a17 = "BottomCenter";2205 var e16 = _jsPlumb.addEndpoint(d16, {anchor: a16});2206 var e17 = _jsPlumb.addEndpoint(d17, {anchor: a17});2207 var conn = _jsPlumb.connect({ sourceEndpoint: e16, targetEndpoint: e17, connector: "Straight" });2208 assertConnectionByScopeCount(_jsPlumb.getDefaultScope(), 1, _jsPlumb);2209 equal(e16.connections[0].getConnector().type, "Straight", "Straight connector chosen for connection");2210 equal(e16.anchor.x, 0.5, "endpoint 16 is at top center");2211 equal(e16.anchor.y, 0, "endpoint 16 is at top center");2212 equal(e17.anchor.x, 0.5, "endpoint 17 is at bottom center");2213 equal(e17.anchor.y, 1, "endpoint 17 is at bottom center");2214 });2215 test(": _jsPlumb.connect (by Endpoints, endpoints create anchors)", function () {2216 var d16 = support.addDiv("d16"), d17 = support.addDiv("d17");2217 var a16 = [0, 0.5, 0, -1], a17 = [1, 0.0, -1, -1];2218 var e16 = _jsPlumb.addEndpoint(d16, {anchor: a16});2219 var e17 = _jsPlumb.addEndpoint(d17, {anchor: a17});2220 var conn = _jsPlumb.connect({ sourceEndpoint: e16, targetEndpoint: e17, connector: "Straight" });2221 assertConnectionByScopeCount(_jsPlumb.getDefaultScope(), 1, _jsPlumb);2222 equal(e16.connections[0].getConnector().type, "Straight", "Straight connector chosen for connection");2223 equal(e16.anchor.x, a16[0]);2224 equal(e16.anchor.y, a16[1]);2225 equal(e17.anchor.x, a17[0]);2226 equal(e17.anchor.y, a17[1]);2227 equal(e16.anchor.getOrientation()[0], a16[2]);2228 equal(e16.anchor.getOrientation()[1], a16[3]);2229 equal(e17.anchor.getOrientation()[0], a17[2]);2230 equal(e17.anchor.getOrientation()[1], a17[3]);2231 });2232 test(": _jsPlumb.connect (by Endpoints, endpoints create dynamic anchors; anchors specified by 'anchor')", function () {2233 var d16 = support.addDiv("d16"), d17 = support.addDiv("d17");2234 var e16 = _jsPlumb.addEndpoint(d16, {anchor: [2235 [0, 0.5, 0, -1],2236 [1, 0.5, 0, 1]2237 ]});2238 var e17 = _jsPlumb.addEndpoint(d17, {anchor: ["TopCenter", "BottomCenter"]});2239 var conn = _jsPlumb.connect({ sourceEndpoint: e16, targetEndpoint: e17, connector: "Straight" });2240 assertConnectionByScopeCount(_jsPlumb.getDefaultScope(), 1, _jsPlumb);2241 equal(e16.connections[0].getConnector().type, "Straight", "Straight connector chosen for connection");2242 equal(e16.anchor.isDynamic, true, "Endpoint 16 has a dynamic anchor");2243 equal(e17.anchor.isDynamic, true, "Endpoint 17 has a dynamic anchor");2244 });2245 test(": _jsPlumb.connect (by Endpoints, endpoints create dynamic anchors; anchors specified by 'anchors')", function () {2246 var d16 = support.addDiv("d16"), d17 = support.addDiv("d17");2247 var e16 = _jsPlumb.addEndpoint(d16, {anchor: [2248 [0, 0.5, 0, -1],2249 [1, 0.5, 0, 1]2250 ]});2251 var e17 = _jsPlumb.addEndpoint(d17, {anchor: ["TopCenter", "BottomCenter"]});2252 var conn = _jsPlumb.connect({ sourceEndpoint: e16, targetEndpoint: e17, connector: "Straight" });2253 assertConnectionByScopeCount(_jsPlumb.getDefaultScope(), 1, _jsPlumb);2254 equal(e16.connections[0].getConnector().type, "Straight", "Straight connector chosen for connection");2255 equal(e16.anchor.isDynamic, true, "Endpoint 16 has a dynamic anchor");2256 equal(e17.anchor.isDynamic, true, "Endpoint 17 has a dynamic anchor");2257 });2258 test(": _jsPlumb.connect (connect by element, default endpoint, supplied dynamic anchors)", function () {2259 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2"), d3 = support.addDiv("d3");2260 var anchors = [2261 [0.25, 0, 0, -1],2262 [1, 0.25, 1, 0],2263 [0.75, 1, 0, 1],2264 [0, 0.75, -1, 0]2265 ];2266 _jsPlumb.connect({source: d1, target: d2, dynamicAnchors: anchors, deleteEndpointsOnEmpty:true}); // auto connect with default endpoint and provided anchors2267 assertConnectionByScopeCount(_jsPlumb.getDefaultScope(), 1, _jsPlumb);2268 support.assertEndpointCount("d1", 1, _jsPlumb);2269 support.assertEndpointCount("d2", 1, _jsPlumb);2270 _jsPlumb.select({source: d1, target: d2}).delete();2271 // this changed in 1.3.5, because auto generated endpoints are now removed by detach. so i added the test below this one2272 // to check that the deleteEndpointsOnDetach flag is honoured.2273 // and changed back in 2.4.0...maybe2274 support.assertEndpointCount("d1", 0, _jsPlumb);2275 support.assertEndpointCount("d2", 0, _jsPlumb);2276 });2277 test(": _jsPlumb.connect (connect by element, default endpoint, supplied dynamic anchors, delete on detach false)", function () {2278 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2"), d3 = support.addDiv("d3");2279 var anchors = [2280 [0.25, 0, 0, -1],2281 [1, 0.25, 1, 0],2282 [0.75, 1, 0, 1],2283 [0, 0.75, -1, 0]2284 ];2285 _jsPlumb.connect({2286 source: d1,2287 target: d2,2288 dynamicAnchors: anchors,2289 deleteEndpointsOnEmpty: false2290 }); // auto connect with default endpoint and provided anchors2291 assertConnectionByScopeCount(_jsPlumb.getDefaultScope(), 1, _jsPlumb);2292 support.assertEndpointCount("d1", 1, _jsPlumb);2293 support.assertEndpointCount("d2", 1, _jsPlumb);2294 _jsPlumb.select({source: d1, target: d2}).delete();2295 // this changed in 1.3.5, because auto generated endpoints are now removed by detach. so i added this test2296 // to check that the deleteEndpointsOnEmpty flag is honoured.2297 support.assertEndpointCount("d1", 1, _jsPlumb);2298 support.assertEndpointCount("d2", 1, _jsPlumb);2299 });2300 test(": delete endpoints on detach, makeSource and makeTarget)", function () {2301 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");2302 _jsPlumb.makeSource(d1);2303 _jsPlumb.makeTarget(d2);2304 var c = _jsPlumb.connect({2305 source: d1,2306 target: d22307 });2308 support.assertEndpointCount("d1", 1, _jsPlumb);2309 support.assertEndpointCount("d2", 1, _jsPlumb);2310 _jsPlumb.deleteConnection(c);2311 // both endpoints should have been deleted, as they were both created automatically2312 support.assertEndpointCount("d1", 0, _jsPlumb);2313 support.assertEndpointCount("d2", 0, _jsPlumb);2314 });2315 test(": delete endpoints on detach, addEndpoint and makeTarget)", function () {2316 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");2317 var e = _jsPlumb.addEndpoint(d1);2318 _jsPlumb.makeTarget(d2);2319 var c = _jsPlumb.connect({2320 source: e,2321 target: d22322 });2323 support.assertEndpointCount("d1", 1, _jsPlumb);2324 support.assertEndpointCount("d2", 1, _jsPlumb);2325 _jsPlumb.deleteConnection(c);2326 // only target endpoint should have been deleted, as the other was not added automatically2327 support.assertEndpointCount("d1", 1, _jsPlumb);2328 support.assertEndpointCount("d2", 0, _jsPlumb);2329 });2330 test(": delete endpoints on detach, makeSource and addEndpoint)", function () {2331 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");2332 _jsPlumb.makeSource(d1);2333 var e = _jsPlumb.addEndpoint(d2);2334 var c = _jsPlumb.connect({2335 source: d1,2336 target: e2337 });2338 support.assertEndpointCount("d1", 1, _jsPlumb);2339 support.assertEndpointCount("d2", 1, _jsPlumb);2340 _jsPlumb.deleteConnection(c);2341 // only source endpoint should have been deleted, as the other was not added automatically2342 support.assertEndpointCount("d1", 0, _jsPlumb);2343 support.assertEndpointCount("d2", 1, _jsPlumb);2344 });2345 test(": _jsPlumb.connect (connect by element, supplied endpoint and dynamic anchors)", function () {2346 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2"), d3 = support.addDiv("d3");2347 var endpoint = { isSource: true };2348 var e1 = _jsPlumb.addEndpoint(d1, endpoint);2349 var e2 = _jsPlumb.addEndpoint(d2, endpoint);2350 var anchors = [ "TopCenter", "BottomCenter" ];2351 _jsPlumb.connect({sourceEndpoint: e1, targetEndpoint: e2, dynamicAnchors: anchors});2352 support.assertEndpointCount("d1", 1, _jsPlumb);2353 support.assertEndpointCount("d2", 1, _jsPlumb);2354 _jsPlumb.select({source: d1, target: d2}).delete();2355 support.assertEndpointCount("d1", 1, _jsPlumb);2356 support.assertEndpointCount("d2", 1, _jsPlumb);2357 });2358 test(": _jsPlumb.connect (connect by element, supplied endpoints using 'source' and 'target' (this test is identical to the one above apart from the param names), and dynamic anchors)", function () {2359 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2"), d3 = support.addDiv("d3");2360 var endpoint = { isSource: true };2361 var e1 = _jsPlumb.addEndpoint(d1, endpoint);2362 var e2 = _jsPlumb.addEndpoint(d2, endpoint);2363 var anchors = [ "TopCenter", "BottomCenter" ];2364 _jsPlumb.connect({source: e1, target: e2, dynamicAnchors: anchors});2365 support.assertEndpointCount("d1", 1, _jsPlumb);2366 support.assertEndpointCount("d2", 1, _jsPlumb);2367 _jsPlumb.select({source: d1, target: d2}).delete();2368 support.assertEndpointCount("d1", 1, _jsPlumb);2369 support.assertEndpointCount("d2", 1, _jsPlumb);2370 });2371 test(": jsPlumb.connect, events specified", function () {2372 var d1 = support.addDiv("d1"), _d2 = support.addDiv("d2"),2373 clicked = 0,2374 c = _jsPlumb.connect({2375 source: d1,2376 target: d2,2377 events: {2378 click: function (conn) {2379 clicked++;2380 }2381 }2382 });2383 c.fire("click", c);2384 equal(1, clicked, "connection was clicked once");2385 });2386 test(" detachable parameter defaults to true on _jsPlumb.connect", function () {2387 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2"),2388 c = _jsPlumb.connect({source: d1, target: d2});2389 equal(c.isDetachable(), true, "connections detachable by default");2390 });2391 test(" detachable parameter set to false on _jsPlumb.connect", function () {2392 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2"),2393 c = _jsPlumb.connect({source: d1, target: d2, detachable: false});2394 equal(c.isDetachable(), false, "connection detachable");2395 });2396 test(" setDetachable on initially detachable connection", function () {2397 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2"),2398 c = _jsPlumb.connect({source: d1, target: d2});2399 equal(c.isDetachable(), true, "connection initially detachable");2400 c.setDetachable(false);2401 equal(c.isDetachable(), false, "connection not detachable");2402 });2403 test(" setDetachable on initially not detachable connection", function () {2404 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2"),2405 c = _jsPlumb.connect({source: d1, target: d2, detachable: false });2406 equal(c.isDetachable(), false, "connection not initially detachable");2407 c.setDetachable(true);2408 equal(c.isDetachable(), true, "connection now detachable");2409 });2410 test(" _jsPlumb.Defaults.ConnectionsDetachable", function () {2411 _jsPlumb.Defaults.ConnectionsDetachable = false;2412 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2"),2413 c = _jsPlumb.connect({source: d1, target: d2});2414 equal(c.isDetachable(), false, "connections not detachable by default (overrode the defaults)");2415 _jsPlumb.Defaults.ConnectionsDetachable = true;2416 });2417 test(": _jsPlumb.connect (testing for connection event callback)", function () {2418 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2"), d3 = support.addDiv("d3");2419 var connectCallback = null, detachCallback = null;2420 _jsPlumb.bind("connection", function (params) {2421 connectCallback = jsPlumb.extend({}, params);2422 });2423 _jsPlumb.bind("connectionDetached", function (params) {2424 detachCallback = jsPlumb.extend({}, params);2425 });2426 _jsPlumb.connect({source: d1, target: d2}); // auto connect with default endpoint and anchor set2427 ok(connectCallback != null, "connect callback was made");2428 assertConnectionByScopeCount(_jsPlumb.getDefaultScope(), 1, _jsPlumb);2429 support.assertEndpointCount("d1", 1, _jsPlumb);2430 support.assertEndpointCount("d2", 1, _jsPlumb);2431 _jsPlumb.select({source: d1, target: d2}).delete();2432 ok(detachCallback != null, "detach callback was made");2433 });2434 test(": _jsPlumb.connect (setting outline class on Connector)", function () {2435 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");2436 var c = _jsPlumb.connect({source: d1, target: d2, paintStyle:{outlineStroke:"green", outlineWidth:6, strokeWidth:4, stroke:"red"}});2437 var has = function (clazz, elName) {2438 var cn = c.getConnector()[elName].className,2439 cns = cn.constructor == String ? cn : cn.baseVal;2440 return cns.indexOf(clazz) != -1;2441 };2442 ok(has(_jsPlumb.connectorClass, "canvas"), "basic connector class set correctly");2443 ok(has("jtk-connector-outline", "bgPath"), "outline canvas set correctly");2444 ok(has(_jsPlumb.connectorOutlineClass, "bgPath"), "outline canvas set correctly");2445 });2446 test(": _jsPlumb.connect (setting cssClass on Connector)", function () {2447 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");2448 var c = _jsPlumb.connect({source: d1, target: d2, cssClass: "CSS"});2449 var has = function (clazz) {2450 var cn = c.getConnector().canvas.className,2451 cns = cn.constructor == String ? cn : cn.baseVal;2452 return cns.indexOf(clazz) != -1;2453 };2454 ok(has("CSS"), "custom cssClass set correctly");2455 ok(has(_jsPlumb.connectorClass), "basic connector class set correctly");2456 });2457 test(": _jsPlumb.addEndpoint (setting cssClass on Endpoint)", function () {2458 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");2459 var e = _jsPlumb.addEndpoint(d1, {cssClass: "CSS"});2460 var has = function (clazz) {2461 var cn = e.endpoint.canvas.className,2462 cns = cn.constructor == String ? cn : cn.baseVal;2463 return cns.indexOf(clazz) != -1;2464 };2465 ok(has("CSS"), "custom cssClass set correctly");2466 ok(has(_jsPlumb.endpointClass), "basic endpoint class set correctly");2467 });2468 test(": _jsPlumb.addEndpoint (setting cssClass on blank Endpoint)", function () {2469 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");2470 var e = _jsPlumb.addEndpoint(d1, {endpoint: "Blank", cssClass: "CSS"});2471 var has = function (clazz) {2472 var cn = e.endpoint.canvas.className,2473 cns = cn.constructor == String ? cn : cn.baseVal;2474 return cns.indexOf(clazz) != -1;2475 };2476 ok(has("CSS"), "custom cssClass set correctly");2477 ok(has(_jsPlumb.endpointClass), "basic endpoint class set correctly");2478 });2479 test(": _jsPlumb.connect (overlays, long-hand version)", function () {2480 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2"), d3 = support.addDiv("d3");2481 var imageEventListener = function () {2482 };2483 var arrowSpec = {width: 40, length: 40, location: 0.7, foldback: 0, paintStyle: {strokeWidth: 1, stroke: "#000000"}, id:"a"};2484 var connection1 = _jsPlumb.connect({2485 source: d1,2486 target: d2,2487 anchors: ["BottomCenter", [ 0.75, 0, 0, -1 ]],2488 overlays: [2489 ["Label", {label: "CONNECTION 1", location: 0.3, id:"l"}],2490 ["Arrow", arrowSpec ]2491 ]2492 });2493 equal(support.length(connection1._jsPlumb.overlays), 2);2494 equal(jsPlumb.Overlays[renderMode].Label, connection1._jsPlumb.overlays["l"].constructor);2495 equal(jsPlumb.Overlays[renderMode].Arrow, connection1._jsPlumb.overlays["a"].constructor);2496 equal(0.7, connection1._jsPlumb.overlays["a"].loc);2497 equal(40, connection1._jsPlumb.overlays["a"].width);2498 equal(40, connection1._jsPlumb.overlays["a"].length);2499 });2500 test(": _jsPlumb.connect (overlays, long-hand version, IDs specified)", function () {2501 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2"), d3 = support.addDiv("d3");2502 var imageEventListener = function () {2503 };2504 var arrowSpec = {2505 width: 40,2506 length: 40,2507 location: 0.7,2508 foldback: 0,2509 paintStyle: {strokeWidth: 1, stroke: "#000000"},2510 id: "anArrow"2511 };2512 var connection1 = _jsPlumb.connect({2513 source: d1,2514 target: d2,2515 anchors: ["BottomCenter", [ 0.75, 0, 0, -1 ]],2516 overlays: [2517 ["Label", {label: "CONNECTION 1", location: 0.3, id: "aLabel"}],2518 ["Arrow", arrowSpec ]2519 ]2520 });2521 equal(2, support.length(connection1._jsPlumb.overlays));2522 equal(jsPlumb.Overlays[renderMode].Label, connection1._jsPlumb.overlays["aLabel"].constructor);2523 equal("aLabel", connection1._jsPlumb.overlays["aLabel"].id);2524 equal(jsPlumb.Overlays[renderMode].Arrow, connection1._jsPlumb.overlays["anArrow"].constructor);2525 equal(0.7, connection1._jsPlumb.overlays["anArrow"].loc);2526 equal(40, connection1._jsPlumb.overlays["anArrow"].width);2527 equal(40, connection1._jsPlumb.overlays["anArrow"].length);2528 equal("anArrow", connection1._jsPlumb.overlays["anArrow"].id);2529 });2530 test(": _jsPlumb.connect (default overlays)", function () {2531 _jsPlumb.Defaults.Overlays = [2532 ["Arrow", { location: 0.1, id: "arrow" }]2533 ];2534 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2"),2535 c = _jsPlumb.connect({source: d1, target: d2});2536 ok(c.getOverlay("arrow") != null, "Arrow overlay created from defaults");2537 });2538 test(": _jsPlumb.connect (default overlays + overlays specified in connect call)", function () {2539 _jsPlumb.Defaults.Overlays = [2540 ["Arrow", { location: 0.1, id: "arrow" }]2541 ];2542 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2"),2543 c = _jsPlumb.connect({source: d1, target: d2, overlays: [2544 ["Label", {id: "label"}]2545 ]});2546 ok(c.getOverlay("arrow") != null, "Arrow overlay created from defaults");2547 ok(c.getOverlay("label") != null, "Label overlay created from connect call");2548 });2549 test(": _jsPlumb.connect (default connection overlays)", function () {2550 _jsPlumb.Defaults.ConnectionOverlays = [2551 ["Arrow", { location: 0.1, id: "arrow" }]2552 ];2553 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2"),2554 c = _jsPlumb.connect({source: d1, target: d2});2555 ok(c.getOverlay("arrow") != null, "Arrow overlay created from defaults");2556 });2557 test(": _jsPlumb.connect (default connection overlays + overlays specified in connect call)", function () {2558 _jsPlumb.Defaults.ConnectionOverlays = [2559 ["Arrow", { location: 0.1, id: "arrow" }]2560 ];2561 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2"),2562 c = _jsPlumb.connect({source: d1, target: d2, overlays: [2563 ["Label", {id: "label"}]2564 ]});2565 ok(c.getOverlay("arrow") != null, "Arrow overlay created from defaults");2566 ok(c.getOverlay("label") != null, "Label overlay created from connect call");2567 });2568 test(": _jsPlumb.connect (default overlays + default connection overlays)", function () {2569 _jsPlumb.Defaults.ConnectionOverlays = [2570 ["Arrow", { location: 0.1, id: "arrow" }]2571 ];2572 _jsPlumb.Defaults.Overlays = [2573 ["Arrow", { location: 0.1, id: "arrow2" }]2574 ];2575 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2"),2576 c = _jsPlumb.connect({source: d1, target: d2});2577 ok(c.getOverlay("arrow") != null, "Arrow overlay created from defaults");2578 ok(c.getOverlay("arrow2") != null, "Arrow overlay created from connection defaults");2579 });2580 test(": _jsPlumb.connect (default overlays + default connection overlays)", function () {2581 _jsPlumb.Defaults.ConnectionOverlays = [2582 ["Arrow", { location: 0.1, id: "arrow" }]2583 ];2584 _jsPlumb.Defaults.Overlays = [2585 ["Arrow", { location: 0.1, id: "arrow2" }]2586 ];2587 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2"),2588 c = _jsPlumb.connect({source: d1, target: d2, overlays: [2589 ["Label", {id: "label"}]2590 ]});2591 ok(c.getOverlay("arrow") != null, "Arrow overlay created from defaults");2592 ok(c.getOverlay("arrow2") != null, "Arrow overlay created from connection defaults");2593 ok(c.getOverlay("label") != null, "Label overlay created from connect call");2594 });2595 test(": _jsPlumb.connect (label overlay set using 'label')", function () {2596 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2"),2597 c = _jsPlumb.connect({2598 source: d1,2599 target: d2,2600 label: "FOO"2601 });2602 equal(support.length(c.getOverlays()), 1, "one overlay set");2603 equal(c.getLabel(), "FOO", "label is set correctly");2604 });2605 test(": _jsPlumb.connect (set label after construction, with string)", function () {2606 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2"),2607 c = _jsPlumb.connect({2608 source: d1,2609 target: d2});2610 c.setLabel("FOO");2611 equal(c.getLabel(), "FOO", "label is set correctly");2612 });2613 test(": _jsPlumb.connect (set label after construction, with function)", function () {2614 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2"),2615 c = _jsPlumb.connect({2616 source: d1,2617 target: d2});2618 c.setLabel(function () {2619 return "BAR";2620 });2621 equal(c.getLabel()(), "BAR", "label is set correctly");2622 });2623 test(": _jsPlumb.connect (set label after construction, with params object)", function () {2624 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2"),2625 c = _jsPlumb.connect({2626 source: d1,2627 target: d2});2628 c.setLabel({2629 label: "BAZ",2630 cssClass: "CLASSY",2631 location: 0.92632 });2633 var lo = c.getLabelOverlay();2634 ok(lo != null, "label overlay exists");2635 equal(lo.getLabel(), "BAZ", "label overlay has correct value");2636 equal(lo.getLocation(), 0.9, "label overlay has correct location");2637 });2638 test(": _jsPlumb.connect (set label after construction with existing label set, with params object)", function () {2639 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2"),2640 c = _jsPlumb.connect({2641 source: d1,2642 target: d2,2643 label: "FOO",2644 labelLocation: 0.22645 });2646 var lo = c.getLabelOverlay();2647 equal(lo.getLocation(), 0.2, "label overlay has correct location");2648 c.setLabel({2649 label: "BAZ",2650 cssClass: "CLASSY",2651 location: 0.92652 });2653 ok(lo != null, "label overlay exists");2654 equal(lo.getLabel(), "BAZ", "label overlay has correct value");2655 equal(lo.getLocation(), 0.9, "label overlay has correct location");2656 });2657 test(": _jsPlumb.connect (getLabelOverlay, label on connect call)", function () {2658 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2"),2659 c = _jsPlumb.connect({2660 source: d1,2661 target: d2,2662 label: "FOO"2663 }),2664 lo = c.getLabelOverlay();2665 ok(lo != null, "label overlay exists");2666 equal(lo.getLabel(), "FOO", "label overlay has correct value");2667 equal(lo.getLocation(), 0.5, "label overlay has correct location");2668 });2669 test(": _jsPlumb.connect (getLabelOverlay, label on connect call, location set)", function () {2670 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2"),2671 c = _jsPlumb.connect({2672 source: d1,2673 target: d2,2674 label: "FOO",2675 labelLocation: 0.22676 }),2677 lo = c.getLabelOverlay();2678 ok(lo != null, "label overlay exists");2679 equal(lo.getLabel(), "FOO", "label overlay has correct value");2680 equal(lo.getLocation(), 0.2, "label overlay has correct location");2681 });2682 test(": _jsPlumb.connect (remove single overlay by id)", function () {2683 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");2684 var arrowSpec = {2685 width: 40,2686 length: 40,2687 location: 0.7,2688 foldback: 0,2689 paintStyle: {strokeWidth: 1, stroke: "#000000"},2690 id: "anArrow"2691 };2692 var connection1 = _jsPlumb.connect({2693 source: d1,2694 target: d2,2695 anchors: ["BottomCenter", [ 0.75, 0, 0, -1 ]],2696 overlays: [2697 ["Label", {label: "CONNECTION 1", location: 0.3, id: "aLabel"}],2698 ["Arrow", arrowSpec ]2699 ]2700 });2701 equal(2, support.length(connection1._jsPlumb.overlays));2702 var labelOverlay = connection1.getOverlay("aLabel");2703 var arrowOverlay = connection1.getOverlay("anArrow");2704 connection1.removeOverlay("aLabel");2705 equal(null, connection1._jsPlumb.overlays["aLabel"], "not registered in overlays map");2706 equal(null, connection1._jsPlumb.overlayPositions["aLabel"], "not registered in overlay positions map");2707 equal(null, connection1._jsPlumb.overlayPlacements["aLabel"], "not registered in overlay positions map");2708 equal(1, support.length(connection1._jsPlumb.overlays), "only one overlay remaining on the connection");2709 equal("anArrow", connection1._jsPlumb.overlays["anArrow"].id, "the id of this overlay is what we expected");2710 equal(labelOverlay.canvas.parentNode, null, "the label overlay was actually removed from the DOM");2711 // remove the arrow2712 connection1.removeOverlay("anArrow");2713 equal(null, connection1._jsPlumb.overlays["anArrow"], "anArrow not registered in overlays map");2714 equal(null, connection1._jsPlumb.overlayPositions["anArrow"], "anArrow not registered in overlay positions map");2715 equal(null, connection1._jsPlumb.overlayPlacements["anArrow"], "anArrow not registered in overlay positions map");2716 equal(0, support.length(connection1._jsPlumb.overlays), "no overlays remaining on the connection");2717 equal(arrowOverlay.path.parentNode, null, "the arrow overlay was actually removed from the DOM");2718 });2719 test(": _jsPlumb.connect (remove multiple overlays by id)", function () {2720 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");2721 var arrowSpec = {2722 width: 40,2723 length: 40,2724 location: 0.7,2725 foldback: 0,2726 paintStyle: {strokeWidth: 1, stroke: "#000000"},2727 id: "anArrow"2728 };2729 var connection1 = _jsPlumb.connect({2730 source: d1,2731 target: d2,2732 anchors: ["BottomCenter", [ 0.75, 0, 0, -1 ]],2733 overlays: [2734 ["Label", {label: "CONNECTION 1", location: 0.3, id: "aLabel"}],2735 ["Arrow", arrowSpec ]2736 ]2737 });2738 equal(2, support.length(connection1._jsPlumb.overlays));2739 connection1.removeOverlays("aLabel", "anArrow");2740 equal(0, support.length(connection1._jsPlumb.overlays));2741 });2742 test(": _jsPlumb.connect (overlays, short-hand version)", function () {2743 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2"), d3 = support.addDiv("d3");2744 var imageEventListener = function () {2745 };2746 var loc = { location: 0.7 };2747 var arrowSpec = { width: 40, length: 40, foldback: 0, paintStyle: {strokeWidth: 1, stroke: "#000000"}, id:"a" };2748 var connection1 = _jsPlumb.connect({2749 source: d1,2750 target: d2,2751 anchors: ["BottomCenter", [ 0.75, 0, 0, -1 ]],2752 overlays: [2753 ["Label", {label: "CONNECTION 1", location: 0.3, id:"l"}],2754 ["Arrow", arrowSpec, loc]2755 ]2756 });2757 equal(2, support.length(connection1._jsPlumb.overlays));2758 equal(jsPlumb.Overlays[renderMode].Label, connection1._jsPlumb.overlays["l"].constructor);2759 equal(jsPlumb.Overlays[renderMode].Arrow, connection1._jsPlumb.overlays["a"].constructor);2760 equal(0.7, connection1._jsPlumb.overlays["a"].loc);2761 equal(40, connection1._jsPlumb.overlays["a"].width);2762 equal(40, connection1._jsPlumb.overlays["a"].length);2763 });2764 test(": _jsPlumb.connect (removeAllOverlays)", function () {2765 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2"), d3 = support.addDiv("d3");2766 var imageEventListener = function () {2767 };2768 var loc = { location: 0.7 };2769 var arrowSpec = { width: 40, length: 40, foldback: 0, paintStyle: {strokeWidth: 1, stroke: "#000000"}, id:"a" };2770 var connection1 = _jsPlumb.connect({2771 source: d1,2772 target: d2,2773 anchors: ["BottomCenter", [ 0.75, 0, 0, -1 ]],2774 overlays: [2775 ["Label", {label: "CONNECTION 1", location: 0.3, cssClass: "PPPP", id:"l"}],2776 ["Arrow", arrowSpec, loc]2777 ]2778 });2779 equal(2, support.length(connection1._jsPlumb.overlays));2780 equal(jsPlumb.Overlays[renderMode].Label, connection1._jsPlumb.overlays["l"].constructor);2781 equal(jsPlumb.Overlays[renderMode].Arrow, connection1._jsPlumb.overlays["a"].constructor);2782 equal(0.7, connection1._jsPlumb.overlays["a"].loc);2783 equal(40, connection1._jsPlumb.overlays["a"].width);2784 equal(40, connection1._jsPlumb.overlays["a"].length);2785 // not valid anymore, as we dont nuke overlays until the component is deleted.2786 /*connection1.removeAllOverlays();2787 equal(0, connection1._jsPlumb.overlays.length);2788 equal(0, jsPlumb.getSelector(".PPPP").length);*/2789 _jsPlumb.deleteConnection(connection1);2790 equal(0, jsPlumb.getSelector(".PPPP").length, "overlay has been fully cleaned up");2791 });2792 test(": _jsPlumb.connect, specify arrow overlay using string identifier only", function () {2793 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2"), d3 = support.addDiv("d3");2794 var conn = _jsPlumb.connect({source: d1, target: d2, overlays: ["Arrow"]});2795 equal(jsPlumb.Overlays[renderMode].Arrow, support.head(conn._jsPlumb.overlays).constructor);2796 });2797 test(": Connection.getOverlay method, existing overlay", function () {2798 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");2799 var conn = _jsPlumb.connect({source: d1, target: d2, overlays: [2800 [ "Arrow", { id: "arrowOverlay" } ]2801 ] });2802 var overlay = conn.getOverlay("arrowOverlay");2803 ok(overlay != null);2804 });2805 test(": Connection.getOverlay method, non-existent overlay", function () {2806 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");2807 var conn = _jsPlumb.connect({source: d1, target: d2, overlays: [2808 [ "Arrow", { id: "arrowOverlay" } ]2809 ] });2810 var overlay = conn.getOverlay("IDONTEXIST");2811 ok(overlay == null);2812 });2813 test(": Overlay.setVisible method", function () {2814 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");2815 var conn = _jsPlumb.connect({source: d1, target: d2, overlays: [2816 [ "Arrow", { id: "arrowOverlay" } ]2817 ] });2818 var overlay = conn.getOverlay("arrowOverlay");2819 ok(overlay.isVisible());2820 overlay.setVisible(false);2821 ok(!overlay.isVisible());2822 overlay.setVisible(true);2823 ok(overlay.isVisible());2824 });2825 test(": _jsPlumb.connect (custom label overlay, set on Defaults, return plain DOM element)", function () {2826 _jsPlumb.Defaults.ConnectionOverlays = [2827 ["Custom", { id: "custom", create: function (connection) {2828 ok(connection != null, "we were passed in a connection");2829 var d = document.createElement("div");2830 d.setAttribute("custom", "true");2831 d.innerHTML = connection.id;2832 return d;2833 }}]2834 ];2835 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2"),2836 c = _jsPlumb.connect({source: d1, target: d2});2837 var o = c.getOverlay("custom");2838 equal(o.getElement().getAttribute("custom"), "true", "custom overlay created correctly");2839 equal(o.getElement().innerHTML, c.id, "custom overlay has correct value");2840 });2841 test(": _jsPlumb.connect (custom label overlay, set on Defaults, return selector)", function () {2842 _jsPlumb.Defaults.ConnectionOverlays = [2843 ["Custom", { id: "custom", create: function (connection) {2844 ok(connection != null, "we were passed in a connection");2845 return support.makeContent("<div custom='true'>" + connection.id + "</div>");2846 }}]2847 ];2848 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2"),2849 c = _jsPlumb.connect({source: d1, target: d2});2850 var o = c.getOverlay("custom");2851 equal(o.getElement().getAttribute("custom"), "true", "custom overlay created correctly");2852 equal(o.getElement().innerHTML, c.id, "custom overlay has correct value");2853 });2854 test(": overlay events", function () {2855 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2"), d3 = support.addDiv("d3");2856 var clicked = 0;2857 var connection1 = _jsPlumb.connect({2858 source: d1,2859 target: d2,2860 overlays: [2861 ["Label", {2862 label: "CONNECTION 1",2863 location: 0.3,2864 id: "label",2865 events: {2866 click: function (label, e) {2867 clicked++;2868 }2869 }2870 }]2871 ]2872 });2873 var l = connection1.getOverlay("label");2874 l.fire("click", l);2875 equal(clicked, 1, "click event was fired once");2876 });2877 // this test is for the original detach function; it should stay working after i mess with it2878 // a little.2879 test(": _jsPlumb.detach (by element ids)", function () {2880 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");2881 var e1 = _jsPlumb.addEndpoint(d1);2882 var e2 = _jsPlumb.addEndpoint(d2);2883 var e3 = _jsPlumb.addEndpoint(d1);2884 var e4 = _jsPlumb.addEndpoint(d2);2885 _jsPlumb.connect({ sourceEndpoint: e1, targetEndpoint: e2 });2886 _jsPlumb.connect({ sourceEndpoint: e3, targetEndpoint: e4 }); // make two connections to be sure this works ;)2887 assertConnectionCount(e1, 1);2888 assertConnectionCount(e2, 1);2889 assertConnectionCount(e3, 1);2890 assertConnectionCount(e4, 1);2891 _jsPlumb.select({source: "d1", target: "d2"}).delete();2892 assertConnectionCount(e1, 0);2893 assertConnectionCount(e2, 0);2894 assertConnectionCount(e3, 0);2895 assertConnectionCount(e4, 0);2896 assertConnectionByScopeCount(_jsPlumb.getDefaultScope(), 0, _jsPlumb);2897 });2898 // detach is being made to operate more like connect - by taking one argument with a whole 2899 // bunch of possible params in it. if two args are passed in it will continue working2900 // in the old way.2901 test(": _jsPlumb.select+delete (params object, using element ids)", function () {2902 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");2903 var e1 = _jsPlumb.addEndpoint(d1);2904 var e2 = _jsPlumb.addEndpoint(d2);2905 _jsPlumb.connect({ sourceEndpoint: e1, targetEndpoint: e2 });2906 assertConnectionCount(e1, 1);2907 assertConnectionCount(e2, 1);2908 _jsPlumb.select({source: d1, target: d2}).delete();2909 assertConnectionCount(e1, 0);2910 assertConnectionCount(e2, 0);2911 assertConnectionByScopeCount(_jsPlumb.getDefaultScope(), 0, _jsPlumb);2912 });2913 //2914 //test(": _jsPlumb.detach (params object, using target only)", function() {2915 //var d1 = support.addDiv("d1"), d2 = support.addDiv("d2"), d3 = support.addDiv("d3"),2916 //e1 = _jsPlumb.addEndpoint(d1, {maxConnections:2}),2917 //e2 = _jsPlumb.addEndpoint(d2),2918 //e3 = _jsPlumb.addEndpoint(d3);2919 //_jsPlumb.connect({ sourceEndpoint:e1, targetEndpoint:e2 });2920 //_jsPlumb.connect({ sourceEndpoint:e1, targetEndpoint:e3 });2921 //assertConnectionCount(e1, 2);2922 //assertConnectionCount(e2, 1);2923 //assertConnectionCount(e3, 1);2924 //_jsPlumb.detach({target:"d2"});2925 //assertConnectionCount(e1, 1);2926 //assertConnectionCount(e2, 0);2927 //assertConnectionCount(e3, 1);2928 //assertConnectionByScopeCount(_jsPlumb.getDefaultScope(), 1);2929 //});2930 test(": _jsPlumb.select+delete (params object, using element objects)", function () {2931 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");2932 var e1 = _jsPlumb.addEndpoint(d1);2933 var e2 = _jsPlumb.addEndpoint(d2);2934 _jsPlumb.connect({ sourceEndpoint: e1, targetEndpoint: e2 });2935 assertConnectionByScopeCount(_jsPlumb.getDefaultScope(), 1, _jsPlumb);2936 assertConnectionCount(e1, 1);2937 assertConnectionCount(e2, 1);2938 _jsPlumb.select({source: d1, target: d2}).delete();2939 assertConnectionCount(e1, 0);2940 assertConnectionCount(e2, 0);2941 assertConnectionByScopeCount(_jsPlumb.getDefaultScope(), 0, _jsPlumb);2942 });2943 test(": _jsPlumb.select+delete (source and target as endpoint UUIDs)", function () {2944 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");2945 var e1 = _jsPlumb.addEndpoint(d1, {uuid: "abcdefg"});2946 ok(_jsPlumb.getEndpoint("abcdefg") != null, "e1 exists");2947 var e2 = _jsPlumb.addEndpoint(d2, {uuid: "hijklmn"});2948 ok(_jsPlumb.getEndpoint("hijklmn") != null, "e2 exists");2949 _jsPlumb.connect({ sourceEndpoint: e1, targetEndpoint: e2 });2950 assertConnectionByScopeCount(_jsPlumb.getDefaultScope(), 1, _jsPlumb);2951 assertConnectionCount(e1, 1);2952 assertConnectionCount(e2, 1);2953 _jsPlumb.select({uuids: ["abcdefg", "hijklmn"]}).delete();2954 assertConnectionCount(e1, 0);2955 assertConnectionCount(e2, 0);2956 assertConnectionByScopeCount(_jsPlumb.getDefaultScope(), 0, _jsPlumb);2957 });2958 test(": _jsPlumb.select+delete (sourceEndpoint and targetEndpoint supplied)", function () {2959 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");2960 var e1 = _jsPlumb.addEndpoint(d1);2961 var e2 = _jsPlumb.addEndpoint(d2);2962 _jsPlumb.connect({ sourceEndpoint: e1, targetEndpoint: e2 });2963 assertConnectionByScopeCount(_jsPlumb.getDefaultScope(), 1, _jsPlumb);2964 assertConnectionCount(e1, 1);2965 assertConnectionCount(e2, 1);2966 _jsPlumb.select({ sourceEndpoint: e1, targetEndpoint: e2 }).delete();2967 assertConnectionCount(e1, 0);2968 assertConnectionCount(e2, 0);2969 assertConnectionByScopeCount(_jsPlumb.getDefaultScope(), 0, _jsPlumb);2970 });2971 test(": _jsPlumb.makeDynamicAnchors (longhand)", function () {2972 var anchors = [_jsPlumb.makeAnchor([0.2, 0, 0, -1], null, _jsPlumb), _jsPlumb.makeAnchor([1, 0.2, 1, 0], null, _jsPlumb),2973 _jsPlumb.makeAnchor([0.8, 1, 0, 1], null, _jsPlumb), _jsPlumb.makeAnchor([0, 0.8, -1, 0], null, _jsPlumb) ];2974 var dynamicAnchor = _jsPlumb.makeDynamicAnchor(anchors);2975 var a = dynamicAnchor.getAnchors();2976 equal(a.length, 4, "Dynamic Anchors has four anchors");2977 for (var i = 0; i < a.length; i++)2978 ok(a[i].compute.constructor == Function, "anchor " + i + " well formed");2979 });2980 test(": _jsPlumb.makeDynamicAnchors (shorthand)", function () {2981 var anchors = [2982 [0.2, 0, 0, -1],2983 [1, 0.2, 1, 0],2984 [0.8, 1, 0, 1],2985 [0, 0.8, -1, 0]2986 ];2987 var dynamicAnchor = _jsPlumb.makeDynamicAnchor(anchors);2988 var a = dynamicAnchor.getAnchors();2989 equal(a.length, 4, "Dynamic Anchors has four anchors");2990 for (var i = 0; i < a.length; i++)2991 ok(a[i].compute.constructor == Function, "anchor " + i + " well formed");2992 });2993 test(": Connection.isVisible/setVisible", function () {2994 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");2995 var c1 = _jsPlumb.connect({source: d1, target: d2});2996 equal(true, c1.isVisible(), "Connection is visible after creation.");2997 c1.setVisible(false);2998 equal(false, c1.isVisible(), "Connection is not visible after calling setVisible(false).");2999 equal(c1.getConnector().canvas.style.display, "none");3000 c1.setVisible(true);3001 equal(true, c1.isVisible(), "Connection is visible after calling setVisible(true).");3002 equal(c1.getConnector().canvas.style.display, "");3003 });3004 test(": Endpoint.isVisible/setVisible basic test (no connections)", function () {3005 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");3006 var e1 = _jsPlumb.addEndpoint(d1);3007 equal(true, e1.isVisible(), "Endpoint is visible after creation.");3008 e1.setVisible(false);3009 equal(false, e1.isVisible(), "Endpoint is not visible after calling setVisible(false).");3010 equal(e1.canvas.style.display, "none");3011 e1.setVisible(true);3012 equal(true, e1.isVisible(), "Endpoint is visible after calling setVisible(true).");3013 equal(e1.canvas.style.display, "block");3014 });3015 test(": Endpoint.isVisible/setVisible (one connection, other Endpoint's visibility should track changes in the source, because it has only this connection.)", function () {3016 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");3017 var e1 = _jsPlumb.addEndpoint(d1), e2 = _jsPlumb.addEndpoint(d2);3018 equal(true, e1.isVisible(), "Endpoint is visible after creation.");3019 var c1 = _jsPlumb.connect({source: e1, target: e2});3020 e1.setVisible(false);3021 equal(false, e1.isVisible(), "Endpoint is not visible after calling setVisible(false).");3022 equal(false, e2.isVisible(), "other Endpoint is not visible either.");3023 equal(false, c1.isVisible(), "connection between the two is not visible either.");3024 e1.setVisible(true);3025 equal(true, e1.isVisible(), "Endpoint is visible after calling setVisible(true).");3026 equal(true, e2.isVisible(), "other Endpoint is visible too");3027 equal(true, c1.isVisible(), "connection between the two is visible too.");3028 });3029 test(": Endpoint.isVisible/setVisible (one connection, other Endpoint's visibility should not track changes in the source, because it has another connection.)", function () {3030 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2"), d3 = support.addDiv("d3");3031 var e1 = _jsPlumb.addEndpoint(d1), e2 = _jsPlumb.addEndpoint(d2, { maxConnections: 2 }), e3 = _jsPlumb.addEndpoint(d3);3032 equal(true, e1.isVisible(), "Endpoint is visible after creation.");3033 var c1 = _jsPlumb.connect({source: e1, target: e2});3034 var c2 = _jsPlumb.connect({source: e2, target: e3});3035 e1.setVisible(false);3036 equal(false, e1.isVisible(), "Endpoint is not visible after calling setVisible(false).");3037 equal(true, e2.isVisible(), "other Endpoint should still be visible.");3038 equal(true, e3.isVisible(), "third Endpoint should still be visible.");3039 equal(false, c1.isVisible(), "connection between the two is not visible either.");3040 equal(true, c2.isVisible(), "other connection is visible.");3041 e1.setVisible(true);3042 equal(true, e1.isVisible(), "Endpoint is visible after calling setVisible(true).");3043 equal(true, e2.isVisible(), "other Endpoint is visible too");3044 equal(true, c1.isVisible(), "connection between the two is visible too.");3045 equal(true, c2.isVisible(), "other connection is visible.");3046 });3047 // tests of the functionality that allows a user to specify that they want elements appended to the document body3048 test(" _jsPlumb.setContainer, specified with a selector", function () {3049 _jsPlumb.setContainer(document.body);3050 equal(document.getElementById("container").childNodes.length, 0, "container has no nodes");3051 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");3052 equal(document.getElementById("container").childNodes.length, 2, "container has two div elements"); // the divs we added have been added to the 'container' div.3053 // but we have told _jsPlumb to add its canvas to the body, so this connect call should not add another few elements to the container:3054 _jsPlumb.connect({source: d1, target: d2});3055 equal(document.getElementById("container").childNodes.length, 2, "container still has two div elements");3056 });3057 // tests of the functionality that allows a user to specify that they want elements appended to some specific container.3058 test(" _jsPlumb.setContainer, specified with DOM element", function () {3059 _jsPlumb.setContainer(document.getElementsByTagName("body")[0]);3060 equal(0, document.getElementById("container").childNodes.length);3061 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");3062 equal(2, document.getElementById("container").childNodes.length, "two divs added to the container"); // the divs we added have been added to the 'container' div.3063 // but we have told _jsPlumb to add its canvas to the body, so this connect call should not add another few elements to the container:3064 var bodyElementCount = document.body.childNodes.length;3065 _jsPlumb.connect({source: d1, target: d2});3066 equal(2, document.getElementById("container").childNodes.length, "still only two children in container; elements were added to the body by _jsPlumb");3067 // test to see if 3 elements have been added3068 equal(bodyElementCount + 3, document.body.childNodes.length, "3 new elements added to the document body");3069 });3070 test(" _jsPlumb.setContainer, moves managed nodes", function () {3071 var c2 = support.addDiv("c2", document.body);3072 var c = document.getElementById("container");3073 equal(c.childNodes.length, 0, "container has no nodes");3074 var d1 = support.addDiv("d1", c);3075 equal(c.childNodes.length, 1, "container has one node");3076 _jsPlumb.manage("d1", d1);3077 // d2 has d1 as the parent so it should not end up having the container as its parent.3078 var d2 = support.addDiv("d2", d1);3079 _jsPlumb.setContainer("c2");3080 equal(d1.parentNode, c2, "managed node with no connections was moved");3081 equal(c.childNodes.length, 0, "container has no nodes");3082 equal(c2.childNodes.length, 1, "container 2 has one node");3083 });3084 var _overlayTest = function(component, fn) {3085 var o = component.getOverlays();3086 for (var i in o)3087 if (! fn(o[i])) return false;3088 return true;3089 };3090 var _ensureContainer = function(component, container) {3091 return _overlayTest(component, function(o) {3092 return o.canvas ? o.canvas.parentNode == container : o.getElement().parentNode == container;3093 });3094 };3095 test(" change Container programmatically", function () {3096 _jsPlumb.setContainer(container);3097 var newContainer = document.createElement("div");3098 newContainer.id = "newContainer";3099 document.body.appendChild(newContainer);3100 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2"), d3 = support.addDiv("d3");3101 var e1 = _jsPlumb.addEndpoint(d1, {3102 overlays: [3103 [ "Label", { label: "FOO", id: "label" }]3104 ]3105 }),3106 e2 = _jsPlumb.addEndpoint(d2, {3107 overlays: [3108 [ "Label", { label: "FOO", id: "label" }]3109 ]3110 }),3111 e3 = _jsPlumb.addEndpoint(d1, {3112 overlays: [3113 [ "Label", { label: "FOO", id: "label" }]3114 ]3115 });3116 var c = _jsPlumb.connect({3117 source: e1, target: e2,3118 paintStyle: {3119 outline: 4,3120 outlineStyle: "red",3121 stroke: "red",3122 strokeWidth: 23123 },3124 overlays: [3125 "Label", "Arrow"3126 ]3127 });3128 equal(e1.canvas.parentNode, container, "e1 canvas parent is container");3129 equal(c.getConnector().canvas.parentNode, container, "connector parent is container");3130 ok(_ensureContainer(e1, container));3131 ok(_ensureContainer(c, container));3132 _jsPlumb.setContainer(newContainer);3133 equal(e1.canvas.parentNode, newContainer, "e1 canvas parent is newContainer");3134 equal(c.getConnector().canvas.parentNode, newContainer, "connector parent is newContainer");3135 ok(_ensureContainer(e1, newContainer));3136 ok(_ensureContainer(c, newContainer));3137 });3138 test(" detachable defaults to true when connection made between two endpoints", function () {3139 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2"),3140 e1 = _jsPlumb.addEndpoint(d1), e2 = _jsPlumb.addEndpoint(d2),3141 c = _jsPlumb.connect({source: e1, target: e2});3142 equal(c.isDetachable(), true, "connection not detachable");3143 });3144 test(" connection detachable when target endpoint has connectionsDetachable set to true", function () {3145 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2"),3146 e1 = _jsPlumb.addEndpoint(d1), e2 = _jsPlumb.addEndpoint(d2, {connectionsDetachable: true}),3147 c = _jsPlumb.connect({source: e1, target: e2});3148 equal(c.isDetachable(), true, "connection detachable because connectionsDetachable was set on target endpoint");3149 });3150 test(" connection detachable when source endpoint has connectionsDetachable set to true", function () {3151 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2"),3152 e1 = _jsPlumb.addEndpoint(d1, {connectionsDetachable: true}), e2 = _jsPlumb.addEndpoint(d2),3153 c = _jsPlumb.connect({source: e1, target: e2});3154 equal(c.isDetachable(), true, "connection detachable because connectionsDetachable was set on source endpoint");3155 });3156 test(" Connector has 'type' member set", function () {3157 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");3158 var c = _jsPlumb.connect({source: d1, target: d2});3159 equal(c.getConnector().type, "Bezier", "Bezier connector has type set");3160 var c2 = _jsPlumb.connect({source: d1, target: d2, connector: "Straight"});3161 equal(c2.getConnector().type, "Straight", "Straight connector has type set");3162 var c3 = _jsPlumb.connect({source: d1, target: d2, connector: "Flowchart"});3163 equal(c3.getConnector().type, "Flowchart", "Flowchart connector has type set");3164 });3165 test(" Endpoints have 'type' member set", function () {3166 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");3167 var c = _jsPlumb.connect({source: d1, target: d2});3168 equal(c.endpoints[0].type, "Dot", "Dot endpoint has type set");3169 var c2 = _jsPlumb.connect({source: d1, target: d2, endpoints: ["Rectangle", "Blank"]});3170 equal(c2.endpoints[1].type, "Blank", "Blank endpoint has type set");3171 equal(c2.endpoints[0].type, "Rectangle", "Rectangle endpoint has type set");3172 });3173 test(" Overlays have 'type' member set", function () {3174 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");3175 var c = _jsPlumb.connect({3176 source: d1,3177 target: d2,3178 overlays: [ "Arrow", "Label", "PlainArrow", "Diamond" ]3179 });3180 /*equal(c._jsPlumb.overlays[0].type, "Arrow", "Arrow overlay has type set");3181 equal(c._jsPlumb.overlays[1].type, "Label", "Label overlay has type set");3182 equal(c._jsPlumb.overlays[2].type, "PlainArrow", "PlainArrow overlay has type set");3183 equal(c._jsPlumb.overlays[3].type, "Diamond", "Diamond overlay has type set");*/3184 ok(_overlayTest(c, function(o) {3185 return o.type != null;3186 }, "type is set"));3187 });3188 test(" _jsPlumb.hide, original one-arg version", function () {3189 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2"),3190 e = { isSource: true, isTarget: true, maxConnections: -1 },3191 e1 = _jsPlumb.addEndpoint(d1, e),3192 e2 = _jsPlumb.addEndpoint(d2, e),3193 c1 = _jsPlumb.connect({source: e1, target: e2, overlays:[ [ "Label", { id:"lbl"}]]});3194 equal(true, c1.getOverlay("lbl").isVisible(), "overlay is visible");3195 equal(true, c1.isVisible(), "Connection 1 is visible after creation.");3196 equal(true, e1.isVisible(), "endpoint 1 is visible after creation.");3197 equal(true, e2.isVisible(), "endpoint 2 is visible after creation.");3198 _jsPlumb.hide(d1);3199 equal(false, c1.getOverlay("lbl").isVisible(), "overlay is no longer visible");3200 equal(false, c1.isVisible(), "Connection 1 is no longer visible.");3201 equal(true, e1.isVisible(), "endpoint 1 is still visible.");3202 equal(true, e2.isVisible(), "endpoint 2 is still visible.");3203 _jsPlumb.show(d1);3204 equal(true, c1.getOverlay("lbl").isVisible(), "overlay is no visible again");3205 equal(true, c1.isVisible(), "Connection 1 is visible again.");3206 });3207 test(" _jsPlumb.hide, two-arg version, endpoints should also be hidden", function () {3208 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2"),3209 e = { isSource: true, isTarget: true, maxConnections: -1 },3210 e1 = _jsPlumb.addEndpoint(d1, e),3211 e2 = _jsPlumb.addEndpoint(d2, e),3212 c1 = _jsPlumb.connect({source: e1, target: e2});3213 equal(true, c1.isVisible(), "Connection 1 is visible after creation.");3214 equal(true, e1.isVisible(), "endpoint 1 is visible after creation.");3215 equal(true, e2.isVisible(), "endpoint 2 is visible after creation.");3216 _jsPlumb.hide("d1", true);3217 equal(false, c1.isVisible(), "Connection 1 is no longer visible.");3218 equal(false, e1.isVisible(), "endpoint 1 is no longer visible.");3219 equal(true, e2.isVisible(), "endpoint 2 is still visible.");3220 _jsPlumb.show(d1); // now show d1, but do not alter the endpoints. e1 should still be hidden3221 equal(true, c1.isVisible(), "Connection 1 is visible again.");3222 equal(false, e1.isVisible(), "endpoint 1 is no longer visible.");3223 equal(true, e2.isVisible(), "endpoint 2 is still visible.");3224 });3225 test(" _jsPlumb.show, two-arg version, endpoints should become visible", function () {3226 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2"),3227 e = { isSource: true, isTarget: true, maxConnections: -1 },3228 e1 = _jsPlumb.addEndpoint(d1, e),3229 e2 = _jsPlumb.addEndpoint(d2, e),3230 c1 = _jsPlumb.connect({source: e1, target: e2});3231 _jsPlumb.hide("d1", true);3232 equal(false, c1.isVisible(), "Connection 1 is no longer visible.");3233 equal(false, e1.isVisible(), "endpoint 1 is no longer visible.");3234 equal(true, e2.isVisible(), "endpoint 2 is still visible.");3235 _jsPlumb.show(d1, true); // now show d1, and alter the endpoints. e1 should be visible.3236 equal(true, c1.isVisible(), "Connection 1 is visible again.");3237 equal(true, e1.isVisible(), "endpoint 1 is visible again.");3238 equal(true, e2.isVisible(), "endpoint 2 is still visible.");3239 });3240 test(" _jsPlumb.show, two-arg version, endpoints should become visible, but not all connections, because some other endpoints are not visible.", function () {3241 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2"), d3 = support.addDiv("d3"),3242 e = { isSource: true, isTarget: true, maxConnections: -1 },3243 e1 = _jsPlumb.addEndpoint(d1, e),3244 e11 = _jsPlumb.addEndpoint(d1, e),3245 e2 = _jsPlumb.addEndpoint(d2, e),3246 e3 = _jsPlumb.addEndpoint(d3, e),3247 c1 = _jsPlumb.connect({source: e1, target: e2}),3248 c2 = _jsPlumb.connect({source: e11, target: e3});3249 // we now have d1 connected to both d3 and d2. we'll hide d1, and everything on d1 should be hidden.3250 _jsPlumb.hide("d1", true);3251 equal(false, c1.isVisible(), "connection 1 is no longer visible.");3252 equal(false, c2.isVisible(), "connection 2 is no longer visible.");3253 equal(false, e1.isVisible(), "endpoint 1 is no longer visible.");3254 equal(false, e11.isVisible(), "endpoint 1 is no longer visible.");3255 equal(true, e2.isVisible(), "endpoint 2 is still visible.");3256 equal(true, e3.isVisible(), "endpoint 3 is still visible.");3257 // now, we will also hide d3. making d1 visible again should NOT result in c2 becoming visible, because the other endpoint3258 // for c2 is e3, which is not visible.3259 _jsPlumb.hide(d3, true);3260 equal(false, e3.isVisible(), "endpoint 3 is no longer visible.");3261 _jsPlumb.show(d1, true); // now show d1, and alter the endpoints. e1 should be visible, c1 should be visible, but c2 should not.3262 equal(true, c1.isVisible(), "Connection 1 is visible again.");3263 equal(false, c2.isVisible(), "Connection 2 is not visible.");3264 equal(true, e1.isVisible(), "endpoint 1 is visible again.");3265 equal(true, e11.isVisible(), "endpoint 11 is visible again.");3266 equal(true, e2.isVisible(), "endpoint 2 is still visible.");3267 equal(false, e3.isVisible(), "endpoint 3 is still not visible.");3268 });3269 test("show/hide Overlays", function() {3270 var c = _jsPlumb.connect({source:support.addDiv("d1"), target:support.addDiv("d2"), overlays:[3271 [ "Label", { "id":"lbl" } ]3272 ]});3273 equal(c.getOverlay("lbl").isVisible(), true, "overlay is visible");3274 c.hideOverlays();3275 //equal(c.getOverlay("lbl").canvas.style.display, "none", "overlay not visible");3276 equal(c.getOverlay("lbl").isVisible(), false, "overlay is not visible");3277 c.showOverlays();3278 equal(c.getOverlay("lbl").isVisible(), true, "overlay is visible");3279 });3280 //3281 //test(" _jsPlumb.hide, two-arg version, endpoints should also be hidden", function() {3282 //var d1 = support.addDiv("d1"), d2 = support.addDiv("d2"),3283 //e = { isSource:true, isTarget:true, maxConnections:-1 },3284 //e1 = _jsPlumb.addEndpoint(d1, e),3285 //e2 = _jsPlumb.addEndpoint(d2, e),3286 //c1 = _jsPlumb.connect({source:e1, target:e2});3287 //equal(true, c1.isVisible(), "Connection 1 is visible after creation.");3288 //equal(true, e1.isVisible(), "endpoint 1 is visible after creation.");3289 //equal(true, e2.isVisible(), "endpoint 2 is visible after creation.");3290 //_jsPlumb.hide("d1", true);3291 //equal(false, c1.isVisible(), "Connection 1 is no longer visible.");3292 //equal(false, e1.isVisible(), "endpoint 1 is no longer visible.");3293 //equal(true, e2.isVisible(), "endpoint 2 is still visible.");3294 //});3295 //3296 //test for issue 132: label leaves its element in the DOM after it has been3297 //removed from a connection.3298 //3299 test(" label cleans itself up properly", function () {3300 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");3301 var c = _jsPlumb.connect({source: d1, target: d2, overlays: [3302 [ "Label", {id: "label", cssClass: "foo"}]3303 ]});3304 ok(jsPlumb.getSelector(".foo").length == 1, "label element exists in DOM");3305 c.removeOverlay("label");3306 ok(support.length(c.getOverlays()) == 0, "no overlays left on component");3307 ok(jsPlumb.getSelector(".foo").length == 0 , "label element does not exist in DOM");3308 });3309 test(" arrow cleans itself up properly", function () {3310 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");3311 var c = _jsPlumb.connect({source: d1, target: d2, overlays: [3312 [ "Arrow", {id: "arrow"}]3313 ]});3314 ok(c.getOverlay("arrow") != null, "arrow overlay exists");3315 c.removeOverlay("arrow");3316 ok(c.getOverlay("arrow") == null, "arrow overlay has been removed");3317 });3318 test(" label overlay getElement function", function () {3319 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");3320 var c = _jsPlumb.connect({source: d1, target: d2, overlays: [3321 [ "Label", {id: "label"}]3322 ]});3323 ok(c.getOverlay("label").getElement() != null, "label overlay exposes element via getElement method");3324 });3325 test(" label overlay provides getLabel and setLabel methods", function () {3326 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");3327 var c = _jsPlumb.connect({source: d1, target: d2, overlays: [3328 [ "Label", {id: "label", label: "foo"}]3329 ]});3330 var o = c.getOverlay("label"), e = o.getElement();3331 equal(e.innerHTML, "foo", "label text is set to original value");3332 o.setLabel("baz");3333 equal(e.innerHTML, "baz", "label text is set to new value 'baz'");3334 equal(o.getLabel(), "baz", "getLabel function works correctly with String");3335 // now try functions3336 var aFunction = function () {3337 return "aFunction";3338 };3339 o.setLabel(aFunction);3340 equal(e.innerHTML, "aFunction", "label text is set to new value from Function");3341 equal(o.getLabel(), aFunction, "getLabel function works correctly with Function");3342 });3343 test(" label overlay custom css class", function () {3344 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");3345 var c = _jsPlumb.connect({source: d1, target: d2, overlays: [3346 [ "Label", {3347 id: "label",3348 cssClass: "foo"3349 }]3350 ]});3351 var o = c.getOverlay("label");3352 ok(jsPlumb.hasClass(o.getElement(), "foo"), "label overlay has custom css class");3353 });3354 test(" label overlay custom css class in labelStyle", function () {3355 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");3356 var c = _jsPlumb.connect({source: d1, target: d2, overlays: [3357 [ "Label", {3358 id: "label",3359 labelStyle: {3360 cssClass: "foo"3361 }3362 }]3363 ]});3364 var o = c.getOverlay("label");3365 ok(jsPlumb.hasClass(o.getElement(), "foo"), "label overlay has custom css class");3366 });3367 test(" label overlay - labelStyle", function () {3368 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");3369 var c = _jsPlumb.connect({source: d1, target: d2, overlays: [3370 [ "Label", {3371 id: "label",3372 labelStyle: {3373 borderWidth: 2,3374 borderStyle: "red",3375 fill: "blue",3376 color: "green",3377 padding: 103378 }3379 }]3380 ]});3381 var o = c.getOverlay("label"), el = o.getElement();3382 equal(el.style.borderWidth, "2px", "border width 2");3383 equal(el.style.borderColor, "red", "border color red");3384 equal(el.style.backgroundColor, "blue", "bg color blue");3385 equal(el.style.color, "green", "color green");3386 });3387 test(" parameters object works for Endpoint", function () {3388 var d1 = support.addDiv("d1"),3389 f = function () {3390 alert("FOO!");3391 },3392 e = _jsPlumb.addEndpoint(d1, {3393 isSource: true,3394 parameters: {3395 "string": "param1",3396 "int": 4,3397 "function": f3398 }3399 });3400 ok(e.getParameter("string") === "param1", "getParameter(String) works correctly");3401 ok(e.getParameter("int") === 4, "getParameter(int) works correctly");3402 ok(e.getParameter("function") == f, "getParameter(Function) works correctly");3403 });3404 test(" parameters object works for Connection", function () {3405 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2"),3406 f = function () {3407 alert("FOO!");3408 };3409 var c = _jsPlumb.connect({3410 source: d1,3411 target: d2,3412 parameters: {3413 "string": "param1",3414 "int": 4,3415 "function": f3416 }3417 });3418 ok(c.getParameter("string") === "param1", "getParameter(String) works correctly");3419 ok(c.getParameter("int") === 4, "getParameter(int) works correctly");3420 ok(c.getParameter("function") == f, "getParameter(Function) works correctly");3421 });3422 test(" parameters set on Endpoints and Connections are all merged, and merged correctly at that.", function () {3423 var d1 = support.addDiv("d1"),3424 d2 = support.addDiv("d2"),3425 e = _jsPlumb.addEndpoint(d1, {3426 isSource: true,3427 parameters: {3428 "string": "sourceEndpoint",3429 "int": 0,3430 "function": function () {3431 return "sourceEndpoint";3432 }3433 }3434 }),3435 e2 = _jsPlumb.addEndpoint(d2, {3436 isTarget: true,3437 parameters: {3438 "int": 1,3439 "function": function () {3440 return "targetEndpoint";3441 }3442 }3443 }),3444 c = _jsPlumb.connect({source: e, target: e2, parameters: {3445 "function": function () {3446 return "connection";3447 }3448 }});3449 ok(c.getParameter("string") === "sourceEndpoint", "getParameter(String) works correctly");3450 ok(c.getParameter("int") === 0, "getParameter(int) works correctly");3451 ok(c.getParameter("function")() == "connection", "getParameter(Function) works correctly");3452 });3453 // anchor manager tests. a new and more comprehensive way of managing the paint, introduced in 1.3.53454 test(" anchorManager registers standard connection", function () {3455 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");3456 var c = _jsPlumb.connect({source: d1, target: d2});3457 equal(_jsPlumb.anchorManager.getConnectionsFor("d1").length, 1);3458 equal(_jsPlumb.anchorManager.getEndpointsFor("d1").length, 1);3459 equal(_jsPlumb.anchorManager.getConnectionsFor("d2").length, 1);3460 equal(_jsPlumb.anchorManager.getEndpointsFor("d2").length, 1);3461 var c2 = _jsPlumb.connect({source: d1, target: d2});3462 equal(_jsPlumb.anchorManager.getConnectionsFor("d1").length, 2);3463 equal(_jsPlumb.anchorManager.getConnectionsFor("d2").length, 2);3464 equal(_jsPlumb.anchorManager.getEndpointsFor("d1").length, 2);3465 equal(_jsPlumb.anchorManager.getEndpointsFor("d2").length, 2);3466 });3467 // anchor manager tests. a new and more comprehensive way of managing the paint, introduced in 1.3.53468 test(" anchorManager registers dynamic anchor connection, and removes it.", function () {3469 var d3 = support.addDiv("d3"), d4 = support.addDiv("d4");3470 var c = _jsPlumb.connect({source: d3, target: d4, anchors: ["AutoDefault", "AutoDefault"]});3471 equal(_jsPlumb.anchorManager.getConnectionsFor("d3").length, 1);3472 var c2 = _jsPlumb.connect({source: d3, target: d4});3473 equal(_jsPlumb.anchorManager.getConnectionsFor("d3").length, 2);3474 equal(_jsPlumb.anchorManager.getConnectionsFor("d4").length, 2);3475 equal(_jsPlumb.anchorManager.getEndpointsFor("d3").length, 2);3476 _jsPlumb.deleteConnection(c);3477 equal(_jsPlumb.anchorManager.getConnectionsFor("d3").length, 1);3478 });3479 // anchor manager tests. a new and more comprehensive way of managing the paint, introduced in 1.3.53480 test(" anchorManager registers continuous anchor connection, and removes it.", function () {3481 var d3 = support.addDiv("d3"), d4 = support.addDiv("d4");3482 var c = _jsPlumb.connect({source: d3, target: d4, anchors: ["Continuous", "Continuous"]});3483 equal(_jsPlumb.anchorManager.getConnectionsFor("d3").length, 1);3484 equal(_jsPlumb.anchorManager.getConnectionsFor("d4").length, 1);3485 _jsPlumb.deleteConnection(c);3486 equal(_jsPlumb.anchorManager.getConnectionsFor("d3").length, 0);3487 equal(_jsPlumb.anchorManager.getConnectionsFor("d4").length, 0);3488 _jsPlumb.reset();3489 equal(_jsPlumb.anchorManager.getEndpointsFor("d4").length, 0);3490 });3491 test(" Continuous anchor default face, no faces supplied", function () {3492 var d3 = support.addDiv("d3"), ep = _jsPlumb.addEndpoint(d3, {3493 anchor: "Continuous"3494 });3495 equal(ep.anchor.getDefaultFace(), "top", "default is top when no faces specified");3496 });3497 test(" Continuous anchor default face, faces supplied", function () {3498 var d3 = support.addDiv("d3"), ep = _jsPlumb.addEndpoint(d3, {3499 anchor: [ "Continuous", { faces: [ "bottom", "left" ] } ]3500 });3501 equal(ep.anchor.getDefaultFace(), "bottom", "default is bottom");3502 ok(ep.anchor.isEdgeSupported("bottom"), "bottom edge supported");3503 ok(ep.anchor.isEdgeSupported("left"), "left edge supported");3504 ok(!ep.anchor.isEdgeSupported("right"), "right edge not supported");3505 ok(!ep.anchor.isEdgeSupported("top"), "top edge not supported");3506 ok(!ep.anchor.isEdgeSupported("unknown"), "unknown edge not supported");3507 // TODO: support locking to a specific face.3508 //ep.anchor.lock();3509 });3510 test(" Continuous anchor current face is set", function () {3511 var d3 = support.addDiv("d3", null, "", 50, 50, 200, 200),3512 ep3 = _jsPlumb.addEndpoint(d3, {3513 anchor: "Continuous"3514 }),3515 d4 = support.addDiv("d4", null, "", 50, 450, 200, 200),3516 ep4 = _jsPlumb.addEndpoint(d4, {3517 anchor: "Continuous"3518 });3519 _jsPlumb.connect({source:ep3, target:ep4});3520 // we should have picked 'bottom' face for ep3 and 'top' for ep4, based on the orientation of their elements.3521 equal(ep3.anchor.getCurrentFace(), "bottom", "ep3's anchor is 'bottom'");3522 equal(ep4.anchor.getCurrentFace(), "top", "ep4's anchor is 'top'");3523 // move d3, redraw, and check the anchors have changed appropriately.3524 d3.style.top = "1050px";3525 _jsPlumb.revalidate(d3);3526 equal(ep3.anchor.getCurrentFace(), "top", "ep3's anchor is 'top' after d3 moved below d4");3527 equal(ep4.anchor.getCurrentFace(), "bottom", "ep4's anchor is 'bottom' after d3 moved below d4");3528 });3529 test(" Continuous anchor lock current face", function () {3530 var d3 = support.addDiv("d3", null, "", 50, 50, 200, 200),3531 ep3 = _jsPlumb.addEndpoint(d3, {3532 anchor: "Continuous"3533 }),3534 d4 = support.addDiv("d4", null, "", 50, 450, 200, 200),3535 ep4 = _jsPlumb.addEndpoint(d4, {3536 anchor: "Continuous"3537 });3538 _jsPlumb.connect({source:ep3, target:ep4});3539 // as before, we should have picked 'bottom' face for ep3 and 'top' for ep4, based on the orientation of their elements.3540 equal(ep3.anchor.getCurrentFace(), "bottom", "ep3's anchor is 'bottom'");3541 equal(ep4.anchor.getCurrentFace(), "top", "ep4's anchor is 'top'");3542 // lock ep3's face, move, redraw, check that only ep4's face has changed.3543 ep3.anchor.lock();3544 d3.style.top = "1050px";3545 _jsPlumb.revalidate(d3);3546 equal(ep3.anchor.getCurrentFace(), "bottom", "ep3's anchor is 'bottom' after d3 moved below d4, because ep3's current face is locked");3547 equal(ep4.anchor.getCurrentFace(), "bottom", "ep4's anchor is 'bottom' after d3 moved below d4");3548 // unlock ep3's face, redraw, check that only ep4's face has changed.3549 ep3.anchor.unlock();3550 _jsPlumb.revalidate(d3);3551 equal(ep3.anchor.getCurrentFace(), "top", "ep3's anchor is 'top' after ep3's current face unlocked and a redraw called");3552 equal(ep4.anchor.getCurrentFace(), "bottom", "ep4's anchor is 'bottom' after d3 moved below d4");3553 });3554 test(" Continuous anchor lock current axis", function () {3555 var d3 = support.addDiv("d3", null, "", 50, 50, 200, 200),3556 ep3 = _jsPlumb.addEndpoint(d3, {3557 anchor: "Continuous"3558 }),3559 d4 = support.addDiv("d4", null, "", 50, 450, 200, 200),3560 ep4 = _jsPlumb.addEndpoint(d4, {3561 anchor: "Continuous"3562 });3563 _jsPlumb.connect({source:ep3, target:ep4});3564 // as before, we should have picked 'bottom' face for ep3 and 'top' for ep4, based on the orientation of their elements.3565 equal(ep3.anchor.getCurrentFace(), "bottom", "ep3's anchor is 'bottom'");3566 equal(ep4.anchor.getCurrentFace(), "top", "ep4's anchor is 'top'");3567 // move d3 to the right of d4, redraw, check that the anchor faces are correct3568 d3.style.top = "450px";3569 d3.style.left = "450px";3570 _jsPlumb.revalidate(d3);3571 equal(ep3.anchor.getCurrentFace(), "left", "ep3's anchor is 'left' after d3 moved to the right of d4");3572 equal(ep4.anchor.getCurrentFace(), "right", "ep4's anchor is 'right' after d3 moved to the right of d4");3573 // lock ep3's face, move, redraw, check that ep3's axis is 'right' (on the x axis; the choice of right is3574 // a result of the face picking algorithm. it's directly underneath so it could be left or right without3575 // affecting the user's perception)3576 ep3.anchor.lockCurrentAxis();3577 d3.style.top = "1050px";3578 d3.style.left = "0px";3579 _jsPlumb.revalidate(d3);3580 equal(ep3.anchor.getCurrentFace(), "right", "ep3's anchor is 'right' after d3 moved below d4, because ep3's current axis is locked");3581 equal(ep4.anchor.getCurrentFace(), "bottom", "ep4's anchor is 'bottom' after d3 moved below d4");3582 // now move d3 over to the right far enough that the anchor would ordinarily switch to 'top', but the axis is locked.3583 d3.style.top = "1050px";3584 d3.style.left = "350px";3585 _jsPlumb.revalidate(d3);3586 equal(ep3.anchor.getCurrentFace(), "left", "ep3's anchor is 'left' after d3 moved below d4, because ep3's current axis is locked");3587 equal(ep4.anchor.getCurrentFace(), "bottom", "ep4's anchor is 'bottom' after d3 moved below d4");3588 // unlock the axis for ep3, redraw. should move to 'top' now.3589 ep3.anchor.unlockCurrentAxis();3590 _jsPlumb.revalidate(d3);3591 equal(ep3.anchor.getCurrentFace(), "top", "ep3's anchor is 'top' after axis unlocked");3592 equal(ep4.anchor.getCurrentFace(), "bottom", "ep4's anchor is 'bottom' after d3 moved below d4");3593 });3594 asyncTest(" setImage on Endpoint, with supplied onload", function () {3595 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2"), ep,3596 e = {3597 endpoint: [ "Image", {3598 src: "atom.png",3599 onload: function (imgEp) {3600 QUnit.start();3601 ok(imgEp._jsPlumb.img.src.indexOf("atom.png") != -1);3602 ep.setImage("littledot.png", function (imgEp) {3603 ok(imgEp._jsPlumb.img.src.indexOf("littledot.png") != -1);3604 });3605 }3606 } ]3607 };3608 ep = _jsPlumb.addEndpoint(d1, e);3609 });3610// issue 190 - regressions with getInstance. these tests ensure that generated ids are unique across3611// instances. 3612 test(" id clashes between instances", function () {3613 var d1 = document.createElement("div"),3614 d2 = document.createElement("div"),3615 _jsp2 = jsPlumb.getInstance();3616 document.body.appendChild(d1);3617 document.body.appendChild(d2);3618 _jsPlumb.addEndpoint(d1);3619 _jsp2.addEndpoint(d2);3620 var id1 = d1.getAttribute("id"),3621 id2 = d2.getAttribute("id");3622 var idx = id1.indexOf("_"), idx2 = id1.lastIndexOf("_"), v1 = id1.substring(idx, idx2);3623 var idx3 = id2.indexOf("_"), idx4 = id2.lastIndexOf("_"), v2 = id2.substring(idx3, idx4);3624 ok(v1 != v2, "instance versions are different : " + v1 + " : " + v2);3625 _jsp2.unbindContainer();3626 });3627 test(" id clashes between instances", function () {3628 var d1 = document.createElement("div"),3629 d2 = document.createElement("div");3630 document.body.appendChild(d1);3631 document.body.appendChild(d2);3632 _jsPlumb.addEndpoint(d1);3633 _jsPlumb.addEndpoint(d2);3634 var id1 = d1.getAttribute("id"),3635 id2 = d2.getAttribute("id");3636 var idx = id1.indexOf("_"), idx2 = id1.lastIndexOf("_"), v1 = id1.substring(idx, idx2);3637 var idx3 = id2.indexOf("_"), idx4 = id2.lastIndexOf("_"), v2 = id2.substring(idx3, idx4);3638 ok(v1 == v2, "instance versions are the same : " + v1 + " : " + v2);3639 });3640 test(" importDefaults", function () {3641 _jsPlumb.Defaults.Anchors = ["LeftMiddle", "RightMiddle"];3642 var d1 = support.addDiv("d1"),3643 d2 = support.addDiv(d2),3644 c = _jsPlumb.connect({source: d1, target: d2}),3645 e = c.endpoints[0];3646 equal(e.anchor.x, 0, "left middle anchor");3647 equal(e.anchor.y, 0.5, "left middle anchor");3648 _jsPlumb.importDefaults({3649 Anchors: ["TopLeft", "TopRight"]3650 });3651 var conn = _jsPlumb.connect({source: d1, target: d2}),3652 e1 = conn.endpoints[0], e2 = conn.endpoints[1];3653 equal(e1.anchor.x, 0, "top leftanchor");3654 equal(e2.anchor.y, 0, "top left anchor");3655 equal(e2.anchor.x, 1, "top right anchor");3656 equal(e2.anchor.y, 0, "top right anchor");3657 });3658 test(" restoreDefaults", function () {3659 _jsPlumb.importDefaults({3660 Anchors: ["TopLeft", "TopRight"]3661 });3662 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2"), conn = _jsPlumb.connect({source: d1, target: d2}),3663 e1 = conn.endpoints[0], e2 = conn.endpoints[1];3664 equal(e1.anchor.x, 0, "top leftanchor");3665 equal(e2.anchor.y, 0, "top left anchor");3666 equal(e2.anchor.x, 1, "top right anchor");3667 equal(e2.anchor.y, 0, "top right anchor");3668 _jsPlumb.restoreDefaults();3669 var conn2 = _jsPlumb.connect({source: d1, target: d2}),3670 e3 = conn2.endpoints[0], e4 = conn2.endpoints[1];3671 equal(e3.anchor.x, 0.5, "bottom center anchor");3672 equal(e3.anchor.y, 1, "bottom center anchor");3673 equal(e4.anchor.x, 0.5, "bottom center anchor");3674 equal(e4.anchor.y, 1, "bottom center anchor");3675 });3676 test("defaults are isolated", function() {3677 ok(jsPlumb.Defaults.Anchors[0] == null, "no anchors set (to take one example, one's enough)");3678 var j = jsPlumb.getInstance({3679 Anchors:["Left", "Right"]3680 });3681 ok(jsPlumb.Defaults.Anchors[0] == null, "still no anchors set after providing Anchors to an instance");3682 });3683// setId function3684 test(" setId, taking two strings, only default scope", function () {3685 support.addDiv("d1");3686 support.addDiv("d2");3687 _jsPlumb.Defaults.MaxConnections = -1;3688 var e1 = _jsPlumb.addEndpoint("d1"),3689 e2 = _jsPlumb.addEndpoint("d2"),3690 e3 = _jsPlumb.addEndpoint("d1");3691 support.assertEndpointCount("d1", 2, _jsPlumb);3692 equal(e1.elementId, "d1", "endpoint has correct element id");3693 equal(e3.elementId, "d1", "endpoint has correct element id");3694 equal(e1.anchor.elementId, "d1", "anchor has correct element id");3695 equal(e3.anchor.elementId, "d1", "anchor has correct element id");3696 var c = _jsPlumb.connect({source: e1, target: e2}),3697 c2 = _jsPlumb.connect({source: e2, target: e1});3698 _jsPlumb.setId("d1", "d3");3699 support.assertEndpointCount("d3", 2, _jsPlumb);3700 support.assertEndpointCount("d1", 0, _jsPlumb);3701 equal(e1.elementId, "d3", "endpoint has correct element id");3702 equal(e3.elementId, "d3", "endpoint has correct element id");3703 equal(e1.anchor.elementId, "d3", "anchor has correct element id");3704 equal(e3.anchor.elementId, "d3", "anchor has correct element id");3705 equal(c.sourceId, "d3", "connection's sourceId has changed");3706 equal(c.source.getAttribute("id"), "d3", "connection's source has changed");3707 equal(c2.targetId, "d3", "connection's targetId has changed");3708 equal(c2.target.getAttribute("id"), "d3", "connection's target has changed");3709 });3710 test(" setId, taking a selector and a string, only default scope", function () {3711 support.addDiv("d1");3712 support.addDiv("d2");3713 _jsPlumb.Defaults.MaxConnections = -1;3714 var e1 = _jsPlumb.addEndpoint("d1"),3715 e2 = _jsPlumb.addEndpoint("d2"),3716 e3 = _jsPlumb.addEndpoint("d1");3717 support.assertEndpointCount("d1", 2, _jsPlumb);3718 equal(e1.elementId, "d1", "endpoint has correct element id");3719 equal(e3.elementId, "d1", "endpoint has correct element id");3720 equal(e1.anchor.elementId, "d1", "anchor has correct element id");3721 equal(e3.anchor.elementId, "d1", "anchor has correct element id");3722 var c = _jsPlumb.connect({source: e1, target: e2}),3723 c2 = _jsPlumb.connect({source: e2, target: e1});3724 ok(_jsPlumb.getManagedElements()["d1"] != null, "d1 exists in managed elements");3725 ok(_jsPlumb.getManagedElements()["d3"] == null, "d3 does not exist in managed elements");3726 _jsPlumb.setId(jsPlumb.getSelector("#d1"), "d3");3727 support.assertEndpointCount("d3", 2, _jsPlumb);3728 support.assertEndpointCount("d1", 0, _jsPlumb);3729 equal(e1.elementId, "d3", "endpoint has correct element id");3730 equal(e3.elementId, "d3", "endpoint has correct element id");3731 equal(e1.anchor.elementId, "d3", "anchor has correct element id");3732 equal(e3.anchor.elementId, "d3", "anchor has correct element id");3733 equal(c.sourceId, "d3", "connection's sourceId has changed");3734 equal(c.source.getAttribute("id"), "d3", "connection's source has changed");3735 equal(c2.targetId, "d3", "connection's targetId has changed");3736 equal(c2.target.getAttribute("id"), "d3", "connection's target has changed");3737 ok(_jsPlumb.getManagedElements()["d1"] == null, "d1 removed from managed elements");3738 ok(_jsPlumb.getManagedElements()["d3"] != null, "d3 exists in managed elements");3739 });3740 test(" setId, taking a DOM element and a string, only default scope", function () {3741 support.addDiv("d1");3742 support.addDiv("d2");3743 _jsPlumb.Defaults.MaxConnections = -1;3744 var e1 = _jsPlumb.addEndpoint("d1"),3745 e2 = _jsPlumb.addEndpoint("d2"),3746 e3 = _jsPlumb.addEndpoint("d1");3747 support.assertEndpointCount("d1", 2, _jsPlumb);3748 equal(e1.elementId, "d1", "endpoint has correct element id");3749 equal(e3.elementId, "d1", "endpoint has correct element id");3750 equal(e1.anchor.elementId, "d1", "anchor has correct element id");3751 equal(e3.anchor.elementId, "d1", "anchor has correct element id");3752 var c = _jsPlumb.connect({source: e1, target: e2}),3753 c2 = _jsPlumb.connect({source: e2, target: e1});3754 _jsPlumb.setId(document.getElementById("d1"), "d3");3755 support.assertEndpointCount("d3", 2, _jsPlumb);3756 support.assertEndpointCount("d1", 0, _jsPlumb);3757 equal(e1.elementId, "d3", "endpoint has correct element id");3758 equal(e3.elementId, "d3", "endpoint has correct element id");3759 equal(e1.anchor.elementId, "d3", "anchor has correct element id");3760 equal(e3.anchor.elementId, "d3", "anchor has correct element id");3761 equal(c.sourceId, "d3", "connection's sourceId has changed");3762 equal(c.source.getAttribute("id"), "d3", "connection's source has changed");3763 equal(c2.targetId, "d3", "connection's targetId has changed");3764 equal(c2.target.getAttribute("id"), "d3", "connection's target has changed");3765 });3766 test(" setId, taking two strings, mix of scopes", function () {3767 support.addDiv("d1");3768 support.addDiv("d2");3769 _jsPlumb.Defaults.MaxConnections = -1;3770 var e1 = _jsPlumb.addEndpoint("d1"),3771 e2 = _jsPlumb.addEndpoint("d2"),3772 e3 = _jsPlumb.addEndpoint("d1");3773 support.assertEndpointCount("d1", 2, _jsPlumb);3774 equal(e1.elementId, "d1", "endpoint has correct element id");3775 equal(e3.elementId, "d1", "endpoint has correct element id");3776 equal(e1.anchor.elementId, "d1", "anchor has correct element id");3777 equal(e3.anchor.elementId, "d1", "anchor has correct element id");3778 var c = _jsPlumb.connect({source: e1, target: e2, scope: "FOO"}),3779 c2 = _jsPlumb.connect({source: e2, target: e1});3780 _jsPlumb.setId("d1", "d3");3781 support.assertEndpointCount("d3", 2, _jsPlumb);3782 support.assertEndpointCount("d1", 0, _jsPlumb);3783 equal(e1.elementId, "d3", "endpoint has correct element id");3784 equal(e3.elementId, "d3", "endpoint has correct element id");3785 equal(e1.anchor.elementId, "d3", "anchor has correct element id");3786 equal(e3.anchor.elementId, "d3", "anchor has correct element id");3787 equal(c.sourceId, "d3", "connection's sourceId has changed");3788 equal(c.source.getAttribute("id"), "d3", "connection's source has changed");3789 equal(c2.targetId, "d3", "connection's targetId has changed");3790 equal(c2.target.getAttribute("id"), "d3", "connection's target has changed");3791 });3792 test(" setId, taking a selector and a string, mix of scopes", function () {3793 support.addDiv("d1");3794 support.addDiv("d2");3795 _jsPlumb.Defaults.MaxConnections = -1;3796 var e1 = _jsPlumb.addEndpoint("d1"),3797 e2 = _jsPlumb.addEndpoint("d2"),3798 e3 = _jsPlumb.addEndpoint("d1");3799 support.assertEndpointCount("d1", 2, _jsPlumb);3800 equal(e1.elementId, "d1", "endpoint has correct element id");3801 equal(e3.elementId, "d1", "endpoint has correct element id");3802 equal(e1.anchor.elementId, "d1", "anchor has correct element id");3803 equal(e3.anchor.elementId, "d1", "anchor has correct element id");3804 var c = _jsPlumb.connect({source: e1, target: e2, scope: "FOO"}),3805 c2 = _jsPlumb.connect({source: e2, target: e1});3806 _jsPlumb.setId(jsPlumb.getSelector("#d1"), "d3");3807 support.assertEndpointCount("d3", 2, _jsPlumb);3808 support.assertEndpointCount("d1", 0, _jsPlumb);3809 equal(e1.elementId, "d3", "endpoint has correct element id");3810 equal(e3.elementId, "d3", "endpoint has correct element id");3811 equal(e1.anchor.elementId, "d3", "anchor has correct element id");3812 equal(e3.anchor.elementId, "d3", "anchor has correct element id");3813 equal(c.sourceId, "d3", "connection's sourceId has changed");3814 equal(c.source.getAttribute("id"), "d3", "connection's source has changed");3815 equal(c2.targetId, "d3", "connection's targetId has changed");3816 equal(c2.target.getAttribute("id"), "d3", "connection's target has changed");3817 });3818 test(" setId, taking a DOM element and a string, mix of scopes", function () {3819 support.addDiv("d1");3820 support.addDiv("d2");3821 _jsPlumb.Defaults.MaxConnections = -1;3822 var e1 = _jsPlumb.addEndpoint("d1"),3823 e2 = _jsPlumb.addEndpoint("d2"),3824 e3 = _jsPlumb.addEndpoint("d1");3825 support.assertEndpointCount("d1", 2, _jsPlumb);3826 equal(e1.elementId, "d1", "endpoint has correct element id");3827 equal(e3.elementId, "d1", "endpoint has correct element id");3828 equal(e1.anchor.elementId, "d1", "anchor has correct element id");3829 equal(e3.anchor.elementId, "d1", "anchor has correct element id");3830 var c = _jsPlumb.connect({source: e1, target: e2, scope: "FOO"}),3831 c2 = _jsPlumb.connect({source: e2, target: e1});3832 _jsPlumb.setId(jsPlumb.getSelector("#d1")[0], "d3");3833 support.assertEndpointCount("d3", 2, _jsPlumb);3834 support.assertEndpointCount("d1", 0, _jsPlumb);3835 equal(e1.elementId, "d3", "endpoint has correct element id");3836 equal(e3.elementId, "d3", "endpoint has correct element id");3837 equal(e1.anchor.elementId, "d3", "anchor has correct element id");3838 equal(e3.anchor.elementId, "d3", "anchor has correct element id");3839 equal(c.sourceId, "d3", "connection's sourceId has changed");3840 equal(c.source.getAttribute("id"), "d3", "connection's source has changed");3841 equal(c2.targetId, "d3", "connection's targetId has changed");3842 equal(c2.target.getAttribute("id"), "d3", "connection's target has changed");3843 });3844 test(" setIdChanged, ", function () {3845 support.addDiv("d1");3846 support.addDiv("d2");3847 _jsPlumb.Defaults.MaxConnections = -1;3848 var e1 = _jsPlumb.addEndpoint("d1"),3849 e2 = _jsPlumb.addEndpoint("d2"),3850 e3 = _jsPlumb.addEndpoint("d1");3851 support.assertEndpointCount("d1", 2, _jsPlumb);3852 equal(e1.elementId, "d1", "endpoint has correct element id");3853 equal(e3.elementId, "d1", "endpoint has correct element id");3854 equal(e1.anchor.elementId, "d1", "anchor has correct element id");3855 equal(e3.anchor.elementId, "d1", "anchor has correct element id");3856 var c = _jsPlumb.connect({source: e1, target: e2}),3857 c2 = _jsPlumb.connect({source: e2, target: e1});3858 document.getElementById("d1").setAttribute("id", "d3");3859 _jsPlumb.setIdChanged("d1", "d3");3860 support.assertEndpointCount("d3", 2, _jsPlumb);3861 support.assertEndpointCount("d1", 0, _jsPlumb);3862 equal(e1.elementId, "d3", "endpoint has correct element id");3863 equal(e3.elementId, "d3", "endpoint has correct element id");3864 equal(e1.anchor.elementId, "d3", "anchor has correct element id");3865 equal(e3.anchor.elementId, "d3", "anchor has correct element id");3866 equal(c.sourceId, "d3", "connection's sourceId has changed");3867 equal(c.source.getAttribute("id"), "d3", "connection's source has changed");3868 equal(c2.targetId, "d3", "connection's targetId has changed");3869 equal(c2.target.getAttribute("id"), "d3", "connection's target has changed");3870 });3871 test(" setId, taking two strings, testing makeSource/makeTarget", function () {3872 var d1 = support.addDiv("d1");3873 var d2 = support.addDiv("d2");3874 // setup d1 as a source3875 _jsPlumb.makeSource("d1", {3876 endpoint:"Rectangle",3877 parameters:{3878 foo:"foo"3879 }3880 });3881 // and d2 as a target3882 _jsPlumb.makeTarget("d2", {3883 endpoint:"Rectangle"3884 });3885 // connect them, and check that the endpoints are of tyoe Rectangle, per the makeSource/makeTarget3886 // directives3887 var c = _jsPlumb.connect({source: "d1", target: "d2"});3888 equal(c.endpoints[0].type, "Rectangle", "source endpoint is rectangle");3889 equal(c.endpoints[1].type, "Rectangle", "target endpoint is rectangle");3890 // now change the id of d1 and connect the new id, and check again that the source endpoint is Rectangle3891 _jsPlumb.setId(d1, "foo");3892 _jsPlumb.setId(d2, "bar");3893 var c2 = _jsPlumb.connect({source: "foo", target: "bar"});3894 equal(c2.endpoints[0].type, "Rectangle", "source endpoint is rectangle");3895 equal(c2.endpoints[1].type, "Rectangle", "target endpoint is rectangle");3896 });3897 test(" setId, taking two strings, testing makeSource/makeTarget with the mouse", function () {3898 var d1 = support.addDiv("d1");3899 var d2 = support.addDiv("d2");3900 // setup d1 as a source3901 _jsPlumb.makeSource("d1", {3902 endpoint:"Rectangle",3903 parameters:{3904 foo:"foo"3905 }3906 });3907 // and d2 as a target3908 _jsPlumb.makeTarget("d2", {3909 endpoint:"Rectangle"3910 });3911 support.dragConnection(d1, d2);3912 equal(1, _jsPlumb.select().length, "1 connection in instance.");3913 // now change the id of d1 and connect the new id, and check again that the source endpoint is Rectangle3914 _jsPlumb.setId("d1", "foo");3915 support.dragConnection(d1, d2);3916 equal(2, _jsPlumb.select().length, "2 connections in instance.");3917 _jsPlumb.setId("d2", "bar");3918 support.dragConnection(d1, d2);3919 equal(3, _jsPlumb.select().length, "3 connections in instance.");3920 });3921 test(" setId, taking an element and a string, testing makeSource/makeTarget with the mouse", function () {3922 var d1 = support.addDiv("d1");3923 var d2 = support.addDiv("d2");3924 // setup d1 as a source3925 _jsPlumb.makeSource("d1", {3926 endpoint:"Rectangle",3927 parameters:{3928 foo:"foo"3929 }3930 });3931 // and d2 as a target3932 _jsPlumb.makeTarget("d2", {3933 endpoint:"Rectangle"3934 });3935 support.dragConnection(d1, d2);3936 equal(1, _jsPlumb.select().length, "1 connection in instance.");3937 // now change the id of d1 and connect the new id, and check again that the source endpoint is Rectangle3938 _jsPlumb.setId(d1, "foo");3939 support.dragConnection(d1, d2);3940 equal(2, _jsPlumb.select().length, "2 connections in instance.");3941 _jsPlumb.setId(d2, "bar");3942 support.dragConnection(d1, d2);3943 equal(3, _jsPlumb.select().length, "3 connections in instance.");3944 });3945 test(" setIdChanged testing makeSource/makeTarget with the mouse", function () {3946 var d1 = support.addDiv("d1");3947 var d2 = support.addDiv("d2");3948 // setup d1 as a source3949 _jsPlumb.makeSource("d1", {3950 endpoint:"Rectangle",3951 parameters:{3952 foo:"foo"3953 }3954 });3955 // and d2 as a target3956 _jsPlumb.makeTarget("d2", {3957 endpoint:"Rectangle"3958 });3959 support.dragConnection(d1, d2);3960 equal(1, _jsPlumb.select().length, "1 connection in instance.");3961 // now change the id of d1 and connect the new id, and check again that the source endpoint is Rectangle3962 d1.setAttribute("id", "foo");3963 _jsPlumb.setIdChanged("d1", "foo");3964 support.dragConnection(d1, d2);3965 equal(2, _jsPlumb.select().length, "2 connections in instance.");3966 d2.setAttribute("id", "bar");3967 _jsPlumb.setIdChanged("d2", "bar");3968 support.dragConnection(d1, d2);3969 equal(3, _jsPlumb.select().length, "3 connections in instance.");3970 });3971 test(" endpoint hide/show should hide/show overlays", function () {3972 support.addDiv("d1");3973 var e1 = _jsPlumb.addEndpoint("d1", {3974 overlays: [3975 [ "Label", { id: "label", label: "foo" } ]3976 ]3977 }),3978 o = e1.getOverlay("label");3979 ok(o.isVisible(), "overlay is initially visible");3980 _jsPlumb.hide("d1", true);3981 ok(!o.isVisible(), "overlay is no longer visible");3982 });3983 test(" connection hide/show should hide/show overlays", function () {3984 support.addDiv("d1");3985 support.addDiv("d2");3986 var c = _jsPlumb.connect({source: "d1", target: "d2",3987 overlays: [3988 [ "Label", { id: "label", label: "foo" } ]3989 ]3990 }),3991 o = c.getOverlay("label");3992 ok(o.isVisible(), "overlay is initially visible");3993 _jsPlumb.hide("d1", true);3994 ok(!o.isVisible(), "overlay is no longer visible");3995 });3996 test(" select, basic test", function () {3997 support.addDiv("d1");3998 support.addDiv("d2");3999 var c = _jsPlumb.connect({source: "d1", target: "d2"}),4000 s = _jsPlumb.select({source: "d1"});4001 equal(s.length, 1, "one connection selected");4002 equal(s.get(0).sourceId, "d1", "d1 is connection source");4003 s.setHover(true);4004 ok(s.get(0).isHover(), "connection has had hover set to true");4005 s.setHover(false);4006 ok(!(s.get(0).isHover()), "connection has had hover set to false");4007 });4008 test(" select, basic test with multiple scopes; dont filter on scope.", function () {4009 support.addDiv("d1");4010 support.addDiv("d2");4011 var c = _jsPlumb.connect({source: "d1", target: "d2", scope: "FOO"}),4012 c2 = _jsPlumb.connect({source: "d1", target: "d2", scope: "BAR"}),4013 s = _jsPlumb.select({source: "d1"});4014 equal(s.length, 2, "two connections selected");4015 equal(s.get(0).sourceId, "d1", "d1 is connection source");4016 s.setHover(true);4017 ok(s.get(0).isHover(), "connection has had hover set to true");4018 s.setHover(false);4019 ok(!(s.get(0).isHover()), "connection has had hover set to false");4020 });4021 test(" select, basic test with multiple scopes; filter on scope", function () {4022 support.addDiv("d1");4023 support.addDiv("d2");4024 var c = _jsPlumb.connect({source: "d1", target: "d2", scope: "FOO"}),4025 c2 = _jsPlumb.connect({source: "d1", target: "d2", scope: "BAR"}),4026 s = _jsPlumb.select({source: "d1", scope: "FOO"});4027 equal(s.length, 1, "one connection selected");4028 equal(s.get(0).sourceId, "d1", "d1 is connection source");4029 s.setHover(true);4030 ok(s.get(0).isHover(), "connection has had hover set to true");4031 s.setHover(false);4032 ok(!(s.get(0).isHover()), "connection has had hover set to false");4033 });4034 test(" select, basic test with multiple scopes; filter on scopes", function () {4035 support.addDiv("d1");4036 support.addDiv("d2");4037 var c = _jsPlumb.connect({source: "d1", target: "d2", scope: "FOO"}),4038 c2 = _jsPlumb.connect({source: "d1", target: "d2", scope: "BAR"}),4039 c3 = _jsPlumb.connect({source: "d1", target: "d2", scope: "BAZ"})4040 s = _jsPlumb.select({source: "d1", scope: ["FOO", "BAR"]});4041 equal(s.length, 2, "two connections selected");4042 equal(s.get(0).sourceId, "d1", "d1 is connection source");4043 s.setHover(true);4044 ok(s.get(0).isHover(), "connection has had hover set to true");4045 s.setHover(false);4046 ok(!(s.get(0).isHover()), "connection has had hover set to false");4047 });4048 test(" select, basic test with multiple scopes; scope but no scope filter; single source id", function () {4049 support.addDiv("d1");4050 support.addDiv("d2");4051 var c = _jsPlumb.connect({source: "d1", target: "d2", scope: "FOO"}),4052 c2 = _jsPlumb.connect({source: "d1", target: "d2", scope: "BAR"}),4053 c3 = _jsPlumb.connect({source: "d1", target: "d2", scope: "BAZ"}),4054 c4 = _jsPlumb.connect({source: "d2", target: "d1", scope: "BOZ"}),4055 s = _jsPlumb.select({source: "d1"});4056 equal(s.length, 3, "three connections selected");4057 equal(s.get(0).sourceId, "d1", "d1 is connection source");4058 s.setHover(true);4059 ok(s.get(0).isHover(), "connection has had hover set to true");4060 s.setHover(false);4061 ok(!(s.get(0).isHover()), "connection has had hover set to false");4062 });4063 test(" select, basic test with multiple scopes; filter on scopes; single source id", function () {4064 support.addDiv("d1");4065 support.addDiv("d2");4066 var c = _jsPlumb.connect({source: "d1", target: "d2", scope: "FOO"}),4067 c2 = _jsPlumb.connect({source: "d1", target: "d2", scope: "BAR"}),4068 c3 = _jsPlumb.connect({source: "d1", target: "d2", scope: "BAZ"}),4069 c4 = _jsPlumb.connect({source: "d2", target: "d1", scope: "BOZ"}),4070 s = _jsPlumb.select({source: "d1", scope: ["FOO", "BAR", "BOZ"]});4071 equal(s.length, 2, "two connections selected");4072 equal(s.get(0).sourceId, "d1", "d1 is connection source");4073 s.setHover(true);4074 ok(s.get(0).isHover(), "connection has had hover set to true");4075 s.setHover(false);4076 ok(!(s.get(0).isHover()), "connection has had hover set to false");4077 });4078 test(" setHoverSuspended overrides setHover on connections", function () {4079 support.addDiv("d1");4080 support.addDiv("d2");4081 var c = _jsPlumb.connect({source: "d1", target: "d2", scope: "FOO"}),4082 c2 = _jsPlumb.connect({source: "d1", target: "d2", scope: "BAR"}),4083 c3 = _jsPlumb.connect({source: "d1", target: "d2", scope: "BAZ"}),4084 c4 = _jsPlumb.connect({source: "d2", target: "d1", scope: "BOZ"}),4085 s = _jsPlumb.select({source: "d1", scope: ["FOO", "BAR", "BOZ"]});4086 _jsPlumb.setHoverSuspended(true);4087 s.setHover(true);4088 ok(s.get(0).isHover() == false, "connection did not set hover as jsplumb overrides it");4089 _jsPlumb.setHoverSuspended(false);4090 s.setHover(true);4091 ok(s.get(0).isHover(), "connection did set hover as jsplumb override removed");4092 });4093 test(" select, basic test with multiple scopes; filter on scope; dont supply sourceid", function () {4094 support.addDiv("d1");4095 support.addDiv("d2");4096 var c = _jsPlumb.connect({source: "d1", target: "d2", scope: "FOO"}),4097 c2 = _jsPlumb.connect({source: "d1", target: "d2", scope: "BAR"}),4098 s = _jsPlumb.select({ scope: "FOO" });4099 equal(s.length, 1, "two connections selected");4100 equal(s.get(0).sourceId, "d1", "d1 is connection source");4101 s.setHover(true);4102 ok(s.get(0).isHover(), "connection has had hover set to true");4103 s.setHover(false);4104 ok(!(s.get(0).isHover()), "connection has had hover set to false");4105 });4106 test(" select, basic test with multiple scopes; filter on scope; dont supply sourceid", function () {4107 support.addDiv("d1");4108 support.addDiv("d2");4109 var c = _jsPlumb.connect({source: "d1", target: "d2", scope: "FOO"}),4110 c2 = _jsPlumb.connect({source: "d2", target: "d1", scope: "BAR"}),4111 s = _jsPlumb.select({ scope: "FOO" });4112 equal(s.length, 1, "two connections selected");4113 equal(s.get(0).sourceId, "d1", "d1 is connection source");4114 s.setHover(true);4115 ok(s.get(0).isHover(), "connection has had hover set to true");4116 s.setHover(false);4117 ok(!(s.get(0).isHover()), "connection has had hover set to false");4118 });4119 test(" select, two connections, with overlays", function () {4120 support.addDiv("d1");4121 support.addDiv("d2");4122 var c = _jsPlumb.connect({4123 source: "d1",4124 target: "d2",4125 overlays: [4126 ["Label", {id: "l"}]4127 ]4128 }),4129 c2 = _jsPlumb.connect({4130 source: "d1",4131 target: "d2",4132 overlays: [4133 ["Label", {id: "l"}]4134 ]4135 }),4136 s = _jsPlumb.select({source: "d1"});4137 equal(s.length, 2, "two connections selected");4138 ok(s.get(0).getOverlay("l") != null, "connection has overlay");4139 ok(s.get(1).getOverlay("l") != null, "connection has overlay");4140 });4141 test(" select, chaining with setHover and hideOverlay", function () {4142 support.addDiv("d1");4143 support.addDiv("d2");4144 var c = _jsPlumb.connect({4145 source: "d1",4146 target: "d2",4147 overlays: [4148 ["Label", {id: "l"}]4149 ]4150 });4151 s = _jsPlumb.select({source: "d1"});4152 s.setHover(false).hideOverlay("l");4153 ok(!(s.get(0).isHover()), "connection is not hover");4154 ok(!(s.get(0).getOverlay("l").isVisible()), "overlay is not visible");4155 });4156 test(" select, .each function", function () {4157 for (var i = 1; i < 6; i++) {4158 support.addDiv("d" + i);4159 support.addDiv("d" + (i * 10));4160 _jsPlumb.connect({4161 source: "d" + i,4162 target: "d" + (i * 10)4163 });4164 }4165 var s = _jsPlumb.select();4166 equal(s.length, 5, "there are five connections");4167 var t = "";4168 s.each(function (connection) {4169 t += "f";4170 });4171 equal("fffff", t, ".each is working");4172 });4173 test(" select, multiple connections + chaining", function () {4174 for (var i = 1; i < 6; i++) {4175 support.addDiv("d" + i);4176 support.addDiv("d" + (i * 10));4177 _jsPlumb.connect({4178 source: "d" + i,4179 target: "d" + (i * 10),4180 overlays: [4181 ["Arrow", {location: 0.3}],4182 ["Arrow", {location: 0.7}]4183 ]4184 });4185 }4186 var s = _jsPlumb.select().removeAllOverlays().setParameter("foo", "bar").setHover(false).setLabel("baz");4187 equal(s.length, 5, "there are five connections");4188 for (var j = 0; j < 5; j++) {4189 equal(support.length(s.get(j).getOverlays()), 1, "one overlay: the label");4190 equal(s.get(j).getParameter("foo"), "bar", "parameter foo has value 'bar'");4191 ok(!(s.get(j).isHover()), "hover is set to false");4192 equal(s.get(j).getLabel(), "baz", "label is set to 'baz'");4193 }4194 });4195 test(" select, simple getter", function () {4196 for (var i = 1; i < 6; i++) {4197 support.addDiv("d" + i);4198 support.addDiv("d" + (i * 10));4199 _jsPlumb.connect({4200 source: "d" + i,4201 target: "d" + (i * 10),4202 label: "FOO"4203 });4204 }4205 var lbls = _jsPlumb.select().getLabel();4206 equal(lbls.length, 5, "there are five labels");4207 for (var j = 0; j < 5; j++) {4208 equal(lbls[j][0], "FOO", "label has value 'FOO'");4209 }4210 });4211 test(" select, getter + chaining", function () {4212 for (var i = 1; i < 6; i++) {4213 support.addDiv("d" + i);4214 support.addDiv("d" + (i * 10));4215 _jsPlumb.connect({4216 source: "d" + i,4217 target: "d" + (i * 10),4218 label: "FOO"4219 });4220 }4221 var params = _jsPlumb.select().removeAllOverlays().setParameter("foo", "bar").getParameter("foo");4222 equal(params.length, 5, "there are five params");4223 for (var j = 0; j < 5; j++) {4224 equal(params[j][0], "bar", "parameter has value 'bar'");4225 }4226 });4227 test(" select, detach method", function () {4228 for (var i = 1; i < 6; i++) {4229 support.addDiv("d" + i);4230 support.addDiv("d" + (i * 10));4231 _jsPlumb.connect({4232 source: "d" + i,4233 target: "d" + (i * 10),4234 label: "FOO"4235 });4236 }4237 var params = _jsPlumb.select().delete();4238 equal(_jsPlumb.select().length, 0, "there are no connections");4239 });4240 test(" select, repaint method", function () {4241 for (var i = 1; i < 6; i++) {4242 support.addDiv("d" + i);4243 support.addDiv("d" + (i * 10));4244 _jsPlumb.connect({4245 source: "d" + i,4246 target: "d" + (i * 10),4247 label: "FOO"4248 });4249 }4250 var len = _jsPlumb.select().repaint().length;4251 equal(len, 5, "there are five connections");4252 });4253 // selectEndpoints4254 test(" selectEndpoints, basic tests", function () {4255 var d1 = support.addDiv("d1"), _d2 = support.addDiv("d2"),4256 e1 = _jsPlumb.addEndpoint(d1),4257 e2 = _jsPlumb.addEndpoint(d1);4258 equal(_jsPlumb.selectEndpoints().length, 2, "there are two endpoints");4259 equal(_jsPlumb.selectEndpoints({element: "d1"}).length, 2, "there are two endpoints on d1");4260 equal(_jsPlumb.selectEndpoints({element: "d2"}).length, 0, "there are 0 endpoints on d2");4261 equal(_jsPlumb.selectEndpoints({source: "d1"}).length, 0, "there are zero source endpoints on d1");4262 equal(_jsPlumb.selectEndpoints({target: "d1"}).length, 0, "there are zero target endpoints on d1");4263 equal(_jsPlumb.selectEndpoints({source: "d2"}).length, 0, "there are zero source endpoints on d2");4264 equal(_jsPlumb.selectEndpoints({target: "d2"}).length, 0, "there are zero target endpoints on d2");4265 equal(_jsPlumb.selectEndpoints({source: "d1", scope: "FOO"}).length, 0, "there are zero source endpoints on d1 with scope FOO");4266 _jsPlumb.addEndpoint("d2", { scope: "FOO", isSource: true });4267 equal(_jsPlumb.selectEndpoints({source: "d2", scope: "FOO"}).length, 1, "there is one source endpoint on d2 with scope FOO");4268 equal(_jsPlumb.selectEndpoints({element: ["d2", "d1"]}).length, 3, "there are three endpoints between d2 and d1");4269 });4270 test(" selectEndpoints, basic tests, various input argument formats", function () {4271 var d1 = support.addDiv("d1"), _d2 = support.addDiv("d2"),4272 e1 = _jsPlumb.addEndpoint(d1),4273 e2 = _jsPlumb.addEndpoint(d1);4274 equal(_jsPlumb.selectEndpoints({element: "d1"}).length, 2, "using id, there are two endpoints on d1");4275 equal(_jsPlumb.selectEndpoints({element: d1}).length, 2, "using dom element, there are two endpoints on d1");4276 equal(_jsPlumb.selectEndpoints({element: jsPlumb.getSelector("#d1")}).length, 2, "using selector, there are two endpoints on d1");4277 equal(_jsPlumb.selectEndpoints({element: jsPlumb.getSelector(d1)}).length, 2, "using selector with dom element, there are two endpoints on d1");4278 });4279 test(" selectEndpoints, basic tests, scope", function () {4280 var d1 = support.addDiv("d1"), _d2 = support.addDiv("d2"),4281 e1 = _jsPlumb.addEndpoint(d1, {scope: "FOO"}),4282 e2 = _jsPlumb.addEndpoint(d1);4283 equal(_jsPlumb.selectEndpoints({element: "d1"}).length, 2, "using id, there are two endpoints on d1");4284 equal(_jsPlumb.selectEndpoints({element: "d1", scope: "FOO"}).length, 1, "using id, there is one endpoint on d1 with scope 'FOO'");4285 _jsPlumb.addEndpoint(d1, {scope: "BAR"}),4286 equal(_jsPlumb.selectEndpoints({element: "d1", scope: "FOO"}).length, 1, "using id, there is one endpoint on d1 with scope 'BAR'");4287 equal(_jsPlumb.selectEndpoints({element: "d1", scope: ["BAR", "FOO"]}).length, 2, "using id, there are two endpoints on d1 with scope 'BAR' or 'FOO'");4288 });4289 test(" selectEndpoints, isSource tests", function () {4290 var d1 = support.addDiv("d1"), _d2 = support.addDiv("d2"),4291 e1 = _jsPlumb.addEndpoint(d1, {isSource: true}),4292 e2 = _jsPlumb.addEndpoint(d1),4293 e3 = _jsPlumb.addEndpoint(d2, {isSource: true});4294 equal(_jsPlumb.selectEndpoints({source: "d1"}).length, 1, "there is one source endpoint on d1");4295 equal(_jsPlumb.selectEndpoints({target: "d1"}).length, 0, "there are zero target endpoints on d1");4296 equal(_jsPlumb.selectEndpoints({source: "d2"}).length, 1, "there is one source endpoint on d2");4297 equal(_jsPlumb.selectEndpoints({source: ["d2", "d1"]}).length, 2, "there are two source endpoints between d1 and d2");4298 });4299 test(" selectEndpoints, isTarget tests", function () {4300 var d1 = support.addDiv("d1"), _d2 = support.addDiv("d2"),4301 e1 = _jsPlumb.addEndpoint(d1, {isTarget: true}),4302 e2 = _jsPlumb.addEndpoint(d1),4303 e3 = _jsPlumb.addEndpoint(d2, {isTarget: true});4304 equal(_jsPlumb.selectEndpoints({target: "d1"}).length, 1, "there is one target endpoint on d1");4305 equal(_jsPlumb.selectEndpoints({source: "d1"}).length, 0, "there are zero source endpoints on d1");4306 equal(_jsPlumb.selectEndpoints({target: "d2"}).length, 1, "there is one target endpoint on d2");4307 equal(_jsPlumb.selectEndpoints({target: ["d2", "d1"]}).length, 2, "there are two target endpoints between d1 and d2");4308 });4309 test(" selectEndpoints, isSource + isTarget tests", function () {4310 var d1 = support.addDiv("d1"), _d2 = support.addDiv("d2"),4311 e1 = _jsPlumb.addEndpoint(d1, {isSource: true, isTarget: true}),4312 e2 = _jsPlumb.addEndpoint(d1),4313 e3 = _jsPlumb.addEndpoint(d1, {isSource: true}),4314 e4 = _jsPlumb.addEndpoint(d1, {isTarget: true});4315 equal(_jsPlumb.selectEndpoints({source: "d1"}).length, 2, "there are two source endpoints on d1");4316 equal(_jsPlumb.selectEndpoints({target: "d1"}).length, 2, "there are two target endpoints on d1");4317 equal(_jsPlumb.selectEndpoints({target: "d1", source: "d1"}).length, 1, "there is one source and target endpoint on d1");4318 equal(_jsPlumb.selectEndpoints({element: "d1"}).length, 4, "there are four endpoints on d1");4319 });4320 test(" selectEndpoints, delete endpoints", function () {4321 var d1 = support.addDiv("d1"), _d2 = support.addDiv("d2"),4322 e1 = _jsPlumb.addEndpoint(d1, {isSource: true, isTarget: true});4323 equal(_jsPlumb.selectEndpoints({element: "d1"}).length, 1, "there is one endpoint on d1");4324 _jsPlumb.selectEndpoints({source: "d1"}).delete();4325 equal(_jsPlumb.selectEndpoints({element: "d1"}).length, 0, "there are zero endpoints on d1");4326 });4327 test(" selectEndpoints, detach connections", function () {4328 var d1 = support.addDiv("d1"), _d2 = support.addDiv("d2"),4329 e1 = _jsPlumb.addEndpoint(d1, {isSource: true, isTarget: true}),4330 e2 = _jsPlumb.addEndpoint(d2, {isSource: true, isTarget: true});4331 _jsPlumb.connect({source: e1, target: e2});4332 equal(e1.connections.length, 1, "there is one connection on d1's endpoint");4333 equal(e2.connections.length, 1, "there is one connection on d2's endpoint");4334 _jsPlumb.selectEndpoints({source: "d1"}).deleteEveryConnection();4335 equal(e1.connections.length, 0, "there are zero connections on d1's endpoint");4336 equal(e2.connections.length, 0, "there are zero connections on d2's endpoint");4337 });4338 test(" selectEndpoints, hover tests", function () {4339 var d1 = support.addDiv("d1"), _d2 = support.addDiv("d2"),4340 e1 = _jsPlumb.addEndpoint(d1, {isSource: true, isTarget: true});4341 equal(e1.isHover(), false, "hover not set");4342 _jsPlumb.selectEndpoints({source: "d1"}).setHover(true);4343 equal(e1.isHover(), true, "hover set");4344 _jsPlumb.selectEndpoints({source: "d1"}).setHover(false);4345 equal(e1.isHover(), false, "hover no longer set");4346 });4347 test(" selectEndpoints, setEnabled tests", function () {4348 var d1 = support.addDiv("d1"), _d2 = support.addDiv("d2"),4349 e1 = _jsPlumb.addEndpoint(d1, {isSource: true, isTarget: true});4350 equal(e1.isEnabled(), true, "endpoint is enabled");4351 _jsPlumb.selectEndpoints({source: "d1"}).setEnabled(false);4352 equal(e1.isEnabled(), false, "endpoint not enabled");4353 });4354 test(" selectEndpoints, setEnabled tests", function () {4355 var d1 = support.addDiv("d1"), _d2 = support.addDiv("d2"),4356 e1 = _jsPlumb.addEndpoint(d1, {isSource: true, isTarget: true});4357 equal(e1.isEnabled(), true, "endpoint is enabled");4358 var e = _jsPlumb.selectEndpoints({source: "d1"}).isEnabled();4359 equal(e[0][0], true, "endpoint enabled");4360 _jsPlumb.selectEndpoints({source: "d1"}).setEnabled(false);4361 e = _jsPlumb.selectEndpoints({source: "d1"}).isEnabled();4362 equal(e[0][0], false, "endpoint not enabled");4363 });4364// setPaintStyle/getPaintStyle tests4365 test(" setPaintStyle", function () {4366 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2"), c = _jsPlumb.connect({source: d1, target: d2});4367 c.setPaintStyle({stroke: "FOO", strokeWidth: 999});4368 equal(c._jsPlumb.paintStyleInUse.stroke, "FOO", "stroke was set");4369 equal(c._jsPlumb.paintStyleInUse.strokeWidth, 999, "strokeWidth was set");4370 c.setHoverPaintStyle({stroke: "BAZ", strokeWidth: 444});4371 c.setHover(true);4372 equal(c._jsPlumb.paintStyleInUse.stroke, "BAZ", "stroke was set");4373 equal(c._jsPlumb.paintStyleInUse.strokeWidth, 444, "strokeWidth was set");4374 equal(c.getPaintStyle().stroke, "FOO", "getPaintStyle returns correct value");4375 equal(c.getHoverPaintStyle().stroke, "BAZ", "getHoverPaintStyle returns correct value");4376 });4377 //4378 //TODO figure out if we want this behaviour or not (components do not share paintStyle objects)4379 //4380 //test(" clone paint style", function() {4381 //var d1 = support.addDiv("d1"), d2 = support.addDiv("d2"), d3 = support.addDiv("d3"),4382 //c = _jsPlumb.connect({source:d1, target:d2, paintStyle:ps}),4383 //c2 = _jsPlumb.connect({source:d1, target:d3}),4384 //ps = {stroke:"FOO", strokeWidth:999};4385 //c2.setPaintStyle(ps);4386 //ps.foo = "bar";4387 //equal(null, c.getPaintStyle().foo, "foo is not set in c paint style");4388 //equal(null, c2.getPaintStyle().foo, "foo is not set in c2 paint style");4389 //});4390// ------------------------------- manage -----------------------------------------4391 test("Manage fires events", function() {4392 var d1 = support.addDiv("d1"), f1 = false;4393 _jsPlumb.bind("manageElement", function() {4394 f1 = true;4395 });4396 _jsPlumb.manage("d1", d1);4397 ok(f1, "manageElement event fired");4398 delete _jsPlumb.getManagedElements()["d1"];4399 f1 = false;4400 _jsPlumb.manage("d1", d1, true);4401 ok(!f1, "manageElement event not fired for transient element");4402 });4403 test("Manage adds jtk-managed class", function() {4404 var d1 = support.addDiv("d1"), f1 = false;4405 _jsPlumb.manage("d1", d1);4406 ok(_jsPlumb.hasClass(d1, "jtk-managed"), "d1 has jtk-managed class");4407 _jsPlumb.unmanage("d1");4408 ok(!_jsPlumb.hasClass(d1, "jtk-managed"), "d1 no longer has jtk-managed class");4409 });4410// ******************* getEndpoints ************************************************4411 test(" getEndpoints", function () {4412 support.addDiv("d1");4413 support.addDiv("d2");4414 _jsPlumb.addEndpoint("d1");4415 _jsPlumb.addEndpoint("d2");4416 _jsPlumb.addEndpoint("d1");4417 var e = _jsPlumb.getEndpoints("d1"),4418 e2 = _jsPlumb.getEndpoints("d2");4419 equal(e.length, 2, "two endpoints on d1");4420 equal(e2.length, 1, "one endpoint on d2");4421 });4422// elements4423 test("svg gradients cleaned up correctly", function() {4424 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");4425 var c = _jsPlumb.connect({source:d1, target:d2, paintStyle:{4426 gradient: {stops: [4427 [0, "#678678"],4428 [0.5, "#09098e"],4429 [1, "#678678"]4430 ]},4431 strokeWidth: 5,4432 stroke: "#678678",4433 dashstyle: "2 2"4434 }});4435 var defs = c.canvas.querySelectorAll("defs");4436 equal(defs.length, 1, "1 defs element");4437 _jsPlumb.draggable(d1);4438 support.dragANodeAround(d1);4439 defs = c.canvas.querySelectorAll("defs");4440 equal(defs.length, 1, "1 defs element");4441 });4442 test("node drag events", function() {4443 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");4444 var started = false, dragged = false, stopped = false;4445 _jsPlumb.draggable(d1, {4446 start:function() { started = true; },4447 drag:function() { dragged = true; },4448 stop:function() { stopped = true; }4449 });4450 support.dragANodeAround(d1, function() {4451 return _jsPlumb.isConnectionBeingDragged() && _jsPlumb.isHoverSuspended();4452 }, "isConnectionBeingDragged and isHoverSuspended return true while node is being dragged");4453 ok(started, "start event fired");4454 ok(dragged, "drag event fired");4455 ok(stopped, "stop event fired");4456 started = false; dragged = false; stopped = false;4457 var started2 = false, dragged2 = false, stopped2 = false;4458 _jsPlumb.draggable(d1, {4459 start:function() { started2 = true; },4460 drag:function() { dragged2 = true; },4461 stop:function() { stopped2 = true; },4462 force:true4463 });4464 support.dragANodeAround(d1);4465 ok(started, "start event fired");4466 ok(dragged, "drag event fired");4467 ok(stopped, "stop event fired");4468 ok(started2, "2nd start event fired");4469 ok(dragged2, "2nd drag event fired");4470 ok(stopped2, "2nd stop event fired");4471 });4472 test("node drag events, drag disabled", function() {4473 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");4474 var started = false, dragged = false, stopped = false;4475 _jsPlumb.draggable(d1, {4476 start:function() { started = true; },4477 drag:function() { dragged = true; },4478 stop:function() { stopped = true; },4479 canDrag:function() { return false; }4480 });4481 support.dragANodeAround(d1, function() {4482 return !_jsPlumb.isConnectionBeingDragged() && !_jsPlumb.isHoverSuspended();4483 }, "isConnectionBeingDragged returns false because node cannot be dragged");4484 ok(!started, "start event fired");4485 ok(!dragged, "drag event fired");4486 ok(!stopped, "stop event fired");4487 4488 });4489// ------------- utility functions - math stuff, mostly --------------------------4490 var tolerance = 0.00000005, withinTolerance = function (v1, v2, msg) {4491 if (Math.abs(v1 - v2) < tolerance) ok(true, msg + "; expected " + v1 + " and got it");4492 else {4493 ok(false, msg + "; expected " + v1 + " got " + v2);4494 }4495 };4496 var types = [4497 { v: { "foo": "bar" }, t: "Object" },4498 { v: null, t: "Null" },4499 { v: 123, t: "Number" },4500 { v: "foo", t: "String" },4501 { v: [1, 2, 3], t: "Array" },4502 { v: true, t: "Boolean" },4503 { v: new Date(), t: "Date" },4504 { v: function () {4505 }, t: "Function" }4506 ];4507 test("jsPlumbUtil typeof functions", function () {4508 for (var i = 0; i < types.length; i++) {4509 var v = types[i].v, f = jsPlumbUtil["is" + types[i].t];4510 // first, test that the object type is identified correctly4511 equal(f(v), true, types[i].t + " is recognised as " + types[i].t);4512 // now test that everything else is recognised as not being of this type4513 for (var j = 0; j < types.length; j++) {4514 if (i != j) {4515 var v2 = types[j].v;4516 equal(f(v2), false, types[j].t + " is not recognised as " + types[i].t);4517 }4518 }4519 }4520 });4521 test("jsPlumb.extend, filter values", function () {4522 var n = ["foo", "bar", "baz"],4523 t = {"hello": "hello", "foo": "replaced"},4524 f = {"foo": "new", "bar": "bar"};4525 jsPlumb.extend(t, f, n);4526 equal(t.foo, "new");4527 equal(t.hello, "hello");4528 equal(t.bar, "bar");4529 });4530 // -- geometry tests have been moved into the jtk-geom project (because that's where the code is now) ---4531 test(" arc segment tests", function () {4532 var r = 10, circ = 2 * Math.PI * r;4533 // first, an arc up and to the right (clockwise)4534 var params = { r: r, x1: 0, y1: 0, x2: 10, y2: -10, cx: 10, cy: 0 };4535 var s = new jsPlumb.Segments["Arc"](params);4536 // segment should be one quarter of the circumference4537 equal(s.getLength(), 0.25 * circ, "length of segment is correct");4538 // point 0 is (0,0)4539 var p1 = s.pointOnPath(0);4540 within(p1.x, 0, ok, "start x is correct");4541 within(p1.y, 0, ok, "start y is correct");4542 // point 1 is (10, -10)4543 var p2 = s.pointOnPath(1);4544 within(p2.x, 10, ok, "end x is correct");4545 within(p2.y, -10, ok, "end y is correct");4546 // point at loc 0.5 is (2.92, -7.07))4547 var p3 = s.pointOnPath(0.5);4548 within(p3.x, 10 - (Math.sqrt(2) / 2 * 10), ok, "end x is correct");4549 within(p3.y, -(Math.sqrt(2) / 2 * 10), ok, "end y is correct");4550 // gradients4551 equal(s.gradientAtPoint(0), -Infinity, "gradient at location 0 is -Infinity");4552 equal(s.gradientAtPoint(1), 0, "gradient at location 1 is 0");4553 within(s.gradientAtPoint(0.5), -1, ok, "gradient at location 0.5 is -1");4554 // an arc up and to the left (anticlockwise)4555 params = { r: r, x1: 0, y1: 0, x2: -10, y2: -10, cx: -10, cy: 0, ac: true };4556 s = new jsPlumb.Segments["Arc"](params);4557 equal(s.getLength(), 0.25 * circ, "length of segment is correct");4558 // point 0 is (0,0)4559 p1 = s.pointOnPath(0);4560 within(p1.x, 0, ok, "start x is correct");4561 within(p1.y, 0, ok, "start y is correct");4562 // point 1 is (-10, -10)4563 p2 = s.pointOnPath(1);4564 within(p2.x, -10, ok, "end x is correct");4565 within(p2.y, -10, ok, "end y is correct");4566 // point at loc 0.5 is (-2.92, -7.07))4567 p3 = s.pointOnPath(0.5);4568 within(p3.x, -2.9289321881345245, ok, "end x is correct");4569 within(p3.y, -7.071067811865477, ok, "end y is correct");4570 // gradients4571 equal(s.gradientAtPoint(0), -Infinity, "gradient at location 0 is -Infinity");4572 equal(s.gradientAtPoint(1), 0, "gradient at location 1 is 0");4573 within(s.gradientAtPoint(0.5), 1, ok, "gradient at location 0.5 is 1");4574 // clockwise, 180 degrees4575 params = { r: r, x1: 0, y1: 0, x2: 0, y2: 20, cx: 0, cy: 10 };4576 s = new jsPlumb.Segments["Arc"](params);4577 equal(s.getLength(), 0.5 * circ, "length of segment is correct");4578 p1 = s.pointOnPath(0);4579 within(p1.x, 0, ok, "start x is correct");4580 within(p1.y, 0, ok, "start y is correct");4581 p2 = s.pointOnPath(1);4582 within(p2.x, 0, ok, "end x is correct");4583 within(p2.y, 20, ok, "end y is correct");4584 var p3 = s.pointOnPath(0.5);4585 within(p3.x, 10, ok, "end x is correct");4586 within(p3.y, 10, ok, "end y is correct");4587 // gradients4588 equal(s.gradientAtPoint(0), 0, "gradient at location 0 is 0");4589 equal(s.gradientAtPoint(1), 0, "gradient at location 1 is 0");4590 equal(s.gradientAtPoint(0.5), Infinity, "gradient at location 0.5 is Infinity");4591 // anticlockwise, 180 degrees4592 params = { r: r, x1: 0, y1: 0, x2: 0, y2: -20, cx: 0, cy: -10, ac: true };4593 s = new jsPlumb.Segments["Arc"](params);4594 equal(s.getLength(), 0.5 * circ, "length of segment is correct");4595 p1 = s.pointOnPath(0);4596 within(p1.x, 0, ok, "start x is correct");4597 within(p1.y, 0, ok, "start y is correct");4598 p2 = s.pointOnPath(1);4599 within(p2.x, 0, ok, "end x is correct");4600 within(p2.y, -20, ok, "end y is correct");4601 var p3 = s.pointOnPath(0.5);4602 within(p3.x, 10, ok, "end x is correct");4603 within(p3.y, -10, ok, "end y is correct");4604 // clockwise, 270 degrees4605 params = { r: r, x1: 0, y1: 0, x2: -10, y2: 10, cx: 0, cy: 10 };4606 s = new jsPlumb.Segments["Arc"](params);4607 equal(s.getLength(), 0.75 * circ, "length of segment is correct");4608 p1 = s.pointOnPath(0);4609 within(p1.x, 0, ok, "start x is correct");4610 within(p1.y, 0, ok, "start y is correct");4611 p2 = s.pointOnPath(1);4612 within(p2.x, -10, ok, "end x is correct");4613 within(p2.y, 10, ok, "end y is correct");4614 var p3 = s.pointOnPath(0.5);4615 within(p3.x, 7.071067811865477, ok, "end x is correct");4616 within(p3.y, 17.071067811865477, ok, "end y is correct");4617 // anticlockwise, 90 degrees4618 params = { r: r, x1: 0, y1: 0, x2: -10, y2: 10, cx: 0, cy: 10, ac: true };4619 s = new jsPlumb.Segments["Arc"](params);4620 equal(s.getLength(), 0.25 * circ, "length of segment is correct");4621 p1 = s.pointOnPath(0);4622 within(p1.x, 0, ok, "start x is correct");4623 within(p1.y, 0, ok, "start y is correct");4624 p2 = s.pointOnPath(1);4625 within(p2.x, -10, ok, "end x is correct");4626 within(p2.y, 10, ok, "end y is correct");4627 var p3 = s.pointOnPath(0.5);4628 within(p3.x, -7.071067811865477, ok, "end x is correct");4629 within(p3.y, 2.9289321881345245, ok, "end y is correct");4630 // anticlockwise, 270 degrees4631 params = { r: r, x1: 0, y1: 0, x2: 10, y2: 10, cx: 0, cy: 10, ac: true };4632 s = new jsPlumb.Segments["Arc"](params);4633 equal(s.getLength(), 0.75 * circ, "length of segment is correct");4634 p1 = s.pointOnPath(0);4635 within(p1.x, 0, ok, "start x is correct");4636 within(p1.y, 0, ok, "start y is correct");4637 p2 = s.pointOnPath(1);4638 within(p2.x, 10, ok, "end x is correct");4639 within(p2.y, 10, ok, "end y is correct");4640 var p3 = s.pointOnPath(0.5);4641 within(p3.x, -7.071067811865477, ok, "end x is correct");4642 within(p3.y, 17.071067811865477, ok, "end y is correct");4643 });4644// *********************************** jsPlumbUtil.extend tests *****************************************************4645 test(" addClass method of Connection", function () {4646 support.addDiv("d1");4647 support.addDiv("d2");4648 var c = _jsPlumb.connect({source: "d1", target: "d2", overlays:[4649 [ "Label", { id:"label", label:'hey'}]4650 ]}), o = c.getOverlay("label");4651 c.addClass("foo");4652 ok(!(jsPlumb.hasClass(c.endpoints[0].canvas, "foo")), "endpoint does not have class 'foo'");4653 ok(c.canvas.className.baseVal.indexOf("foo") != -1, "connection has class 'foo'");4654 c.addClass("bar", true);4655 ok(jsPlumb.hasClass(c.endpoints[0].canvas, "bar"), "endpoint has class 'bar'");4656 c.removeClass("bar", true);4657 ok(c.canvas.className.baseVal.indexOf("bar") == -1, "connection doesn't have class 'bar'");4658 ok(!jsPlumb.hasClass(c.endpoints[0].canvas, "bar"), "endpoint doesnt have class 'bar'");4659 ok(jsPlumb.hasClass(o.canvas, "foo"), "overlay has class foo");4660 c.addClass("foo2");4661 ok(jsPlumb.hasClass(o.canvas, "foo2"), "overlay has class foo2");4662 ok(c.canvas.className.baseVal.indexOf("foo2") != -1, "connection has class 'foo2'");4663 c.removeClass("foo2");4664 ok(!jsPlumb.hasClass(o.canvas, "foo2"), "overlay no longer has class foo2");4665 ok(c.canvas.className.baseVal.indexOf("foo2") == -1, "connection no longer has class 'foo2'");4666 c.addClass("foo2", true);4667 ok(!jsPlumb.hasClass(o.canvas, "foo2"), "overlay doesnt have class foo2");4668 ok(c.canvas.className.baseVal.indexOf("foo2") != -1, "connection has class 'foo2'");4669 });4670 test(" addClass via jsPlumb.select", function () {4671 support.addDiv("d1");4672 support.addDiv("d2");4673 equal(_jsPlumb.select().length, 0, "there are no connections");4674 var c = _jsPlumb.connect({source: "d1", target: "d2"});4675 equal(_jsPlumb.select().length, 1, "there is one connection");4676 _jsPlumb.select().addClass("foo");4677 ok(!(jsPlumb.hasClass(c.endpoints[0].canvas, "foo")), "endpoint does not have class 'foo'");4678 _jsPlumb.select().addClass("bar", true);4679 ok(jsPlumb.hasClass(c.endpoints[0].canvas, "bar"), "endpoint hasclass 'bar'");4680 _jsPlumb.select().removeClass("bar", true);4681 ok(!(jsPlumb.hasClass(c.endpoints[0].canvas, "bar")), "endpoint doesn't have class 'bar'");4682 });4683// ******************* override pointer events ********************4684 test("pointer-events, jsPlumb.connect", function () {4685 if (_jsPlumb.getRenderMode() == jsPlumb.SVG) {4686 support.addDivs(["d1", "d2"]);4687 var c = _jsPlumb.connect({source: "d1", target: "d2", "pointer-events": "BANANA"});4688 equal(jsPlumb.getSelector(c.getConnector().canvas, "path")[0].getAttribute("pointer-events"), "BANANA", "pointer events passed through to svg elements");4689 }4690 else4691 expect(0);4692 });4693 test("connector-pointer-events, jsPlumb.addEndpoint", function () {4694 if (_jsPlumb.getRenderMode() == jsPlumb.SVG) {4695 support.addDivs(["d1", "d2"]);4696 var e1 = _jsPlumb.addEndpoint("d1", { "connector-pointer-events": "BANANA" });4697 var c = _jsPlumb.connect({source: e1, target: "d2"});4698 equal(jsPlumb.getSelector(c.getConnector().canvas, "path")[0].getAttribute("pointer-events"), "BANANA", "pointer events passed through to svg elements");4699 }4700 else4701 expect(0);4702 });4703 4704 test(" : DOM adapter addClass/hasClass/removeClass/toggleClass", function () {4705 var d1 = support.addDiv(d1), // d1 is a DOM element4706 _d1 = jsPlumb.getSelector(d1); // _d1 is a selector. we will test using each one.4707 // add a single class and test for its existence 4708 jsPlumb.addClass(d1, "FOO");4709 equal(d1.className, "FOO", "element has class FOO, using selector");4710 ok(jsPlumb.hasClass(_d1, "FOO"), "element has class FOO, according to hasClass method, DOM element");4711 ok(jsPlumb.hasClass(d1, "FOO"), "element has class FOO, according to hasClass method, selector");4712 // add multiple classes and test for their existence4713 jsPlumb.addClass(_d1, "BAZ BAR SHAZ");4714 ok(jsPlumb.hasClass(_d1, "BAZ"), "element has class BAZ, according to hasClass method, DOM element");4715 ok(jsPlumb.hasClass(_d1, "BAR"), "element has class BAR, according to hasClass method, DOM element");4716 ok(jsPlumb.hasClass(_d1, "SHAZ"), "element has class SHAZ, according to hasClass method, DOM element");4717 // remove one class4718 jsPlumb.removeClass(d1, "BAR");4719 ok(!jsPlumb.hasClass(_d1, "BAR"), "element doesn't have class BAR, according to hasClass method, DOM element");4720 // remove two more classes4721 jsPlumb.removeClass(d1, "BAZ SHAZ");4722 ok(!jsPlumb.hasClass(_d1, "BAZ"), "element doesn't have class BAZ, according to hasClass method, DOM element");4723 ok(!jsPlumb.hasClass(_d1, "SHAZ"), "element doesn't have class SHAZ, according to hasClass method, DOM element");4724 // check FOO is still there4725 ok(jsPlumb.hasClass(_d1, "FOO"), "element has class FOO, according to hasClass method, DOM element");4726 // now for an SVG element.4727 var s1 = jsPlumbUtil.svg.node("svg");4728 document.body.appendChild(s1);4729 jsPlumb.addClass(s1, "SFOO");4730 ok(jsPlumb.hasClass(s1, "SFOO"), "SVG element has class SFOO, according to hasClass method, DOM element");4731 jsPlumb.addClass(s1, "BAZ BAR SHAZ");4732 // remove one class4733 jsPlumb.removeClass(s1, "BAR");4734 ok(!jsPlumb.hasClass(s1, "BAR"), "SVG element doesn't have class BAR, according to hasClass method, DOM element");4735 // remove two more classes4736 jsPlumb.removeClass(s1, "BAZ SHAZ");4737 ok(!jsPlumb.hasClass(s1, "BAZ"), "SVG element doesn't have class BAZ, according to hasClass method, DOM element");4738 ok(!jsPlumb.hasClass(s1, "SHAZ"), "SVG element doesn't have class SHAZ, according to hasClass method, DOM element");4739 // check SFOO is still there4740 ok(jsPlumb.hasClass(s1, "SFOO"), "SVG element has class SFOO, according to hasClass method, DOM element");4741 // set class for d1 to be BAZ only4742 jsPlumb.setClass(d1, "BAZ");4743 equal(d1.className, "BAZ", "element has only the class set with setClass");4744 jsPlumb.toggleClass(d1, "BAZ");4745 ok(!jsPlumb.hasClass(d1, "BAZ"), "class toggled off");4746 jsPlumb.toggleClass(d1, "BAZ");4747 ok(jsPlumb.hasClass(d1, "BAZ"), "class toggled back on");4748 jsPlumb.toggleClass(d1, "BAR");4749 ok(jsPlumb.hasClass(d1, "BAR"), "another class toggled on");4750 });4751 test(" : DOM adapter addClass/removeClass, multiple elements, with selector", function () {4752 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");4753 jsPlumb.addClass(d1, "BAZ");4754 jsPlumb.addClass(d2, "BAZ");4755 var els = jsPlumb.getSelector(".BAZ");4756 // add a single class and test for its existence 4757 jsPlumb.addClass(els, "FOO");4758 ok(jsPlumb.hasClass(d1, "FOO"), "d1 has class FOO");4759 ok(jsPlumb.hasClass(d2, "FOO"), "d1 has class FOO");4760 // remove a single class and test for its non-existence.4761 jsPlumb.removeClass(els, "FOO");4762 ok(!jsPlumb.hasClass(d1, "FOO"), "d1 doesn't have class FOO");4763 ok(!jsPlumb.hasClass(d2, "FOO"), "d1 doesn't have class FOO");4764 });4765 test("DOM adapter addClass/removeClass, multiple elements, with array of DOM elements", function () {4766 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");4767 jsPlumb.addClass(d1, "BAZ");4768 jsPlumb.addClass(d2, "BAZ");4769 var els = [ d1, d2 ];4770 // add a single class and test for its existence 4771 jsPlumb.addClass(els, "FOO");4772 ok(jsPlumb.hasClass(d1, "FOO"), "d1 has class FOO");4773 ok(jsPlumb.hasClass(d2, "FOO"), "d1 has class FOO");4774 // remove a single class and test for its non-existence.4775 jsPlumb.removeClass(els, "FOO");4776 ok(!jsPlumb.hasClass(d1, "FOO"), "d1 doesn't have class FOO");4777 ok(!jsPlumb.hasClass(d2, "FOO"), "d1 doesn't have class FOO");4778 });4779 test("DOM adapter addClass/removeClass, multiple elements, with array of IDs", function () {4780 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");4781 jsPlumb.addClass(d1, "BAZ");4782 jsPlumb.addClass(d2, "BAZ");4783 var els = [ "d1", "d2" ];4784 // add a single class and test for its existence 4785 jsPlumb.addClass(els, "FOO");4786 ok(jsPlumb.hasClass(d1, "FOO"), "d1 has class FOO");4787 ok(jsPlumb.hasClass(d2, "FOO"), "d1 has class FOO");4788 // remove a single class and test for its non-existence.4789 jsPlumb.removeClass(els, "FOO");4790 ok(!jsPlumb.hasClass(d1, "FOO"), "d1 doesn't have class FOO");4791 ok(!jsPlumb.hasClass(d2, "FOO"), "d1 doesn't have class FOO");4792 });4793 test(" : DOM adapter addClass and removeClass at the same time, pass as arrays", function () {4794 var d1 = support.addDiv("d1");4795 jsPlumb.addClass(d1, "BAZ FOO BAR");4796 ok(jsPlumb.hasClass(d1, "BAZ"), "d1 has class BAZ");4797 ok(jsPlumb.hasClass(d1, "FOO"), "d1 has class FOO");4798 ok(jsPlumb.hasClass(d1, "BAR"), "d1 has class BAR");4799 // add qux, remove foo and bar.4800 jsPlumb.updateClasses(d1, ["QUX", "BOZ"], ["FOO", "BAR"]);4801 ok(jsPlumb.hasClass(d1, "QUX"), "d1 has class QUX");4802 ok(jsPlumb.hasClass(d1, "BOZ"), "d1 has class BOZ");4803 ok(jsPlumb.hasClass(d1, "BAZ"), "d1 has class BAZ");4804 ok(!jsPlumb.hasClass(d1, "FOO"), "d1 has not class FOO");4805 ok(!jsPlumb.hasClass(d1, "BAR"), "d1 has not class BAR");4806 });4807 test(" : DOM adapter addClass and removeClass at the same time, pass as strings", function () {4808 var d1 = support.addDiv("d1");4809 jsPlumb.addClass(d1, "BAZ FOO BAR");4810 ok(jsPlumb.hasClass(d1, "BAZ"), "d1 has class BAZ");4811 ok(jsPlumb.hasClass(d1, "FOO"), "d1 has class FOO");4812 ok(jsPlumb.hasClass(d1, "BAR"), "d1 has class BAR");4813 // add qux, remove foo and bar.4814 jsPlumb.updateClasses(d1, "QUX BOZ", "FOO BAR");4815 ok(jsPlumb.hasClass(d1, "QUX"), "d1 has class QUX");4816 ok(jsPlumb.hasClass(d1, "BOZ"), "d1 has class BOZ");4817 ok(jsPlumb.hasClass(d1, "BAZ"), "d1 has class BAZ");4818 ok(!jsPlumb.hasClass(d1, "FOO"), "d1 has not class FOO");4819 ok(!jsPlumb.hasClass(d1, "BAR"), "d1 has not class BAR");4820 });4821 test("endpointStyle on connect method", function () {4822 support.addDivs(["d1", "d2"]);4823 var c = _jsPlumb.connect({4824 source: "d1",4825 target: "d2",4826 endpointStyle: { fill: "blue" }4827 });4828 equal(c.endpoints[0].canvas.childNodes[0].childNodes[0].getAttribute("fill"), "blue", "endpoint style passed through by connect method");4829 });4830 test("recalculateOffsets", function() {4831 var d1 = support.addDiv("d1");4832 var d2 = support.addDiv("d2", d1);4833 d2.style.left = "250px";4834 d2.style.top = "120px";4835 var d3 = support.addDiv("d3", d1);4836 d3.style.left = "150px";4837 d3.style.top = "220px";4838 _jsPlumb.connect({source:d2, target:d3});4839 _jsPlumb.draggable(d1);4840 var o = _jsPlumb.getDragManager().getElementsForDraggable("d1")["d2"];4841 equal(250, o.offset.left, "d2 is at left=250");4842 d2.style.left = "1250px";4843 _jsPlumb.getDragManager().updateOffsets("d1");4844 var o = _jsPlumb.getDragManager().getElementsForDraggable("d1")["d2"];4845 equal(1250, o.offset.left, "d2 is at left=1250");4846 });4847 /**4848 * Tests that the `getOffset` function correctly ignores body scroll when adjusting for parent element scroll.4849 * @method Test.offset_body_scroll4850 */4851 test("offset body scroll", function() {4852 expect(0);4853 });4854 test("endpointStyle on connect method, with makeSource prepared element", function () {4855 support.addDivs(["d1", "d2"]);4856 _jsPlumb.makeSource("d1");4857 var c = _jsPlumb.connect({4858 source: "d1",4859 target: "d2",4860 endpointStyle: { fill: "blue" }4861 });4862 equal(c.endpoints[0].canvas.childNodes[0].childNodes[0].getAttribute("fill"), "blue", "endpoint style passed through by connect method");4863 });4864 test("setContainer does not cause multiple event registrations (issue 307)", function () {4865 support.addDivs(["box1", "box2", "canvas"]);4866 _jsPlumb.importDefaults({4867 Container: 'canvas'4868 });4869 _jsPlumb.setContainer('canvas');4870 var connection = _jsPlumb.connect({4871 source: 'box1',4872 id: 'connector1',4873 target: 'box2',4874 anchors: ['Bottom', 'Left']4875 });4876 var clickCount = 0;4877 var labelDef = {4878 id: 'label-1',4879 label: 'labeltext',4880 events: {4881 click: function (event) {4882 console.log('click on label');4883 clickCount++;4884 }4885 }4886 };4887 var o = connection.addOverlay(['Label', labelDef]);4888 _jsPlumb.trigger(connection.getOverlay("label-1").canvas, "click");4889 equal(clickCount, 1, "1 click on overlay registered");4890 });4891 test("unbind a single event listener does not unbind them all", function() {4892 var i = 0;4893 var l1 = function() {4894 i += 5;4895 };4896 var l2 = function() {4897 i -= 6;4898 };4899 var d1 = support.addDiv("d1"),4900 d2 = support.addDiv("d2");4901 _jsPlumb.bind("connection", l1);4902 _jsPlumb.bind("connection", l2);4903 _jsPlumb.connect({source:d1, target:d2});4904 equal(i, -1,"both listeners fired");4905 i = 0;4906 // first test existing: unbind with no args unbinds everything.4907 _jsPlumb.unbind("connection");4908 _jsPlumb.connect({source:d1, target:d2});4909 equal(i, 0, "no listeners fired");4910 // rebind and check4911 _jsPlumb.bind("connection", l1);4912 _jsPlumb.bind("connection", l2);4913 _jsPlumb.connect({source:d1, target:d2});4914 equal(i, -1,"both listeners fired");4915 i = 0;4916 // unbind one.4917 _jsPlumb.unbind("connection", l2);4918 _jsPlumb.connect({source:d1, target:d2});4919 equal(i, 5, "only listener l1 fired");4920 i = 0;4921 _jsPlumb.unbind(l1);4922 _jsPlumb.connect({source:d1, target:d2});4923 equal(i, 0, "no listeners fired");4924 });4925 test("bind multiple listeners via array (multiple events, one function)", function() {4926 var count = 0;4927 _jsPlumb.bind(["foo", "bar", "baz"], function() {4928 count++;4929 });4930 _jsPlumb.fire("foo");4931 equal(count, 1, "count is 1");4932 _jsPlumb.fire("bar");4933 equal(count, 2, "count is 2");4934 _jsPlumb.fire("baz");4935 equal(count, 3, "count is 3");4936 });4937// -----------------issue 383, setDraggable doesnt work with list-like arguments4938 test("setDraggable with array", function() {4939 var d1 = support.addDiv("d1", null, "aTest");4940 var d2 = support.addDiv("d2", null, "aTest");4941 ok(!_jsPlumb.isAlreadyDraggable(d1), "d1 is not draggable");4942 ok(!_jsPlumb.isAlreadyDraggable(d2), "d2 is not draggable");4943 var d = document.getElementsByClassName("aTest");4944 // first make them draggable4945 if(typeof d === "function") {4946 expect(2);4947 }4948 else4949 {4950 _jsPlumb.draggable(d);4951 ok(_jsPlumb.isElementDraggable(d1), "d1 is now draggable");4952 ok(_jsPlumb.isElementDraggable(d2), "d2 is now draggable");4953 // now disable4954 _jsPlumb.setDraggable(d, false);4955 ok(!_jsPlumb.isElementDraggable(d1), "d1 is not draggable");4956 ok(!_jsPlumb.isElementDraggable(d2), "d2 is not draggable");4957 // and enable4958 _jsPlumb.toggleDraggable(d);4959 ok(_jsPlumb.isElementDraggable(d1), "d1 is draggable after toggle ");4960 ok(_jsPlumb.isElementDraggable(d2), "d2 is draggable after toggle");4961 }4962 });4963// ------------------ issue 402...offset cache not cleared always --------------------4964 test("offset cache cleared", function() {4965 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");4966 _jsPlumb.connect({source:d1, target:d2});4967 var cd = _jsPlumb.getCachedData("d1");4968 ok(cd.o != null, "d1 is cached");4969 // reset and then move d1. get cached data and offset should have been updated.4970 _jsPlumb.reset();4971 d1.style.position = "absolute";4972 d1.style.left = "5000px";4973 var cd2 = _jsPlumb.getCachedData("d1");4974 ok(cd2.o == null, "cache data cleared");4975 _jsPlumb.connect({source:d1, target:d2});4976 var cd3 = _jsPlumb.getCachedData("d1");4977 ok(cd3.o != null, "d1 is cached");4978 // delete every endpoint and then move d1. get cached data and offset should have been updated.4979 _jsPlumb.deleteEveryEndpoint();4980 d1.style.position = "absolute";4981 d1.style.left = "5000px";4982 var cd2 = _jsPlumb.getCachedData("d1");4983 ok(cd2.o == null, "cache data cleared");4984 _jsPlumb.connect({source:d1, target:d2});4985 var cd3 = _jsPlumb.getCachedData("d1");4986 ok(cd3.o != null, "d1 is cached");4987 });4988 test("reset, and reset with optional retention of event bindings", function() {4989 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2");4990 var c = false;4991 _jsPlumb.bind("connection", function() { c = true; });4992 _jsPlumb.connect({source:d1, target:d2});4993 ok(c, "connection event fired");4994 c = false;4995 _jsPlumb.reset(true);4996 _jsPlumb.connect({source:d1, target:d2});4997 ok(c, "connection event fired after reset that did not unbind event listeners");4998 c = false;4999 _jsPlumb.reset();5000 _jsPlumb.connect({source:d1, target:d2});5001 ok(!c, "connection event NOT fired after reset, because reset's default behaviour is to unbind event listeners.");5002 })5003// ---------------------- issue 405, jsPlumb.empty doesnt remove connections (cannot reproduce) -----------------------5004 test("jsPlumb.empty removes connections", function() {5005 var p = support.addDiv("p"),5006 d1 = support.addDiv("d1", p),5007 d2 = support.addDiv("d2", p);5008 _jsPlumb.connect({source:d1, target:d2});5009 ok(_jsPlumb.select().length == 1, "1 connection");5010 _jsPlumb.empty(p);5011 ok(document.getElementById("d1") == null);5012 ok(_jsPlumb.select().length == 0, "0 connections");5013 });5014// -- connection dragging tests5015// ----------------------- draggables and posses ----------------------------------------------------5016 test("dragging works", function() {5017 var d = support.addDiv("d1");5018 d.style.position = "absolute";5019 d.style.left = "50px";5020 d.style.top = "50px";5021 _jsPlumb.draggable(d);5022 support.dragNodeBy(d, 100, 100, {5023 beforeMouseUp:function() {5024 ok(d.classList.contains("jtk-drag"), "drag class set on element");5025 },5026 after:function() {5027 ok(!d.classList.contains("jtk-drag"), "drag class no longer set on element");5028 }5029 });5030 equal(150, parseInt(d.style.left, 10));5031 equal(150, parseInt(d.style.top, 10));5032 });5033 test("dragging a posse works, elements as argument", function() {5034 var d = support.addDiv("d1");5035 d.style.position = "absolute";5036 d.style.left = "50px";5037 d.style.top = "50px";5038 var d2 = support.addDiv("d2");5039 d2.style.position = "absolute";5040 d2.style.left = "450px";5041 d2.style.top = "450px";5042 _jsPlumb.draggable([d,d2]);5043 _jsPlumb.addToPosse([d,d2], "posse");5044 support.dragNodeBy(d, 100, 100, {5045 beforeMouseUp:function() {5046 ok(d.classList.contains("jtk-drag"), "drag class set on element");5047 },5048 after:function() {5049 ok(!d.classList.contains("jtk-drag"), "drag class no longer set on element");5050 }5051 });5052 equal(150, parseInt(d.style.left, 10));5053 equal(150, parseInt(d.style.top, 10));5054 equal(550, parseInt(d2.style.left, 10));5055 equal(550, parseInt(d2.style.top, 10));5056 _jsPlumb.removeFromPosse(d2, "posse");5057 support.dragNodeBy(d, -100, -100);5058 equal(50, parseInt(d.style.left, 10));5059 equal(50, parseInt(d.style.top, 10));5060 equal(550, parseInt(d2.style.left, 10));5061 equal(550, parseInt(d2.style.top, 10));5062 });5063 test("dragging a posse works, element ids as argument", function() {5064 var d = support.addDiv("d1");5065 d.style.position = "absolute";5066 d.style.left = "50px";5067 d.style.top = "50px";5068 var d2 = support.addDiv("d2");5069 d2.style.position = "absolute";5070 d2.style.left = "450px";5071 d2.style.top = "450px";5072 _jsPlumb.draggable([d,d2]);5073 _jsPlumb.addToPosse(["d1","d2"], "posse");5074 support.dragNodeBy(d, 100, 100, {5075 beforeMouseUp:function() {5076 ok(d.classList.contains("jtk-drag"), "drag class set on element");5077 },5078 after:function() {5079 ok(!d.classList.contains("jtk-drag"), "drag class no longer set on element");5080 }5081 });5082 equal(150, parseInt(d.style.left, 10));5083 equal(150, parseInt(d.style.top, 10));5084 equal(550, parseInt(d2.style.left, 10));5085 equal(550, parseInt(d2.style.top, 10));5086 _jsPlumb.removeFromPosse(d2, "posse");5087 support.dragNodeBy(d, -100, -100);5088 equal(50, parseInt(d.style.left, 10));5089 equal(50, parseInt(d.style.top, 10));5090 equal(550, parseInt(d2.style.left, 10));5091 equal(550, parseInt(d2.style.top, 10));5092 });5093 test("connection dragging, redrop on original target endpoint", function() {5094 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2"), d3 = support.addDiv("d3");5095 var e1 = _jsPlumb.addEndpoint(d1, { isSource:true });5096 var e2 = _jsPlumb.addEndpoint(d2, { isTarget:true });5097 var c = _jsPlumb.connect({source: e1, target: e2});5098 equal(_jsPlumb.anchorManager.getConnectionsFor("d1").length, 1, "1 connection registered for d1 after mouse connect");5099 equal(_jsPlumb.anchorManager.getConnectionsFor("d2").length, 1, "1 connection registered for d2 after mouse connect");5100 support.relocateTarget(c, e2.canvas);5101 equal(_jsPlumb.anchorManager.getConnectionsFor("d1").length, 1, "1 connection registered for d1 after mouse connect");5102 equal(_jsPlumb.anchorManager.getConnectionsFor("d2").length, 1, "1 connection registered for d2 after mouse connect");5103 });5104 test("draggable function, the various ways in which it can be called", function() {5105 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2"), d3 = support.addDiv("d3"), d4 = support.addDiv("d4");5106 _jsPlumb.draggable(d1); // by element5107 _jsPlumb.draggable(["d2", d3]);5108 _jsPlumb.draggable(document.querySelectorAll("#d4"));5109 ok(jsPlumb.hasClass(d1, "jtk-draggable"), "element registered as Element ok");5110 ok(jsPlumb.hasClass(d2, "jtk-draggable", "elements registered as id in array ok"));5111 ok(jsPlumb.hasClass(d3, "jtk-draggable", "elements registered as Element in array ok"));5112 ok(jsPlumb.hasClass(d4, "jtk-draggable", "querySelectorAll output ok as input"));5113 });5114 test("droppable function, the various ways in which it can be called", function() {5115 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2"), d3 = support.addDiv("d3"), d4 = support.addDiv("d4");5116 _jsPlumb.droppable(d1); // by element5117 _jsPlumb.droppable(["d2", d3]);5118 _jsPlumb.droppable(document.querySelectorAll("#d4"));5119 ok(jsPlumb.hasClass(d1, "jtk-droppable"), "element registered as Element ok");5120 ok(jsPlumb.hasClass(d2, "jtk-droppable", "elements registered as id in array ok"));5121 ok(jsPlumb.hasClass(d3, "jtk-droppable", "elements registered as Element in array ok"));5122 ok(jsPlumb.hasClass(d4, "jtk-droppable", "querySelectorAll output ok as input"));5123 });5124// click events on overlays5125 test("overlay click event", function() {5126 support.addDiv("d1");5127 support.addDiv("d2");5128 var count = 0;5129 var c = _jsPlumb.connect({5130 source: "d1",5131 target: "d2",5132 overlays:[5133 [ "Label", {5134 id:"label",5135 label:'hey',5136 events:{5137 click:function() {5138 count++;5139 }5140 }5141 }],5142 [ "Arrow", {5143 id:"arrow",5144 events:{5145 click:function() {5146 count++5147 }5148 }5149 }]5150 ]}), o = c.getOverlay("label"), o2 = c.getOverlay("arrow");5151 _jsPlumb.trigger(o.canvas, "click");5152 ok(count == 1, "click event was triggered on label overlay");5153 _jsPlumb.trigger(o2.path, "click");5154 ok(count == 2, "click event was triggered on arrow overlay");5155 });5156 test("endpoint unmatched scopes", function() {5157 var sourceEndpoint = {5158 isSource: true,5159 scope: "blue"5160 }, targetEndpoint = {5161 isTarget:true5162 },5163 d1 = support.addDiv("d1"), d2 = support.addDiv("d2"),5164 e1 = _jsPlumb.addEndpoint(d1, sourceEndpoint),5165 e2 = _jsPlumb.addEndpoint(d2, targetEndpoint);5166 var c = _jsPlumb.connect({source:e1, target:e2});5167 ok(c == null, "no connection as scopes dont match");5168 });5169 test("endpoint passes scope to connection, programmatic connection", function() {5170 var sourceEndpoint = {5171 isSource: true,5172 scope: "blue"5173 }, targetEndpoint = {5174 isTarget:true,5175 scope:"blue"5176 },5177 d1 = support.addDiv("d1"), d2 = support.addDiv("d2"),5178 e1 = _jsPlumb.addEndpoint(d1, sourceEndpoint),5179 e2 = _jsPlumb.addEndpoint(d2, targetEndpoint);5180 var c = _jsPlumb.connect({source:e1, target:e2});5181 equal(c.scope, "blue", "connection scope is blue.");5182 });5183 test("endpoint passes scope to connection, connection via mouse", function() {5184 var sourceEndpoint = {5185 isSource: true,5186 scope: "blue"5187 }, targetEndpoint = {5188 isTarget:true,5189 scope:"blue"5190 },5191 d1 = support.addDiv("d1"), d2 = support.addDiv("d2"),5192 e1 = _jsPlumb.addEndpoint(d1, sourceEndpoint),5193 e2 = _jsPlumb.addEndpoint(d2, targetEndpoint);5194 var c = support.dragConnection(e1, e2);5195 equal(c.scope, "blue", "connection scope is blue.");5196 });5197// ------------------------------------------- groups ---------------------------------------------------------------5198// -------------- endpoint clicks5199 test("endpoint click", function() {5200 var d = support.addDiv("d1"),5201 e = _jsPlumb.addEndpoint(d),5202 c = 0,5203 ec = 0;5204 _jsPlumb.bind("click", function() {5205 c++;5206 });5207 _jsPlumb.bind("endpointClick", function() {5208 ec++;5209 });5210 // the SVG element5211 _jsPlumb.trigger(e.canvas.childNodes[0], "click");5212 // the path element5213 _jsPlumb.trigger(e.canvas.childNodes[0].childNodes[0], "click");5214 // the main endpiint5215 _jsPlumb.trigger(e.canvas, "click");5216 // each of those should have triggered a single click5217 equal(ec, 3, "3 endpoint clicks");5218 equal(c, 0, "no other clicks");5219 });5220 test("endpoint double click", function() {5221 var d = support.addDiv("d1"),5222 e = _jsPlumb.addEndpoint(d),5223 c = 0,5224 ec = 0;5225 _jsPlumb.bind("dblclick", function() {5226 c++;5227 });5228 _jsPlumb.bind("endpointDblClick", function() {5229 ec++;5230 });5231 // the SVG element5232 _jsPlumb.trigger(e.canvas.childNodes[0], "dblclick");5233 // the path element5234 _jsPlumb.trigger(e.canvas.childNodes[0].childNodes[0], "dblclick");5235 // the main endpiint5236 _jsPlumb.trigger(e.canvas, "dblclick");5237 // each of those should have triggered a single click5238 equal(ec, 3, "3 endpoint dbl clicks");5239 equal(c, 0, "no other dbl clicks");5240 });5241 test("connector click", function() {5242 var d = support.addDiv("d1"), d2 = support.addDiv("d2"),5243 conn = _jsPlumb.connect({source:d, target:d2}),5244 c = 0;5245 _jsPlumb.bind("click", function() {5246 c++;5247 });5248 // the path element5249 _jsPlumb.trigger(conn.canvas.childNodes[0], "click");5250 // the SVG element5251 _jsPlumb.trigger(conn.canvas, "click");5252 // each of those should have triggered a single click5253 equal(c, 2, "2 clicks in total");5254 });5255 test("connector dbl click", function() {5256 var d = support.addDiv("d1"), d2 = support.addDiv("d2"),5257 conn = _jsPlumb.connect({source:d, target:d2}),5258 c = 0;5259 _jsPlumb.bind("dblclick", function() {5260 c++;5261 });5262 // the path element5263 _jsPlumb.trigger(conn.canvas.childNodes[0], "dblclick");5264 // the SVG element5265 _jsPlumb.trigger(conn.canvas, "dblclick");5266 // each of those should have triggered a single click5267 equal(c, 2, "2 dblclicks in total");5268 });5269 test("overlay click", function() {5270 var d = support.addDiv("d1"), d2 = support.addDiv("d2"),5271 conn = _jsPlumb.connect({source:d, target:d2, overlays:[5272 [ "Arrow", { id:"lbl" }]5273 ]}),5274 lbl = conn.getOverlay("lbl"),5275 c = 0;5276 _jsPlumb.bind("click", function() {5277 c++;5278 });5279 // the path element5280 _jsPlumb.trigger(lbl.canvas.childNodes[0], "click");5281 _jsPlumb.trigger(lbl.canvas.childNodes[1], "click");5282 // the SVG element5283 _jsPlumb.trigger(lbl.canvas, "click");5284 // each of those should have triggered a single click5285 equal(c, 3, "3 clicks in total");5286 });5287 test("overlay dblclick", function() {5288 var d = support.addDiv("d1"), d2 = support.addDiv("d2"),5289 conn = _jsPlumb.connect({source:d, target:d2, overlays:[5290 [ "Arrow", { id:"lbl" }]5291 ]}),5292 lbl = conn.getOverlay("lbl"),5293 c = 0;5294 _jsPlumb.bind("dblclick", function() {5295 c++;5296 });5297 // the path element5298 _jsPlumb.trigger(lbl.canvas.childNodes[0], "dblclick");5299 _jsPlumb.trigger(lbl.canvas.childNodes[1], "dblclick");5300 // the SVG element5301 _jsPlumb.trigger(lbl.canvas, "dblclick");5302 // each of those should have triggered a single click5303 equal(c, 3, "3 dblclicks in total");5304 });5305 test("retrieve endpoint params, Dot endpoint", function() {5306 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2"),5307 e = _jsPlumb.connect({5308 source:d1,5309 target:d2,5310 endpoint:["Dot", { radius:250 }]5311 });5312 equal(e.endpoints[0].endpoint.radius, 250, "radius is set correctly and retrievable");5313 });5314 test("retrieve endpoint params, Rectangle endpoint", function() {5315 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2"),5316 e = _jsPlumb.connect({5317 source:d1,5318 target:d2,5319 endpoint:["Rectangle", { width:250, height:250 }]5320 });5321 equal(e.endpoints[0].endpoint.width, 250, "width is set correctly and retrievable");5322 equal(e.endpoints[0].endpoint.height, 250, "height is set correctly and retrievable");5323 ok(e.endpoints[0].endpoint.x != null, "x is set and retrievable");5324 ok(e.endpoints[0].endpoint.y != null, "y is set and retrievable");5325 });5326// ---------------------------- pluggable size/position handler --------------------------------5327 test("pluggable getSize", function() {5328 var j = jsPlumb.getInstance(null, {5329 getSize:function() { return [100,100]; }5330 });5331 var d = support.addDiv("d");5332 equal(j.getSize(d)[0], 100, "width is set by pluggable function");5333 equal(j.getSize(d)[1], 100, "height is set by pluggable function");5334 });5335 test("endpoint deletion: no deletion by default", function() {5336 var d1 = support.addDiv("d1", null, null, 0, 0, 500, 500);5337 var d2 = support.addDiv("d2", d1, null, 200, 200, 50, 50);5338 var d3 = support.addDiv("d3", null, null, 700, 700, 500, 500);5339 var ep1 = _jsPlumb.addEndpoint(d1, { maxConnections:-1}), ep2 = _jsPlumb.addEndpoint(d2), ep3 = _jsPlumb.addEndpoint(d3);5340 var c1 = _jsPlumb.connect({source:ep1, target:ep2});5341 var c2 = _jsPlumb.connect({source:ep1, target:ep3});5342 equal(_jsPlumb.select().length, 2, "two connections in the instance");5343 equal(_jsPlumb.selectEndpoints().length, 3, "three endpoints in the instance");5344 _jsPlumb.deleteConnection(c1);5345 equal(_jsPlumb.select().length, 1, "one connection in the instance");5346 equal(_jsPlumb.selectEndpoints().length, 3, "three endpoints in the instance");5347 _jsPlumb.deleteEndpoint(ep1);5348 });5349 /*5350 test("endpoint deletion: no deletion by default", function() {5351 var d1 = support.addDiv("d1", null, null, 0, 0, 500, 500);5352 var d2 = support.addDiv("d2", d1, null, 200, 200, 50, 50);5353 var d3 = support.addDiv("d3", null, null, 700, 700, 500, 500);5354 var ep1 = _jsPlumb.addEndpoint(d1, { maxConnections:-1}), ep2 = _jsPlumb.addEndpoint(d2), ep3 = _jsPlumb.addEndpoint(d3);5355 var c1 = _jsPlumb.connect({source:ep1, target:ep2});5356 var c2 = _jsPlumb.connect({source:ep1, target:ep3});5357 equal(_jsPlumb.select().length, 2, "two connections in the instance");5358 equal(_jsPlumb.selectEndpoints().length, 3, "three endpoints in the instance");5359 _jsPlumb.detach({connection:c1});5360 equal(_jsPlumb.select().length, 1, "one connection in the instance");5361 equal(_jsPlumb.selectEndpoints().length, 3, "three endpoints in the instance");5362 });5363 */5364 test("events fired on discrete ticks of the event loop", function() {5365 var a = {}, count = 0, flip = false;5366 jsPlumbUtil.EventGenerator.apply(a, []);5367 a.bind("event", function() {5368 if (flip)5369 equal(count, 1, "an event was already fired when the second event is processed");5370 else5371 equal(count, 0, "an event was not yet fired");5372 // if this is the first event, we want to set a flag and fire a new event.5373 if (!flip) {5374 flip = true;5375 a.fire("event");5376 }5377 count++5378 });5379 a.fire("event");5380 equal(count, 2, "an event was fired");5381 });5382 test("connectorClass specified in addEndpoint params", function() {5383 var d1 = support.addDiv("d1", null, null, 0, 0, 500, 500);5384 var d2 = support.addDiv("d2", d1, null, 200, 200, 50, 50);5385 var e1 = jsPlumb.addEndpoint(d1, { anchor: "Top", connector:["Flowchart", {cssClass: "connector"}], endpoint: "Rectangle"} );5386 _jsPlumb.connect({source:e1, target:d2});5387 ok(_jsPlumb.hasClass(e1.connections[0].getConnector().canvas, "connector", "connector class set"));5388 });5389 test("overlay location", function () {5390 support.addDivs(["box1", "box2", "canvas"]);5391 _jsPlumb.importDefaults({5392 Container: 'canvas'5393 });5394 _jsPlumb.setContainer('canvas');5395 var connection = _jsPlumb.connect({ source: 'box1', target: 'box2' });5396 var o = connection.addOverlay(['Label', {label:"first label"}]);5397 equal(0.5, o.loc, "label is at default location of 0.5");5398 var connection2 = _jsPlumb.connect({ source: 'box1', target: 'box2' });5399 connection2.mergeData({labelLocation:0.2});5400 var o2 = connection2.addOverlay(['Label', {label:"second label"}]);5401 equal(0.2, o2.loc, "label is at location of 0.2, which is the value of the `labelLocation` value in the connection's data");5402 var connection3 = _jsPlumb.connect({ source: 'box1', target: 'box2' });5403 connection3.mergeData({theattribute:0.1});5404 var o3 = connection3.addOverlay(['Label', {label:"second label", labelLocationAttribute:"theattribute"}]);5405 equal(0.1, o3.loc, "label is at location of 0.1, which is the value of an attribute whose name was specified in the addOverlay call, and whose value is in the connection data");5406 });5407 test("connection.replaceEndpoint", function() {5408 var d1 = support.addDiv("d1"), d2 = support.addDiv("d2"),5409 e1 = _jsPlumb.addEndpoint(d1, {5410 endpoint:[ "Dot", { radius:15 } ]5411 }),5412 e2 = _jsPlumb.addEndpoint(d2, {5413 endpoint:[ "Dot", { radius:25 } ]5414 }),5415 c = _jsPlumb.connect({source:e1, target:e2});5416 equal(15, c.endpoints[0].endpoint.radius, "endpoint 1 has radius 15");5417 equal(25, c.endpoints[1].endpoint.radius, "endpoint 2 has radius 25");5418 equal("Dot", c.endpoints[0].endpoint.type, "endpoint 1 is a Dot");5419 equal("Dot", c.endpoints[1].endpoint.type, "endpoint 2 is a Dot");5420 c.replaceEndpoint(0, [ "Rectangle", {width:50,height:50}]);5421 c.replaceEndpoint(1, [ "Dot", {radius:100}]);5422 equal(50, c.endpoints[0].endpoint.width, "endpoint 1 now has width 50");...

animatedcollapse.js

Source:animatedcollapse.js

...140 document.cookie = name+"="+value+"; path=/"141}142}143// ,height=220px144animatedcollapse.addDiv('controlchild', 'fade=1')145animatedcollapse.addDiv('keyboardchild', 'fade=1')146animatedcollapse.addDiv('faqchild', 'fade=1')147animatedcollapse.addDiv('usermodifiable', 'fade=1')148animatedcollapse.addDiv('knownissues', 'fade=1')149animatedcollapse.addDiv('byname', 'fade=1')150animatedcollapse.addDiv('solbrowser', 'fade=1')151animatedcollapse.addDiv('gettingstarted', 'fade=1')152animatedcollapse.addDiv('installing', 'fade=1')153animatedcollapse.addDiv('faq1', 'fade=1')154animatedcollapse.addDiv('faq2', 'fade=1')155animatedcollapse.addDiv('faq3', 'fade=1')156animatedcollapse.addDiv('faq4', 'fade=1')157animatedcollapse.addDiv('faq5', 'fade=1')158animatedcollapse.addDiv('faq6', 'fade=1')159animatedcollapse.addDiv('faq7', 'fade=1')160animatedcollapse.addDiv('faq8', 'fade=1')161animatedcollapse.addDiv('faq9', 'fade=1')162animatedcollapse.addDiv('faq10', 'fade=1')163animatedcollapse.addDiv('faq11', 'fade=1')164animatedcollapse.addDiv('faq12', 'fade=1')165animatedcollapse.addDiv('faq13', 'fade=1')166animatedcollapse.addDiv('faq14', 'fade=1')167animatedcollapse.addDiv('faq15', 'fade=1')168animatedcollapse.addDiv('faq16', 'fade=1')169animatedcollapse.addDiv('faq17', 'fade=1')170animatedcollapse.addDiv('faq18', 'fade=1')171animatedcollapse.addDiv('faq19', 'fade=1')172animatedcollapse.addDiv('faq20', 'fade=1')173animatedcollapse.addDiv('faq21', 'fade=1')174animatedcollapse.addDiv('faq22', 'fade=1')175animatedcollapse.addDiv('faq23', 'fade=1')176animatedcollapse.addDiv('faq24', 'fade=1')177animatedcollapse.addDiv('faq25', 'fade=1')178animatedcollapse.addDiv('faq26', 'fade=1')179animatedcollapse.addDiv('faq27', 'fade=1')180animatedcollapse.addDiv('faq28', 'fade=1')181animatedcollapse.addDiv('faq29', 'fade=1')182animatedcollapse.addDiv('faq30', 'fade=1')183animatedcollapse.addDiv('faq31', 'fade=1')184animatedcollapse.addDiv('faq32', 'fade=1')185animatedcollapse.addDiv('faq33', 'fade=1')186animatedcollapse.addDiv('faq34', 'fade=1')187animatedcollapse.addDiv('faq35', 'fade=1')188animatedcollapse.addDiv('faq36', 'fade=1')189animatedcollapse.addDiv('faq37', 'fade=1')190animatedcollapse.addDiv('faq38', 'fade=1')191animatedcollapse.addDiv('faq39', 'fade=1')192animatedcollapse.addDiv('faq40', 'fade=1')193animatedcollapse.addDiv('faq41', 'fade=1')194animatedcollapse.addDiv('faq42', 'fade=1')195animatedcollapse.addDiv('faq43', 'fade=1')196animatedcollapse.addDiv('faq44', 'fade=1')197animatedcollapse.addDiv('faq45', 'fade=1')198animatedcollapse.addDiv('faq46', 'fade=1')199animatedcollapse.addDiv('faq47', 'fade=1')200animatedcollapse.addDiv('faq48', 'fade=1')201animatedcollapse.addDiv('faq49', 'fade=1')202animatedcollapse.addDiv('gnu', 'fade=1')203animatedcollapse.addDiv('contributors', 'fade=1')204animatedcollapse.addDiv('authors', 'fade=1')205animatedcollapse.addDiv('documentation', 'fade=1')206animatedcollapse.addDiv('database', 'fade=1')207animatedcollapse.addDiv('maps', 'fade=1')208animatedcollapse.addDiv('models', 'fade=1')209animatedcollapse.addDiv('libraries', 'fade=1')210animatedcollapse.addDiv('other', 'fade=1')...

script.js

Source:script.js

1function addIcon(array, container, value) {2 container.innerHTML = '';3 const all = array.filter ((elemento) => {4 if (elemento.type) {5 return true6 }7 });8 console.log(all);9 if (value == 'all') {10 for (let i = 0; i < all.length; i++) {11 const singleIcon = all[i];12 let addDiv = `13 <div class=square>14 <i class="${singleIcon.family} ${singleIcon.prefix}${singleIcon.name} ${singleIcon.color}"></i>15 <span>${singleIcon.name}</span>16 </div>17 `;18 container.innerHTML += addDiv;19 }20 }21 const animal = array.filter ((elemento) => {22 if (elemento.type == 'animal') {23 return true24 }25 });26 if (value == 'animal') {27 for (let i = 0; i < animal.length; i++) {28 const singleIcon = animal[i];29 let addDiv = `30 <div class=square>31 <i class="${singleIcon.family} ${singleIcon.prefix}${singleIcon.name} ${singleIcon.color}"></i>32 <span>${singleIcon.name}</span>33 </div>34 `;35 container.innerHTML += addDiv;36 }37 }38 const vegetable = array.filter ((elemento) => {39 if (elemento.type == 'vegetable') {40 return true41 }42 });43 if (value == 'vegetable') {44 for (let i = 0; i < vegetable.length; i++) {45 const singleIcon = vegetable[i];46 let addDiv = `47 <div class=square>48 <i class="${singleIcon.family} ${singleIcon.prefix}${singleIcon.name} ${singleIcon.color}"></i>49 <span>${singleIcon.name}</span>50 </div>51 `;52 container.innerHTML += addDiv;53 }54 }55 const user = array.filter ((elemento) => {56 if (elemento.type == 'user') {57 return true58 }59 });60 if (value == 'user') {61 for (let i = 0; i < user.length; i++) {62 const singleIcon = user[i];63 let addDiv = `64 <div class=square>65 <i class="${singleIcon.family} ${singleIcon.prefix}${singleIcon.name} ${singleIcon.color}"></i>66 <span>${singleIcon.name}</span>67 </div>68 `;69 container.innerHTML += addDiv;70 }71 }72 /**73 * if (value == 'all') {74 for (let i = 0; i < array.length; i++) {75 const singleIcon = array[i];76 let addDiv = `77 <div class=square>78 <i class="${singleIcon.family} ${singleIcon.prefix}${singleIcon.name} ${singleIcon.color}"></i>79 <span>${singleIcon.name}</span>80 </div>81 `;82 container.innerHTML += addDiv;83 }84 }85 if (value == 'animal') {86 for (let i = 0; i < array.length; i++) {87 if (array[i].color == 'orange') {88 const singleIcon = array[i];89 let addDiv = `90 <div class=square>91 <i class="${singleIcon.family} ${singleIcon.prefix}${singleIcon.name} ${singleIcon.color}"></i>92 <span>${singleIcon.name}</span>93 </div>94 `;95 container.innerHTML += addDiv;96 }97 }98 }99 if (value == 'vegetable') {100 for (let i = 0; i < array.length; i++) {101 if (array[i].color == 'green') {102 const singleIcon = array[i];103 let addDiv = `104 <div class=square>105 <i class="${singleIcon.family} ${singleIcon.prefix}${singleIcon.name} ${singleIcon.color}"></i>106 <span>${singleIcon.name}</span>107 </div>108 `;109 container.innerHTML += addDiv;110 }111 }112 }113 if (value == 'user') {114 for (let i = 0; i < array.length; i++) {115 if (array[i].color == 'blue') {116 const singleIcon = array[i];117 let addDiv = `118 <div class=square>119 <i class="${singleIcon.family} ${singleIcon.prefix}${singleIcon.name} ${singleIcon.color}"></i>120 <span>${singleIcon.name}</span>121 </div>122 `;123 container.innerHTML += addDiv;124 }125 }126 }127 */128}129const categories=[130 {131 name: 'cat',132 prefix: 'fa-',133 type: 'animal',134 family: 'fas',135 color: 'orange'136 },137 {138 name: 'crow',139 prefix: 'fa-',140 type: 'animal',141 family: 'fas',142 color: 'orange'143 },144 {145 name: 'dog',146 prefix: 'fa-',147 type: 'animal',148 family: 'fas',149 color: 'orange'150 },151 {152 name: 'dove',153 prefix: 'fa-',154 type: 'animal',155 family: 'fas',156 color: 'orange'157 },158 {159 name: 'dragon',160 prefix: 'fa-',161 type: 'animal',162 family: 'fas',163 color: 'orange'164 },165 {166 name: 'horse',167 prefix: 'fa-',168 type: 'animal',169 family: 'fas',170 color: 'orange'171 },172 {173 name: 'hippo',174 prefix: 'fa-',175 type: 'animal',176 family: 'fas',177 color: 'orange'178 },179 {180 name: 'fish',181 prefix: 'fa-',182 type: 'animal',183 family: 'fas',184 color: 'orange'185 },186 {187 name: 'carrot',188 prefix: 'fa-',189 type: 'vegetable',190 family: 'fas',191 color: 'green'192 },193 {194 name: 'apple-alt',195 prefix: 'fa-',196 type: 'vegetable',197 family: 'fas',198 color: 'green'199 },200 {201 name: 'lemon',202 prefix: 'fa-',203 type: 'vegetable',204 family: 'fas',205 color: 'green'206 },207 {208 name: 'pepper-hot',209 prefix: 'fa-',210 type: 'vegetable',211 family: 'fas',212 color: 'green'213 },214 {215 name: 'user-astronaut',216 prefix: 'fa-',217 type: 'user',218 family: 'fas',219 color: 'blue'220 },221 {222 name: 'user-graduate',223 prefix: 'fa-',224 type: 'user',225 family: 'fas',226 color: 'blue'227 },228 {229 name: 'user-ninja',230 prefix: 'fa-',231 type: 'user',232 family: 'fas',233 color: 'blue'234 },235 {236 name: 'user-secret',237 prefix: 'fa-',238 type: 'user',239 family: 'fas',240 color: 'blue'241 }242];243const container = document.querySelector('.content');244const option = document.getElementById ('categories');245option.addEventListener ('click', function () {246 addIcon(categories, container, option.value);...

Using AI Code Generation

1var wpt = require('wpt');2var wpt = new WebPageTest('www.webpagetest.org');3 if (err) return console.error(err);4 console.log(data);5 wpt.getTestStatus(data.data.testId, function(err, data) {6 if (err) return console.error(err);7 console.log(data);8 });9});

Using AI Code Generation

1var wptools = require('wptools');2wptools.addDiv('testDiv', 'testDiv', 'testDiv', 'testDiv');3var wptools = require('wptools');4wptools.addDiv('testDiv', 'testDiv', 'testDiv', 'testDiv');5var wptools = require('wptools');6wptools.addDivToParent('testDiv', 'testDiv', 'testDiv', 'testDiv');7var wptools = require('wptools');8wptools.addDivToParent('testDiv', 'testDiv', 'testDiv', 'testDiv');9var wptools = require('wptools');10wptools.addDivToParentAt('testDiv', 'testDiv', 'testDiv', 'testDiv', 1);11var wptools = require('wptools');12wptools.addDivToParentAt('testDiv', 'testDiv', 'testDiv', 'testDiv', 1);13var wptools = require('wptools');14wptools.removeDiv('testDiv');15var wptools = require('wptools');16wptools.removeDiv('testDiv');

Using AI Code Generation

1var wpt = require('./wpt.js');2var wpt = new wpt('API Key');3wpt.addDiv('URL', 'div id', function(err, data) {4 if (!err) {5 console.log(data);6 }7});

Using AI Code Generation

1var wpt = require('./wpt.js');2wpt.addDiv('testDiv', 'This is a test div');3### addDiv(divId, divContent)4### addDivToBody(divId, divContent)5### addDivToElement(divId, divContent, elementId)6### addDivToElementByClass(divId, divContent, elementClass)7### addDivToElementByTag(divId, divContent, elementTag)8### addDivToElementByQuery(divId, divContent, elementQuery)9### addDivToElementByQueryAll(divId, divContent, elementQuery)10### addDivToElementByQueryAll(divId, divContent, elementQuery)11### addDivToElementByQueryAll(divId, divContent, elementQuery)12### addDivToElementByQueryAll(divId, divContent, elementQuery)13### addDivToElementByQueryAll(divId, divContent, elementQuery)14### addDivToElementByQueryAll(divId, divContent, elementQuery)15### addDivToElementByQueryAll(divId, divContent, elementQuery)16### addDivToElementByQueryAll(divId, divContent,

Using AI Code Generation

1var wpt = require('./wpt.js');2var wpt = new wpt();3wpt.addDiv('myDiv', 'hello world');4### wpt.loadScript(url, callback)5var wpt = require('./wpt.js');6var wpt = new wpt();7});8### wpt.loadStylesheet(url, callback)9var wpt = require('./wpt.js');10var wpt = new wpt();11});12### wpt.loadImage(url, callback)13var wpt = require('./wpt.js');14var wpt = new wpt();15});16### wpt.loadHTML(url, callback)17var wpt = require('./wpt.js');18var wpt = new wpt();19});20### wpt.loadJSON(url, callback)21var wpt = require('./wpt.js');22var wpt = new wpt();

Automation Testing Tutorials

Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.

LambdaTest Learning Hubs:

• JUnit Tutorial
• TestNG Tutorial
• Webdriver Tutorial
• WebDriverIO Tutorial
• Protractor Tutorial
• Selenium 4 Tutorial
• Jenkins Tutorial
• NUnit Tutorial
• Jest Tutorial
• Playwright Tutorial
• Cypress Tutorial
• PyTest Tutorial

YouTube

You could also refer to video tutorials over LambdaTest YouTube channel to get step by step demonstration from industry experts.

Run wpt automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

View sample repo View DocumentationSign up Free

›

_