IWMBrowser/iwmlib
IWMBrowser/iwmlib
4
0
Fork 0
Code Issues 6 Pull Requests Releases Wiki Activity

Merge branch 'main' of https://gitea.iwm-tuebingen.de/IWMBrowser/iwmlib

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

104
dist/iwmlib.js vendored
View File

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

94
dist/iwmlib.pixi.js vendored
View File

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

36
lib/flippable.html
View File

@ -1,5 +1,13 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <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> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Flippable Doctest</title> <title>Flippable Doctest</title>
@ -9,6 +17,13 @@
<script src="../dist/iwmlib.3rdparty.js"></script> <script src="../dist/iwmlib.3rdparty.js"></script>
<script src="../dist/iwmlib.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" /> <link rel="stylesheet" href="../css/flipeffect.css" />
<template id="flipTemplate"> <template id="flipTemplate">
<div class="flipWrapper"> <div class="flipWrapper">
@ -91,4 +106,25 @@ the viewbox of the SVG will interfere with the coordinate transformation.
} }
</script> </script>
</body> </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> </html>

102
lib/scatter.js
View File

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