123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112 |
- ;(function() {
-
- window.jsPlumbDemo = {
-
- init : function() {
-
- jsPlumb.Defaults.Container = $("body");
- jsPlumb.bind("click", function(conn) {
- jsPlumb.detach(conn);
- jsPlumb.removeEndpoint(conn.target, conn.endpoints[1]);
- });
-
- jsPlumb.draggable($("#window1,#window3,#window4,#window5"));
-
- var dropOptions = { hoverClass:"hover", activeClass:"active" };
-
- jsPlumb.Defaults.EndpointStyle = {fillStyle:"#E5E529"};
- jsPlumb.Defaults.PaintStyle = {
- lineWidth:4,
- strokeStyle:"#E5E529",
- outlineColor:"#FFFFD1",
- outlineWidth:2
- };
- jsPlumb.Defaults.HoverPaintStyle = {
- lineWidth:4,
- strokeStyle:"pink"
- };
- jsPlumb.Defaults.EndpointHoverStyle = {
- fillStyle:"pink"
- };
-
- //
- // makes window1 into a connection target, specifying that any connections made to window1 will be given
- // a dynamic anchor that has positions at each of the div's corners.
- //
- jsPlumb.makeTarget("window1", {
- endpoint:{
- anchor:["TopLeft", "TopRight", "BottomRight", "BottomLeft"]//,
- //paintStyle:endpointStyle
- },
- dropOptions:dropOptions
- });
-
- //
- // makes window3 into a connection target, specifying that connections made to window3 will have an anchor that
- // is located at the position on window3 at which the mouseup event occurred.
- //
- // note that the mechanism used to realise this anchor definition, and the "Grid" one below, will be refactored
- // before jsplumb 1.3.4 is released. the code needs a cleanup, and i'm going to add support for pluggable
- // anchor definitions, allowing people to implement their own.
- //
- jsPlumb.makeTarget("window3", {
- endpoint:{
- anchor:[ "Assign", {
- orientation:[0, 1],
- position:"Fixed"
- } ]
- },
- dropOptions:dropOptions
- });
-
- //
- // makes window4 into a connection target, specifying that connections made to window3 will have an anchor that
- // is located on a 2x3 grid.
- //
- // note that the mechanism used to realise this anchor definition, and the "Fixed" one above, will be refactored
- // before jsplumb 1.3.4 is released. the code needs a cleanup, and i'm going to add support for pluggable
- // anchor definitions, allowing people to implement their own.
- //
- jsPlumb.makeTarget("window4", {
- endpoint:{
- anchor:[ "Assign", {
- position:"Grid",
- grid:[2,3],
- orientation:[0, 1]
- } ]
- },
- dropOptions:dropOptions
- });
-
- //
- // the most basic makeSource call you can make. will use the defaults for everything - endpoint, anchor,
- // endpoint/connector styles, etc. in this demo we have setup defaults for endpoint style and for connector
- // style.
- //
- // note that this div - window2 - is not draggable. this is because it is acting as a connection source, and
- // dragging on this div means create a new connection. see the example below for an alternative to this.
- //
- jsPlumb.makeSource("window2");
-
- //
- // a more advanced makeSource call: in this one we specify a div we want to use for a connection source,
- // and we provide the 'parent' parameter, which tells jsPlumb that once a connection has been established it
- // should move the source endpoint to that element.
- //
- // also in this call we have specified our own endpoint definition, anchor definition, and connector style.
- // the anchor definition is used by jsPlumb after a successful connection has been made. in conjunction with the
- // 'parent' parameter on this call, it means that connections will be attached to "window5" using the default
- // 'dynamic' anchor, ie. the one that has TopCenter, RightMiddle, BottomCenter and LeftMiddle positions.
- // for the anchor here you can provide any valid anchor definition.
- //
- jsPlumb.makeSource($("#w5Source"), {
- endpoint:{
- anchor:"Continuous"
- },
- parent:"window5"
- });
- }
- };
-
- })();
|