Tried fix scatter.

This commit is contained in:
Severin Opel 2021-02-01 13:40:57 +01:00
parent ca5a39d661
commit be950ec8c1
3 changed files with 74 additions and 48 deletions

57
dist/iwmlib.js vendored
View File

@ -464,7 +464,10 @@
class Events { class Events {
static stop(event) { static stop(event) {
event.preventDefault(); 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) { static extractPoint(event) {
@ -2624,8 +2627,8 @@
if (Events.isCaptured(event)) { if (Events.isCaptured(event)) {
return false return false
} }
let captured = this.target.capture(event);
return captured return this.target.capture ? this.target.capture(event) : false
} }
getPosition(event) { getPosition(event) {
@ -3223,6 +3226,9 @@
let t = performance.now(); let t = performance.now();
let dt = t - this.lastframe; let dt = t - this.lastframe;
this.lastframe = t; this.lastframe = t;
// When number is not set or is zero. Use one instead.
let number = delta.number ? delta.number : 1;
if (dt > 0) { if (dt > 0) {
// Avoid division by zero errors later on // Avoid division by zero errors later on
// and consider the number of involved pointers sind addVelocity will be called by the // and consider the number of involved pointers sind addVelocity will be called by the
@ -3230,13 +3236,14 @@
let velocity = { let velocity = {
t: t, t: t,
dt: dt, dt: dt,
dx: delta.x / delta.number, dx: delta.x / number,
dy: delta.y / delta.number dy: delta.y / number
}; };
this.velocities.push(velocity); this.velocities.push(velocity);
while (this.velocities.length > buffer) { while (this.velocities.length > buffer) {
this.velocities.shift(); this.velocities.shift();
} }
} }
} }
@ -3484,7 +3491,6 @@
let delta = interaction.delta(); let delta = interaction.delta();
if (delta != null) { if (delta != null) {
this.addVelocity(delta);
let rotate = delta.rotate; let rotate = delta.rotate;
let zoom = delta.zoom; let zoom = delta.zoom;
if (this.maxRotation != null) { if (this.maxRotation != null) {
@ -3684,6 +3690,7 @@
} }
_move(delta) { _move(delta) {
this.addVelocity(delta);
this.x += this.movableX ? delta.x : 0; this.x += this.movableX ? delta.x : 0;
this.y += this.movableX ? delta.y : 0; this.y += this.movableX ? delta.y : 0;
} }
@ -3721,14 +3728,14 @@
let newOrigin = Points$1.arc(anchor, beta + rotate, distance * thresholdedZoom); let newOrigin = Points$1.arc(anchor, beta + rotate, distance * thresholdedZoom);
let extra = Points$1.subtract(newOrigin, origin); let extra = Points$1.subtract(newOrigin, origin);
let offset = Points$1.subtract(anchor, origin); const anchorOffset = Points$1.subtract(anchor, origin);
this._move(offset); // this._move(offset)
this.scale = newScale; this.scale = newScale;
this.rotation += rotate; 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, extra);
offset = Points$1.add(offset, translate); offset = Points$1.add(offset, translate);
this._move(offset); this._move(Points$1.add(anchorOffset, offset));
delta.x += extra.x; delta.x += extra.x;
delta.y += extra.y; delta.y += extra.y;
@ -4498,7 +4505,8 @@
} }
this._x = x; this._x = x;
this._y = y; 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) { resizeAfterTransform(zoom) {
@ -4658,7 +4666,7 @@
isClickable(node) { isClickable(node) {
if (node == null) return false if (node == null) return false
// console.log("isClickable", node, this.isClickPrevented(node)) // console.log("isClickable", node, this.isClickPrevented(node))
if (this.isClickPrevented(node)) { if (this.isClickPrevented(node)) {
return false return false
} }
@ -4705,8 +4713,8 @@
let clickRects = activeNodes.map(link => { let clickRects = activeNodes.map(link => {
let rect = link.getBoundingClientRect(); let rect = link.getBoundingClientRect();
// Since the getBoundingClientRect is untransformed we cannot rely on it's size // Since the getBoundingClientRect is untransformed we cannot rely on it's size
// We need a transformed bottom right to calculate local width and height // We need a transformed bottom right to calculate local width and height
let bottomRight = Points$1.fromPageToNode(element, { let bottomRight = Points$1.fromPageToNode(element, {
x: rect.x + rect.width, x: rect.x + rect.width,
y: rect.y + rect.height 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 /* 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. 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). */ Therefore we use the original click event (see constructor). */
if (this.isSVGNode(node)) { // if (this.isSVGNode(node)) {
if (this.triggerSVGClicks) { // if (this.triggerSVGClicks) {
let click = new Event('click'); // let click = new Event('click')
node.dispatchEvent(click); // node.dispatchEvent(click)
} // }
return // return
} // }
node.click(); // node.click()
let click = new Event('click');
click.clientX = event.clientX;
click.clientY = event.clientY;
node.dispatchEvent(click);
} }
nodeTapped(node, event) { nodeTapped(node, event) {

57
dist/iwmlib.pixi.js vendored
View File

@ -1182,7 +1182,10 @@
class Events$1 { class Events$1 {
static stop(event) { static stop(event) {
event.preventDefault(); 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) { static extractPoint(event) {
@ -6161,8 +6164,8 @@
if (Events$1.isCaptured(event)) { if (Events$1.isCaptured(event)) {
return false return false
} }
let captured = this.target.capture(event);
return captured return this.target.capture ? this.target.capture(event) : false
} }
getPosition(event) { getPosition(event) {
@ -6751,6 +6754,9 @@
let t = performance.now(); let t = performance.now();
let dt = t - this.lastframe; let dt = t - this.lastframe;
this.lastframe = t; this.lastframe = t;
// When number is not set or is zero. Use one instead.
let number = delta.number ? delta.number : 1;
if (dt > 0) { if (dt > 0) {
// Avoid division by zero errors later on // Avoid division by zero errors later on
// and consider the number of involved pointers sind addVelocity will be called by the // and consider the number of involved pointers sind addVelocity will be called by the
@ -6758,13 +6764,14 @@
let velocity = { let velocity = {
t: t, t: t,
dt: dt, dt: dt,
dx: delta.x / delta.number, dx: delta.x / number,
dy: delta.y / delta.number dy: delta.y / number
}; };
this.velocities.push(velocity); this.velocities.push(velocity);
while (this.velocities.length > buffer) { while (this.velocities.length > buffer) {
this.velocities.shift(); this.velocities.shift();
} }
} }
} }
@ -7012,7 +7019,6 @@
let delta = interaction.delta(); let delta = interaction.delta();
if (delta != null) { if (delta != null) {
this.addVelocity(delta);
let rotate = delta.rotate; let rotate = delta.rotate;
let zoom = delta.zoom; let zoom = delta.zoom;
if (this.maxRotation != null) { if (this.maxRotation != null) {
@ -7212,6 +7218,7 @@
} }
_move(delta) { _move(delta) {
this.addVelocity(delta);
this.x += this.movableX ? delta.x : 0; this.x += this.movableX ? delta.x : 0;
this.y += this.movableX ? delta.y : 0; this.y += this.movableX ? delta.y : 0;
} }
@ -7249,14 +7256,14 @@
let newOrigin = Points.arc(anchor, beta + rotate, distance * thresholdedZoom); let newOrigin = Points.arc(anchor, beta + rotate, distance * thresholdedZoom);
let extra = Points.subtract(newOrigin, origin); let extra = Points.subtract(newOrigin, origin);
let offset = Points.subtract(anchor, origin); const anchorOffset = Points.subtract(anchor, origin);
this._move(offset); // this._move(offset)
this.scale = newScale; this.scale = newScale;
this.rotation += rotate; this.rotation += rotate;
offset = Points.negate(offset); let offset = Points.negate(offset);
offset = Points.add(offset, extra); offset = Points.add(offset, extra);
offset = Points.add(offset, translate); offset = Points.add(offset, translate);
this._move(offset); this._move(Points.add(anchorOffset, offset));
delta.x += extra.x; delta.x += extra.x;
delta.y += extra.y; delta.y += extra.y;
@ -7846,7 +7853,8 @@
} }
this._x = x; this._x = x;
this._y = y; 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) { resizeAfterTransform(zoom) {
@ -8006,7 +8014,7 @@
isClickable(node) { isClickable(node) {
if (node == null) return false if (node == null) return false
// console.log("isClickable", node, this.isClickPrevented(node)) // console.log("isClickable", node, this.isClickPrevented(node))
if (this.isClickPrevented(node)) { if (this.isClickPrevented(node)) {
return false return false
} }
@ -8053,8 +8061,8 @@
let clickRects = activeNodes.map(link => { let clickRects = activeNodes.map(link => {
let rect = link.getBoundingClientRect(); let rect = link.getBoundingClientRect();
// Since the getBoundingClientRect is untransformed we cannot rely on it's size // Since the getBoundingClientRect is untransformed we cannot rely on it's size
// We need a transformed bottom right to calculate local width and height // We need a transformed bottom right to calculate local width and height
let bottomRight = Points.fromPageToNode(element, { let bottomRight = Points.fromPageToNode(element, {
x: rect.x + rect.width, x: rect.x + rect.width,
y: rect.y + rect.height 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 /* 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. 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). */ Therefore we use the original click event (see constructor). */
if (this.isSVGNode(node)) { // if (this.isSVGNode(node)) {
if (this.triggerSVGClicks) { // if (this.triggerSVGClicks) {
let click = new Event('click'); // let click = new Event('click')
node.dispatchEvent(click); // node.dispatchEvent(click)
} // }
return // return
} // }
node.click(); // node.click()
let click = new Event('click');
click.clientX = event.clientX;
click.clientY = event.clientY;
node.dispatchEvent(click);
} }
nodeTapped(node, event) { nodeTapped(node, event) {

View File

@ -619,14 +619,14 @@ export class AbstractScatter extends Throwable {
let newOrigin = Points.arc(anchor, beta + rotate, distance * thresholdedZoom) let newOrigin = Points.arc(anchor, beta + rotate, distance * thresholdedZoom)
let extra = Points.subtract(newOrigin, origin) let extra = Points.subtract(newOrigin, origin)
let offset = Points.subtract(anchor, origin) const anchorOffset = Points.subtract(anchor, origin)
this._move(offset) // this._move(offset)
this.scale = newScale this.scale = newScale
this.rotation += rotate this.rotation += rotate
offset = Points.negate(offset) let offset = Points.negate(offset)
offset = Points.add(offset, extra) offset = Points.add(offset, extra)
offset = Points.add(offset, translate) offset = Points.add(offset, translate)
this._move(offset) this._move(Points.add(anchorOffset, offset))
delta.x += extra.x delta.x += extra.x
delta.y += extra.y delta.y += extra.y