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

Fix #562 enhance zoom origin behavior when using icons in the control bar to zoom image #615

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Fix #562 enhance zoom origin behavior when using icons in the control bar to zoom image #615

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
97c5f55
fix(zoom): correct zoom origin behavior
SusieWen777 Oct 20, 2023
7583a74
fix(zoom): update comments related to zoom origin behavior
SusieWen777 Oct 20, 2023
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
32 changes: 27 additions & 5 deletions dist/viewer.common.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
* Copyright 2015-present Chen Fengyuan
* Released under the MIT license
*
* Date: 2023-09-17T03:16:38.052Z
* Date: 2023-10-20T01:08:38.355Z
*/

'use strict';
Expand Down Expand Up @@ -1199,13 +1199,24 @@ var render = {

var events = {
bind: function bind() {
var _this = this;
var options = this.options,
viewer = this.viewer,
canvas = this.canvas;
var document = this.element.ownerDocument;
addListener(viewer, EVENT_CLICK, this.onClick = this.click.bind(this));
addListener(viewer, EVENT_DRAG_START, this.onDragStart = this.dragstart.bind(this));
addListener(canvas, EVENT_POINTER_DOWN, this.onPointerDown = this.pointerdown.bind(this));
// Use the new event binding to replace the original binding.
addListener(canvas, EVENT_POINTER_DOWN, function (event) {
_this.lastPointerPosition = {
x: event.pageX,
y: event.pageY
};
// Then call the original event handler function.
if (_this.pointerdown) {
_this.pointerdown(event);
}
});
addListener(document, EVENT_POINTER_MOVE, this.onPointerMove = this.pointermove.bind(this));
addListener(document, EVENT_POINTER_UP, this.onPointerUp = this.pointerup.bind(this));
addListener(document, EVENT_KEY_DOWN, this.onKeyDown = this.keydown.bind(this));
Expand Down Expand Up @@ -2239,6 +2250,16 @@ var methods = {
naturalWidth = imageData.naturalWidth,
naturalHeight = imageData.naturalHeight;
ratio = Math.max(0, ratio);

// After determining the zoom ratio, check if a pivot has already been provided.
// If not, and we have the last pointerdown position, use it to set the pivot.
if (!pivot && this.lastPointerPosition) {
var offset = getOffset(this.viewer);
pivot = {
x: this.lastPointerPosition.x - offset.left,
y: this.lastPointerPosition.y - offset.top
};
}
if (isNumber(ratio) && this.viewed && !this.played && (_zoomable || options.zoomable)) {
if (!_zoomable) {
var minZoomRatio = Math.max(0.01, options.minZoomRatio);
Expand Down Expand Up @@ -2280,15 +2301,15 @@ var methods = {
}
this.zooming = true;
if (_originalEvent) {
var offset = getOffset(this.viewer);
var _offset = getOffset(this.viewer);
var center = pointers && Object.keys(pointers).length > 0 ? getPointersCenter(pointers) : {
pageX: _originalEvent.pageX,
pageY: _originalEvent.pageY
};

// Zoom from the triggering point of the event
imageData.x -= offsetWidth * ((center.pageX - offset.left - x) / width);
imageData.y -= offsetHeight * ((center.pageY - offset.top - y) / height);
imageData.x -= offsetWidth * ((center.pageX - _offset.left - x) / width);
imageData.y -= offsetHeight * ((center.pageY - _offset.top - y) / height);
} else if (isPlainObject(pivot) && isNumber(pivot.x) && isNumber(pivot.y)) {
imageData.x -= offsetWidth * ((pivot.x - x) / width);
imageData.y -= offsetHeight * ((pivot.y - y) / height);
Expand Down Expand Up @@ -2966,6 +2987,7 @@ var Viewer = /*#__PURE__*/function () {
this.zooming = false;
this.pointerMoved = false;
this.id = getUniqueID();
this.lastPointerPosition = null; // Initialize the lastPointerPosition attribute
this.init();
}
_createClass(Viewer, [{
Expand Down
2 changes: 1 addition & 1 deletion dist/viewer.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
* Copyright 2015-present Chen Fengyuan
* Released under the MIT license
*
* Date: 2023-09-17T03:16:35.830Z
* Date: 2023-10-20T01:08:36.163Z
*/

.viewer-zoom-in::before, .viewer-zoom-out::before, .viewer-one-to-one::before, .viewer-reset::before, .viewer-prev::before, .viewer-play::before, .viewer-next::before, .viewer-rotate-left::before, .viewer-rotate-right::before, .viewer-flip-horizontal::before, .viewer-flip-vertical::before, .viewer-fullscreen::before, .viewer-fullscreen-exit::before, .viewer-close::before {
Expand Down
32 changes: 27 additions & 5 deletions dist/viewer.esm.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
* Copyright 2015-present Chen Fengyuan
* Released under the MIT license
*
* Date: 2023-09-17T03:16:38.052Z
* Date: 2023-10-20T01:08:38.355Z
*/

function ownKeys(e, r) {
Expand Down Expand Up @@ -1197,13 +1197,24 @@ var render = {

var events = {
bind: function bind() {
var _this = this;
var options = this.options,
viewer = this.viewer,
canvas = this.canvas;
var document = this.element.ownerDocument;
addListener(viewer, EVENT_CLICK, this.onClick = this.click.bind(this));
addListener(viewer, EVENT_DRAG_START, this.onDragStart = this.dragstart.bind(this));
addListener(canvas, EVENT_POINTER_DOWN, this.onPointerDown = this.pointerdown.bind(this));
// Use the new event binding to replace the original binding.
addListener(canvas, EVENT_POINTER_DOWN, function (event) {
_this.lastPointerPosition = {
x: event.pageX,
y: event.pageY
};
// Then call the original event handler function.
if (_this.pointerdown) {
_this.pointerdown(event);
}
});
addListener(document, EVENT_POINTER_MOVE, this.onPointerMove = this.pointermove.bind(this));
addListener(document, EVENT_POINTER_UP, this.onPointerUp = this.pointerup.bind(this));
addListener(document, EVENT_KEY_DOWN, this.onKeyDown = this.keydown.bind(this));
Expand Down Expand Up @@ -2237,6 +2248,16 @@ var methods = {
naturalWidth = imageData.naturalWidth,
naturalHeight = imageData.naturalHeight;
ratio = Math.max(0, ratio);

// After determining the zoom ratio, check if a pivot has already been provided.
// If not, and we have the last pointerdown position, use it to set the pivot.
if (!pivot && this.lastPointerPosition) {
var offset = getOffset(this.viewer);
pivot = {
x: this.lastPointerPosition.x - offset.left,
y: this.lastPointerPosition.y - offset.top
};
}
if (isNumber(ratio) && this.viewed && !this.played && (_zoomable || options.zoomable)) {
if (!_zoomable) {
var minZoomRatio = Math.max(0.01, options.minZoomRatio);
Expand Down Expand Up @@ -2278,15 +2299,15 @@ var methods = {
}
this.zooming = true;
if (_originalEvent) {
var offset = getOffset(this.viewer);
var _offset = getOffset(this.viewer);
var center = pointers && Object.keys(pointers).length > 0 ? getPointersCenter(pointers) : {
pageX: _originalEvent.pageX,
pageY: _originalEvent.pageY
};

// Zoom from the triggering point of the event
imageData.x -= offsetWidth * ((center.pageX - offset.left - x) / width);
imageData.y -= offsetHeight * ((center.pageY - offset.top - y) / height);
imageData.x -= offsetWidth * ((center.pageX - _offset.left - x) / width);
imageData.y -= offsetHeight * ((center.pageY - _offset.top - y) / height);
} else if (isPlainObject(pivot) && isNumber(pivot.x) && isNumber(pivot.y)) {
imageData.x -= offsetWidth * ((pivot.x - x) / width);
imageData.y -= offsetHeight * ((pivot.y - y) / height);
Expand Down Expand Up @@ -2964,6 +2985,7 @@ var Viewer = /*#__PURE__*/function () {
this.zooming = false;
this.pointerMoved = false;
this.id = getUniqueID();
this.lastPointerPosition = null; // Initialize the lastPointerPosition attribute
this.init();
}
_createClass(Viewer, [{
Expand Down
32 changes: 27 additions & 5 deletions dist/viewer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
* Copyright 2015-present Chen Fengyuan
* Released under the MIT license
*
* Date: 2023-09-17T03:16:38.052Z
* Date: 2023-10-20T01:08:38.355Z
*/

(function (global, factory) {
Expand Down Expand Up @@ -1203,13 +1203,24 @@

var events = {
bind: function bind() {
var _this = this;
var options = this.options,
viewer = this.viewer,
canvas = this.canvas;
var document = this.element.ownerDocument;
addListener(viewer, EVENT_CLICK, this.onClick = this.click.bind(this));
addListener(viewer, EVENT_DRAG_START, this.onDragStart = this.dragstart.bind(this));
addListener(canvas, EVENT_POINTER_DOWN, this.onPointerDown = this.pointerdown.bind(this));
// Use the new event binding to replace the original binding.
addListener(canvas, EVENT_POINTER_DOWN, function (event) {
_this.lastPointerPosition = {
x: event.pageX,
y: event.pageY
};
// Then call the original event handler function.
if (_this.pointerdown) {
_this.pointerdown(event);
}
});
addListener(document, EVENT_POINTER_MOVE, this.onPointerMove = this.pointermove.bind(this));
addListener(document, EVENT_POINTER_UP, this.onPointerUp = this.pointerup.bind(this));
addListener(document, EVENT_KEY_DOWN, this.onKeyDown = this.keydown.bind(this));
Expand Down Expand Up @@ -2243,6 +2254,16 @@
naturalWidth = imageData.naturalWidth,
naturalHeight = imageData.naturalHeight;
ratio = Math.max(0, ratio);

// After determining the zoom ratio, check if a pivot has already been provided.
// If not, and we have the last pointerdown position, use it to set the pivot.
if (!pivot && this.lastPointerPosition) {
var offset = getOffset(this.viewer);
pivot = {
x: this.lastPointerPosition.x - offset.left,
y: this.lastPointerPosition.y - offset.top
};
}
if (isNumber(ratio) && this.viewed && !this.played && (_zoomable || options.zoomable)) {
if (!_zoomable) {
var minZoomRatio = Math.max(0.01, options.minZoomRatio);
Expand Down Expand Up @@ -2284,15 +2305,15 @@
}
this.zooming = true;
if (_originalEvent) {
var offset = getOffset(this.viewer);
var _offset = getOffset(this.viewer);
var center = pointers && Object.keys(pointers).length > 0 ? getPointersCenter(pointers) : {
pageX: _originalEvent.pageX,
pageY: _originalEvent.pageY
};

// Zoom from the triggering point of the event
imageData.x -= offsetWidth * ((center.pageX - offset.left - x) / width);
imageData.y -= offsetHeight * ((center.pageY - offset.top - y) / height);
imageData.x -= offsetWidth * ((center.pageX - _offset.left - x) / width);
imageData.y -= offsetHeight * ((center.pageY - _offset.top - y) / height);
} else if (isPlainObject(pivot) && isNumber(pivot.x) && isNumber(pivot.y)) {
imageData.x -= offsetWidth * ((pivot.x - x) / width);
imageData.y -= offsetHeight * ((pivot.y - y) / height);
Expand Down Expand Up @@ -2970,6 +2991,7 @@
this.zooming = false;
this.pointerMoved = false;
this.id = getUniqueID();
this.lastPointerPosition = null; // Initialize the lastPointerPosition attribute
this.init();
}
_createClass(Viewer, [{
Expand Down
32 changes: 27 additions & 5 deletions docs/js/viewer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
* Copyright 2015-present Chen Fengyuan
* Released under the MIT license
*
* Date: 2023-09-17T03:16:38.052Z
* Date: 2023-10-20T01:08:38.355Z
*/

(function (global, factory) {
Expand Down Expand Up @@ -1203,13 +1203,24 @@

var events = {
bind: function bind() {
var _this = this;
var options = this.options,
viewer = this.viewer,
canvas = this.canvas;
var document = this.element.ownerDocument;
addListener(viewer, EVENT_CLICK, this.onClick = this.click.bind(this));
addListener(viewer, EVENT_DRAG_START, this.onDragStart = this.dragstart.bind(this));
addListener(canvas, EVENT_POINTER_DOWN, this.onPointerDown = this.pointerdown.bind(this));
// Use the new event binding to replace the original binding.
addListener(canvas, EVENT_POINTER_DOWN, function (event) {
_this.lastPointerPosition = {
x: event.pageX,
y: event.pageY
};
// Then call the original event handler function.
if (_this.pointerdown) {
_this.pointerdown(event);
}
});
addListener(document, EVENT_POINTER_MOVE, this.onPointerMove = this.pointermove.bind(this));
addListener(document, EVENT_POINTER_UP, this.onPointerUp = this.pointerup.bind(this));
addListener(document, EVENT_KEY_DOWN, this.onKeyDown = this.keydown.bind(this));
Expand Down Expand Up @@ -2243,6 +2254,16 @@
naturalWidth = imageData.naturalWidth,
naturalHeight = imageData.naturalHeight;
ratio = Math.max(0, ratio);

// After determining the zoom ratio, check if a pivot has already been provided.
// If not, and we have the last pointerdown position, use it to set the pivot.
if (!pivot && this.lastPointerPosition) {
var offset = getOffset(this.viewer);
pivot = {
x: this.lastPointerPosition.x - offset.left,
y: this.lastPointerPosition.y - offset.top
};
}
if (isNumber(ratio) && this.viewed && !this.played && (_zoomable || options.zoomable)) {
if (!_zoomable) {
var minZoomRatio = Math.max(0.01, options.minZoomRatio);
Expand Down Expand Up @@ -2284,15 +2305,15 @@
}
this.zooming = true;
if (_originalEvent) {
var offset = getOffset(this.viewer);
var _offset = getOffset(this.viewer);
var center = pointers && Object.keys(pointers).length > 0 ? getPointersCenter(pointers) : {
pageX: _originalEvent.pageX,
pageY: _originalEvent.pageY
};

// Zoom from the triggering point of the event
imageData.x -= offsetWidth * ((center.pageX - offset.left - x) / width);
imageData.y -= offsetHeight * ((center.pageY - offset.top - y) / height);
imageData.x -= offsetWidth * ((center.pageX - _offset.left - x) / width);
imageData.y -= offsetHeight * ((center.pageY - _offset.top - y) / height);
} else if (isPlainObject(pivot) && isNumber(pivot.x) && isNumber(pivot.y)) {
imageData.x -= offsetWidth * ((pivot.x - x) / width);
imageData.y -= offsetHeight * ((pivot.y - y) / height);
Expand Down Expand Up @@ -2970,6 +2991,7 @@
this.zooming = false;
this.pointerMoved = false;
this.id = getUniqueID();
this.lastPointerPosition = null; // Initialize the lastPointerPosition attribute
this.init();
}
_createClass(Viewer, [{
Expand Down
12 changes: 11 additions & 1 deletion src/js/events.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,17 @@ export default {

addListener(viewer, EVENT_CLICK, (this.onClick = this.click.bind(this)));
addListener(viewer, EVENT_DRAG_START, (this.onDragStart = this.dragstart.bind(this)));
addListener(canvas, EVENT_POINTER_DOWN, (this.onPointerDown = this.pointerdown.bind(this)));
// Use the new event binding to replace the original binding.
addListener(canvas, EVENT_POINTER_DOWN, (event) => {
this.lastPointerPosition = {
x: event.pageX,
y: event.pageY
};
// Then call the original event handler function.
if (this.pointerdown) {
this.pointerdown(event);
}
});
addListener(document, EVENT_POINTER_MOVE, (this.onPointerMove = this.pointermove.bind(this)));
addListener(document, EVENT_POINTER_UP, (this.onPointerUp = this.pointerup.bind(this)));
addListener(document, EVENT_KEY_DOWN, (this.onKeyDown = this.keydown.bind(this)));
Expand Down
10 changes: 10 additions & 0 deletions src/js/methods.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -717,6 +717,16 @@ export default {

ratio = Math.max(0, ratio);

// After determining the zoom ratio, check if a pivot has already been provided.
// If not, and we have the last pointerdown position, use it to set the pivot.
if (!pivot && this.lastPointerPosition) {
const offset = getOffset(this.viewer);
pivot = {
x: this.lastPointerPosition.x - offset.left,
y: this.lastPointerPosition.y - offset.top
};
}

if (isNumber(ratio) && this.viewed && !this.played && (_zoomable || options.zoomable)) {
if (!_zoomable) {
const minZoomRatio = Math.max(0.01, options.minZoomRatio);
Expand Down
1 change: 1 addition & 0 deletions src/js/viewer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,7 @@ class Viewer {
this.zooming = false;
this.pointerMoved = false;
this.id = getUniqueID();
this.lastPointerPosition = null; // Initialize the lastPointerPosition attribute
this.init();
}

Expand Down