search

xyflow / xyflow

React Flow | Svelte Flow - Powerful open source libraries for building node-based UIs with React (https://reactflow.dev) or Svelte (https://svelteflow.dev). Ready out-of-the-box and infinitely customizable.
https://xyflow.com
MIT License
25.92k stars 1.66k forks source link

NodeResizer doesn't trigger a re-render for memoized custom nodes #3725

Closed leighton-carr closed 11 months ago

leighton-carr commented 11 months ago

Describe the Bug

The default NodeResizer is not triggering a node re-render for a memoized custom node, but only on the bottom-right corner. I assume this has something to do with top/left not updating for any size changes from the bottom right. This affects custom graphics elements like SVGs which do not updated because the base node element is not re-rendered.

Your Example Website or App

https://codesandbox.io/p/sandbox/fancy-cloud-fqqqp9

Steps to Reproduce the Bug or Issue

  1. Go to attached codesandbox
  2. Open console
  3. Resize custom node using bottom-right resize handle
  4. Note no console log
  5. Resize custom node using any other resize handle

Expected behavior

As a user I expect the custom node to be re-rendered for all resize handles when following the recommended pattern of memoizing custom nodes. This will allow me to update SVG shapes within the node without handling events myself.

Screenshots or Videos

https://github.com/xyflow/xyflow/assets/18201458/ea37bc30-098c-44f8-9b27-699c8cc372ee

Platform

Additional context

We have a pro membership through another developer during our PoC phase. DM for details if required.

moklick commented 11 months ago

This is meant to be a feature 😅 But I understand that it wasn't a good idea and we will probably change it with the next major release. The reason for this is that we don't pass the dimensions to the custom node to safe a re-render when nodes are getting initialized.

You can easily ~fix it on your end by getting the node dimensions from the store https://codesandbox.io/p/sandbox/young-meadow-f5spz5?file=%2FCustomResizerNode.js%3A10%2C1-14%2C1