Get error after copy object

GoJS
1

Hi Admins.
I use GoJS with react. After I copy object (Ctrl+C - Ctrl+V or Press Ctrl and drag object) if I try to call myDiagram.updateAllTargetBindings(), then the location of the initial object is change to location of the copied one.

After testing I found that If I change any object property (f.i. font) then problem is lost. What could be the problem?

2

Why are you calling Diagram.updateAllTargetBindings? That should not be necessary after any operation implemented by GoJS, including the CommandHandler.copySelection command.

3

I call Diagram.updateAllTargetBindings to update object property. I update store then to update diagram I call Diagram.updateAllTargetBindings

4

After coping, positions of the objects are different.

5

How are you making changes to the data? All changes should be performed in a transaction. Normally modifications to data must be performed by calling methods on Model or setting its properties.

6

I use ‘gojs-react’. As I understand all transactions hidden in library.

7

OK. So are you are making all changes by copying, not by mutating any objects?

Note how gojs-react calls Model | GoJS API

8

Yes, I copy object, change property, and replace it in the store.

9

I cannot use GoJS methods to update store. For example: I input any property value, then I found object in store and update property (diagram.model is already update because it is part of the state) and then I call Diagram.updateAllTargetBindings to update graph

10

gojs-react will automatically update Model and Diagram state when you provide new props. You should not be calling Diagram.updateAllTargetBindings.

The gojs-react-basic sample shows one way of using gojs-react.
https://gojs.net/latest/intro/react.html

11

Ok, but what bug reason with location copied object?

13

If you are still having a problem, could you please provide relevant details? If you want us to help you, we need to understand what is going on.

14 
export const updateNodesDiagram = (nodeList, oldKey) => async (dispatch) => {
  let nodeDataArray = await dispatch(getNodeDataArray());
  nodeDataArray = nodeDataArray.map((item) => {
    const res = nodeList.find((node) => item.key === node.key || (!!oldKey && item.key === oldKey));
    if (res) {
      return res;
    }
    return item;
  });
  dispatch(actions.setSkipDiagramUpdate(false));
  dispatch(actions.setNodeDataArray(nodeDataArray));
};

function updateAllBindingsDiagram(data) {
  const node = MainDiagram.findNodeForData(data);
  if (node) {
    node.updateTargetBindings();
  }
}

const MainDiagram = $(
  go.Diagram,
  {
    draggingTool: new Extensions.GuidedDraggingTool(),
    'undoManager.isEnabled': true,
    'draggingTool.centerGuidelineColor': 'green',
    'commandHandler.archetypeGroupData': renderGroupDataModel(),
    initialAutoScale: go.Diagram.Uniform,
    handlesDragDropForTopLevelParts: true,
    contentAlignment: go.Spot.Center,
    model: $(go.GraphLinksModel, { linkKeyProperty: 'key', linkToKeyProperty: 'to', linkFromKeyProperty: 'from' }),
    click: (evt) => {
      evt.diagram.clearHighlighteds();
    },
    layout: Layouts.ArrangingLayout(),
  },
);

To update any object property I use next logic

dispatch(updateNodesDiagram(newObjectList));
newObjectList.forEach((item) => {
    updateAllBindingsDiagram(item);
  });

I did not redefine any method to copy object.

15

I’m not sure what you are doing, but it looks like what Model.mergeNodeDataArray does, as I recommended above.

16

To use Model.mergeNodeDataArray do I need update Store and then update diagram.model by Model.mergeNodeDataArray or only update diagram.model and store updated automaticly?

17

I check Model.mergeNodeDataArray and error is gone. May you describe me, why its method is work successfuly but Diagram.updateAllTargetBindings not

18

Diagram.updateAllTargetBindings can be used in situations where the node data array has been modified/mutated without calling Model.set or other Model methods. But it comes at the cost of losing the ability to support undo.

Model.mergeNodeDataArray can be used when a copy of the node data array has been modified. This includes immutable data designs.

19

Mutated is changing key or not? Could you describe?

20

Keys must stay the same – they are used to quickly identify the existing objects that represent the “same” entity.

21

What are differences between mutation and modified?