jgraph / drawio

draw.io is a JavaScript, client-side editor for general diagramming.
https://www.drawio.com
Other
40.75k stars 7.58k forks source link

Axis-aligned line/arrow hotkey #4656

Open taktoa opened 5 days ago

taktoa commented 5 days ago

Is your feature request related to a problem? Please describe. I've been migrating from Google Drawings to draw.io, and I really miss the ability to force a line to be axis-aligned by holding the shift key while dragging an endpoint.

Describe the solution you'd like I don't mind the default behavior staying as is, but I'd really like it if there was a preference that could be configured to make the behavior of shift one where axis-alignment is forced while dragging around the endpoint of a line or arrow. A button that forces all the selected lines/arrows to be axis aligned, while respecting how they are connected together, would be even more powerful, but I realize that would be pretty hard to implement (requires solving a linear system of equations?).

Describe alternatives you've considered It might seem like merely using the grid is enough to get the desired behavior, but that interacts poorly with custom connection points. For example, if you take a rectangle, delete the bottom connection points, and then add 8 connection points to the bottom, then those 8 connection points will be evenly spaced with 7 gaps between them (plus 2 gaps on either side). Hence, the spacing between adjacent points will be rectangle edge length / 9, which is not going to be a regular number of grid squares.

So, if you want to connect stuff with custom connection points using the grid, you end up with subtly not-axis-aligned stuff everywhere, which is ugly. You really want the ability to just deal in geometric properties like axis alignment. Although you could manually specify custom connection points that are grid-aligned, it is very tedious to get right.

davidjgraph commented 5 days ago

What is an "axis-aligned* edge exactly?

taktoa commented 5 days ago

If the edge is represented by a pair of points, it would be one like (x1, y) -> (x2, y) or (x, y1) -> (x, y2), i.e.: a line that is vertical or horizontal.

davidjgraph commented 5 days ago

How is that different from the orthogonal edge style?

taktoa commented 4 days ago

The orthogonal edge style creates a "kink" in an edge (x1, y1) -> (x2, y2) when (x1 != x2) && (y1 != y2). The desire here is to force the edge to be vertical or horizontal, and never have a kink. The easiest way to demonstrate this behavior is to go to https://drawings.google.com (assuming you have a logged-in Google account), click the line tool, press and hold the left mouse button in the canvas, and drag to another point while holding the shift key. You'll notice that the line is forced to the nearest multiple of 15 degrees (I only need 90 degree snapping).

taktoa commented 4 days ago

Incidentally, if you're very careful, you can get draw.io to snap to horizontal/vertical on an off-grid line, but it is very tedious, because if you move the mouse even slightly, it will snap to the grid instead. The shift key would force it to ignore the grid and stay horizontal/vertical instead.

davidjgraph commented 4 days ago

If the orthogonal edge style isn't orthogonal then we'd need a bug report with a reproduction case.

taktoa commented 2 days ago

You are right that if you use the orthogonal edge style and your endpoints are already aligned horizontally or vertically, the line will be horizontal or vertical. A use case that this doesn't help with is one where you want to combine non-grid-aligned connection points with waypoints. The waypoint will naturally be grid-aligned. But this problem does go beyond the initially-suggested feature request.

image

taktoa commented 2 days ago

(editing previous comment, sent it too early)