Spot alignment in Network Config

[yonghan]

Hi,
the new version 1.2beta1 is amazing.
I read ‘Network Config’ and tested.
HBar links are perfect.
But there are some issues.
When I define custom spots with alignment Left,Right,Top, Bottom (4 spots),
then spots alignment is ignored. actually forcefully Center applied by code.

black links are Network Config + link resegmentabled.
red lines are my expected result.

two read circles are go.Spot.Right and go.Spot.Bottom assigned. but the results are
go.Spot.Center.

Let me know how to keep assigned spot alignment.

One more question.
Can apply the JumpGap to HBar?

Thanks.
Regards
Yonghan Yoon

[simon]

Can I see your code for the red circles?

[simon]

Looking at the image, it appears that on the red circles and blue squares, you have set the GraphObject.alignment property to place them within the panel. The GraphObject.alignment and GraphObject.alignmentFocus are for arranging the GraphObject (Shape) within a Panel.

If you want to change the direction that Links are connected, you must set the GraphObject.fromSpot and GraphObject.toSpot properties.

[walter]

Furthermore, I think that the custom link that that sample uses in its link template ignores port spots. So you might need to use a different link template.

[yonghan]

Hi, Walter.

Thank you for your answer.

Can you show me How to get assigned spot?

I think I might be work if getLinkPoint return assigned spot point
and getLinkDirection return angle.

But I don’t know how to get assigned spot before getDocumentPoint.
Is it right what I’m thinking?
var aspot = GET_ASSIGNED_SPOT(); // ???
var op = otherport.getDocumentPoint(aspot);

Here are sample code:

var brush_hex1 = $(go.Brush, go.Brush.Linear, { 0: “#F28226”, 1: “#71BFD2” });
var geom_hex1 = “F M 1,24.879627 C 1,13.833471 9.954669,4.8789997 21.000755,4.8789997 32.045586,4.8789997 41,13.833471 41,24.879627 l 0,0 C 41,35.924526 32.045586,44.878998 21.000755,44.878998 9.954669,44.878998 1,35.924526 1,24.879627 z m 0.00819,0.03099 20.0668205,0.17454 19.860933,-0.2203 M 21.088835,4.9966982 l -0.0055,6.1604398 -0.02013,33.426182”;

<span =“apple-tab-span”="" style=“white-space:pre”> myDiagram.nodeTemplateMap.add(“HeatExchanger01”,
$(go.Node, go.Panel.Auto,
{ locationSpot : go.Spot.Center,
locationObjectName : “SHAPE”, selectionAdorned: false,
resizeObjectName : “SHAPE”, resizable : true,
rotateObjectName : “SHAPE”, rotatable : true,
},
new go.Binding(“location”, “loc”, go.Point.parse).makeTwoWay(go.Point.stringify),
$(go.Panel, go.Panel.Table,
$(go.Panel, go.Panel.Table,
$(go.RowColumnDefinition, {column: 0, row: 1, alignment: go.Spot.Left}),
$(go.RowColumnDefinition, {column: 1, row: 0, alignment: go.Spot.Top}),
$(go.RowColumnDefinition, {column: 2, row: 1, alignment: go.Spot.Right}),
$(go.RowColumnDefinition, {column: 1, row: 2, alignment: go.Spot.Bottom}),
$(go.Shape,
{ geometryString: geom_hex1,
fill: brush_hex1,
name: “SHAPE”, width: 48, height: 48,
stroke: “#000”, strokeWidth: 1,
portId: “”, fromLinkable: true, toLinkable: true,
cursor: “pointer”,
column: 0, row: 0, columnSpan: 2, rowSpan: 2, width: 48, height: 48},
new go.Binding(“desiredSize”, “size”, go.Size.parse).makeTwoWay(go.Size.stringify)),
$(go.Panel, go.Panel.Horizontal, { column: 0, row: 1 }, $(go.Shape, { width: 8, height: 8, figure: “Rectangle”, fill: “blue”, portId: “P_IN01”, toSpot: go.Spot.Left, toLinkable: true,toMaxLinks: 1})),
$(go.Panel, go.Panel.Horizontal, { column: 1, row: 0 }, $(go.Shape, { width: 8, height: 8, figure: “Rectangle”, fill: “blue”, portId: “P_IN02”, toSpot: go.Spot.Top, toLinkable: true,toMaxLinks: 1})),
$(go.Panel, go.Panel.Horizontal, { column: 2, row: 1 }, $(go.Shape, { width: 8, height: 8, figure: “Ellipse”, fill: “red”, portId: “P_OUT01”, fromSpot: go.Spot.Right, fromLinkable: true,fromMaxLinks: 1}))),
$(go.Panel, go.Panel.Horizontal, { column: 1, row: 2 }, $(go.Shape, { width: 8, height: 8, figure: “Ellipse”, fill: “red”, portId: “P_OUT02”, fromSpot: go.Spot.Bottom, fromLinkable: true,fromMaxLinks: 1})))
),
$(go.TextBlock,
{ alignment: go.Spot.Center,
wrap: go.TextBlock.WrapFit, textAlign: “center”,
editable: true, font: font_small, text: “HEX” },
{ column: 0, row: 1 },
new go.Binding(“text”, “text”).makeTwoWay())
)
));

