bumbu/svg-pan-zoom

Separate Zoom for X-Y axis

Open

#176 opened on Dec 15, 2015

View on GitHub
 (10 comments) (0 reactions) (0 assignees)JavaScript (1,585 stars) (383 forks)batch import
discussionenhancementhelp wanted

Description

Hi,

I'd like to have separate X/Y scales when zooming. In other words, I'd like to return {x: true, y:false} from beforeZoom, as this is done in beforePan.

I have two use cases in my project:

  • A timeline, where you can chose a date. If the timeline is horizontal, you don't have to scale the y axis, but there is a need to scale the x axis
  • A line chart, where i'd like to have different scales on my two axis.

Implementation details:

  • Add an option named enableSeparateZooms, default: false.
  • If this option is set, each zoom-related options handles {x:, y:}-like zooms, if not set, the current behavior is kept
  • Add a method panZoomToRect({x,y,width,height}) to pan and zoom to a specific viewbox, potentially with different x/y zoom factors. width or height may be ommited (but not both), in which case the current scale ratio is kept

What do you think about the idea? Is there anything else to add ? I can try to make the PR if you want.

Contributor guide

Tech stack
javascript
Domain
frontend
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Understanding of SVG zoom/panJavaScriptFamiliarity with the library's codebase
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60
Research direction
Examine the existing zoom logic in the repository, particularly the `beforeZoom` callback and the `zoom` method. Look at how `beforePan` already returns separate x/y values as a model. The implementation will require adding an option (e.g., `enableSeparateZooms`), modifying zoom related functions to handle x/y separately when the option is set, and implementing a `panZoomToRect` method. Review the comments in the issue for additional details on desired behavior.