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

Added moveDuration option to adjust movement speed during smoothMoveTo #332

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Added moveDuration option to adjust movement speed during smoothMoveTo #332

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 27 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,33 @@ instance.dispose()
This will make sure that all event handlers are cleared and you are not leaking
memory

## Panzoom options

| Name | Description | Default | Type |
| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------ | ----------------------- |
| autocenter | When set to `true`, the content is automatically centered in the panzoom container. | undefined | boolean |
| beforeMouseDown | A function called before a mouse down event occurs. | undefined | (e: MouseEvent) => void |
| beforeWheel | A function called before a mouse wheel event occurs. You can use it to handle or block the event beforehand. | undefined | (e: WheelEvent) => void |
| bounds | Sets the boundaries for panning and zooming. If set to `true`, it enables default boundaries, or you can use a `Bounds` object to define custom boundaries with `{left, top, right, bottom}`. | undefined | boolean \| Bounds |
| boundsPadding | Sets padding between the boundary and the content. It ensures that the content doesn’t completely move out of bounds. | 0.05 | number |
| controller | A controller you can use to manually control panzoom actions. This allows external control of the panzoom state. | undefined | PanZoomController |
| enableTextSelection | When set to `true`, it allows text selection within the panzoom area. By default, text selection is disabled. | true | boolean |
| filterKey | A function that only enables panzoom if a certain key is pressed. If the function returns `true`, panzoom will be enabled. For example, you could require holding a key to allow zooming or panning. | undefined | () => boolean |
| initialX | Sets the initial X position when panning/zooming starts. | 0 | number |
| initialY | Sets the initial Y position when panning/zooming starts. | 0 | number |
| initialZoom | Sets the initial zoom level when panning/zooming starts. | 1 | number |
| maxZoom | Sets the maximum zoom level. The content cannot be zoomed in beyond this level. | Number.POSITIVE_INFINITY | number |
| minZoom | Sets the minimum zoom level. The content cannot be zoomed out beyond this level. | 0 | number |
| moveDuration | Time in milliseconds it takes to smoothly move to a new position during the `smoothMoveTo` action. | 400 | number |
| onClick | A function called when a single click event occurs, allowing you to handle click actions. This is distinct from a double-click event. | undefined | (e: Event) => void |
| onDoubleClick | A function called when a double-click event occurs. | undefined | (e: Event) => void |
| onTouch | A function called when a touch event occurs. | undefined | (e: TouchEvent) => void |
| pinchSpeed | Sets the speed at which zooming happens when using a pinch gesture on touch devices. Higher values mean faster zooming. | 1 | number |
| smoothScroll | When set to `true`, smooth scrolling effects are applied during panning and zooming. | true | boolean |
| transformOrigin | Sets the zoom origin point, similar to the `transform-origin` property in CSS. It determines the point around which zooming occurs. | undefined | TransformOrigin |
| zoomDoubleClickSpeed | Controls how fast zooming happens when double-clicking. Higher values mean faster zooming. | 1.75 | number |
| zoomSpeed | Sets the zooming speed when using the mouse wheel. Higher values mean faster zooming in or out. | 1 | number |

## Events notification

The library allows to subscribe to transformation changing events. E.g. when
Expand Down
2 changes: 1 addition & 1 deletion demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
svg {
width: 100%;
height: 100%;
position: absolute;
/*position: absolute;*/
top: 0;
left: 0;
}
Expand Down
19 changes: 11 additions & 8 deletions dist/panzoom.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ var makeSvgController = require('./lib/makeSvgController.js');
var makeDomController = require('./lib/makeDomController.js');

