rulers should indicate the edge of the template at 0 and grow from there

[smandepudi]

Hi i am using Angular 8.0 to build a photo editing app. I am trying to use your rulers/guides component to show with my app for editing purpose.

1. I need the rulers in such a way that the edge of the template starts at 0 and and grows from there . i am attaching what i see in Illustrator for reference. Can you please let me know how i can do this

[daybrush]

@smandepudi

scroll 380 first

[smandepudi]

Can you please explain in code?

This is what i currently have . I need the edge of the document to start at 0 instead like shown in the screen in the first comment above

[daybrush]

@smandepudi

ngOnAfterInit() {
   guides1.scroll(380);
}

[smandepudi]

I changed the Ruler units to Inches and did what you suggested. Tried scrolling to 5 but that started the ruler at 5 on the left most end . I want the edge of my document to start at 0.

ngOnAfterInit() { guides1.scroll(5); } How do i know where to start from 0 and increase from there both on the right and left of the ruler while maintaining the 0 at the edge of the document always

is there a way so i can do some thing like the following, scroll from 0 towards right starting at 300 px from the browser edge because i know that's where my document starts and then scroll from 0 to upwards on the left.

[daybrush]

@smandepudi

The position of 0 is always 0. I wonder if it will be difficult right now. I will add an option called offset later.

[smandepudi]

Thanks for your reply. I was hoping to use your tool to do something similar to how adobe applications do. The document always aligns with 0 both vertically and horizontally. so that the users know the exact measurement . i am attaching a screen shot from adobe Illustartor

[daybrush]

@smandepudi

Please refer to this link: https://codepen.io/daybrush/pen/eYJmMYZ

[smandepudi]

Thank you very much, is this using your angular rulers and guides component?

[daybrush]

@smandepudi Even if it is made of angular, it is no different.

.on("scroll", (e) => {
  horizontalGuides.scroll(e.scrollLeft);
  horizontalGuides.scrollGuides(e.scrollTop);

  verticalGuides.scroll(e.scrollTop);
  verticalGuides.scrollGuides(e.scrollLeft);
  
})

[smandepudi]

Ok thanks. I will try this and see how it works

[smandepudi]

i noticed the use of new InfiniteViewer, Moveable in the above code pen example. do i need to use this in order to get this working?also is this using your component . this also uses const viewer = new InfiniteViewer Please advise and i appreciate your help

[nitin-1926]

@daybrush this is some amazing stuff 👏🏻 . Is there any example to do the same in react using react-guides.

[satheshrgs]

@daybrush Is this Done ? Do we have a offset prop now for moving guide ?

[satheshrgs]

@smandepudi Did you find a way to acheive it ?

[smandepudi]

No I haven't yet. I can update when I do

On Thu, Jun 24, 2021, 12:46 AM Sathesh Rgs @.***> wrote:

@smandepudi https://github.com/smandepudi Did you find a way to acheive it ?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/daybrush/guides/issues/12#issuecomment-867418273, or unsubscribe https://github.com/notifications/unsubscribe-auth/ADKK7J4UOQK5IGHAK6M5YXTTULPHBANCNFSM4NNMXX4Q .