obsidian-advanced-canvas
obsidian-advanced-canvas copied to clipboard
Developer-Mike
[FR] Automatic edge side
This Plugin should be added to your suite of enhancements. This plugin works. But it's not updated real-time. The user has to manually trigger it to rearrange the connections. I hope you'd be able to fix it
- Some users might need to retain the side the Connection/Arrow was made in certain use-cases. But most of the time, the Arrows dynamically taking the shortest path as someone drags a note is an essential feature in any Canvas based app.
Totally agree, very much looking forward to it.
Expectation: the arrow connection position will be automatically adjusted.
Further explanation: automatic adjustment of the arrow connection position is expected not only up, down, left, right four fixed orientation, but according to the center of the two nodes of the angle calculated, which will make the display effect is very elegant and beautiful, and not just mechanical automatically adjusted to the top and bottom of the left and right of a fixed connection point.
I'll give you a few examples, such as Scapple's flexible connecting lines, which are very nice to look at, and miro, and Scrintal, etc., which all calculate where the arrows are pointing based on the center point of the two nodes:
Very good tool.@Developer-Mike
I'm a bit undecided about how this will get implemented. Should the feature allow the control of each side of the edge individually (e.g. one side is locked and the other one is automatically placed)? And how should this get integrated into the current UI of the canvas?
Here's my professional translation:
Let me share some thoughts. These are two different use cases without functional overlap (currently, I haven't seen any product that combines both fixed-edge and flexible connections):
Use Case 1: Connections based on four edges (current functionality) Use Case 2: Point-to-point connections based on block centers, where connection lines always point to the centers of two blocks regardless of their positions.
Possible interaction design solutions:
1，When dragging a connection line from any edge of Block A to a non-edge area of Block B, Block B is highlighted entirely. The connection is established upon release. (Recommended, efficient)
Note: Details, it is simply using the edge of Block A to pull out a connection line, not connecting based on the edge of Block A.
2，Directly drag Block A onto Block B, which highlights Block B, and the connection is established upon release. (Recommended, efficient, reference: Scapple)
Thank you very much to the developers, this feature is currently very needed.
Thank you @zixude for sharing your ideas. Unfortunately, modifying/patching the edge dragging behaviour isn't possible due to the way it is implemented by the core canvas plugin. This means, that any dragging gestures can't be implemented at all.
I thought about the optimal UX for this feature too and, unfortunately, came to the same conclusion as you.
Alright, let me think. Due to external plugin constraints, we can only design this behavior independently from the core plugin functionality.
——Option A (Recommended)
When hovering over a block, an additional anchor point will be displayed in the top-right corner by default（Perhaps other better positions.） Hold and drag this anchor point to create connection lines.
——Option B (Generally Recommended)
After selecting Block A, add a new command in the menu to trigger the connection operation. Click the command. Preview the connection line (pointing from Block A to the mouse cursor). In the connection waiting state, click Block B to complete the connection. Notes:
If you press ESC or right-click before completing the connection, it will exit the connection waiting state. The arrow direction and style of the connection line will inherit the currently selected style. ··· Essentially, triggering through commands operates outside the scope of the core plugin, offering an alternative way to create connection lines. Although it's not as efficient as direct dragging, it's still quite effective.
For your reference.
I'm a bit undecided about how this will get implemented. Should the feature allow the control of each side of the edge individually (e.g. one side is locked and the other one is automatically placed)? And how should this get integrated into the current UI of the canvas?
-
i feel 'auto-positioning edges feature' will be apt for most use cases. making this the default behavior will be optimal. especially when it is updated realtime, it'd feel super intuitive & would blend so well users will barely notice its existence, especially when they are on the go trying to organize notes visually.
-
although less frequent, it'd feel essential when user wants to lock either side of the edge. this can be facilitated by adding an 'edge-lock-icon' to the "built-in edge-options-popup" which appears when an edge is selected (image attached below)
- this icon has 'four-states'
- default: unlocked
- first click: left is locked
- second click: right is locked
- third click: both sides of the edges are locked
- this icon has 'four-states'
note: to my knowledge, drag to select does not work on edges. the only way to multi-select edges is by shift+clicking each edge one-by-one since. this can become a problem when a large number of edges are to be selected. if its not too much work, please consider looking into it.
sorry for the late response. i hope this answers your question. please feel free to hit me up
Okay, I've managed to bypass the patching of the related method. This means:
When dragging a connection line from any edge of Block A to a non-edge area of Block B, Block B is highlighted entirely. The connection is established upon release.
this is possible. Additionally, in general, I like this way of implementing this feature the most.
A bit of a downside is, that when creating a new edge, you can't create one that isn't assigned to one specific side (The starting point). A setting to change the default behaviour for new edges would make the most sense, I guess.