When dropping groups from palettes on some existing group, the object position get reset to (0,0)

GoJS
1

What we want to achieve is drop groups on existing group. On groupTemplate mouse drop event when we handle group creating the position of new group just gets reset to (0,0). Below is the code

        const newNode = e.diagram.selection.first();

        e.diagram.commandHandler.deleteSelection();

        const transformNode = createNewZoneNode(newNode.data);
        // createNewZoneNode we added logic of creating uniqueKeyGenerator
        
       diagram.model.addNodeData({ ...transformNode });
       
       diagram.commitTransaction('new group');

Below is code for group template

  $(
    go.Group,
    {
      layerName: 'Background',
      resizable: false,
      selectable: false,
      resizeObjectName: 'SHAPE',
    },
    new go.Binding('position', 'pos', go.Point.parse).makeTwoWay(go.Point.stringify),
    $(go.Picture, new go.Binding('source', 'src'), {
      width: 210,
      height: 500,
      margin: 2,
      position: new go.Point(0, 0),
      imageStretch: go.GraphObject.Fill,
    }),
  );

And below is the code for group template that is dragged from Palette and dropped on above group template.

$(
    go.Group,
    {
      layerName: 'Deck',
      resizable: true,
      selectable: true,
      resizeObjectName: 'SHAPE',
    },
    new go.Binding('position', 'pos', go.Point.parse).makeTwoWay(go.Point.stringify),
    $(
      go.Shape,
      {
        name: 'SHAPE',
        fill: 'transparent',
        strokeWidth: 1.5,
        stroke: '#1646A8',
      },
      new go.Binding('opacity', 'isHighlighted', (h) => (h ? 0.4 : 1)).ofObject(),
      new go.Binding('figure'),
      new go.Binding('geometry', 'geo', (v) => go.Geometry.parse(v, false)),
    ),
  )
2

Maybe you can do something like:

const newNode = e.diagram.selection.first();
const loc = newNode.location.copy();
e.diagram.commandHandler.deleteSelection();
const transformNode = createNewZoneNode(newNode.data);
// createNewZoneNode we added logic of creating uniqueKeyGenerator
const nodedata = { ...transformNode };
diagram.model.addNodeData(nodedata);
const newgrp = diagram.findNodeForData(nodedata);
if (newgrp) newgrp.location = loc;
diagram.commitTransaction('new group');
3

This works. Thanks. But node gets duplicated.

4

What does createNewZoneNode(newNode.data) do?

5

Below is code fro createNewZoneNode

if (node) {
    node.key = uniqueKeyGenerator();
    node.group = 'new-group';
    node.isGroup = true;
    node.isDeleted = false;
    node.isNewNode = true;
6

Does the call to deleteSelection not delete the dropped node?
Is there only the one call to addNodeData?

I’m curious why you don’t just modify the dropped node data object?
Note, to change the key, you have to call setKeyForNodeData,
Model | GoJS API
But an alternative is to supply makeUniqueKeyFunction,
Model | GoJS API
so that you don’t need to change the key at all.

7

NodeDataArray shows correct values. It shows 2 shapes which dragged from palette. But canvas somehow shows 4 shapes copy of each 2nodes that are dragged. addNodeData is called only on mouseDrop.

8

deleteSelection is not deleting dropped node.