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

4440
dist/iwmlib.js vendored
View File

File diff suppressed because it is too large Load Diff

136
dist/iwmlib.pixi.js vendored
View File

@ -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
@ -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,20 +5597,23 @@
// 'targetTouches'
let result = {};
switch (event.constructor.name) {
case 'MouseEvent':
case 'MouseEvent': {
let buttons = event.buttons || event.which;
if (buttons) result['mouse'] = this.getPosition(event);
break
case 'PointerEvent':
}
case 'PointerEvent': {
result[event.pointerId.toString()] = this.getPosition(event);
break
case 'Touch':
}
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
@ -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);
}
}
@ -6040,6 +6046,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.
*
@ -6089,7 +6100,7 @@
toString() {
return (
"Event('scatterTransformed', scale: " +
'Event(\'scatterTransformed\', scale: ' +
this.scale +
' about: ' +
this.about.x +
@ -6164,7 +6175,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();
@ -6388,7 +6399,6 @@
let alpha = delta.rotate;
if (this.maxRotation != null) {
if (Math.abs(alpha) > this.maxRotation) {
console.log("limited rotation");
alpha = 0;
}
}
@ -6461,7 +6471,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) {
@ -6745,20 +6755,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) {
@ -7000,15 +6996,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) => {
@ -7183,46 +7177,16 @@
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:
let element = document.elementFromPoint(p.x, p.y);
if (element != null) {
console.log('tap simulates click');
element.click();
}
}
}
}
isDescendant(parent, child) {
let node = child.parentNode;
@ -7260,37 +7224,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);
}
@ -7301,7 +7263,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);
@ -7332,15 +7294,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);
}

27
lib/interaction.js
View File

@ -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
@ -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,20 +823,23 @@ export class InteractionDelegate {
// 'targetTouches'
let result = {}
switch (event.constructor.name) {
case 'MouseEvent':
case 'MouseEvent': {
let buttons = event.buttons || event.which
if (buttons) result['mouse'] = this.getPosition(event)
break
case 'PointerEvent':
}
case 'PointerEvent': {
result[event.pointerId.toString()] = this.getPosition(event)
break
case 'Touch':
}
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
@ -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)
}
}

134
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 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)
})
}
}
@ -916,14 +902,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
@ -1132,15 +1117,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) => {
@ -1315,46 +1298,16 @@ 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:
let element = document.elementFromPoint(p.x, p.y)
if (element != null) {
console.log('tap simulates click')
element.click()
}
}
}
}
isDescendant(parent, child) {
let node = child.parentNode
@ -1392,42 +1345,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) {
@ -1436,7 +1384,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)
@ -1453,13 +1401,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)
}
}
@ -1467,17 +1415,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)
}
}