akiraux / Akira

Native Linux App for UI and UX Design built in Vala and GTK
GNU General Public License v3.0
5.24k stars 203 forks source link

Guidelines Feature in Akira #669

Open AshishS-1123 opened 2 years ago

AshishS-1123 commented 2 years ago

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

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

guideline screen (online-video-cutter com)

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 commented 2 years ago

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 commented 2 years ago

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.