Initial commit 2.0 beta 0

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

View File

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

View File

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

97465
dist/iwmlib.3rdparty.js vendored

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

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

File diff suppressed because one or more lines are too long

736
dist/iwmlib.js vendored

File diff suppressed because it is too large Load Diff

705
dist/iwmlib.pixi.js vendored

File diff suppressed because it is too large Load Diff

View File

@ -11,12 +11,12 @@ function vendors() {
'./node_modules/optimal-select/dist/optimal-select.js',
'./node_modules/hammerjs/hammer.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/dist/pixi-compressed-textures.js',
'./node_modules/pixi-filters/dist/pixi-filters.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/TimelineMax.js',
'./lib/3rdparty/jquery.js',

View File

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

10
lib/bootstrap.js vendored
View File

@ -122,17 +122,17 @@ class Bootstrap extends Object {
baseURL: baseUrl,
map: {
'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',
meta: {
'*.js': {
authorization: true,
babelOptions: {
es2015: false
}
}
}
es2015: false,
},
},
},
}
}

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -65,7 +65,7 @@ export default class Events {
clientX: t.clientX,
clientY: t.clientY,
pageX: t.pageX,
pageY: t.pageY
pageY: t.pageY,
})
}
return touches
@ -105,8 +105,8 @@ export default class Events {
ctrlKey: event.ctrlKey,
altKey: event.altKey,
shiftKey: event.shiftKey,
metaKey: event.metaKey
}
metaKey: event.metaKey,
},
}
if (event.type.startsWith('touch')) {
// On Safari-WebKit the TouchEvent has layerX, layerY coordinates
@ -219,7 +219,7 @@ export default class Events {
width: '480px',
height: '640px',
overflow: 'auto',
backgroundColor: 'lightgray'
backgroundColor: 'lightgray',
})
document.body.appendChild(element)
this.popup = element
@ -240,7 +240,7 @@ export default class Events {
}
Elements.setStyle(this.popup, {
left: event.clientX + 'px',
top: event.clientY + 'px'
top: event.clientY + 'px',
})
}
}

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -126,7 +126,7 @@ export default class ButtonGroup extends PIXI.Container {
orientation: 'horizontal',
align: 'center', // left, center, right
verticalAlign: 'middle', // top, middle, bottom
visible: true
visible: true,
},
opts
)
@ -216,7 +216,7 @@ export default class ButtonGroup extends PIXI.Container {
it.verticalAlign = it.verticalAlign || this.opts.verticalAlign
it.afterAction = (event, button) => {
if (this.opts.type === 'radio' && button.opts.type === 'default') {
this.buttons.forEach(it => {
this.buttons.forEach((it) => {
if (it.opts.type === 'default') {
it.active = false
}
@ -243,7 +243,7 @@ export default class ButtonGroup extends PIXI.Container {
button.__originalPosition = {
x: button.x,
y: button.y
y: button.y,
}
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') {
const maxWidth = this.getMaxButtonWidth()
this.buttons.forEach(it => {
this.buttons.forEach((it) => {
it.opts.minWidth = maxWidth
it.layout()
})
@ -283,7 +283,7 @@ export default class ButtonGroup extends PIXI.Container {
//--------------------
if (this.opts.app) {
const app = this.opts.app
app.view.addEventListener('mousewheel', event => {
app.view.addEventListener('mousewheel', (event) => {
const bounds = this.getBounds()
const x = event.clientX - app.view.getBoundingClientRect().left
const y = event.clientY - app.view.getBoundingClientRect().top
@ -338,7 +338,7 @@ export default class ButtonGroup extends PIXI.Container {
*/
draw() {
if (this.opts.margin === 0) {
this.buttons.forEach(it => it.hide())
this.buttons.forEach((it) => it.hide())
this.container.clear()
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) {
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.
*/
getMaxButtonWidth() {
let widths = this.buttons.map(it => it.width)
let widths = this.buttons.map((it) => it.width)
return Math.max(...widths)
}
@ -459,7 +459,7 @@ export default class ButtonGroup extends PIXI.Container {
this.__delta = {
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 })
@ -539,7 +539,7 @@ export default class ButtonGroup extends PIXI.Container {
throwProps,
ease: Strong.easeOut,
onUpdate: () => this.stack(),
onComplete: () => ThrowPropsPlugin.untrack(this.container.position)
onComplete: () => ThrowPropsPlugin.untrack(this.container.position),
},
0.8,
0.4
@ -635,8 +635,8 @@ export default class ButtonGroup extends PIXI.Container {
sorted.push(it)
})
const min = Math.min(...sorted.map(it => it.x))
const max = Math.max(...sorted.map(it => it.x + it.button.width))
const min = Math.min(...sorted.map((it) => it.x))
const max = Math.max(...sorted.map((it) => it.x + it.button.width))
const center = (min + max) / 2
// z-index
@ -661,7 +661,7 @@ export default class ButtonGroup extends PIXI.Container {
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)
})
const min = Math.min(...sorted.map(it => it.y))
const max = Math.max(...sorted.map(it => it.y + it.button.height))
const min = Math.min(...sorted.map((it) => it.y))
const max = Math.max(...sorted.map((it) => it.y + it.button.height))
const center = (min + max) / 2
// z-index
@ -718,6 +718,6 @@ export default class ButtonGroup extends PIXI.Container {
return 0
})
.forEach(it => it.parent.addChild(it))
.forEach((it) => it.parent.addChild(it))
}
}

View File

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

View File

@ -40,7 +40,7 @@ export class TileLoader {
if (this.loaded.has(url)) this.loaded.delete(url)
if (this.loading.has(url)) this.loading.delete(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 **/
@ -246,7 +246,7 @@ export class RequestTileLoader extends TileLoader {
let xhr = new XMLHttpRequest()
xhr.open('GET', url, false)
xhr.responseType = 'arraybuffer'
xhr.onload = e => {
xhr.onload = (e) => {
let CompressedImage = PIXI.compressedTextures.CompressedImage
let compressed = CompressedImage.loadFromArrayBuffer(xhr.response, url)
let base = new PIXI.BaseTexture(compressed)
@ -320,7 +320,7 @@ export class WorkerTileLoader extends TileLoader {
let worker = (this.worker = new Worker(workerPath))
worker.onmessage = event => {
worker.onmessage = (event) => {
if (event.data.success) {
let { url, col, row, buffer } = event.data
//console.log("WorkerTileLoader.loaded", url, buffer)

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -54,7 +54,7 @@ export default class List extends PIXI.Container {
verticalAlign: 'middle',
width: null,
height: null,
app: null
app: null,
},
opts
)
@ -107,7 +107,7 @@ export default class List extends PIXI.Container {
//--------------------
if (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 x = event.clientX - app.view.getBoundingClientRect().left
const y = event.clientY - app.view.getBoundingClientRect().top
@ -165,13 +165,13 @@ export default class List extends PIXI.Container {
if (this.opts.orientation === 'vertical') {
switch (this.opts.align) {
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
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
default:
this.__items.forEach(it => (it.x = margin))
this.__items.forEach((it) => (it.x = margin))
break
}
@ -191,13 +191,13 @@ export default class List extends PIXI.Container {
if (this.opts.orientation === 'horizontal') {
switch (this.opts.verticalAlign) {
case 'top':
this.__items.forEach(it => (it.y = margin))
this.__items.forEach((it) => (it.y = margin))
break
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
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
}
@ -221,7 +221,7 @@ export default class List extends PIXI.Container {
get innerWidth() {
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 += 2 * this.opts.margin
@ -234,7 +234,7 @@ export default class List extends PIXI.Container {
get innerHeight() {
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 += 2 * this.opts.margin
@ -268,7 +268,7 @@ export default class List extends PIXI.Container {
this.__delta = {
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 })
@ -313,7 +313,7 @@ export default class List extends PIXI.Container {
throwProps.x = {
velocity: 'auto',
min,
max: 0
max: 0,
}
} else {
let min = this.opts.height - this.innerHeight
@ -321,7 +321,7 @@ export default class List extends PIXI.Container {
throwProps.y = {
velocity: 'auto',
min,
max: 0
max: 0,
}
}
@ -331,7 +331,7 @@ export default class List extends PIXI.Container {
{
throwProps,
ease: Strong.easeOut,
onComplete: () => ThrowPropsPlugin.untrack(this.container.position)
onComplete: () => ThrowPropsPlugin.untrack(this.container.position),
},
0.8,
0.4

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -18,7 +18,7 @@ export function isEmpty(obj) {
* See https://stackoverflow.com/questions/105034/create-guid-uuid-in-javascript/21963136#21963136
*/
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,
v = c == 'x' ? r : (r & 0x3) | 0x8
return v.toString(16)
@ -100,10 +100,10 @@ export function sample(population, k) {
// Taken from: https://davidwalsh.name/essential-javascript-functions
export function debounce(func, wait, immediate) {
let timeout
return function() {
return function () {
let context = this,
args = arguments
let later = function() {
let later = function () {
timeout = null
if (!immediate) func.apply(context, args)
}
@ -247,14 +247,14 @@ export class Colors {
// long version
let r = hex.match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i)
if (r) {
return r.slice(1, 4).map(x => {
return r.slice(1, 4).map((x) => {
return parseInt(x, 16)
})
}
// short version
r = hex.match(/^#([0-9a-f])([0-9a-f])([0-9a-f])$/i)
if (r) {
return r.slice(1, 4).map(x => {
return r.slice(1, 4).map((x) => {
return 0x11 * parseInt(x, 16)
})
}
@ -273,7 +273,7 @@ export class Colors {
return {
r: Math.round(lerp(rgb1.r, rgb2.r, 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) {
return {
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) {
// if (window.webkitConvertPointFromPageToNode) {
// return window.webkitConvertPointFromPageToNode(element,
// new WebKitPoint(p.x, p.y))
// }
return window.convertPointFromPageToNode(element, p.x, p.y)
if (window.webkitConvertPointFromPageToNode) {
return window.webkitConvertPointFromPageToNode(element, new WebKitPoint(p.x, p.y))
}
//return window.convertPointFromPageToNode(element, p.x, p.y)
}
static fromNodeToPage(element, p) {
// if (window.webkitConvertPointFromNodeToPage) {
// return window.webkitConvertPointFromNodeToPage(element,
// new WebKitPoint(p.x, p.y))
// }
return window.convertPointFromNodeToPage(element, p.x, p.y)
if (window.webkitConvertPointFromNodeToPage) {
return window.webkitConvertPointFromNodeToPage(element, new WebKitPoint(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 [smallest] = sets.splice(i, 1)
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
}
@ -930,14 +928,14 @@ export class Strings {
static toUpperCaseEachWord(str, delim = ' ') {
return str
.split(delim)
.map(v => v.toUpperCaseFirstChar())
.map((v) => v.toUpperCaseFirstChar())
.join(delim)
}
static toLowerCaseEachWord(str, delim = ' ') {
return str
.split(delim)
.map(v => v.toLowerCaseFirstChar())
.map((v) => v.toLowerCaseFirstChar())
.join(delim)
}
}

20940
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

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