Hi Walter… thank you for your response!
But I’m lost at transferring the “solution” to my setup…
I tried to reproduce a “minimized” version of my nodeTemplate and model, but unfortunately I’m too dumb to modify it in the right places to make the rectangle not jump around.
I’d really appreciate it if you could have a look at it:
Basically I have two separate layers in which I want to create ports from two itemArrays, and one layer also hosts a picture (a rectangle in the minimized version). And the picture jumps around when ports are dragged to the sides of the node… :(
<!DOCTYPE html>
<html>
<body>
<script src="https://unpkg.com/[email protected]/release/go.js"></script>
<div id="allSampleContent" class="p-4 w-full">
<script src="https://unpkg.com/[email protected]/dist/extensions/Figures.js"></script>
<script src="https://unpkg.com/[email protected]/dist/extensions/PortShiftingTool.js"></script>
<script id="code">
function init() {
myDiagram = new go.Diagram('myDiagramDiv', {
'draggingTool.isGridSnapEnabled': true, // dragged nodes will snap to a grid of 10x10 cells
});
// install the PortShiftingTool as a "mouse move" tool
myDiagram.toolManager.mouseMoveTools.insertAt(0, new PortShiftingTool());
// creates relinkable Links that will avoid crossing Nodes when possible and will jump over other Links in their paths
myDiagram.linkTemplate = new go.Link({
routing: go.Routing.AvoidsNodes,
curve: go.Curve.JumpOver,
corner: 3,
relinkableFrom: true,
relinkableTo: true,
selectionAdorned: false, // Links are not adorned when selected so that their color remains visible.
shadowOffset: new go.Point(0, 0),
shadowBlur: 5,
shadowColor: 'blue'
})
.bindObject('isShadowed', 'isSelected')
.add(
new go.Shape({ name: 'SHAPE', strokeWidth: 2, stroke: "red" })
);
const $ = go.GraphObject.make;
// share the template map with the Palette
myDiagram.nodeTemplate = $(
go.Node, "Spot", { selectionAdorned: true, selectionObjectName: "SHAPE" },
$(
go.Panel, "Spot", { name: "SHAPE" },
$(
go.Panel, "Auto", { padding: 4 },
$( go.Shape, "Rectangle", { desiredSize: new go.Size(100,100), fill: "yellow" } /*go.Picture, new go.Binding("source", "imageUrl")*/ )
),
new go.Binding("itemArray", "contactpoints"),
{
itemTemplate: $(
go.Panel, { fromLinkable: true, toLinkable: true, },
new go.Binding("alignment", "", (obj) => new go.Spot(obj.x, obj.y)),
new go.Binding("portId", "id"),
$(go.Shape, "Rectangle", { width: 4, height: 4, stroke: "blue", strokeWidth: 2, fill: "blue", })
),
}
),
$(
go.Panel, "Spot",
$(
go.Panel, "Auto", { padding: 4 },
$(go.Panel, { desiredSize: new go.Size(100,100) } ),
),
new go.Binding("itemArray", "expansionpoints"),
{
itemTemplate: $(
go.Panel, { fromLinkable: true, toLinkable: true, },
new go.Binding("alignment", "", (obj) => new go.Spot(obj.x, obj.y)),
new go.Binding("portId", "id"),
$(go.Shape, "Rectangle", { width: 4, height: 4, stroke: "green", strokeWidth: 2, fill: "green", })
)
}
)
);
const nodeDataArray = [
{
key: "1",
contactpoints: [
{ id: "1c1", x: 0.3, y: 0.3 },
{ id: "1c2", x: 0.6, y: 0.3 }
],
expansionpoints: [
{ id: "1e1", x: 0.3, y: 0.6 },
{ id: "1e2", x: 0.6, y: 0.6 }
]
}
];
myDiagram.model = go.Model.fromJson(JSON.stringify(
{
nodeDataArray: nodeDataArray,
linkDataArray: []
}
));
}
window.addEventListener('DOMContentLoaded', init);
</script>
<div id="sample">
<div style="width: 100%; display: flex; justify-content: space-between">
<div id="myDiagramDiv" style="flex-grow: 1; height: 500px; border: solid 1px black"></div>
</div>
</div>
</div>
</body>
</html>