New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

I can move elements using the keyboard arrows #376

Closed
gimbel opened this Issue Oct 5, 2015 · 9 comments

Comments

Projects
None yet
6 participants
@gimbel

gimbel commented Oct 5, 2015

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

@gimbel gimbel added the modeling label Oct 5, 2015

@nikku nikku added the ready label Oct 9, 2015

@gimbel gimbel added this to the 013 - Modeling Lanes milestone Oct 12, 2015

@nikku nikku removed the ready label Oct 23, 2015

@nikku nikku modified the milestones: Backlog, 013 - Modeling Lanes Oct 23, 2015

@nikku nikku added ready and removed ready labels Oct 23, 2015

@nikku nikku removed this from the Backlog milestone Feb 14, 2018

@nikku nikku added ready and removed backlog labels Sep 24, 2018

@pinussilvestrus pinussilvestrus added in progress and removed ready labels Oct 16, 2018

@pinussilvestrus pinussilvestrus self-assigned this Oct 16, 2018

@pinussilvestrus

This comment has been minimized.

Contributor

pinussilvestrus commented Oct 16, 2018

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

@pinussilvestrus pinussilvestrus added ready and removed in progress labels Oct 16, 2018

@pinussilvestrus pinussilvestrus removed their assignment Oct 16, 2018

@barmac barmac added in progress and removed ready labels Oct 16, 2018

@barmac barmac self-assigned this Oct 16, 2018

@barmac

This comment has been minimized.

Contributor

barmac commented Oct 16, 2018

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

This comment has been minimized.

Contributor

pinussilvestrus commented Oct 17, 2018

@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

This comment has been minimized.

Member

nikku commented Oct 17, 2018

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

This comment has been minimized.

Contributor

barmac commented Oct 17, 2018

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

This comment has been minimized.

Member

nikku commented Oct 17, 2018

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

This comment has been minimized.

Contributor

barmac commented Oct 17, 2018

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

barmac added a commit that referenced this issue Oct 25, 2018

barmac added a commit that referenced this issue Oct 26, 2018

barmac added a commit that referenced this issue Oct 26, 2018

@wafflebot wafflebot bot added needs review and removed in progress labels Oct 26, 2018

@barmac

This comment has been minimized.

Contributor

barmac commented Oct 26, 2018

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

nikku added a commit that referenced this issue Oct 26, 2018

barmac added a commit that referenced this issue Oct 29, 2018

merge-me bot added a commit that referenced this issue Oct 29, 2018

@barmac

This comment has been minimized.

Contributor

barmac commented Nov 2, 2018

Closed via #887

@barmac barmac closed this Nov 2, 2018

@wafflebot wafflebot bot removed the needs review label Nov 2, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment