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

Initial commit 2.0 beta 0

Browse Source
This commit is contained in:
Sebastian Kupke 2022-10-04 10:51:35 +02:00
parent f87b19140b
commit c5c2759ebd
70 changed files with 60593 additions and 62354 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.eslintrc → .eslintrc.json
View File

@ -28,5 +28,8 @@
"plugins": [ "plugins": [
"prettier" "prettier"
], ],
"extends": ["eslint:recommended", "plugin:prettier/recommended"] "extends": ["eslint:recommended", "plugin:prettier/recommended"],
"rules": {
"comma-dangle": ["error", "never"]
}
} }

3
.prettierrc
View File

@ -3,5 +3,6 @@
"jsxSingleQuote": true, "jsxSingleQuote": true,
"tabWidth": 4, "tabWidth": 4,
"semi": false, "semi": false,
"printWidth": 120 "printWidth": 120,
"trailingComma": "none"
} }

98959
dist/iwmlib.3rdparty.js vendored
View File

File diff suppressed because one or more lines are too long

254
dist/iwmlib.3rdparty.min.js vendored
View File

File diff suppressed because one or more lines are too long

30
dist/iwmlib.3rdparty.preload.js vendored
View File

@ -8119,10 +8119,10 @@ if (_gsScope._gsDefine) { _gsScope._gsQueue.pop()(); } //necessary in case Tween
css transforms without perspective projection) css transforms without perspective projection)
*/ */
(function () { ;(function () {
'use strict' 'use strict'
var I = (typeof(WebKitCSSMatrix) == 'undefined') ? new DOMMatrix() : new WebKitCSSMatrix() var I = typeof WebKitCSSMatrix == 'undefined' ? new DOMMatrix() : new WebKitCSSMatrix()
function Point(x, y, z) { function Point(x, y, z) {
this.x = x this.x = x
@ -8137,8 +8137,8 @@ if (_gsScope._gsDefine) { _gsScope._gsQueue.pop()(); } //necessary in case Tween
function createMatrix(transform) { function createMatrix(transform) {
try { try {
return (typeof(WebKitCSSMatrix) == 'undefined') ? new DOMMatrix(transform) : new WebKitCSSMatrix(transform) return typeof WebKitCSSMatrix == 'undefined' ? new DOMMatrix(transform) : new WebKitCSSMatrix(transform)
} catch(e) { } catch (e) {
console.warn(transform) console.warn(transform)
console.warn(e.toString()) console.warn(e.toString())
return I return I
@ -8163,8 +8163,9 @@ if (_gsScope._gsDefine) { _gsScope._gsQueue.pop()(); } //necessary in case Tween
var left = +Infinity var left = +Infinity
var top = +Infinity var top = +Infinity
while (--i >= 0) { while (--i >= 0) {
var p = new Point(i === 0 || i === 1 ? 0 : w, i === 0 || i === 3 ? 0 : h, var p = new Point(i === 0 || i === 1 ? 0 : w, i === 0 || i === 3 ? 0 : h, 0).transformBy(
0).transformBy(transformationMatrix) transformationMatrix
)
if (p.x < left) { if (p.x < left) {
left = p.x left = p.x
} }
@ -8173,20 +8174,19 @@ if (_gsScope._gsDefine) { _gsScope._gsQueue.pop()(); } //necessary in case Tween
} }
} }
var rect = element.getBoundingClientRect() var rect = element.getBoundingClientRect()
transformationMatrix = I.translate(window.pageXOffset + rect.left - left, transformationMatrix = I.translate(
window.pageYOffset + rect.top - top, 0) window.pageXOffset + rect.left - left,
.multiply(transformationMatrix) window.pageYOffset + rect.top - top,
0
).multiply(transformationMatrix)
return transformationMatrix return transformationMatrix
} }
window.convertPointFromPageToNode = function (element, pageX, pageY) { window.convertPointFromPageToNode = function (element, pageX, pageY) {
return new Point(pageX, pageY, 0).transformBy( return new Point(pageX, pageY, 0).transformBy(getTransformationMatrix(element).inverse())
getTransformationMatrix(element).inverse())
} }
window.convertPointFromNodeToPage = function (element, offsetX, offsetY) { window.convertPointFromNodeToPage = function (element, offsetX, offsetY) {
return new Point(offsetX, offsetY, 0).transformBy( return new Point(offsetX, offsetY, 0).transformBy(getTransformationMatrix(element))
getTransformationMatrix(element))
} }
})()
}());

2
dist/iwmlib.3rdparty.preload.min.js vendored
View File

File diff suppressed because one or more lines are too long

740
dist/iwmlib.js vendored
View File

File diff suppressed because it is too large Load Diff

709
dist/iwmlib.pixi.js vendored
View File

File diff suppressed because it is too large Load Diff

4
gulpfile.js
View File

@ -11,12 +11,12 @@ function vendors() {
'./node_modules/optimal-select/dist/optimal-select.js', './node_modules/optimal-select/dist/optimal-select.js',
'./node_modules/hammerjs/hammer.js', './node_modules/hammerjs/hammer.js',
'./node_modules/propagating-hammerjs/propagating.js', './node_modules/propagating-hammerjs/propagating.js',
'./node_modules/pixi.js/dist/pixi.js', './node_modules/pixi.js/dist/browser/pixi.js',
'./node_modules/pixi-compressed-textures/lib/crn_decomp.js', './node_modules/pixi-compressed-textures/lib/crn_decomp.js',
'./node_modules/pixi-compressed-textures/dist/pixi-compressed-textures.js', './node_modules/pixi-compressed-textures/dist/pixi-compressed-textures.js',
'./node_modules/pixi-filters/dist/pixi-filters.js', './node_modules/pixi-filters/dist/pixi-filters.js',
'./node_modules/pixi-particles/dist/pixi-particles.js', './node_modules/pixi-particles/dist/pixi-particles.js',
'./node_modules/pixi-projection/dist/pixi-projection.js', './node_modules/pixi-projection/dist/pixi-projection.umd.js',
'./node_modules/gsap/src/uncompressed/TweenMax.js', './node_modules/gsap/src/uncompressed/TweenMax.js',
'./node_modules/gsap/src/uncompressed/TimelineMax.js', './node_modules/gsap/src/uncompressed/TimelineMax.js',
'./lib/3rdparty/jquery.js', './lib/3rdparty/jquery.js',

30
lib/3rdparty/convertPointFromPageToNode.js vendored
View File

@ -10,10 +10,10 @@
css transforms without perspective projection) css transforms without perspective projection)
*/ */
(function () { ;(function () {
'use strict' 'use strict'
var I = (typeof(WebKitCSSMatrix) == 'undefined') ? new DOMMatrix() : new WebKitCSSMatrix() var I = typeof WebKitCSSMatrix == 'undefined' ? new DOMMatrix() : new WebKitCSSMatrix()
function Point(x, y, z) { function Point(x, y, z) {
this.x = x this.x = x
@ -28,8 +28,8 @@
function createMatrix(transform) { function createMatrix(transform) {
try { try {
return (typeof(WebKitCSSMatrix) == 'undefined') ? new DOMMatrix(transform) : new WebKitCSSMatrix(transform) return typeof WebKitCSSMatrix == 'undefined' ? new DOMMatrix(transform) : new WebKitCSSMatrix(transform)
} catch(e) { } catch (e) {
console.warn(transform) console.warn(transform)
console.warn(e.toString()) console.warn(e.toString())
return I return I
@ -54,8 +54,9 @@
var left = +Infinity var left = +Infinity
var top = +Infinity var top = +Infinity
while (--i >= 0) { while (--i >= 0) {
var p = new Point(i === 0 || i === 1 ? 0 : w, i === 0 || i === 3 ? 0 : h, var p = new Point(i === 0 || i === 1 ? 0 : w, i === 0 || i === 3 ? 0 : h, 0).transformBy(
0).transformBy(transformationMatrix) transformationMatrix
)
if (p.x < left) { if (p.x < left) {
left = p.x left = p.x
} }
@ -64,20 +65,19 @@
} }
} }
var rect = element.getBoundingClientRect() var rect = element.getBoundingClientRect()
transformationMatrix = I.translate(window.pageXOffset + rect.left - left, transformationMatrix = I.translate(
window.pageYOffset + rect.top - top, 0) window.pageXOffset + rect.left - left,
.multiply(transformationMatrix) window.pageYOffset + rect.top - top,
0
).multiply(transformationMatrix)
return transformationMatrix return transformationMatrix
} }
window.convertPointFromPageToNode = function (element, pageX, pageY) { window.convertPointFromPageToNode = function (element, pageX, pageY) {
return new Point(pageX, pageY, 0).transformBy( return new Point(pageX, pageY, 0).transformBy(getTransformationMatrix(element).inverse())
getTransformationMatrix(element).inverse())
} }
window.convertPointFromNodeToPage = function (element, offsetX, offsetY) { window.convertPointFromNodeToPage = function (element, offsetX, offsetY) {
return new Point(offsetX, offsetY, 0).transformBy( return new Point(offsetX, offsetY, 0).transformBy(getTransformationMatrix(element))
getTransformationMatrix(element))
} }
})()
}());

10
lib/bootstrap.js vendored
View File

@ -122,17 +122,17 @@ class Bootstrap extends Object {
baseURL: baseUrl, baseURL: baseUrl,
map: { map: {
'plugin-babel': baseUrl + '/3rdparty/systemjs/plugin-babel.js', 'plugin-babel': baseUrl + '/3rdparty/systemjs/plugin-babel.js',
'systemjs-babel-build': baseUrl + '/3rdparty/systemjs/systemjs-babel-browser.js' 'systemjs-babel-build': baseUrl + '/3rdparty/systemjs/systemjs-babel-browser.js',
}, },
transpiler: 'plugin-babel', transpiler: 'plugin-babel',
meta: { meta: {
'*.js': { '*.js': {
authorization: true, authorization: true,
babelOptions: { babelOptions: {
es2015: false es2015: false,
} },
} },
} },
} }
} }

6
lib/bundle.js
View File

@ -22,7 +22,7 @@ import {
InteractionDelta, InteractionDelta,
InteractionMapper, InteractionMapper,
InteractionDelegate, InteractionDelegate,
IInteractionMapperTarget IInteractionMapperTarget,
} from './interaction.js' } from './interaction.js'
import { import {
ITapDelegate, ITapDelegate,
@ -31,7 +31,7 @@ import {
AbstractScatter, AbstractScatter,
DOMScatter, DOMScatter,
ScatterEvent, ScatterEvent,
BaseEvent BaseEvent,
} from './scatter.js' } from './scatter.js'
import { import {
Cycle, Cycle,
@ -50,7 +50,7 @@ import {
debounce, debounce,
randomInt, randomInt,
randomFloat, randomFloat,
LowPassFilter LowPassFilter,
} from './utils.js' } from './utils.js'
import UITest from './uitest.js' import UITest from './uitest.js'

173
lib/card/card.js
View File

@ -55,7 +55,7 @@ export default class Card {
context.classList.add('info-card') context.classList.add('info-card')
context.setAttribute('data-id', Card.id++) context.setAttribute('data-id', Card.id++)
modules.forEach(module => { modules.forEach((module) => {
if (module.apply(context)) { if (module.apply(context)) {
const moduleName = module.constructor.name const moduleName = module.constructor.name
context.modules.push(moduleName) context.modules.push(moduleName)
@ -157,7 +157,7 @@ export default class Card {
*/ */
static _replaceAttributes(context, html, attribute, replaceFunc) { static _replaceAttributes(context, html, attribute, replaceFunc) {
let attributeCarrier = html.querySelectorAll(`[${attribute}]`) let attributeCarrier = html.querySelectorAll(`[${attribute}]`)
attributeCarrier.forEach(element => { attributeCarrier.forEach((element) => {
let attributeVal = element.getAttribute(attribute) let attributeVal = element.getAttribute(attribute)
element.removeAttribute(attribute) element.removeAttribute(attribute)
replaceFunc.call(this, context, element, attributeVal) replaceFunc.call(this, context, element, attributeVal)
@ -176,7 +176,7 @@ export default class Card {
*/ */
static _replaceCallback(context, element, attributeVal) { static _replaceCallback(context, element, attributeVal) {
if (element.tagName == 'A') { if (element.tagName == 'A') {
element.addEventListener('pointerdown', event => { element.addEventListener('pointerdown', (event) => {
event.preventDefault() event.preventDefault()
}) })
} }
@ -189,7 +189,7 @@ export default class Card {
trimmedArgs = trimmedArgs.substring(0, trimmedArgs.length - 1) trimmedArgs = trimmedArgs.substring(0, trimmedArgs.length - 1)
let callParts = funcPart.split('.') let callParts = funcPart.split('.')
let argsStrings = trimmedArgs.split(',').filter(entry => { let argsStrings = trimmedArgs.split(',').filter((entry) => {
return entry.trim() != '' return entry.trim() != ''
}) })
/** /**
@ -218,12 +218,12 @@ export default class Card {
// These are 'hardcoded' inside the convert.js. // These are 'hardcoded' inside the convert.js.
if (element.tagName == 'circle') return false if (element.tagName == 'circle') return false
this.registerEvent(context, interactionType, element, event => { this.registerEvent(context, interactionType, element, (event) => {
/** /**
* Replaces the strings from the listener with the corresponding variables. * Replaces the strings from the listener with the corresponding variables.
*/ */
let args = [] let args = []
argsStrings.forEach(arg => { argsStrings.forEach((arg) => {
arg = arg.trim() arg = arg.trim()
if (arg == 'this') args.push(event.target) if (arg == 'this') args.push(event.target)
else if (arg == 'event') args.push(event) else if (arg == 'event') args.push(event)
@ -269,7 +269,7 @@ export default class Card {
*/ */
return html.replace( return html.replace(
/<\s*(a|video|img|image|circle)\s(.*?)(xlink:href|href|src)\s*=\s*["'](\..*?)["']\s*(.*?)>/g, /<\s*(a|video|img|image|circle)\s(.*?)(xlink:href|href|src)\s*=\s*["'](\..*?)["']\s*(.*?)>/g,
function() { function () {
let path = that._getRelativePath(arguments[4]) let path = that._getRelativePath(arguments[4])
const tag = `<${arguments[1]} ${arguments[2]} ${arguments[3]}="${path}" ${arguments[5]}>` const tag = `<${arguments[1]} ${arguments[2]} ${arguments[3]}="${path}" ${arguments[5]}>`
/* if (that.debug) */ console.log('Adjusted: ', tag) /* if (that.debug) */ console.log('Adjusted: ', tag)
@ -298,7 +298,7 @@ export default class Card {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
let request = new XMLHttpRequest() let request = new XMLHttpRequest()
request.onreadystatechange = function() { request.onreadystatechange = function () {
if (this.readyState == 4) { if (this.readyState == 4) {
if (this.status == 200 || Card._isLocal()) { if (this.status == 200 || Card._isLocal()) {
try { try {
@ -423,7 +423,7 @@ export default class Card {
} }
this._createPopup(context, position, content, options) this._createPopup(context, position, content, options)
.then(popup => { .then((popup) => {
if ( if (
//Test if meanwhile another popup was registered... //Test if meanwhile another popup was registered...
this._getPopup(context) || this._getPopup(context) ||
@ -441,9 +441,9 @@ export default class Card {
// let unnecessaryPopupElement = popup.element.querySelector(".popupContent > .popup") // let unnecessaryPopupElement = popup.element.querySelector(".popupContent > .popup")
// unnecessaryPopupElement.classList.remove("popup") // unnecessaryPopupElement.classList.remove("popup")
popupParagraphs.forEach(popupParagraph => { popupParagraphs.forEach((popupParagraph) => {
popupParagraph.setAttribute('draggable', false) popupParagraph.setAttribute('draggable', false)
popupParagraph.addEventListener('mousedown', event => { popupParagraph.addEventListener('mousedown', (event) => {
event.preventDefault() event.preventDefault()
}) })
}) })
@ -451,7 +451,7 @@ export default class Card {
this._setPopup(context, popup, src) this._setPopup(context, popup, src)
} }
}) })
.catch(e => console.error(e)) .catch((e) => console.error(e))
} }
/** /**
@ -491,14 +491,14 @@ export default class Card {
Object.assign( Object.assign(
{ {
parent: context, parent: context,
content content,
}, },
Object.assign( Object.assign(
{ {
noStyle: true, noStyle: true,
// TODO: Remove offset when positioning according to element position // TODO: Remove offset when positioning according to element position
// is working. // is working.
posOffset: 10 posOffset: 10,
}, },
options options
) )
@ -510,7 +510,7 @@ export default class Card {
// We manually prevent this here. // We manually prevent this here.
popup.element.style.display = 'none' popup.element.style.display = 'none'
let promise = new Promise(resolve => { let promise = new Promise((resolve) => {
if (popup.loaded) resolve(popup) if (popup.loaded) resolve(popup)
else { else {
popup.onload = () => { popup.onload = () => {
@ -519,7 +519,7 @@ export default class Card {
} }
}) })
promise.then(popup => { promise.then((popup) => {
popup.element.style.display = 'block' popup.element.style.display = 'block'
popup.element.style.visibility = 'hidden' popup.element.style.visibility = 'hidden'
popup.element.style.opacity = 0 popup.element.style.opacity = 0
@ -531,12 +531,12 @@ export default class Card {
}) })
Object.assign(popup.element.style, { Object.assign(popup.element.style, {
zIndex: this.zIndices.popup zIndex: this.zIndices.popup,
}) })
TweenLite.to(popup.element, this.animation.popup, { TweenLite.to(popup.element, this.animation.popup, {
autoAlpha: 1, autoAlpha: 1,
ease: Power2.easeIn ease: Power2.easeIn,
}) })
}) })
@ -560,7 +560,7 @@ export default class Card {
popup.remove() popup.remove()
//this._cleanup(context) //this._cleanup(context)
//overlay.parentNode.removeChild(overlay) //overlay.parentNode.removeChild(overlay)
} },
}) })
} }
} }
@ -618,7 +618,7 @@ export default class Card {
let popupPage = parser.parseFromString(xhr.responseText, 'text/html') let popupPage = parser.parseFromString(xhr.responseText, 'text/html')
//Fix the relative path of loaded images in the popup. //Fix the relative path of loaded images in the popup.
popupPage.querySelectorAll('img').forEach(node => { popupPage.querySelectorAll('img').forEach((node) => {
node.setAttribute('src', that._getRelativePath(node.getAttribute('src'))) node.setAttribute('src', that._getRelativePath(node.getAttribute('src')))
}) })
let html = popupPage.body.innerHTML let html = popupPage.body.innerHTML
@ -648,7 +648,7 @@ export default class Card {
if (editable) { if (editable) {
let isDirty = mainController.askSaveNode() let isDirty = mainController.askSaveNode()
if (isDirty) if (isDirty)
mainController.saveNode(html.innerHTML, url => { mainController.saveNode(html.innerHTML, (url) => {
if (callback) { if (callback) {
callback() callback()
} }
@ -670,12 +670,12 @@ export default class Card {
} }
Card._openPopup(context, src, local, content, { Card._openPopup(context, src, local, content, {
closeCommand: callback closeCommand: callback,
}) })
} }
} }
overlay.onclick = e => { overlay.onclick = (e) => {
if (editable) e.preventDefault() if (editable) e.preventDefault()
} }
//console.log("onreadystatechange", editable) //console.log("onreadystatechange", editable)
@ -712,7 +712,7 @@ export default class Card {
for (let highlight of correspondingHighlights) { for (let highlight of correspondingHighlights) {
if (highlight.parentNode && highlight.parentNode.nodeName.toLowerCase() == 'g') { if (highlight.parentNode && highlight.parentNode.nodeName.toLowerCase() == 'g') {
Highlight.openHighlight(highlight, { Highlight.openHighlight(highlight, {
animation: Card.highlightAnimation animation: Card.highlightAnimation,
}) })
this._addHighlight(context, highlight) this._addHighlight(context, highlight)
} }
@ -841,19 +841,19 @@ export default class Card {
// TODO: Adjust to load while animating (Problem: Unload when cancelled). // TODO: Adjust to load while animating (Problem: Unload when cancelled).
// console.log('loadHighlightPopup', src, position, local) // console.log('loadHighlightPopup', src, position, local)
this._loadPopupContent(context, src) this._loadPopupContent(context, src)
.then(content => { .then((content) => {
this._openPopup(context, src, local, content, { this._openPopup(context, src, local, content, {
highlight: node, highlight: node,
closeCommand: popup => { closeCommand: (popup) => {
this._overlayCleanup(context, overlay) this._overlayCleanup(context, overlay)
popup.remove() popup.remove()
} },
}) })
}) })
.catch(err => { .catch((err) => {
console.error(err) console.error(err)
}) })
} },
}) })
} }
} }
@ -937,7 +937,7 @@ export default class Card {
let globalBottomRight = { let globalBottomRight = {
x: imageWidth, x: imageWidth,
y: imageHeight y: imageHeight,
} }
globalBottomRight = Points.fromNodeToPage(zoomable, globalBottomRight) globalBottomRight = Points.fromNodeToPage(zoomable, globalBottomRight)
@ -1003,7 +1003,7 @@ export default class Card {
position: 'absolute', position: 'absolute',
top: 0, top: 0,
left: 0, left: 0,
zIndex: 200 zIndex: 200,
}) })
wrapper.appendChild(zoomContainer) wrapper.appendChild(zoomContainer)
@ -1071,13 +1071,13 @@ export default class Card {
y: current.y, y: current.y,
width: current.width + borderX, width: current.width + borderX,
height: current.height + borderY, height: current.height + borderY,
transformOrigin transformOrigin,
}) })
TweenLite.set(zoomable, { opacity: 0 }) TweenLite.set(zoomable, { opacity: 0 })
let icon = zoomedFig.querySelector('.icon') let icon = zoomedFig.querySelector('.icon')
TweenLite.set(icon, { TweenLite.set(icon, {
transformOrigin transformOrigin,
}) })
zoomedFig.style.transformOrigin = zoomedFig.style.transformOrigin =
'calc(100% - ' + 'calc(100% - ' +
@ -1097,8 +1097,8 @@ export default class Card {
ease: Power2.easeIn, ease: Power2.easeIn,
css: { css: {
scaleX: scaleFactor, scaleX: scaleFactor,
scaleY: scaleFactor scaleY: scaleFactor,
} },
}, },
0 0
) )
@ -1107,11 +1107,11 @@ export default class Card {
display: 'block', display: 'block',
opacity: 0, opacity: 0,
x: -parseFloat(zoomedFigStyle.borderLeftWidth), x: -parseFloat(zoomedFigStyle.borderLeftWidth),
width: current.width + borderX width: current.width + borderX,
} },
}) })
.to(zoomCaption, this.animation.fade, { .to(zoomCaption, this.animation.fade, {
autoAlpha: 1 autoAlpha: 1,
}) })
} else this._openZoomableEditorBehaviour(wrapper, img, zoomable, zoomedFig, current) } else this._openZoomableEditorBehaviour(wrapper, img, zoomable, zoomedFig, current)
} }
@ -1160,7 +1160,7 @@ export default class Card {
x: current.x, x: current.x,
y: current.y, y: current.y,
width: current.width, width: current.width,
height: current.height height: current.height,
}) })
let editor = mainController.topController().ensureEditor(img) let editor = mainController.topController().ensureEditor(img)
let savedDisplay = zoomIcon.style.display let savedDisplay = zoomIcon.style.display
@ -1187,13 +1187,13 @@ export default class Card {
wrapper.appendChild(iconClone) wrapper.appendChild(iconClone)
TweenLite.set(iconClone, { x: current.iconPos.x, y: current.iconPos.y }) TweenLite.set(iconClone, { x: current.iconPos.x, y: current.iconPos.y })
zoomable.onmousedown = event => { zoomable.onmousedown = (event) => {
if (this.debug) console.log('mousedown', event.target) if (this.debug) console.log('mousedown', event.target)
event.preventDefault() event.preventDefault()
zoomable.dragging = true zoomable.dragging = true
zoomable.dragStartPos = { x: event.pageX, y: event.pageY } zoomable.dragStartPos = { x: event.pageX, y: event.pageY }
} }
zoomable.onmousemove = event => { zoomable.onmousemove = (event) => {
if (this.debug) console.log('onmousemove', event.target) if (this.debug) console.log('onmousemove', event.target)
if (zoomable.dragging) { if (zoomable.dragging) {
event.preventDefault() event.preventDefault()
@ -1201,7 +1201,7 @@ export default class Card {
let dy = event.pageY - zoomable.dragStartPos.y let dy = event.pageY - zoomable.dragStartPos.y
TweenLite.set([zoomable, iconClone], { TweenLite.set([zoomable, iconClone], {
x: '+=' + dx, x: '+=' + dx,
y: '+=' + dy y: '+=' + dy,
}) })
zoomable.dragStartPos = { x: event.pageX, y: event.pageY } zoomable.dragStartPos = { x: event.pageX, y: event.pageY }
if (editor) { if (editor) {
@ -1214,7 +1214,7 @@ export default class Card {
} }
let startZoom = 1 let startZoom = 1
zoomable.onmousewheel = event => { zoomable.onmousewheel = (event) => {
event.preventDefault() event.preventDefault()
let direction = event.detail < 0 || event.wheelDelta > 0 let direction = event.detail < 0 || event.wheelDelta > 0
const zoomFactor = 1.1 const zoomFactor = 1.1
@ -1250,24 +1250,24 @@ export default class Card {
let zoomedCaption = zoomedFig.querySelector('figcaption.zoomcap') let zoomedCaption = zoomedFig.querySelector('figcaption.zoomcap')
TweenLite.to(zoomedCaption, this.animation.fade, { TweenLite.to(zoomedCaption, this.animation.fade, {
autoAlpha: 0 autoAlpha: 0,
}) })
TweenLite.to(zoomedFig, this.animation.zoomable, { TweenLite.to(zoomedFig, this.animation.zoomable, {
css: { css: {
scaleX: 1, scaleX: 1,
scaleY: 1 scaleY: 1,
}, },
onComplete: () => { onComplete: () => {
TweenLite.set(zoomable, { TweenLite.set(zoomable, {
opacity: 1 opacity: 1,
}) })
let div = zoomedFig.parentNode let div = zoomedFig.parentNode
let videoElement = div.querySelector('video') let videoElement = div.querySelector('video')
if (videoElement) videoElement.pause() if (videoElement) videoElement.pause()
div.parentNode.removeChild(div) div.parentNode.removeChild(div)
} },
}) })
InteractionMapper.off(zoomedFig) InteractionMapper.off(zoomedFig)
@ -1341,12 +1341,12 @@ export default class Card {
height: globalIndexCardRect.height, height: globalIndexCardRect.height,
maxWidth: '100%', maxWidth: '100%',
margin: 0, margin: 0,
zIndex: this.zIndices.article zIndex: this.zIndices.article,
} },
}) })
TweenLite.set(articleClone, { TweenLite.set(articleClone, {
autoAlpha: 0 autoAlpha: 0,
}) })
TweenLite.set(card, { css: { maxWidth: '100%' } }) TweenLite.set(card, { css: { maxWidth: '100%' } })
@ -1356,7 +1356,7 @@ export default class Card {
scaleX, scaleX,
scaleY, scaleY,
transformOrigin: '0% 0%', transformOrigin: '0% 0%',
rotation: angle rotation: angle,
}) })
indexbox.prepend(clone) indexbox.prepend(clone)
clone.setAttribute('data-source', src) clone.setAttribute('data-source', src)
@ -1365,7 +1365,7 @@ export default class Card {
let title = titlebar.querySelector('h2') let title = titlebar.querySelector('h2')
let titlebarStyle = window.getComputedStyle(titlebar) let titlebarStyle = window.getComputedStyle(titlebar)
let start = { let start = {
height: parseInt(titlebarStyle.height) height: parseInt(titlebarStyle.height),
} }
if (this.dynamicHeight) { if (this.dynamicHeight) {
@ -1385,10 +1385,7 @@ export default class Card {
//jquery hyphenate below //jquery hyphenate below
if (this._isJQueryPresent()) { if (this._isJQueryPresent()) {
$('.column') $('.column').not('.overview').children('p').hyphenate('de')
.not('.overview')
.children('p')
.hyphenate('de')
} }
//logging //logging
@ -1414,23 +1411,23 @@ export default class Card {
card.classList.add('visited') card.classList.add('visited')
}, },
onUpdateParams: ['{self}'], onUpdateParams: ['{self}'],
onUpdate: self => { onUpdate: (self) => {
let transform = self.target._gsTransform let transform = self.target._gsTransform
TweenLite.set(title, { TweenLite.set(title, {
scale: 1 / transform.scaleX scale: 1 / transform.scaleX,
}) })
TweenLite.set(titlebar, { TweenLite.set(titlebar, {
height: (start.height * 1) / transform.scaleY height: (start.height * 1) / transform.scaleY,
}) })
// Retain the border at same visual thickness. // Retain the border at same visual thickness.
titlebar.style.borderBottomWidth = desiredBorderBottomWidth / transform.scaleY + 'px' titlebar.style.borderBottomWidth = desiredBorderBottomWidth / transform.scaleY + 'px'
} },
}) })
TweenLite.to([articleClone], this.animation.articleTransition / 2, { TweenLite.to([articleClone], this.animation.articleTransition / 2, {
delay: this.animation.articleTransition / 2, delay: this.animation.articleTransition / 2,
autoAlpha: 1 autoAlpha: 1,
}) })
if (editable) { if (editable) {
@ -1479,11 +1476,11 @@ export default class Card {
if (editable) { if (editable) {
let isDirty = mainController.askSaveNode() let isDirty = mainController.askSaveNode()
if (isDirty) { if (isDirty) {
mainController.saveNode(html.innerHTML, url => { mainController.saveNode(html.innerHTML, (url) => {
callback(url) callback(url)
this._closeIndexCard(context, card, clone, articleClone, { this._closeIndexCard(context, card, clone, articleClone, {
eventElements, eventElements,
src src,
}) })
}) })
} else { } else {
@ -1522,7 +1519,7 @@ export default class Card {
let scale = { let scale = {
x: globalPreviewRect.width / globalIndexCardRect.width, x: globalPreviewRect.width / globalIndexCardRect.width,
y: globalPreviewRect.height / globalIndexCardRect.height y: globalPreviewRect.height / globalIndexCardRect.height,
} }
let titlebar = clonedSubcard.querySelector('.titlebar') let titlebar = clonedSubcard.querySelector('.titlebar')
@ -1551,16 +1548,16 @@ export default class Card {
let titlebarStyle = window.getComputedStyle(previewTitlebar) let titlebarStyle = window.getComputedStyle(previewTitlebar)
TweenLite.to(titlebar, this.animation.articleTransition, { TweenLite.to(titlebar, this.animation.articleTransition, {
height: parseInt(titlebarStyle.height) height: parseInt(titlebarStyle.height),
}) })
TweenLite.to(clonedArticle, this.animation.articleTransition / 2, { TweenLite.to(clonedArticle, this.animation.articleTransition / 2, {
autoAlpha: 0 autoAlpha: 0,
}) })
let title = titlebar.querySelector('h2') let title = titlebar.querySelector('h2')
let original = { let original = {
height: parseInt(titlebarStyle.height) height: parseInt(titlebarStyle.height),
} }
if (this.dynamicHeight) { if (this.dynamicHeight) {
@ -1589,24 +1586,24 @@ export default class Card {
mainController.popController() mainController.popController()
} }
clonedSubcard.remove() clonedSubcard.remove()
} },
}) })
}, },
onUpdateParams: ['{self}'], onUpdateParams: ['{self}'],
onUpdate: function(self) { onUpdate: function (self) {
let transform = self.target._gsTransform let transform = self.target._gsTransform
TweenLite.set(title, { TweenLite.set(title, {
scale: 1 / transform.scaleX scale: 1 / transform.scaleX,
}) })
TweenLite.set(titlebar, { TweenLite.set(titlebar, {
height: (original.height * 1) / transform.scaleY height: (original.height * 1) / transform.scaleY,
}) })
// Retain the border at same visual thickness. // Retain the border at same visual thickness.
titlebar.style.borderBottomWidth = desiredBorderBottomWidth / transform.scaleY + 'px' titlebar.style.borderBottomWidth = desiredBorderBottomWidth / transform.scaleY + 'px'
} },
}) })
} }
@ -1653,7 +1650,7 @@ export default class Card {
* Called by the expandIndexCard(...) * Called by the expandIndexCard(...)
*/ */
let target = event.target let target = event.target
const saveCallback = url => { const saveCallback = (url) => {
let handler = `Card.openIndexCard(event, '${url}')` let handler = `Card.openIndexCard(event, '${url}')`
if (this.debug) console.log('File has changed', target, handler) if (this.debug) console.log('File has changed', target, handler)
@ -1744,9 +1741,9 @@ export default class Card {
} }
let highlights = this._getHighlights(context) let highlights = this._getHighlights(context)
highlights.forEach(highlight => { highlights.forEach((highlight) => {
Highlight.closeHighlight(highlight, { Highlight.closeHighlight(highlight, {
animation: Card.highlightAnimation animation: Card.highlightAnimation,
}) })
}) })
@ -1768,13 +1765,13 @@ export default class Card {
let global = this._getGlobalRect(element) let global = this._getGlobalRect(element)
let localPosition = Points.fromPageToNode(context, { let localPosition = Points.fromPageToNode(context, {
x: global.x, x: global.x,
y: global.y y: global.y,
}) })
return DOMRectReadOnly.fromRect({ return DOMRectReadOnly.fromRect({
x: localPosition.x, x: localPosition.x,
y: localPosition.y, y: localPosition.y,
width: global.width, width: global.width,
height: global.height height: global.height,
}) })
} }
@ -1797,7 +1794,7 @@ export default class Card {
x: globalPosition.x, x: globalPosition.x,
y: globalPosition.y, y: globalPosition.y,
width: cardWidth, width: cardWidth,
height: cardHeight height: cardHeight,
}) })
} }
@ -1819,19 +1816,19 @@ export default class Card {
this._replaceAttributes(context, html, 'onclick', this._replaceCallback) this._replaceAttributes(context, html, 'onclick', this._replaceCallback)
} }
let zoomableWrappers = html.querySelectorAll('.svg-wrapper') let zoomableWrappers = html.querySelectorAll('.svg-wrapper')
zoomableWrappers.forEach(wrapper => { zoomableWrappers.forEach((wrapper) => {
let svg = wrapper.querySelector('svg') let svg = wrapper.querySelector('svg')
Object.assign(wrapper.style, { Object.assign(wrapper.style, {
width: svg.getAttribute('width') + 'px', width: svg.getAttribute('width') + 'px',
height: svg.getAttribute('height') + 'px' height: svg.getAttribute('height') + 'px',
}) })
}) })
let zoomableVideoWrappers = html.querySelectorAll('.video-wrapper') let zoomableVideoWrappers = html.querySelectorAll('.video-wrapper')
zoomableVideoWrappers.forEach(wrapper => { zoomableVideoWrappers.forEach((wrapper) => {
let video = wrapper.querySelector('video') let video = wrapper.querySelector('video')
Object.assign(wrapper.style, { Object.assign(wrapper.style, {
width: video.getAttribute('width') + 'px', width: video.getAttribute('width') + 'px',
height: video.getAttribute('height') + 'px' height: video.getAttribute('height') + 'px',
}) })
}) })
@ -1870,12 +1867,12 @@ export default class Card {
let globalClick = event.center ? event.center : { x: event.x, y: event.y } let globalClick = event.center ? event.center : { x: event.x, y: event.y }
let localClick = Points.fromPageToNode(indexbox, globalClick) let localClick = Points.fromPageToNode(indexbox, globalClick)
let linkRects = links.map(link => { let linkRects = links.map((link) => {
let rect = link.getBoundingClientRect() let rect = link.getBoundingClientRect()
let topLeft = Points.fromPageToNode(indexbox, rect) let topLeft = Points.fromPageToNode(indexbox, rect)
let center = Points.fromPageToNode(indexbox, { let center = Points.fromPageToNode(indexbox, {
x: rect.x + rect.width / 2, x: rect.x + rect.width / 2,
y: rect.y + rect.height / 2 y: rect.y + rect.height / 2,
}) })
return { return {
x: topLeft.x, x: topLeft.x,
@ -1883,12 +1880,12 @@ export default class Card {
width: rect.width, width: rect.width,
height: rect.height, height: rect.height,
center, center,
link link,
} }
}) })
let distances = [] let distances = []
linkRects.forEach(rect => { linkRects.forEach((rect) => {
let distance = Card.pointRectDist(localClick, rect) let distance = Card.pointRectDist(localClick, rect)
if (distance == 0.0) { if (distance == 0.0) {
// Distance == 0.0 indicates an inside relation. Since these // Distance == 0.0 indicates an inside relation. Since these
@ -2095,7 +2092,7 @@ Card.zIndices = {
article: 10, article: 10,
popup: 100, popup: 100,
zoomable: 101, zoomable: 101,
zoomedFigure: 102 zoomedFigure: 102,
} }
Card.animation = { Card.animation = {
@ -2103,5 +2100,5 @@ Card.animation = {
fade: 0.2, fade: 0.2,
popup: 0.1, popup: 0.1,
highlight: 0.4, highlight: 0.4,
zoomable: 0.5 zoomable: 0.5,
} }

16
lib/card/highlight.js
View File

@ -94,7 +94,7 @@ export default class Highlight extends Object {
obj.classList.add(this.expandedClass) obj.classList.add(this.expandedClass)
obj.setAttribute('stroke-width', stroke / scale) obj.setAttribute('stroke-width', stroke / scale)
if (onComplete) onComplete() if (onComplete) onComplete()
} },
}) })
} }
@ -113,7 +113,7 @@ export default class Highlight extends Object {
obj.classList.remove('zooming') obj.classList.remove('zooming')
obj.classList.remove(this.expandedClass) obj.classList.remove(this.expandedClass)
obj.setAttribute('stroke-width', stroke) obj.setAttribute('stroke-width', stroke)
} },
}) })
} }
@ -163,7 +163,7 @@ export default class Highlight extends Object {
this.shrink(maskImage, { stroke }) this.shrink(maskImage, { stroke })
return return
} }
let circles = Array.from(circleGroup.children).filter(e => e.tagName == 'circle') let circles = Array.from(circleGroup.children).filter((e) => e.tagName == 'circle')
for (let c of circles) { for (let c of circles) {
//console.log("shrinking all circles") //console.log("shrinking all circles")
this.shrink(c, { stroke }) this.shrink(c, { stroke })
@ -210,18 +210,18 @@ export default class Highlight extends Object {
// eslint-disable-next-line no-unused-vars // eslint-disable-next-line no-unused-vars
let [mask, maskImage] = this._getSVGMask(target, { let [mask, maskImage] = this._getSVGMask(target, {
svgRoot, svgRoot,
image image,
}) })
let center = this._calculateCenterRelativeTo(target, image) let center = this._calculateCenterRelativeTo(target, image)
console.log('_calculateCenterRelativeTo', center) console.log('_calculateCenterRelativeTo', center)
TweenLite.set(maskImage, { TweenLite.set(maskImage, {
transformOrigin: `${center.x} ${center.y}` transformOrigin: `${center.x} ${center.y}`,
}) })
TweenLite.set(target, { transformOrigin: '50% 50%' }) TweenLite.set(target, { transformOrigin: '50% 50%' })
TweenLite.to([target, maskImage], animation, { TweenLite.to([target, maskImage], animation, {
scale, scale,
onComplete: onExpanded onComplete: onExpanded,
}) })
target.classList.add(this.expandedClass) target.classList.add(this.expandedClass)
@ -259,7 +259,7 @@ export default class Highlight extends Object {
[mask, maskImage] = this._createSVGMask(circle, { [mask, maskImage] = this._createSVGMask(circle, {
svgRoot, svgRoot,
image, image,
id id,
}) })
return [mask, maskImage] return [mask, maskImage]
@ -353,7 +353,7 @@ export default class Highlight extends Object {
let [mask, maskImage] = this._getSVGMask(target) let [mask, maskImage] = this._getSVGMask(target)
// console.log('Close Highlight', maskImage) // console.log('Close Highlight', maskImage)
TweenLite.to([target, maskImage], animation, { TweenLite.to([target, maskImage], animation, {
scale: 1 scale: 1,
}) })
} }

38
lib/card/plugin.js
View File

@ -63,7 +63,7 @@ export class CardPluginBase {
let requirements = this._collectAllRequirements() let requirements = this._collectAllRequirements()
let missing = [] let missing = []
requirements.forEach(module => { requirements.forEach((module) => {
if (context.modules.indexOf(module.name) == -1) { if (context.modules.indexOf(module.name) == -1) {
missing.push(module.name) missing.push(module.name)
} }
@ -121,12 +121,12 @@ CardPlugin.LightBox = class LightBox extends CardPluginBase {
top: 0, top: 0,
left: 0, left: 0,
width: '100%', width: '100%',
height: '100%' height: '100%',
}, },
this.style, this.style,
{ {
display: 'none', display: 'none',
position: 'absolute' position: 'absolute',
} }
) )
@ -199,7 +199,7 @@ CardPlugin.EnlargeableThumbnail = class EnlargeableThumbnail extends CardPluginB
wrapper.appendChild(icon) wrapper.appendChild(icon)
Object.assign(wrapper.style, { Object.assign(wrapper.style, {
cursor: 'pointer' cursor: 'pointer',
}) })
InteractionMapper.on(this.interactionType, wrapper, () => { InteractionMapper.on(this.interactionType, wrapper, () => {
@ -221,13 +221,13 @@ CardPlugin.EnlargeableThumbnail = class EnlargeableThumbnail extends CardPluginB
Object.assign(imageWrapper.style, { Object.assign(imageWrapper.style, {
maxWidth: 'none', maxWidth: 'none',
maxHeight: 'none' maxHeight: 'none',
}) })
Object.assign(image.style, { Object.assign(image.style, {
width: '100%', width: '100%',
height: '100%', height: '100%',
objectFit: 'cover' objectFit: 'cover',
}) })
this._replaceIcon(imageWrapper) this._replaceIcon(imageWrapper)
@ -250,7 +250,7 @@ CardPlugin.EnlargeableThumbnail = class EnlargeableThumbnail extends CardPluginB
const max = { const max = {
width: context.offsetWidth * maxFillRatio, width: context.offsetWidth * maxFillRatio,
height: context.offsetHeight * maxFillRatio height: context.offsetHeight * maxFillRatio,
} }
let majorSide let majorSide
@ -284,14 +284,14 @@ CardPlugin.EnlargeableThumbnail = class EnlargeableThumbnail extends CardPluginB
let targetDimensions = { let targetDimensions = {
width: 0, width: 0,
height: 0 height: 0,
} }
let position = Points.fromPageToNode(context, Points.fromNodeToPage(source, { x: 0, y: 0 })) let position = Points.fromPageToNode(context, Points.fromNodeToPage(source, { x: 0, y: 0 }))
let targetOffset = { let targetOffset = {
x: 0, x: 0,
y: 0 y: 0,
} }
targetDimensions[majorSide.name] = size targetDimensions[majorSide.name] = size
@ -311,22 +311,22 @@ CardPlugin.EnlargeableThumbnail = class EnlargeableThumbnail extends CardPluginB
y: position.y, y: position.y,
position: 'absolute', position: 'absolute',
width: parseInt(sourceStyle.width), width: parseInt(sourceStyle.width),
height: parseInt(sourceStyle.height) height: parseInt(sourceStyle.height),
}) })
TweenMax.set(overlay, { TweenMax.set(overlay, {
display: 'flex', display: 'flex',
autoAlpha: 0 autoAlpha: 0,
}) })
TweenMax.to(imageWrapper, this.zoomAnimationDuration, { TweenMax.to(imageWrapper, this.zoomAnimationDuration, {
x: targetOffset.x, x: targetOffset.x,
y: targetOffset.y, y: targetOffset.y,
width: targetDimensions.width, width: targetDimensions.width,
height: targetDimensions.height height: targetDimensions.height,
}) })
TweenMax.to(overlay, this.fadeAnimationTime, { TweenMax.to(overlay, this.fadeAnimationTime, {
autoAlpha: 1 autoAlpha: 1,
}) })
} }
@ -358,10 +358,10 @@ CardPlugin.EnlargeableThumbnail = class EnlargeableThumbnail extends CardPluginB
timeline timeline
.to(overlay, this.fadeAnimationDuration, { .to(overlay, this.fadeAnimationDuration, {
autoAlpha: 0 autoAlpha: 0,
}) })
.set(overlay, { .set(overlay, {
display: 'none' display: 'none',
}) })
} }
} }
@ -418,7 +418,7 @@ CardPlugin.Speech = class SpeechPlugin extends CardPluginBase {
this._end = this._end.bind(this) this._end = this._end.bind(this)
this._setupUtterance() this._setupUtterance()
this.utterance.addEventListener('end', event => { this.utterance.addEventListener('end', (event) => {
this._end() this._end()
}) })
} }
@ -451,7 +451,7 @@ CardPlugin.Speech = class SpeechPlugin extends CardPluginBase {
} else { } else {
if (subcard) { if (subcard) {
let clone = subcard.cloneNode(true) let clone = subcard.cloneNode(true)
clone.querySelectorAll('figure').forEach(figure => { clone.querySelectorAll('figure').forEach((figure) => {
figure.parentNode.removeChild(figure) figure.parentNode.removeChild(figure)
}) })
@ -554,10 +554,10 @@ CardPlugin.Speech = class SpeechPlugin extends CardPluginBase {
} }
async _stop() { async _stop() {
return new Promise(resolve => { return new Promise((resolve) => {
if (this.activeUtterance) { if (this.activeUtterance) {
this.activeUtterance.addEventListener('end', resolve, { this.activeUtterance.addEventListener('end', resolve, {
once: true once: true,
}) })
} }

12
lib/card/scatter.js
View File

@ -66,12 +66,12 @@ export default class ScatterCard extends Card {
scatterContainer.element.appendChild(element) scatterContainer.element.appendChild(element)
new DOMScatter(element, scatterContainer, { new DOMScatter(element, scatterContainer, {
width: 1400, width: 1400,
height: 1200 height: 1200,
}) })
this.setup(element, html, { this.setup(element, html, {
basePath, basePath,
modules modules,
}) })
return element return element
} }
@ -132,15 +132,15 @@ export default class ScatterCard extends Card {
let url = basePath + '/' + item + '/index.html' let url = basePath + '/' + item + '/index.html'
console.log('Loading', url) console.log('Loading', url)
this.loadHTML(url) this.loadHTML(url)
.then(html => { .then((html) => {
console.log('Received', html) console.log('Received', html)
let element = this.createCardScatter(html, scatterContainer, { let element = this.createCardScatter(html, scatterContainer, {
basePath, basePath,
modules modules,
}) })
resolve(element) resolve(element)
}) })
.catch(e => reject(e)) .catch((e) => reject(e))
}) })
} }
@ -157,6 +157,6 @@ ScatterCard.selectedLanguage = 0
ScatterCard.languages = ['Deutsch', 'English'] ScatterCard.languages = ['Deutsch', 'English']
ScatterCard.languageTags = { ScatterCard.languageTags = {
Deutsch: 'de', Deutsch: 'de',
English: 'en' English: 'en',
} }
ScatterCard.scatterContainer = null ScatterCard.scatterContainer = null

2
lib/card/theme.js
View File

@ -20,7 +20,7 @@ export default class Theme {
path = path ? path : './config.json' path = path ? path : './config.json'
let xhttp = new XMLHttpRequest() let xhttp = new XMLHttpRequest()
xhttp.onreadystatechange = function() { xhttp.onreadystatechange = function () {
if (this.readyState == 4) { if (this.readyState == 4) {
if (this.status == 200 || Theme._isLocal()) { if (this.status == 200 || Theme._isLocal()) {
try { try {

14
lib/card/wrapper.js
View File

@ -17,7 +17,7 @@ export default class CardWrapper extends Object {
handleClicks() { handleClicks() {
this.domNode.addEventListener( this.domNode.addEventListener(
'click', 'click',
event => { (event) => {
if (event.isTrusted) { if (event.isTrusted) {
Events.stop(event) Events.stop(event)
if (this.triggerSVGClicks && this.isSVGNode(event.target)) { if (this.triggerSVGClicks && this.isSVGNode(event.target)) {
@ -32,7 +32,7 @@ export default class CardWrapper extends Object {
handleClicksAsTaps() { handleClicksAsTaps() {
this.domNode.addEventListener( this.domNode.addEventListener(
'click', 'click',
event => { (event) => {
if (event.isTrusted) { if (event.isTrusted) {
Events.stop(event) Events.stop(event)
} }
@ -99,20 +99,20 @@ export default class CardWrapper extends Object {
let globalClick = event.center ? event.center : { x: event.x, y: event.y } let globalClick = event.center ? event.center : { x: event.x, y: event.y }
let localClick = Points.fromPageToNode(element, globalClick) let localClick = Points.fromPageToNode(element, globalClick)
let clickRects = activeNodes.map(link => { let clickRects = activeNodes.map((link) => {
let rect = link.getBoundingClientRect() let rect = link.getBoundingClientRect()
// Since the getBoundingClientRect is untransformed we cannot rely on it's size // Since the getBoundingClientRect is untransformed we cannot rely on it's size
// We need a transformed bottom right to calculate local width and height // We need a transformed bottom right to calculate local width and height
let bottomRight = Points.fromPageToNode(element, { let bottomRight = Points.fromPageToNode(element, {
x: rect.x + rect.width, x: rect.x + rect.width,
y: rect.y + rect.height y: rect.y + rect.height,
}) })
let topLeft = Points.fromPageToNode(element, rect) let topLeft = Points.fromPageToNode(element, rect)
let width = Math.abs(bottomRight.x - topLeft.x) let width = Math.abs(bottomRight.x - topLeft.x)
let height = Math.abs(bottomRight.y - topLeft.y) let height = Math.abs(bottomRight.y - topLeft.y)
let center = Points.fromPageToNode(element, { let center = Points.fromPageToNode(element, {
x: rect.x + width / 2, x: rect.x + width / 2,
y: rect.y + height / 2 y: rect.y + height / 2,
}) })
return { return {
x: topLeft.x, x: topLeft.x,
@ -120,12 +120,12 @@ export default class CardWrapper extends Object {
width, width,
height, height,
center, center,
link link,
} }
}) })
let distances = [] let distances = []
clickRects.forEach(rect => { clickRects.forEach((rect) => {
let distance = Points.distanceToRect(localClick, rect) let distance = Points.distanceToRect(localClick, rect)
distances.push(parseInt(distance)) distances.push(parseInt(distance))
}) })

4
lib/doctest.js
View File

@ -4,10 +4,10 @@
var docTestLogMessages = [] var docTestLogMessages = []
Array.prototype.equals = function(array) { Array.prototype.equals = function (array) {
return ( return (
this.length == array.length && this.length == array.length &&
this.every(function(this_i, i) { this.every(function (this_i, i) {
return this_i == array[i] return this_i == array[i]
}) })
) )

14
lib/errors.js
View File

@ -33,7 +33,7 @@ export default class Errors {
errors = document.createElement('div') errors = document.createElement('div')
errors.setAttribute('id', 'runtime-errors') errors.setAttribute('id', 'runtime-errors')
this.setStyle(document.body, { this.setStyle(document.body, {
border: '2px solid red' border: '2px solid red',
}) })
this.setStyle(errors, { this.setStyle(errors, {
position: 'absolute', position: 'absolute',
@ -41,7 +41,7 @@ export default class Errors {
padding: '8px', padding: '8px',
width: '100%', width: '100%',
background: 'red', background: 'red',
color: 'white' color: 'white',
}) })
document.body.appendChild(errors) document.body.appendChild(errors)
let counter = document.createElement('div') let counter = document.createElement('div')
@ -55,7 +55,7 @@ export default class Errors {
fontSize: '18px', fontSize: '18px',
textAlign: 'center', textAlign: 'center',
lineHeight: '32px', lineHeight: '32px',
verticalAlign: 'middle' verticalAlign: 'middle',
}) })
counter.innerHTML = '1' counter.innerHTML = '1'
errors.appendChild(counter) errors.appendChild(counter)
@ -66,7 +66,7 @@ export default class Errors {
top: '6px', top: '6px',
left: '48px', left: '48px',
height: '44px', height: '44px',
fontSize: '32px' fontSize: '32px',
}) })
header.innerHTML = 'Runtime Errors' header.innerHTML = 'Runtime Errors'
errors.appendChild(header) errors.appendChild(header)
@ -97,7 +97,7 @@ export default class Errors {
let errors = document.getElementById('runtime-errors') let errors = document.getElementById('runtime-errors')
let infos = errors.querySelectorAll('.info') let infos = errors.querySelectorAll('.info')
if (infos.length > 0) { if (infos.length > 0) {
infos.forEach(info => errors.removeChild(info)) infos.forEach((info) => errors.removeChild(info))
} else { } else {
this.expandErrors() this.expandErrors()
} }
@ -116,7 +116,7 @@ export default class Errors {
// Register more informative error handler // Register more informative error handler
window.addEventListener( window.addEventListener(
'error', 'error',
event => { (event) => {
if (typeof event.error == 'undefined') { if (typeof event.error == 'undefined') {
// This sometimes happens in Edge. Since we have no error // This sometimes happens in Edge. Since we have no error
// position, we cannot do much beside an info log. // position, we cannot do much beside an info log.
@ -128,7 +128,7 @@ export default class Errors {
true true
) )
document.addEventListener('DOMContentLoaded', event => { document.addEventListener('DOMContentLoaded', (event) => {
this.showErrors() this.showErrors()
}) })
} }

12
lib/events.js
View File

@ -2,7 +2,7 @@ export default class Events {
static stop(event) { static stop(event) {
event.preventDefault() event.preventDefault()
// I removed this, as it destroys all the Hammer.js events. // I removed this, as it destroys all the Hammer.js events.
// And also the click event. // And also the click event.
// It seems to have no (apparent) negative impact. -SO // It seems to have no (apparent) negative impact. -SO
// event.stopPropagation() // event.stopPropagation()
} }
@ -65,7 +65,7 @@ export default class Events {
clientX: t.clientX, clientX: t.clientX,
clientY: t.clientY, clientY: t.clientY,
pageX: t.pageX, pageX: t.pageX,
pageY: t.pageY pageY: t.pageY,
}) })
} }
return touches return touches
@ -105,8 +105,8 @@ export default class Events {
ctrlKey: event.ctrlKey, ctrlKey: event.ctrlKey,
altKey: event.altKey, altKey: event.altKey,
shiftKey: event.shiftKey, shiftKey: event.shiftKey,
metaKey: event.metaKey metaKey: event.metaKey,
} },
} }
if (event.type.startsWith('touch')) { if (event.type.startsWith('touch')) {
// On Safari-WebKit the TouchEvent has layerX, layerY coordinates // On Safari-WebKit the TouchEvent has layerX, layerY coordinates
@ -219,7 +219,7 @@ export default class Events {
width: '480px', width: '480px',
height: '640px', height: '640px',
overflow: 'auto', overflow: 'auto',
backgroundColor: 'lightgray' backgroundColor: 'lightgray',
}) })
document.body.appendChild(element) document.body.appendChild(element)
this.popup = element this.popup = element
@ -240,7 +240,7 @@ export default class Events {
} }
Elements.setStyle(this.popup, { Elements.setStyle(this.popup, {
left: event.clientX + 'px', left: event.clientX + 'px',
top: event.clientY + 'px' top: event.clientY + 'px',
}) })
} }
} }

56
lib/flippable.js
View File

@ -17,7 +17,7 @@ export class CardLoader {
scale = 1, scale = 1,
minScale = 0.5, minScale = 0.5,
maxScale = 1.5, maxScale = 1.5,
rotation = 0 rotation = 0,
} = {} } = {}
) { ) {
this.src = src this.src = src
@ -52,8 +52,8 @@ export class PDFLoader extends CardLoader {
load(domNode) { load(domNode) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
PDFJS.getDocument(this.src).then(pdf => { PDFJS.getDocument(this.src).then((pdf) => {
pdf.getPage(1).then(page => { pdf.getPage(1).then((page) => {
let scale = this.scale * app.renderer.resolution let scale = this.scale * app.renderer.resolution
let invScale = 1 / scale let invScale = 1 / scale
let viewport = page.getViewport(scale) let viewport = page.getViewport(scale)
@ -67,7 +67,7 @@ export class PDFLoader extends CardLoader {
// Render PDF page into canvas context. // Render PDF page into canvas context.
let renderContext = { let renderContext = {
canvasContext: context, canvasContext: context,
viewport: viewport viewport: viewport,
} }
page.render(renderContext) page.render(renderContext)
domNode.appendChild(canvas) domNode.appendChild(canvas)
@ -87,7 +87,7 @@ export class ImageLoader extends CardLoader {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
let isImage = domNode instanceof HTMLImageElement let isImage = domNode instanceof HTMLImageElement
let image = isImage ? domNode : document.createElement('img') let image = isImage ? domNode : document.createElement('img')
image.onload = e => { image.onload = (e) => {
if (!isImage) { if (!isImage) {
domNode.appendChild(image) domNode.appendChild(image)
this.addedNode = image this.addedNode = image
@ -103,7 +103,7 @@ export class ImageLoader extends CardLoader {
image.height = image.naturalHeight image.height = image.naturalHeight
resolve(this) resolve(this)
} }
image.onerror = e => { image.onerror = (e) => {
reject(this) reject(this)
} }
image.src = this.src image.src = this.src
@ -125,10 +125,10 @@ export class FrameLoader extends CardLoader {
domNode.appendChild(iframe) domNode.appendChild(iframe)
this.addedNode = iframe this.addedNode = iframe
} }
iframe.onload = e => { iframe.onload = (e) => {
resolve(this) resolve(this)
} }
iframe.onerror = e => { iframe.onerror = (e) => {
reject(this) reject(this)
} }
iframe.src = this.src iframe.src = this.src
@ -141,7 +141,7 @@ export class HTMLLoader extends CardLoader {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
let xhr = new XMLHttpRequest() let xhr = new XMLHttpRequest()
xhr.open('GET', this.src, false) xhr.open('GET', this.src, false)
xhr.onreadystatechange = e => { xhr.onreadystatechange = (e) => {
if (xhr.readyState == 4) { if (xhr.readyState == 4) {
domNode.innerHTML = this.prepare(xhr.response) domNode.innerHTML = this.prepare(xhr.response)
this.addedNode = domNode.firstElementChild this.addedNode = domNode.firstElementChild
@ -151,7 +151,7 @@ export class HTMLLoader extends CardLoader {
resolve(this) resolve(this)
} }
} }
xhr.onerror = e => { xhr.onerror = (e) => {
reject(this) reject(this)
} }
xhr.send() xhr.send()
@ -209,7 +209,7 @@ export class DOMFlip {
onClose = null, onClose = null,
onUpdate = null, onUpdate = null,
onRemoved = null, onRemoved = null,
onLoaded = null onLoaded = null,
} = {} } = {}
) { ) {
this.domScatterContainer = domScatterContainer this.domScatterContainer = domScatterContainer
@ -251,8 +251,8 @@ export class DOMFlip {
// call we can access the new dom element by id // call we can access the new dom element by id
this.cardWrapper = dom.querySelector('#' + this.id) this.cardWrapper = dom.querySelector('#' + this.id)
let front = this.cardWrapper.querySelector('.front') let front = this.cardWrapper.querySelector('.front')
this.frontLoader.load(front).then(loader => { this.frontLoader.load(front).then((loader) => {
this.frontLoaded(loader).then(obj => { this.frontLoaded(loader).then((obj) => {
if (this.onLoaded) this.onLoaded() if (this.onLoaded) this.onLoaded()
resolve(this) resolve(this)
}) })
@ -276,7 +276,7 @@ export class DOMFlip {
scalable: this.scalable, scalable: this.scalable,
rotatable: this.rotatable, rotatable: this.rotatable,
overdoScaling: this.overdoScaling, overdoScaling: this.overdoScaling,
tapDelegate: this.tapDelegateFactory ? new this.tapDelegateFactory(this.cardWrapper) : null tapDelegate: this.tapDelegateFactory ? new this.tapDelegateFactory(this.cardWrapper) : null,
}) })
if (this.center) { if (this.center) {
@ -284,7 +284,7 @@ export class DOMFlip {
} }
if (this.closeOnMinScale) { if (this.closeOnMinScale) {
const removeOnMinScale = function() { const removeOnMinScale = function () {
if (scatter.scale <= scatter.minScale) { if (scatter.scale <= scatter.minScale) {
this.flippable.close() this.flippable.close()
@ -306,7 +306,7 @@ export class DOMFlip {
let back = this.cardWrapper.querySelector('.back') let back = this.cardWrapper.querySelector('.back')
if (this.preloadBack) { if (this.preloadBack) {
this.backLoader.load(back).then(loader => { this.backLoader.load(back).then((loader) => {
this.setupFlippable(flippable, loader) this.setupFlippable(flippable, loader)
}) })
} }
@ -340,7 +340,7 @@ export class DOMFlip {
} else { } else {
let back = this.cardWrapper.querySelector('.back') let back = this.cardWrapper.querySelector('.back')
let flippable = this.flippable let flippable = this.flippable
this.backLoader.load(back).then(loader => { this.backLoader.load(back).then((loader) => {
this.setupFlippable(flippable, loader) this.setupFlippable(flippable, loader)
flippable.start({ duration: this.flipDuration, targetCenter }) flippable.start({ duration: this.flipDuration, targetCenter })
}) })
@ -352,7 +352,7 @@ export class DOMFlip {
opacity: 0, opacity: 0,
onComplete: () => { onComplete: () => {
this.cardWrapper.remove() this.cardWrapper.remove()
} },
}) })
} }
@ -400,7 +400,7 @@ export class DOMFlippable {
TweenLite.set(this.back, { rotationY: -180 }) TweenLite.set(this.back, { rotationY: -180 })
TweenLite.set([this.back, this.front], { TweenLite.set([this.back, this.front], {
backfaceVisibility: 'hidden', backfaceVisibility: 'hidden',
perspective: 5000 perspective: 5000,
}) })
TweenLite.set(this.front, { visibility: 'visible' }) TweenLite.set(this.front, { visibility: 'visible' })
this.infoBtn = element.querySelector('.infoBtn') this.infoBtn = element.querySelector('.infoBtn')
@ -412,18 +412,18 @@ export class DOMFlippable {
scatter.tapDelegate = tapDelegate scatter.tapDelegate = tapDelegate
} }
if (this.infoBtn) { if (this.infoBtn) {
scatter.tapDelegate.onTap(this.infoBtn, event => { scatter.tapDelegate.onTap(this.infoBtn, (event) => {
this.flip.start() this.flip.start()
}) })
this.enable(this.infoBtn) this.enable(this.infoBtn)
} }
if (this.backBtn) { if (this.backBtn) {
scatter.tapDelegate.onTap(this.backBtn, event => { scatter.tapDelegate.onTap(this.backBtn, (event) => {
this.start() this.start()
}) })
} }
if (this.closeBtn) { if (this.closeBtn) {
scatter.tapDelegate.onTap(this.closeBtn, event => { scatter.tapDelegate.onTap(this.closeBtn, (event) => {
this.close() this.close()
}) })
this.enable(this.closeBtn) this.enable(this.closeBtn)
@ -447,7 +447,7 @@ export class DOMFlippable {
if (this.onRemoved) { if (this.onRemoved) {
this.onRemoved.call(this) this.onRemoved.call(this)
} }
} },
}) })
} }
} }
@ -476,7 +476,7 @@ export class DOMFlippable {
scaleButtons() { scaleButtons() {
TweenLite.set([this.infoBtn, this.backBtn, this.closeBtn], { TweenLite.set([this.infoBtn, this.backBtn, this.closeBtn], {
scale: this.buttonScale scale: this.buttonScale,
}) })
} }
@ -589,7 +589,7 @@ export class DOMFlippable {
ease: Power1.easeOut, ease: Power1.easeOut,
transformOrigin: '50% 50%', transformOrigin: '50% 50%',
onUpdate, onUpdate,
onComplete: e => { onComplete: (e) => {
if (this.flipped) { if (this.flipped) {
//this.hide(this.front) //this.hide(this.front)
this.enable(this.backBtn) this.enable(this.backBtn)
@ -618,7 +618,7 @@ export class DOMFlippable {
this.scatter.translatable = translatable this.scatter.translatable = translatable
this.scatter.rotatable = rotatable this.scatter.rotatable = rotatable
}, },
force3D: true force3D: true,
}) })
// See https://greensock.com/forums/topic/7997-rotate-the-shortest-way/ // See https://greensock.com/forums/topic/7997-rotate-the-shortest-way/
TweenLite.to(this.element, this.flipDuration / 2, { TweenLite.to(this.element, this.flipDuration / 2, {
@ -630,7 +630,7 @@ export class DOMFlippable {
height: h, height: h,
x: x, x: x,
y: y, y: y,
onComplete: e => { onComplete: (e) => {
if (this.flipped) { if (this.flipped) {
this.hide(this.front) this.hide(this.front)
// this.hide(this.infoBtn) // this.hide(this.infoBtn)
@ -638,7 +638,7 @@ export class DOMFlippable {
this.hide(this.back) this.hide(this.back)
// this.show(this.infoBtn) // this.show(this.infoBtn)
} }
} },
}) })
} }
} }

10
lib/frames.js
View File

@ -5,7 +5,7 @@ export class FrameContainer {
constructor(element) { constructor(element) {
this.element = element this.element = element
this.delegate = new InteractionMapper(element, this, { this.delegate = new InteractionMapper(element, this, {
mouseWheelElement: window mouseWheelElement: window,
}) })
} }
@ -47,7 +47,7 @@ export class FrameTarget {
bubbles: true, bubbles: true,
cancelable: true, cancelable: true,
clientX: p.x, clientX: p.x,
clientY: p.y clientY: p.y,
}) })
this.target.dispatchEvent(event) this.target.dispatchEvent(event)
} }
@ -79,7 +79,7 @@ export class FrameTarget {
radiusX: 2.5, radiusX: 2.5,
radiusY: 2.5, radiusY: 2.5,
rotationAngle: 10, rotationAngle: 10,
force: 0.5 force: 0.5,
}) })
const touchEvent = new TouchEvent(type, { const touchEvent = new TouchEvent(type, {
@ -88,7 +88,7 @@ export class FrameTarget {
touches: [touchObj], touches: [touchObj],
targetTouches: [touchObj], targetTouches: [touchObj],
changedTouches: [touchObj], changedTouches: [touchObj],
shiftKey: false shiftKey: false,
}) })
if (this.debug) console.log('simulateTouchEventChrome', touchEvent) if (this.debug) console.log('simulateTouchEventChrome', touchEvent)
this.target.dispatchEvent(touchEvent) this.target.dispatchEvent(touchEvent)
@ -101,7 +101,7 @@ export class FrameTarget {
bubbles: true, bubbles: true,
cancelable: true, cancelable: true,
clientX: p.x, clientX: p.x,
clientY: p.y clientY: p.y,
} }
data[touchEventKey] = this.createTouchList(pointMap) data[touchEventKey] = this.createTouchList(pointMap)
let event = new TouchEvent(type, data) let event = new TouchEvent(type, data)

4
lib/imageloader.js
View File

@ -14,7 +14,7 @@ function onerror(event) {
} }
function load() { function load() {
loadQueue.forEach(url => { loadQueue.forEach((url) => {
let xhr = new XMLHttpRequest() let xhr = new XMLHttpRequest()
xhr.responseType = 'blob' xhr.responseType = 'blob'
xhr.onload = onload xhr.onload = onload
@ -25,7 +25,7 @@ function load() {
}) })
} }
self.onmessage = event => { self.onmessage = (event) => {
let msg = event.data let msg = event.data
switch (msg.command) { switch (msg.command) {
case 'load': case 'load':

4
lib/index.js
View File

@ -21,7 +21,7 @@ export default class Index {
let icon = wrapper.querySelector('.icon') let icon = wrapper.querySelector('.icon')
icon.onerror = e => { icon.onerror = (e) => {
if (this.notfound) icon.src = this.notfound if (this.notfound) icon.src = this.notfound
} }
let iconSrc = src.replace('.html', '.png') let iconSrc = src.replace('.html', '.png')
@ -49,7 +49,7 @@ export default class Index {
let icon = wrapper.querySelector('.icon') let icon = wrapper.querySelector('.icon')
icon.parentNode.replaceChild(iframe, icon) icon.parentNode.replaceChild(iframe, icon)
iframe.onload = e => { iframe.onload = (e) => {
this.frames() this.frames()
} }
iframe.src = src + window.location.search iframe.src = src + window.location.search

44
lib/interaction.js
View File

@ -553,7 +553,7 @@ export class InteractionDelegate {
useCapture = true, useCapture = true,
capturePointerEvents = true, capturePointerEvents = true,
cancelOnWindowOut = true, cancelOnWindowOut = true,
debug = false debug = false,
} = {} } = {}
) { ) {
this.debug = debug this.debug = debug
@ -589,7 +589,7 @@ export class InteractionDelegate {
if (this.debug) console.log('Pointer API' + window.PointerEvent) if (this.debug) console.log('Pointer API' + window.PointerEvent)
element.addEventListener( element.addEventListener(
'pointerdown', 'pointerdown',
e => { (e) => {
if (this.debug) console.log('pointerdown', e.pointerId) if (this.debug) console.log('pointerdown', e.pointerId)
if (this.capture(e)) { if (this.capture(e)) {
if (this.capturePointerEvents) { if (this.capturePointerEvents) {
@ -606,7 +606,7 @@ export class InteractionDelegate {
) )
element.addEventListener( element.addEventListener(
'pointermove', 'pointermove',
e => { (e) => {
if (this.debug) console.log('pointermove', e.pointerId, e.pointerType) if (this.debug) console.log('pointermove', e.pointerId, e.pointerType)
if (e.pointerType == 'touch' || (e.pointerType == 'mouse' && Events.isPointerDown(e))) { if (e.pointerType == 'touch' || (e.pointerType == 'mouse' && Events.isPointerDown(e))) {
@ -619,7 +619,7 @@ export class InteractionDelegate {
) )
element.addEventListener( element.addEventListener(
'pointerup', 'pointerup',
e => { (e) => {
if (this.debug) console.log('pointerup', e.pointerId, e.pointerType) if (this.debug) console.log('pointerup', e.pointerId, e.pointerType)
this.onEnd(e) this.onEnd(e)
if (this.capturePointerEvents) { if (this.capturePointerEvents) {
@ -634,7 +634,7 @@ export class InteractionDelegate {
) )
element.addEventListener( element.addEventListener(
'pointercancel', 'pointercancel',
e => { (e) => {
if (this.debug) console.log('pointercancel', e.pointerId, e.pointerType) if (this.debug) console.log('pointercancel', e.pointerId, e.pointerType)
this.onEnd(e) this.onEnd(e)
if (this.capturePointerEvents) element.releasePointerCapture(e.pointerId) if (this.capturePointerEvents) element.releasePointerCapture(e.pointerId)
@ -645,7 +645,7 @@ export class InteractionDelegate {
if (!this.capturePointerEvents) { if (!this.capturePointerEvents) {
element.addEventListener( element.addEventListener(
'pointerleave', 'pointerleave',
e => { (e) => {
if (this.debug) console.log('pointerleave', e.pointerId, e.pointerType) if (this.debug) console.log('pointerleave', e.pointerId, e.pointerType)
if (e.target == element) this.onEnd(e) if (e.target == element) this.onEnd(e)
}, },
@ -656,7 +656,7 @@ export class InteractionDelegate {
if (!this.capturePointerEvents) { if (!this.capturePointerEvents) {
element.addEventListener( element.addEventListener(
'pointerout', 'pointerout',
e => { (e) => {
if (this.debug) console.log('pointerout', e.pointerId, e.pointerType) if (this.debug) console.log('pointerout', e.pointerId, e.pointerType)
if (e.target == element) this.onEnd(e) if (e.target == element) this.onEnd(e)
}, },
@ -667,7 +667,7 @@ export class InteractionDelegate {
if (this.cancelOnWindowOut) { if (this.cancelOnWindowOut) {
window.addEventListener( window.addEventListener(
'pointerout', 'pointerout',
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)
@ -680,7 +680,7 @@ export class InteractionDelegate {
if (this.debug) console.log('Touch API') if (this.debug) console.log('Touch API')
element.addEventListener( element.addEventListener(
'touchstart', 'touchstart',
e => { (e) => {
if (this.debug) console.log('touchstart', this.touchPoints(e)) if (this.debug) console.log('touchstart', this.touchPoints(e))
if (this.capture(e)) { if (this.capture(e)) {
for (let touch of e.changedTouches) { for (let touch of e.changedTouches) {
@ -692,7 +692,7 @@ export class InteractionDelegate {
) )
element.addEventListener( element.addEventListener(
'touchmove', 'touchmove',
e => { (e) => {
if (this.debug) console.log('touchmove', this.touchPoints(e), e) if (this.debug) console.log('touchmove', this.touchPoints(e), e)
for (let touch of e.changedTouches) { for (let touch of e.changedTouches) {
this.onMove(touch) this.onMove(touch)
@ -705,7 +705,7 @@ export class InteractionDelegate {
) )
element.addEventListener( element.addEventListener(
'touchend', 'touchend',
e => { (e) => {
if (this.debug) console.log('touchend', this.touchPoints(e)) if (this.debug) console.log('touchend', this.touchPoints(e))
for (let touch of e.changedTouches) { for (let touch of e.changedTouches) {
this.onEnd(touch) this.onEnd(touch)
@ -715,7 +715,7 @@ export class InteractionDelegate {
) )
element.addEventListener( element.addEventListener(
'touchcancel', 'touchcancel',
e => { (e) => {
if (this.debug) console.log('touchcancel', e.targetTouches.length, e.changedTouches.length) if (this.debug) console.log('touchcancel', e.targetTouches.length, e.changedTouches.length)
for (let touch of e.changedTouches) { for (let touch of e.changedTouches) {
this.onEnd(touch) this.onEnd(touch)
@ -728,7 +728,7 @@ export class InteractionDelegate {
element.addEventListener( element.addEventListener(
'mousedown', 'mousedown',
e => { (e) => {
if (this.debug) console.log('mousedown', e) if (this.debug) console.log('mousedown', e)
if (this.capture(e)) { if (this.capture(e)) {
this.onStart(e) this.onStart(e)
@ -738,7 +738,7 @@ export class InteractionDelegate {
) )
element.addEventListener( element.addEventListener(
'mousemove', 'mousemove',
e => { (e) => {
// Dow we only use move events if the mouse is down? // Dow we only use move events if the mouse is down?
// HOver effects have to be implemented by other means // HOver effects have to be implemented by other means
// && Events.isMouseDown(e)) // && Events.isMouseDown(e))
@ -752,7 +752,7 @@ export class InteractionDelegate {
) )
element.addEventListener( element.addEventListener(
'mouseup', 'mouseup',
e => { (e) => {
if (this.debug) console.log('mouseup', e) if (this.debug) console.log('mouseup', e)
this.onEnd(e) this.onEnd(e)
}, },
@ -762,7 +762,7 @@ export class InteractionDelegate {
if (!this.capturePointerEvents) { if (!this.capturePointerEvents) {
element.addEventListener( element.addEventListener(
'mouseout', 'mouseout',
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")
@ -774,7 +774,7 @@ export class InteractionDelegate {
if (this.cancelOnWindowOut) { if (this.cancelOnWindowOut) {
window.addEventListener( window.addEventListener(
'mouseout', 'mouseout',
e => { (e) => {
if (e.target == element) { if (e.target == element) {
this.onEnd(e) this.onEnd(e)
} }
@ -968,7 +968,7 @@ export class InteractionMapper extends InteractionDelegate {
useCapture = true, useCapture = true,
capturePointerEvents = true, capturePointerEvents = true,
mouseWheelElement = null, mouseWheelElement = null,
logInteractionsAbove = 12 logInteractionsAbove = 12,
} = {} } = {}
) { ) {
super(element, target, { super(element, target, {
@ -976,7 +976,7 @@ export class InteractionMapper extends InteractionDelegate {
useCapture, useCapture,
capturePointerEvents, capturePointerEvents,
longPressTime, longPressTime,
mouseWheelElement mouseWheelElement,
}) })
this.logInteractionsAbove = logInteractionsAbove this.logInteractionsAbove = logInteractionsAbove
} }
@ -1132,7 +1132,7 @@ export class InteractionMapper extends InteractionDelegate {
hammer.get('tap').set(opts) hammer.get('tap').set(opts)
} }
hammer.on(type, event => { hammer.on(type, (event) => {
cb(event) cb(event)
}) })
@ -1146,7 +1146,7 @@ export class InteractionMapper extends InteractionDelegate {
} }
} else { } else {
for (let j = 0; j < elements.length; j++) { for (let j = 0; j < elements.length; j++) {
Hammer.on(elements[j], type, event => { Hammer.on(elements[j], type, (event) => {
cb(event) cb(event)
}) })
} }
@ -1177,7 +1177,7 @@ export class InteractionMapper extends InteractionDelegate {
if (Hammer.__hammers.has(element)) { if (Hammer.__hammers.has(element)) {
const elementHammers = Hammer.__hammers.get(element) const elementHammers = Hammer.__hammers.get(element)
elementHammers.forEach(it => it.destroy()) elementHammers.forEach((it) => it.destroy())
Hammer.__hammers.delete(element) Hammer.__hammers.delete(element)
} }
} }

8
lib/logging.js
View File

@ -6,14 +6,14 @@ let logMessages = new Set()
let logHandlers = { let logHandlers = {
log: console.log, log: console.log,
warn: console.warn, warn: console.warn,
error: console.error error: console.error,
} }
try { try {
ipc = window.ipcRenderer || require('electron').ipcRenderer ipc = window.ipcRenderer || require('electron').ipcRenderer
logHandlers.log = message => ipc.send('log', message) logHandlers.log = (message) => ipc.send('log', message)
logHandlers.warn = message => ipc.send('warn', message) logHandlers.warn = (message) => ipc.send('warn', message)
logHandlers.error = message => ipc.send('error', message) logHandlers.error = (message) => ipc.send('error', message)
} catch (e) { } catch (e) {
console.log('Cannot use electron logging.') console.log('Cannot use electron logging.')
} }

8
lib/pixi/abstractpopup.js
View File

@ -71,7 +71,7 @@ export default class AbstractPopup extends PIXI.Graphics {
radius: theme.radius, radius: theme.radius,
onHidden: null, onHidden: null,
visible: true, visible: true,
orientation: null orientation: null,
}, },
opts opts
) )
@ -105,7 +105,7 @@ export default class AbstractPopup extends PIXI.Graphics {
// interaction // interaction
//----------------- //-----------------
this.interactive = true this.interactive = true
this.on('added', e => { this.on('added', (e) => {
this.show() this.show()
}) })
} }
@ -285,7 +285,7 @@ export default class AbstractPopup extends PIXI.Graphics {
if (cb) { if (cb) {
cb.call(this) cb.call(this)
} }
} },
}) })
return this return this
@ -305,7 +305,7 @@ export default class AbstractPopup extends PIXI.Graphics {
if (cb) { if (cb) {
cb.call(this) cb.call(this)
} }
} },
}) })
if (this.opts.onHidden) { if (this.opts.onHidden) {

2
lib/pixi/app-fullscreen.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en" style="max-width: none;">
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

6
lib/pixi/app-resolution.html
View File

@ -8,10 +8,8 @@
<link rel="stylesheet" href=".././3rdparty/highlight/styles/default.css"> <link rel="stylesheet" href=".././3rdparty/highlight/styles/default.css">
<link rel="stylesheet" href="../../css/doctest.css"> <link rel="stylesheet" href="../../css/doctest.css">
<script src=".././3rdparty/highlight/highlight.pack.js"></script> <script src="../../lib/3rdparty/highlight/highlight.pack.js"></script>
<script src=".././3rdparty/all.js"></script> <script src="../../dist/iwmlib.3rdparty.js"></script>
<script src=".../../dist/iwmlib.pixi.js"></script>
<script src="../../dist/iwmlib.pixi.js"></script> <script src="../../dist/iwmlib.pixi.js"></script>
<style> <style>

30
lib/pixi/app.html
View File

@ -50,21 +50,21 @@ const app = new PIXIApp({
app.setup() app.setup()
app.run() app.run()
let highlightBtn = new PIXI.Graphics(); // let highlightBtn = new PIXI.Graphics();
highlightBtn.lineStyle(2, 0x033792); // highlightBtn.lineStyle(2, 0x033792);
highlightBtn.drawRoundedRect(15, 40, 30, 30, 10); // highlightBtn.drawRoundedRect(15, 40, 30, 30, 10);
highlightBtn.endFill(); // highlightBtn.endFill();
app.stage.addChild(highlightBtn); // app.stage.addChild(highlightBtn);
// app.loadSprites("assets/app-circle.png", sprites => { app.loadSprites("assets/app-circle.png", sprites => {
// let circle = sprites.get("assets/app-circle.png") let circle = sprites.get("assets/app-circle.png")
// circle.anchor.set(0.5) circle.anchor.set(0.5)
// circle.x = app.screen.width / 2 circle.x = app.screen.width / 2
// circle.y = app.screen.height / 2 circle.y = app.screen.height / 2
// circle.width = 80 circle.width = 80
// circle.height = 80 circle.height = 80
// app.scene.addChild(circle) app.scene.addChild(circle)
// app.run() app.run()
// }) })
</script> </script>
</body> </body>

28
lib/pixi/app.js
View File

@ -16,11 +16,11 @@ import { debounce } from '../utils.js'
* *
* @private * @private
* @class * @class
* @extends PIXI.interaction.InteractionManager * @extends PIXI.InteractionManager
* @see {@link http://pixijs.download/dev/docs/PIXI.interaction.InteractionManager.html|PIXI.interaction.InteractionManager} * @see {@link http://pixijs.download/dev/docs/PIXI.interaction.InteractionManager.html|PIXI.interaction.InteractionManager}
* @see {@link https://stackoverflow.com/questions/29710696/webgl-drawing-buffer-size-does-not-equal-canvas-size} * @see {@link https://stackoverflow.com/questions/29710696/webgl-drawing-buffer-size-does-not-equal-canvas-size}
*/ */
class FullscreenInteractionManager extends PIXI.interaction.InteractionManager { class FullscreenInteractionManager extends PIXI.InteractionManager {
mapPositionToPoint(point, x, y) { mapPositionToPoint(point, x, y) {
let resolution = this.renderer.resolution let resolution = this.renderer.resolution
let extendWidth = 1.0 let extendWidth = 1.0
@ -98,7 +98,7 @@ export default class PIXIApp extends PIXI.Application {
roundPixels = true, roundPixels = true,
monkeyPatchMapping = true, monkeyPatchMapping = true,
adaptive = true, adaptive = true,
graphql = false graphql = false,
}) { }) {
const fullScreen = !width || !height const fullScreen = !width || !height
@ -111,12 +111,12 @@ export default class PIXIApp extends PIXI.Application {
view, view,
width, width,
height, height,
transparent, backgroundAlpha: transparent,
antialias, antialias,
resolution, resolution,
autoResize, autoResize,
backgroundColor, backgroundColor,
forceCanvas forceCanvas,
}) })
this.width = width this.width = width
@ -137,7 +137,7 @@ export default class PIXIApp extends PIXI.Application {
this.graphql = graphql this.graphql = graphql
if (fullScreen || autoResize) { if (fullScreen || autoResize) {
console.log('App is in fullScreen mode or autoResize mode') console.log('App is in fullScreen mode or autoResize mode')
const resizeDebounced = debounce(event => this.resizeApp(event), 50) const resizeDebounced = debounce((event) => this.resizeApp(event), 50)
window.addEventListener('resize', resizeDebounced) window.addEventListener('resize', resizeDebounced)
document.body.addEventListener('orientationchange', this.checkOrientation.bind(this)) document.body.addEventListener('orientationchange', this.checkOrientation.bind(this))
} }
@ -167,25 +167,25 @@ export default class PIXIApp extends PIXI.Application {
// GraphQL // GraphQL
if (this.graphql && typeof apollo !== 'undefined') { if (this.graphql && typeof apollo !== 'undefined') {
const networkInterface = apollo.createNetworkInterface({ const networkInterface = apollo.createNetworkInterface({
uri: '/graphql' uri: '/graphql',
}) })
const wsClient = new subscriptions.SubscriptionClient(`wss://${location.hostname}/subscriptions`, { const wsClient = new subscriptions.SubscriptionClient(`wss://${location.hostname}/subscriptions`, {
reconnect: true, reconnect: true,
connectionParams: {} connectionParams: {},
}) })
const networkInterfaceWithSubscriptions = subscriptions.addGraphQLSubscriptions(networkInterface, wsClient) const networkInterfaceWithSubscriptions = subscriptions.addGraphQLSubscriptions(networkInterface, wsClient)
this.apolloClient = new apollo.ApolloClient({ this.apolloClient = new apollo.ApolloClient({
networkInterface: networkInterfaceWithSubscriptions networkInterface: networkInterfaceWithSubscriptions,
}) })
} }
// progress // progress
this._progress = new Progress( this._progress = new Progress(
Object.assign({ theme: this.theme }, this.progressOpts, { Object.assign({ theme: this.theme }, this.progressOpts, {
app: this app: this,
}) })
) )
this._progress.visible = false this._progress.visible = false
@ -214,7 +214,7 @@ export default class PIXIApp extends PIXI.Application {
if (value != this.orient) { if (value != this.orient) {
setTimeout( setTimeout(
100, 100,
function() { function () {
this.orientationChanged(true) this.orientationChanged(true)
}.bind(this) }.bind(this)
) )
@ -469,7 +469,7 @@ export default class PIXIApp extends PIXI.Application {
loadSprites(resources, loaded = null, { resolutionDependent = true, progress = false } = {}) { loadSprites(resources, loaded = null, { resolutionDependent = true, progress = false } = {}) {
this.loadTextures( this.loadTextures(
resources, resources,
textures => { (textures) => {
let sprites = new Map() let sprites = new Map()
for (let [key, texture] of textures) { for (let [key, texture] of textures) {
@ -528,7 +528,7 @@ export default class PIXIApp extends PIXI.Application {
} }
if (progress) { if (progress) {
loader.on('progress', e => { loader.on('progress', (e) => {
this.progress(e.progress) this.progress(e.progress)
}) })
} }
@ -719,7 +719,7 @@ class FpsDisplay extends PIXI.Graphics {
fontWeight: 'bold', fontWeight: 'bold',
fill: '#f6f6f6', fill: '#f6f6f6',
stroke: '#434f4f', stroke: '#434f4f',
strokeThickness: 3 strokeThickness: 3,
}) })
) )
this.text.position.set(6, 6) this.text.position.set(6, 6)

2
lib/pixi/application.html
View File

@ -11,7 +11,7 @@
<script src="../../dist/iwmlib.pixi.js"></script> <script src="../../dist/iwmlib.pixi.js"></script>
</head> </head>
<body> <body>
<h1>PIXI.Application with nothing!</h1> <h1>Vanilla PIXI.Application</h1>
<script> <script>
const app = new PIXI.Application({ const app = new PIXI.Application({

4
lib/pixi/badge.js
View File

@ -50,7 +50,7 @@ export default class Badge extends AbstractPopup {
minWidth: 0, minWidth: 0,
minHeight: 0, minHeight: 0,
padding: theme.padding / 2, padding: theme.padding / 2,
tooltip: null tooltip: null,
}, },
opts opts
) )
@ -84,7 +84,7 @@ export default class Badge extends AbstractPopup {
if (typeof this.opts.tooltip === 'string') { if (typeof this.opts.tooltip === 'string') {
this.tooltip = new Tooltip({ this.tooltip = new Tooltip({
object: this, object: this,
content: this.opts.tooltip content: this.opts.tooltip,
}) })
} else { } else {
this.opts.tooltip = Object.assign({}, { object: this }, this.opts.tooltip) this.opts.tooltip = Object.assign({}, { object: this }, this.opts.tooltip)

4
lib/pixi/blurfilter.js
View File

@ -93,7 +93,7 @@ export default class BlurFilter extends PIXI.Filter {
x: value.x, x: value.x,
y: value.y, y: value.y,
width: value.width, width: value.width,
height: value.height height: value.height,
} }
} else { } else {
const bounds = value.getBounds() const bounds = value.getBounds()
@ -102,7 +102,7 @@ export default class BlurFilter extends PIXI.Filter {
x: bounds.x, x: bounds.x,
y: bounds.y, y: bounds.y,
width: bounds.width, width: bounds.width,
height: bounds.height height: bounds.height,
} }
} }

4
lib/pixi/bundle.js
View File

@ -76,7 +76,7 @@ import Mercator from './maps/projections/mercator.js'
import Robinson from './maps/projections/robinson.js' import Robinson from './maps/projections/robinson.js'
window.Projection = { window.Projection = {
Mercator, Mercator,
Robinson Robinson,
} }
import MapViewport from './maps/mapviewport.js' import MapViewport from './maps/mapviewport.js'
@ -91,7 +91,7 @@ import {
RigidContainer, RigidContainer,
CompactScatter, CompactScatter,
CoverScatter, CoverScatter,
MapObjectScatter MapObjectScatter,
} from './maps/scatter.js' } from './maps/scatter.js'
window.AdvancedScatterContainer = AdvancedScatterContainer window.AdvancedScatterContainer = AdvancedScatterContainer

24
lib/pixi/button.js
View File

@ -156,7 +156,7 @@ export default class Button extends PIXI.Container {
verticalAlign: 'middle', verticalAlign: 'middle',
tooltip: null, tooltip: null,
badge: null, badge: null,
visible: true visible: true,
}, },
opts opts
) )
@ -177,7 +177,7 @@ export default class Button extends PIXI.Container {
strokeAlpha: this.HIDDEN_ALPHA, strokeAlpha: this.HIDDEN_ALPHA,
strokeActiveAlpha: this.HIDDEN_ALPHA, strokeActiveAlpha: this.HIDDEN_ALPHA,
fillAlpha: this.HIDDEN_ALPHA, fillAlpha: this.HIDDEN_ALPHA,
fillActiveAlpha: this.HIDDEN_ALPHA fillActiveAlpha: this.HIDDEN_ALPHA,
}) })
} }
@ -249,15 +249,15 @@ export default class Button extends PIXI.Container {
// interaction // interaction
//----------------- //-----------------
this.button.on('pointerover', e => { this.button.on('pointerover', (e) => {
this.capture(e) this.capture(e)
TweenLite.to([this.button, this.content], this.theme.fast, { TweenLite.to([this.button, this.content], this.theme.fast, {
alpha: 0.83, alpha: 0.83,
overwrite: 'none' overwrite: 'none',
}) })
}) })
this.button.on('pointermove', e => { this.button.on('pointermove', (e) => {
this.capture(e) this.capture(e)
}) })
@ -268,17 +268,17 @@ export default class Button extends PIXI.Container {
this.button.on('scroll', this.onEnd.bind(this)) this.button.on('scroll', this.onEnd.bind(this))
// eslint-disable-next-line no-unused-vars // eslint-disable-next-line no-unused-vars
this.button.on('pointerdown', e => { this.button.on('pointerdown', (e) => {
//this.capture(e) //this.capture(e)
this.__start.x = e.data.global.x this.__start.x = e.data.global.x
this.__start.y = e.data.global.y this.__start.y = e.data.global.y
TweenLite.to([this.button, this.content], this.theme.fast, { TweenLite.to([this.button, this.content], this.theme.fast, {
alpha: 0.7, alpha: 0.7,
overwrite: 'none' overwrite: 'none',
}) })
}) })
this.button.on('pointerup', e => { this.button.on('pointerup', (e) => {
this.capture(e) this.capture(e)
const distance = Points.distance(e.data.global, this.__start) const distance = Points.distance(e.data.global, this.__start)
@ -290,7 +290,7 @@ export default class Button extends PIXI.Container {
TweenLite.to([this.button, this.content], this.theme.fast, { TweenLite.to([this.button, this.content], this.theme.fast, {
alpha: 0.83, alpha: 0.83,
overwrite: 'none' overwrite: 'none',
}) })
if (this.opts.type === 'checkbox') { if (this.opts.type === 'checkbox') {
@ -321,7 +321,7 @@ export default class Button extends PIXI.Container {
if (typeof this.opts.tooltip === 'string') { if (typeof this.opts.tooltip === 'string') {
this.tooltip = new Tooltip({ this.tooltip = new Tooltip({
object: this, object: this,
content: this.opts.tooltip content: this.opts.tooltip,
}) })
} else { } else {
this.opts.tooltip = Object.assign({}, { object: this }, this.opts.tooltip) this.opts.tooltip = Object.assign({}, { object: this }, this.opts.tooltip)
@ -338,7 +338,7 @@ export default class Button extends PIXI.Container {
align: 'right', align: 'right',
verticalAlign: 'top', verticalAlign: 'top',
offsetLeft: 0, offsetLeft: 0,
offsetTop: 0 offsetTop: 0,
} }
) )
if (typeof this.opts.badge === 'string') { if (typeof this.opts.badge === 'string') {
@ -716,7 +716,7 @@ export default class Button extends PIXI.Container {
this.capture(event) this.capture(event)
TweenLite.to([this.button, this.content], this.theme.fast, { TweenLite.to([this.button, this.content], this.theme.fast, {
alpha: 1, alpha: 1,
overwrite: 'none' overwrite: 'none',
}) })
} }
} }

32
lib/pixi/buttongroup.js
View File

@ -126,7 +126,7 @@ export default class ButtonGroup extends PIXI.Container {
orientation: 'horizontal', orientation: 'horizontal',
align: 'center', // left, center, right align: 'center', // left, center, right
verticalAlign: 'middle', // top, middle, bottom verticalAlign: 'middle', // top, middle, bottom
visible: true visible: true,
}, },
opts opts
) )
@ -216,7 +216,7 @@ export default class ButtonGroup extends PIXI.Container {
it.verticalAlign = it.verticalAlign || this.opts.verticalAlign it.verticalAlign = it.verticalAlign || this.opts.verticalAlign
it.afterAction = (event, button) => { it.afterAction = (event, button) => {
if (this.opts.type === 'radio' && button.opts.type === 'default') { if (this.opts.type === 'radio' && button.opts.type === 'default') {
this.buttons.forEach(it => { this.buttons.forEach((it) => {
if (it.opts.type === 'default') { if (it.opts.type === 'default') {
it.active = false it.active = false
} }
@ -243,7 +243,7 @@ export default class ButtonGroup extends PIXI.Container {
button.__originalPosition = { button.__originalPosition = {
x: button.x, x: button.x,
y: button.y y: button.y,
} }
position += (this.opts.orientation === 'horizontal' ? button.width : button.height) + this.opts.margin position += (this.opts.orientation === 'horizontal' ? button.width : button.height) + this.opts.margin
@ -255,7 +255,7 @@ export default class ButtonGroup extends PIXI.Container {
if (this.opts.orientation === 'vertical') { if (this.opts.orientation === 'vertical') {
const maxWidth = this.getMaxButtonWidth() const maxWidth = this.getMaxButtonWidth()
this.buttons.forEach(it => { this.buttons.forEach((it) => {
it.opts.minWidth = maxWidth it.opts.minWidth = maxWidth
it.layout() it.layout()
}) })
@ -283,7 +283,7 @@ export default class ButtonGroup extends PIXI.Container {
//-------------------- //--------------------
if (this.opts.app) { if (this.opts.app) {
const app = this.opts.app const app = this.opts.app
app.view.addEventListener('mousewheel', event => { app.view.addEventListener('mousewheel', (event) => {
const bounds = this.getBounds() const bounds = this.getBounds()
const x = event.clientX - app.view.getBoundingClientRect().left const x = event.clientX - app.view.getBoundingClientRect().left
const y = event.clientY - app.view.getBoundingClientRect().top const y = event.clientY - app.view.getBoundingClientRect().top
@ -338,7 +338,7 @@ export default class ButtonGroup extends PIXI.Container {
*/ */
draw() { draw() {
if (this.opts.margin === 0) { if (this.opts.margin === 0) {
this.buttons.forEach(it => it.hide()) this.buttons.forEach((it) => it.hide())
this.container.clear() this.container.clear()
this.container.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha) this.container.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha)
@ -378,7 +378,7 @@ export default class ButtonGroup extends PIXI.Container {
set disabled(value) { set disabled(value) {
this._disabled = value this._disabled = value
this.buttons.forEach(it => (it.disabled = value)) this.buttons.forEach((it) => (it.disabled = value))
} }
/** /**
@ -416,7 +416,7 @@ export default class ButtonGroup extends PIXI.Container {
* @return {number} The maximum with of a button of the button group. * @return {number} The maximum with of a button of the button group.
*/ */
getMaxButtonWidth() { getMaxButtonWidth() {
let widths = this.buttons.map(it => it.width) let widths = this.buttons.map((it) => it.width)
return Math.max(...widths) return Math.max(...widths)
} }
@ -459,7 +459,7 @@ export default class ButtonGroup extends PIXI.Container {
this.__delta = { this.__delta = {
x: this.container.position.x - event.data.global.x, x: this.container.position.x - event.data.global.x,
y: this.container.position.y - event.data.global.y y: this.container.position.y - event.data.global.y,
} }
TweenLite.killTweensOf(this.container.position, { x: true, y: true }) TweenLite.killTweensOf(this.container.position, { x: true, y: true })
@ -539,7 +539,7 @@ export default class ButtonGroup extends PIXI.Container {
throwProps, throwProps,
ease: Strong.easeOut, ease: Strong.easeOut,
onUpdate: () => this.stack(), onUpdate: () => this.stack(),
onComplete: () => ThrowPropsPlugin.untrack(this.container.position) onComplete: () => ThrowPropsPlugin.untrack(this.container.position),
}, },
0.8, 0.8,
0.4 0.4
@ -635,8 +635,8 @@ export default class ButtonGroup extends PIXI.Container {
sorted.push(it) sorted.push(it)
}) })
const min = Math.min(...sorted.map(it => it.x)) const min = Math.min(...sorted.map((it) => it.x))
const max = Math.max(...sorted.map(it => it.x + it.button.width)) const max = Math.max(...sorted.map((it) => it.x + it.button.width))
const center = (min + max) / 2 const center = (min + max) / 2
// z-index // z-index
@ -661,7 +661,7 @@ export default class ButtonGroup extends PIXI.Container {
return 0 return 0
}) })
.forEach(it => it.parent.addChild(it)) .forEach((it) => it.parent.addChild(it))
} }
/** /**
@ -692,8 +692,8 @@ export default class ButtonGroup extends PIXI.Container {
sorted.push(it) sorted.push(it)
}) })
const min = Math.min(...sorted.map(it => it.y)) const min = Math.min(...sorted.map((it) => it.y))
const max = Math.max(...sorted.map(it => it.y + it.button.height)) const max = Math.max(...sorted.map((it) => it.y + it.button.height))
const center = (min + max) / 2 const center = (min + max) / 2
// z-index // z-index
@ -718,6 +718,6 @@ export default class ButtonGroup extends PIXI.Container {
return 0 return 0
}) })
.forEach(it => it.parent.addChild(it)) .forEach((it) => it.parent.addChild(it))
} }
} }

24
lib/pixi/deepzoom/image.js
View File

@ -155,7 +155,7 @@ export class DeepZoomInfo {
this.baseURL = this.urlForTile(this.baseLevel, 0, 0, false) this.baseURL = this.urlForTile(this.baseLevel, 0, 0, false)
if (loadBaseImage) { if (loadBaseImage) {
this.imageForURL(this.baseURL, e => { this.imageForURL(this.baseURL, (e) => {
this.size = [e.target.naturalWidth, e.target.naturalHeight] this.size = [e.target.naturalWidth, e.target.naturalHeight]
this.baseImage = e.target this.baseImage = e.target
}) })
@ -332,7 +332,7 @@ export class DeepZoomImage extends PIXI.Container {
useWorker = '', useWorker = '',
minimumLevel = 0, minimumLevel = 0,
alpha = 1, alpha = 1,
app = window.app app = window.app,
} = {} } = {}
) { ) {
super() super()
@ -708,7 +708,7 @@ export class DeepZoomImage extends PIXI.Container {
let changed = { added: [], removed: [] } let changed = { added: [], removed: [] }
let newNeeded = new Map() let newNeeded = new Map()
let { centerCol, centerRow, needed } = this.neededTiles(tiles, level) let { centerCol, centerRow, needed } = this.neededTiles(tiles, level)
needed.forEach(d => { needed.forEach((d) => {
let [url, col, row] = d let [url, col, row] = d
newNeeded.set(url, [col, row]) newNeeded.set(url, [col, row])
if (!tiles.requested.has(url)) { if (!tiles.requested.has(url)) {
@ -856,7 +856,7 @@ export class DeepZoomImage extends PIXI.Container {
} }
hideTilesAboveLevel(level) { hideTilesAboveLevel(level) {
Object.keys(this.tileLayers).forEach(key => { Object.keys(this.tileLayers).forEach((key) => {
let tiles = this.tileLayers[key] let tiles = this.tileLayers[key]
if (tiles.level > level) { if (tiles.level > level) {
tiles.visible = false tiles.visible = false
@ -869,7 +869,7 @@ export class DeepZoomImage extends PIXI.Container {
* @param {number} level - The zoom level of the grid * @param {number} level - The zoom level of the grid
*/ */
destroyTilesAboveLevel(level) { destroyTilesAboveLevel(level) {
Object.keys(this.tileLayers).forEach(key => { Object.keys(this.tileLayers).forEach((key) => {
let tiles = this.tileLayers[key] let tiles = this.tileLayers[key]
if (tiles.level > level && !tiles.keep) { if (tiles.level > level && !tiles.keep) {
for (let url of tiles.available.keys()) { for (let url of tiles.available.keys()) {
@ -882,7 +882,7 @@ export class DeepZoomImage extends PIXI.Container {
} }
destroyAllTiles() { destroyAllTiles() {
Object.keys(this.tileLayers).forEach(key => { Object.keys(this.tileLayers).forEach((key) => {
this.destroyTiles(key) this.destroyTiles(key)
}) })
} }
@ -893,7 +893,7 @@ export class DeepZoomImage extends PIXI.Container {
* @memberof DeepZoomImage * @memberof DeepZoomImage
*/ */
tintObsoleteTiles() { tintObsoleteTiles() {
Object.keys(this.tileLayers).forEach(key => { Object.keys(this.tileLayers).forEach((key) => {
let tiles = this.tileLayers[key] let tiles = this.tileLayers[key]
tiles.untintTiles() tiles.untintTiles()
if (!tiles.keep) { if (!tiles.keep) {
@ -908,7 +908,7 @@ export class DeepZoomImage extends PIXI.Container {
* @memberof DeepZoomImage * @memberof DeepZoomImage
*/ */
destroyUnneededTiles() { destroyUnneededTiles() {
Object.keys(this.tileLayers).forEach(key => { Object.keys(this.tileLayers).forEach((key) => {
let tiles = this.tileLayers[key] let tiles = this.tileLayers[key]
if (!tiles.keep) { if (!tiles.keep) {
tiles.destroyUnneededTiles() tiles.destroyUnneededTiles()
@ -922,7 +922,7 @@ export class DeepZoomImage extends PIXI.Container {
* @memberof DeepZoomImage * @memberof DeepZoomImage
*/ */
destroyObsoleteTiles() { destroyObsoleteTiles() {
Object.keys(this.tileLayers).forEach(key => { Object.keys(this.tileLayers).forEach((key) => {
let tiles = this.tileLayers[key] let tiles = this.tileLayers[key]
if (!tiles.keep) { if (!tiles.keep) {
tiles.destroyObsoleteTiles() tiles.destroyObsoleteTiles()
@ -937,7 +937,7 @@ export class DeepZoomImage extends PIXI.Container {
* @memberof DeepZoomImage * @memberof DeepZoomImage
*/ */
destroyTiles() { destroyTiles() {
Object.keys(this.tileLayers).forEach(key => { Object.keys(this.tileLayers).forEach((key) => {
let tiles = this.tileLayers[key] let tiles = this.tileLayers[key]
if (!tiles.keep) { if (!tiles.keep) {
tiles.destroyTiles(this.quadTrees) tiles.destroyTiles(this.quadTrees)
@ -949,7 +949,7 @@ export class DeepZoomImage extends PIXI.Container {
* @param {number} level - The zoom level of the grid * @param {number} level - The zoom level of the grid
*/ */
tintTilesBelowLevel(level) { tintTilesBelowLevel(level) {
Object.keys(this.tileLayers).forEach(key => { Object.keys(this.tileLayers).forEach((key) => {
let tiles = this.tileLayers[key] let tiles = this.tileLayers[key]
if (tiles.level < level) { if (tiles.level < level) {
tiles.tintTiles(this.quadTrees) tiles.tintTiles(this.quadTrees)
@ -989,7 +989,7 @@ export class DeepZoomImage extends PIXI.Container {
this.fastLoads += 1 this.fastLoads += 1
this.populateTiles(currentTiles, this.currentLevel, { this.populateTiles(currentTiles, this.currentLevel, {
onlyone: false, onlyone: false,
about: event.about about: event.about,
}) })
if (this.fastLoads == 3) { if (this.fastLoads == 3) {
this.fastLoads = 0 this.fastLoads = 0

6
lib/pixi/deepzoom/loader.js
View File

@ -40,7 +40,7 @@ export class TileLoader {
if (this.loaded.has(url)) this.loaded.delete(url) if (this.loaded.has(url)) this.loaded.delete(url)
if (this.loading.has(url)) this.loading.delete(url) if (this.loading.has(url)) this.loading.delete(url)
//Tile.unschedule(url) //Tile.unschedule(url)
this.loadQueue = this.loadQueue.filter(item => item != url) this.loadQueue = this.loadQueue.filter((item) => item != url)
} }
/** Cancels loading by clearing the load queue **/ /** Cancels loading by clearing the load queue **/
@ -246,7 +246,7 @@ export class RequestTileLoader extends TileLoader {
let xhr = new XMLHttpRequest() let xhr = new XMLHttpRequest()
xhr.open('GET', url, false) xhr.open('GET', url, false)
xhr.responseType = 'arraybuffer' xhr.responseType = 'arraybuffer'
xhr.onload = e => { xhr.onload = (e) => {
let CompressedImage = PIXI.compressedTextures.CompressedImage let CompressedImage = PIXI.compressedTextures.CompressedImage
let compressed = CompressedImage.loadFromArrayBuffer(xhr.response, url) let compressed = CompressedImage.loadFromArrayBuffer(xhr.response, url)
let base = new PIXI.BaseTexture(compressed) let base = new PIXI.BaseTexture(compressed)
@ -320,7 +320,7 @@ export class WorkerTileLoader extends TileLoader {
let worker = (this.worker = new Worker(workerPath)) let worker = (this.worker = new Worker(workerPath))
worker.onmessage = event => { worker.onmessage = (event) => {
if (event.data.success) { if (event.data.success) {
let { url, col, row, buffer } = event.data let { url, col, row, buffer } = event.data
//console.log("WorkerTileLoader.loaded", url, buffer) //console.log("WorkerTileLoader.loaded", url, buffer)

6
lib/pixi/deepzoom/tileloader.js
View File

@ -9,12 +9,12 @@ function load() {
let [col, row, url] = tile let [col, row, url] = tile
let xhr = new XMLHttpRequest() let xhr = new XMLHttpRequest()
xhr.responseType = 'arraybuffer' xhr.responseType = 'arraybuffer'
xhr.onload = event => { xhr.onload = (event) => {
pendingRequests.delete(url) pendingRequests.delete(url)
let buffer = xhr.response let buffer = xhr.response
postMessage({ success: true, url, col, row, buffer }, [buffer]) postMessage({ success: true, url, col, row, buffer }, [buffer])
} }
xhr.onerror = event => { xhr.onerror = (event) => {
pendingRequests.delete(url) pendingRequests.delete(url)
let buffer = null let buffer = null
postMessage({ success: false, url, col, row, buffer }) postMessage({ success: false, url, col, row, buffer })
@ -29,7 +29,7 @@ function load() {
} }
} }
self.onmessage = event => { self.onmessage = (event) => {
let msg = event.data let msg = event.data
switch (msg.command) { switch (msg.command) {
case 'load': case 'load':

6
lib/pixi/deepzoom/tiles.js
View File

@ -51,7 +51,7 @@ export class Tiles extends PIXI.Container {
this.infoColor = Colors.random() this.infoColor = Colors.random()
this.pprint() this.pprint()
this.destroyed = false //this.destroyed = false
} }
/** Tests whether all tiles are loaded. **/ /** Tests whether all tiles are loaded. **/
@ -169,7 +169,7 @@ export class Tiles extends PIXI.Container {
if (this.showGrid) { if (this.showGrid) {
this.highlightTile(refCol, refRow) this.highlightTile(refCol, refRow)
} }
urlpos.forEach(d => { urlpos.forEach((d) => {
let [url, col, row] = d let [url, col, row] = d
if (this.loader.schedule(url, col, row)) { if (this.loader.schedule(url, col, row)) {
if (onlyone) { if (onlyone) {
@ -229,7 +229,7 @@ export class Tiles extends PIXI.Container {
* cancelled. * cancelled.
**/ **/
destroy() { destroy() {
this.destroyed = true //this.destroyed = true
this.loader.destroy() this.loader.destroy()
super.destroy({ children: true }) // Calls destroyChildren super.destroy({ children: true }) // Calls destroyChildren
this.available.clear() this.available.clear()

22
lib/pixi/flipeffect.js
View File

@ -47,7 +47,7 @@ export class ScatterLoader extends CardLoader {
width: w, width: w,
height: h, height: h,
view: canvas, view: canvas,
resolution: resolution resolution: resolution,
}) })
let displayObject = this.scatter.displayObject let displayObject = this.scatter.displayObject
@ -88,7 +88,7 @@ export class ScatterLoader extends CardLoader {
let image = isImage ? domNode : document.createElement('img') let image = isImage ? domNode : document.createElement('img')
let [x, y, w, h, cloneURL] = this.cloneScatterImage() let [x, y, w, h, cloneURL] = this.cloneScatterImage()
let [ww, hh] = this.unscaledSize() let [ww, hh] = this.unscaledSize()
image.onload = e => { image.onload = (e) => {
if (!isImage) domNode.appendChild(image) if (!isImage) domNode.appendChild(image)
this.x = x this.x = x
this.y = y this.y = y
@ -98,7 +98,7 @@ export class ScatterLoader extends CardLoader {
this.rotation = this.scatter.rotation this.rotation = this.scatter.rotation
resolve(this) resolve(this)
} }
image.onerror = e => { image.onerror = (e) => {
reject(this) reject(this)
} }
image.src = cloneURL image.src = cloneURL
@ -113,7 +113,7 @@ export default class FlipEffect {
this.backLoader = backLoader this.backLoader = backLoader
this.scatterLoader = new ScatterLoader(scatter) this.scatterLoader = new ScatterLoader(scatter)
this.domFlip = new DOMFlip(domScatterContainer, flipTemplate, this.scatterLoader, backLoader, { this.domFlip = new DOMFlip(domScatterContainer, flipTemplate, this.scatterLoader, backLoader, {
onBack: this.backCardClosed.bind(this) onBack: this.backCardClosed.bind(this),
}) })
this.setupInfoButton() this.setupInfoButton()
} }
@ -121,7 +121,7 @@ export default class FlipEffect {
startFlip() { startFlip() {
let center = this.flipCenter() let center = this.flipCenter()
let loader = this.backLoader let loader = this.backLoader
this.domFlip.load().then(domFlip => { this.domFlip.load().then((domFlip) => {
this.scatter.displayObject.visible = false this.scatter.displayObject.visible = false
domFlip.centerAt(center) domFlip.centerAt(center)
domFlip.zoom(this.scatter.scale) domFlip.zoom(this.scatter.scale)
@ -176,10 +176,10 @@ export default class FlipEffect {
this.infoBtn.lineTo(0, 14) this.infoBtn.lineTo(0, 14)
this.infoBtn.endFill() this.infoBtn.endFill()
this.infoBtn.on('click', e => { this.infoBtn.on('click', (e) => {
this.infoSelected() this.infoSelected()
}) })
this.infoBtn.on('tap', e => { this.infoBtn.on('tap', (e) => {
this.infoSelected() this.infoSelected()
}) })
@ -200,7 +200,7 @@ export default class FlipEffect {
displayObject.addChild(this.infoBtn) displayObject.addChild(this.infoBtn)
} }
this.scatter.addTransformEventCallback(e => { this.scatter.addTransformEventCallback((e) => {
let displayObject = this.scatter.displayObject let displayObject = this.scatter.displayObject
if (displayObject.foreground) { if (displayObject.foreground) {
if (e.scale) { if (e.scale) {
@ -217,7 +217,7 @@ export default class FlipEffect {
let canvas = document.createElement('canvas') let canvas = document.createElement('canvas')
canvas.width = 88 * 4 canvas.width = 88 * 4
canvas.height = 44 * 4 canvas.height = 44 * 4
svgImage.onload = e => { svgImage.onload = (e) => {
let displayObject = this.scatter.displayObject let displayObject = this.scatter.displayObject
canvas.getContext('2d').drawImage(svgImage, 0, 0, canvas.width, canvas.height) canvas.getContext('2d').drawImage(svgImage, 0, 0, canvas.width, canvas.height)
let texure = new PIXI.Texture(new PIXI.BaseTexture(canvas)) let texure = new PIXI.Texture(new PIXI.BaseTexture(canvas))
@ -234,10 +234,10 @@ export default class FlipEffect {
this.infoBtn.position = new PIXI.Point(w, h) this.infoBtn.position = new PIXI.Point(w, h)
this.infoBtn.interactive = true this.infoBtn.interactive = true
this.infoBtn.updateTransform() this.infoBtn.updateTransform()
this.infoBtn.on('click', e => { this.infoBtn.on('click', (e) => {
this.infoSelected() this.infoSelected()
}) })
this.infoBtn.on('tap', e => { this.infoBtn.on('tap', (e) => {
this.infoSelected() this.infoSelected()
}) })
} }

22
lib/pixi/flippable.js
View File

@ -86,7 +86,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
focus: 800, focus: 800,
near: 10, near: 10,
far: 10000, far: 10000,
orthographic: false orthographic: false,
}, },
opts opts
) )
@ -228,7 +228,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
height: this.opts.useBackTransforms ? toObject.height * 2 : fromObject.height * 2, height: this.opts.useBackTransforms ? toObject.height * 2 : fromObject.height * 2,
rotation: this.opts.useBackTransforms ? toObject.rotation : fromObject.rotation, rotation: this.opts.useBackTransforms ? toObject.rotation : fromObject.rotation,
skewX: this.opts.useBackTransforms ? toObject.skew.x : fromObject.skew.x, skewX: this.opts.useBackTransforms ? toObject.skew.x : fromObject.skew.x,
skewY: this.opts.useBackTransforms ? toObject.skew.y : fromObject.skew.y skewY: this.opts.useBackTransforms ? toObject.skew.y : fromObject.skew.y,
} }
// set toObject end values // set toObject end values
@ -265,7 +265,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
if (this.opts.onComplete) { if (this.opts.onComplete) {
this.opts.onComplete(this, this) this.opts.onComplete(this, this)
} }
} },
}) })
// x & y // x & y
@ -273,7 +273,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
TweenLite.to(this, this.opts.duration, { TweenLite.to(this, this.opts.duration, {
x: to.x, x: to.x,
y: to.y, y: to.y,
ease: this.opts.transformEase ease: this.opts.transformEase,
}) })
// width & height // width & height
@ -281,7 +281,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
TweenLite.to([front, back], this.opts.duration, { TweenLite.to([front, back], this.opts.duration, {
width: to.width, width: to.width,
height: to.height, height: to.height,
ease: this.opts.transformEase ease: this.opts.transformEase,
}) })
// rotation // rotation
@ -289,9 +289,9 @@ export default class Flippable extends PIXI.projection.Camera3d {
TweenLite.to(this, this.opts.duration, { TweenLite.to(this, this.opts.duration, {
directionalRotation: { directionalRotation: {
rotation: `${to.rotation}_short`, rotation: `${to.rotation}_short`,
useRadians: true useRadians: true,
}, },
ease: this.opts.transformEase ease: this.opts.transformEase,
}) })
// skewX & skewY // skewX & skewY
@ -299,7 +299,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
TweenLite.to(this.skew, this.opts.duration, { TweenLite.to(this.skew, this.opts.duration, {
x: to.skewX, x: to.skewX,
y: to.skewY, y: to.skewY,
ease: this.opts.transformEase ease: this.opts.transformEase,
}) })
// camera // camera
@ -308,7 +308,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
.to(this.euler, half, { .to(this.euler, half, {
x: this.opts.eulerX, x: this.opts.eulerX,
y: this.opts.eulerY, y: this.opts.eulerY,
ease ease,
}) })
.to(this.euler, half, { x: 0, y: 0, ease }) .to(this.euler, half, { x: 0, y: 0, ease })
@ -385,7 +385,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
const bounds = displayObject.getBounds() const bounds = displayObject.getBounds()
return { return {
x: bounds.x + bounds.width / 2, x: bounds.x + bounds.width / 2,
y: bounds.y + bounds.height / 2 y: bounds.y + bounds.height / 2,
} }
} }
@ -411,7 +411,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
displayObject.skew.x, displayObject.skew.x,
displayObject.skew.y, displayObject.skew.y,
displayObject.pivot.x, displayObject.pivot.x,
displayObject.pivot.y displayObject.pivot.y,
] ]
displayObject.position.set(0, 0) displayObject.position.set(0, 0)

4
lib/pixi/labeledgraphics.js
View File

@ -30,7 +30,7 @@ export class Hypenate {
result.push(p + '-') result.push(p + '-')
} }
result.push(last) result.push(last)
return result.filter(p => p.length > 0) return result.filter((p) => p.length > 0)
} }
static splitWord(word) { static splitWord(word) {
@ -288,7 +288,7 @@ export class LabeledGraphics extends PIXI.Graphics {
} }
return { return {
text: `${data.text}${i > 0 ? ' ' : ''}${words[i]}`, text: `${data.text}${i > 0 ? ' ' : ''}${words[i]}`,
length: data.length + wordLength + spaceLength length: data.length + wordLength + spaceLength,
} }
}, },
{ text: '', length: dotsLength } { text: '', length: dotsLength }

28
lib/pixi/list.js
View File

@ -54,7 +54,7 @@ export default class List extends PIXI.Container {
verticalAlign: 'middle', verticalAlign: 'middle',
width: null, width: null,
height: null, height: null,
app: null app: null,
}, },
opts opts
) )
@ -107,7 +107,7 @@ export default class List extends PIXI.Container {
//-------------------- //--------------------
if (this.opts.app) { if (this.opts.app) {
const app = this.opts.app const app = this.opts.app
app.view.addEventListener('mousewheel', event => { app.view.addEventListener('mousewheel', (event) => {
const bounds = this.mask ? this.mask.getBounds() : this.getBounds() const bounds = this.mask ? this.mask.getBounds() : this.getBounds()
const x = event.clientX - app.view.getBoundingClientRect().left const x = event.clientX - app.view.getBoundingClientRect().left
const y = event.clientY - app.view.getBoundingClientRect().top const y = event.clientY - app.view.getBoundingClientRect().top
@ -165,13 +165,13 @@ export default class List extends PIXI.Container {
if (this.opts.orientation === 'vertical') { if (this.opts.orientation === 'vertical') {
switch (this.opts.align) { switch (this.opts.align) {
case 'center': case 'center':
this.__items.forEach(it => (it.x = margin + this.width / 2 - it.width / 2)) this.__items.forEach((it) => (it.x = margin + this.width / 2 - it.width / 2))
break break
case 'right': case 'right':
this.__items.forEach(it => (it.x = margin + this.width - it.width)) this.__items.forEach((it) => (it.x = margin + this.width - it.width))
break break
default: default:
this.__items.forEach(it => (it.x = margin)) this.__items.forEach((it) => (it.x = margin))
break break
} }
@ -191,13 +191,13 @@ export default class List extends PIXI.Container {
if (this.opts.orientation === 'horizontal') { if (this.opts.orientation === 'horizontal') {
switch (this.opts.verticalAlign) { switch (this.opts.verticalAlign) {
case 'top': case 'top':
this.__items.forEach(it => (it.y = margin)) this.__items.forEach((it) => (it.y = margin))
break break
case 'bottom': case 'bottom':
this.__items.forEach(it => (it.y = margin + this.height - it.height)) this.__items.forEach((it) => (it.y = margin + this.height - it.height))
break break
default: default:
this.__items.forEach(it => (it.y = margin + this.height / 2 - it.height / 2)) this.__items.forEach((it) => (it.y = margin + this.height / 2 - it.height / 2))
break break
} }
@ -221,7 +221,7 @@ export default class List extends PIXI.Container {
get innerWidth() { get innerWidth() {
let size = 0 let size = 0
this.__items.forEach(it => (size += it.width)) this.__items.forEach((it) => (size += it.width))
size += this.opts.padding * (this.__items.length - 1) size += this.opts.padding * (this.__items.length - 1)
size += 2 * this.opts.margin size += 2 * this.opts.margin
@ -234,7 +234,7 @@ export default class List extends PIXI.Container {
get innerHeight() { get innerHeight() {
let size = 0 let size = 0
this.__items.forEach(it => (size += it.height)) this.__items.forEach((it) => (size += it.height))
size += this.opts.padding * (this.__items.length - 1) size += this.opts.padding * (this.__items.length - 1)
size += 2 * this.opts.margin size += 2 * this.opts.margin
@ -268,7 +268,7 @@ export default class List extends PIXI.Container {
this.__delta = { this.__delta = {
x: this.container.position.x - event.data.global.x, x: this.container.position.x - event.data.global.x,
y: this.container.position.y - event.data.global.y y: this.container.position.y - event.data.global.y,
} }
TweenLite.killTweensOf(this.container.position, { x: true, y: true }) TweenLite.killTweensOf(this.container.position, { x: true, y: true })
@ -313,7 +313,7 @@ export default class List extends PIXI.Container {
throwProps.x = { throwProps.x = {
velocity: 'auto', velocity: 'auto',
min, min,
max: 0 max: 0,
} }
} else { } else {
let min = this.opts.height - this.innerHeight let min = this.opts.height - this.innerHeight
@ -321,7 +321,7 @@ export default class List extends PIXI.Container {
throwProps.y = { throwProps.y = {
velocity: 'auto', velocity: 'auto',
min, min,
max: 0 max: 0,
} }
} }
@ -331,7 +331,7 @@ export default class List extends PIXI.Container {
{ {
throwProps, throwProps,
ease: Strong.easeOut, ease: Strong.easeOut,
onComplete: () => ThrowPropsPlugin.untrack(this.container.position) onComplete: () => ThrowPropsPlugin.untrack(this.container.position),
}, },
0.8, 0.8,
0.4 0.4

2
lib/pixi/message.js
View File

@ -66,7 +66,7 @@ export default class Message extends InteractivePopup {
verticalAlign: 'top', // top, middle, bottom verticalAlign: 'top', // top, middle, bottom
duration: 5, duration: 5,
autoClose: true, autoClose: true,
closeDuration: theme.fast closeDuration: theme.fast,
}, },
opts opts
) )

12
lib/pixi/modal.js
View File

@ -55,7 +55,7 @@ export default class Modal extends PIXI.Container {
backgroundFill: theme.background, backgroundFill: theme.background,
backgroundFillAlpha: 0.6, backgroundFillAlpha: 0.6,
closeOnBackground: true, closeOnBackground: true,
visible: true visible: true,
}, },
opts opts
) )
@ -87,7 +87,7 @@ export default class Modal extends PIXI.Container {
// interaction // interaction
//----------------- //-----------------
this.interactive = true this.interactive = true
this.on('added', e => { this.on('added', (e) => {
if (this.visible) { if (this.visible) {
this.show() this.show()
} }
@ -101,7 +101,7 @@ export default class Modal extends PIXI.Container {
if (this.opts.closeOnBackground) { if (this.opts.closeOnBackground) {
background.interactive = true background.interactive = true
background.on('pointerup', e => { background.on('pointerup', (e) => {
this.hide() this.hide()
}) })
} }
@ -112,7 +112,7 @@ export default class Modal extends PIXI.Container {
visible: true, visible: true,
onHidden: () => { onHidden: () => {
this.hide() this.hide()
} },
}) })
let popup = new InteractivePopup(popupOpts) let popup = new InteractivePopup(popupOpts)
this.popup = popup this.popup = popup
@ -153,7 +153,7 @@ export default class Modal extends PIXI.Container {
show() { show() {
TweenLite.to(this, this.theme.fast, { TweenLite.to(this, this.theme.fast, {
alpha: 1, alpha: 1,
onStart: () => (this.visible = true) onStart: () => (this.visible = true),
}) })
return this return this
@ -167,7 +167,7 @@ export default class Modal extends PIXI.Container {
hide() { hide() {
TweenLite.to(this, this.theme.fast, { TweenLite.to(this, this.theme.fast, {
alpha: 0, alpha: 0,
onComplete: () => (this.visible = false) onComplete: () => (this.visible = false),
}) })
return this return this

6
lib/pixi/popover.js
View File

@ -10,7 +10,7 @@ export default class Popover extends PIXI.Graphics {
placement = 'top', placement = 'top',
width = 250, width = 250,
titleStyle = {}, titleStyle = {},
textStyle = { fontSize: '1.6em' } textStyle = { fontSize: '1.6em' },
} = {}) { } = {}) {
super() super()
@ -22,7 +22,7 @@ export default class Popover extends PIXI.Graphics {
placement, placement,
width, width,
titleStyle, titleStyle,
textStyle textStyle,
} }
this.padding = 12 this.padding = 12
@ -33,7 +33,7 @@ export default class Popover extends PIXI.Graphics {
stroke: '#f6f6f6', stroke: '#f6f6f6',
strokeThickness: 3, strokeThickness: 3,
wordWrap: true, wordWrap: true,
wordWrapWidth: width - this.padding * 2 wordWrapWidth: width - this.padding * 2,
} }
this.titleTextStyle = new PIXI.TextStyle(Object.assign({}, style, titleStyle)) this.titleTextStyle = new PIXI.TextStyle(Object.assign({}, style, titleStyle))

8
lib/pixi/popup.js
View File

@ -29,7 +29,7 @@ export class InteractivePopup extends AbstractPopup {
closeOnPopup: false, closeOnPopup: false,
closeButton: true, closeButton: true,
button: null, button: null,
buttonGroup: null buttonGroup: null,
}, },
opts opts
) )
@ -62,7 +62,7 @@ export class InteractivePopup extends AbstractPopup {
// interaction // interaction
//----------------- //-----------------
this.on('pointerup', e => { this.on('pointerup', (e) => {
if (this.opts.closeOnPopup) { if (this.opts.closeOnPopup) {
this.hide() this.hide()
} else { } else {
@ -95,7 +95,7 @@ export class InteractivePopup extends AbstractPopup {
closeButton.interactive = true closeButton.interactive = true
closeButton.buttonMode = true closeButton.buttonMode = true
closeButton.on('pointerdown', e => { closeButton.on('pointerdown', (e) => {
this.hide() this.hide()
}) })
@ -228,7 +228,7 @@ export default class Popup extends InteractivePopup {
{ {
closeButton: false, closeButton: false,
minWidth: 0, minWidth: 0,
minHeight: 0 minHeight: 0,
}, },
opts opts
) )

12
lib/pixi/popupmenu.js
View File

@ -50,7 +50,7 @@ export default class PopupMenu extends Popup {
items: [], items: [],
margin: theme.margin / 2, margin: theme.margin / 2,
textStyle: theme.textStyle, textStyle: theme.textStyle,
closeOnPopup: true closeOnPopup: true,
}, },
opts opts
) )
@ -88,19 +88,19 @@ export default class PopupMenu extends Popup {
object.interactive = true object.interactive = true
object.buttonMode = true object.buttonMode = true
} }
object.on('pointerover', e => { object.on('pointerover', (e) => {
TweenLite.to(object, this.theme.fast, { TweenLite.to(object, this.theme.fast, {
alpha: 0.83, alpha: 0.83,
overwrite: 'none' overwrite: 'none',
}) })
}) })
object.on('pointerout', e => { object.on('pointerout', (e) => {
TweenLite.to(object, this.theme.fast, { TweenLite.to(object, this.theme.fast, {
alpha: 1, alpha: 1,
overwrite: 'none' overwrite: 'none',
}) })
}) })
object.on('pointerup', e => { object.on('pointerup', (e) => {
item.action.call(object, e, object) item.action.call(object, e, object)
if (this.opts.closeOnAction) { if (this.opts.closeOnAction) {
this.hide() this.hide()

10
lib/pixi/progress.js
View File

@ -81,7 +81,7 @@ export default class Progress extends PIXI.Container {
backgroundFillAlpha: 1, backgroundFillAlpha: 1,
radius: theme.radius, radius: theme.radius,
destroyOnComplete: true, destroyOnComplete: true,
visible: true visible: true,
}, },
opts opts
) )
@ -116,7 +116,7 @@ export default class Progress extends PIXI.Container {
setup() { setup() {
// interaction // interaction
//----------------- //-----------------
this.on('added', e => { this.on('added', (e) => {
this.show() this.show()
}) })
@ -261,7 +261,7 @@ export default class Progress extends PIXI.Container {
hide() { hide() {
TweenLite.to(this, this.theme.fast, { TweenLite.to(this, this.theme.fast, {
alpha: 0, alpha: 0,
onComplete: () => (this.visible = false) onComplete: () => (this.visible = false),
}) })
return this return this
@ -293,10 +293,10 @@ export default class Progress extends PIXI.Container {
if (value === 100 && this.opts.destroyOnComplete) { if (value === 100 && this.opts.destroyOnComplete) {
TweenLite.to(this, this.theme.fast, { TweenLite.to(this, this.theme.fast, {
alpha: 0, alpha: 0,
onComplete: () => this.destroy({ children: true }) onComplete: () => this.destroy({ children: true }),
}) })
} }
} },
}) })
} }
} }

12
lib/pixi/scatter.js
View File

@ -33,7 +33,7 @@ export class ScatterContainer extends PIXI.Graphics {
showPolygon = false, showPolygon = false,
showTouches = false, showTouches = false,
backgroundColor = null, backgroundColor = null,
app = window.app app = window.app,
} = {} } = {}
) { ) {
super() super()
@ -41,7 +41,7 @@ export class ScatterContainer extends PIXI.Graphics {
if (this.container) if (this.container)
this.containerDimensions = { this.containerDimensions = {
x: this.container.width, x: this.container.width,
y: this.container.height y: this.container.height,
} }
this.backgroundWidth = null this.backgroundWidth = null
this.backgroundHeight = null this.backgroundHeight = null
@ -56,7 +56,7 @@ export class ScatterContainer extends PIXI.Graphics {
this.backgroundColor = backgroundColor this.backgroundColor = backgroundColor
if (showBounds || showTouches || showPolygon) { if (showBounds || showTouches || showPolygon) {
//console.log("Show TOUCHES!!!") //console.log("Show TOUCHES!!!")
this.app.ticker.add(delta => this.update(delta), this) this.app.ticker.add((delta) => this.update(delta), this)
} }
if (backgroundColor) { if (backgroundColor) {
this.updateBackground() this.updateBackground()
@ -277,7 +277,7 @@ export class DisplayObjectScatter extends AbstractScatter {
overdoScaling = 1.5, overdoScaling = 1.5,
onTransform = null, onTransform = null,
onResize, onResize,
onThrowFinished = null onThrowFinished = null,
} = {} } = {}
) { ) {
// For the simulation of named parameters, // For the simulation of named parameters,
@ -300,7 +300,7 @@ export class DisplayObjectScatter extends AbstractScatter {
onThrowFinished, onThrowFinished,
rotationDegrees, rotationDegrees,
rotation, rotation,
onTransform onTransform,
}) })
this.onResize = onResize this.onResize = onResize
this.displayObject = displayObject this.displayObject = displayObject
@ -325,7 +325,7 @@ export class DisplayObjectScatter extends AbstractScatter {
scale: this.scale, scale: this.scale,
x: this.x, x: this.x,
y: this.y, y: this.y,
rotation: this.rotation rotation: this.rotation,
} }
} }

13
lib/pixi/scrollbox.js
View File

@ -43,13 +43,13 @@ export default class Scrollbox extends PIXI.Container {
underflow: 'top-left', underflow: 'top-left',
fadeScrollbar: false, fadeScrollbar: false,
fadeWait: 3000, fadeWait: 3000,
fadeEase: 'easeInOutSine' fadeEase: 'easeInOutSine',
}, },
options options
) )
this.ease = new PIXI.extras.Ease.list() this.ease = new PIXI.extras.Ease.list()
this.on('added', event => { this.on('added', (event) => {
this.update() this.update()
}) })
@ -63,7 +63,7 @@ export default class Scrollbox extends PIXI.Container {
passiveWheel: this.options.stopPropagation, passiveWheel: this.options.stopPropagation,
stopPropagation: this.options.stopPropagation, stopPropagation: this.options.stopPropagation,
screenWidth: this.options.boxWidth, screenWidth: this.options.boxWidth,
screenHeight: this.options.boxHeight screenHeight: this.options.boxHeight,
}) })
) )
this.content.decelerate().on('moved', () => this._drawScrollbars()) this.content.decelerate().on('moved', () => this._drawScrollbars())
@ -396,10 +396,7 @@ export default class Scrollbox extends PIXI.Container {
* @private * @private
*/ */
_drawMask() { _drawMask() {
this._maskContent this._maskContent.beginFill(0).drawRect(0, 0, this.boxWidth, this.boxHeight).endFill()
.beginFill(0)
.drawRect(0, 0, this.boxWidth, this.boxHeight)
.endFill()
this.content.mask = this._maskContent this.content.mask = this._maskContent
} }
@ -440,7 +437,7 @@ export default class Scrollbox extends PIXI.Container {
const time = this.options.fade === true ? 1000 : this.options.fade const time = this.options.fade === true ? 1000 : this.options.fade
this.fade = this.ease.to(this.scrollbar, { alpha: 0 }, time, { this.fade = this.ease.to(this.scrollbar, { alpha: 0 }, time, {
wait: this.options.fadeWait, wait: this.options.fadeWait,
ease: this.options.fadeEase ease: this.options.fadeEase,
}) })
this.fade.on('each', () => (this.content.dirty = true)) this.fade.on('each', () => (this.content.dirty = true))
} }

40
lib/pixi/slider.js
View File

@ -119,7 +119,7 @@ export default class Slider extends PIXI.Container {
onUpdate: null, onUpdate: null,
onComplete: null, onComplete: null,
tooltip: null, tooltip: null,
visible: true visible: true,
}, },
opts opts
) )
@ -174,7 +174,7 @@ export default class Slider extends PIXI.Container {
//----------------- //-----------------
const container = this.opts.container const container = this.opts.container
this.on('pointermove', e => { this.on('pointermove', (e) => {
if (this.control.dragging) { if (this.control.dragging) {
const moveX = this.control.event.data.getLocalPosition(this.control.parent).x const moveX = this.control.event.data.getLocalPosition(this.control.parent).x
this._value = this.pixelToValue(moveX - this.control.delta - this.opts.controlRadius) this._value = this.pixelToValue(moveX - this.control.delta - this.opts.controlRadius)
@ -188,20 +188,20 @@ export default class Slider extends PIXI.Container {
}) })
if (container instanceof Element) { if (container instanceof Element) {
container.addEventListener('pointerup', e => this.onEnd(e), false) container.addEventListener('pointerup', (e) => this.onEnd(e), false)
container.addEventListener('pointercancel', e => this.onEnd(e), false) container.addEventListener('pointercancel', (e) => this.onEnd(e), false)
container.addEventListener('pointerleave', e => this.onEnd(e), false) container.addEventListener('pointerleave', (e) => this.onEnd(e), false)
container.addEventListener('pointerout', e => this.onEnd(e), false) container.addEventListener('pointerout', (e) => this.onEnd(e), false)
container.addEventListener('mouseup', e => this.onEnd(e), false) container.addEventListener('mouseup', (e) => this.onEnd(e), false)
container.addEventListener('mousecancel', e => this.onEnd(e), false) container.addEventListener('mousecancel', (e) => this.onEnd(e), false)
container.addEventListener('mouseleave', e => this.onEnd(e), false) container.addEventListener('mouseleave', (e) => this.onEnd(e), false)
container.addEventListener('mouseout', e => this.onEnd(e), false) container.addEventListener('mouseout', (e) => this.onEnd(e), false)
} else { } else {
container.interactive = true container.interactive = true
container.on('pointerup', e => this.onEnd(e)) container.on('pointerup', (e) => this.onEnd(e))
container.on('pointercancel', e => this.onEnd(e)) container.on('pointercancel', (e) => this.onEnd(e))
container.on('pointerleave', e => this.onEnd(e)) container.on('pointerleave', (e) => this.onEnd(e))
container.on('pointerout', e => this.onEnd(e)) container.on('pointerout', (e) => this.onEnd(e))
} }
// Slider // Slider
@ -217,7 +217,7 @@ export default class Slider extends PIXI.Container {
control.y = this.opts.controlRadius control.y = this.opts.controlRadius
// pointerdown on the control for dragndrop // pointerdown on the control for dragndrop
control.on('pointerdown', e => { control.on('pointerdown', (e) => {
control.event = e control.event = e
control.delta = e.data.getLocalPosition(this.control).x control.delta = e.data.getLocalPosition(this.control).x
control.dragging = true control.dragging = true
@ -233,21 +233,21 @@ export default class Slider extends PIXI.Container {
// interaction // interaction
//----------------- //-----------------
this.sliderObj.on('pointerover', e => { this.sliderObj.on('pointerover', (e) => {
TweenLite.to(this.control, this.theme.fast, { alpha: 0.83 }) TweenLite.to(this.control, this.theme.fast, { alpha: 0.83 })
}) })
this.sliderObj.on('pointerout', e => { this.sliderObj.on('pointerout', (e) => {
TweenLite.to(this.control, this.theme.fast, { alpha: 1 }) TweenLite.to(this.control, this.theme.fast, { alpha: 1 })
}) })
this.sliderObj.on('pointerdown', e => { this.sliderObj.on('pointerdown', (e) => {
this.sliderObj.pointerdowned = true this.sliderObj.pointerdowned = true
TweenLite.to(this.control, this.theme.fast, { alpha: 0.7 }) TweenLite.to(this.control, this.theme.fast, { alpha: 0.7 })
}) })
// Click on the slider bar // Click on the slider bar
this.sliderObj.on('pointerup', e => { this.sliderObj.on('pointerup', (e) => {
if (this.sliderObj.pointerdowned) { if (this.sliderObj.pointerdowned) {
this.sliderObj.pointerdowned = false this.sliderObj.pointerdowned = false
const position = e.data.getLocalPosition(this.control.parent) const position = e.data.getLocalPosition(this.control.parent)
@ -266,7 +266,7 @@ export default class Slider extends PIXI.Container {
if (typeof this.opts.tooltip === 'string') { if (typeof this.opts.tooltip === 'string') {
this.tooltip = new Tooltip({ this.tooltip = new Tooltip({
object: this, object: this,
content: this.opts.tooltip content: this.opts.tooltip,
}) })
} else { } else {
this.opts.tooltip.object = this this.opts.tooltip.object = this

16
lib/pixi/stylus.js
View File

@ -82,7 +82,7 @@ export default class Stylus extends PIXI.Graphics {
captureEvents = true, captureEvents = true,
acceptMouseEvents = true, acceptMouseEvents = true,
lineWidth = 16, lineWidth = 16,
minStrokeLength = 4 minStrokeLength = 4,
} = {}) { } = {}) {
super() super()
this.activePointers = 0 this.activePointers = 0
@ -164,7 +164,7 @@ export default class Stylus extends PIXI.Graphics {
} }
registerEventHandler() { registerEventHandler() {
window.addEventListener('keydown', e => { window.addEventListener('keydown', (e) => {
switch (e.keyCode) { switch (e.keyCode) {
case 38: // up arrow case 38: // up arrow
this.tiltX += 5 this.tiltX += 5
@ -182,7 +182,7 @@ export default class Stylus extends PIXI.Graphics {
if (this.debug) console.log('keydown', e.keyCode, this.tiltX, this.tiltY) if (this.debug) console.log('keydown', e.keyCode, this.tiltX, this.tiltY)
}) })
this.on('pointerdown', e => { this.on('pointerdown', (e) => {
if (this.debug) console.log('pointerdown', e) if (this.debug) console.log('pointerdown', e)
if (this.eventInside(e)) { if (this.eventInside(e)) {
this.activePointers += 1 this.activePointers += 1
@ -192,13 +192,13 @@ export default class Stylus extends PIXI.Graphics {
} }
}) })
this.on('pointermove', e => { this.on('pointermove', (e) => {
if (Events.isPointerDown(e.data.originalEvent) || this.isStylusPointer(e) || this.isStylusTouch(e)) { if (Events.isPointerDown(e.data.originalEvent) || this.isStylusPointer(e) || this.isStylusTouch(e)) {
if (this.debug) console.log('pointermove', e, this.eventInside(e)) if (this.debug) console.log('pointermove', e, this.eventInside(e))
if (this.eventInside(e) && this.singlePointer()) this.moveStroke(this.toStroke(e)) if (this.eventInside(e) && this.singlePointer()) this.moveStroke(this.toStroke(e))
} }
}) })
this.on('pointerup', e => { this.on('pointerup', (e) => {
if (this.eventInside(e)) { if (this.eventInside(e)) {
if (this.activePointers > 0) { if (this.activePointers > 0) {
this.activePointers -= 1 this.activePointers -= 1
@ -207,13 +207,13 @@ export default class Stylus extends PIXI.Graphics {
} }
if (this.debug) console.log('pointerup', this.activePointers) if (this.debug) console.log('pointerup', this.activePointers)
}) })
this.on('pointerleave', e => { this.on('pointerleave', (e) => {
if (this.activePointers > 0) { if (this.activePointers > 0) {
this.activePointers -= 1 this.activePointers -= 1
} }
this.endStroke(this.toStroke(e)) this.endStroke(this.toStroke(e))
}) })
this.on('pointercancel', e => { this.on('pointercancel', (e) => {
if (this.activePointers > 0) { if (this.activePointers > 0) {
this.activePointers -= 1 this.activePointers -= 1
} }
@ -277,7 +277,7 @@ export default class Stylus extends PIXI.Graphics {
tiltX: this.tiltX, tiltX: this.tiltX,
tiltY: this.tiltY, tiltY: this.tiltY,
color: this.color, color: this.color,
lineWidth: this.tiltToLineWidth(this.tiltY) lineWidth: this.tiltToLineWidth(this.tiltY),
} }
return desc return desc
} }

24
lib/pixi/switch.js
View File

@ -147,7 +147,7 @@ export default class Switch extends PIXI.Container {
beforeAction: null, beforeAction: null,
afterAction: null, afterAction: null,
tooltip: null, tooltip: null,
visible: true visible: true,
}, },
opts opts
) )
@ -188,7 +188,7 @@ export default class Switch extends PIXI.Container {
controlStroke: this.opts.controlStroke, controlStroke: this.opts.controlStroke,
controlStrokeWidth: this.opts.controlStrokeWidth, controlStrokeWidth: this.opts.controlStrokeWidth,
controlStrokeAlpha: this.opts.controlStrokeAlpha, controlStrokeAlpha: this.opts.controlStrokeAlpha,
controlRadius: this.opts.controlRadius controlRadius: this.opts.controlRadius,
} }
// setup // setup
@ -228,19 +228,19 @@ export default class Switch extends PIXI.Container {
// interaction // interaction
//----------------- //-----------------
this.switchObj.on('pointerover', e => { this.switchObj.on('pointerover', (e) => {
TweenLite.to(this.control, this.theme.fast, { alpha: 0.83 }) TweenLite.to(this.control, this.theme.fast, { alpha: 0.83 })
}) })
this.switchObj.on('pointerout', e => { this.switchObj.on('pointerout', (e) => {
TweenLite.to(this.control, this.theme.fast, { alpha: 1 }) TweenLite.to(this.control, this.theme.fast, { alpha: 1 })
}) })
this.switchObj.on('pointerdown', e => { this.switchObj.on('pointerdown', (e) => {
TweenLite.to(this.control, this.theme.fast, { alpha: 0.7 }) TweenLite.to(this.control, this.theme.fast, { alpha: 0.7 })
}) })
this.switchObj.on('pointerup', e => { this.switchObj.on('pointerup', (e) => {
if (this.opts.beforeAction) { if (this.opts.beforeAction) {
this.opts.beforeAction.call(this, e, this) this.opts.beforeAction.call(this, e, this)
} }
@ -278,7 +278,7 @@ export default class Switch extends PIXI.Container {
if (typeof this.opts.tooltip === 'string') { if (typeof this.opts.tooltip === 'string') {
this.tooltip = new Tooltip({ this.tooltip = new Tooltip({
object: this, object: this,
content: this.opts.tooltip content: this.opts.tooltip,
}) })
} else { } else {
this.opts.tooltip.object = this this.opts.tooltip.object = this
@ -416,7 +416,7 @@ export default class Switch extends PIXI.Container {
stroke: this.opts.strokeActive, stroke: this.opts.strokeActive,
controlFill: this.opts.controlFillActive, controlFill: this.opts.controlFillActive,
controlStroke: this.opts.controlStrokeActive, controlStroke: this.opts.controlStrokeActive,
format: 'number' format: 'number',
}, },
fillAlpha: this.opts.fillActiveAlpha, fillAlpha: this.opts.fillActiveAlpha,
strokeWidth: this.opts.strokeActiveWidth, strokeWidth: this.opts.strokeActiveWidth,
@ -426,11 +426,11 @@ export default class Switch extends PIXI.Container {
controlStrokeAlpha: this.opts.controlStrokeActiveAlpha, controlStrokeAlpha: this.opts.controlStrokeActiveAlpha,
controlRadius: this.opts.controlRadiusActive, controlRadius: this.opts.controlRadiusActive,
onUpdate: () => this.drawAnimated(), onUpdate: () => this.drawAnimated(),
onComplete: () => this.draw() onComplete: () => this.draw(),
}) })
} else { } else {
TweenLite.to(this.control, this.opts.durationActive, { TweenLite.to(this.control, this.opts.durationActive, {
x: this.xInactive x: this.xInactive,
}) })
TweenLite.to(this.tempAnimated, this.opts.durationActive, { TweenLite.to(this.tempAnimated, this.opts.durationActive, {
colorProps: { colorProps: {
@ -438,7 +438,7 @@ export default class Switch extends PIXI.Container {
stroke: this.opts.stroke, stroke: this.opts.stroke,
controlFill: this.opts.controlFill, controlFill: this.opts.controlFill,
controlStroke: this.opts.controlStroke, controlStroke: this.opts.controlStroke,
format: 'number' format: 'number',
}, },
fillAlpha: this.opts.fillAlpha, fillAlpha: this.opts.fillAlpha,
strokeWidth: this.opts.strokeWidth, strokeWidth: this.opts.strokeWidth,
@ -448,7 +448,7 @@ export default class Switch extends PIXI.Container {
controlStrokeAlpha: this.opts.controlStrokeAlpha, controlStrokeAlpha: this.opts.controlStrokeAlpha,
controlRadius: this.opts.controlRadius, controlRadius: this.opts.controlRadius,
onUpdate: () => this.drawAnimated(), onUpdate: () => this.drawAnimated(),
onComplete: () => this.draw() onComplete: () => this.draw(),
}) })
} }
} }

2
lib/pixi/test.js
View File

@ -121,7 +121,7 @@ export class RecorderTools extends PIXI.Container {
// Since this delegate might shadow another delegate, we mus avoid // Since this delegate might shadow another delegate, we mus avoid
// capturing PointerEvents. // capturing PointerEvents.
this.delegate = new InteractionMapper(container, this, { this.delegate = new InteractionMapper(container, this, {
capturePointerEvents: false capturePointerEvents: false,
}) })
} }

24
lib/pixi/text.js
View File

@ -150,7 +150,7 @@ export default class Text extends PIXI.Container {
verticalAlign: 'middle', verticalAlign: 'middle',
tooltip: null, tooltip: null,
badge: null, badge: null,
visible: true visible: true,
}, },
opts opts
) )
@ -171,7 +171,7 @@ export default class Text extends PIXI.Container {
strokeAlpha: 0, strokeAlpha: 0,
strokeActiveAlpha: 0, strokeActiveAlpha: 0,
fillAlpha: 0, fillAlpha: 0,
fillActiveAlpha: 0 fillActiveAlpha: 0,
}) })
} }
@ -243,15 +243,15 @@ export default class Text extends PIXI.Container {
// interaction // interaction
//----------------- //-----------------
this.button.on('pointerover', e => { this.button.on('pointerover', (e) => {
this.capture(e) this.capture(e)
TweenLite.to([this.button, this.content], this.theme.fast, { TweenLite.to([this.button, this.content], this.theme.fast, {
alpha: 0.83, alpha: 0.83,
overwrite: 'none' overwrite: 'none',
}) })
}) })
this.button.on('pointermove', e => { this.button.on('pointermove', (e) => {
this.capture(e) this.capture(e)
}) })
@ -262,17 +262,17 @@ export default class Text extends PIXI.Container {
this.button.on('scroll', this.onEnd.bind(this)) this.button.on('scroll', this.onEnd.bind(this))
// eslint-disable-next-line no-unused-vars // eslint-disable-next-line no-unused-vars
this.button.on('pointerdown', e => { this.button.on('pointerdown', (e) => {
//this.capture(e) //this.capture(e)
this.__start.x = e.data.global.x this.__start.x = e.data.global.x
this.__start.y = e.data.global.y this.__start.y = e.data.global.y
TweenLite.to([this.button, this.content], this.theme.fast, { TweenLite.to([this.button, this.content], this.theme.fast, {
alpha: 0.7, alpha: 0.7,
overwrite: 'none' overwrite: 'none',
}) })
}) })
this.button.on('pointerup', e => { this.button.on('pointerup', (e) => {
this.capture(e) this.capture(e)
const distance = Points.distance(e.data.global, this.__start) const distance = Points.distance(e.data.global, this.__start)
@ -288,7 +288,7 @@ export default class Text extends PIXI.Container {
TweenLite.to([this.button, this.content], this.theme.fast, { TweenLite.to([this.button, this.content], this.theme.fast, {
alpha: 0.83, alpha: 0.83,
overwrite: 'none' overwrite: 'none',
}) })
if (this.opts.type === 'checkbox') { if (this.opts.type === 'checkbox') {
@ -315,7 +315,7 @@ export default class Text extends PIXI.Container {
if (typeof this.opts.tooltip === 'string') { if (typeof this.opts.tooltip === 'string') {
this.tooltip = new Tooltip({ this.tooltip = new Tooltip({
object: this, object: this,
content: this.opts.tooltip content: this.opts.tooltip,
}) })
} else { } else {
this.opts.tooltip = Object.assign({}, { object: this }, this.opts.tooltip) this.opts.tooltip = Object.assign({}, { object: this }, this.opts.tooltip)
@ -332,7 +332,7 @@ export default class Text extends PIXI.Container {
align: 'right', align: 'right',
verticalAlign: 'top', verticalAlign: 'top',
offsetLeft: 0, offsetLeft: 0,
offsetTop: 0 offsetTop: 0,
} }
) )
if (typeof this.opts.badge === 'string') { if (typeof this.opts.badge === 'string') {
@ -708,7 +708,7 @@ export default class Text extends PIXI.Container {
this.capture(event) this.capture(event)
TweenLite.to([this.button, this.content], this.theme.fast, { TweenLite.to([this.button, this.content], this.theme.fast, {
alpha: 1, alpha: 1,
overwrite: 'none' overwrite: 'none',
}) })
} }
} }

4
lib/pixi/theme.js
View File

@ -112,7 +112,7 @@ export default class Theme {
textActiveAlpha: 1, textActiveAlpha: 1,
iconColor: color2, iconColor: color2,
iconColorActive: colorPrimary, iconColorActive: colorPrimary,
background: color1 background: color1,
}, },
opts opts
) )
@ -129,7 +129,7 @@ export default class Theme {
stroke: color1, stroke: color1,
strokeThickness: 0, strokeThickness: 0,
miterLimit: 1, miterLimit: 1,
lineJoin: 'round' lineJoin: 'round',
}, },
this.opts.textStyle this.opts.textStyle
) )

12
lib/pixi/timeline.js
View File

@ -75,7 +75,7 @@ export class Ticks {
end: last, end: last,
visibleStart: visibleFirst, visibleStart: visibleFirst,
visibleEnd: visibleLast, visibleEnd: visibleLast,
units: units units: units,
} }
} }
@ -717,7 +717,7 @@ export default class Timeline extends BitmapLabeledGraphics {
{ {
x: x, x: x,
y: y, y: y,
align align,
}, },
FontInfo.small FontInfo.small
) )
@ -732,21 +732,21 @@ export default class Timeline extends BitmapLabeledGraphics {
let start = this.start.toLocaleDateString('de', { let start = this.start.toLocaleDateString('de', {
year: 'numeric', year: 'numeric',
month: 'numeric', month: 'numeric',
day: 'numeric' day: 'numeric',
}) })
let end = this.end.toLocaleDateString('de', { let end = this.end.toLocaleDateString('de', {
year: 'numeric', year: 'numeric',
month: 'numeric', month: 'numeric',
day: 'numeric' day: 'numeric',
}) })
this.ensureLabel(this.labelPrefix + 'start', start, { this.ensureLabel(this.labelPrefix + 'start', start, {
x: this.toX(this.start), x: this.toX(this.start),
y: h2 y: h2,
}) })
this.ensureLabel(this.labelPrefix + 'end', end, { this.ensureLabel(this.labelPrefix + 'end', end, {
x: this.toX(this.end), x: this.toX(this.end),
y: h2, y: h2,
align: 'right' align: 'right',
}) })
} }
} }

12
lib/pixi/tooltip.js
View File

@ -56,7 +56,7 @@ export default class Tooltip extends AbstractPopup {
container: null, container: null,
offsetLeft: 8, offsetLeft: 8,
offsetTop: -8, offsetTop: -8,
delay: 0 delay: 0,
}, },
opts opts
) )
@ -89,11 +89,11 @@ export default class Tooltip extends AbstractPopup {
let mouseoverTooltip = false let mouseoverTooltip = false
this.on('mouseover', e => { this.on('mouseover', (e) => {
mouseoverTooltip = true mouseoverTooltip = true
}) })
this.on('mouseout', e => { this.on('mouseout', (e) => {
mouseoverTooltip = false mouseoverTooltip = false
if (!mouseoverObject) { if (!mouseoverObject) {
this.hide(() => { this.hide(() => {
@ -109,7 +109,7 @@ export default class Tooltip extends AbstractPopup {
let mouseoverObject = false let mouseoverObject = false
object.on('mouseover', e => { object.on('mouseover', (e) => {
this.timeout = window.setTimeout(() => { this.timeout = window.setTimeout(() => {
mouseoverObject = true mouseoverObject = true
this.visible = true this.visible = true
@ -118,13 +118,13 @@ export default class Tooltip extends AbstractPopup {
}, this.opts.delay * 1000) }, this.opts.delay * 1000)
}) })
object.on('mousemove', e => { object.on('mousemove', (e) => {
if (mouseoverObject) { if (mouseoverObject) {
this.setPosition(e) this.setPosition(e)
} }
}) })
object.on('mouseout', e => { object.on('mouseout', (e) => {
mouseoverObject = false mouseoverObject = false
window.clearTimeout(this.timeout) window.clearTimeout(this.timeout)
if (!mouseoverTooltip) { if (!mouseoverTooltip) {

4
lib/pixi/volatile.js
View File

@ -59,7 +59,7 @@ export default class Volatile {
distance: 160, distance: 160,
duration: 1.5, duration: 1.5,
ease: Quad.easeOut, ease: Quad.easeOut,
destroyOnComplete: true destroyOnComplete: true,
}, },
opts opts
) )
@ -149,7 +149,7 @@ export default class Volatile {
if (this.opts.destroyOnComplete) { if (this.opts.destroyOnComplete) {
object.destroy({ children: true }) object.destroy({ children: true })
} }
} },
}) })
} }

62
lib/popup.js
View File

@ -63,7 +63,7 @@ export default class Popup extends Poppable {
onResize = null, onResize = null,
onMove = null, onMove = null,
noStyle = false, noStyle = false,
hideOnUp = true hideOnUp = true,
} = {}) { } = {}) {
super() super()
this.context = context this.context = context
@ -129,7 +129,7 @@ export default class Popup extends Poppable {
img.style.top = '0px' img.style.top = '0px'
img.style.width = '16px' img.style.width = '16px'
img.style.height = '16px' img.style.height = '16px'
img.onclick = e => { img.onclick = (e) => {
this.close() this.close()
} }
this.element.appendChild(img) this.element.appendChild(img)
@ -143,17 +143,17 @@ export default class Popup extends Poppable {
img.style.height = '16px' img.style.height = '16px'
img.src = this.resizeIcon img.src = this.resizeIcon
img.setAttribute('draggable', true) img.setAttribute('draggable', true)
img.ondragstart = e => { img.ondragstart = (e) => {
this.currentPos = { x: e.clientX, y: e.clientY } this.currentPos = { x: e.clientX, y: e.clientY }
return true return true
} }
img.ondrag = e => { img.ondrag = (e) => {
e.preventDefault() e.preventDefault()
let target = this.element.querySelector('iframe') || this.element let target = this.element.querySelector('iframe') || this.element
let delta = { let delta = {
x: e.clientX - this.currentPos.x, x: e.clientX - this.currentPos.x,
y: e.clientY - this.currentPos.y y: e.clientY - this.currentPos.y,
} }
this.currentPos = { x: e.clientX, y: e.clientY } this.currentPos = { x: e.clientX, y: e.clientY }
@ -179,7 +179,7 @@ export default class Popup extends Poppable {
this.onResize({ target, delta, width, height }) this.onResize({ target, delta, width, height })
} }
} }
img.ondragend = e => {} img.ondragend = (e) => {}
this.element.appendChild(img) this.element.appendChild(img)
} }
@ -205,7 +205,7 @@ export default class Popup extends Poppable {
let iframe = document.createElement('iframe') let iframe = document.createElement('iframe')
iframe.setAttribute('frameBorder', 0) iframe.setAttribute('frameBorder', 0)
iframe.src = content[key] iframe.src = content[key]
iframe.onload = e => { iframe.onload = (e) => {
let body = iframe.contentWindow.document.body let body = iframe.contentWindow.document.body
let observer = new MutationObserver(() => { let observer = new MutationObserver(() => {
this.iframeChanged(iframe) this.iframeChanged(iframe)
@ -214,7 +214,7 @@ export default class Popup extends Poppable {
attributes: true, attributes: true,
subtree: true, subtree: true,
childList: true, childList: true,
characterData: true characterData: true,
}) })
let w = Math.max(body.scrollWidth, body.offsetWidth) let w = Math.max(body.scrollWidth, body.offsetWidth)
let h = Math.max(body.scrollHeight, body.offsetHeight) let h = Math.max(body.scrollHeight, body.offsetHeight)
@ -256,7 +256,7 @@ export default class Popup extends Poppable {
if (!image.complete && !image.src.startsWith('data:')) { if (!image.complete && !image.src.startsWith('data:')) {
total += 1 total += 1
console.log('image not complete', image.src) console.log('image not complete', image.src)
image.onload = e => { image.onload = (e) => {
count += 1 count += 1
if (count == total) { if (count == total) {
this.loaded = true this.loaded = true
@ -305,33 +305,33 @@ export default class Popup extends Poppable {
if (window.PointerEvent) if (window.PointerEvent)
this.parent.addEventListener('pointerup', close.bind(this), { this.parent.addEventListener('pointerup', close.bind(this), {
capture: true, capture: true,
once: true once: true,
}) })
else if (window.TouchEvent) else if (window.TouchEvent)
this.parent.addEventListener('touchend', close.bind(this), { this.parent.addEventListener('touchend', close.bind(this), {
capture: true, capture: true,
once: true once: true,
}) })
else else
this.parent.addEventListener('mouseup', close.bind(this), { this.parent.addEventListener('mouseup', close.bind(this), {
capture: true, capture: true,
once: true once: true,
}) })
} else { } else {
if (window.PointerEvent) if (window.PointerEvent)
this.parent.addEventListener('pointerdown', close.bind(this), { this.parent.addEventListener('pointerdown', close.bind(this), {
capture: true, capture: true,
once: true once: true,
}) })
else if (window.TouchEvent) else if (window.TouchEvent)
this.parent.addEventListener('touchstart', close.bind(this), { this.parent.addEventListener('touchstart', close.bind(this), {
capture: true, capture: true,
once: true once: true,
}) })
else else
this.parent.addEventListener('mousedown', close.bind(this), { this.parent.addEventListener('mousedown', close.bind(this), {
capture: true, capture: true,
once: true once: true,
}) })
} }
} }
@ -362,17 +362,17 @@ export default class Popup extends Poppable {
if (this.draggable) { if (this.draggable) {
let target = this.element let target = this.element
target.setAttribute('draggable', true) target.setAttribute('draggable', true)
target.ondragstart = e => { target.ondragstart = (e) => {
this.currentPos = { x: e.clientX, y: e.clientY } this.currentPos = { x: e.clientX, y: e.clientY }
var img = document.createElement('img') var img = document.createElement('img')
img.src = 'data:image/gifbase64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' img.src = 'data:image/gifbase64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
e.dataTransfer.setDragImage(img, 0, 0) e.dataTransfer.setDragImage(img, 0, 0)
} }
target.ondrag = e => { target.ondrag = (e) => {
e.preventDefault() e.preventDefault()
let delta = { let delta = {
x: e.clientX - this.currentPos.x, x: e.clientX - this.currentPos.x,
y: e.clientY - this.currentPos.y y: e.clientY - this.currentPos.y,
} }
this.currentPos = { x: e.clientX, y: e.clientY } this.currentPos = { x: e.clientX, y: e.clientY }
let left = parseFloat(target.style.left) let left = parseFloat(target.style.left)
@ -388,7 +388,7 @@ export default class Popup extends Poppable {
this.lastDrag = { left, top } this.lastDrag = { left, top }
} }
target.ondragend = e => { target.ondragend = (e) => {
target.style.left = this.lastDrag.left + 'px' target.style.left = this.lastDrag.left + 'px'
target.style.top = this.lastDrag.top + 'px' target.style.top = this.lastDrag.top + 'px'
this.currentPos = null this.currentPos = null
@ -514,14 +514,14 @@ export default class Popup extends Poppable {
withinDimensions() { withinDimensions() {
return { return {
width: this.keepWithin.offsetWidth, width: this.keepWithin.offsetWidth,
height: this.keepWithin.offsetHeight height: this.keepWithin.offsetHeight,
} }
} }
localDimensions() { localDimensions() {
return { return {
width: this.element.offsetWidth, width: this.element.offsetWidth,
height: this.element.offsetHeight height: this.element.offsetHeight,
} }
} }
@ -676,7 +676,7 @@ export default class Popup extends Poppable {
let style = { let style = {
maxWidth: this.maxWidth + 'px', maxWidth: this.maxWidth + 'px',
zIndex: this.zIndex, zIndex: this.zIndex,
position: 'absolute' position: 'absolute',
} }
if (this.minWidth) { if (this.minWidth) {
style.minWidth = this.minWidth + 'px' style.minWidth = this.minWidth + 'px'
@ -690,7 +690,7 @@ export default class Popup extends Poppable {
fontFamily: this.fontFamily, fontFamily: this.fontFamily,
fontSize: this.fontSize, fontSize: this.fontSize,
stroke: 'black', stroke: 'black',
fill: 'white' fill: 'white',
}) })
} }
@ -729,7 +729,7 @@ export default class Popup extends Poppable {
borderTopWidth: this.notchSize + 'px', borderTopWidth: this.notchSize + 'px',
borderRight: this.notchSize + 'px solid transparent', borderRight: this.notchSize + 'px solid transparent',
borderLeft: this.notchSize + 'px solid transparent', borderLeft: this.notchSize + 'px solid transparent',
borderBottom: 0 borderBottom: 0,
} }
} else { } else {
return { return {
@ -742,7 +742,7 @@ export default class Popup extends Poppable {
borderTop: this.notchSize + 'px solid ' + this.backgroundColor, borderTop: this.notchSize + 'px solid ' + this.backgroundColor,
borderRight: this.notchSize + 'px solid transparent', borderRight: this.notchSize + 'px solid transparent',
borderLeft: this.notchSize + 'px solid transparent', borderLeft: this.notchSize + 'px solid transparent',
borderBottom: 0 borderBottom: 0,
} }
} }
} }
@ -758,7 +758,7 @@ export default class Popup extends Poppable {
borderBottomWidth: this.notchSize + 'px', borderBottomWidth: this.notchSize + 'px',
borderRight: this.notchSize + 'px solid transparent', borderRight: this.notchSize + 'px solid transparent',
borderLeft: this.notchSize + 'px solid transparent', borderLeft: this.notchSize + 'px solid transparent',
borderTop: 0 borderTop: 0,
} }
} else { } else {
return { return {
@ -770,7 +770,7 @@ export default class Popup extends Poppable {
borderBottom: this.notchSize + 'px solid ' + this.backgroundColor, borderBottom: this.notchSize + 'px solid ' + this.backgroundColor,
borderRight: this.notchSize + 'px solid transparent', borderRight: this.notchSize + 'px solid transparent',
borderLeft: this.notchSize + 'px solid transparent', borderLeft: this.notchSize + 'px solid transparent',
borderTop: 0 borderTop: 0,
} }
} }
} }
@ -796,7 +796,7 @@ export default class Popup extends Poppable {
borderLeftWidth: this.notchSize, borderLeftWidth: this.notchSize,
position: 'absolute', position: 'absolute',
borderTop: this.notchSize + 'px solid transparent', borderTop: this.notchSize + 'px solid transparent',
borderBottom: this.notchSize + 'px solid transparent' borderBottom: this.notchSize + 'px solid transparent',
} }
} else { } else {
let borderRight = this.notchSize + 'px solid transparent' let borderRight = this.notchSize + 'px solid transparent'
@ -825,7 +825,7 @@ export default class Popup extends Poppable {
// boxShadow, // boxShadow,
position: 'absolute', position: 'absolute',
borderTop: this.notchSize + 'px solid transparent', borderTop: this.notchSize + 'px solid transparent',
borderBottom: this.notchSize + 'px solid transparent' borderBottom: this.notchSize + 'px solid transparent',
} }
} }
} }
@ -864,7 +864,7 @@ export default class Popup extends Poppable {
useEventPosWithBoundingBox = false, useEventPosWithBoundingBox = false,
interactive = false, interactive = false,
onResize = null, onResize = null,
onMove = null onMove = null,
} = {} } = {}
) { ) {
let notchPosition = switchPos && point.y < 50 ? 'topCenter' : 'bottomCenter' let notchPosition = switchPos && point.y < 50 ? 'topCenter' : 'bottomCenter'
@ -893,7 +893,7 @@ export default class Popup extends Poppable {
useEventPosWithBoundingBox, useEventPosWithBoundingBox,
interactive, interactive,
onResize, onResize,
onMove onMove,
}) })
popup.register(context) popup.register(context)
popup.showAt(content, point) popup.showAt(content, point)

20
lib/popupmenu.js
View File

@ -36,7 +36,7 @@ export default class PopupMenu extends Popup {
highlightColor = 'black', highlightColor = 'black',
notchPosition = 'bottomLeft', notchPosition = 'bottomLeft',
keepWithin = null, keepWithin = null,
autoClose = true autoClose = true,
} = {}) { } = {}) {
super({ super({
parent, parent,
@ -48,7 +48,7 @@ export default class PopupMenu extends Popup {
backgroundColor, backgroundColor,
keepWithin, keepWithin,
normalColor, normalColor,
autoClose autoClose,
}) })
this.commands = commands this.commands = commands
this.zIndex = zIndex this.zIndex = zIndex
@ -77,21 +77,21 @@ export default class PopupMenu extends Popup {
item.style.paddingBottom = item.style.paddingTop = this.spacing item.style.paddingBottom = item.style.paddingTop = this.spacing
Elements.setStyle(item, { Elements.setStyle(item, {
color: this.normalColor, color: this.normalColor,
cursor: 'default' cursor: 'default',
}) })
Elements.addClass(item, 'unselectable') Elements.addClass(item, 'unselectable')
Elements.addClass(item, 'popupMenuItem') Elements.addClass(item, 'popupMenuItem')
this.items[key] = item this.items[key] = item
item.onclick = event => { item.onclick = (event) => {
this.perform(event, key) this.perform(event, key)
} }
item.ontap = event => { item.ontap = (event) => {
this.perform(event, key) this.perform(event, key)
} }
item.onmouseover = event => { item.onmouseover = (event) => {
this.over(event, key) this.over(event, key)
} }
item.onmouseout = event => { item.onmouseout = (event) => {
this.out(event, key) this.out(event, key)
} }
} }
@ -192,7 +192,7 @@ export default class PopupMenu extends Popup {
keepWithin = null, keepWithin = null,
backgroundColor = '#EEE', backgroundColor = '#EEE',
normalColor = '#444', normalColor = '#444',
autoClose = true autoClose = true,
} = {} } = {}
) { ) {
let registered = Poppable.get(context) let registered = Poppable.get(context)
@ -216,11 +216,11 @@ export default class PopupMenu extends Popup {
normalColor, normalColor,
notchPosition, notchPosition,
keepWithin, keepWithin,
autoClose autoClose,
}) })
popup.showAt(commands, point) popup.showAt(commands, point)
popup.register(context) popup.register(context)
popup.closeEventListener = e => { popup.closeEventListener = (e) => {
if (this.eventOutside(e)) this.closePopup(context) if (this.eventOutside(e)) this.closePopup(context)
} }
if (autoClose) { if (autoClose) {

149
lib/scatter.js
View File

@ -44,7 +44,8 @@ const END = 'onEnd'
*/ */
export class ScatterEvent extends BaseEvent { export class ScatterEvent extends BaseEvent {
constructor( constructor(
target, { translate = { x: 0, y: 0 }, scale = null, rotate = 0, about = null, fast = false, type = null } = {} target,
{ translate = { x: 0, y: 0 }, scale = null, rotate = 0, about = null, fast = false, type = null } = {}
) { ) {
super('scatterTransformed', { target: target }) super('scatterTransformed', { target: target })
this.translate = translate this.translate = translate
@ -94,7 +95,7 @@ class Throwable {
throwVisibility = 44, throwVisibility = 44,
throwDamping = 0.95, throwDamping = 0.95,
autoThrow = true, autoThrow = true,
onThrowFinished = null onThrowFinished = null,
} = {}) { } = {}) {
this.movableX = movableX this.movableX = movableX
this.movableY = movableY this.movableY = movableY
@ -105,7 +106,7 @@ class Throwable {
this.velocity = null this.velocity = null
this.timestamp = null this.timestamp = null
this.onThrowFinished = onThrowFinished this.onThrowFinished = onThrowFinished
//console.log("onThrowFinished", onThrowFinished) //console.log("onThrowFinished", onThrowFinished)
} }
observeVelocity() { observeVelocity() {
@ -127,13 +128,12 @@ class Throwable {
t: t, t: t,
dt: dt, dt: dt,
dx: delta.x / number, dx: delta.x / number,
dy: delta.y / number dy: delta.y / number,
} }
this.velocities.push(velocity) this.velocities.push(velocity)
while (this.velocities.length > buffer) { while (this.velocities.length > buffer) {
this.velocities.shift() this.velocities.shift()
} }
} }
} }
@ -183,7 +183,7 @@ class Throwable {
animateThrow(time) { animateThrow(time) {
if (this.velocity != null) { if (this.velocity != null) {
let dt = this._throwDeltaTime() let dt = this._throwDeltaTime()
// console.log("animateThrow", dt) // console.log("animateThrow", dt)
let next = this.nextVelocity(this.velocity) let next = this.nextVelocity(this.velocity)
let prevLength = Points.length(this.velocity) let prevLength = Points.length(this.velocity)
let nextLength = Points.length(next) let nextLength = Points.length(next)
@ -226,7 +226,7 @@ class Throwable {
let next = Points.multiplyScalar(velocity, this.throwDamping) let next = Points.multiplyScalar(velocity, this.throwDamping)
return { return {
x: this.movableX ? next.x : 0, x: this.movableX ? next.x : 0,
y: this.movableY ? next.y : 0 y: this.movableY ? next.y : 0,
} }
} }
@ -271,7 +271,7 @@ export class AbstractScatter extends Throwable {
scaleCloseBuffer = 0.05, scaleCloseBuffer = 0.05,
maxRotation = Angle.degree2radian(5), maxRotation = Angle.degree2radian(5),
minInteractionDistance = 0, minInteractionDistance = 0,
useLowPassFilter = false useLowPassFilter = false,
} = {}) { } = {}) {
if (rotationDegrees != null && rotation != null) { if (rotationDegrees != null && rotation != null) {
throw new Error('Use rotationDegrees or rotation but not both') throw new Error('Use rotationDegrees or rotation but not both')
@ -286,7 +286,7 @@ export class AbstractScatter extends Throwable {
throwVisibility, throwVisibility,
throwDamping, throwDamping,
autoThrow, autoThrow,
onThrowFinished onThrowFinished,
}) })
/** /**
@ -361,7 +361,7 @@ export class AbstractScatter extends Throwable {
_callCloseCallbacks() { _callCloseCallbacks() {
if (this.onClose) { if (this.onClose) {
this.onClose.forEach(callback => callback(this)) this.onClose.forEach((callback) => callback(this))
} }
} }
@ -381,7 +381,6 @@ export class AbstractScatter extends Throwable {
let delta = interaction.delta() let delta = interaction.delta()
if (delta != null) { if (delta != null) {
let rotate = delta.rotate let rotate = delta.rotate
let zoom = delta.zoom let zoom = delta.zoom
if (this.maxRotation != null) { if (this.maxRotation != null) {
@ -468,8 +467,8 @@ export class AbstractScatter extends Throwable {
keepOnStage(velocity, collision = 0.5) { keepOnStage(velocity, collision = 0.5) {
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()
@ -480,7 +479,7 @@ export class AbstractScatter extends Throwable {
let dx = this.movableX ? velocity.x : 0 let dx = this.movableX ? velocity.x : 0
let dy = this.movableY ? velocity.y : 0 let dy = this.movableY ? velocity.y : 0
let factor = this.throwDamping let factor = this.throwDamping
// if (recentered) { // if (recentered) {
if (x < 0) { if (x < 0) {
dx = -dx dx = -dx
factor = collision factor = collision
@ -513,13 +512,13 @@ export class AbstractScatter extends Throwable {
if (this.scale < this.minScale + this.scaleCloseThreshold - this.scaleCloseBuffer) { if (this.scale < this.minScale + this.scaleCloseThreshold - this.scaleCloseBuffer) {
this.zoom(this.minScale, { this.zoom(this.minScale, {
animate: 0.2, animate: 0.2,
onComplete: this.close.bind(this) onComplete: this.close.bind(this),
}) })
} else if (this.scale < this.minScale + this.scaleCloseThreshold) { } else if (this.scale < this.minScale + this.scaleCloseThreshold) {
this.zoom(this.minScale + this.scaleCloseThreshold, { this.zoom(this.minScale + this.scaleCloseThreshold, {
animate: 0.4 animate: 0.4,
}) })
} }
} }
rotateDegrees(degrees, anchor) { rotateDegrees(degrees, anchor) {
@ -539,12 +538,12 @@ export class AbstractScatter extends Throwable {
x: '+=' + d.x, x: '+=' + d.x,
y: '+=' + d.y, y: '+=' + d.y,
/* scale: scale, uo: not defined, why was this here? */ /* scale: scale, uo: not defined, why was this here? */
onUpdate: e => { onUpdate: (e) => {
let p = this.position let p = this.position
let dx = p.x - startPos.x let dx = p.x - startPos.x
let dy = p.x - startPos.y let dy = p.x - startPos.y
this.onMoved(dx, dy) this.onMoved(dx, dy)
} },
}) })
} else { } else {
this._move(d) this._move(d)
@ -573,7 +572,7 @@ export class AbstractScatter extends Throwable {
scale: scale, scale: scale,
delay: delay, delay: delay,
onComplete: onComplete, onComplete: onComplete,
onUpdate: this.onZoomed.bind(this) onUpdate: this.onZoomed.bind(this),
}) })
} else { } else {
this.scale = scale this.scale = scale
@ -583,7 +582,7 @@ export class AbstractScatter extends Throwable {
} }
_move(delta) { _move(delta) {
// this.addVelocity(delta) uo: reverted commit fa0256d782dd498c6d3e51321260ca375ca9f855 // this.addVelocity(delta) uo: reverted commit fa0256d782dd498c6d3e51321260ca375ca9f855
this.x += this.movableX ? delta.x : 0 this.x += this.movableX ? delta.x : 0
this.y += this.movableX ? delta.y : 0 this.y += this.movableX ? delta.y : 0
} }
@ -591,7 +590,7 @@ export class AbstractScatter extends Throwable {
transform(translate, zoom, rotate, anchor) { transform(translate, zoom, rotate, anchor) {
let delta = { let delta = {
x: this.movableX ? translate.x : 0, x: this.movableX ? translate.x : 0,
y: this.movableY ? translate.y : 0 y: this.movableY ? translate.y : 0,
} }
if (this.resizable) var vzoom = zoom if (this.resizable) var vzoom = zoom
if (!this.translatable) delta = { x: 0, y: 0 } if (!this.translatable) delta = { x: 0, y: 0 }
@ -606,9 +605,9 @@ export class AbstractScatter extends Throwable {
rotate: 0, rotate: 0,
about: anchor, about: anchor,
fast: false, fast: false,
type: UPDATE type: UPDATE,
}) })
this.onTransform.forEach(function(f) { this.onTransform.forEach(function (f) {
f(event) f(event)
}) })
} }
@ -622,7 +621,7 @@ export class AbstractScatter extends Throwable {
let newOrigin = Points.arc(anchor, beta + rotate, distance * thresholdedZoom) let newOrigin = Points.arc(anchor, beta + rotate, distance * thresholdedZoom)
let extra = Points.subtract(newOrigin, origin) let extra = Points.subtract(newOrigin, origin)
const anchorOffset = Points.subtract(anchor, origin) const anchorOffset = Points.subtract(anchor, origin)
// this._move(offset) // this._move(offset)
this.scale = newScale this.scale = newScale
this.rotation += rotate this.rotation += rotate
let offset = Points.negate(anchorOffset) let offset = Points.negate(anchorOffset)
@ -637,9 +636,9 @@ export class AbstractScatter extends Throwable {
translate: delta, translate: delta,
scale: newScale, scale: newScale,
rotate: rotate, rotate: rotate,
about: anchor about: anchor,
}) })
this.onTransform.forEach(function(f) { this.onTransform.forEach(function (f) {
f(event) f(event)
}) })
} }
@ -705,7 +704,7 @@ export class AbstractScatter extends Throwable {
if (this.scale > this.maxScale) zoom = 1 - amount if (this.scale > this.maxScale) zoom = 1 - amount
if (zoom != 1) { if (zoom != 1) {
this.transform({ x: 0, y: 0 }, zoom, 0, this.zoomAnchor) this.transform({ x: 0, y: 0 }, zoom, 0, this.zoomAnchor)
requestAnimationFrame(dt => { requestAnimationFrame((dt) => {
this.animateZoomBounce(dt) this.animateZoomBounce(dt)
}) })
return return
@ -762,9 +761,9 @@ export class AbstractScatter extends Throwable {
rotate: 0, rotate: 0,
about: null, about: null,
fast: false, fast: false,
type: START type: START,
}) })
this.onTransform.forEach(function(f) { this.onTransform.forEach(function (f) {
f(event) f(event)
}) })
} }
@ -798,9 +797,9 @@ export class AbstractScatter extends Throwable {
rotate: 0, rotate: 0,
about: null, about: null,
fast: false, fast: false,
type: END type: END,
}) })
this.onTransform.forEach(function(f) { this.onTransform.forEach(function (f) {
f(event) f(event)
}) })
} }
@ -828,9 +827,9 @@ export class AbstractScatter extends Throwable {
translate: delta, translate: delta,
scale: this.scale, scale: this.scale,
about: this.currentAbout, about: this.currentAbout,
type: null type: null,
}) })
this.onTransform.forEach(function(f) { this.onTransform.forEach(function (f) {
f(event) f(event)
}) })
} }
@ -842,9 +841,9 @@ export class AbstractScatter extends Throwable {
scale: this.scale, scale: this.scale,
about: this.currentAbout, about: this.currentAbout,
fast: false, fast: false,
type: null type: null,
}) })
this.onTransform.forEach(function(f) { this.onTransform.forEach(function (f) {
f(event) f(event)
}) })
} }
@ -856,9 +855,9 @@ export class AbstractScatter extends Throwable {
translate: { x: dx, y: dy }, translate: { x: dx, y: dy },
about: about, about: about,
fast: true, fast: true,
type: null type: null,
}) })
this.onTransform.forEach(function(f) { this.onTransform.forEach(function (f) {
f(event) f(event)
}) })
} }
@ -869,9 +868,9 @@ export class AbstractScatter extends Throwable {
let event = new ScatterEvent(this, { let event = new ScatterEvent(this, {
scale: this.scale, scale: this.scale,
fast: false, fast: false,
type: null type: null,
}) })
this.onTransform.forEach(function(f) { this.onTransform.forEach(function (f) {
f(event) f(event)
}) })
} }
@ -885,9 +884,9 @@ export class AbstractScatter extends Throwable {
scale: this.scale, scale: this.scale,
about: about, about: about,
fast: false, fast: false,
type: null type: null,
}) })
this.onTransform.forEach(function(f) { this.onTransform.forEach(function (f) {
f(event) f(event)
}) })
} }
@ -912,13 +911,14 @@ export class DOMScatterContainer {
* @param {DOM node} debugCanvas - Shows debug infos about touches if not null * @param {DOM node} debugCanvas - Shows debug infos about touches if not null
*/ */
constructor( constructor(
element, { element,
{
stopEvents = 'auto', stopEvents = 'auto',
claimEvents = true, claimEvents = true,
useCapture = true, useCapture = true,
capturePointerEvents = true, capturePointerEvents = true,
touchAction = 'none', touchAction = 'none',
debugCanvas = null debugCanvas = null,
} = {} } = {}
) { ) {
this.onCapture = null this.onCapture = null
@ -930,7 +930,7 @@ export class DOMScatterContainer {
movement of scatter objects, the touchmove event has to be bound again. movement of scatter objects, the touchmove event has to be bound again.
*/ */
if (Capabilities.isSafari) { if (Capabilities.isSafari) {
document.addEventListener('touchmove', event => this.preventPinch(event), false) document.addEventListener('touchmove', (event) => this.preventPinch(event), false)
stopEvents = false stopEvents = false
} else { } else {
stopEvents = true stopEvents = true
@ -945,11 +945,11 @@ export class DOMScatterContainer {
this.delegate = new InteractionMapper(element, this, { this.delegate = new InteractionMapper(element, this, {
useCapture, useCapture,
capturePointerEvents, capturePointerEvents,
mouseWheelElement: window mouseWheelElement: window,
}) })
if (debugCanvas !== null) { if (debugCanvas !== null) {
requestAnimationFrame(dt => { requestAnimationFrame((dt) => {
this.showTouches(dt, debugCanvas) this.showTouches(dt, debugCanvas)
}) })
} }
@ -971,7 +971,7 @@ export class DOMScatterContainer {
context.fill() context.fill()
context.stroke() context.stroke()
} }
requestAnimationFrame(dt => { requestAnimationFrame((dt) => {
this.showTouches(dt, canvas) this.showTouches(dt, canvas)
}) })
} }
@ -1076,7 +1076,8 @@ export class DOMScatterContainer {
export class DOMScatter extends AbstractScatter { export class DOMScatter extends AbstractScatter {
constructor( constructor(
element, element,
container, { container,
{
startScale = 1.0, startScale = 1.0,
minScale = 0.1, minScale = 0.1,
maxScale = 1.0, maxScale = 1.0,
@ -1112,7 +1113,7 @@ export class DOMScatter extends AbstractScatter {
scaleCloseBuffer = 0.05, scaleCloseBuffer = 0.05,
useLowPassFilter = false, useLowPassFilter = false,
maxRotation = Angle.degree2radian(15), maxRotation = Angle.degree2radian(15),
minInteractionDistance = 200 minInteractionDistance = 200,
} = {} } = {}
) { ) {
super({ super({
@ -1139,7 +1140,7 @@ export class DOMScatter extends AbstractScatter {
onClose, onClose,
useLowPassFilter, useLowPassFilter,
maxRotation, maxRotation,
minInteractionDistance minInteractionDistance,
}) })
if (container == null || width == null || height == null) { if (container == null || width == null || height == null) {
throw new Error('Invalid value: null') throw new Error('Invalid value: null')
@ -1167,7 +1168,7 @@ export class DOMScatter extends AbstractScatter {
height: height, height: height,
scale: startScale, scale: startScale,
rotation: this.startRotationDegrees, rotation: this.startRotationDegrees,
transformOrigin: transformOrigin transformOrigin: transformOrigin,
} }
this.tapNodes = new Map() this.tapNodes = new Map()
@ -1189,15 +1190,15 @@ export class DOMScatter extends AbstractScatter {
button.className = 'interactiveElement' button.className = 'interactiveElement'
this.element.appendChild(button) this.element.appendChild(button)
button.addEventListener('pointerdown', e => { button.addEventListener('pointerdown', (e) => {
this.startResize(e) this.startResize(e)
}) })
button.addEventListener('pointermove', e => { button.addEventListener('pointermove', (e) => {
this.resize(e) this.resize(e)
}) })
button.addEventListener('pointerup', e => { button.addEventListener('pointerup', (e) => {
this.stopResize(e) this.stopResize(e)
}) })
this.resizeButton = button this.resizeButton = button
@ -1214,7 +1215,7 @@ export class DOMScatter extends AbstractScatter {
scale: this.scale, scale: this.scale,
x: this.x, x: this.x,
y: this.y, y: this.y,
rotation: this.rotation rotation: this.rotation,
} }
} }
@ -1265,7 +1266,7 @@ export class DOMScatter extends AbstractScatter {
top: rect.top - stage.top, top: rect.top - stage.top,
left: rect.left - stage.left, left: rect.left - stage.left,
width: rect.width, width: rect.width,
height: rect.height height: rect.height,
} }
} }
@ -1273,10 +1274,10 @@ export class DOMScatter extends AbstractScatter {
let r = this.bounds let r = this.bounds
let w2 = r.width / 2 let w2 = r.width / 2
let h2 = r.height / 2 let h2 = r.height / 2
// if (this.resizable) { // if (this.resizable) {
// w2 *= this.scale // w2 *= this.scale
// h2 *= this.scale // h2 *= this.scale
// } // }
var x = r.left + w2 var x = r.left + w2
var y = r.top + h2 var y = r.top + h2
return { x, y } return { x, y }
@ -1306,7 +1307,7 @@ export class DOMScatter extends AbstractScatter {
set scale(scale) { set scale(scale) {
TweenLite.set(this.element, { TweenLite.set(this.element, {
scale: scale, scale: scale,
transformOrigin: this.transformOrigin transformOrigin: this.transformOrigin,
}) })
this._scale = scale this._scale = scale
} }
@ -1338,9 +1339,9 @@ export class DOMScatter extends AbstractScatter {
hide() { hide() {
TweenLite.to(this.element, 0.1, { TweenLite.to(this.element, 0.1, {
display: 'none', display: 'none',
onComplete: e => { onComplete: (e) => {
this.element.parentNode.removeChild(this.element) this.element.parentNode.removeChild(this.element)
} },
}) })
} }
@ -1354,7 +1355,7 @@ export class DOMScatter extends AbstractScatter {
x: p.x, x: p.x,
y: p.y, y: p.y,
rotation: rotationDegrees, rotation: rotationDegrees,
transformOrigin: this.transformOrigin transformOrigin: this.transformOrigin,
}) })
} }
@ -1396,7 +1397,7 @@ export class DOMScatter extends AbstractScatter {
} }
this._x = x this._x = x
this._y = y this._y = y
// this.addVelocity({ x: delta.x, y: delta.y }) uo: reverted commit fa0256d782dd498c6d3e51321260ca375ca9f855 // this.addVelocity({ x: delta.x, y: delta.y }) uo: reverted commit fa0256d782dd498c6d3e51321260ca375ca9f855
TweenLite.set(this.element, { x, y }) TweenLite.set(this.element, { x, y })
} }
@ -1415,7 +1416,7 @@ export class DOMScatter extends AbstractScatter {
let oldPostition = { let oldPostition = {
x: this.element.getBoundingClientRect().left, x: this.element.getBoundingClientRect().left,
y: this.element.getBoundingClientRect().top y: this.element.getBoundingClientRect().top,
} }
this.bringToFront() this.bringToFront()
@ -1423,7 +1424,7 @@ export class DOMScatter extends AbstractScatter {
let newPostition = { let newPostition = {
x: this.element.getBoundingClientRect().left, x: this.element.getBoundingClientRect().left,
y: this.element.getBoundingClientRect().top y: this.element.getBoundingClientRect().top,
} }
let offset = Points.subtract(oldPostition, newPostition) let offset = Points.subtract(oldPostition, newPostition)
@ -1468,7 +1469,7 @@ export class DOMScatter extends AbstractScatter {
) )
TweenLite.to(this.element, 0, { TweenLite.to(this.element, 0, {
width: this.element.offsetWidth + resizeW / this.scale, width: this.element.offsetWidth + resizeW / this.scale,
height: this.element.offsetHeight + resizeH / this.scale height: this.element.offsetHeight + resizeH / this.scale,
}) })
this.oldX = e.clientX this.oldX = e.clientX
@ -1485,12 +1486,12 @@ export class DOMScatter extends AbstractScatter {
let event = new CustomEvent('resizeEnded') let event = new CustomEvent('resizeEnded')
let oldPostition = { let oldPostition = {
x: this.element.getBoundingClientRect().left, x: this.element.getBoundingClientRect().left,
y: this.element.getBoundingClientRect().top y: this.element.getBoundingClientRect().top,
} }
this.element.style.transformOrigin = '50% 50%' this.element.style.transformOrigin = '50% 50%'
let newPostition = { let newPostition = {
x: this.element.getBoundingClientRect().left, x: this.element.getBoundingClientRect().left,
y: this.element.getBoundingClientRect().top y: this.element.getBoundingClientRect().top,
} }
let offset = Points.subtract(oldPostition, newPostition) let offset = Points.subtract(oldPostition, newPostition)
@ -1503,4 +1504,4 @@ export class DOMScatter extends AbstractScatter {
} }
} }
DOMScatter.zIndex = 1000 DOMScatter.zIndex = 1000

68
lib/uitest.js
View File

@ -43,7 +43,7 @@ export default class UITest {
timeScale: 1, timeScale: 1,
eventType: 'auto', eventType: 'auto',
debug: false, debug: false,
defaultInterval: null defaultInterval: null,
}, },
opts opts
) )
@ -54,7 +54,7 @@ export default class UITest {
Object.assign( Object.assign(
{}, {},
{ {
paused: true paused: true,
}, },
this.opts this.opts
) )
@ -172,7 +172,7 @@ export default class UITest {
element, element,
position, position,
timelinePosition, timelinePosition,
opts opts,
}) })
// opts // opts
@ -186,7 +186,7 @@ export default class UITest {
eventType: null, eventType: null,
context: window, context: window,
bubbles: true, bubbles: true,
cancelable: true cancelable: true,
}, },
opts opts
) )
@ -199,7 +199,7 @@ export default class UITest {
// timeline // timeline
//-------------------- //--------------------
this._timeline.addCallback( this._timeline.addCallback(
position => { (position) => {
// element // element
//-------------------- //--------------------
const elem = Util.extractElement(opts.context, element) const elem = Util.extractElement(opts.context, element)
@ -226,7 +226,7 @@ export default class UITest {
//-------------------- //--------------------
const eventOpts = { const eventOpts = {
bubbles: opts.bubbles, bubbles: opts.bubbles,
cancelable: opts.cancelable cancelable: opts.cancelable,
} }
if (opts.eventTypes[0]) { if (opts.eventTypes[0]) {
@ -295,7 +295,7 @@ export default class UITest {
element, element,
position, position,
timelinePosition, timelinePosition,
opts opts,
}) })
// opts // opts
@ -312,7 +312,7 @@ export default class UITest {
eventTypes: this.resolveEvents(['down', 'move', 'up']), eventTypes: this.resolveEvents(['down', 'move', 'up']),
context: window, context: window,
bubbles: true, bubbles: true,
cancelable: true cancelable: true,
}, },
opts opts
) )
@ -320,7 +320,7 @@ export default class UITest {
// timeline // timeline
//-------------------- //--------------------
this._timeline.addCallback( this._timeline.addCallback(
position => { (position) => {
// element // element
//-------------------- //--------------------
const elem = Util.extractElement(opts.context, element) const elem = Util.extractElement(opts.context, element)
@ -333,7 +333,7 @@ export default class UITest {
//-------------------- //--------------------
const eventOpts = { const eventOpts = {
bubbles: opts.bubbles, bubbles: opts.bubbles,
cancelable: opts.cancelable cancelable: opts.cancelable,
} }
const gsOpts = { const gsOpts = {
@ -376,7 +376,7 @@ export default class UITest {
if (opts.onComplete) { if (opts.onComplete) {
opts.onComplete.call(this, event) opts.onComplete.call(this, event)
} }
} },
} }
// to // to
@ -431,7 +431,7 @@ export default class UITest {
element, element,
position, position,
timelinePosition, timelinePosition,
opts opts,
}) })
// opts // opts
@ -451,7 +451,7 @@ export default class UITest {
eventTypes: this.resolveEvents(['down', 'move', 'up']), eventTypes: this.resolveEvents(['down', 'move', 'up']),
context: window, context: window,
bubbles: true, bubbles: true,
cancelable: true cancelable: true,
}, },
opts opts
) )
@ -459,7 +459,7 @@ export default class UITest {
// timeline // timeline
//-------------------- //--------------------
this._timeline.addCallback( this._timeline.addCallback(
position => { (position) => {
// element // element
//-------------------- //--------------------
const elem = Util.extractElement(opts.context, element) const elem = Util.extractElement(opts.context, element)
@ -511,7 +511,7 @@ export default class UITest {
bubbles: opts.bubbles, bubbles: opts.bubbles,
cancelable: opts.cancelable, cancelable: opts.cancelable,
pointerId: key, pointerId: key,
isPrimary: key === 0 isPrimary: key === 0,
} }
const gsOpts = { const gsOpts = {
@ -554,7 +554,7 @@ export default class UITest {
if (opts.onComplete && (opts.doubleCallbacks || key === 0)) { if (opts.onComplete && (opts.doubleCallbacks || key === 0)) {
opts.onComplete.call(this, event) opts.onComplete.call(this, event)
} }
} },
} }
// to // to
@ -689,7 +689,7 @@ export default class UITest {
const data = [] const data = []
if (this.opts.eventType === 'pointer') { if (this.opts.eventType === 'pointer') {
events.forEach(it => { events.forEach((it) => {
if (it === 'down') { if (it === 'down') {
data.push('pointerdown') data.push('pointerdown')
} else if (it === 'move') { } else if (it === 'move') {
@ -699,7 +699,7 @@ export default class UITest {
} }
}) })
} else if (this.opts.eventType === 'touch') { } else if (this.opts.eventType === 'touch') {
events.forEach(it => { events.forEach((it) => {
if (it === 'down') { if (it === 'down') {
data.push('touchstart') data.push('touchstart')
} else if (it === 'move') { } else if (it === 'move') {
@ -709,7 +709,7 @@ export default class UITest {
} }
}) })
} else { } else {
events.forEach(it => { events.forEach((it) => {
if (it === 'down') { if (it === 'down') {
data.push('mousedown') data.push('mousedown')
} else if (it === 'move') { } else if (it === 'move') {
@ -797,11 +797,11 @@ class Util {
if (Array.isArray(opts.bezier)) { if (Array.isArray(opts.bezier)) {
bezier = { bezier = {
values: opts.bezier.map(it => Util.extractPosition(it)), values: opts.bezier.map((it) => Util.extractPosition(it)),
type: 'thru' type: 'thru',
} }
} else { } else {
opts.bezier.values = opts.bezier.values.map(it => Util.extractPosition(it)) opts.bezier.values = opts.bezier.values.map((it) => Util.extractPosition(it))
bezier = opts.bezier bezier = opts.bezier
} }
@ -826,29 +826,29 @@ class Util {
const objects = [] const objects = []
if (opts.bezier) { if (opts.bezier) {
opts.bezier.forEach(it => { opts.bezier.forEach((it) => {
let bezier = null let bezier = null
if (Array.isArray(it)) { if (Array.isArray(it)) {
bezier = { bezier = {
values: it.map(it => Util.extractPosition(it)), values: it.map((it) => Util.extractPosition(it)),
type: 'thru' type: 'thru',
} }
} else { } else {
it.values = it.values.map(it => Util.extractPosition(it)) it.values = it.values.map((it) => Util.extractPosition(it))
bezier = it bezier = it
} }
objects.push({ objects.push({
bezier bezier,
}) })
}) })
} else { } else {
opts.to.forEach(it => { opts.to.forEach((it) => {
const to = Util.extractPosition(it) const to = Util.extractPosition(it)
objects.push({ objects.push({
x: to.x, x: to.x,
y: to.y y: to.y,
}) })
}) })
} }
@ -945,13 +945,13 @@ class Event {
const eventOpts = { const eventOpts = {
bubbles: true, bubbles: true,
cancelable: true, cancelable: true,
composed: false composed: false,
} }
// UIEventInit // UIEventInit
const uiEventOpts = { const uiEventOpts = {
detail: 0, detail: 0,
view: window view: window,
} }
// MouseEvent // MouseEvent
@ -967,7 +967,7 @@ class Event {
button: 0, button: 0,
buttons: 1, buttons: 1,
relatedTarget: null, relatedTarget: null,
region: null region: null,
} }
// TouchEvent // TouchEvent
@ -978,7 +978,7 @@ class Event {
ctrlKey: false, ctrlKey: false,
shiftKey: false, shiftKey: false,
altKey: false, altKey: false,
metaKey: false metaKey: false,
} }
// PointerEvent // PointerEvent
@ -992,7 +992,7 @@ class Event {
tiltY: 0, tiltY: 0,
twist: 0, twist: 0,
pointerType: 'touch', pointerType: 'touch',
isPrimary: true isPrimary: true,
} }
if (type.startsWith('pointer')) { if (type.startsWith('pointer')) {

38
lib/utils.js
View File

@ -18,7 +18,7 @@ export function isEmpty(obj) {
* See https://stackoverflow.com/questions/105034/create-guid-uuid-in-javascript/21963136#21963136 * See https://stackoverflow.com/questions/105034/create-guid-uuid-in-javascript/21963136#21963136
*/ */
export function uuid() { export function uuid() {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => { return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
let r = (Math.random() * 16) | 0, let r = (Math.random() * 16) | 0,
v = c == 'x' ? r : (r & 0x3) | 0x8 v = c == 'x' ? r : (r & 0x3) | 0x8
return v.toString(16) return v.toString(16)
@ -100,10 +100,10 @@ export function sample(population, k) {
// Taken from: https://davidwalsh.name/essential-javascript-functions // Taken from: https://davidwalsh.name/essential-javascript-functions
export function debounce(func, wait, immediate) { export function debounce(func, wait, immediate) {
let timeout let timeout
return function() { return function () {
let context = this, let context = this,
args = arguments args = arguments
let later = function() { let later = function () {
timeout = null timeout = null
if (!immediate) func.apply(context, args) if (!immediate) func.apply(context, args)
} }
@ -247,14 +247,14 @@ export class Colors {
// long version // long version
let r = hex.match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i) let r = hex.match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i)
if (r) { if (r) {
return r.slice(1, 4).map(x => { return r.slice(1, 4).map((x) => {
return parseInt(x, 16) return parseInt(x, 16)
}) })
} }
// short version // short version
r = hex.match(/^#([0-9a-f])([0-9a-f])([0-9a-f])$/i) r = hex.match(/^#([0-9a-f])([0-9a-f])([0-9a-f])$/i)
if (r) { if (r) {
return r.slice(1, 4).map(x => { return r.slice(1, 4).map((x) => {
return 0x11 * parseInt(x, 16) return 0x11 * parseInt(x, 16)
}) })
} }
@ -273,7 +273,7 @@ export class Colors {
return { return {
r: Math.round(lerp(rgb1.r, rgb2.r, amount)), r: Math.round(lerp(rgb1.r, rgb2.r, amount)),
g: Math.round(lerp(rgb1.g, rgb2.g, amount)), g: Math.round(lerp(rgb1.g, rgb2.g, amount)),
b: Math.round(lerp(rgb1.b, rgb2.b, amount)) b: Math.round(lerp(rgb1.b, rgb2.b, amount)),
} }
} }
@ -384,7 +384,7 @@ export class Points {
static arc(p, alpha, radius) { static arc(p, alpha, radius) {
return { return {
x: p.x + radius * Math.cos(alpha), x: p.x + radius * Math.cos(alpha),
y: p.y + radius * Math.sin(alpha) y: p.y + radius * Math.sin(alpha),
} }
} }
@ -411,19 +411,17 @@ export class Points {
} }
static fromPageToNode(element, p) { static fromPageToNode(element, p) {
// if (window.webkitConvertPointFromPageToNode) { if (window.webkitConvertPointFromPageToNode) {
// return window.webkitConvertPointFromPageToNode(element, return window.webkitConvertPointFromPageToNode(element, new WebKitPoint(p.x, p.y))
// new WebKitPoint(p.x, p.y)) }
// } //return window.convertPointFromPageToNode(element, p.x, p.y)
return window.convertPointFromPageToNode(element, p.x, p.y)
} }
static fromNodeToPage(element, p) { static fromNodeToPage(element, p) {
// if (window.webkitConvertPointFromNodeToPage) { if (window.webkitConvertPointFromNodeToPage) {
// return window.webkitConvertPointFromNodeToPage(element, return window.webkitConvertPointFromNodeToPage(element, new WebKitPoint(p.x, p.y))
// new WebKitPoint(p.x, p.y)) }
// } //return window.convertPointFromNodeToPage(element, p.x, p.y)
return window.convertPointFromNodeToPage(element, p.x, p.y)
} }
} }
@ -447,7 +445,7 @@ export class Sets {
const i = sets.reduce((m, s, i) => (s.size < sets[m].size ? i : m), 0) const i = sets.reduce((m, s, i) => (s.size < sets[m].size ? i : m), 0)
const [smallest] = sets.splice(i, 1) const [smallest] = sets.splice(i, 1)
const res = new Set() const res = new Set()
for (let val of smallest) if (sets.every(s => s.has(val))) res.add(val) for (let val of smallest) if (sets.every((s) => s.has(val))) res.add(val)
return res return res
} }
@ -930,14 +928,14 @@ export class Strings {
static toUpperCaseEachWord(str, delim = ' ') { static toUpperCaseEachWord(str, delim = ' ') {
return str return str
.split(delim) .split(delim)
.map(v => v.toUpperCaseFirstChar()) .map((v) => v.toUpperCaseFirstChar())
.join(delim) .join(delim)
} }
static toLowerCaseEachWord(str, delim = ' ') { static toLowerCaseEachWord(str, delim = ' ') {
return str return str
.split(delim) .split(delim)
.map(v => v.toLowerCaseFirstChar()) .map((v) => v.toLowerCaseFirstChar())
.join(delim) .join(delim)
} }
} }

20940
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

32
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "iwmlib", "name": "iwmlib",
"version": "1.1.2", "version": "2.0.0-beta.0",
"description": "An Open Source library for multi-touch, WebGL powered applications.", "description": "An Open Source library for multi-touch, WebGL powered applications.",
"main": "index.js", "main": "index.js",
"directories": { "directories": {
@ -28,33 +28,33 @@
"license": "LGPL-3.0-or-later", "license": "LGPL-3.0-or-later",
"devDependencies": { "devDependencies": {
"@pixi/jsdoc-template": "^2.5.1", "@pixi/jsdoc-template": "^2.5.1",
"eslint": "^6.8.0", "eslint": "^8.23.1",
"eslint-config-prettier": "^6.9.0", "eslint-config-prettier": "^8.5.0",
"eslint-plugin-prettier": "^3.1.2", "eslint-plugin-prettier": "^4.2.1",
"fs-extra": "^8.0.1", "fs-extra": "^10.1.0",
"gulp": "^4.0.2", "gulp": "^4.0.2",
"gulp-concat": "^2.6.1", "gulp-concat": "^2.6.1",
"gulp-prettier": "^2.3.0", "gulp-prettier": "^4.0.0",
"gulp-rename": "^1.4.0", "gulp-rename": "^2.0.0",
"gulp-replace": "^1.0.0", "gulp-replace": "^1.0.0",
"gulp-uglify": "^3.0.2", "gulp-uglify": "^3.0.2",
"htmlhint": "^0.11.0", "htmlhint": "^1.1.4",
"prettier": "^1.19.1", "prettier": "^2.7.1",
"puppeteer": "^1.20.0", "puppeteer": "^17.1.3",
"stylelint": "^11.1.1", "stylelint": "^14.12.0",
"stylelint-config-standard": "^19.0.0" "stylelint-config-standard": "^28.0.0"
}, },
"dependencies": { "dependencies": {
"gsap": "^2.1.3", "gsap": "^2.1.3",
"hammerjs": "^2.0.8", "hammerjs": "^2.0.8",
"optimal-select": "^4.0.1", "optimal-select": "^4.0.1",
"pixi-compressed-textures": "^2.0.5", "pixi-compressed-textures": "^2.0.5",
"pixi-ease": "^2.4.2", "pixi-ease": "^3.0.7",
"pixi-filters": "^3.0.3", "pixi-filters": "^4.2.0",
"pixi-particles": "^4.2.0", "pixi-particles": "^4.2.0",
"pixi-projection": "^0.3.7", "pixi-projection": "^0.4.4",
"pixi-viewport": "^4.8.0", "pixi-viewport": "^4.8.0",
"pixi.js": "^5.2.1", "pixi.js": "^6.5.3",
"propagating-hammerjs": "^1.4.7" "propagating-hammerjs": "^1.4.7"
} }
} }