When you drag the Record1 node, the links of the child nodes of Record1 are relinked from right to left.
However, the link from Record1 to Record2 will not be relinked, and from Spot will be linked to the Top or Bottom of Record1.
Please let me know what I did wrong.
below is the code…
diagram =
$(go.Diagram, divNm,
{
initialContentAlignment: go.Spot.Center,
validCycle: go.Diagram.CycleNotDirected, // don't allow loops
"grid": $(go.Panel, go.Panel.Grid,
{ gridCellSize: new go.Size(30, 30) },
$(go.Shape, "LineH", { stroke: "gray", interval: 1, strokeWidth: 1.0, strokeDashArray: [1, 30] })
// $(go.Shape, "LineV", { stroke: "gray", interval: 1, strokeWidth: 1, strokeDashArray: [1, 30] })
),
"grid.visible": true,
"ModelChanged": function(e) {
if (e.isTransactionFinished)
;
},
"undoManager.isEnabled": true
});
diagram.toolManager.dragSelectingTool.isPartialInclusion = true;
diagram.toolManager.dragSelectingTool.delay = 50;
diagram.toolManager.dragSelectingTool.box =
$(go.Part,
{
layerName: "Tool",
selectable: false
},
$(go.Shape,
{ name: "SHAPE", fill: "rgba(119,136,153,0.1)",
stroke: "steelblue", strokeWidth: 1 }
)
);
function findAllSelectedNodes() {
var items = [];
for (var nit = diagram.nodes; nit.next(); ) {
var node = nit.value;
var table = node.findObject("LIST");
if (table) {
for (var iit = table.elements; iit.next(); ) {
var itempanel = iit.value;
if (itempanel.background !== "transparent") items.push(itempanel);
}
}
}
return items;
}
var highlightLinkColor = "red";
diagram.click = function(e) {
//diagram.startTransaction("no highlighteds");
var oldskips = diagram.skipsUndoManager;
diagram.skipsUndoManager = true;
diagram.clearHighlighteds();
var items = findAllSelectedNodes();
if(items.length > 0)
{
for (var i = 0; i < items.length; i++)
{
items[i].background = "transparent";
}
}
//diagram.commitTransaction("no highlighteds");
diagram.skipsUndoManager = oldskips;
};
var fieldTemplate =
$(go.Panel, "TableRow",
new go.Binding("portId", "name"),
{
background: "transparent",
stretch: go.GraphObject.Horizontal,
fromSpot: go.Spot.LeftRightSides,
toSpot: go.Spot.LeftRightSides,
fromLinkableSelfNode: true,
fromLinkableDuplicates: true,
toLinkable: true,
toLinkableSelfNode: true,
toLinkableDuplicates: true,
cursor: "pointer"
},
{
click: function(e, item) {
var oldskips = item.diagram.skipsUndoManager;
item.diagram.skipsUndoManager = true;
var items = findAllSelectedNodes();
if(items.length > 0) {
for (var i = 0; i < items.length; i++) {
items[i].background = "transparent";
}
}
if (item.background === "transparent") {
item.background = "dodgerblue";
} else {
item.background = "transparent";
}
showConnections(item);
item.diagram.skipsUndoManager = oldskips;
}
},
$(go.Picture, "img/310003.ico",
{
margin: 0,
width: 16,
background: "transparent",
//stretch: go.GraphObject.Horizontal,
alignment: go.Spot.Left,
column: 0
}
),
$(go.TextBlock,
{
alignment: go.Spot.Left,
margin: new go.Margin(0, 16),
stroke: "black",
textAlign: "left",
font: "10pt sans-serif",
column: 0
},
new go.Binding("text", "name"))
);
var nodeResizeAdornmentTemplate =
$(go.Adornment, "Spot",
{ locationSpot: go.Spot.Right },
$(go.Placeholder),
/*
$(go.Shape, { alignment: go.Spot.TopLeft, cursor: "nw-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" }),
$(go.Shape, { alignment: go.Spot.Top, cursor: "n-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" }),
$(go.Shape, { alignment: go.Spot.TopRight, cursor: "ne-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" }),
*/
$(go.Shape, "Circle", { alignment: go.Spot.Left, cursor: "w-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" }),
$(go.Shape, "Circle", { alignment: go.Spot.Right, cursor: "e-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" })
/*
$(go.Shape, { alignment: go.Spot.BottomLeft, cursor: "se-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" }),
$(go.Shape, { alignment: go.Spot.Bottom, cursor: "s-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" }),
$(go.Shape, { alignment: go.Spot.BottomRight, cursor: "sw-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" })
*/
);
var nodeSelectionAdornmentTemplate =
$(go.Adornment, "Spot",
$(go.Panel, "Auto",
$(go.Shape, { fill: null, stroke: "blue", strokeWidth: 1 }),
$(go.Placeholder)
)
);
function showConnections(node) {
var diagram = node.diagram;
//diagram.startTransaction("highlight");
var oldskips = diagram.skipsUndoManager;
diagram.skipsUndoManager = true;
// remove any previous highlighting
diagram.clearHighlighteds();
if(node instanceof go.Node) {
node.findLinksOutOf().each(function (l) {
highlightLinkColor = "red";
l.isHighlighted = true;
});
node.findLinksInto().each(function(n) {
highlightLinkColor = "blue";
n.isHighlighted = true;
});
}
else {
node.part.isSelected = false;
node.part.findLinksOutOf(node.portId).each(function (l) {
highlightLinkColor = "red";
l.isHighlighted = true;
});
node.part.findLinksInto(node.portId).each(function (l) {
highlightLinkColor = "blue";
l.isHighlighted = true;
});
}
//diagram.commitTransaction("highlight");
diagram.skipsUndoManager = oldskips;
}
diagram.nodeTemplate =
$(go.Node, "Auto",
{
resizable: true,
resizeObjectName: "NODE",
resizeAdornmentTemplate: nodeResizeAdornmentTemplate,
selectionAdornmentTemplate: nodeSelectionAdornmentTemplate,
layoutConditions: go.Part.LayoutStandard & ~go.Part.LayoutNodeSized,
click: function(e, node)
{
if(node.isSelected)
showConnections(node);
}
},
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
$(go.Shape,
{ fill: "whitesmoke" }),
$(go.Panel, "Vertical",
{
name: "NODE",
stretch: go.GraphObject.Fill,
desiredSize: new go.Size(NaN, NaN)
},
$(go.Panel, "Auto",
{
stretch: go.GraphObject.Horizontal
},
$(go.Shape,
{
fill: "steelblue",
stroke: "transparent",
portId: "", // now the Shape is the port, not the whole Node
fromLinkable: true,
fromLinkableSelfNode: true,
fromLinkableDuplicates: true,
toLinkable: true,
toLinkableSelfNode: true,
toLinkableDuplicates: true,
fromSpot: go.Spot.LeftRightSides, // go.Spot.NotTopSide go.Spot.NotBottomSide,
toSpot: go.Spot.LeftRightSides,
cursor: "pointer"
}
),
$(go.Picture, "img/310003.ico",
{
//row: 0,
//column: 0,
margin: 0,
width: 16,
background: "transparent",
//stretch: go.GraphObject.Horizontal,
alignment: go.Spot.Left
}
),
$(go.TextBlock,
{
alignment: go.Spot.Left,
margin: new go.Margin(0, 16),
stroke: "white",
textAlign: "left",
font: "bold 11pt sans-serif",
stretch: go.GraphObject.Horizontal
},
new go.Binding("text", "key")),
$("PanelExpanderButton", "LIST",
{
//row: 0,
//column: 2,
alignment: go.Spot.Right,
background: "whitesmoke",
margin: 2
}
)
),
$(go.Panel, "Table",
{
name: "LIST",
//padding: 2,
//minSize: new go.Size(100, 10),
defaultStretch: go.GraphObject.Horizontal,
itemTemplate: fieldTemplate,
stretch: go.GraphObject.Fill,
defaultRowSeparatorStroke: "gray"
},
new go.Binding("itemArray", "fields")
)
)
);
var linkSelectionAdornmentTemplate =
$(go.Adornment,
$(go.Shape,
{
isPanelMain: true,
stroke: "black",
strokeWidth: 1.0
}
),
$(go.Shape,
{
toArrow: "standard",
stroke: "black",
fill: "black",
strokeWidth: 1.0
}
)
);
diagram.linkTemplate =
$(go.Link,
{
reshapable: false,
resegmentable: true,
adjusting: go.Link.Stretch,
relinkableFrom: false,
relinkableTo: false,
toShortLength: 4,
fromEndSegmentLength: 8,
toEndSegmentLength: 8,
selectionAdornmentTemplate: linkSelectionAdornmentTemplate
}, // let user reconnect links
new go.Binding("curve", "", function(link)
{
return link.from === link.to ? go.Link.Bezier : go.Link.Stretch;
}),
$(go.Shape,
{
isPanelMain: true,
stroke: "dimgray",
strokeWidth: 0.7
},
new go.Binding("stroke", "isHighlighted", function(h) { return h ? highlightLinkColor : "dimgray" }).ofObject()
),
$(go.Shape,
{
toArrow: "standard",
stroke: "dimgray",
fill: "dimgray",
strokeWidth: 0.7
},
new go.Binding("stroke", "isHighlighted", function(h) { return h ? highlightLinkColor : "dimgray" }).ofObject(),
new go.Binding("fill", "isHighlighted", function(h) { return h ? highlightLinkColor : "dimgray" }).ofObject()
)
);
diagram.model =
$(go.GraphLinksModel,
{
linkFromPortIdProperty: "fromPort",
linkToPortIdProperty: "toPort",
nodeDataArray: [
{ key: "Record1",
fields: [
{ name: "field1", info: "", color: "#F7B84B", figure: "Ellipse" },
{ name: "field2", info: "the second one", color: "#F25022", figure: "Ellipse" },
{ name: "fieldThree", info: "3rd", color: "#00BCF2" }
],
loc: "0 0" },
{ key: "Record2",
fields: [
{ name: "fieldA", info: "", color: "#FFB900", figure: "Diamond" },
{ name: "fieldB", info: "", color: "#F25022", figure: "Rectangle" },
{ name: "fieldC", info: "", color: "#7FBA00", figure: "Diamond" },
{ name: "fieldD", info: "fourth", color: "#00BCF2", figure: "Rectangle" }
],
loc: "250 0" }
],
linkDataArray: [
{ from: "Record1", fromPort: "Record1", to: "Record2", toPort: "Record2" },
{ from: "Record1", fromPort: "field1", to: "Record2", toPort: "fieldA" },
{ from: "Record1", fromPort: "field1", to: "Record1", toPort: "field2" },
{ from: "Record1", fromPort: "field2", to: "Record2", toPort: "fieldD" },
{ from: "Record1", fromPort: "fieldThree", to: "Record2", toPort: "fieldB" }
]
});