Guidelines Feature in Akira

[AshishS-1123]

Summary / How this PR fixes the problem?

This PR will allow the user to draw guidelines.
Guidelines are simple horizontal or vertical lines that go from edge to edge on the canvas. They are mostly used in Image To HTML conversion for responsive design.
After this PR is done, you will be able to

• Draw guidelines using Q and W keys.
• Move guidelines around by clicking and dragging.
• Visually highlight guides on hover. Makes selecting and moving easier.
• Measure distances between the selected guideline and its nearest neighbor of same direction.
• Delete guidelines.

Steps to Test

1. Creating guidelines

• Create and artboard and bring your mouse pointer inside the artboard.
• Press Q for Horizontal and W for vertical guidelines. The guideline will be drawn at the current cursor position.
• You can create multiple such artboards with their own set of guidelines. Selecting an artboard displays its guidelines.

2. Manipulating Guidelines

• Click and drag a guideline to move it.
• Dragging a guideline outside the artboard deletes it.
• Stacking a guideline on another also deletes it.
• As you move guidelines, you will be able to see the distance of the guideline from its neighbors.

Screenshots

Known Issues / Things To Do

Some future work in next pr

1. Improve the design of the distances tooltip.
2. Show distance of a canvas item from its nearest neighbors and guidelines.
3. Use Alt + 2, Alt + 3, etc to get distance of guideline from its 2nd, 3rd closest neighbors.

[Alecaddd]

This looks very good, thank you so much.
Upon using it, there's are some bugs that should be fixed, and some basic features that should be changed.
Here's the list of things I discovered, in no particular order.

Bugs

• Create an Artboard, move it around, delete it. It seems that some guides are created around the edges of the artboard and they remain visible.
• Guides are not deleted when an artboard is delete, but they should.
• When an artboard with guides is moved, the guides don't move with it, but they should as guides should be anchored to the top/left corner of an artboard.
• Guides disappear and appear inside and outside the artboard when the artboard is moved around.

Features

• A guide should be deleted only when the user releases the mouse click after moving it to the edge. If I move a guide to the edge, but keep my mouse clicked, I expect to be able to move it back into the artboard since I didn't let go.
• Guides should be usable also in the entire canvas, not just limited to artboards. Canvas guides and artboard guides shouldn't interfere with each other.

Let me know what you think.
Great work!

[AshishS-1123]

Guides should be usable also in the entire canvas, not just limited to artboards. Canvas guides and artboard guides shouldn't interfere with each other.

Haven't figured out how to do this yet. Will work on it in the next PR.
I have done all the other things you asked for, and it should be working properly now.

Let me know if there are any other changes.

[mbfraga]

The architecture here seems not ideal, but I think it's fixable. Mainly the issue I have is storing some guidelinemodels in the instance and other in the manager. I think the ModelInstance should have the minimal amount of data needed to generate guidelines, and then the guidelinemanager would generate those based on instances.

I think that if we want this, we should start with guidelines ONLY in the canvas for the time being and try to get that right.

[Alecaddd]

There's an issue with the artboard.
It seems that guides are generated immediately around the edges of an artboard when the selection changes.
You can see these guides above the nobs.

[AshishS-1123]

These are the changes made in the latest commit.

1. Place the guide layer below the nobs layer.
2. Instead of each artboard storing guide data individually, the guide manager itself stores a map of artboard id's and their data.
3. When the artboard is being modified (scaled or moved), the guides are hidden.

P.S. The guides don't work very well if the artboard is rotated. I don't think artboard are allowed to be rotated .So I haven't handled that case.