Going Out of Group

I am provide you below code for group template add and get code with mypalette code and with all attached images

now my issue is that when click on mypalette data that add on this between links that break and add node inside that this is working fine but that’s I am added or clicked in palette data that added goes to outside the group template Not in group template , Give me write code for that I am added in between using paltte data click that also add in group template only not goes out of group template frame

Group template add lane

      $(go.Group, "Horizontal", groupStyle(),

          selectionObjectName: "SHAPE",  // selecting a lane causes the body of the lane to be highlit, not the label
          resizable: true, resizeObjectName: "SHAPE",  // the custom resizeAdornmentTemplate only permits two kinds of resizing
          layout: $(go.LayeredDigraphLayout,  // automatically lay out the lane's subgraph
              isInitial: false,  // don't even do initial layout
              isOngoing: false,  // don't invalidate layout when nodes or links are added or removed
              direction: 0,
              columnSpacing: 10,
              layeringOption: go.LayeredDigraphLayout.LayerLongestPathSource,
              alignOption: go.LayeredDigraphLayout.AlignAll

          computesBoundsAfterDrag: true,  // needed to prevent recomputing Group.placeholder bounds too soon
          computesBoundsIncludingLinks: false,  // to reduce occurrences of links going briefly outside the lane
          computesBoundsIncludingLocation: true,  // to support empty space at top-left corner of lane
          handlesDragDropForMembers: true,  // don't need to define handlers on member Nodes and Links

          mouseDrop: (e, grp: any) => {
            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;


        new go.Binding("isSubGraphExpanded", "expanded").makeTwoWay(),

        // the lane header consisting of a Shape and a TextBlock
        $(go.Panel, "Horizontal",
            name: "HEADER",
            angle: 270,  // maybe rotate the header to read sideways going up
            alignment: go.Spot.Center
          $(go.Panel, "Horizontal",  // this is hidden when the swimlane is collapsed
            new go.Binding("visible", "isSubGraphExpanded").ofObject(),
            $(go.Shape, "Diamond",
              { width: 8, height: 8, fill: "white", stroke: "" },
              new go.Binding("fill", "color")),
            $(go.TextBlock,  // the lane label
              { font: "bold 13pt sans-serif", editable: true, margin: new go.Margin(2, 0, 0, 0) },
              new go.Binding("text", "name").makeTwoWay())
          $("SubGraphExpanderButton", { margin: 5 })  // but this remains always visible!
        ),  // end Horizontal Panel
        $(go.Panel, "Auto",  // the lane consisting of a background Shape and a Placeholder representing the subgraph
          $(go.Shape, "Rectangle",  // this is the resized object

            // { name: "SHAPE", fill: "white", stroke: "black", strokeWidth: 2 },
            { name: "SHAPE", fill: "white", minSize: new go.Size(1460, 300), stroke: "black", strokeWidth: 2 },
            // new go.Binding("fill", "color"),
            new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify)),
            { padding: 12, alignment: go.Spot.TopLeft }),
          $(go.TextBlock,  // this TextBlock is only seen when the swimlane is collapsed
              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())
        )  // end Auto Panel

group template get lane

this.myDiagram.groupTemplateMap.get("Lane").resizeAdornmentTemplate =
      $(go.Adornment, "Spot",
        { minSize: new go.Size(1460, 300) },
        $(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;
        $(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;
        $(go.Panel, "Vertical",
          { cursor: 'pointer', alignment: go.Spot.BottomLeft },
            { alignment: go.Spot.Bottom, click: (event, obj) => this.addGroup(event, obj), cursor: 'pointer' },
            $(go.Shape, "PlusLine", { cursor: 'pointer', width: 8, height: 8, fill: "white", stroke: "black" })

myPAlette code

myPalette2.nodeTemplate.click = (e, obj: any) => {
      // Access the data bound to the node
      let data = obj.data;
      console.log(e, 'paletediv2click_for_palette');
      console.log(obj.part.data, 'paletediv2clickobject');

      // this.clickPalette(obj.part.data)
      this.clickPAletteForLAne(data, e, obj)


    // myPalette2.model = new go.GraphLinksModel(activities)

    // myPalette2.model.nodeDataArray = this.changeIconsForProcess;
    myPalette2.model.nodeDataArray = [
      { text: "Start",name: "Start", figure: "Ellipse", "size": "75 75", fill: "#00AD5F",source: "assets/bpmn icon/web.png", },
      { text: "Step" ,name: "Step", figure: "Ellipse", "size": "75 75", fill: "#00AD5F",source: "assets/bpmn icon/web.png" },
      { text: "DB", name: "DB", figure: "Ellipse", "size": "75 75", fill: "#00AD5F",source: "assets/bpmn icon/web.png" },
      { text: "???", name: "???", figure: "Ellipse", "size": "75 75", fill: "#00AD5F",source: "assets/bpmn icon/web.png" },
      { text: "End", name: "End", figure: "Ellipse", "size": "75 75", fill: "#00AD5F",source: "assets/bpmn icon/web.png" },
      { text: "Comment", name: "Comment", figure: "Ellipse", "size": "75 75", fill: "#00AD5F",source: "assets/bpmn icon/web.png" }

clickPAletteForLAne(obj: any, e, obj_comp_data) {

    let model = this.myDiagram.model;
    const newKey = this.getUniqueKey()

    // Check if a node with the same name already exists
    const nodes = model.nodeDataArray;
    const nodeWithSameName = nodes.find(node => node.name === obj.name);

    if (nodeWithSameName) {
      console.log('Node with the same name already exists.');
      this.service_notification.notifier(NotificationType.error, "Same name activity already exist.");
      return; // Exit the function without adding a duplicate node
    // For instance we are taking first link and removing so that we can add newLink

    // Add new node

    const newNodeData = {

      // group: "Lane1",
      // isGroup: true,

      id: 3,
      key: newKey,
      name: obj.name,
      source: obj.source,
      Associate: obj.name,
      text: obj.name,
      category: "Lane",


    if (this.currentNodeLinkData && (this.currentNodeLinkData.from || this.currentNodeLinkData.to)) {
        from: this.currentNodeLinkData.from,
        to: newKey

        from: newKey,
        to: this.currentNodeLinkData.to



    let contextMenu = document.getElementById("myPaletteDiv2");
    contextMenu.style.display = "none";

Without click on palette

after click on palette

How is this Palette being created? Is it upon click of a Link?

You need to assign the correct group to the newly created node, probably based on the group of whatever GraphObject triggered the Palette to be shown.

In this when click on link then palette data come and on click on that data that link is break and in between that new one clicked palatte data is inserted . Provide me the solution of regarding this and above image and code is given

Here’s an example of splicing a clicked Palette node into the Diagram’s selected link: https://codepen.io/jhardy/pen/VwNqNEP.