search

daybrush / guides

A Guides component that can draw ruler and manage guidelines.
https://daybrush.com/guides/
MIT License
342 stars 46 forks source link

Snapping Issue When Using Custom Units #28

Closed joncursi closed 3 years ago

joncursi commented 3 years ago

I need to render my rulers using inches as the unit, rather than pixels. So I supply the following two props to the Guides component:

unit={1}
zoom={zoomValue * 72} // 72 px/in

where zoomValue is a decimal representing how far the user has zoomed in/out of the canvas.

The base rendering and scrolling of the rulers is working great. Here is what my 8.5x11 document looks like on the canvas:

Screen Shot 2020-12-08 at 7 58 30 AM

However, the guides cannot be placed in the correct position by the user for 2 reasons:

  1. On initial placement, the guides will "snap" to the nearest integer unit, which in my case, is to the nearest inch. Here I have demonstrated this below:

    2020-12-08 08 02 21

  2. You can eventually finagle the guide to a non-integer unit, however once the user zooms in/out (changes the zoomValue), the guides will snap again to the nearest integer (which again, in my case, is to the nearest inch). Demonstration below:

    2020-12-08 08 04 51

I have tried using the snapThreshold prop to try to make the snap threshold more granular or to even turn the snapping off altogether, but it doesn't seem to respect values less than 1.

Furthermore, when trying to display drag position via the dragPosFormat function, the value supplied into this function is a also a whole number, so if my guide is placed between 0-0.5 inches, it will tell me the drag position is 0, and if the guide is between 0.5-1.5 inches it will tell me the drag position is 1. We need more granularity in these values.

Seems like in general, we just need to allow this library to support more granular values for all the props / functionality to enable usage with custom units.

This issue may be related to https://github.com/daybrush/guides/issues/26.

daybrush commented 3 years ago

@joncursi

Guides's new version is released.

digit prop is added (default: 0) set digit 1 ~ 2

And the behavior of snapThreshold has been changed. The snapThreshold moves in px units independent of zoom.

joncursi commented 3 years ago

Awesome! Thank you @daybrush :)

satheshrgs commented 3 years ago

@joncursi I am trying to make the ruler starting 0 at the point of white space. How did you achieve that. Could you please guide me ?

image

satheshrgs commented 3 years ago

nvm i found it.. Thanks :)