I can move elements using the keyboard arrows

[gimbel]

Keyboard heavy users benefit from being able to move a selection of elements via keyboard.

Tasks

Adopting the default behavior from Adobe Illustrator:

• up/down/left/right moves the selected elements
• up/down/left/right + (CTRL/CMD) moves the canvas
• Move via reasonable amount per default
• Use the SHIFT modifier to move per pixel

[pinussilvestrus]

I think we should consider implementing it into the underlying https://github.com/bpmn-io/diagram-js keyboard-listeners

[barmac]

Moving the canvas is actually already implemented as key bindings to arrows via bpmn-io/diagram-js@c77317b

The question is if it is reasonable to replace current bindings instead of leaving them as they are and adding up/down/left/right + (CTRL/CMD) to move elements. So the final bindings would be as follows:

• up/down/left/right moves the canvas (already implemented)
• up/down/left/right + (CTRL/CMD) moves the selected elementsmoves the canvas
• Move via reasonable amount per default
• Use the SHIFT modifier to move per pixel

@philippfromme @nikku @pinussilvestrus What is your opinion?

[pinussilvestrus]

@barmac I'm totally with you! I would also prefer just adding a new keyboard listener for a new functionality instead of changing a working one to a new behavior. It would be very frustrating for active users when the current experience is changing.

[nikku]

I'd look into common practices for keyboard navigation rather than sticking to / preserving the status quo.

• How are other graphical applications (Inkscape, Adobe *, Gimp, Word, PowerPoint, your local editing tool) doing it?
• Does a common behavior exist? We should adopt it.
• No common behavior exists? We should think about this again.
• Do users need to be able to configure things? Make the behavior configurable.
  (This may be introduced in future releases, too).

Our diagram-js release is already gonna be breaking due to API changes we introduced. That means it is now is a good moment to clean up. Another aspect is the fact that keyboard shortcuts are not widely used (expert feature) and the improvement was proposed as an expert feature, by an expert.

[barmac]

I've done some research on that matter and the outcome is as follows:

Behaviour/Editor	Inkscape	Adobe Photoshop	Adobe Ilustrator	Gimp	MS PowerPoint	MS Word	Keynote
move canvas	Ctrl + arrows (accelerated)	PageUp/Down, Ctrl for horizontal movement	only with Hand Tool activated with (Ctrl) + space	not by default	not applicable	arrows (move cursor)	not applicable
move selected elements	arrows	arrows for 1 pixel	arrows (user-defined increments)	arrows (Move Tool)	not by default	F2 and then arrows	arrows
move element modifier	Shift to speed up, Alt for 1 pixel	Shift to speed up	Shift to speed up	Shift to speed up	-	Ctrl to speed up moving around in a document	Shift to speed up

Summary:

• Shift is widely adopted as a modifier which speeds up the movement (10 times)
• Sole arrows seem to be dedicated for precise movement of selected elements.

My proposal for the change:

Shortcut	with selection	without selection
arrows	move elements per pixel	move canvas per 10 pixels
Shift + arrows	move elements per 10 pixels	move canvas per 100 pixels
Ctrl/Cmd + arrows	move canvas per 10 pixels	-
Ctrl/Cmd + Shift + arrows	move canvas per 100 pixels	-

The values should be configurable and with Shift the speed should be as high as 10 times the basic value (unless configured in a different way).
Defaults might be changed for the purpose of UX.

[nikku]

Great research. Two comments:

• Moving Canvas and Elements with the keyboard (without a modifier) can be something very confusing for users; I suggest to user test this, once you got a prototype to try out. The simple solution is to not move without a selection unless a modifier is pressed.
• Modifiers + Default move behavior: I like the idea of using the Keyboard to move elements with fine grained control. Need to try this out with users, too.

[barmac]

Sure, as soon as we have a prototype the final outcome might change. Thanks for comments 👍

[barmac]

Final default configuration will be as follows:

Shortcut	with selection	without selection
arrows	move elements per pixel	-
Shift + arrows	move elements per 10 pixels	-
Ctrl/Cmd + arrows	move canvas per 50 pixels	move canvas per 50 pixels
Ctrl/Cmd + Shift + arrows	move canvas per 200 pixels	move canvas per 200 pixels

[barmac]

Closed via #887