Fixed eslint problems and cleaned DOMScatter.onTap code
This commit is contained in:
parent
5d1408ad9a
commit
4f35bfd51f
4417
dist/iwmlib.js
vendored
4417
dist/iwmlib.js
vendored
File diff suppressed because it is too large
Load Diff
202
dist/iwmlib.pixi.js
vendored
202
dist/iwmlib.pixi.js
vendored
@ -4781,7 +4781,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* globals Hammer, propagating */
|
/* eslint-disable no-unused-vars */
|
||||||
|
|
||||||
/** Interaction patterns
|
/** Interaction patterns
|
||||||
|
|
||||||
@ -4789,6 +4789,7 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
class IInteractionTarget extends Interface {
|
class IInteractionTarget extends Interface {
|
||||||
|
|
||||||
capture(event) {
|
capture(event) {
|
||||||
return typeof true
|
return typeof true
|
||||||
}
|
}
|
||||||
@ -4992,10 +4993,10 @@
|
|||||||
let d1 = Points.subtract(c1, p1);
|
let d1 = Points.subtract(c1, p1);
|
||||||
let d2 = Points.subtract(c2, p2);
|
let d2 = Points.subtract(c2, p2);
|
||||||
let cm = Points.mean(c1, c2);
|
let cm = Points.mean(c1, c2);
|
||||||
|
|
||||||
// Using the mean leads to jumps between time slices with 3 and 2 fingers
|
// Using the mean leads to jumps between time slices with 3 and 2 fingers
|
||||||
// We use the mean of deltas instead
|
// We use the mean of deltas instead
|
||||||
let delta = Points.mean(d1, d2);
|
let delta = Points.mean(d1, d2);
|
||||||
let zoom = 1.0;
|
let zoom = 1.0;
|
||||||
let distance1 = Points.distance(p1, p2);
|
let distance1 = Points.distance(p1, p2);
|
||||||
let distance2 = Points.distance(c1, c2);
|
let distance2 = Points.distance(c1, c2);
|
||||||
@ -5199,7 +5200,6 @@
|
|||||||
}
|
}
|
||||||
let result = false;
|
let result = false;
|
||||||
if (this.isTap(key)) {
|
if (this.isTap(key)) {
|
||||||
|
|
||||||
this.registerTap(key, ended);
|
this.registerTap(key, ended);
|
||||||
result = this.tapCounts.get(key) == 2;
|
result = this.tapCounts.get(key) == 2;
|
||||||
}
|
}
|
||||||
@ -5313,7 +5313,9 @@
|
|||||||
if (this.capturePointerEvents) {
|
if (this.capturePointerEvents) {
|
||||||
try {
|
try {
|
||||||
element.setPointerCapture(e.pointerId);
|
element.setPointerCapture(e.pointerId);
|
||||||
} catch (e) { }
|
} catch (e) {
|
||||||
|
console.warn('Cannot setPointerCapture');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
this.onStart(e);
|
this.onStart(e);
|
||||||
}
|
}
|
||||||
@ -5345,7 +5347,9 @@
|
|||||||
if (this.capturePointerEvents) {
|
if (this.capturePointerEvents) {
|
||||||
try {
|
try {
|
||||||
element.releasePointerCapture(e.pointerId);
|
element.releasePointerCapture(e.pointerId);
|
||||||
} catch (e) { }
|
} catch (e) {
|
||||||
|
console.warn('Cannot release pointer');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
useCapture
|
useCapture
|
||||||
@ -5389,7 +5393,7 @@
|
|||||||
e => {
|
e => {
|
||||||
if (this.debug) console.log('pointerout', e.pointerId, e.pointerType, e.target);
|
if (this.debug) console.log('pointerout', e.pointerId, e.pointerType, e.target);
|
||||||
if (e.target == element) {
|
if (e.target == element) {
|
||||||
this.onEnd(e);
|
this.onEnd(e);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
useCapture);
|
useCapture);
|
||||||
@ -5492,9 +5496,8 @@
|
|||||||
e => {
|
e => {
|
||||||
if (e.target == element) {
|
if (e.target == element) {
|
||||||
this.onEnd(e);
|
this.onEnd(e);
|
||||||
console.warn("Shouldn't happen: mouseout ends interaction");
|
console.warn('Shouldn\'t happen: mouseout ends interaction');
|
||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
useCapture
|
useCapture
|
||||||
);
|
);
|
||||||
@ -5594,39 +5597,42 @@
|
|||||||
// 'targetTouches'
|
// 'targetTouches'
|
||||||
let result = {};
|
let result = {};
|
||||||
switch (event.constructor.name) {
|
switch (event.constructor.name) {
|
||||||
case 'MouseEvent':
|
case 'MouseEvent': {
|
||||||
let buttons = event.buttons || event.which;
|
let buttons = event.buttons || event.which;
|
||||||
if (buttons) result['mouse'] = this.getPosition(event);
|
if (buttons) result['mouse'] = this.getPosition(event);
|
||||||
break
|
break
|
||||||
case 'PointerEvent':
|
}
|
||||||
result[event.pointerId.toString()] = this.getPosition(event);
|
case 'PointerEvent': {
|
||||||
break
|
result[event.pointerId.toString()] = this.getPosition(event);
|
||||||
case 'Touch':
|
break
|
||||||
let id =
|
}
|
||||||
|
case 'Touch': {
|
||||||
|
let id =
|
||||||
event.touchType === 'stylus'
|
event.touchType === 'stylus'
|
||||||
? 'stylus'
|
? 'stylus'
|
||||||
: event.identifier.toString();
|
: event.identifier.toString();
|
||||||
result[id] = this.getPosition(event);
|
result[id] = this.getPosition(event);
|
||||||
break
|
break
|
||||||
// case 'TouchEvent':
|
}
|
||||||
// // Needs to be observed: Perhaps changedTouches are all we need. If so
|
// case 'TouchEvent':
|
||||||
// // we can remove the touchEventKey default parameter
|
// // Needs to be observed: Perhaps changedTouches are all we need. If so
|
||||||
// if (touchEventKey == 'all') {
|
// // we can remove the touchEventKey default parameter
|
||||||
// for(let t of event.targetTouches) {
|
// if (touchEventKey == 'all') {
|
||||||
// result[t.identifier.toString()] = this.getPosition(t)
|
// for(let t of event.targetTouches) {
|
||||||
// }
|
// result[t.identifier.toString()] = this.getPosition(t)
|
||||||
// for(let t of event.changedTouches) {
|
// }
|
||||||
// result[t.identifier.toString()] = this.getPosition(t)
|
// for(let t of event.changedTouches) {
|
||||||
// }
|
// result[t.identifier.toString()] = this.getPosition(t)
|
||||||
// }
|
// }
|
||||||
// else {
|
// }
|
||||||
// for(let t of event.changedTouches) {
|
// else {
|
||||||
// result[t.identifier.toString()] = this.getPosition(t)
|
// for(let t of event.changedTouches) {
|
||||||
// }
|
// result[t.identifier.toString()] = this.getPosition(t)
|
||||||
// }
|
// }
|
||||||
// break
|
// }
|
||||||
default:
|
// break
|
||||||
break
|
default:
|
||||||
|
break
|
||||||
}
|
}
|
||||||
return result
|
return result
|
||||||
}
|
}
|
||||||
@ -5654,7 +5660,7 @@
|
|||||||
let point = extracted[key];
|
let point = extracted[key];
|
||||||
let updated = this.interaction.update(key, point);
|
let updated = this.interaction.update(key, point);
|
||||||
if (updated) {
|
if (updated) {
|
||||||
console.warn("new pointer in updateInteraction shouldn't happen", key);
|
console.warn('new pointer in updateInteraction shouldn\'t happen', key);
|
||||||
this.interactionStarted(event, key, point);
|
this.interactionStarted(event, key, point);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -6039,6 +6045,11 @@
|
|||||||
window.Capabilities = Capabilities;
|
window.Capabilities = Capabilities;
|
||||||
window.CapabilitiesTests = CapabilitiesTests;
|
window.CapabilitiesTests = CapabilitiesTests;
|
||||||
|
|
||||||
|
/** Basic class for poppable elements that need to be closed as soon as one poppable is
|
||||||
|
* shown.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* eslint-disable no-unused-vars */
|
||||||
/**
|
/**
|
||||||
* A base class for scatter specific events.
|
* A base class for scatter specific events.
|
||||||
*
|
*
|
||||||
@ -6088,7 +6099,7 @@
|
|||||||
|
|
||||||
toString() {
|
toString() {
|
||||||
return (
|
return (
|
||||||
"Event('scatterTransformed', scale: " +
|
'Event(\'scatterTransformed\', scale: ' +
|
||||||
this.scale +
|
this.scale +
|
||||||
' about: ' +
|
' about: ' +
|
||||||
this.about.x +
|
this.about.x +
|
||||||
@ -6163,7 +6174,7 @@
|
|||||||
// 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
|
||||||
// onMove events
|
// onMove events
|
||||||
let velocity = { t: t, dt: dt, dx: delta.x / delta.number, dy: delta.y / delta.number};
|
let velocity = { t: t, dt: dt, dx: delta.x / delta.number, dy: delta.y / delta.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();
|
||||||
@ -6347,7 +6358,7 @@
|
|||||||
this.resizable = resizable;
|
this.resizable = resizable;
|
||||||
this.mouseZoomFactor = mouseZoomFactor;
|
this.mouseZoomFactor = mouseZoomFactor;
|
||||||
this.autoBringToFront = autoBringToFront;
|
this.autoBringToFront = autoBringToFront;
|
||||||
|
|
||||||
this.dragging = false;
|
this.dragging = false;
|
||||||
this.onTransform = onTransform != null ? [onTransform] : null;
|
this.onTransform = onTransform != null ? [onTransform] : null;
|
||||||
this.onClose = onClose != null ? [onClose] : null;
|
this.onClose = onClose != null ? [onClose] : null;
|
||||||
@ -6387,7 +6398,6 @@
|
|||||||
let alpha = delta.rotate;
|
let alpha = delta.rotate;
|
||||||
if (this.maxRotation != null) {
|
if (this.maxRotation != null) {
|
||||||
if (Math.abs(alpha) > this.maxRotation) {
|
if (Math.abs(alpha) > this.maxRotation) {
|
||||||
console.log("limited rotation");
|
|
||||||
alpha = 0;
|
alpha = 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -6460,7 +6470,7 @@
|
|||||||
let stagePolygon = this.containerPolygon;
|
let stagePolygon = this.containerPolygon;
|
||||||
// UO: since keepOnStage is called in nextVelocity we need to
|
// UO: since keepOnStage is called in nextVelocity we need to
|
||||||
// ensure a return value
|
// ensure a return value
|
||||||
if (!stagePolygon) return { x: 0, y: 0}
|
if (!stagePolygon) return { x: 0, y: 0 }
|
||||||
let polygon = this.polygon;
|
let polygon = this.polygon;
|
||||||
let bounced = this.bouncing();
|
let bounced = this.bouncing();
|
||||||
if (bounced) {
|
if (bounced) {
|
||||||
@ -6744,20 +6754,6 @@
|
|||||||
}
|
}
|
||||||
this._updateTransparency();
|
this._updateTransparency();
|
||||||
}
|
}
|
||||||
//
|
|
||||||
// if (this.onTransform != null) {
|
|
||||||
// let event = new ScatterEvent(this, {
|
|
||||||
// translate: {x: 0, y: 0},
|
|
||||||
// scale: this.scale,
|
|
||||||
// rotate: 0,
|
|
||||||
// about: null,
|
|
||||||
// fast: false,
|
|
||||||
// type: ZOOM
|
|
||||||
// })
|
|
||||||
// this.onTransform.forEach(function(f) {
|
|
||||||
// f(event)
|
|
||||||
// })
|
|
||||||
// }
|
|
||||||
}
|
}
|
||||||
|
|
||||||
onStart(event, interaction) {
|
onStart(event, interaction) {
|
||||||
@ -6999,15 +6995,13 @@
|
|||||||
}
|
}
|
||||||
this.resizeButton = null;
|
this.resizeButton = null;
|
||||||
if (resizable) {
|
if (resizable) {
|
||||||
let button = document.createElement("div");
|
let button = document.createElement('div');
|
||||||
button.style.position = "absolute";
|
button.style.position = 'absolute';
|
||||||
button.style.right = "0px";
|
button.style.right = '0px';
|
||||||
button.style.bottom = "0px";
|
button.style.bottom = '0px';
|
||||||
button.style.width = "50px";
|
button.style.width = '50px';
|
||||||
button.style.height = "50px";
|
button.style.height = '50px';
|
||||||
// button.style.borderRadius = "100% 0px 0px 0px";
|
button.className = 'interactiveElement';
|
||||||
// button.style.background = this.element.style.backgroundColor
|
|
||||||
button.className = "interactiveElement";
|
|
||||||
this.element.appendChild(button);
|
this.element.appendChild(button);
|
||||||
|
|
||||||
button.addEventListener('pointerdown', (e) => {
|
button.addEventListener('pointerdown', (e) => {
|
||||||
@ -7182,43 +7176,13 @@
|
|||||||
TweenLite.set(this.element, { zIndex: DOMScatter.zIndex++ });
|
TweenLite.set(this.element, { zIndex: DOMScatter.zIndex++ });
|
||||||
}
|
}
|
||||||
|
|
||||||
toggleVideo(element) {
|
|
||||||
if (element.paused) {
|
|
||||||
element.play();
|
|
||||||
} else {
|
|
||||||
element.pause();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
onTap(event, interaction, point) {
|
onTap(event, interaction, point) {
|
||||||
if (this.simulateClick) {
|
if (this.simulateClick) {
|
||||||
let p = Points.fromPageToNode(this.element, point);
|
let p = Points.fromPageToNode(this.element, point);
|
||||||
let iframe = this.element.querySelector('iframe');
|
let element = document.elementFromPoint(p.x, p.y);
|
||||||
if (iframe) {
|
if (element != null) {
|
||||||
let doc = iframe.contentWindow.document;
|
console.log('tap simulates click');
|
||||||
let element = doc.elementFromPoint(p.x, p.y);
|
element.click();
|
||||||
if (element == null) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
switch (element.tagName) {
|
|
||||||
case 'VIDEO':
|
|
||||||
console.log(element.currentSrc);
|
|
||||||
if (PopupMenu) {
|
|
||||||
PopupMenu.open(
|
|
||||||
{
|
|
||||||
Fullscreen: () =>
|
|
||||||
window.open(element.currentSrc),
|
|
||||||
Play: () => element.play()
|
|
||||||
},
|
|
||||||
{ x, y }
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
this.toggleVideo(element);
|
|
||||||
}
|
|
||||||
break
|
|
||||||
default:
|
|
||||||
element.click();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -7259,37 +7223,35 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
resizeAfterTransform(zoom) {
|
resizeAfterTransform(zoom) {
|
||||||
// let w = this.width * this.scale
|
|
||||||
// let h = this.height * this.scale
|
|
||||||
// TweenLite.set(this.element, { width: w, height: h })
|
|
||||||
if (this.onResize) {
|
if (this.onResize) {
|
||||||
|
let w = this.width * this.scale;
|
||||||
|
let h = this.height * this.scale;
|
||||||
let event = new ResizeEvent(this, { width: w, height: h });
|
let event = new ResizeEvent(this, { width: w, height: h });
|
||||||
this.onResize(event);
|
this.onResize(event);
|
||||||
}
|
}
|
||||||
if (this.resizeButton != null) ;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
startResize(e) {
|
startResize(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
let event = new CustomEvent('resizeStarted');
|
let event = new CustomEvent('resizeStarted');
|
||||||
|
|
||||||
let oldPostition = {x: this.element.getBoundingClientRect().left, y: this.element.getBoundingClientRect().top};
|
let oldPostition = { x: this.element.getBoundingClientRect().left, y: this.element.getBoundingClientRect().top };
|
||||||
this.bringToFront();
|
this.bringToFront();
|
||||||
|
|
||||||
this.element.style.transformOrigin = "0% 0%";
|
this.element.style.transformOrigin = '0% 0%';
|
||||||
|
|
||||||
let newPostition = {x: this.element.getBoundingClientRect().left, y: this.element.getBoundingClientRect().top};
|
let newPostition = { x: this.element.getBoundingClientRect().left, y: this.element.getBoundingClientRect().top };
|
||||||
|
|
||||||
let offset = Points.subtract(oldPostition, newPostition);
|
let offset = Points.subtract(oldPostition, newPostition);
|
||||||
|
|
||||||
this.oldX = e.clientX;
|
this.oldX = e.clientX;
|
||||||
this.oldY = e.clientY;
|
this.oldY = e.clientY;
|
||||||
|
|
||||||
e.target.setAttribute('resizing', "true");
|
e.target.setAttribute('resizing', 'true');
|
||||||
e.target.setPointerCapture(e.pointerId);
|
e.target.setPointerCapture(e.pointerId);
|
||||||
|
|
||||||
TweenLite.to(this.element, 0, { css: { left: "+=" + offset.x + "px" } });
|
TweenLite.to(this.element, 0, { css: { left: '+=' + offset.x + 'px' } });
|
||||||
TweenLite.to(this.element, 0, { css: { top: "+=" + offset.y + "px" } });
|
TweenLite.to(this.element, 0, { css: { top: '+=' + offset.y + 'px' } });
|
||||||
|
|
||||||
this.element.dispatchEvent(event);
|
this.element.dispatchEvent(event);
|
||||||
}
|
}
|
||||||
@ -7300,7 +7262,7 @@
|
|||||||
let rotation = Angle.radian2degree(this.rotation);
|
let rotation = Angle.radian2degree(this.rotation);
|
||||||
rotation = (rotation + 360) % 360;
|
rotation = (rotation + 360) % 360;
|
||||||
let event = new CustomEvent('resized');
|
let event = new CustomEvent('resized');
|
||||||
if (e.target.getAttribute('resizing') == "true") {
|
if (e.target.getAttribute('resizing') == 'true') {
|
||||||
|
|
||||||
let deltaX = (e.clientX - this.oldX);
|
let deltaX = (e.clientX - this.oldX);
|
||||||
let deltaY = (e.clientY - this.oldY);
|
let deltaY = (e.clientY - this.oldY);
|
||||||
@ -7317,7 +7279,7 @@
|
|||||||
let resizeW = r * Math.cos(Angle.degree2radian(phiCorrected));
|
let resizeW = r * Math.cos(Angle.degree2radian(phiCorrected));
|
||||||
let resizeH = -r * Math.sin(Angle.degree2radian(phiCorrected));
|
let resizeH = -r * Math.sin(Angle.degree2radian(phiCorrected));
|
||||||
|
|
||||||
if ((this.element.offsetWidth + resizeW) / this.scale > this.width * 0.5 / this.scale && (this.element.offsetHeight + resizeH) / this.scale > this.height * 0.3 / this.scale) TweenLite.to(this.element, 0, { width: this.element.offsetWidth + resizeW / this.scale, height: this.element.offsetHeight + resizeH / this.scale });
|
if ((this.element.offsetWidth + resizeW) / this.scale > this.width * 0.5 / this.scale && (this.element.offsetHeight + resizeH) / this.scale > this.height * 0.3 / this.scale) TweenLite.to(this.element, 0, { width: this.element.offsetWidth + resizeW / this.scale, height: this.element.offsetHeight + resizeH / this.scale });
|
||||||
|
|
||||||
this.oldX = e.clientX;
|
this.oldX = e.clientX;
|
||||||
this.oldY = e.clientY;
|
this.oldY = e.clientY;
|
||||||
@ -7331,15 +7293,15 @@
|
|||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
||||||
let event = new CustomEvent('resizeEnded');
|
let event = new CustomEvent('resizeEnded');
|
||||||
let oldPostition = {x: this.element.getBoundingClientRect().left, y: this.element.getBoundingClientRect().top};
|
let oldPostition = { x: this.element.getBoundingClientRect().left, y: this.element.getBoundingClientRect().top };
|
||||||
this.element.style.transformOrigin = "50% 50%";
|
this.element.style.transformOrigin = '50% 50%';
|
||||||
let newPostition = {x: this.element.getBoundingClientRect().left, y: this.element.getBoundingClientRect().top};
|
let newPostition = { x: this.element.getBoundingClientRect().left, y: this.element.getBoundingClientRect().top };
|
||||||
let offset = Points.subtract(oldPostition, newPostition);
|
let offset = Points.subtract(oldPostition, newPostition);
|
||||||
|
|
||||||
TweenLite.to(this.element, 0, { css: { left: "+=" + offset.x + "px" } });
|
TweenLite.to(this.element, 0, { css: { left: '+=' + offset.x + 'px' } });
|
||||||
TweenLite.to(this.element, 0, { css: { top: "+=" + offset.y + "px" } });
|
TweenLite.to(this.element, 0, { css: { top: '+=' + offset.y + 'px' } });
|
||||||
|
|
||||||
e.target.setAttribute('resizing', "false");
|
e.target.setAttribute('resizing', 'false');
|
||||||
|
|
||||||
this.element.dispatchEvent(event);
|
this.element.dispatchEvent(event);
|
||||||
}
|
}
|
||||||
|
@ -1,8 +1,9 @@
|
|||||||
|
/* eslint-disable no-unused-vars */
|
||||||
/* globals Hammer, propagating */
|
/* globals Hammer, propagating */
|
||||||
/*eslint no-console: ["error", { allow: ["log", "warn", "info", "error"] }]*/
|
/*eslint no-console: ["error", { allow: ["log", "warn", "info", "error"] }]*/
|
||||||
|
|
||||||
import Interface from './interface.js'
|
import Interface from './interface.js'
|
||||||
import { Points, Angle, MapProxy } from './utils.js'
|
import { Points, MapProxy } from './utils.js'
|
||||||
import Events from './events.js'
|
import Events from './events.js'
|
||||||
import Logging from './logging.js'
|
import Logging from './logging.js'
|
||||||
|
|
||||||
@ -12,6 +13,7 @@ import Logging from './logging.js'
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
export class IInteractionTarget extends Interface {
|
export class IInteractionTarget extends Interface {
|
||||||
|
|
||||||
capture(event) {
|
capture(event) {
|
||||||
return typeof true
|
return typeof true
|
||||||
}
|
}
|
||||||
@ -215,10 +217,10 @@ export class InteractionPoints {
|
|||||||
let d1 = Points.subtract(c1, p1)
|
let d1 = Points.subtract(c1, p1)
|
||||||
let d2 = Points.subtract(c2, p2)
|
let d2 = Points.subtract(c2, p2)
|
||||||
let cm = Points.mean(c1, c2)
|
let cm = Points.mean(c1, c2)
|
||||||
|
|
||||||
// Using the mean leads to jumps between time slices with 3 and 2 fingers
|
// Using the mean leads to jumps between time slices with 3 and 2 fingers
|
||||||
// We use the mean of deltas instead
|
// We use the mean of deltas instead
|
||||||
let delta = Points.mean(d1, d2)
|
let delta = Points.mean(d1, d2)
|
||||||
let zoom = 1.0
|
let zoom = 1.0
|
||||||
let distance1 = Points.distance(p1, p2)
|
let distance1 = Points.distance(p1, p2)
|
||||||
let distance2 = Points.distance(c1, c2)
|
let distance2 = Points.distance(c1, c2)
|
||||||
@ -422,7 +424,6 @@ export class Interaction extends InteractionPoints {
|
|||||||
}
|
}
|
||||||
let result = false
|
let result = false
|
||||||
if (this.isTap(key)) {
|
if (this.isTap(key)) {
|
||||||
|
|
||||||
this.registerTap(key, ended)
|
this.registerTap(key, ended)
|
||||||
result = this.tapCounts.get(key) == 2
|
result = this.tapCounts.get(key) == 2
|
||||||
}
|
}
|
||||||
@ -536,7 +537,9 @@ export class InteractionDelegate {
|
|||||||
if (this.capturePointerEvents) {
|
if (this.capturePointerEvents) {
|
||||||
try {
|
try {
|
||||||
element.setPointerCapture(e.pointerId)
|
element.setPointerCapture(e.pointerId)
|
||||||
} catch (e) { }
|
} catch (e) {
|
||||||
|
console.warn('Cannot setPointerCapture')
|
||||||
|
}
|
||||||
}
|
}
|
||||||
this.onStart(e)
|
this.onStart(e)
|
||||||
}
|
}
|
||||||
@ -568,7 +571,9 @@ export class InteractionDelegate {
|
|||||||
if (this.capturePointerEvents) {
|
if (this.capturePointerEvents) {
|
||||||
try {
|
try {
|
||||||
element.releasePointerCapture(e.pointerId)
|
element.releasePointerCapture(e.pointerId)
|
||||||
} catch (e) { }
|
} catch (e) {
|
||||||
|
console.warn('Cannot release pointer')
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
useCapture
|
useCapture
|
||||||
@ -612,7 +617,7 @@ export class InteractionDelegate {
|
|||||||
e => {
|
e => {
|
||||||
if (this.debug) console.log('pointerout', e.pointerId, e.pointerType, e.target)
|
if (this.debug) console.log('pointerout', e.pointerId, e.pointerType, e.target)
|
||||||
if (e.target == element) {
|
if (e.target == element) {
|
||||||
this.onEnd(e)
|
this.onEnd(e)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
useCapture)
|
useCapture)
|
||||||
@ -715,9 +720,8 @@ export class InteractionDelegate {
|
|||||||
e => {
|
e => {
|
||||||
if (e.target == element) {
|
if (e.target == element) {
|
||||||
this.onEnd(e)
|
this.onEnd(e)
|
||||||
console.warn("Shouldn't happen: mouseout ends interaction")
|
console.warn('Shouldn\'t happen: mouseout ends interaction')
|
||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
useCapture
|
useCapture
|
||||||
)
|
)
|
||||||
@ -819,39 +823,42 @@ export class InteractionDelegate {
|
|||||||
// 'targetTouches'
|
// 'targetTouches'
|
||||||
let result = {}
|
let result = {}
|
||||||
switch (event.constructor.name) {
|
switch (event.constructor.name) {
|
||||||
case 'MouseEvent':
|
case 'MouseEvent': {
|
||||||
let buttons = event.buttons || event.which
|
let buttons = event.buttons || event.which
|
||||||
if (buttons) result['mouse'] = this.getPosition(event)
|
if (buttons) result['mouse'] = this.getPosition(event)
|
||||||
break
|
break
|
||||||
case 'PointerEvent':
|
}
|
||||||
result[event.pointerId.toString()] = this.getPosition(event)
|
case 'PointerEvent': {
|
||||||
break
|
result[event.pointerId.toString()] = this.getPosition(event)
|
||||||
case 'Touch':
|
break
|
||||||
let id =
|
}
|
||||||
|
case 'Touch': {
|
||||||
|
let id =
|
||||||
event.touchType === 'stylus'
|
event.touchType === 'stylus'
|
||||||
? 'stylus'
|
? 'stylus'
|
||||||
: event.identifier.toString()
|
: event.identifier.toString()
|
||||||
result[id] = this.getPosition(event)
|
result[id] = this.getPosition(event)
|
||||||
break
|
break
|
||||||
// case 'TouchEvent':
|
}
|
||||||
// // Needs to be observed: Perhaps changedTouches are all we need. If so
|
// case 'TouchEvent':
|
||||||
// // we can remove the touchEventKey default parameter
|
// // Needs to be observed: Perhaps changedTouches are all we need. If so
|
||||||
// if (touchEventKey == 'all') {
|
// // we can remove the touchEventKey default parameter
|
||||||
// for(let t of event.targetTouches) {
|
// if (touchEventKey == 'all') {
|
||||||
// result[t.identifier.toString()] = this.getPosition(t)
|
// for(let t of event.targetTouches) {
|
||||||
// }
|
// result[t.identifier.toString()] = this.getPosition(t)
|
||||||
// for(let t of event.changedTouches) {
|
// }
|
||||||
// result[t.identifier.toString()] = this.getPosition(t)
|
// for(let t of event.changedTouches) {
|
||||||
// }
|
// result[t.identifier.toString()] = this.getPosition(t)
|
||||||
// }
|
// }
|
||||||
// else {
|
// }
|
||||||
// for(let t of event.changedTouches) {
|
// else {
|
||||||
// result[t.identifier.toString()] = this.getPosition(t)
|
// for(let t of event.changedTouches) {
|
||||||
// }
|
// result[t.identifier.toString()] = this.getPosition(t)
|
||||||
// }
|
// }
|
||||||
// break
|
// }
|
||||||
default:
|
// break
|
||||||
break
|
default:
|
||||||
|
break
|
||||||
}
|
}
|
||||||
return result
|
return result
|
||||||
}
|
}
|
||||||
@ -879,7 +886,7 @@ export class InteractionDelegate {
|
|||||||
let point = extracted[key]
|
let point = extracted[key]
|
||||||
let updated = this.interaction.update(key, point)
|
let updated = this.interaction.update(key, point)
|
||||||
if (updated) {
|
if (updated) {
|
||||||
console.warn("new pointer in updateInteraction shouldn't happen", key)
|
console.warn('new pointer in updateInteraction shouldn\'t happen', key)
|
||||||
this.interactionStarted(event, key, point)
|
this.interactionStarted(event, key, point)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
138
lib/scatter.js
138
lib/scatter.js
@ -1,8 +1,11 @@
|
|||||||
|
/* eslint-disable no-unused-vars */
|
||||||
|
/* eslint-disable no-console */
|
||||||
|
/* globals TweenLite debugCanvas */
|
||||||
import { Points, Polygon, Angle, Elements } from './utils.js'
|
import { Points, Polygon, Angle, Elements } from './utils.js'
|
||||||
import Events from './events.js'
|
import Events from './events.js'
|
||||||
import { InteractionMapper } from './interaction.js'
|
import { InteractionMapper } from './interaction.js'
|
||||||
import { Capabilities } from './capabilities.js'
|
import { Capabilities } from './capabilities.js'
|
||||||
|
import PopupMenu from './popupmenu.js'
|
||||||
/**
|
/**
|
||||||
* A base class for scatter specific events.
|
* A base class for scatter specific events.
|
||||||
*
|
*
|
||||||
@ -21,8 +24,6 @@ export class BaseEvent {
|
|||||||
const START = 'onStart'
|
const START = 'onStart'
|
||||||
const UPDATE = 'onUpdate'
|
const UPDATE = 'onUpdate'
|
||||||
const END = 'onEnd'
|
const END = 'onEnd'
|
||||||
const ZOOM = 'onZoom'
|
|
||||||
const MOVE = 'onMove'
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* A scatter event that describes how the scatter has changed.
|
* A scatter event that describes how the scatter has changed.
|
||||||
@ -54,7 +55,7 @@ export class ScatterEvent extends BaseEvent {
|
|||||||
|
|
||||||
toString() {
|
toString() {
|
||||||
return (
|
return (
|
||||||
"Event('scatterTransformed', scale: " +
|
'Event(\'scatterTransformed\', scale: ' +
|
||||||
this.scale +
|
this.scale +
|
||||||
' about: ' +
|
' about: ' +
|
||||||
this.about.x +
|
this.about.x +
|
||||||
@ -129,7 +130,7 @@ class Throwable {
|
|||||||
// 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
|
||||||
// onMove events
|
// onMove events
|
||||||
let velocity = { t: t, dt: dt, dx: delta.x / delta.number, dy: delta.y / delta.number}
|
let velocity = { t: t, dt: dt, dx: delta.x / delta.number, dy: delta.y / delta.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()
|
||||||
@ -313,7 +314,7 @@ export class AbstractScatter extends Throwable {
|
|||||||
this.resizable = resizable
|
this.resizable = resizable
|
||||||
this.mouseZoomFactor = mouseZoomFactor
|
this.mouseZoomFactor = mouseZoomFactor
|
||||||
this.autoBringToFront = autoBringToFront
|
this.autoBringToFront = autoBringToFront
|
||||||
|
|
||||||
this.dragging = false
|
this.dragging = false
|
||||||
this.onTransform = onTransform != null ? [onTransform] : null
|
this.onTransform = onTransform != null ? [onTransform] : null
|
||||||
this.onClose = onClose != null ? [onClose] : null
|
this.onClose = onClose != null ? [onClose] : null
|
||||||
@ -353,7 +354,6 @@ export class AbstractScatter extends Throwable {
|
|||||||
let alpha = delta.rotate
|
let alpha = delta.rotate
|
||||||
if (this.maxRotation != null) {
|
if (this.maxRotation != null) {
|
||||||
if (Math.abs(alpha) > this.maxRotation) {
|
if (Math.abs(alpha) > this.maxRotation) {
|
||||||
console.log("limited rotation")
|
|
||||||
alpha = 0
|
alpha = 0
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -426,7 +426,7 @@ export class AbstractScatter extends Throwable {
|
|||||||
let stagePolygon = this.containerPolygon
|
let stagePolygon = this.containerPolygon
|
||||||
// UO: since keepOnStage is called in nextVelocity we need to
|
// UO: since keepOnStage is called in nextVelocity we need to
|
||||||
// ensure a return value
|
// ensure a return value
|
||||||
if (!stagePolygon) return { x: 0, y: 0}
|
if (!stagePolygon) return { x: 0, y: 0 }
|
||||||
let polygon = this.polygon
|
let polygon = this.polygon
|
||||||
let bounced = this.bouncing()
|
let bounced = this.bouncing()
|
||||||
if (bounced) {
|
if (bounced) {
|
||||||
@ -710,20 +710,6 @@ export class AbstractScatter extends Throwable {
|
|||||||
}
|
}
|
||||||
this._updateTransparency()
|
this._updateTransparency()
|
||||||
}
|
}
|
||||||
//
|
|
||||||
// if (this.onTransform != null) {
|
|
||||||
// let event = new ScatterEvent(this, {
|
|
||||||
// translate: {x: 0, y: 0},
|
|
||||||
// scale: this.scale,
|
|
||||||
// rotate: 0,
|
|
||||||
// about: null,
|
|
||||||
// fast: false,
|
|
||||||
// type: ZOOM
|
|
||||||
// })
|
|
||||||
// this.onTransform.forEach(function(f) {
|
|
||||||
// f(event)
|
|
||||||
// })
|
|
||||||
// }
|
|
||||||
}
|
}
|
||||||
|
|
||||||
onStart(event, interaction) {
|
onStart(event, interaction) {
|
||||||
@ -838,10 +824,10 @@ export class AbstractScatter extends Throwable {
|
|||||||
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)
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -911,14 +897,13 @@ export class DOMScatterContainer {
|
|||||||
|
|
||||||
if (typeof debugCanvas !== 'undefined') {
|
if (typeof debugCanvas !== 'undefined') {
|
||||||
requestAnimationFrame(dt => {
|
requestAnimationFrame(dt => {
|
||||||
this.showTouches(dt)
|
this.showTouches(dt, debugCanvas)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
showTouches(dt) {
|
showTouches(dt, canvas) {
|
||||||
let resolution = window.devicePixelRatio
|
let resolution = window.devicePixelRatio
|
||||||
let canvas = debugCanvas
|
|
||||||
let current = this.delegate.interaction.current
|
let current = this.delegate.interaction.current
|
||||||
let context = canvas.getContext('2d')
|
let context = canvas.getContext('2d')
|
||||||
let radius = 20 * resolution
|
let radius = 20 * resolution
|
||||||
@ -1127,15 +1112,13 @@ export class DOMScatter extends AbstractScatter {
|
|||||||
}
|
}
|
||||||
this.resizeButton = null
|
this.resizeButton = null
|
||||||
if (resizable) {
|
if (resizable) {
|
||||||
let button = document.createElement("div")
|
let button = document.createElement('div')
|
||||||
button.style.position = "absolute"
|
button.style.position = 'absolute'
|
||||||
button.style.right = "0px"
|
button.style.right = '0px'
|
||||||
button.style.bottom = "0px"
|
button.style.bottom = '0px'
|
||||||
button.style.width = "50px";
|
button.style.width = '50px'
|
||||||
button.style.height = "50px";
|
button.style.height = '50px'
|
||||||
// button.style.borderRadius = "100% 0px 0px 0px";
|
button.className = 'interactiveElement'
|
||||||
// button.style.background = this.element.style.backgroundColor
|
|
||||||
button.className = "interactiveElement"
|
|
||||||
this.element.appendChild(button)
|
this.element.appendChild(button)
|
||||||
|
|
||||||
button.addEventListener('pointerdown', (e) => {
|
button.addEventListener('pointerdown', (e) => {
|
||||||
@ -1310,43 +1293,13 @@ export class DOMScatter extends AbstractScatter {
|
|||||||
TweenLite.set(this.element, { zIndex: DOMScatter.zIndex++ })
|
TweenLite.set(this.element, { zIndex: DOMScatter.zIndex++ })
|
||||||
}
|
}
|
||||||
|
|
||||||
toggleVideo(element) {
|
|
||||||
if (element.paused) {
|
|
||||||
element.play()
|
|
||||||
} else {
|
|
||||||
element.pause()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
onTap(event, interaction, point) {
|
onTap(event, interaction, point) {
|
||||||
if (this.simulateClick) {
|
if (this.simulateClick) {
|
||||||
let p = Points.fromPageToNode(this.element, point)
|
let p = Points.fromPageToNode(this.element, point)
|
||||||
let iframe = this.element.querySelector('iframe')
|
let element = document.elementFromPoint(p.x, p.y)
|
||||||
if (iframe) {
|
if (element != null) {
|
||||||
let doc = iframe.contentWindow.document
|
console.log('tap simulates click')
|
||||||
let element = doc.elementFromPoint(p.x, p.y)
|
element.click()
|
||||||
if (element == null) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
switch (element.tagName) {
|
|
||||||
case 'VIDEO':
|
|
||||||
console.log(element.currentSrc)
|
|
||||||
if (PopupMenu) {
|
|
||||||
PopupMenu.open(
|
|
||||||
{
|
|
||||||
Fullscreen: () =>
|
|
||||||
window.open(element.currentSrc),
|
|
||||||
Play: () => element.play()
|
|
||||||
},
|
|
||||||
{ x, y }
|
|
||||||
)
|
|
||||||
} else {
|
|
||||||
this.toggleVideo(element)
|
|
||||||
}
|
|
||||||
break
|
|
||||||
default:
|
|
||||||
element.click()
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -1387,42 +1340,37 @@ export class DOMScatter extends AbstractScatter {
|
|||||||
}
|
}
|
||||||
|
|
||||||
resizeAfterTransform(zoom) {
|
resizeAfterTransform(zoom) {
|
||||||
// let w = this.width * this.scale
|
|
||||||
// let h = this.height * this.scale
|
|
||||||
// TweenLite.set(this.element, { width: w, height: h })
|
|
||||||
if (this.onResize) {
|
if (this.onResize) {
|
||||||
|
let w = this.width * this.scale
|
||||||
|
let h = this.height * this.scale
|
||||||
let event = new ResizeEvent(this, { width: w, height: h })
|
let event = new ResizeEvent(this, { width: w, height: h })
|
||||||
this.onResize(event)
|
this.onResize(event)
|
||||||
}
|
}
|
||||||
if (this.resizeButton != null) {
|
|
||||||
// this.resizeButton.style.width = 50/this.scale+"px"
|
|
||||||
// this.resizeButton.style.height = 50/this.scale+"px"
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
startResize(e) {
|
startResize(e) {
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
let event = new CustomEvent('resizeStarted')
|
let event = new CustomEvent('resizeStarted')
|
||||||
|
|
||||||
let oldPostition = {x: this.element.getBoundingClientRect().left, y: this.element.getBoundingClientRect().top};
|
let oldPostition = { x: this.element.getBoundingClientRect().left, y: this.element.getBoundingClientRect().top }
|
||||||
this.bringToFront()
|
this.bringToFront()
|
||||||
|
|
||||||
this.element.style.transformOrigin = "0% 0%"
|
this.element.style.transformOrigin = '0% 0%'
|
||||||
|
|
||||||
let newPostition = {x: this.element.getBoundingClientRect().left, y: this.element.getBoundingClientRect().top};
|
let newPostition = { x: this.element.getBoundingClientRect().left, y: this.element.getBoundingClientRect().top }
|
||||||
|
|
||||||
let offset = Points.subtract(oldPostition, newPostition)
|
let offset = Points.subtract(oldPostition, newPostition)
|
||||||
|
|
||||||
this.oldX = e.clientX
|
this.oldX = e.clientX
|
||||||
this.oldY = e.clientY
|
this.oldY = e.clientY
|
||||||
|
|
||||||
e.target.setAttribute('resizing', "true")
|
e.target.setAttribute('resizing', 'true')
|
||||||
e.target.setPointerCapture(e.pointerId)
|
e.target.setPointerCapture(e.pointerId)
|
||||||
|
|
||||||
TweenLite.to(this.element, 0, { css: { left: "+=" + offset.x + "px" } })
|
TweenLite.to(this.element, 0, { css: { left: '+=' + offset.x + 'px' } })
|
||||||
TweenLite.to(this.element, 0, { css: { top: "+=" + offset.y + "px" } })
|
TweenLite.to(this.element, 0, { css: { top: '+=' + offset.y + 'px' } })
|
||||||
|
|
||||||
this.element.dispatchEvent(event);
|
this.element.dispatchEvent(event)
|
||||||
}
|
}
|
||||||
|
|
||||||
resize(e) {
|
resize(e) {
|
||||||
@ -1431,7 +1379,7 @@ export class DOMScatter extends AbstractScatter {
|
|||||||
let rotation = Angle.radian2degree(this.rotation)
|
let rotation = Angle.radian2degree(this.rotation)
|
||||||
rotation = (rotation + 360) % 360
|
rotation = (rotation + 360) % 360
|
||||||
let event = new CustomEvent('resized')
|
let event = new CustomEvent('resized')
|
||||||
if (e.target.getAttribute('resizing') == "true") {
|
if (e.target.getAttribute('resizing') == 'true') {
|
||||||
|
|
||||||
let deltaX = (e.clientX - this.oldX)
|
let deltaX = (e.clientX - this.oldX)
|
||||||
let deltaY = (e.clientY - this.oldY)
|
let deltaY = (e.clientY - this.oldY)
|
||||||
@ -1448,13 +1396,13 @@ export class DOMScatter extends AbstractScatter {
|
|||||||
let resizeW = r * Math.cos(Angle.degree2radian(phiCorrected))
|
let resizeW = r * Math.cos(Angle.degree2radian(phiCorrected))
|
||||||
let resizeH = -r * Math.sin(Angle.degree2radian(phiCorrected))
|
let resizeH = -r * Math.sin(Angle.degree2radian(phiCorrected))
|
||||||
|
|
||||||
if ((this.element.offsetWidth + resizeW) / this.scale > this.width * 0.5 / this.scale && (this.element.offsetHeight + resizeH) / this.scale > this.height * 0.3 / this.scale) TweenLite.to(this.element, 0, { width: this.element.offsetWidth + resizeW / this.scale, height: this.element.offsetHeight + resizeH / this.scale });
|
if ((this.element.offsetWidth + resizeW) / this.scale > this.width * 0.5 / this.scale && (this.element.offsetHeight + resizeH) / this.scale > this.height * 0.3 / this.scale) TweenLite.to(this.element, 0, { width: this.element.offsetWidth + resizeW / this.scale, height: this.element.offsetHeight + resizeH / this.scale })
|
||||||
|
|
||||||
this.oldX = e.clientX
|
this.oldX = e.clientX
|
||||||
this.oldY = e.clientY
|
this.oldY = e.clientY
|
||||||
this.onResizing()
|
this.onResizing()
|
||||||
|
|
||||||
this.element.dispatchEvent(event);
|
this.element.dispatchEvent(event)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1462,17 +1410,17 @@ export class DOMScatter extends AbstractScatter {
|
|||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
|
|
||||||
let event = new CustomEvent('resizeEnded')
|
let event = new CustomEvent('resizeEnded')
|
||||||
let oldPostition = {x: this.element.getBoundingClientRect().left, y: this.element.getBoundingClientRect().top};
|
let oldPostition = { x: this.element.getBoundingClientRect().left, y: this.element.getBoundingClientRect().top }
|
||||||
this.element.style.transformOrigin = "50% 50%"
|
this.element.style.transformOrigin = '50% 50%'
|
||||||
let newPostition = {x: this.element.getBoundingClientRect().left, y: this.element.getBoundingClientRect().top};
|
let newPostition = { x: this.element.getBoundingClientRect().left, y: this.element.getBoundingClientRect().top }
|
||||||
let offset = Points.subtract(oldPostition, newPostition)
|
let offset = Points.subtract(oldPostition, newPostition)
|
||||||
|
|
||||||
TweenLite.to(this.element, 0, { css: { left: "+=" + offset.x + "px" } })
|
TweenLite.to(this.element, 0, { css: { left: '+=' + offset.x + 'px' } })
|
||||||
TweenLite.to(this.element, 0, { css: { top: "+=" + offset.y + "px" } })
|
TweenLite.to(this.element, 0, { css: { top: '+=' + offset.y + 'px' } })
|
||||||
|
|
||||||
e.target.setAttribute('resizing', "false")
|
e.target.setAttribute('resizing', 'false')
|
||||||
|
|
||||||
this.element.dispatchEvent(event);
|
this.element.dispatchEvent(event)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user