From be950ec8c1f33b0c7b6561e32c046c021dd8fc44 Mon Sep 17 00:00:00 2001 From: Ukmasmu Date: Mon, 1 Feb 2021 13:40:57 +0100 Subject: [PATCH] Tried fix scatter. --- dist/iwmlib.js | 57 ++++++++++++++++++++++++++++----------------- dist/iwmlib.pixi.js | 57 ++++++++++++++++++++++++++++----------------- lib/scatter.js | 8 +++---- 3 files changed, 74 insertions(+), 48 deletions(-) diff --git a/dist/iwmlib.js b/dist/iwmlib.js index d35e039..c390154 100644 --- a/dist/iwmlib.js +++ b/dist/iwmlib.js @@ -464,7 +464,10 @@ class Events { static stop(event) { event.preventDefault(); - event.stopPropagation(); + // I removed this, as it destroys all the Hammer.js events. + // And also the click event. + // It seems to have no (apparent) negative impact. -SO + // event.stopPropagation() } static extractPoint(event) { @@ -2624,8 +2627,8 @@ if (Events.isCaptured(event)) { return false } - let captured = this.target.capture(event); - return captured + + return this.target.capture ? this.target.capture(event) : false } getPosition(event) { @@ -3223,6 +3226,9 @@ let t = performance.now(); let dt = t - this.lastframe; this.lastframe = t; + + // When number is not set or is zero. Use one instead. + let number = delta.number ? delta.number : 1; if (dt > 0) { // Avoid division by zero errors later on // and consider the number of involved pointers sind addVelocity will be called by the @@ -3230,13 +3236,14 @@ let velocity = { t: t, dt: dt, - dx: delta.x / delta.number, - dy: delta.y / delta.number + dx: delta.x / number, + dy: delta.y / number }; this.velocities.push(velocity); while (this.velocities.length > buffer) { this.velocities.shift(); } + } } @@ -3484,7 +3491,6 @@ let delta = interaction.delta(); if (delta != null) { - this.addVelocity(delta); let rotate = delta.rotate; let zoom = delta.zoom; if (this.maxRotation != null) { @@ -3684,6 +3690,7 @@ } _move(delta) { + this.addVelocity(delta); this.x += this.movableX ? delta.x : 0; this.y += this.movableX ? delta.y : 0; } @@ -3721,14 +3728,14 @@ let newOrigin = Points$1.arc(anchor, beta + rotate, distance * thresholdedZoom); let extra = Points$1.subtract(newOrigin, origin); - let offset = Points$1.subtract(anchor, origin); - this._move(offset); + const anchorOffset = Points$1.subtract(anchor, origin); + // this._move(offset) this.scale = newScale; this.rotation += rotate; - offset = Points$1.negate(offset); + let offset = Points$1.negate(offset); offset = Points$1.add(offset, extra); offset = Points$1.add(offset, translate); - this._move(offset); + this._move(Points$1.add(anchorOffset, offset)); delta.x += extra.x; delta.y += extra.y; @@ -4498,7 +4505,8 @@ } this._x = x; this._y = y; - TweenLite.set(this.element, { x: x, y: y }); + this.addVelocity({ x: delta.x, y: delta.y }); + TweenLite.set(this.element, { x, y }); } resizeAfterTransform(zoom) { @@ -4658,7 +4666,7 @@ isClickable(node) { if (node == null) return false - // console.log("isClickable", node, this.isClickPrevented(node)) + // console.log("isClickable", node, this.isClickPrevented(node)) if (this.isClickPrevented(node)) { return false } @@ -4705,8 +4713,8 @@ let clickRects = activeNodes.map(link => { let rect = link.getBoundingClientRect(); - // Since the getBoundingClientRect is untransformed we cannot rely on it's size - // We need a transformed bottom right to calculate local width and height + // Since the getBoundingClientRect is untransformed we cannot rely on it's size + // We need a transformed bottom right to calculate local width and height let bottomRight = Points$1.fromPageToNode(element, { x: rect.x + rect.width, y: rect.y + rect.height @@ -4750,14 +4758,19 @@ /* https://stackoverflow.com/questions/49564905/is-it-possible-to-use-click-function-on-svg-tags-i-tried-element-click-on-a proposes the dispatchEvent solution. But this leads to problems in flippable.html hiding the back page. Therefore we use the original click event (see constructor). */ - if (this.isSVGNode(node)) { - if (this.triggerSVGClicks) { - let click = new Event('click'); - node.dispatchEvent(click); - } - return - } - node.click(); + // if (this.isSVGNode(node)) { + // if (this.triggerSVGClicks) { + // let click = new Event('click') + // node.dispatchEvent(click) + // } + // return + // } + // node.click() + + let click = new Event('click'); + click.clientX = event.clientX; + click.clientY = event.clientY; + node.dispatchEvent(click); } nodeTapped(node, event) { diff --git a/dist/iwmlib.pixi.js b/dist/iwmlib.pixi.js index 039e2d1..76b390f 100644 --- a/dist/iwmlib.pixi.js +++ b/dist/iwmlib.pixi.js @@ -1182,7 +1182,10 @@ class Events$1 { static stop(event) { event.preventDefault(); - event.stopPropagation(); + // I removed this, as it destroys all the Hammer.js events. + // And also the click event. + // It seems to have no (apparent) negative impact. -SO + // event.stopPropagation() } static extractPoint(event) { @@ -6161,8 +6164,8 @@ if (Events$1.isCaptured(event)) { return false } - let captured = this.target.capture(event); - return captured + + return this.target.capture ? this.target.capture(event) : false } getPosition(event) { @@ -6751,6 +6754,9 @@ let t = performance.now(); let dt = t - this.lastframe; this.lastframe = t; + + // When number is not set or is zero. Use one instead. + let number = delta.number ? delta.number : 1; if (dt > 0) { // Avoid division by zero errors later on // and consider the number of involved pointers sind addVelocity will be called by the @@ -6758,13 +6764,14 @@ let velocity = { t: t, dt: dt, - dx: delta.x / delta.number, - dy: delta.y / delta.number + dx: delta.x / number, + dy: delta.y / number }; this.velocities.push(velocity); while (this.velocities.length > buffer) { this.velocities.shift(); } + } } @@ -7012,7 +7019,6 @@ let delta = interaction.delta(); if (delta != null) { - this.addVelocity(delta); let rotate = delta.rotate; let zoom = delta.zoom; if (this.maxRotation != null) { @@ -7212,6 +7218,7 @@ } _move(delta) { + this.addVelocity(delta); this.x += this.movableX ? delta.x : 0; this.y += this.movableX ? delta.y : 0; } @@ -7249,14 +7256,14 @@ let newOrigin = Points.arc(anchor, beta + rotate, distance * thresholdedZoom); let extra = Points.subtract(newOrigin, origin); - let offset = Points.subtract(anchor, origin); - this._move(offset); + const anchorOffset = Points.subtract(anchor, origin); + // this._move(offset) this.scale = newScale; this.rotation += rotate; - offset = Points.negate(offset); + let offset = Points.negate(offset); offset = Points.add(offset, extra); offset = Points.add(offset, translate); - this._move(offset); + this._move(Points.add(anchorOffset, offset)); delta.x += extra.x; delta.y += extra.y; @@ -7846,7 +7853,8 @@ } this._x = x; this._y = y; - TweenLite.set(this.element, { x: x, y: y }); + this.addVelocity({ x: delta.x, y: delta.y }); + TweenLite.set(this.element, { x, y }); } resizeAfterTransform(zoom) { @@ -8006,7 +8014,7 @@ isClickable(node) { if (node == null) return false - // console.log("isClickable", node, this.isClickPrevented(node)) + // console.log("isClickable", node, this.isClickPrevented(node)) if (this.isClickPrevented(node)) { return false } @@ -8053,8 +8061,8 @@ let clickRects = activeNodes.map(link => { let rect = link.getBoundingClientRect(); - // Since the getBoundingClientRect is untransformed we cannot rely on it's size - // We need a transformed bottom right to calculate local width and height + // Since the getBoundingClientRect is untransformed we cannot rely on it's size + // We need a transformed bottom right to calculate local width and height let bottomRight = Points.fromPageToNode(element, { x: rect.x + rect.width, y: rect.y + rect.height @@ -8098,14 +8106,19 @@ /* https://stackoverflow.com/questions/49564905/is-it-possible-to-use-click-function-on-svg-tags-i-tried-element-click-on-a proposes the dispatchEvent solution. But this leads to problems in flippable.html hiding the back page. Therefore we use the original click event (see constructor). */ - if (this.isSVGNode(node)) { - if (this.triggerSVGClicks) { - let click = new Event('click'); - node.dispatchEvent(click); - } - return - } - node.click(); + // if (this.isSVGNode(node)) { + // if (this.triggerSVGClicks) { + // let click = new Event('click') + // node.dispatchEvent(click) + // } + // return + // } + // node.click() + + let click = new Event('click'); + click.clientX = event.clientX; + click.clientY = event.clientY; + node.dispatchEvent(click); } nodeTapped(node, event) { diff --git a/lib/scatter.js b/lib/scatter.js index c6def64..449b7ff 100644 --- a/lib/scatter.js +++ b/lib/scatter.js @@ -619,14 +619,14 @@ export class AbstractScatter extends Throwable { let newOrigin = Points.arc(anchor, beta + rotate, distance * thresholdedZoom) let extra = Points.subtract(newOrigin, origin) - let offset = Points.subtract(anchor, origin) - this._move(offset) + const anchorOffset = Points.subtract(anchor, origin) + // this._move(offset) this.scale = newScale this.rotation += rotate - offset = Points.negate(offset) + let offset = Points.negate(offset) offset = Points.add(offset, extra) offset = Points.add(offset, translate) - this._move(offset) + this._move(Points.add(anchorOffset, offset)) delta.x += extra.x delta.y += extra.y