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

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

Browse Source 
# Conflicts:
#	dist/iwmlib.js
This commit is contained in:
Sebastian Kupke 2019-07-05 09:36:57 +02:00
commit 92d3c0c861
4 changed files with 2438 additions and 2489 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4496
dist/iwmlib.js vendored
View File

File diff suppressed because it is too large Load Diff

196
dist/iwmlib.pixi.js vendored
View File

@ -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
} }
@ -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);
} }
} }
@ -6040,6 +6046,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.
* *
@ -6089,7 +6100,7 @@
toString() { toString() {
return ( return (
"Event('scatterTransformed', scale: " + 'Event(\'scatterTransformed\', scale: ' +
this.scale + this.scale +
' about: ' + ' about: ' +
this.about.x + this.about.x +
@ -6164,7 +6175,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();
@ -6388,7 +6399,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;
} }
} }
@ -6461,7 +6471,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) {
@ -6745,20 +6755,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) {
@ -7000,15 +6996,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) => {
@ -7183,43 +7177,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();
}
} }
} }
} }
@ -7260,37 +7224,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);
} }
@ -7301,7 +7263,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);
@ -7318,7 +7280,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;
@ -7332,15 +7294,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);
} }

83
lib/interaction.js
View File

@ -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
} }
@ -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)
} }
} }

136
lib/scatter.js
View File

@ -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()
@ -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)
}); })
} }
} }
@ -916,14 +902,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
@ -1132,15 +1117,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) => {
@ -1315,43 +1298,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()
}
} }
} }
} }
@ -1392,42 +1345,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) {
@ -1436,7 +1384,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)
@ -1453,13 +1401,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)
} }
} }
@ -1467,17 +1415,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)
} }
} }