Sequentially move node

image

Step 1 :- Add node to move all next node automatic with distance 150px but not move all node

Step 2 :- In link template This palette like come and on this inside palette data clicked this data added in node and when add node this not automatic shift towards right As seen image End is last node but End is not shift means when from first node add data then toward right all node not shifted Do that shift that node all sequentially

Means I want that when palette data click then get from node and end node and to node positon shift to 150px posiiotn right and that newly added node take postion of to node and all conneted node to that links all shift right .

I want like that below attached image

That you see in two images that excel is take position of stop and stop shift and if more node that also shift automatic

And I am try to using Autoshifting Layout and all nodes not shift sequentially Please provide me solution

The AutoShiftingLayout ignores links. I think you need to use an automatic layout, so you want to set Diagram.layout to a TreeLayout or LayeredDigraphLayout.

Then the context menu on the link template splices in a new node by adding a new link connecting the new node to the old “to” node and reconnecting the old link to the new node. The Flowgrammer sample demonstrates this, although the source of new nodes is a Palette instead of a context menu.

When we add node auto adjust that time only want , not when node move and

I am already used both layout not working

and when I am used layered digraph layout then when we move node then also auto arrange diagram that’s not want only when add node that only adjust

It sounds like you may need to adjust when your layouts are invalidated. See layout invalidation.

You may want to set layoutConditions: go.LayoutConditions.Standard & ~go.LayoutConditions.NodeSized on your layout.

This is not working , I am provide you the code ,


  <!DOCTYPE html>
  <html lang="en">
  <body>
  <script src="https://unpkg.com/gojs@2.3.17/release/go.js"></script>
  
  
  <div style="height: 100px; width: 100%; display: block;">
 
<style>
 #myPaletteDiv2 {
    visibility: hidden;
    z-index: 10;
    height: 355px;
    width: 242px;
    position: absolute;
    background-color: #fff;
    box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
  }
</style>


