I am creating a “editor” where one of the features is that the user is able to decide whether to align text on left, right, top or bottom side of a relation - using a line and a dot to “connect” to the line.
My template looks like this
return $go(go.Node, “Auto”, {
contextMenu: $go(go.Adornment)
},
new go.Binding(“position”, “”, function(v) {
return new go.Point(v.x, v.y);
}),
$go(go.Panel, “Table”,
$go(go.TextBlock,
{ font: “12pt Sans-Serif”, column: 2, row: 2 },
new go.Binding(“text”, “”, function (v) {
var value = ‘’;
for (var val in v.data) {
if(val === ‘Process Value’) {
value += v.data[val];
}
}
return value;
})),
$go(go.Shape, “Circle”, { column: 0, row: 2, width: 5, height: 5, fromSpot: go.Spot.AllSides, toSpot: go.Spot.AllSides },
new go.Binding(“portId”, “”, function (data) {
return data.align ===‘right’ ? “” : -1;
}),
new go.Binding(“visible”, “”, function (data) {
return data.align === ‘right’;
})),
$go(go.Shape, “LineH”, { width: 20, column: 1, row: 2 },
new go.Binding(“visible”, “”, function (data) {
return data.align === ‘right’;
})),
$go(go.Shape, “Circle”, { column: 4, row: 2, width: 5, height: 5, fromSpot: go.Spot.AllSides, toSpot: go.Spot.AllSides },
new go.Binding(“portId”, “”, function (data) {
return data.align === ‘left’ ? “” : -1;
}),
new go.Binding(“visible”, “”, function (data) {
return data.align === ‘left’;
})),
$go(go.Shape, “LineH”, { width: 20, column: 3, row: 2 },
new go.Binding(“visible”, “”, function (data) {
return data.align === ‘left’;
})),
$go(go.Shape, “Circle”, { column: 2, row: 0, width: 5, height: 5, fromSpot: go.Spot.AllSides, toSpot: go.Spot.AllSides },
new go.Binding(“portId”, “”, function (data) {
return data.align ===‘top’ ? “” : -1;
}),
new go.Binding(“visible”, “”, function (data) {
return data.align === ‘top’;
})),
$go(go.Shape, “LineV”, { height: 20, column: 2, row: 1 },
new go.Binding(“visible”, “”, function (data) {
return data.align === ‘top’;
})),
$go(go.Shape, “Circle”, { column: 2, row: 4, width: 5, height: 5, fromSpot: go.Spot.AllSides, toSpot: go.Spot.AllSides },
new go.Binding(“portId”, “”, function (data) {
return data.align ===‘bottom’ ? “” : -1;
}),
new go.Binding(“visible”, “”, function (data) {
return data.align === ‘bottom’;
})),
$go(go.Shape, “LineV”, { height: 20, column: 2, row: 3 },
new go.Binding(“visible”, “”, function (data) {
return data.align === ‘bottom’;
}))
))
},
and my update logic looks like this
}).success(function (node) {
var model = diagram.diagram.model;
<span =“Apple-tab-span” style=“white-space:pre”> var item = model.findNodeDataForKey(node.key);
model.setDataProperty(item, “align”, node.align);
model.updateTargetBindings(item);
}
This works for all changes except from the one called ‘right’. When i change to right the node itself is becoming the port. When i refresh the whole view and its getting rendered with these new settings everything is working and the ‘dot’ is considered a port again.
Adding a picture showing two nodes where both where aligned left, and then after the display is rendered the bottom one is realigned to right - but the “port” information is gone and the node itself has become the port. (this is working for all other scenarios)
