xuhongxu96 / editflow Goto Github PK

Support redo and undo.
Support keyboard shortcuts.

We should check if the layout is actually changed before setNodeLayout.

Move canvas by dragging mouse on blank space of the canvas.

Add a thumbnail that shows the framework of the whole canvas.
We may hide the thumbnail for workflow with more than 1K (or ?) nodes for the sake of performance and usability.

What "Customizable" means?

Users can do easy customization by modifying a config.
Users can do deep customization by replace them with their own components.

We want to support both scenarios.

Customizable Parts

• Canvas
  • Context Menu
• Node
  • Content
  • Style
  • Context Menu
• Port
  • Style
  • Label
  • Context Menu
• Handle
  • Style

Drag mouse from a blank space in canvas and a box selection will be created.
When mouse up, all nodes inside the box selection will be selected.

Support context menu (popup by clicking right mouse button) Canvas, Node and Port.

Let's implement our own menu component without involving any 3rd party libraries.
We will add customize support to the menu component later, so that users can use their preferred libraries to customize the menu.

Currently, editflow uses quadtree with resolution=60 to filter the nodes covered by the box (rect) and then do a fine-grained filter one by one to ensure we only select the nodes within the box.

The quadtree with resolution=60 is initially used for lazy loading and I just reuse it in box selection. But its resolution is too low to accurately select the nodes. Filtering by enumeration is inefficient when selected nodes become too many.

We need to figure out a better way. E.g. use another quadtree for current visible nodes.

It's hard to determine which port to connect to while dragging the edge. Because the port name is not easy to be figured out.
Currently, the only way to see the port name is by hovering the mouse and wait for the popup tooltip.

I think it will be much more user-friendly if port names can be always shown as long as the node has enough width.

Support copy, cut and paste nodes.

Copy will only copy the selected node info to clipboard. If there are any edges between selected nodes, the edge info should also be copied.

Cut will do the same thing with Copy and also delete the selected nodes.

Paste will add nodes and edges according to the node/edge info saved in clipboard.

We also need to have keyboard shortcuts for these actions.