How the Path tool should behave

[Alecaddd]

After PR #663 we got an initial implementation for the Path/Vector tool.
Let's use this discussion to define its behavior and all related functionalities.

Path Creation

• Press V to enter Path Mode.
• Click on the Canvas to start adding points.
• Press ENTER or ESC to exit Path Mode in the current state (no autoclosing).

Draw straight lines

• Click and release to create the first point, click and release on another location to create another point and draw a straight line.
• Hold SHIFT to force the location of the new point horizontally or vertically snapped to the previous point. Guides from a view layer should be generated to guide the user.

Draw curved lines

• Click and release to create the first point, click and drag without releasing to create a curved line and control the bezier curve.
• Hold SHIFT to force the bezier curve handles to be horizontally or vertically snapped to the canvas.

Auto close path

• When hovering over the starting point during path editing with an open path, a snapping effect should be activated and the starting point should be highlighted with a view layer to represent the potential "closing" action on click.
• Click on the starting point, the path should close and we should exit Path Mode.
• Double click anywhere when the path is open and a straight line should connect the end point with the starting point, the path should close and we should exit Path Mode.

Edit path

• Double click on a path item.
• Select a path item and press ENTER.

Double clicking on any other canvas item should be handled separately in another discussion.

[amxmln]

Sounds pretty intuitive to me! 👍 The only thing I'm wondering about is using the V shortcut, which in many other applications actuay activates the cursor / transform tool.

Personally, I'm a big fan of Figma's vector networks, i.e. that one point can have more than two lines connected to it. It makes it incredibly efficient to draw and edit things like line icons and other illustrations with intersecting lines.

I'd also appreciate a form of smart snapping relating existing points, perhaps even of other nearby shapes.

And it would be great to have an option for creating polygons that consist of multiple disconnected shapes, i.e. the last point should be selected to continue the line from there, but if it's not, a new, disconnected point is created.

I know these features are quite advanced and probably out of scope initially, but I wanted to suggest them anyway for future reference. 😊 Keep up the great work! 🎉

[Alecaddd]

The only thing I'm wondering about is using the V shortcut, which in many other applications actuay activates the cursor / transform tool.

The default tool of Akira is the cursor/selection/transform tool, which doesn't need a shortcut to be activated since it's considered the default state. When you enter another state (add rectangle, add vector, add image, etc) you can press ESC to go back to the default cursor state, but nonetheless you will go back to the state right after your current action is completed.

Personally, I'm a big fan of Figma's vector networks, i.e. that one point can have more than two lines connected to it. It makes it incredibly efficient to draw and edit things like line icons and other illustrations with intersecting lines.

Indeed, I like a lot of the features from Figma and with time I really want to implement them as much as possible.

I'd also appreciate a form of smart snapping relating existing points, perhaps even of other nearby shapes.

Yes, that will happen later.

[brigazvi]

The player need an option to control the kind of node he is drawing. The default should be node with mirrored handles in terms of angle and position. If he press and hold some key, he can control the position of one of the handles. If he press and hold another key, he can also control the angle of this handle.

[Alecaddd]

You're talking about controlling the bezier curves, which is indeed planned for the future, adding the ability to control the bezier curve of a point in all different scenarios.

[Alecaddd]

An initial implementation of the path tool is now in the main branch, actually called Vector tool which can be triggered with the V shortcut.

Big shout out to @AshishS-1123 for his amazing work on this initial milestone.

Next on the list to improve the path tool is:

• Change cursor to a "grab hand" when the hit area of a vertex or bezier curve controller is hovered (to prevent accidental click)
• Implement proximity snap to close path (same magnetic threshold used for the guides)

More thing to come later...