v12 - Repetitive calling onNodeChanges after add

[tiny cipher]

After migrating to v12,
Programmatically (onDrop) adding of nodes causing reactflow to repetitively call onNodeChanges despite custom node having fix width & height.

onNodeChanges is using the provided applyNodeChanges function (uncommited)

[tiny cipher]

Code Repo:
https://github.com/PlutoyDev/satisfactory-planning-tool

v11: on main branch
v12: on xyflow-latest

[dusky grove]

Where can we find the flow?

[white grove]

Not exactly sure why you create your own "change" in here

    onDrop: e => {
      e.preventDefault();
      const { rfInstance, selNode, onNodesChange, onSelectionChange } = get();
      const type = e.dataTransfer.getData('application/reactflow') as NodeTypeKeys;
      if (!type || !rfInstance) {
        return;
      }
      const position = rfInstance.screenToFlowPosition({ x: e.clientX, y: e.clientY });
      const node = { id: nanoid(), type, position, selected: true, data: {} };
      const changes: NodeChange[] = [{ type: 'add', item: node }];
      if (selNode) {
        changes.push({ type: 'select', id: selNode.id, selected: false });
      }
      onNodesChange(changes);
      onSelectionChange({ nodes: [node], edges: [] });
    },

instead of using the built-in addNodes or setNodes function 🤔

Is there a specific reason for that?

[tiny cipher]

The flow is in here, https://github.com/PlutoyDev/satisfactory-planning-tool/blob/main/src%2Fpages%2FProductionGraph.tsx

[tiny cipher]

The onNodeChange function also helps with saving the changes (after denounce).

Iirc in v11, when setNodes is called, onNodeChange will be called with reset changes for all the nodes in the array.

[tiny cipher]

I will try to debug it more tomorrow / weekend.

This repetitive behavior isn't present in v11.
Changes made doesn't seem to introduce the bug either, but i might be wrong .

[dusky grove]

the issue is that you are not applying the dimensions correctly

this

if (dimensions) {
  node.width = dimensions.width;
  node.height = dimensions.height;
}

should be

if (dimensions) {
  node.computed = node.computed ?? {};
  node.computed.width = dimensions.width;
  node.computed.height = dimensions.height;
}

[tiny cipher]

I've changed it when updating to v12.

https://github.com/PlutoyDev/satisfactory-planning-tool/compare/main...968be92#diff-5fa6cb1cd1757bec3b90d35b31348105d3134feb737f6c00a47bd083b3167c2fR491

[tiny cipher]

I tried using the provided applyNodeChanges and it's still re-calling the function multiple times.

[dusky grove]

which changes are coming in?

do your nodes change size after getting initialized?

[tiny cipher]

At the point of migration to v12, no

There was a commit on the main branch (using v11) the recipeNode will change size when the user changes its recipe, requires user input.

[tiny cipher]

Add node change

[dusky grove]

you say that you get changes of type "add" ?