Skip to content

Commit

Permalink
Completed end arrow logic
Browse files Browse the repository at this point in the history
  • Loading branch information
@sqville
sqville committed Mar 8, 2024
1 parent 2ea3569 commit 0a87272
Show file tree
Hide file tree
Showing 4 changed files with 144 additions and 55 deletions.
148 changes: 107 additions & 41 deletions source/class/ville/connect/Connect.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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 {
Expand All @@ -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)
Expand All @@ -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);
}
}
Expand All @@ -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;
Expand All @@ -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.
Expand All @@ -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);
Expand All @@ -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);
Expand Down Expand Up @@ -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)
Expand All @@ -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;
Expand Down
23 changes: 21 additions & 2 deletions source/class/ville/connect/Decoration.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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%)"
}
},

Expand All @@ -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%)"
}
}


}
});
4 changes: 2 additions & 2 deletions source/class/wax/demo/Application.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -575,8 +575,7 @@ qx.Class.define("wax.demo.Application",
options : {
anchorA: "point",
anchorB : "point",
anchorBposition: "center-bottom",
endArrow: "clippy-arrow"
anchorBposition: "center-bottom"
}
},
{
Expand All @@ -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
Expand Down
24 changes: 14 additions & 10 deletions source/class/wax/demo/DiagramData.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -237,34 +237,38 @@ 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
}
},
{
elementA : 3,
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
}
},
{
Expand Down

0 comments on commit 0a87272

Please sign in to comment.