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

• [x] Draw guidelines using Q and W keys.
• [x] Move guidelines around by clicking and dragging.
• [x] Visually highlight guides on hover. Makes selecting and moving easier.
• [x] Measure distances between the selected guideline and its nearest neighbor of same direction.
• [x] 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.

[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.

[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.