Skip to content

Commit

Permalink
added start arrow
Browse files Browse the repository at this point in the history
  • Loading branch information
@sqville
sqville committed Mar 9, 2024
1 parent 19001d9 commit d44d942
Show file tree
Hide file tree
Showing 4 changed files with 130 additions and 20 deletions.
1 change: 0 additions & 1 deletion source/class/ville/connect/Appearance.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@ qx.Theme.define("ville.connect.Appearance",
return {
backgroundColor : "transparent",
padding : 0,
decorator : "connector-dashed",
zIndex: 9
};
}
Expand Down
82 changes: 82 additions & 0 deletions source/class/ville/connect/Connect.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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"));
Expand Down Expand Up @@ -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;
Expand All @@ -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;
Expand Down
23 changes: 17 additions & 6 deletions source/class/ville/connect/Decoration.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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" :
{
Expand Down
44 changes: 31 additions & 13 deletions source/class/wax/demo/DiagramData.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -149,7 +149,7 @@ qx.Class.define("wax.demo.DiagramData",
{
id : 3,
left : 300,
top : 50,
top : 30,
properties : {},
options : {
content : "Router",
Expand All @@ -159,7 +159,7 @@ qx.Class.define("wax.demo.DiagramData",
{
id : 4,
left : 500,
top : 150,
top : 170,
properties : {},
options : {
content : "ISP",
Expand All @@ -168,7 +168,7 @@ qx.Class.define("wax.demo.DiagramData",
},
{
id : 5,
left : 700,
left : 750,
top : 70,
properties : {},
options : {
Expand Down Expand Up @@ -221,52 +221,70 @@ 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
}
},
{
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
}
},
{
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
}
Expand Down

0 comments on commit d44d942

Please sign in to comment.