<script id="code">
  function init() {

    const $ = go.GraphObject.make;
    let widthVar;
    let heightVar;
    var toNodeLocation;
    var nodeValue;
    var modified;
    var hiddenMenu;
	var plusPointLocation;
	var plusPointLocation;
	var toNodeLocation;
	var locationGet;
	var documentLocationGet;
	var currentNodeLinkData;
	var addCurrentNode;
	var lane;

   var myDiagram =
      new go.Diagram("myDiagramDiv",
        {
          contentAlignment: go.Spot.TopLeft,
          initialContentAlignment: go.Spot.TopLeft,
          
          layout: $(go.LayeredDigraphLayout,
            {
              isInitial: false,
              isOngoing: false,
              isRealtime: false,
              direction: 0,
              columnSpacing: 10,
            }),
         
          mouseDragOver: e => {
            if (!e.diagram.selection.all(n => n instanceof go.Group)) {
              e.diagram.currentCursor = 'not-allowed';
            }
          },
         
          "commandHandler.copiesGroupKey": true,
          "animationManager.isEnabled": true,
          "draggingTool.dragsLink": false,
          "draggingTool.isGridSnapEnabled": true,
          "linkingTool.isUnconnectedLinkValid": false,
          "linkingTool.portGravity": 1,
          "relinkingTool.isUnconnectedLinkValid": false,
          "relinkingTool.portGravity": 1,
          "relinkingTool.fromHandleArchetype":
            $(go.Shape, "Diamond", { segmentIndex: 0, cursor: "pointer", desiredSize: new go.Size(8, 8), fill: "tomato", stroke: "darkred" }),
          "relinkingTool.toHandleArchetype":
            $(go.Shape, "Diamond", { segmentIndex: -1, cursor: "pointer", desiredSize: new go.Size(8, 8), fill: "darkred", stroke: "tomato" }),
          "linkReshapingTool.handleArchetype":
            $(go.Shape, "Diamond", { desiredSize: new go.Size(7, 7), fill: "lightblue", stroke: "deepskyblue" }),
          "rotatingTool.handleAngle": 270,
          "rotatingTool.handleDistance": 30,
          "rotatingTool.snapAngleMultiple": 15,
          "rotatingTool.snapAngleEpsilon": 15,
          "undoManager.isEnabled": true,

          allowDrop: true,

          "ExternalObjectsDropped": function (e) {
            e.subject.copy().each(function (n) {
              console.log(n.data);
              let matching = e.diagram.findNodesByExample({ name: n.data.name });
              if (matching.count > 1) {
                e.diagram.remove(n);
                error();
              }
            })
          },


          "BackgroundSingleClicked": function (e) {

            let contextMenu1 = document.getElementById("myPaletteDiv2");
            contextMenu1.style.visibility = 'hidden';
          },

          "linkingTool.linkValidation": (fromNode, fromPort, toNode, toPort, link) => {

            if (toNode === fromNode) {
              return false; // Prevent connecting the node to itself
            }
            const existingLinks = toNode.findLinksConnected().filter(l => l.fromNode === fromNode).count;
            if (existingLinks > 0) {
              return false; // Prevent connecting the same source node again
            }
            if (toNode.data.name === "Start" || fromNode.data.name === "End") {
              return false;
            }
            return true;
          },

          "DocumentBoundsChanged": e => {
            widthVar = e.diagram.viewportBounds.width;
            heightVar = e.diagram.viewportBounds.height;
            console.log(e);
            console.log(e.diagram.documentBounds.size.width);
          },
          click: () => {
            hiddenMenu = true;
          },
         
        });

  myDiagram.addModelChangedListener(evt => {
      console.log(evt);
      if (evt.modelChange == "nodeDataArray") {
        if (evt.newValue) {
          console.log(evt.newValue.name.length);
          modified = true;

        } else if (evt.oldValue) {
          console.log(evt.oldValue.name.length);
          modified = true;

        }
      }
    });


    function onNodeDataAdded(e) {
      console.log('fafafa', e);


      if (e.change === go.ChangedEvent.Insert && e.propertyName === "nodeDataArray" && !e.model.skipsUndoManager && e.newValue && e.newValue.name1 && e.newValue.name1.length) {  // skip any temporary additions, such as during drag-and-drop
        console.log("hello", e);

        let data = e.newValue;
        let cname = data.name;

        if (!cname) cname = "none";
        let counters = e.model.modelData;
        let count = counters[cname] || 0;
        count++;
        console.log(cname);
        console.log(counters);
        console.log(data);
        console.log(count);
        e.model.set(counters, cname, count);
        e.model.set(data, "name", cname + " " + count);
      }

    }

    function error() {
      notification.notifier(NotificationType.error, "Same name activity already exist.");
    }

	function getNextKey() {
		let maxKey = -1;
		myDiagram.model.nodeDataArray.forEach(node => {
		  if (node.key > maxKey) maxKey = node.key;
		});
		return maxKey + 1;
	  }
	function addGroup(event, obj) {
		console.log(obj.part.part.location);

		// 13098
		myDiagram.startTransaction();

		lane: any = obj.part.part;

		let selectedItem = myDiagram.selection.first().findObject('SHAPE')
		let size = new go.Size(selectedItem.width, 300);//MINBREADTH
		console.log(event);
		console.log(obj);
		const groupData = {
		  key: getNextKey(),
		  category: "Lane",
		  group: "Pool1",
		  isGroup: true,
		  text: "New Group",
		  name: "New Group",
		  color: "lightblue",
		  size: "1460 300",
		  expanded: true,

		  loc: go.Point.stringify(new go.Point(event.documentPoint.x, event.documentPoint.y + 1)),
		};
		myDiagram.model.addNodeData(groupData);

		myDiagram.commitTransaction();
	  }
;

myDiagram.nodeTemplate =
      $(go.Node, "Table",
        $(go.Panel, "Auto",
          {
            click: (e, node) => {
              // this.showSubMenu(e, node)
              nodeValue = node;
              console.log('e, node', e, node)
            }
          },
          $(go.Shape, "RoundedRectangle",
            {
              strokeWidth: .5,
              fill: "#E07800",
              // stroke: 'white',
              stroke: '#116173',
              portId: "",
              desiredSize: new go.Size(220, 40),
              fromLinkable: true,
              toLinkable: true,
              fromLinkableDuplicates: true,
              toLinkableDuplicates: true,
              fromSpot: go.Spot.AllSides,
              toSpot: go.Spot.AllSides,
              
              click: (e, node) => {
                // this.showSubMenu(e, node)
                nodeValue = node;
                console.log('e, node', e, node)
                
              }
            },

            new go.Binding("desiredSize", "name", function (name) {
              if (name == 'Start' || name == 'start') {
                return new go.Size(80, 40); // Change width for START node
              } else if (name == 'End' || name == 'end') {
                return new go.Size(80, 40); // Change width for END node
              } else {
                return new go.Size(220, 40); // Default width for other nodes
              }
            }),
          ),

        
          $(go.Picture,
            {
              alignment: go.Spot.Left,
              source: "",
              cursor: "move",
              desiredSize: new go.Size(25, 25), // Adjust size as needed
              margin: new go.Margin(0, -5, 0, 15),
            },
           
          ),
          $(go.TextBlock, {
            height: 32,
            // width: 32,
            width: 202,
            textAlign: 'center',
            alignment: go.Spot.Left,
            verticalAlignment: go.Spot.Center,
            font: 'bold 12px calibri',
            name: 'TEXTBLOCK_NAME',
            cursor: "move",
            stroke: 'black',
            margin: new go.Margin(0, -8, 0, 5),
            isMultiline: false,
            click: function (e, obj) {
              if (obj.part.data.name == 'Start') {
                return;
              } else {
                // handleRename(obj, obj.part.data.name); // Use obj to access the old name
              }
            },

            editable: false,

          },
			),


          ),
          $(go.TextBlock, {
            margin: 10,
            wrap: go.TextBlock.WrapFit,
            textAlign: "center",
          }, {
            maxSize: new go.Size(170, 40),
            alignment: go.Spot.Left,
            font: 'bold 11px Inter, sans-serif',
            wrap: go.TextBlock.WrapFit,
            stroke: 'black',
            textAlign: 'left',
            name: 'TEXTBLOCK_NAME',
            cursor: "move",
            verticalAlignment: go.Spot.Center,

          }, new go.Binding("text", "name").makeTwoWay(),
            new go.Binding("editable", 'name', (name) => {
              console.log('text', name);

              if (name == 'Start' || name == 'End') {
                return false
              } else {
                return true
              }
            }).makeTwoWay(),
            new go.Binding("margin", "name", t => {
              if (t === 'Start') {
                return new go.Margin(20, 20, 20, 20); // Set custom margins for START node
              } else if (t === 'End') {
                return new go.Margin(20, 20, 20, 30); // Set custom margins for END node
              } else {
                return new go.Margin(45, 45, 45, 45) // Default margins for other nodes
              }
            }
            ),
            new go.Binding("font", "name", t => t.length > 35 ? 'bold 7px Inter, sans-serif' : 'bold 11px Inter, sans-serif'),
          ),

        ),
        {
          selectionAdornmentTemplate: $(go.Adornment, "Auto",
            $(go.Shape, "RoundedRectangle",
              { fill: null, stroke: "dodgerblue", strokeWidth: 3 }),
            $(go.Placeholder)
          )  // end Adornment

        },

        makePort("T", go.Spot.Top, true, true),
        makePort("B", go.Spot.Bottom, true, true),
        makePort("R", go.Spot.Right, true, true),
        makePort("L", go.Spot.Left, true, true),

        {
          mouseEnter: (e, node) => showSmallPorts(node, true),
          mouseLeave: (e, node) => showSmallPorts(node, false)
        }

      


myDiagram.nodeTemplate.contextMenu =
      $(go.Adornment, "Vertical",
        $("ContextMenuButton",
          $(go.TextBlock, "Delete"),
          {
            background: "lightblue",
            margin: new go.Margin(5, 10),
          }
        ),
        $("ContextMenuButton",
          $(go.TextBlock, "Change icon"),
          { 
            background: "lightblue",
            margin: new go.Margin(5, 10),
          }
        ),


      );



    myDiagram.nodeTemplate.click = (e, obj) => {
      const linkData = obj;
    };

    function showSmallPorts(node, show) {
      node.ports.each(port => {
        if (port.portId !== "") { 
          port.fill = show ? "rgba(0,0,0,.3)" : null;
        }
      });
    }

    myDiagram.linkTemplate =
      $(go.Link,

        {
          curve: go.Link.Bezier,
          fromEndSegmentLength: 50,
          toEndSegmentLength: 50,
          fromShortLength: 4,
          toShortLength: 4,
          selectable: true,
          fromSpot: go.Spot.AllSides,
          toSpot: go.Spot.AllSides,
          fromLinkableSelfNode: true,
          fromLinkableDuplicates: true,
          toLinkableSelfNode: true,

          relinkableFrom: true, relinkableTo: true, reshapable: true, fromLinkable: true,

        },

        { selectable: true },
       
        $(go.Shape, { isPanelMain: true, strokeWidth: 6, stroke: "transparent" },
          new go.Binding("stroke", "isHighlighted", h => h ? "red" : "transparent").ofObject()),
        $(go.Shape, { isPanelMain: true, stroke: "#002f49", strokeWidth: 2, toLinkable: true, toLinkableSelfNode: true }), // the main path
        $(go.Shape, { name: "AH", toArrow: "RoundedTriangle", scale: 1.2, fill: "#002f49", stroke: "#002f49", toLinkable: true, toLinkableSelfNode: true }),  // the arrowhead
        $(go.Panel, "Auto",
          $(go.Shape,
            {
              fill: $(go.Brush, "Radial", { 0: "rgb(240, 240, 240)", 0.3: "rgb(240, 240, 240)", 1: "rgba(240, 240, 240, 0)" }),
              stroke: null
            }),
          $(
            go.Shape,
            "PlusLine",
            {
              name: "PlusSign",
              desiredSize: new go.Size(15, 15),
              fill: "white",
              stroke: "red",
              strokeWidth: 4,
              visible: false,
              cursor: 'pointer'
            }
          ),
        ),

        // uncomment
        {
          selectionAdornmentTemplate:
            $(go.Adornment,
              $(go.Shape, { isPanelMain: true, stroke: "dodgerblue", strokeWidth: 2, }),
              $(go.Shape, { toArrow: "RoundedTriangle", fill: "dodgerblue", scale: 0.9, stroke: "dodgerblue" })
            )  // end Adornment
        },

        {
          mouseDragEnter: (e, link) => link.isHighlighted = true,
          mouseDragLeave: (e, link) => link.isHighlighted = false,
          mouseEnter: function (e, obj) {
            obj.findObject("PlusSign").visible = true;
           
          },
          mouseLeave: function (e, obj) {
            obj.findObject("PlusSign").visible = false;
           
          },
          click: (e, obj) => {
            myDiagram.startTransaction();
            
            plusPointLocation = JSON.stringify(e.diagram.lastInput.viewPoint);

            toNodeLocation = obj.fromNode.location;
           
            locationGet = JSON.stringify(obj.part.location);
           
            var docloc = myDiagram.transformDocToView(obj.part.location);
            documentLocationGet = JSON.stringify(docloc);
           
            if (e.targetObject.name !== "PlusSign") {
              
              return;
            }

            console.log(obj);
            console.log(obj.part.data);

            let currentNodeLinkData = obj.part.data;
           
            if (currentNodeLinkData) {
              currentNodeLinkData = currentNodeLinkData

            }

            let plusSign = obj.findObject("PlusSign");
            let panelPoint = plusSign.getDocumentPoint(go.Spot.Top);
            console.log("Doc Point x: " + panelPoint.x + " view point y: " + panelPoint.y)
            let viewPoint = myDiagram.transformDocToView(panelPoint);
          
            let contextMenu1 = document.getElementById("myPaletteDiv2");

            contextMenu1.style.display = "block";

            const boxOpenLocation = (e.event.clientY / 2)
            const boxFreeLocation = boxOpenLocation - 195;
            console.log(e.event.clientX, e.event.clientY, 'get event')
            if (195 > boxOpenLocation) {
              contextMenu1.style.top = e.event.clientY + 8 + 'px'
            
            } else {
              contextMenu1.style.top = (e.event.clientY) - 202 + 'px'
              
            }

            console.log(boxOpenLocation);
            console.log(boxFreeLocation, viewPoint.y);



            contextMenu1.style.left = e.event.clientX - 50 + 'px';
            contextMenu1.style.visibility = 'visible';
            console.log("open")
            console.log("View Point x: " + viewPoint.x + " view point y: " + viewPoint.y)


            myDiagram.requestUpdate();

            myDiagram.commitTransaction();
            
          },

          mouseDrop: (e, link) => {
            const oldto = link.toNode;
            const newnode = e.diagram.selection.first();
            if (!mayConnect(newnode, oldto)) return;
            if (!mayConnect(link.fromNode, newnode)) return;
            link.toNode = newnode;
            const newdata = { ...newnode.data, group: link.fromNode.data.group };
            e.diagram.model.addNodeData(newdata)
            e.diagram.model.setToKeyForLinkData(newnode.data, newdata.key);
            e.diagram.model.addLinkData({ from: newnode.key, to: oldto.key });
          }
        },

      )
    function mayConnect(node1, node2) {
      return node1 !== node2;
    }

    function groupStyle() {  // common settings for both Lane and Pool Groups
      return [
        {
          layerName: "Background",  // all pools and lanes are always behind all nodes and links
          background: "transparent",  // can grab anywhere in bounds
          movable: false, // allows users to re-order by dragging
          copyable: false,  // can't copy lanes or pools
          avoidable: false,  // don't impede AvoidsNodes routed Links

        },
       
      ];
    }

    function updateCrossLaneLinks(group) {
      group.findExternalLinksConnected().each(l => {
        l.visible = (l.fromNode.isVisible() && l.toNode.isVisible());
      });
    }

    myDiagram.addDiagramListener("ObjectSingleClicked", function () {
      let contextMenu = document.getElementById("myPaletteDiv2");
      contextMenu.style.display = "none";
    });

    myDiagram.groupTemplateMap.add("Lane",
      $(go.Group, "Horizontal", groupStyle(),
        {
          click: () => { hiddenMenu = true },
          selectionObjectName: "SHAPE",
          resizable: true, resizeObjectName: "SHAPE",
          computesBoundsAfterDrag: true, 
          computesBoundsIncludingLinks: false,
          computesBoundsIncludingLocation: true,
          handlesDragDropForMembers: true,
          mouseDrop: (e, grp) => {
            var ok = grp.addMembers(grp.diagram.selection, true);
            if (!ok) grp.diagram.currentTool.doCancel();
          },

          subGraphExpandedChanged: (grp) => {
            const shp = grp.resizeObject;
            if (grp.diagram.undoManager.isUndoingRedoing) return;
            if (grp.isSubGraphExpanded) {
              shp.height = grp.data.savedBreadth;
            } else {
              if (!isNaN(shp.height)) grp.diagram.model.set(grp.data, "savedBreadth", shp.height);
              shp.height = NaN;
            }
            updateCrossLaneLinks(grp);
          },

        },
        new go.Binding("isSubGraphExpanded", "expanded").makeTwoWay(),
        new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),

        $(go.Panel, "Horizontal",
          {
            name: "HEADER",
            angle: 270, 
            alignment: go.Spot.Center
          },
          $(go.Panel, "Horizontal", 
            new go.Binding("visible", "isSubGraphExpanded").ofObject(),
            $(go.Shape, "Diamond",
              { width: 8, height: 8, fill: "white", stroke: "" },
              new go.Binding("fill", "color")),
            $(go.TextBlock,
              { font: "bold 13pt sans-serif", editable: true, margin: new go.Margin(2, 0, 0, 0) },
              new go.Binding("text", "name").makeTwoWay())
          ),
          $("SubGraphExpanderButton", { margin: 5 })
        ), 
        $(go.Panel, "Auto", { alignment: go.Spot.Left },
          $(go.Shape, "Rectangle", 
            { name: "SHAPE", fill: "white", minSize: new go.Size(1460, NaN), stroke: "black", strokeWidth: 2, alignment: go.Spot.Left, desiredSize: new go.Size(NaN, 300) },
             new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify)),
          $(go.Placeholder,
            { padding: 12, alignment: go.Spot.TopLeft }),
          $(go.TextBlock,
            {
              name: "LABEL",
              font: "bold 13pt sans-serif", editable: true,
              angle: 0, alignment: go.Spot.TopLeft, margin: new go.Margin(2, 0, 0, 4)
            },
            new go.Binding("visible", "isSubGraphExpanded", e => !e).ofObject(),
            new go.Binding("text", "name").makeTwoWay())
        )
      ));
    myDiagram.groupTemplateMap.get("Lane").resizeAdornmentTemplate =
      $(go.Adornment, "Spot",
        {
          minSize: new go.Size(1460, 300),
          click: () => { hiddenMenu = true },
        },
        $(go.Placeholder),
        $(go.Shape,  // for changing the length of a lane
          {
            alignment: go.Spot.Right,
            desiredSize: new go.Size(7, 50),
            fill: "lightblue", stroke: "dodgerblue",
            cursor: "col-resize"
          },
          new go.Binding("visible", "", ad => {
            if (ad.adornedPart === null) return false;
            return ad.adornedPart.isSubGraphExpanded;
          }).ofObject()
        ),
        $(go.Shape,  // for changing the breadth of a lane
          {
            alignment: go.Spot.Bottom,
            desiredSize: new go.Size(50, 7),
            fill: "lightblue", stroke: "dodgerblue",
            cursor: "row-resize"
          },
          new go.Binding("visible", "", ad => {
            if (ad.adornedPart === null) return false;
            return ad.adornedPart.isSubGraphExpanded;
          }).ofObject()
        ),
        $(go.Panel, "Vertical",
          { cursor: 'pointer', alignment: go.Spot.BottomLeft, alignmentFocus: new go.Spot(0, 1, -69, -8) },
          $("Button",
            { click: (event, obj) => addGroup(event, obj), cursor: 'pointer' },
            $(go.Shape, "PlusLine", { cursor: 'pointer', width: 12, height: 12, fill: "lightblue", stroke: "dodgerblue", strokeWidth: 4 })
          )
        )
      );

    myDiagram.groupTemplateMap.add("Pool",
      $(go.Group, "Auto", groupStyle(),
        {
          computesBoundsIncludingLinks: false,
          layout: $(go.LayeredDigraphLayout,
            {
              alignOption: go.LayeredDigraphLayout.AlignAll,
              columnSpacing: 40,
              layerSpacing: 80,
              direction: 90,
              setsPortSpots: false,
              isRealtime: false
            })
        },
        $(go.Shape,
          { fill: "white" },
          new go.Binding("fill", "color")),
        $(go.Panel, "Table",
          { defaultColumnSeparatorStroke: "black" },
          $(go.Panel, "Horizontal",
            { column: 0, angle: 270 },
            $(go.TextBlock,
              { font: "bold 16pt sans-serif", editable: true, margin: new go.Margin(2, 0, 0, 0) },
              new go.Binding("text").makeTwoWay())
          ),
          $(go.Placeholder,
            { column: 1 })
        )
      ));

    const dataSetPool = {
    "class": "GraphLinksModel",
    "nodeDataArray": [
      {
        "key": "Pool1",
        // "text": "Pool",
        "name": "Pool",
        "isGroup": true,
        "category": "Pool",
      },
      {
        "key": "Lane1",
        "text": "Lane1",
        "name": "Lane1",
        "isGroup": true,
        "category": "Lane",
        "group": "Pool1",
        "size": "485.52000000000004 300",
        "loc": "-492.25000000000006 17.75",
        "expanded": true,
        "savedBreadth": 300,
      },
      {
        "key": "Start",
        "name": "Start",
        "group": "Lane1",
        "loc": "-439.99999999999966 50",
      },
      {
        "key": "End",
        "name": "End",
        "group": "Lane1",
        "loc": "-79.99999999999977 50",
      },
    ],
    "linkDataArray": [
      {
        "from": "Start",
        "to": 'End',
      },
    ]
  }

    myDiagram.model = go.Model.fromJson(dataSetPool);
    const myPalette2 = new go.Palette("myPaletteDiv2", { // customize the GridLayout to align the centers of the locationObjects
      maxSelectionCount: 1,

    });

    myPalette2.nodeTemplate =
      $(go.Node, "Spot",
        {
          locationSpot: go.Spot.Center,
        },
        new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
        { selectable: true },
        new go.Binding("angle").makeTwoWay(),

        $(go.Panel, "Horizontal",
          $(go.Panel, "Spot",
            $(go.TextBlock,
              {
                margin: 5, font: "14px FontAwesome", alignment: go.Spot.Center, stroke: "white",
              },
            ),
          ),

          $(go.Picture,
            {
              alignment: go.Spot.Left,
              source: "",
              desiredSize: new go.Size(30, 30), // Adjust size as needed
              // margin: new go.Margin(16, 2, 80, 15) // Adjust margins as needed
            },
          ),
          $(go.TextBlock,
            {
              margin: 10,
              font: "10pt sans-serif",
              alignment: go.Spot.LeftCenter,
              textAlign: "left",
              verticalAlignment: go.Spot.MiddleLeft,
              width: 200,
              height: 30,
              editable: false,
              isMultiline: false,
              click: (e, obj) => {
                if (obj && obj.diagram && obj.diagram.div && obj.diagram.div.id && obj.diagram.div.id === "myDiagramDiv") {
                  console.log(e);
                  console.log(obj);

                  obj.diagram.commandHandler.editTextBlock();
                }
              }
            },
            new go.Binding("text", "name").makeTwoWay(),
            new go.Binding("width", "name", function (name) {
              return name ? 170 : 30; // Increase width based on text length
            }),
          )
        )
      );

    myPalette2.nodeTemplate.click = (e, obj) => {
      let data = obj.data;
      clickPAletteForLAne(data, e, obj)

    };

    myPalette2.model.nodeDataArray = [
      {
        category: "activity",
        text: "Node 1",
        Associate: "AcceleratorPalette",
        name: "Node 1",
        source: "assets/bpmn icon/node1.png",
        shape: "Square", color: "#116173", icon: "\uf390", id: 1
      },
	  {
        category: "activity",
        text: "Node 2",
        Associate: "AcceleratorPalette",
        name: "Node 2",
        source: "assets/bpmn icon/node1.png",
        shape: "Square", color: "#116173", icon: "\uf390", id: 1
      },{
        category: "activity",
        text: "Node 3",
        Associate: "AcceleratorPalette",
        name: "Node 3",
        source: "assets/bpmn icon/node1.png",
        shape: "Square", color: "#116173", icon: "\uf390", id: 1
      },
	  {
        category: "activity",
        text: "Node 4",
        Associate: "AcceleratorPalette",
        name: "Node 4",
        source: "assets/bpmn icon/node1.png",
        shape: "Square", color: "#116173", icon: "\uf390", id: 1
      },{
        category: "activity",
        text: "Node 5",
        Associate: "AcceleratorPalette",
        name: "Node 5",
        source: "assets/bpmn icon/node1.png",
        shape: "Square", color: "#116173", icon: "\uf390", id: 1
      },
    ];


    function getUniqueKey() {
        let model = myDiagram.model;
        let maxKey = 0;
        model.nodeDataArray.forEach(function (nodeData) {
          if (nodeData.key > maxKey) {
            maxKey = nodeData.key;
          }
        });
        let newKey = maxKey + 1;
        return newKey;
        }
    function clickPAletteForLAne(obj, e, obj_comp_data) {
    let model = myDiagram.model;
    const newKey = getUniqueKey()
    const nodes = model.nodeDataArray;
    const nodeWithSameName = nodes.find(node => node.name === obj.name);
    const json = myDiagram.model.toJson();
    const dataSet = JSON.parse(json);
    const nodeData = dataSet.nodeDataArray;
 
    const selection = myDiagram.selection.first();
    if (selection && selection instanceof go.Link) {
      const fromnode = selection.fromNode.data.group;
      let fromSubModual = nodeData.find((item) => item.key == fromnode);
      const tonode = selection.toNode;
      const tonodePos = tonode.position.copy();
      const tonodeWidth = tonode.actualBounds.width;
      addCurrentNode = tonode;
      const parselocation3 = toNodeLocation;
      const location3 = `${parselocation3.x + 150} ${parselocation3.y}`;
      myDiagram.model.commit(m => {
        const newdata = { ...obj, group: fromSubModual.key, loc: location3 };
        m.addNodeData(newdata);
        m.setToKeyForLinkData(selection.data, newdata.key);
        m.addLinkData({ from: newdata.key, to: tonode.key });
 
      });
    }
    let contextMenu = document.getElementById("myPaletteDiv2");
    contextMenu.style.display = "none";
  }
    
  function  makePort(name, spot, output, input) {
    return $(go.Shape, "Circle",
      {
        fill: null,
        stroke: null,
        desiredSize: new go.Size(11, 11),
        alignment: spot, 
        alignmentFocus: spot,
        portId: name,
        fromSpot: spot, toSpot: spot,
        fromLinkable: output, toLinkable: input,
        cursor: "pointer"
      });
  }
    
    
    load();
  }

  function reexpand(e) {
    myDiagram.commit(diag => {
      var level = parseInt(document.getElementById("levelSlider").value);
      diag.findTopLevelGroups().each(g => expandGroups(g, 0, level))
    }, "reexpand");
  }
  function expandGroups(g, i, level) {
    if (!(g instanceof go.Group)) return;
    g.isSubGraphExpanded = i < level;
    g.memberParts.each(m => expandGroups(m, i + 1, level))
  }
  function updateTotalGroupDepth() {
    let d = 0;
    myDiagram.findTopLevelGroups().each(g => d = Math.max(d, groupDepth(g)));
    document.getElementById("levelSlider").max = Math.max(0, d);
  }
  function groupDepth(g) {
    if (!(g instanceof go.Group)) return 0;
    let d = 1;
    g.memberParts.each(m => d = Math.max(d, groupDepth(m)+1));
    return d;
  }

  const dataSet = { 
      "class": "go.GraphLinksModel",
      "nodeDataArray": [
        {"key":3, "isGroup":true, "text":"Group A"},
        {"key":4, "isGroup":true, "text":"Group B"},
        {"text":"First A", "group":3, "key":-7},
        {"text":"Second A", "group":3, "key":-8},
        {"text":"First B", "group":4, "key":-9},
        {"text":"Second B", "group":4, "key":-10},
        {"text":"Third B", "group":4, "key":-11}
      ],
      "linkDataArray": [{from:-7, to:-8}]}

  function load() {
    myDiagram.model = go.Model.fromJson(dataSet);
  }
  window.addEventListener('DOMContentLoaded', init);
</script>

<div id="sample">
  <div style="width: 100%; display: flex; justify-content: space-between">
    <div id="myPaletteDiv2"></div>
    <div id="myDiagramDiv" style="flex-grow: 1; height: 500px; background-color: rgb(223, 235, 229); border: 1px solid black; position: relative; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); cursor: auto;"><canvas tabindex="0" width="1114" height="498" style="position: absolute; top: 0px; left: 0px; z-index: 2; user-select: none; touch-action: none; width: 1114px; height: 498px; cursor: auto;"></canvas><div style="position: absolute; overflow: auto; width: 1114px; height: 498px; z-index: 1;"><div style="position: absolute; width: 1px; height: 1px;"></div></div></div>
  

  
  </div>
  
  </body>
  </html>

I don’t see a layout on your “Lane” groups. I would expect there to be one if you want newly added nodes to be laid out.

It seems like you’ve taken some aspects of the Swim Lanes sample, but you didn’t include the ‘Lane’ group layout. I’d suggest you do, and then you can customize the layout invalidation of that layout to work how you want.