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