diff --git a/source/class/ville/connect/Connect.js b/source/class/ville/connect/Connect.js index fe8bf8f..e6c4094 100644 --- a/source/class/ville/connect/Connect.js +++ b/source/class/ville/connect/Connect.js @@ -272,8 +272,6 @@ qx.Class.define("ville.connect.Connect", if (options.endArrow) { // Create line end shape and add it to the diagram - //var wendarrow = this._wendarrow = new qx.ui.popup.Popup(new qx.ui.layout.Grow).set({backgroundColor: options.color, anonymous: true, width: 8, height: 8, placementModeX: "direct", placementModeY: "direct"}); - //var wendarrow = this._wendarrow = new qx.ui.popup.Popup(new qx.ui.layout.Grow).set({backgroundColor: properties.backgroundColor, anonymous: true, width: 8, height: 8, placementModeX: "direct", placementModeY: "direct"}); var wendarrow = this._wendarrow = new qx.ui.core.Widget(); wendarrow.setUserData("elementtype", "connectline-endarrow"); wendarrow.setUserData("connectid", connection.id); @@ -317,6 +315,8 @@ _positionConnection : function(connection) this._wline2.setVisibility("visible"); this._wline3.setVisibility("visible"); + var endAsize = parseInt(connection.endArrowsize, 10); + var posA = this._posA = connection.elementA.getBounds(); var posB = this._posB = connection.elementB.getBounds(); var pAleft, pBleft, pAtop, pBtop; @@ -412,24 +412,22 @@ _positionConnection : function(connection) //direction arrow (UP or DOWN) if (connection.direction) { - /*var directionarrow = new qx.ui.popup.Popup(new qx.ui.layout.Grow()).set({anonymous: true, width: 8, height: 8, placementModeX: "direct", placementModeY: "direct"}); - if (pAtop < pBtop && direction == "AtoB") - directionarrow.setDecorator("dark-arrow-down"); - else if (pAtop < pBtop && direction == "BtoA") - directionarrow.setDecorator("dark-arrow-up"); - else if (pAtop > pBtop && direction == "AtoB") - directionarrow.setDecorator("dark-arrow-up"); - else if (pAtop > pBtop && direction == "BtoA") - directionarrow.setDecorator("dark-arrow-down"); - */ - this._paintarrowline (this._wline1, "vertical", pAtop, pBtop, connection.direction); - - //directionarrow.setOffsetLeft(-12); - //directionarrow.setPosition("right-middle"); - //directionarrow.setAutoHide(false); - //directionarrow.placeToWidget(this._wline1, true); - //directionarrow.show(); + } + + if (connection.endArrow) { + // set left or right decorator arrow + if (pAtop < pBtop) { + this._wendarrow.setDecorator(connection.endArrow + "-up"); + pBleft = pBleft - parseInt((endAsize)/2, 10); + pBtop = pBtop - parseInt((endAsize)/2, 10); + } + else { + this._wendarrow.setDecorator(connection.endArrow + "-down"); + pBleft = pBleft - parseInt((endAsize)/2, 10); + pBtop = pBtop - parseInt((endAsize)/2, 10); + } + this._wendarrow.setUserBounds(pBleft, pBtop, endAsize, endAsize); } } else { @@ -441,19 +439,27 @@ _positionConnection : function(connection) if (connection.direction) { this._paintarrowline (this._wline1, "horizontal", pAleft, pBleft, connection.direction); } + + if (connection.endArrow) { + // set left or right decorator arrow + if (pAleft < pBleft) { + this._wendarrow.setDecorator(connection.endArrow + "-right"); + pBleft = pBleft - parseInt((endAsize)/2, 10); + pBtop = pBtop - parseInt((endAsize)/2, 10); + } + else { + this._wendarrow.setDecorator(connection.endArrow + "-left"); + pBleft = pBleft - parseInt((endAsize)/2, 10); + pBtop = pBtop - parseInt((endAsize)/2, 10); + } + this._wendarrow.setUserBounds(pBleft, pBtop, endAsize, endAsize); + } } this._wline2.setUserBounds(pBleft, pBtop, 2, 2); this._wline3.setUserBounds(pBleft, pBtop, 2, 2); this._wline2.setVisibility("hidden"); this._wline3.setVisibility("hidden"); - if (connection.endArrow) { - this._wendarrow.setUserBounds(pBleft, pBtop, 42, 42); - // set left or right decorator arrow - if (pAleft < pBleft) - this._wendarrow.setDecorator(connection.endArrow + "-right"); - else - this._wendarrow.setDecorator(connection.endArrow + "-left"); - } + } else { // Verify point to point (diagonal line) @@ -471,13 +477,18 @@ _positionConnection : function(connection) this._wline2.setVisibility("hidden"); this._wline3.setVisibility("hidden"); if (connection.endArrow) { - this._wendarrow.setUserBounds(pBleft, pBtop, 42, 42); // set left or right decorator arrow - if (pAleft < pBleft) + if (pAleft < pBleft) { this._wendarrow.setDecorator(connection.endArrow + "-right"); - else + pBleft = pBleft - parseInt((endAsize)/2, 10); + pBtop = pBtop - parseInt((endAsize)/2, 10); + } + else { this._wendarrow.setDecorator(connection.endArrow + "-left"); - + pBleft = pBleft - parseInt((endAsize)/2, 10); + pBtop = pBtop - parseInt((endAsize)/2, 10); + } + this._wendarrow.setUserBounds(pBleft, pBtop, endAsize, endAsize); this._wendarrow.getContentElement().setStyles(transval); } } @@ -497,6 +508,21 @@ _positionConnection : function(connection) this._paintarrowline (this._wline1, "vertical", pAtop, pBtop, connection.direction); this._paintarrowline (this._wline2, "horizontal", pAleft, pBleft, connection.direction); } + + if (connection.endArrow) { + // set left or right decorator arrow + if (pAleft < pBleft) { + this._wendarrow.setDecorator(connection.endArrow + "-right"); + pBleft = pBleft - parseInt((endAsize)/2, 10); + pBtop = pBtop - parseInt((endAsize)/2, 10); + } + else { + this._wendarrow.setDecorator(connection.endArrow + "-left"); + pBleft = pBleft - parseInt((endAsize)/2, 10); + pBtop = pBtop - parseInt((endAsize)/2, 10); + } + this._wendarrow.setUserBounds(pBleft, pBtop, endAsize, endAsize); + } } else { // Find the corner's position. corner.left = pBleft; @@ -510,20 +536,26 @@ _positionConnection : function(connection) this._paintarrowline (this._wline1, "vertical", pAtop, pBtop, connection.direction); this._paintarrowline (this._wline2, "horizontal", pAleft, pBleft, connection.direction); } + + if (connection.endArrow) { + // set left or right decorator arrow + if (pAtop < pBtop) { + this._wendarrow.setDecorator(connection.endArrow + "-down"); + pBleft = pBleft - parseInt((endAsize)/2, 10); + pBtop = pBtop - parseInt((endAsize)/2, 10); + } + else { + this._wendarrow.setDecorator(connection.endArrow + "-up"); + pBleft = pBleft - parseInt((endAsize)/2, 10); + pBtop = pBtop - parseInt((endAsize)/2, 10); + } + this._wendarrow.setUserBounds(pBleft, pBtop, endAsize, endAsize); + } } //this._wline3.setUserBounds(pBleft, pBtop, 2, 2); this._wline3.setVisibility("hidden"); - if (connection.endArrow) { - this._wendarrow.setUserBounds(pBleft, pBtop, 42, 42); - // set left or right decorator arrow - if (pAleft < pBleft) - this._wendarrow.setDecorator(connection.endArrow + "-right"); - else - this._wendarrow.setDecorator(connection.endArrow + "-left"); - - this._wendarrow.getContentElement().setStyles(transval); - } + } else { // Declare connection points. @@ -548,6 +580,21 @@ _positionConnection : function(connection) this._paintarrowline (this._wline2, "vertical", pAtop, pBtop, connection.direction); this._paintarrowline (this._wline3, "horizontal", pAleft, pBleft, connection.direction); } + + if (connection.endArrow) { + // set left or right decorator arrow + if (pAtop < pBtop) { + this._wendarrow.setDecorator(connection.endArrow + "-down"); + pBleft = pBleft - parseInt((endAsize)/2, 10); + pBtop = pBtop - parseInt((endAsize)/2, 10); + } + else { + this._wendarrow.setDecorator(connection.endArrow + "-up"); + pBleft = pBleft - parseInt((endAsize)/2, 10); + pBtop = pBtop - parseInt((endAsize)/2, 10); + } + this._wendarrow.setUserBounds(pBleft, pBtop, endAsize, endAsize); + } } else { // Middle's line must be vertical. corner1.left = parseInt((pAleft + pBleft)/2, 10); @@ -566,6 +613,21 @@ _positionConnection : function(connection) this._paintarrowline (this._wline2, "horizontal", pAleft, pBleft, connection.direction); this._paintarrowline (this._wline3, "vertical", pAtop, pBtop, connection.direction); } + + if (connection.endArrow) { + // set left or right decorator arrow + if (pAleft < pBleft) { + this._wendarrow.setDecorator(connection.endArrow + "-right"); + pBleft = pBleft - parseInt((endAsize)/2, 10); + pBtop = pBtop - parseInt((endAsize)/2, 10); + } + else { + this._wendarrow.setDecorator(connection.endArrow + "-left"); + pBleft = pBleft - parseInt((endAsize)/2, 10); + pBtop = pBtop - parseInt((endAsize)/2, 10); + } + this._wendarrow.setUserBounds(pBleft, pBtop, endAsize, endAsize); + } } } //console.log(connection.anchorA); @@ -790,6 +852,8 @@ _positionConnection : function(connection) connection.anchorBoffsetTop = 0; connection.anchorBoffsetLeft = 0; //connection.direction = "none"; + connection.endArrowsize = 20; + if (options.strokeWidth) connection.radius = options.strokeWidth; if (options.anchorAposition) @@ -808,6 +872,8 @@ _positionConnection : function(connection) connection.direction = options.direction; if (options.endArrow) connection.endArrow = options.endArrow; + if (options.endArrowsize) + connection.endArrowsize = options.endArrowsize; 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 db1a0e0..04f59c4 100644 --- a/source/class/ville/connect/Decoration.js +++ b/source/class/ville/connect/Decoration.js @@ -113,7 +113,7 @@ qx.Theme.define("ville.connect.Decoration", style : { backgroundColor : "#FF00FF", - clipPath: "polygon(60% 0, 20% 50%, 60% 100%, 40% 100%, 0% 50%, 40% 0)" + clipPath: "polygon(50% 100%, 70% 100%, 40% 50%, 70% 0, 50% 0, 20% 50%)" } }, @@ -122,9 +122,28 @@ qx.Theme.define("ville.connect.Decoration", style : { backgroundColor : "#FF00FF", - clipPath: "polygon(60% 0, 100% 50%, 60% 100%, 40% 100%, 80% 50%, 40% 0)" + clipPath: "polygon(50% 100%, 30% 100%, 60% 50%, 30% 0, 50% 0, 80% 50%)" + } + }, + + "clippy-arrow-up" : + { + style : + { + backgroundColor : "#FF00FF", + clipPath: "polygon(100% 60%, 100% 80%, 50% 40%, 0 80%, 0 60%, 50% 20%)" + } + }, + + "clippy-arrow-down" : + { + style : + { + backgroundColor : "#FF00FF", + clipPath: "polygon(100% 40%, 100% 20%, 50% 60%, 0 20%, 0 40%, 50% 80%)" } } + } }); \ No newline at end of file diff --git a/source/class/wax/demo/Application.js b/source/class/wax/demo/Application.js index e471881..7aa5cef 100644 --- a/source/class/wax/demo/Application.js +++ b/source/class/wax/demo/Application.js @@ -575,8 +575,7 @@ qx.Class.define("wax.demo.Application", options : { anchorA: "point", anchorB : "point", - anchorBposition: "center-bottom", - endArrow: "clippy-arrow" + anchorBposition: "center-bottom" } }, { @@ -600,6 +599,7 @@ qx.Class.define("wax.demo.Application", villeconnect.connect(defc.elementA, defc.elementB, defc.properties, defc.options, container); } }); + /** * This is for widgets with UserBounds set at design time diff --git a/source/class/wax/demo/DiagramData.js b/source/class/wax/demo/DiagramData.js index 0360add..0319713 100644 --- a/source/class/wax/demo/DiagramData.js +++ b/source/class/wax/demo/DiagramData.js @@ -237,11 +237,12 @@ qx.Class.define("wax.demo.DiagramData", appearance : "connector" }, options : { - anchorA: "vertical", + anchorA : "vertical", anchorB : "horizontal", - anchorAposition: "center", - anchorBposition: "left-middle", - endArrow: "clippy-arrow" + anchorAposition : "center", + anchorBposition : "left-middle", + endArrow : "clippy-arrow", + endArrowsize : 42 } }, { @@ -249,22 +250,25 @@ qx.Class.define("wax.demo.DiagramData", elementB : 4, properties : {appearance : "connector"}, options : { - anchorA: "point", + anchorA : "point", anchorB : "point", - anchorAposition: "right-middle", - anchorBposition: "left-middle", - endArrow: "clippy-arrow" + anchorAposition : "right-top", + anchorBposition : "left-middle", + endArrow : "clippy-arrow", + endArrowsize : 42 } }, { elementA : 4, elementB : 5, - properties : {backgroundColor : "gray"}, + properties : {appearance : "connector"}, options : { anchorA: "horizontal", anchorB : "horizontal", anchorAposition: "right-middle", - anchorBposition: "left-middle" + anchorBposition: "left-middle", + endArrow : "clippy-arrow", + endArrowsize : 42 } }, {