$("#linkeditor-main").on('wheel', function (e) {
var step = $this.zoom >= 1 ? 0.25 : 0.1;
$this.linkeditor.setMouseCoordinates(e);
+ let cursorPositionOnFluidbookBeforeZoom = $this.getFluidbookPositionOfCursor();
+
let delta = e.originalEvent.deltaY;
if (delta === 0) {
return true;
e.stopPropagation();
e.stopImmediatePropagation();
e.preventDefault();
- if (delta < 0) {
- if ($this.setZoom($this.zoom + step)) {
- $this.moveZoom(e);
- }
- } else {
- $this.setZoom($this.zoom - step);
+
+ if ($this.setZoom($this.zoom + step * (delta > 0 ? -1 : 1))) {
+ $this.moveZoomAfterWheelZoom(cursorPositionOnFluidbookBeforeZoom);
}
+
return false;
});
}
},
+ getFluidbookPositionOfCursor: function () {
+ let rect = $("#linkeditor-fluidbook").get(0).getBoundingClientRect();
+ let lx = (this.linkeditor.mx - rect.x) / rect.width;
+ let ly = (this.linkeditor.my - rect.y) / rect.height;
+ return {x: lx, y: ly, width: rect.width, height: rect.height};
+ },
+
mouseUp: function () {
if (!this.zoomdragging) {
return;
this.linkeditor.rulers.updateRulers();
},
- moveZoom: function (e) {
- let rect = $("#linkeditor-zoom").get(0).getBoundingClientRect();
- let lx = (e.originalEvent.pageX - rect.x) / rect.width;
- let ly = (e.originalEvent.pageY - rect.y) / rect.height;
- $("#linkeditor-canvas").scrollTo({left: this.linkeditor.utils.pct(lx), top: this.linkeditor.utils.pct(ly)});
+ moveZoomAfterWheelZoom: function (initialPosition) {
+ let currentPosition = this.getFluidbookPositionOfCursor();
+ var dx = (initialPosition.x - currentPosition.x) * currentPosition.width;
+ var sx = $("#linkeditor-canvas").scrollLeft() + dx;
+
+ var dy = (initialPosition.y - currentPosition.y) * currentPosition.height;
+ var sy = $("#linkeditor-canvas").scrollTop() + dy;
+
+ $("#linkeditor-canvas").scrollTo({left: sx, top: sy});
this.linkeditor.rulers.updateRulers();
},