Izhaki / regraph

React graph components

Home Page:https://regraph.js.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

[editor] Multi-selection dragging

Izhaki opened this issue ยท comments

Bollocks, bollocks, bollocks.

Last night it dawned on me that with multi-selection, more than one item will be moved when dragging.

It goes:

  • Given I selected a node
  • And I select another node
  • When I drag one of the nodes
  • Then both nodes should move

Trivial stuff.

The crux of the issue that if you look at various implementations out there, it is mouseDown rather than click that select an item.

This has dire consequences:

  • react-draggable: Phasing out was unjustified (although our bespoke implementation is superior in many ways, it took quite some time and yet has issues already solved in react-draggable.
  • useInteraction: The whole approach with relation to drag throttle is questionable.

Existing implemenations

Affinity designer

Single selection:

  • When I mouseDown on an item
  • Then the item should be selected

Multi selection:

  • Given I selected a node
  • When I shift-mouseDown another node
  • Then both nodes should be selected

๐Ÿ”– Multi-selection creates a selection object containing both nodes, clicking anywhere on the selection doesn't do anything. One way to look at it is that multi-selection creates a group that is then 're-selected'.

Select an already selected of multi selected:

  • Given I have two nodes selected
  • When I mouseUp one of the node
  • Then the node should be the only one selected

๐Ÿ”– This depends on how long the mouse was pressed. Short presses select; long ones do nothing.

Others

I've also checked Illustrator (bonkers and odd on that front), Reaktor, NodeBox. It's all the same - mouseDown selects.

Low level details

  • mouseDown:

    • Already selected: Do nothing.
    • Not selected: Deselect all; select.
  • mouseMove:

    • Drag selection

๐Ÿ’ก Edit policy should be able to take more than one of its kind and dispatch composite action (instead of the editor doing so)

๐Ÿค” What do we do in cases where there is no selection? Like with basic editor?

๐Ÿ‘ฑโ€โ™€๏ธ Behind the scenes the meta is added to selected (no selection feedback via editPolicy)

This implies that the move tool itself:

  • Iterates through the selection
  • Sends it to the edit policy with move request (based on type? This will mean the editor expects - or is bound to - meta).

๐Ÿค” So if something can move it must be selected?

What is actually the difference between selection and move? Selection tools seem to also be move tools!

Blimey

โ–ถ ๐Ÿ˜ฎ Selection tool is move tool!

Do Drugs not Drags

This is what happened:

  • Wanted to drag nodes.
  • Used react-draggable.
  • Was no good:
    • No SOC in code
    • Update state when uncontrolled
    • You get click after drag (although now it's clear you probably should)
  • Reluctantly decided to have a go.
  • Kept drag.

Now if mouse down selects... seems like we don't need drag at all! We can just delegate pointer events to the tools and they will do their thing.

โ–ถ No need for drag events!