var defaultZoomSpeed = 1;
var defaultMoveDuration = 400; // ms
var defaultDoubleTapZoomSpeed = 1.75;
var doubleTapSpeedInMS = 300;
var clickEventTimeInMS = 200;
Expand Down Expand Up @@ -69,6 +70,7 @@ function createPanZoom(domElement, options) {
var beforeWheel = options.beforeWheel || noop;
var beforeMouseDown = options.beforeMouseDown || noop;
var speed = typeof options.zoomSpeed === 'number' ? options.zoomSpeed : defaultZoomSpeed;
var moveDuration = typeof options.moveDuration === 'number' ? options.moveDuration : defaultMoveDuration;
var transformOrigin = parseTransformOrigin(options.transformOrigin);
var textSelection = options.enableTextSelection ? fakeTextSelectorInterceptor : domTextSelectionInterceptor;

Expand Down Expand Up @@ -448,14 +450,14 @@ function createPanZoom(domElement, options) {
var dx = container.width / 2 - cx;
var dy = container.height / 2 - cy;

internalMoveBy(dx, dy, true);
internalMoveBy(dx, dy, true, moveDuration);
}

function smoothMoveTo(x, y){
internalMoveBy(x - transform.x, y - transform.y, true);
internalMoveBy(x - transform.x, y - transform.y, true, moveDuration);
}

function internalMoveBy(dx, dy, smooth) {
function internalMoveBy(dx, dy, smooth, duration) {
if (!smooth) {
return moveBy(dx, dy);
}
Expand All @@ -468,6 +470,7 @@ function createPanZoom(domElement, options) {
var lastY = 0;

moveByAnimation = animate(from, to, {
duration: duration,
step: function (v) {
moveBy(v.x - lastX, v.y - lastY);

Expand Down Expand Up @@ -1327,12 +1330,12 @@ function makeSvgController(svgElement, options) {
}

function getBBox() {
var bbox = svgElement.getBBox();
var boundingBox = svgElement.getBBox();
return {
left: bbox.x,
top: bbox.y,
width: bbox.width,
height: bbox.height,
left: boundingBox.x,
top: boundingBox.y,
width: boundingBox.width,
height: boundingBox.height,
};
}

Expand Down
2 changes: 1 addition & 1 deletion dist/panzoom.min.js
View file
Open in desktop

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ declare module "panzoom" {
boundsPadding?: number;
zoomDoubleClickSpeed?: number;
zoomSpeed?: number;
moveDuration?: number;
initialX?: number,
initialY?: number,
initialZoom?: number,
Expand Down
9 changes: 6 additions & 3 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ var makeSvgController = require('./lib/makeSvgController.js');
var makeDomController = require('./lib/makeDomController.js');

var defaultZoomSpeed = 1;
var defaultMoveDuration = 400; // ms
var defaultDoubleTapZoomSpeed = 1.75;
var doubleTapSpeedInMS = 300;
var clickEventTimeInMS = 200;
Expand Down Expand Up @@ -68,6 +69,7 @@ function createPanZoom(domElement, options) {
var beforeWheel = options.beforeWheel || noop;
var beforeMouseDown = options.beforeMouseDown || noop;
var speed = typeof options.zoomSpeed === 'number' ? options.zoomSpeed : defaultZoomSpeed;
var moveDuration = typeof options.moveDuration === 'number' ? options.moveDuration : defaultMoveDuration;
var transformOrigin = parseTransformOrigin(options.transformOrigin);
var textSelection = options.enableTextSelection ? fakeTextSelectorInterceptor : domTextSelectionInterceptor;

Expand Down Expand Up @@ -447,14 +449,14 @@ function createPanZoom(domElement, options) {
var dx = container.width / 2 - cx;
var dy = container.height / 2 - cy;

internalMoveBy(dx, dy, true);
internalMoveBy(dx, dy, true, moveDuration);
}

function smoothMoveTo(x, y){
internalMoveBy(x - transform.x, y - transform.y, true);
internalMoveBy(x - transform.x, y - transform.y, true, moveDuration);
}

function internalMoveBy(dx, dy, smooth) {
function internalMoveBy(dx, dy, smooth, duration) {
if (!smooth) {
return moveBy(dx, dy);
}
Expand All @@ -467,6 +469,7 @@ function createPanZoom(domElement, options) {
var lastY = 0;

moveByAnimation = animate(from, to, {
duration: duration,
step: function (v) {
moveBy(v.x - lastX, v.y - lastY);

Expand Down