javascript - Using jsPlumb with dynamic content -
ill try user jsplumb:flowchart within mysql based dynamic content.
my code based on demo example flowchart:jquery
im generating endpoints within database query
$plumb .= '_addendpoints("drag'.$id_kurs.'", ["topcenter", "bottomcenter", "leftmiddle", "rightmiddle"]); and im adding content @ end of database content
$vorschau .= ' </div> </div> <script> jsplumb.ready(function() { var instance = jsplumb.getinstance({ dragoptions : { cursor: "pointer", zindex:2000 }, connectionoverlays : [ [ "arrow", { location:1 } ], [ "label", { location:0.5, id:"label", cssclass:"alabel" }] ], }); var connectorpaintstyle = { linewidth:2, strokestyle:"#db0018", joinstyle:"round", outlinecolor:"white", outlinewidth:1 }, // .. , hover style. connectorhoverstyle = { linewidth:2, strokestyle:"#000000", outlinewidth:1, outlinecolor:"white" }, endpointhoverstyle = { fillstyle:"#000000", strokestyle:"#db0019" }, sourceendpoint = { endpoint:["rectangle",{ width:18, height:18}], paintstyle:{ fillstyle:"#db0013" }, maxconnections:999, issource:true, istarget:true, connector:[ "flowchart", { stub:[40, 60], gap:10, cornerradius:5, alwaysrespectstubs:true } ], connectorstyle:connectorpaintstyle, hoverpaintstyle:endpointhoverstyle, connectorhoverstyle:connectorhoverstyle, dragoptions:{} }, init = function(connection) { connection.getoverlay("label").setlabel(connection.sourceid.substring(15) + "-" + connection.targetid.substring(15)); connection.bind("editcompleted", function(o) { if (typeof console != "undefined") console.log("connection edited. path ", o.path); }); }; var _addendpoints = function(toid, sourceanchors, targetanchors) { (var = 0; < sourceanchors.length; i++) { var sourceuuid = toid + sourceanchors[i]; instance.addendpoint("flowchart" + toid, sourceendpoint, { anchor:sourceanchors[i], uuid:sourceuuid }); } }; instance.dowhilesuspended(function() { '.$plumb.' instance.bind("connection", function(conninfo, originalevent) { init(conninfo.connection); }); instance.bind("click", function(conn, originalevent) { if (confirm("delete connection " + conn.sourceid + " " + conn.targetid + "?")) jsplumb.detach(conn); }); instance.bind("connectiondrag", function(connection) { console.log("connection " + connection.id + " being dragged. suspendedelement ", connection.suspendedelement, " of type ", connection.suspendedelementtype); }); instance.bind("connectiondragstop", function(connection) { console.log("connection " + connection.id + " dragged"); }); instance.bind("connectionmoved", function(params) { console.log("connection " + params.connection.id + " moved"); }); }); }); </script>'; all of within function
the html/css structure showing correctly wont show endpoints.
have included needed js/css files, said im using demo basement code.
my error message:
typeerror: el null
...fsettop, op = (relativetoroot || (container != null && el.offsetparent != conta...
the line within dom-adapter error relating to:
var l = el.offsetleft, t = el.offsettop, op = (relativetoroot || (container != null && el.offsetparent != container)) ? el.offsetparent : null;
the code in question contains function & variable definitions, no executions create endpoints/connections.
as visible in source code of jsplumb demo : https://jsplumbtoolkit.com/demo/home/demo.js
the connect calls missing.
var connection1 = instance.connect({ source:"window1", target:"window2", connector:["bezier", { curviness:70 }], cssclass:"c1", endpoint:"blank", endpointclass:"c1endpoint", ...}); these calls missing, used in demo create connections & render corresponding endpoints.
Comments
Post a Comment