The width of the nodes in the group is different and cannot be aligned

As shown in the figure, when the nodes are in the group and the width is inconsistent, the connection line does not work properly, and the auxiliary line also fails (GuidedDraggingTool.js)


I don’t understand what it is that isn’t behaving the way that you expected. Is the GuidedDraggingTool not working when the nodes are in a group, but it is working when the nodes are outside of a group?

EDIT: I just tried using the GuidedDraggingTool on Nodes that are members of a Group, and it worked the way that I expected. Note that that means that member nodes being dragged will only try to line up with other nodes in the same group, not with nodes outside of the group.

thanks reply
On my side, the GuideDraggingTool in the group is not working properly. Can I see the sample code you tried? Let me try to compare and find out the problem.

<!DOCTYPE html>
<html>
<head>
  <title>Minimal GoJS Editor</title>
  <!-- Copyright 1998-2022 by Northwoods Software Corporation. -->
</head>
<body>
  <div style="width: 100%; display: flex; justify-content: space-between">
    <div style="display: flex; flex-direction: column; margin: 0 2px 0 0">
      <div id="myPaletteDiv" style="flex-grow: 1; width: 100px; background-color: floralwhite; border: solid 1px black"></div>
      <div id="myOverviewDiv" style="margin: 2px 0 0 0; width: 100px; height: 100px; background-color: whitesmoke; border: solid 1px black"></div>
    </div>
    <div id="myDiagramDiv" style="flex-grow: 1; height: 400px; border: solid 1px black"></div>
  </div>
  <div>
    <button id="myLoadButton">Load</button>
    <button id="mySaveButton">Save</button>
  </div>
  <textarea id="mySavedModel" style="width:100%;height:200px">
{ "class": "go.GraphLinksModel",
  "nodeDataArray": [
{"key":1, "text":"hello", "color":"green", "location":"0 0"},
{"key":2, "text":"world", "color":"red", "location":"70 0"}
  ],
  "linkDataArray": [
{"from":1, "to":2}
  ]}
  </textarea>

  <script src="go.js"></script>
  <script src="../extensions/GuidedDraggingTool.js"></script>
  <script id="code">
const $ = go.GraphObject.make;

// initialize main Diagram
const myDiagram =
  $(go.Diagram, "myDiagramDiv",
    {
      draggingTool: new GuidedDraggingTool(),  // defined in GuidedDraggingTool.js
      "commandHandler.archetypeGroupData": { isGroup: true, text: "Group", color: "green" },
      "undoManager.isEnabled": true
    });

myDiagram.nodeTemplate =
  $(go.Node, "Auto",
    { locationSpot: go.Spot.Center },
    new go.Binding("location", "location", go.Point.parse).makeTwoWay(go.Point.stringify),
    $(go.Shape,
      {
        fill: "white", stroke: "gray", strokeWidth: 2,
        portId: "", fromLinkable: true, toLinkable: true,
        fromLinkableDuplicates: true, toLinkableDuplicates: true,
        fromLinkableSelfNode: true, toLinkableSelfNode: true
      },
      new go.Binding("stroke", "color")),
    $(go.TextBlock,
      {
        margin: new go.Margin(5, 5, 3, 5), font: "10pt sans-serif",
        minSize: new go.Size(16, 16), maxSize: new go.Size(120, NaN),
        editable: true
      },
      new go.Binding("text").makeTwoWay())
  );

myDiagram.groupTemplate =
  $(go.Group, "Auto",
    { ungroupable: true },
    $(go.Shape, { fill: "whitesmoke", strokeWidth: 0 }),
    $(go.Panel, "Table",
      $(go.Shape,
        { fill: "orange", strokeWidth: 0, width: 20, stretch: go.GraphObject.Vertical }),
      $(go.Panel, "Vertical",
        { column: 1 },
        $(go.TextBlock,
          { margin: 5, minSize: new go.Size(200, NaN), editable: true },
          new go.Binding("text").makeTwoWay()),
        $(go.Placeholder, { padding: 5, minSize: new go.Size(200, NaN) }),
        // A textual button for toggling Group.isSubGraphExpanded
        $(go.TextBlock,
          {
            alignment: go.Spot.Left,
            margin: 5,
            isUnderline: true,
            stroke: "royalblue",
            click: function(e, tb) {
              var group = tb.part;
              if (group.isSubGraphExpanded) {
                group.diagram.commandHandler.collapseSubGraph(group);
              } else {
                group.diagram.commandHandler.expandSubGraph(group);
              }
            }
          },
          new go.Binding("text", "isSubGraphExpanded",
            function(exp) { return exp ? "Hide" : "Show"; }).ofObject()
        )
        // Alternatively:
        // $("SubGraphExpanderButton", { alignment: go.Spot.Left, margin: 5 })
      )
    )
  )

// initialize Palette
myPalette =
  $(go.Palette, "myPaletteDiv",
    {
      nodeTemplateMap: myDiagram.nodeTemplateMap,
      model: new go.GraphLinksModel([
        { text: "red node", color: "red" },
        { text: "green node", color: "green" },
        { text: "blue node", color: "blue" },
        { text: "orange node", color: "orange" }
      ])
    });

// initialize Overview
myOverview =
  $(go.Overview, "myOverviewDiv",
    {
      observed: myDiagram,
      contentAlignment: go.Spot.Center
    });

// save a model to and load a model from Json text, displayed below the Diagram
function save() {
  var str = myDiagram.model.toJson();
  document.getElementById("mySavedModel").value = str;
}
document.getElementById("mySaveButton").addEventListener("click", save);

function load() {
  var str = document.getElementById("mySavedModel").value;
  myDiagram.model = go.Model.fromJson(str);
}
document.getElementById("myLoadButton").addEventListener("click", load);

load();
  </script>
</body>
</html>