Question: How to Keep Edge Length Static While Dynamically Resizing Nodes in React Flow? | xyflow | Page 1

tiny quest Nov 18, 2024, 12:19 PM

#

I have a custom node component where I dynamically adjust the size of parent nodes when a child node is clicked. This is achieved by toggling a property (isVisible) in the data object, which alters the width of the node. Here’s a snippet of the component for context:

import React from 'react';
import { Handle, Position } from 'reactflow';

const CustomNode = ({ data }) => (
  <>
    <div
      style={{
        width: data.isVisible ? '50px' : '150px',
        height: '50px',
        padding: '3px',
        backgroundColor: '#FFFFFF',
        border: data.isHighlighted ? '2px solid #002953' : '0.5px solid #C5C5C5',
        borderRadius: '10px',
        display: data.isVisible ? 'block' : 'flex',
        position: 'relative',
      }}
    >
      {/* Other UI content */}
    </div>
    <Handle
      type="target"
      position={Position.Left}
      id="leftHandle"
      style={{ opacity: '0', left: data.isVisible ? '0px' : '8px' }}
    />
    <Handle
      type="source"
      position={Position.Right}
      id="rightHandle"
      style={{ opacity: '0', right: data.isVisible ? '50px' : '0' }}
    />
  </>
);

export default CustomNode;

Here’s my challenge:

When resizing the parent node (isVisible: true), the edges shrink or expand to accommodate the size of the node.
I want the edge length to remain static, ensuring that resizing the node does not affect the positions or lengths of the edges.

Could anyone guide me on how to: Maintain static edge lengths when resizing nodes?

I’ve created a sandbox to demonstrate the issue: -
https://codesandbox.io/p/live/26283239-5bac-478d-b551-29142015579e