search

boardx / canvasx

CanvasX is an open-source digital whiteboard that prioritizes a sticky notes experience to enhance real-time visual collaboration for teams and individuals.
https://boardx-demo.pages.dev/
Other
1 stars 0 forks source link

Bug in XConnector Bounding Box Calculation #2

Open usamshen opened 1 month ago

usamshen commented 1 month ago

Description:

There is an issue with the XConnector class when calculating the bounding box. The XConnector class, which extends from fabric.Path, has four primary data points: fromPoint, toPoint, controlPoint1, and controlPoint2. The path is calculated based on these points. However, after the path is calculated, using it to calculate the bounding box results in incorrect dimensions.

Steps to Reproduce: Create an instance of XConnector with two XRectNotes, Move the ControlPoints of XConnector Call the method to calculate the path based on these points. Use the calculated path to compute the bounding box.(_calcDimensions and related methods from Path)

Expected Behavior: The bounding box should accurately reflect the dimensions of the path created by the fromPoint, toPoint, controlPoint1, and controlPoint2.

Actual Behavior: The calculated bounding box does not correctly encompass the path, leading to visual and functional inaccuracies.

Additional Information: The issue appears to stem from the _calcDimensions method. The problem persists in both curved modes of the XConnector.

Environment: Fabric.js version: V6.0.1 Browser: Chrome OS: Mac

Possible Solution: Review and correct the _calcDimensions method to ensure the bounding box calculation accurately reflects the path created by fromPoint, toPoint, controlPoint1, and controlPoint2.

asturur commented 1 month ago

started to look at this, and the basic stuff gets complicated quickly because the controls need to be defined in a particular way. I had in the backlog to do proper controls for Path in fabricJS and today i did this: https://github.com/fabricjs/fabric.js/pull/9998

This sits in a single file with fabricJS imports and so i should be able to reuse it in your setup without going to update fabric fully.

I ll test it asap

usamshen commented 1 month ago

looks great! I open the codeSandbox, but didn't see the prototype yet, how i can run the example?

Two curved lines can connect smoothly if the two control points are on the same line?

image