V6: Aligning guidelines

[zhe-he]

I wrote a v6 version of the reference line plugin based on the original reference line, which supports dragging, zooming, and resizing the display of reference lines.

demo

1. Fix the bug where reference lines become unusable when the canvas is zoomed in too much or too little.

zoom.mov

2.Fix the issue of 1px line segment deviation.

1px.mov

3. Add new alignments (left-center, left-right, center-left, center-right, right-left, right-center) based on the existing alignments (left-left, center-center, right-right).

center-center.mov

4. Fix the bug in the old version where shapes cannot be fixed when horizontal and vertical auxiliary lines appear.

fix-v-h.mov

5. Add reference lines that appear during resizing and scaling.

scaling.mov

HOW TO USE: Use the same method as the old version.

import { initAligningGuidelines } from "./lib/aligning-guidelines";

initAligningGuidelines(canvas)

[Smrtnyk]

Looks amazing

[usamshen]

@zhe-he would love to use this in boardx, is this under MIT license? thanks for the great work!

[zhe-he]

Yes.
You can use it directly. If there are any bugs, please let me know, and I will make timely modifications once I see them.

[asturur]

If you want to contribute it you can open a PR @zhe-he i m not sure how this would be packaged yet, that is also why original guidelines are still there untouched

[zhe-he]

@asturur
I have submitted the PR.
#10043

[usamshen]

@zhe-he

Issue:
When zooming out on the board, multiple lines of guidelines become visible. However, when zooming in, the same guidelines are not displayed as multiple lines.

Expected Behavior:
Guidelines should be consistently visualized regardless of the zoom level. The behavior should follow the same rules whether zooming in or out.

Steps to Reproduce:

1. Zoom out on the board.
2. Observe the visualization of multiple guideline lines.
3. Zoom in to the same context.
4. Notice the discrepancy where multiple lines are no longer visible.
5. Additional Information:

Fabric.js version: V 6

Proposed Solution:
Ensure that guidelines are rendered consistently across all zoom levels, following the same visual rules.

[asturur]

You mean you would like to align with objects that are out of view?

[usamshen]

The current setting is appropriate. It should only apply to the visible widgets.

The question pertains to the unit of measurement for conflicts or tolerance in visualizing lines or snaps. Should this be based on the original pixel size or the zoomed size?

[asturur]

mmm good question.
In my opinion the guildelines and snapping logic requires a lot of options to make sense to everyone.

I think my first idea would be that you see different alignment if they do not fall in the same screen pixel at that moment, not css pixel, not canvas pixel.

The idea would be that if there is no a pixel space to draw it, is the same line