Hi,
Given the following example:
<!DOCTYPE html>
<html>
<head>
<title>Snap to grid</title>
<meta charset="UTF-8" />
</head>
<body onload="init()" style="margin: 0; padding: 0; overflow: hidden">
<div id="app">
<div
id="diagram"
style="border: solid 1px black; width: 100%; height: calc(100vh)"
></div>
</div>
<script src="https://unpkg.com/gojs"></script>
<script id="code">
function init() {
var $ = go.GraphObject.make; // for conciseness in defining templates
myDiagram = $(
go.Diagram,
"diagram", // create a Diagram for the DIV HTML element
{
initialScale: 2.0,
"draggingTool.isGridSnapEnabled": true,
"grid.visible": true,
}
);
// define a simple Node template
myDiagram.nodeTemplate = $(
go.Node,
"Auto", // the Shape will go around the TextBlock
new go.Binding("location", "location"),
$(
go.Shape,
"RoundedRectangle",
{ strokeWidth: 0, fill: "white" },
// Shape.fill is bound to Node.data.color
new go.Binding("fill", "color")
),
$(
go.TextBlock,
{ margin: 8, font: "bold 14px sans-serif", stroke: "#333" }, // Specify a margin to add some room around the text
// TextBlock.text is bound to Node.data.key
new go.Binding("text", "key")
)
);
// but use the default Link template, by not setting Diagram.linkTemplate
// create the model data that will be represented by Nodes and Links
myDiagram.model = new go.GraphLinksModel([
{
key: "Alpha",
color: "lightblue",
location: new go.Point(0, 0),
},
{ key: "Beta", color: "orange", location: new go.Point(195, 0) },
]);
myDiagram.model.linkKeyProperty = "key";
}
</script>
</body>
</html>
When you select both nodes and start dragging over the grid, each nodes snaps individually.
Would it be possible to snap the selected collection synchronously based on a common point so that the original distance between the nodes would not be affected while dragging? We are using the GuidedDraggingTool and the same thing happens when the parts are being snapped to a guide.
Thanks!