Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Implement proper workspace pan and zoom capability #50

Open
passiomatic opened this issue Mar 7, 2022 · 0 comments
Open

Implement proper workspace pan and zoom capability #50

passiomatic opened this issue Mar 7, 2022 · 0 comments
Assignees
@passiomatic
Labels
enhancement New feature or request

Comments

@passiomatic
Copy link
Owner

passiomatic commented Mar 7, 2022 •
edited
Loading

Currently Elm Designer uses the native page CSS overflow and scroll behavior to allow the workspace to be bigger than the browser viewport.

We can swap the current implementation with something more polished by leveraging the Zoom abstraction from the elm-visualization package or elm-pan-and-zoom .

A first proof of concept implementation seems promising: https://ellie-app.com/gS7tKm4BVPNa1

We aim to mimic Figma and Sketch here and map UI commands as follows:

  • Zoom in/out: Cmd/Ctrl down + mouse wheel
  • Combined X/Y panning: Spacebar down + dragging
  • Horizontal translation: horizontal scrolling/wheel
  • Vertical translation: horizontal scrolling/wheel
@passiomatic passiomatic added the enhancement New feature or request label Mar 7, 2022
@passiomatic passiomatic self-assigned this Mar 7, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@passiomatic passiomatic

Labels
enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@passiomatic