From cc6ef8de467ef2ef557df2ae22ab5f527b1338d2 Mon Sep 17 00:00:00 2001 From: Uwe Oestermeier Date: Wed, 24 Jul 2019 08:54:09 +0200 Subject: [PATCH] Tested new way to compute interaction delta. --- dist/iwmlib.js | 97 ++++++++++++++++++++++++++++++++++++++++++++- dist/iwmlib.pixi.js | 76 ++++++++++++++++++++++++++++++++++- lib/interaction.js | 72 +++++++++++++++++++++++++++++++++ 3 files changed, 243 insertions(+), 2 deletions(-) diff --git a/dist/iwmlib.js b/dist/iwmlib.js index 09014cc..8f568b8 100644 --- a/dist/iwmlib.js +++ b/dist/iwmlib.js @@ -1929,6 +1929,78 @@ * @memberof InteractionPoints */ delta() { + let prev = []; + let curr = []; + let cm = { x: 0, y: 0}; + let pm = { x: 0, y: 0}; + let count = 0; + for(let key of this.current.keys()) { + if (this.previous.has(key)) { + let p = this.previous.get(key); + let c = this.current.get(key); + pm = Points$1.add(pm, p); + cm = Points$1.add(cm, c); + prev.push(p); + curr.push(c); + count += 1; + } + } + if (count > 0) { + pm = Points$1.multiplyScalar(pm, 1 / count); + cm = Points$1.multiplyScalar(cm, 1 / count); + let delta = Points$1.subtract(cm, pm); + let scale = 0; + let scaled = 0; + let alpha = 0; + let zoom = 1; + for(let i=0; i 0) { + zoom = scale / scaled; + } + alpha /= count; + + let current = this.current.farthests(); + + let c1 = current[0]; + let c2 = current[1]; + let distance2 = Points$1.distance(c1, c2); + + return new InteractionDelta( + delta.x, + delta.y, + zoom, + alpha, + cm, + count, + distance2 + ) + } + else { + return null + } + } + + /** + * Computes the delta between interaction points at t and t+1. + * + * @returns InteractionDelta + * @memberof InteractionPoints + */ + deltaByTwoFarthestsPoints() { let csize = this.current.size; let psize = this.previous.size; if (csize >= 2 && csize == psize) { @@ -3481,7 +3553,9 @@ if (delta.distance < this.minInteractionDistance) { let ratio = delta.distance / this.minInteractionDistance; rotate *= ratio; - zoom *= ratio; + let zoomDelta = zoom - 1; + zoomDelta *= ratio; + zoom = 1 + zoomDelta; } this.transform(delta, zoom, rotate, delta.about); @@ -9907,8 +9981,22 @@ ); } + isClickPrevented(node) { + if (node == null) { + return false + } + if (node.style && node.style.pointerEvents == 'none') { + return true + } + return this.isClickPrevented(node.parentNode) + } + isClickable(node) { if (node == null) return false + // console.log("isClickable", node, this.isClickPrevented(node)) + if (this.isClickPrevented(node)) { + return false + } if (node.tagName == 'A' && node.hasAttribute('href')) return true if (node.hasAttribute('onclick')) return true return false @@ -10002,6 +10090,7 @@ } nodeTapped(node, event) { + console.log("nodeTapped", node, this.isClickable(node)); if (this.isClickable(node)) { this.simulateClick(node, event); return true @@ -10012,6 +10101,7 @@ return true } for (let [selector, handler] of this.tapHandler.entries()) { + console.log("nodeTapped", selector); for (let obj of this.domNode.querySelectorAll(selector)) { if (node == obj) { handler(event); @@ -10023,8 +10113,10 @@ } tap(event, calledBy = 'unknown') { + if (event.isTrusted) { let node = this.nearestActive(event); + console.log("tap", node); this.nodeTapped(node, event); /* let node = document.elementFromPoint(event.clientX, event.clientY) @@ -10261,6 +10353,9 @@ this._bringToFront(target); let svgRoot = target.closest('svg'); + if (svgRoot == null) { + return + } let image = svgRoot.querySelector('image'); // eslint-disable-next-line no-unused-vars diff --git a/dist/iwmlib.pixi.js b/dist/iwmlib.pixi.js index 0a3236b..96f3428 100644 --- a/dist/iwmlib.pixi.js +++ b/dist/iwmlib.pixi.js @@ -5350,6 +5350,78 @@ * @memberof InteractionPoints */ delta() { + let prev = []; + let curr = []; + let cm = { x: 0, y: 0}; + let pm = { x: 0, y: 0}; + let count = 0; + for(let key of this.current.keys()) { + if (this.previous.has(key)) { + let p = this.previous.get(key); + let c = this.current.get(key); + pm = Points.add(pm, p); + cm = Points.add(cm, c); + prev.push(p); + curr.push(c); + count += 1; + } + } + if (count > 0) { + pm = Points.multiplyScalar(pm, 1 / count); + cm = Points.multiplyScalar(cm, 1 / count); + let delta = Points.subtract(cm, pm); + let scale = 0; + let scaled = 0; + let alpha = 0; + let zoom = 1; + for(let i=0; i 0) { + zoom = scale / scaled; + } + alpha /= count; + + let current = this.current.farthests(); + + let c1 = current[0]; + let c2 = current[1]; + let distance2 = Points.distance(c1, c2); + + return new InteractionDelta( + delta.x, + delta.y, + zoom, + alpha, + cm, + count, + distance2 + ) + } + else { + return null + } + } + + /** + * Computes the delta between interaction points at t and t+1. + * + * @returns InteractionDelta + * @memberof InteractionPoints + */ + deltaByTwoFarthestsPoints() { let csize = this.current.size; let psize = this.previous.size; if (csize >= 2 && csize == psize) { @@ -6893,7 +6965,9 @@ if (delta.distance < this.minInteractionDistance) { let ratio = delta.distance / this.minInteractionDistance; rotate *= ratio; - zoom *= ratio; + let zoomDelta = zoom - 1; + zoomDelta *= ratio; + zoom = 1 + zoomDelta; } this.transform(delta, zoom, rotate, delta.about); diff --git a/lib/interaction.js b/lib/interaction.js index 2468842..5414545 100755 --- a/lib/interaction.js +++ b/lib/interaction.js @@ -203,6 +203,78 @@ export class InteractionPoints { * @memberof InteractionPoints */ delta() { + let prev = [] + let curr = [] + let cm = { x: 0, y: 0} + let pm = { x: 0, y: 0} + let count = 0 + for(let key of this.current.keys()) { + if (this.previous.has(key)) { + let p = this.previous.get(key) + let c = this.current.get(key) + pm = Points.add(pm, p) + cm = Points.add(cm, c) + prev.push(p) + curr.push(c) + count += 1 + } + } + if (count > 0) { + pm = Points.multiplyScalar(pm, 1 / count) + cm = Points.multiplyScalar(cm, 1 / count) + let delta = Points.subtract(cm, pm) + let scale = 0 + let scaled = 0 + let alpha = 0 + let zoom = 1 + for(let i=0; i 0) { + zoom = scale / scaled + } + alpha /= count + + let current = this.current.farthests() + + let c1 = current[0] + let c2 = current[1] + let distance2 = Points.distance(c1, c2) + + return new InteractionDelta( + delta.x, + delta.y, + zoom, + alpha, + cm, + count, + distance2 + ) + } + else { + return null + } + } + + /** + * Computes the delta between interaction points at t and t+1. + * + * @returns InteractionDelta + * @memberof InteractionPoints + */ + deltaByTwoFarthestsPoints() { let csize = this.current.size let psize = this.previous.size if (csize >= 2 && csize == psize) {