[walter]

If you want to get the link point for the standard behavior, try calling the base method:

var pt = go.Link.prototype.getLinkPoint.call(this, node, port, spot, from, ortho, othernode, otherport);

[yonghan]

Thanks, the base method call is working!!!

But, I got a new problem.

If the ‘Export from EXG1’ were rotated 180,
then Left aligned toSpot remains go.Spot.Left.
How to set toSopt alignment when rotating?

Sample Code :
var brush_exp = $(go.Brush, go.Brush.Linear, { 0.: “#E1E8EF”, 1: “#365881” });
var geom_exp = “F M0,5 L26,5 L26,0 L36,12 L26,24 L26,19 L0,19 z”;

myDiagram.nodeTemplateMap.add(“Export01”,
$(go.Node, go.Panel.Auto, {
locationSpot : go.Spot.Center,
locationObjectName : “SHAPE”, selectionAdorned: false,
resizeObjectName : “SHAPE”, resizable : true,
rotateObjectName : “SHAPEWithPort”, rotatable : true },
new go.Binding(“location”, “loc”, go.Point.parse).makeTwoWay(go.Point.stringify),
$(go.Panel, go.Panel.Table,
$(go.Panel, go.Panel.Table, { name: “SHAPEWithPort” },
new go.Binding(“angle”, “angle”).makeTwoWay(),
$(go.RowColumnDefinition, {column: 0, alignment: go.Spot.Left}),
$(go.Shape,
{ geometryString : geom_exp,
fill : brush_exp,
name: “SHAPE”, width: 48, height: 48,
stroke: “#000”, strokeWidth : 1,
column: 0, row: 0, columnSpan: 1, rowSpan: 1, width: 64, height: 48 },
new go.Binding(“desiredSize”, “size”, go.Size.parse).makeTwoWay(go.Size.stringify)),
$(go.Panel, go.Panel.Horizontal, {column: 0, row: 0 }, $(go.Shape, { width: 8, height: 8, figure: “Rectangle”, fill: “blue”, portId: “P_IN01”, toSpot: go.Spot.Left, toLinkable: true, toMaxLinks: 1}))
),
$(go.TextBlock,
{ alignment: go.Spot.Center,
wrap: go.TextBlock.WrapFit, textAlign: “center”,
editable: true, font: font_small, text: “Export”,
row: 1, alignment: go.Spot.Center },
new go.Binding(“text”, “text”).makeTwoWay())
)
));

thanks

[walter]

Try setting fromEndSegmentDirection on either the Link or the port GraphObject.

[yonghan]

I have no idea.
fromEndSegmentDirection doesn’t work either Link or port GraphObject.
Can you check my test code?

1) linkTemplate from ‘Network Config’ sample

myDiagram.linkTemplate =
$(//go.Link,
BarLink, // the whole link panel
{ reshapable: true,
routing: go.Link.Orthogonal,
curve: go.Link.JumpGap,
adjusting: go.Link.Stretch,
relinkableFrom: true,
fromEndSegmentDirection: go.Node.DirectionRotatedNodeOrthogonal,
toEndSegmentDirection: go.Node.DirectionRotatedNodeOrthogonal,
relinkableTo: true }, // optional
new go.Binding(“points”, “points”).makeTwoWay(),
$(go.Shape, // the link path shape
{ isPanelMain: true, stroke: “black”, strokeWidth: 1, }),
$(go.Shape, // the arrowhead
{ toArrow: “standard”, stroke: null, fill: “black”, }),
$(go.Panel, go.Panel.Auto,
{ visible: false, name: “LABEL”, segmentIndex: 4, segmentFraction: 0.5, },
new go.Binding(“visible”, “visible”).makeTwoWay(),
$(go.Shape, “RoundedRectangle”, // the link shape
{ fill: “#F8F8F8”, stroke: null }),
$(go.TextBlock, “Yes”,
{ textAlign: “center”,
font: font_small,
stroke: “#919191”, margin: 2, editable: true },
new go.Binding(“text”, “text”).makeTwoWay())
)
);

2. rotatable Node

myDiagram.nodeTemplateMap.add(“Export01”,
$(go.Node, go.Panel.Auto, {
locationSpot : go.Spot.Center,
locationObjectName : “SHAPE”, selectionAdorned: false,
resizeObjectName : “SHAPE”, resizable : true,
rotateObjectName : “SHAPEWithPort”, rotatable : true },
new go.Binding(“location”, “loc”, go.Point.parse).makeTwoWay(go.Point.stringify),
$(go.Panel, go.Panel.Table,
$(go.Panel, go.Panel.Table, { name: “SHAPEWithPort” },
new go.Binding(“angle”, “angle”).makeTwoWay(),
$(go.RowColumnDefinition, {column: 0, alignment: go.Spot.Left}),
$(go.Shape,
{ geometryString : geom_exp,
fill : brush_exp,
name: “SHAPE”, width: 48, height: 48,
stroke: “#000”, strokeWidth : 1,
column: 0, row: 0, columnSpan: 1, rowSpan: 1, width: 64, height: 48 },
new go.Binding(“desiredSize”, “size”, go.Size.parse).makeTwoWay(go.Size.stringify)),
$(go.Panel, go.Panel.Horizontal, {column: 0, row: 0 },
$(go.Shape, { width: 8, height: 8, figure: “Rectangle”, fill: “blue”,
portId: “P_IN01”,
toSpot: go.Spot.Left,
toLinkable: true,
toMaxLinks: 1,
toEndSegmentDirection: go.Node.DirectionRotatedNode}))
),
$(go.TextBlock,
{ alignment: go.Spot.Center,
wrap: go.TextBlock.WrapFit, textAlign: “center”,
editable: true, font: font_small, text: “Export”,
row: 1, alignment: go.Spot.Center },
new go.Binding(“text”, “text”).makeTwoWay())
)
));

[frode]

I have a similar problem where fromEndSegmentDirection and toEndSegmentDirection does not work.

It seems to me that if i rotate the complete node, without setting any rotateObjectName, this works fine.

HOWEVER if I only want to rotate part of the node. Like the Panel in the example above (rotateObjectName : “SHAPEWithPort”)
Then the segment directions are not rotated with the ports in the rotated panel.

Does any one know how to make this work without rotating the complete node?

[walter]

Have you tried using the latest released version? We recently fixed a bug relating to rotated nodes and linking, and I wonder if this is the same problem.

[frode]

I just upgraded from 1.2.2 to 1.2.3 which is the latest version. And the problem is still the same.

[walter]

OK, we will look into this later today.

[walter]

Ah, yes, that’s a bug. Thanks for reporting it. We’ll fix it for version 1.2.4, which I hope we can release today or tomorrow.

[simon]

1.2.4 has been released: GoJS - Build Interactive Diagrams for the Web

[frode]

Thank you.
Now it works well