This commit is contained in:
Tjark Müller 2023-06-02 14:24:51 +02:00
commit 98085006bb
4 changed files with 219 additions and 171 deletions

104
dist/iwmlib.js vendored
View File

@ -3215,7 +3215,7 @@
throwVisibility = 44,
throwDamping = 0.95,
autoThrow = true,
onThrowFinished = null,
onThrowFinished = null
} = {}) {
this.movableX = movableX;
this.movableY = movableY;
@ -3248,7 +3248,7 @@
t: t,
dt: dt,
dx: delta.x / number,
dy: delta.y / number,
dy: delta.y / number
};
this.velocities.push(velocity);
while (this.velocities.length > buffer) {
@ -3310,7 +3310,7 @@
if (nextLength > prevLength) {
let factor = nextLength / prevLength;
next = Points$1.multiplyScalar(next, 1 / factor);
console.log('Prevent acceleration', factor, this.velocity, next);
// console.log('Prevent acceleration', factor, this.velocity, next)
}
this.velocity = next;
let d = Points$1.multiplyScalar(this.velocity, dt);
@ -3346,7 +3346,7 @@
let next = Points$1.multiplyScalar(velocity, this.throwDamping);
return {
x: this.movableX ? next.x : 0,
y: this.movableY ? next.y : 0,
y: this.movableY ? next.y : 0
}
}
@ -3391,7 +3391,7 @@
scaleCloseBuffer = 0.05,
maxRotation = Angle.degree2radian(5),
minInteractionDistance = 0,
useLowPassFilter = false,
useLowPassFilter = false
} = {}) {
if (rotationDegrees != null && rotation != null) {
throw new Error('Use rotationDegrees or rotation but not both')
@ -3406,7 +3406,7 @@
throwVisibility,
throwDamping,
autoThrow,
onThrowFinished,
onThrowFinished
});
/**
@ -3481,7 +3481,7 @@
_callCloseCallbacks() {
if (this.onClose) {
this.onClose.forEach((callback) => callback(this));
this.onClose.forEach(callback => callback(this));
}
}
@ -3501,6 +3501,9 @@
let delta = interaction.delta();
if (delta != null) {
/* uo: Is this the best place to add velocity? It works with scrollable text in card drawers but
has to be tested */
this.addVelocity(delta);
let rotate = delta.rotate;
let zoom = delta.zoom;
if (this.maxRotation != null) {
@ -3519,9 +3522,10 @@
zoomDelta *= ratio;
zoom = 1 + zoomDelta;
}
this.transform(delta, zoom, rotate, delta.about);
this.addVelocity(delta); // uo: reverted commit fa0256d782dd498c6d3e51321260ca375ca9f855
/* uo: This is too late an dangerous. transform sometimes modifies delta
this.addVelocity(delta) // uo: reverted commit fa0256d782dd498c6d3e51321260ca375ca9f855
*/
if (zoom != 1) this.interactionAnchor = delta.about;
}
@ -3632,11 +3636,11 @@
if (this.scale < this.minScale + this.scaleCloseThreshold - this.scaleCloseBuffer) {
this.zoom(this.minScale, {
animate: 0.2,
onComplete: this.close.bind(this),
onComplete: this.close.bind(this)
});
} else if (this.scale < this.minScale + this.scaleCloseThreshold) {
this.zoom(this.minScale + this.scaleCloseThreshold, {
animate: 0.4,
animate: 0.4
});
}
}
@ -3658,12 +3662,12 @@
x: '+=' + d.x,
y: '+=' + d.y,
/* scale: scale, uo: not defined, why was this here? */
onUpdate: (e) => {
onUpdate: e => {
let p = this.position;
let dx = p.x - startPos.x;
let dy = p.x - startPos.y;
this.onMoved(dx, dy);
},
}
});
} else {
this._move(d);
@ -3692,7 +3696,7 @@
scale: scale,
delay: delay,
onComplete: onComplete,
onUpdate: this.onZoomed.bind(this),
onUpdate: this.onZoomed.bind(this)
});
} else {
this.scale = scale;
@ -3710,7 +3714,7 @@
transform(translate, zoom, rotate, anchor) {
let delta = {
x: this.movableX ? translate.x : 0,
y: this.movableY ? translate.y : 0,
y: this.movableY ? translate.y : 0
};
if (this.resizable) var vzoom = zoom;
if (!this.translatable) delta = { x: 0, y: 0 };
@ -3725,7 +3729,7 @@
rotate: 0,
about: anchor,
fast: false,
type: UPDATE,
type: UPDATE
});
this.onTransform.forEach(function(f) {
f(event);
@ -3756,7 +3760,7 @@
translate: delta,
scale: newScale,
rotate: rotate,
about: anchor,
about: anchor
});
this.onTransform.forEach(function(f) {
f(event);
@ -3824,7 +3828,7 @@
if (this.scale > this.maxScale) zoom = 1 - amount;
if (zoom != 1) {
this.transform({ x: 0, y: 0 }, zoom, 0, this.zoomAnchor);
requestAnimationFrame((dt) => {
requestAnimationFrame(dt => {
this.animateZoomBounce(dt);
});
return
@ -3881,7 +3885,7 @@
rotate: 0,
about: null,
fast: false,
type: START,
type: START
});
this.onTransform.forEach(function(f) {
f(event);
@ -3899,13 +3903,13 @@
}
onEnd(event, interaction) {
console.log('Scatter.onEnd', this.dragging);
//console.log('Scatter.onEnd', this.dragging)
if (interaction.isFinished()) {
this.endGesture(interaction);
this.dragging = false;
for (let key of interaction.ended.keys()) {
if (interaction.isTap(key)) {
console.log('Scatter.isTap');
//console.log('Scatter.isTap')
let point = interaction.ended.get(key);
this.onTap(event, interaction, point);
}
@ -3917,7 +3921,7 @@
rotate: 0,
about: null,
fast: false,
type: END,
type: END
});
this.onTransform.forEach(function(f) {
f(event);
@ -3933,7 +3937,7 @@
//onTap(event, interaction, point) {}
onTap(event, interaction, point) {
console.log('AbstractScatter.onTap', this.tapDelegate, interaction);
//console.log('AbstractScatter.onTap', this.tapDelegate, interaction)
if (this.tapDelegate) {
Events.stop(event);
this.tapDelegate.tap(event, 'scatter');
@ -3947,7 +3951,7 @@
translate: delta,
scale: this.scale,
about: this.currentAbout,
type: null,
type: null
});
this.onTransform.forEach(function(f) {
f(event);
@ -3961,7 +3965,7 @@
scale: this.scale,
about: this.currentAbout,
fast: false,
type: null,
type: null
});
this.onTransform.forEach(function(f) {
f(event);
@ -3975,7 +3979,7 @@
translate: { x: dx, y: dy },
about: about,
fast: true,
type: null,
type: null
});
this.onTransform.forEach(function(f) {
f(event);
@ -3988,7 +3992,7 @@
let event = new ScatterEvent(this, {
scale: this.scale,
fast: false,
type: null,
type: null
});
this.onTransform.forEach(function(f) {
f(event);
@ -4004,7 +4008,7 @@
scale: this.scale,
about: about,
fast: false,
type: null,
type: null
});
this.onTransform.forEach(function(f) {
f(event);
@ -4038,7 +4042,7 @@
useCapture = true,
capturePointerEvents = true,
touchAction = 'none',
debugCanvas = null,
debugCanvas = null
} = {}
) {
this.onCapture = null;
@ -4050,7 +4054,7 @@
movement of scatter objects, the touchmove event has to be bound again.
*/
if (Capabilities.isSafari) {
document.addEventListener('touchmove', (event) => this.preventPinch(event), false);
document.addEventListener('touchmove', event => this.preventPinch(event), false);
stopEvents = false;
} else {
stopEvents = true;
@ -4065,11 +4069,11 @@
this.delegate = new InteractionMapper$1(element, this, {
useCapture,
capturePointerEvents,
mouseWheelElement: window,
mouseWheelElement: window
});
if (debugCanvas !== null) {
requestAnimationFrame((dt) => {
requestAnimationFrame(dt => {
this.showTouches(dt, debugCanvas);
});
}
@ -4091,7 +4095,7 @@
context.fill();
context.stroke();
}
requestAnimationFrame((dt) => {
requestAnimationFrame(dt => {
this.showTouches(dt, canvas);
});
}
@ -4233,7 +4237,7 @@
scaleCloseBuffer = 0.05,
useLowPassFilter = false,
maxRotation = Angle.degree2radian(15),
minInteractionDistance = 200,
minInteractionDistance = 200
} = {}
) {
super({
@ -4260,7 +4264,7 @@
onClose,
useLowPassFilter,
maxRotation,
minInteractionDistance,
minInteractionDistance
});
if (container == null || width == null || height == null) {
throw new Error('Invalid value: null')
@ -4288,7 +4292,7 @@
height: height,
scale: startScale,
rotation: this.startRotationDegrees,
transformOrigin: transformOrigin,
transformOrigin: transformOrigin
};
this.tapNodes = new Map();
@ -4310,15 +4314,15 @@
button.className = 'interactiveElement';
this.element.appendChild(button);
button.addEventListener('pointerdown', (e) => {
button.addEventListener('pointerdown', e => {
this.startResize(e);
});
button.addEventListener('pointermove', (e) => {
button.addEventListener('pointermove', e => {
this.resize(e);
});
button.addEventListener('pointerup', (e) => {
button.addEventListener('pointerup', e => {
this.stopResize(e);
});
this.resizeButton = button;
@ -4335,7 +4339,7 @@
scale: this.scale,
x: this.x,
y: this.y,
rotation: this.rotation,
rotation: this.rotation
}
}
@ -4386,7 +4390,7 @@
top: rect.top - stage.top,
left: rect.left - stage.left,
width: rect.width,
height: rect.height,
height: rect.height
}
}
@ -4427,7 +4431,7 @@
set scale(scale) {
TweenLite.set(this.element, {
scale: scale,
transformOrigin: this.transformOrigin,
transformOrigin: this.transformOrigin
});
this._scale = scale;
}
@ -4459,9 +4463,9 @@
hide() {
TweenLite.to(this.element, 0.1, {
display: 'none',
onComplete: (e) => {
onComplete: e => {
this.element.parentNode.removeChild(this.element);
},
}
});
}
@ -4475,7 +4479,7 @@
x: p.x,
y: p.y,
rotation: rotationDegrees,
transformOrigin: this.transformOrigin,
transformOrigin: this.transformOrigin
});
}
@ -4536,7 +4540,7 @@
let oldPostition = {
x: this.element.getBoundingClientRect().left,
y: this.element.getBoundingClientRect().top,
y: this.element.getBoundingClientRect().top
};
this.bringToFront();
@ -4544,7 +4548,7 @@
let newPostition = {
x: this.element.getBoundingClientRect().left,
y: this.element.getBoundingClientRect().top,
y: this.element.getBoundingClientRect().top
};
let offset = Points$1.subtract(oldPostition, newPostition);
@ -4589,7 +4593,7 @@
)
TweenLite.to(this.element, 0, {
width: this.element.offsetWidth + resizeW / this.scale,
height: this.element.offsetHeight + resizeH / this.scale,
height: this.element.offsetHeight + resizeH / this.scale
});
this.oldX = e.clientX;
@ -4606,12 +4610,12 @@
let event = new CustomEvent('resizeEnded');
let oldPostition = {
x: this.element.getBoundingClientRect().left,
y: this.element.getBoundingClientRect().top,
y: this.element.getBoundingClientRect().top
};
this.element.style.transformOrigin = '50% 50%';
let newPostition = {
x: this.element.getBoundingClientRect().left,
y: this.element.getBoundingClientRect().top,
y: this.element.getBoundingClientRect().top
};
let offset = Points$1.subtract(oldPostition, newPostition);

94
dist/iwmlib.pixi.js vendored
View File

@ -6778,7 +6778,7 @@
throwVisibility = 44,
throwDamping = 0.95,
autoThrow = true,
onThrowFinished = null,
onThrowFinished = null
} = {}) {
this.movableX = movableX;
this.movableY = movableY;
@ -6811,7 +6811,7 @@
t: t,
dt: dt,
dx: delta.x / number,
dy: delta.y / number,
dy: delta.y / number
};
this.velocities.push(velocity);
while (this.velocities.length > buffer) {
@ -6873,7 +6873,7 @@
if (nextLength > prevLength) {
let factor = nextLength / prevLength;
next = Points.multiplyScalar(next, 1 / factor);
console.log('Prevent acceleration', factor, this.velocity, next);
// console.log('Prevent acceleration', factor, this.velocity, next)
}
this.velocity = next;
let d = Points.multiplyScalar(this.velocity, dt);
@ -6909,7 +6909,7 @@
let next = Points.multiplyScalar(velocity, this.throwDamping);
return {
x: this.movableX ? next.x : 0,
y: this.movableY ? next.y : 0,
y: this.movableY ? next.y : 0
}
}
@ -6954,7 +6954,7 @@
scaleCloseBuffer = 0.05,
maxRotation = Angle.degree2radian(5),
minInteractionDistance = 0,
useLowPassFilter = false,
useLowPassFilter = false
} = {}) {
if (rotationDegrees != null && rotation != null) {
throw new Error('Use rotationDegrees or rotation but not both')
@ -6969,7 +6969,7 @@
throwVisibility,
throwDamping,
autoThrow,
onThrowFinished,
onThrowFinished
});
/**
@ -7044,7 +7044,7 @@
_callCloseCallbacks() {
if (this.onClose) {
this.onClose.forEach((callback) => callback(this));
this.onClose.forEach(callback => callback(this));
}
}
@ -7064,6 +7064,9 @@
let delta = interaction.delta();
if (delta != null) {
/* uo: Is this the best place to add velocity? It works with scrollable text in card drawers but
has to be tested */
this.addVelocity(delta);
let rotate = delta.rotate;
let zoom = delta.zoom;
if (this.maxRotation != null) {
@ -7082,9 +7085,10 @@
zoomDelta *= ratio;
zoom = 1 + zoomDelta;
}
this.transform(delta, zoom, rotate, delta.about);
this.addVelocity(delta); // uo: reverted commit fa0256d782dd498c6d3e51321260ca375ca9f855
/* uo: This is too late an dangerous. transform sometimes modifies delta
this.addVelocity(delta) // uo: reverted commit fa0256d782dd498c6d3e51321260ca375ca9f855
*/
if (zoom != 1) this.interactionAnchor = delta.about;
}
@ -7195,11 +7199,11 @@
if (this.scale < this.minScale + this.scaleCloseThreshold - this.scaleCloseBuffer) {
this.zoom(this.minScale, {
animate: 0.2,
onComplete: this.close.bind(this),
onComplete: this.close.bind(this)
});
} else if (this.scale < this.minScale + this.scaleCloseThreshold) {
this.zoom(this.minScale + this.scaleCloseThreshold, {
animate: 0.4,
animate: 0.4
});
}
}
@ -7221,12 +7225,12 @@
x: '+=' + d.x,
y: '+=' + d.y,
/* scale: scale, uo: not defined, why was this here? */
onUpdate: (e) => {
onUpdate: e => {
let p = this.position;
let dx = p.x - startPos.x;
let dy = p.x - startPos.y;
this.onMoved(dx, dy);
},
}
});
} else {
this._move(d);
@ -7255,7 +7259,7 @@
scale: scale,
delay: delay,
onComplete: onComplete,
onUpdate: this.onZoomed.bind(this),
onUpdate: this.onZoomed.bind(this)
});
} else {
this.scale = scale;
@ -7273,7 +7277,7 @@
transform(translate, zoom, rotate, anchor) {
let delta = {
x: this.movableX ? translate.x : 0,
y: this.movableY ? translate.y : 0,
y: this.movableY ? translate.y : 0
};
if (this.resizable) var vzoom = zoom;
if (!this.translatable) delta = { x: 0, y: 0 };
@ -7288,7 +7292,7 @@
rotate: 0,
about: anchor,
fast: false,
type: UPDATE,
type: UPDATE
});
this.onTransform.forEach(function(f) {
f(event);
@ -7319,7 +7323,7 @@
translate: delta,
scale: newScale,
rotate: rotate,
about: anchor,
about: anchor
});
this.onTransform.forEach(function(f) {
f(event);
@ -7387,7 +7391,7 @@
if (this.scale > this.maxScale) zoom = 1 - amount;
if (zoom != 1) {
this.transform({ x: 0, y: 0 }, zoom, 0, this.zoomAnchor);
requestAnimationFrame((dt) => {
requestAnimationFrame(dt => {
this.animateZoomBounce(dt);
});
return
@ -7444,7 +7448,7 @@
rotate: 0,
about: null,
fast: false,
type: START,
type: START
});
this.onTransform.forEach(function(f) {
f(event);
@ -7462,13 +7466,13 @@
}
onEnd(event, interaction) {
console.log('Scatter.onEnd', this.dragging);
//console.log('Scatter.onEnd', this.dragging)
if (interaction.isFinished()) {
this.endGesture(interaction);
this.dragging = false;
for (let key of interaction.ended.keys()) {
if (interaction.isTap(key)) {
console.log('Scatter.isTap');
//console.log('Scatter.isTap')
let point = interaction.ended.get(key);
this.onTap(event, interaction, point);
}
@ -7480,7 +7484,7 @@
rotate: 0,
about: null,
fast: false,
type: END,
type: END
});
this.onTransform.forEach(function(f) {
f(event);
@ -7496,7 +7500,7 @@
//onTap(event, interaction, point) {}
onTap(event, interaction, point) {
console.log('AbstractScatter.onTap', this.tapDelegate, interaction);
//console.log('AbstractScatter.onTap', this.tapDelegate, interaction)
if (this.tapDelegate) {
Events$1.stop(event);
this.tapDelegate.tap(event, 'scatter');
@ -7510,7 +7514,7 @@
translate: delta,
scale: this.scale,
about: this.currentAbout,
type: null,
type: null
});
this.onTransform.forEach(function(f) {
f(event);
@ -7524,7 +7528,7 @@
scale: this.scale,
about: this.currentAbout,
fast: false,
type: null,
type: null
});
this.onTransform.forEach(function(f) {
f(event);
@ -7538,7 +7542,7 @@
translate: { x: dx, y: dy },
about: about,
fast: true,
type: null,
type: null
});
this.onTransform.forEach(function(f) {
f(event);
@ -7551,7 +7555,7 @@
let event = new ScatterEvent(this, {
scale: this.scale,
fast: false,
type: null,
type: null
});
this.onTransform.forEach(function(f) {
f(event);
@ -7567,7 +7571,7 @@
scale: this.scale,
about: about,
fast: false,
type: null,
type: null
});
this.onTransform.forEach(function(f) {
f(event);
@ -7616,7 +7620,7 @@
scaleCloseBuffer = 0.05,
useLowPassFilter = false,
maxRotation = Angle.degree2radian(15),
minInteractionDistance = 200,
minInteractionDistance = 200
} = {}
) {
super({
@ -7643,7 +7647,7 @@
onClose,
useLowPassFilter,
maxRotation,
minInteractionDistance,
minInteractionDistance
});
if (container == null || width == null || height == null) {
throw new Error('Invalid value: null')
@ -7671,7 +7675,7 @@
height: height,
scale: startScale,
rotation: this.startRotationDegrees,
transformOrigin: transformOrigin,
transformOrigin: transformOrigin
};
this.tapNodes = new Map();
@ -7693,15 +7697,15 @@
button.className = 'interactiveElement';
this.element.appendChild(button);
button.addEventListener('pointerdown', (e) => {
button.addEventListener('pointerdown', e => {
this.startResize(e);
});
button.addEventListener('pointermove', (e) => {
button.addEventListener('pointermove', e => {
this.resize(e);
});
button.addEventListener('pointerup', (e) => {
button.addEventListener('pointerup', e => {
this.stopResize(e);
});
this.resizeButton = button;
@ -7718,7 +7722,7 @@
scale: this.scale,
x: this.x,
y: this.y,
rotation: this.rotation,
rotation: this.rotation
}
}
@ -7769,7 +7773,7 @@
top: rect.top - stage.top,
left: rect.left - stage.left,
width: rect.width,
height: rect.height,
height: rect.height
}
}
@ -7810,7 +7814,7 @@
set scale(scale) {
TweenLite.set(this.element, {
scale: scale,
transformOrigin: this.transformOrigin,
transformOrigin: this.transformOrigin
});
this._scale = scale;
}
@ -7842,9 +7846,9 @@
hide() {
TweenLite.to(this.element, 0.1, {
display: 'none',
onComplete: (e) => {
onComplete: e => {
this.element.parentNode.removeChild(this.element);
},
}
});
}
@ -7858,7 +7862,7 @@
x: p.x,
y: p.y,
rotation: rotationDegrees,
transformOrigin: this.transformOrigin,
transformOrigin: this.transformOrigin
});
}
@ -7919,7 +7923,7 @@
let oldPostition = {
x: this.element.getBoundingClientRect().left,
y: this.element.getBoundingClientRect().top,
y: this.element.getBoundingClientRect().top
};
this.bringToFront();
@ -7927,7 +7931,7 @@
let newPostition = {
x: this.element.getBoundingClientRect().left,
y: this.element.getBoundingClientRect().top,
y: this.element.getBoundingClientRect().top
};
let offset = Points.subtract(oldPostition, newPostition);
@ -7972,7 +7976,7 @@
)
TweenLite.to(this.element, 0, {
width: this.element.offsetWidth + resizeW / this.scale,
height: this.element.offsetHeight + resizeH / this.scale,
height: this.element.offsetHeight + resizeH / this.scale
});
this.oldX = e.clientX;
@ -7989,12 +7993,12 @@
let event = new CustomEvent('resizeEnded');
let oldPostition = {
x: this.element.getBoundingClientRect().left,
y: this.element.getBoundingClientRect().top,
y: this.element.getBoundingClientRect().top
};
this.element.style.transformOrigin = '50% 50%';
let newPostition = {
x: this.element.getBoundingClientRect().left,
y: this.element.getBoundingClientRect().top,
y: this.element.getBoundingClientRect().top
};
let offset = Points.subtract(oldPostition, newPostition);

View File

@ -1,5 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Flippable Doctest</title>
<link rel="stylesheet" href="./3rdparty/highlight/styles/default.css" />
<link rel="stylesheet" href="../css/doctest.css" />
<script src="./3rdparty/highlight/highlight.pack.js"></script>
<script src="../dist/iwmlib.3rdparty.js"></script>
<script src="../dist/iwmlib.js"></script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Flippable Doctest</title>
@ -9,6 +17,13 @@
<script src="../dist/iwmlib.3rdparty.js"></script>
<script src="../dist/iwmlib.js"></script>
<link rel="stylesheet" href="../css/flipeffect.css" />
<template id="flipTemplate">
<div class="flipWrapper">
<div class="flipCard">
<div class="flipFace front"></div>
<div class="flipFace back" style="visibility: hidden"></div>
</div>
<link rel="stylesheet" href="../css/flipeffect.css" />
<template id="flipTemplate">
<div class="flipWrapper">
@ -91,4 +106,25 @@ the viewbox of the SVG will interfere with the coordinate transformation.
}
</script>
</body>
</html>
<h3>Example</h3>
<main id="main" style="border: 1px solid gray; position: relative; height: 256px"></main>
<script class="doctest">
let scatterContainer = new DOMScatterContainer(main, { stopEvents: false })
if (Capabilities.supportsTemplate()) {
let flip = new DOMFlip(
scatterContainer,
flipTemplate,
new ImageLoader('./examples/king.jpeg'),
new ImageLoader('./examples/women.jpeg'),
{ tapDelegateFactory: CardWrapper, preloadBack: true }
)
flip.load().then((flip) => {
flip.centerAt({ x: 150, y: 120 })
})
} else {
alert('Templates not supported, use Edge, Chrome, Safari or Firefox.')
}
</script>
</body>
</html>

View File

@ -95,7 +95,7 @@ class Throwable {
throwVisibility = 44,
throwDamping = 0.95,
autoThrow = true,
onThrowFinished = null,
onThrowFinished = null
} = {}) {
this.movableX = movableX
this.movableY = movableY
@ -128,7 +128,7 @@ class Throwable {
t: t,
dt: dt,
dx: delta.x / number,
dy: delta.y / number,
dy: delta.y / number
}
this.velocities.push(velocity)
while (this.velocities.length > buffer) {
@ -190,7 +190,7 @@ class Throwable {
if (nextLength > prevLength) {
let factor = nextLength / prevLength
next = Points.multiplyScalar(next, 1 / factor)
console.log('Prevent acceleration', factor, this.velocity, next)
// console.log('Prevent acceleration', factor, this.velocity, next)
}
this.velocity = next
let d = Points.multiplyScalar(this.velocity, dt)
@ -226,7 +226,7 @@ class Throwable {
let next = Points.multiplyScalar(velocity, this.throwDamping)
return {
x: this.movableX ? next.x : 0,
y: this.movableY ? next.y : 0,
y: this.movableY ? next.y : 0
}
}
@ -271,7 +271,7 @@ export class AbstractScatter extends Throwable {
scaleCloseBuffer = 0.05,
maxRotation = Angle.degree2radian(5),
minInteractionDistance = 0,
useLowPassFilter = false,
useLowPassFilter = false
} = {}) {
if (rotationDegrees != null && rotation != null) {
throw new Error('Use rotationDegrees or rotation but not both')
@ -286,7 +286,7 @@ export class AbstractScatter extends Throwable {
throwVisibility,
throwDamping,
autoThrow,
onThrowFinished,
onThrowFinished
})
/**
@ -361,7 +361,7 @@ export class AbstractScatter extends Throwable {
_callCloseCallbacks() {
if (this.onClose) {
this.onClose.forEach((callback) => callback(this))
this.onClose.forEach(callback => callback(this))
}
}
@ -381,6 +381,9 @@ export class AbstractScatter extends Throwable {
let delta = interaction.delta()
if (delta != null) {
/* uo: Is this the best place to add velocity? It works with scrollable text in card drawers but
has to be tested */
this.addVelocity(delta)
let rotate = delta.rotate
let zoom = delta.zoom
if (this.maxRotation != null) {
@ -399,9 +402,10 @@ export class AbstractScatter extends Throwable {
zoomDelta *= ratio
zoom = 1 + zoomDelta
}
this.transform(delta, zoom, rotate, delta.about)
/* uo: This is too late an dangerous. transform sometimes modifies delta
this.addVelocity(delta) // uo: reverted commit fa0256d782dd498c6d3e51321260ca375ca9f855
*/
if (zoom != 1) this.interactionAnchor = delta.about
}
@ -512,11 +516,11 @@ export class AbstractScatter extends Throwable {
if (this.scale < this.minScale + this.scaleCloseThreshold - this.scaleCloseBuffer) {
this.zoom(this.minScale, {
animate: 0.2,
onComplete: this.close.bind(this),
onComplete: this.close.bind(this)
})
} else if (this.scale < this.minScale + this.scaleCloseThreshold) {
this.zoom(this.minScale + this.scaleCloseThreshold, {
animate: 0.4,
animate: 0.4
})
}
}
@ -538,12 +542,12 @@ export class AbstractScatter extends Throwable {
x: '+=' + d.x,
y: '+=' + d.y,
/* scale: scale, uo: not defined, why was this here? */
onUpdate: (e) => {
onUpdate: e => {
let p = this.position
let dx = p.x - startPos.x
let dy = p.x - startPos.y
this.onMoved(dx, dy)
},
}
})
} else {
this._move(d)
@ -572,7 +576,7 @@ export class AbstractScatter extends Throwable {
scale: scale,
delay: delay,
onComplete: onComplete,
onUpdate: this.onZoomed.bind(this),
onUpdate: this.onZoomed.bind(this)
})
} else {
this.scale = scale
@ -590,7 +594,7 @@ export class AbstractScatter extends Throwable {
transform(translate, zoom, rotate, anchor) {
let delta = {
x: this.movableX ? translate.x : 0,
y: this.movableY ? translate.y : 0,
y: this.movableY ? translate.y : 0
}
if (this.resizable) var vzoom = zoom
if (!this.translatable) delta = { x: 0, y: 0 }
@ -605,7 +609,7 @@ export class AbstractScatter extends Throwable {
rotate: 0,
about: anchor,
fast: false,
type: UPDATE,
type: UPDATE
})
this.onTransform.forEach(function(f) {
f(event)
@ -636,7 +640,7 @@ export class AbstractScatter extends Throwable {
translate: delta,
scale: newScale,
rotate: rotate,
about: anchor,
about: anchor
})
this.onTransform.forEach(function(f) {
f(event)
@ -704,7 +708,7 @@ export class AbstractScatter extends Throwable {
if (this.scale > this.maxScale) zoom = 1 - amount
if (zoom != 1) {
this.transform({ x: 0, y: 0 }, zoom, 0, this.zoomAnchor)
requestAnimationFrame((dt) => {
requestAnimationFrame(dt => {
this.animateZoomBounce(dt)
})
return
@ -761,7 +765,7 @@ export class AbstractScatter extends Throwable {
rotate: 0,
about: null,
fast: false,
type: START,
type: START
})
this.onTransform.forEach(function(f) {
f(event)
@ -779,13 +783,13 @@ export class AbstractScatter extends Throwable {
}
onEnd(event, interaction) {
console.log('Scatter.onEnd', this.dragging)
//console.log('Scatter.onEnd', this.dragging)
if (interaction.isFinished()) {
this.endGesture(interaction)
this.dragging = false
for (let key of interaction.ended.keys()) {
if (interaction.isTap(key)) {
console.log('Scatter.isTap')
//console.log('Scatter.isTap')
let point = interaction.ended.get(key)
this.onTap(event, interaction, point)
}
@ -797,7 +801,7 @@ export class AbstractScatter extends Throwable {
rotate: 0,
about: null,
fast: false,
type: END,
type: END
})
this.onTransform.forEach(function(f) {
f(event)
@ -813,7 +817,7 @@ export class AbstractScatter extends Throwable {
//onTap(event, interaction, point) {}
onTap(event, interaction, point) {
console.log('AbstractScatter.onTap', this.tapDelegate, interaction)
//console.log('AbstractScatter.onTap', this.tapDelegate, interaction)
if (this.tapDelegate) {
Events.stop(event)
this.tapDelegate.tap(event, 'scatter')
@ -827,7 +831,7 @@ export class AbstractScatter extends Throwable {
translate: delta,
scale: this.scale,
about: this.currentAbout,
type: null,
type: null
})
this.onTransform.forEach(function(f) {
f(event)
@ -841,7 +845,7 @@ export class AbstractScatter extends Throwable {
scale: this.scale,
about: this.currentAbout,
fast: false,
type: null,
type: null
})
this.onTransform.forEach(function(f) {
f(event)
@ -855,7 +859,7 @@ export class AbstractScatter extends Throwable {
translate: { x: dx, y: dy },
about: about,
fast: true,
type: null,
type: null
})
this.onTransform.forEach(function(f) {
f(event)
@ -868,7 +872,7 @@ export class AbstractScatter extends Throwable {
let event = new ScatterEvent(this, {
scale: this.scale,
fast: false,
type: null,
type: null
})
this.onTransform.forEach(function(f) {
f(event)
@ -884,7 +888,7 @@ export class AbstractScatter extends Throwable {
scale: this.scale,
about: about,
fast: false,
type: null,
type: null
})
this.onTransform.forEach(function(f) {
f(event)
@ -918,7 +922,7 @@ export class DOMScatterContainer {
useCapture = true,
capturePointerEvents = true,
touchAction = 'none',
debugCanvas = null,
debugCanvas = null
} = {}
) {
this.onCapture = null
@ -930,7 +934,7 @@ export class DOMScatterContainer {
movement of scatter objects, the touchmove event has to be bound again.
*/
if (Capabilities.isSafari) {
document.addEventListener('touchmove', (event) => this.preventPinch(event), false)
document.addEventListener('touchmove', event => this.preventPinch(event), false)
stopEvents = false
} else {
stopEvents = true
@ -945,11 +949,11 @@ export class DOMScatterContainer {
this.delegate = new InteractionMapper(element, this, {
useCapture,
capturePointerEvents,
mouseWheelElement: window,
mouseWheelElement: window
})
if (debugCanvas !== null) {
requestAnimationFrame((dt) => {
requestAnimationFrame(dt => {
this.showTouches(dt, debugCanvas)
})
}
@ -971,7 +975,7 @@ export class DOMScatterContainer {
context.fill()
context.stroke()
}
requestAnimationFrame((dt) => {
requestAnimationFrame(dt => {
this.showTouches(dt, canvas)
})
}
@ -1113,7 +1117,7 @@ export class DOMScatter extends AbstractScatter {
scaleCloseBuffer = 0.05,
useLowPassFilter = false,
maxRotation = Angle.degree2radian(15),
minInteractionDistance = 200,
minInteractionDistance = 200
} = {}
) {
super({
@ -1140,7 +1144,7 @@ export class DOMScatter extends AbstractScatter {
onClose,
useLowPassFilter,
maxRotation,
minInteractionDistance,
minInteractionDistance
})
if (container == null || width == null || height == null) {
throw new Error('Invalid value: null')
@ -1168,7 +1172,7 @@ export class DOMScatter extends AbstractScatter {
height: height,
scale: startScale,
rotation: this.startRotationDegrees,
transformOrigin: transformOrigin,
transformOrigin: transformOrigin
}
this.tapNodes = new Map()
@ -1190,15 +1194,15 @@ export class DOMScatter extends AbstractScatter {
button.className = 'interactiveElement'
this.element.appendChild(button)
button.addEventListener('pointerdown', (e) => {
button.addEventListener('pointerdown', e => {
this.startResize(e)
})
button.addEventListener('pointermove', (e) => {
button.addEventListener('pointermove', e => {
this.resize(e)
})
button.addEventListener('pointerup', (e) => {
button.addEventListener('pointerup', e => {
this.stopResize(e)
})
this.resizeButton = button
@ -1215,7 +1219,7 @@ export class DOMScatter extends AbstractScatter {
scale: this.scale,
x: this.x,
y: this.y,
rotation: this.rotation,
rotation: this.rotation
}
}
@ -1266,7 +1270,7 @@ export class DOMScatter extends AbstractScatter {
top: rect.top - stage.top,
left: rect.left - stage.left,
width: rect.width,
height: rect.height,
height: rect.height
}
}
@ -1307,7 +1311,7 @@ export class DOMScatter extends AbstractScatter {
set scale(scale) {
TweenLite.set(this.element, {
scale: scale,
transformOrigin: this.transformOrigin,
transformOrigin: this.transformOrigin
})
this._scale = scale
}
@ -1339,9 +1343,9 @@ export class DOMScatter extends AbstractScatter {
hide() {
TweenLite.to(this.element, 0.1, {
display: 'none',
onComplete: (e) => {
onComplete: e => {
this.element.parentNode.removeChild(this.element)
},
}
})
}
@ -1355,7 +1359,7 @@ export class DOMScatter extends AbstractScatter {
x: p.x,
y: p.y,
rotation: rotationDegrees,
transformOrigin: this.transformOrigin,
transformOrigin: this.transformOrigin
})
}
@ -1416,7 +1420,7 @@ export class DOMScatter extends AbstractScatter {
let oldPostition = {
x: this.element.getBoundingClientRect().left,
y: this.element.getBoundingClientRect().top,
y: this.element.getBoundingClientRect().top
}
this.bringToFront()
@ -1424,7 +1428,7 @@ export class DOMScatter extends AbstractScatter {
let newPostition = {
x: this.element.getBoundingClientRect().left,
y: this.element.getBoundingClientRect().top,
y: this.element.getBoundingClientRect().top
}
let offset = Points.subtract(oldPostition, newPostition)
@ -1469,7 +1473,7 @@ export class DOMScatter extends AbstractScatter {
)
TweenLite.to(this.element, 0, {
width: this.element.offsetWidth + resizeW / this.scale,
height: this.element.offsetHeight + resizeH / this.scale,
height: this.element.offsetHeight + resizeH / this.scale
})
this.oldX = e.clientX
@ -1486,12 +1490,12 @@ export class DOMScatter extends AbstractScatter {
let event = new CustomEvent('resizeEnded')
let oldPostition = {
x: this.element.getBoundingClientRect().left,
y: this.element.getBoundingClientRect().top,
y: this.element.getBoundingClientRect().top
}
this.element.style.transformOrigin = '50% 50%'
let newPostition = {
x: this.element.getBoundingClientRect().left,
y: this.element.getBoundingClientRect().top,
y: this.element.getBoundingClientRect().top
}
let offset = Points.subtract(oldPostition, newPostition)