search

tisoap / react-flow-smart-edge

Custom Edge for React Flow that never intersects with other nodes
https://tisoap.github.io/react-flow-smart-edge/
MIT License
242 stars 26 forks source link

Smart edges don't work as intended with vite #59

Open johnmal-dev opened 2 weeks ago

johnmal-dev commented 2 weeks ago

Describe the Bug

After switching to vite, the SmartBezierEdge edges don't work as intended.

Findings:

I attempted to install the most basic setup with and without vite.

I tried using React dev tools to see if there were any noticeable differences.

I found that when moving the nodes around, the vite project's SmartEdge children would alternate between:

  1. SmartEdge > BaseEdge
  2. SmartEdge > BezierEdge > BaseEdge

In the cra project, the SmartEdge children stayed as:

  1. SmartEdge > BaseEdge

Minimal Example

https://github.com/johnmal-dev/react-flow-vite

Steps to Reproduce the Bug or Issue

  1. Move node around
  2. Observe edge colliding with nodes

Expected behavior

I expect the edges to avoid collisions

Screenshots or Videos

Screenshot 2024-06-11 at 8 05 55 PM

Platform

Additional context

No response

kthyer commented 1 week ago

@johnmal-dev I was running into this same issue and looked into it more.

It seems that the pathfinding package that this library uses errors when trying to use smoothenPath function.

I get the error ReferenceError: assignment to undecalred variable lastValidCoord: smoothenPath Util.js:167

when I look at the code there, they don't declare the variables with var, let, or const so it is errors.

But this error only happens in dev mode, if you make a production build, it will ignore it and work.

Definitely annoying but this is a bug on the pathfinding package and not this one.

I am assuming CRA ignores these errors in dev as well.