diff --git a/source/class/ville/connect/Appearance.js b/source/class/ville/connect/Appearance.js index 2818613..28e3df9 100644 --- a/source/class/ville/connect/Appearance.js +++ b/source/class/ville/connect/Appearance.js @@ -21,7 +21,6 @@ qx.Theme.define("ville.connect.Appearance", return { backgroundColor : "transparent", padding : 0, - decorator : "connector-dashed", zIndex: 9 }; } diff --git a/source/class/ville/connect/Connect.js b/source/class/ville/connect/Connect.js index ec43303..0cb6871 100644 --- a/source/class/ville/connect/Connect.js +++ b/source/class/ville/connect/Connect.js @@ -279,6 +279,16 @@ qx.Class.define("ville.connect.Connect", wline3.setUserData("endArrow", wendarrow); appobj.add(wendarrow); } + + if (options.startArrow) { + // Create line end shape and add it to the diagram + var wstartarrow = this._wstartarrow = new qx.ui.core.Widget(); + wstartarrow.setUserData("elementtype", "connectline-endarrow"); + wstartarrow.setUserData("connectid", connection.id); + wstartarrow.setUserData("elementA", elementA); + wline1.setUserData("startArrow", wstartarrow); + appobj.add(wstartarrow); + } // Position connection. this._positionConnection(connection); @@ -316,6 +326,7 @@ _positionConnection : function(connection) this._wline3.setVisibility("visible"); var endAsize = parseInt(connection.endArrowsize, 10); + var startAsize = parseInt(connection.startArrowsize, 10); var posA = this._posA = connection.elementA.getBounds(); var posB = this._posB = connection.elementB.getBounds(); @@ -524,6 +535,22 @@ _positionConnection : function(connection) } this._wendarrow.setUserBounds(pBleft, pBtop, endAsize, endAsize); } + + if (connection.startArrow) { + // set left or right decorator arrow + if (pAtop < pBtop) { + this._wstartarrow.setDecorator(connection.startArrow + "-up"); + pAleft = pAleft - parseInt((startAsize)/2, 10); + pAtop = pAtop - parseInt((startAsize)/2, 10); + } + else { + this._wstartarrow.setDecorator(connection.startArrow + "-down"); + pAleft = pAleft - parseInt((startAsize)/2, 10); + pAtop = pAtop - parseInt((startAsize)/2, 10); + } + this._wstartarrow.setUserBounds(pAleft, pAtop, startAsize, startAsize); + } + } else { // Find the corner's position. corner.left = pBleft; @@ -552,6 +579,22 @@ _positionConnection : function(connection) } this._wendarrow.setUserBounds(pBleft, pBtop, endAsize, endAsize); } + + if (connection.startArrow) { + // set left or right decorator arrow + if (pAleft < pBleft) { + this._wstartarrow.setDecorator(connection.startArrow + "-left"); + pAleft = pAleft - parseInt((startAsize)/2, 10); + pAtop = pAtop - parseInt((startAsize)/2, 10); + } + else { + this._wstartarrow.setDecorator(connection.startArrow + "-right"); + pAleft = pAleft - parseInt((startAsize)/2, 10); + pAtop = pAtop - parseInt((startAsize)/2, 10); + } + this._wstartarrow.setUserBounds(pAleft, pAtop, startAsize, startAsize); + } + } //this._wline3.setUserBounds(pBleft, pBtop, 2, 2); @@ -596,6 +639,22 @@ _positionConnection : function(connection) } this._wendarrow.setUserBounds(pBleft, pBtop, endAsize, endAsize); } + + if (connection.startArrow) { + // set left or right decorator arrow + if (pAtop < pBtop) { + this._wstartarrow.setDecorator(connection.startArrow + "-up"); + pAleft = pAleft - parseInt((startAsize)/2, 10); + pAtop = pAtop - parseInt((startAsize)/2, 10); + } + else { + this._wstartarrow.setDecorator(connection.startArrow + "-down"); + pAleft = pAleft - parseInt((startAsize)/2, 10); + pAtop = pAtop - parseInt((startAsize)/2, 10); + } + this._wstartarrow.setUserBounds(pAleft, pAtop, startAsize, startAsize); + } + } else { // Middle's line must be vertical. corner1.left = parseInt((pAleft + pBleft)/2, 10); @@ -629,6 +688,22 @@ _positionConnection : function(connection) } this._wendarrow.setUserBounds(pBleft, pBtop, endAsize, endAsize); } + + if (connection.startArrow) { + // set left or right decorator arrow + if (pAleft < pBleft) { + this._wstartarrow.setDecorator(connection.startArrow + "-left"); + pAleft = pAleft - parseInt((startAsize)/2, 10); + pAtop = pAtop - parseInt((startAsize)/2, 10); + } + else { + this._wstartarrow.setDecorator(connection.startArrow + "-right"); + pAleft = pAleft - parseInt((startAsize)/2, 10); + pAtop = pAtop - parseInt((startAsize)/2, 10); + } + this._wstartarrow.setUserBounds(pAleft, pAtop, startAsize, startAsize); + } + } } //console.log(connection.anchorA); @@ -824,6 +899,8 @@ _positionConnection : function(connection) this._wline3 = arrlines[i]; if (this._wline3.getUserData("endArrow")) this._wendarrow = this._wline3.getUserData("endArrow"); + if (this._wline1.getUserData("startArrow")) + this._wstartarrow = this._wline1.getUserData("startArrow"); //set up connection var conn = this._createConnectionObject(arrlines[i].getUserData("elementA"), arrlines[i].getUserData("elementB"), arrlines[i].getUserData("properties"), arrlines[i].getUserData("options")); @@ -854,6 +931,7 @@ _positionConnection : function(connection) connection.anchorBoffsetLeft = 0; //connection.direction = "none"; connection.endArrowsize = 20; + connection.startArrowsize = 20; if (options.strokeWidth) connection.radius = options.strokeWidth; @@ -875,6 +953,10 @@ _positionConnection : function(connection) connection.endArrow = options.endArrow; if (options.endArrowsize) connection.endArrowsize = options.endArrowsize; + if (options.startArrow) + connection.startArrow = options.startArrow; + if (options.startArrowsize) + connection.startArrowsize = options.startArrowsize; connection.anchorA = options.anchorA; connection.anchorB = options.anchorB; diff --git a/source/class/ville/connect/Decoration.js b/source/class/ville/connect/Decoration.js index 04f59c4..8514ffa 100644 --- a/source/class/ville/connect/Decoration.js +++ b/source/class/ville/connect/Decoration.js @@ -18,24 +18,35 @@ qx.Theme.define("ville.connect.Decoration", { decorations : { - "connector-blank" : + "connector-start" : { style : { - radius : 50 + radius : 50, + color : "#FF00FF", + width : 6 } }, - "connector-dashed" : + "connector-solid" : { + include : "connector-start", + style : { - radius : 50, - color : "#FF00FF", - width : 6, style : "solid" } }, + + "connector-dashed" : + { + include : "connector-start", + + style : + { + style : "dashed" + } + }, "chevron-down" : { diff --git a/source/class/wax/demo/DiagramData.js b/source/class/wax/demo/DiagramData.js index 0319713..377c583 100644 --- a/source/class/wax/demo/DiagramData.js +++ b/source/class/wax/demo/DiagramData.js @@ -149,7 +149,7 @@ qx.Class.define("wax.demo.DiagramData", { id : 3, left : 300, - top : 50, + top : 30, properties : {}, options : { content : "Router", @@ -159,7 +159,7 @@ qx.Class.define("wax.demo.DiagramData", { id : 4, left : 500, - top : 150, + top : 170, properties : {}, options : { content : "ISP", @@ -168,7 +168,7 @@ qx.Class.define("wax.demo.DiagramData", }, { id : 5, - left : 700, + left : 750, top : 70, properties : {}, options : { @@ -221,26 +221,34 @@ qx.Class.define("wax.demo.DiagramData", elementA : 1, elementB : 2, properties : { - appearance : "connector" + appearance : "connector", + decorator : "connector-solid" }, options : { anchorA: "vertical", anchorB : "horizontal", anchorAposition: "center-bottom", - anchorBposition: "left-middle" + anchorBposition: "left-middle", + startArrow : "clippy-arrow", + startArrowsize : 42, + endArrow : "clippy-arrow", + endArrowsize : 42 } }, { elementA : 2, elementB : 3, properties : { - appearance : "connector" + appearance : "connector", + decorator : "connector-solid" }, options : { anchorA : "vertical", anchorB : "horizontal", - anchorAposition : "center", + anchorAposition : "center-top", anchorBposition : "left-middle", + startArrow : "clippy-arrow", + startArrowsize : 42, endArrow : "clippy-arrow", endArrowsize : 42 } @@ -248,12 +256,17 @@ qx.Class.define("wax.demo.DiagramData", { elementA : 3, elementB : 4, - properties : {appearance : "connector"}, + properties : { + appearance : "connector", + decorator : "connector-dashed" + }, options : { - anchorA : "point", - anchorB : "point", - anchorAposition : "right-top", - anchorBposition : "left-middle", + anchorA : "horizontal", + anchorB : "vertical", + anchorAposition : "right-middle", + anchorBposition : "center-top", + startArrow : "clippy-arrow", + startArrowsize : 42, endArrow : "clippy-arrow", endArrowsize : 42 } @@ -261,12 +274,17 @@ qx.Class.define("wax.demo.DiagramData", { elementA : 4, elementB : 5, - properties : {appearance : "connector"}, + properties : { + appearance : "connector", + decorator : "connector-dashed" + }, options : { anchorA: "horizontal", anchorB : "horizontal", anchorAposition: "right-middle", anchorBposition: "left-middle", + startArrow : "clippy-arrow", + startArrowsize : 42, endArrow : "clippy-arrow", endArrowsize : 42 }