Initial commit 2.0 beta 0
This commit is contained in:
parent
f87b19140b
commit
c5c2759ebd
|
@ -28,5 +28,8 @@
|
||||||
"plugins": [
|
"plugins": [
|
||||||
"prettier"
|
"prettier"
|
||||||
],
|
],
|
||||||
"extends": ["eslint:recommended", "plugin:prettier/recommended"]
|
"extends": ["eslint:recommended", "plugin:prettier/recommended"],
|
||||||
|
"rules": {
|
||||||
|
"comma-dangle": ["error", "never"]
|
||||||
|
}
|
||||||
}
|
}
|
|
@ -3,5 +3,6 @@
|
||||||
"jsxSingleQuote": true,
|
"jsxSingleQuote": true,
|
||||||
"tabWidth": 4,
|
"tabWidth": 4,
|
||||||
"semi": false,
|
"semi": false,
|
||||||
"printWidth": 120
|
"printWidth": 120,
|
||||||
|
"trailingComma": "none"
|
||||||
}
|
}
|
||||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -8119,10 +8119,10 @@ if (_gsScope._gsDefine) { _gsScope._gsQueue.pop()(); } //necessary in case Tween
|
||||||
css transforms without perspective projection)
|
css transforms without perspective projection)
|
||||||
*/
|
*/
|
||||||
|
|
||||||
(function () {
|
;(function () {
|
||||||
'use strict'
|
'use strict'
|
||||||
|
|
||||||
var I = (typeof(WebKitCSSMatrix) == 'undefined') ? new DOMMatrix() : new WebKitCSSMatrix()
|
var I = typeof WebKitCSSMatrix == 'undefined' ? new DOMMatrix() : new WebKitCSSMatrix()
|
||||||
|
|
||||||
function Point(x, y, z) {
|
function Point(x, y, z) {
|
||||||
this.x = x
|
this.x = x
|
||||||
|
@ -8137,8 +8137,8 @@ if (_gsScope._gsDefine) { _gsScope._gsQueue.pop()(); } //necessary in case Tween
|
||||||
|
|
||||||
function createMatrix(transform) {
|
function createMatrix(transform) {
|
||||||
try {
|
try {
|
||||||
return (typeof(WebKitCSSMatrix) == 'undefined') ? new DOMMatrix(transform) : new WebKitCSSMatrix(transform)
|
return typeof WebKitCSSMatrix == 'undefined' ? new DOMMatrix(transform) : new WebKitCSSMatrix(transform)
|
||||||
} catch(e) {
|
} catch (e) {
|
||||||
console.warn(transform)
|
console.warn(transform)
|
||||||
console.warn(e.toString())
|
console.warn(e.toString())
|
||||||
return I
|
return I
|
||||||
|
@ -8163,8 +8163,9 @@ if (_gsScope._gsDefine) { _gsScope._gsQueue.pop()(); } //necessary in case Tween
|
||||||
var left = +Infinity
|
var left = +Infinity
|
||||||
var top = +Infinity
|
var top = +Infinity
|
||||||
while (--i >= 0) {
|
while (--i >= 0) {
|
||||||
var p = new Point(i === 0 || i === 1 ? 0 : w, i === 0 || i === 3 ? 0 : h,
|
var p = new Point(i === 0 || i === 1 ? 0 : w, i === 0 || i === 3 ? 0 : h, 0).transformBy(
|
||||||
0).transformBy(transformationMatrix)
|
transformationMatrix
|
||||||
|
)
|
||||||
if (p.x < left) {
|
if (p.x < left) {
|
||||||
left = p.x
|
left = p.x
|
||||||
}
|
}
|
||||||
|
@ -8173,20 +8174,19 @@ if (_gsScope._gsDefine) { _gsScope._gsQueue.pop()(); } //necessary in case Tween
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
var rect = element.getBoundingClientRect()
|
var rect = element.getBoundingClientRect()
|
||||||
transformationMatrix = I.translate(window.pageXOffset + rect.left - left,
|
transformationMatrix = I.translate(
|
||||||
window.pageYOffset + rect.top - top, 0)
|
window.pageXOffset + rect.left - left,
|
||||||
.multiply(transformationMatrix)
|
window.pageYOffset + rect.top - top,
|
||||||
|
0
|
||||||
|
).multiply(transformationMatrix)
|
||||||
return transformationMatrix
|
return transformationMatrix
|
||||||
}
|
}
|
||||||
|
|
||||||
window.convertPointFromPageToNode = function (element, pageX, pageY) {
|
window.convertPointFromPageToNode = function (element, pageX, pageY) {
|
||||||
return new Point(pageX, pageY, 0).transformBy(
|
return new Point(pageX, pageY, 0).transformBy(getTransformationMatrix(element).inverse())
|
||||||
getTransformationMatrix(element).inverse())
|
|
||||||
}
|
}
|
||||||
|
|
||||||
window.convertPointFromNodeToPage = function (element, offsetX, offsetY) {
|
window.convertPointFromNodeToPage = function (element, offsetX, offsetY) {
|
||||||
return new Point(offsetX, offsetY, 0).transformBy(
|
return new Point(offsetX, offsetY, 0).transformBy(getTransformationMatrix(element))
|
||||||
getTransformationMatrix(element))
|
|
||||||
}
|
}
|
||||||
|
})()
|
||||||
}());
|
|
||||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
@ -11,12 +11,12 @@ function vendors() {
|
||||||
'./node_modules/optimal-select/dist/optimal-select.js',
|
'./node_modules/optimal-select/dist/optimal-select.js',
|
||||||
'./node_modules/hammerjs/hammer.js',
|
'./node_modules/hammerjs/hammer.js',
|
||||||
'./node_modules/propagating-hammerjs/propagating.js',
|
'./node_modules/propagating-hammerjs/propagating.js',
|
||||||
'./node_modules/pixi.js/dist/pixi.js',
|
'./node_modules/pixi.js/dist/browser/pixi.js',
|
||||||
'./node_modules/pixi-compressed-textures/lib/crn_decomp.js',
|
'./node_modules/pixi-compressed-textures/lib/crn_decomp.js',
|
||||||
'./node_modules/pixi-compressed-textures/dist/pixi-compressed-textures.js',
|
'./node_modules/pixi-compressed-textures/dist/pixi-compressed-textures.js',
|
||||||
'./node_modules/pixi-filters/dist/pixi-filters.js',
|
'./node_modules/pixi-filters/dist/pixi-filters.js',
|
||||||
'./node_modules/pixi-particles/dist/pixi-particles.js',
|
'./node_modules/pixi-particles/dist/pixi-particles.js',
|
||||||
'./node_modules/pixi-projection/dist/pixi-projection.js',
|
'./node_modules/pixi-projection/dist/pixi-projection.umd.js',
|
||||||
'./node_modules/gsap/src/uncompressed/TweenMax.js',
|
'./node_modules/gsap/src/uncompressed/TweenMax.js',
|
||||||
'./node_modules/gsap/src/uncompressed/TimelineMax.js',
|
'./node_modules/gsap/src/uncompressed/TimelineMax.js',
|
||||||
'./lib/3rdparty/jquery.js',
|
'./lib/3rdparty/jquery.js',
|
||||||
|
|
|
@ -10,10 +10,10 @@
|
||||||
css transforms without perspective projection)
|
css transforms without perspective projection)
|
||||||
*/
|
*/
|
||||||
|
|
||||||
(function () {
|
;(function () {
|
||||||
'use strict'
|
'use strict'
|
||||||
|
|
||||||
var I = (typeof(WebKitCSSMatrix) == 'undefined') ? new DOMMatrix() : new WebKitCSSMatrix()
|
var I = typeof WebKitCSSMatrix == 'undefined' ? new DOMMatrix() : new WebKitCSSMatrix()
|
||||||
|
|
||||||
function Point(x, y, z) {
|
function Point(x, y, z) {
|
||||||
this.x = x
|
this.x = x
|
||||||
|
@ -28,8 +28,8 @@
|
||||||
|
|
||||||
function createMatrix(transform) {
|
function createMatrix(transform) {
|
||||||
try {
|
try {
|
||||||
return (typeof(WebKitCSSMatrix) == 'undefined') ? new DOMMatrix(transform) : new WebKitCSSMatrix(transform)
|
return typeof WebKitCSSMatrix == 'undefined' ? new DOMMatrix(transform) : new WebKitCSSMatrix(transform)
|
||||||
} catch(e) {
|
} catch (e) {
|
||||||
console.warn(transform)
|
console.warn(transform)
|
||||||
console.warn(e.toString())
|
console.warn(e.toString())
|
||||||
return I
|
return I
|
||||||
|
@ -54,8 +54,9 @@
|
||||||
var left = +Infinity
|
var left = +Infinity
|
||||||
var top = +Infinity
|
var top = +Infinity
|
||||||
while (--i >= 0) {
|
while (--i >= 0) {
|
||||||
var p = new Point(i === 0 || i === 1 ? 0 : w, i === 0 || i === 3 ? 0 : h,
|
var p = new Point(i === 0 || i === 1 ? 0 : w, i === 0 || i === 3 ? 0 : h, 0).transformBy(
|
||||||
0).transformBy(transformationMatrix)
|
transformationMatrix
|
||||||
|
)
|
||||||
if (p.x < left) {
|
if (p.x < left) {
|
||||||
left = p.x
|
left = p.x
|
||||||
}
|
}
|
||||||
|
@ -64,20 +65,19 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
var rect = element.getBoundingClientRect()
|
var rect = element.getBoundingClientRect()
|
||||||
transformationMatrix = I.translate(window.pageXOffset + rect.left - left,
|
transformationMatrix = I.translate(
|
||||||
window.pageYOffset + rect.top - top, 0)
|
window.pageXOffset + rect.left - left,
|
||||||
.multiply(transformationMatrix)
|
window.pageYOffset + rect.top - top,
|
||||||
|
0
|
||||||
|
).multiply(transformationMatrix)
|
||||||
return transformationMatrix
|
return transformationMatrix
|
||||||
}
|
}
|
||||||
|
|
||||||
window.convertPointFromPageToNode = function (element, pageX, pageY) {
|
window.convertPointFromPageToNode = function (element, pageX, pageY) {
|
||||||
return new Point(pageX, pageY, 0).transformBy(
|
return new Point(pageX, pageY, 0).transformBy(getTransformationMatrix(element).inverse())
|
||||||
getTransformationMatrix(element).inverse())
|
|
||||||
}
|
}
|
||||||
|
|
||||||
window.convertPointFromNodeToPage = function (element, offsetX, offsetY) {
|
window.convertPointFromNodeToPage = function (element, offsetX, offsetY) {
|
||||||
return new Point(offsetX, offsetY, 0).transformBy(
|
return new Point(offsetX, offsetY, 0).transformBy(getTransformationMatrix(element))
|
||||||
getTransformationMatrix(element))
|
|
||||||
}
|
}
|
||||||
|
})()
|
||||||
}());
|
|
||||||
|
|
|
@ -122,17 +122,17 @@ class Bootstrap extends Object {
|
||||||
baseURL: baseUrl,
|
baseURL: baseUrl,
|
||||||
map: {
|
map: {
|
||||||
'plugin-babel': baseUrl + '/3rdparty/systemjs/plugin-babel.js',
|
'plugin-babel': baseUrl + '/3rdparty/systemjs/plugin-babel.js',
|
||||||
'systemjs-babel-build': baseUrl + '/3rdparty/systemjs/systemjs-babel-browser.js'
|
'systemjs-babel-build': baseUrl + '/3rdparty/systemjs/systemjs-babel-browser.js',
|
||||||
},
|
},
|
||||||
transpiler: 'plugin-babel',
|
transpiler: 'plugin-babel',
|
||||||
meta: {
|
meta: {
|
||||||
'*.js': {
|
'*.js': {
|
||||||
authorization: true,
|
authorization: true,
|
||||||
babelOptions: {
|
babelOptions: {
|
||||||
es2015: false
|
es2015: false,
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -22,7 +22,7 @@ import {
|
||||||
InteractionDelta,
|
InteractionDelta,
|
||||||
InteractionMapper,
|
InteractionMapper,
|
||||||
InteractionDelegate,
|
InteractionDelegate,
|
||||||
IInteractionMapperTarget
|
IInteractionMapperTarget,
|
||||||
} from './interaction.js'
|
} from './interaction.js'
|
||||||
import {
|
import {
|
||||||
ITapDelegate,
|
ITapDelegate,
|
||||||
|
@ -31,7 +31,7 @@ import {
|
||||||
AbstractScatter,
|
AbstractScatter,
|
||||||
DOMScatter,
|
DOMScatter,
|
||||||
ScatterEvent,
|
ScatterEvent,
|
||||||
BaseEvent
|
BaseEvent,
|
||||||
} from './scatter.js'
|
} from './scatter.js'
|
||||||
import {
|
import {
|
||||||
Cycle,
|
Cycle,
|
||||||
|
@ -50,7 +50,7 @@ import {
|
||||||
debounce,
|
debounce,
|
||||||
randomInt,
|
randomInt,
|
||||||
randomFloat,
|
randomFloat,
|
||||||
LowPassFilter
|
LowPassFilter,
|
||||||
} from './utils.js'
|
} from './utils.js'
|
||||||
import UITest from './uitest.js'
|
import UITest from './uitest.js'
|
||||||
|
|
||||||
|
|
173
lib/card/card.js
173
lib/card/card.js
|
@ -55,7 +55,7 @@ export default class Card {
|
||||||
context.classList.add('info-card')
|
context.classList.add('info-card')
|
||||||
context.setAttribute('data-id', Card.id++)
|
context.setAttribute('data-id', Card.id++)
|
||||||
|
|
||||||
modules.forEach(module => {
|
modules.forEach((module) => {
|
||||||
if (module.apply(context)) {
|
if (module.apply(context)) {
|
||||||
const moduleName = module.constructor.name
|
const moduleName = module.constructor.name
|
||||||
context.modules.push(moduleName)
|
context.modules.push(moduleName)
|
||||||
|
@ -157,7 +157,7 @@ export default class Card {
|
||||||
*/
|
*/
|
||||||
static _replaceAttributes(context, html, attribute, replaceFunc) {
|
static _replaceAttributes(context, html, attribute, replaceFunc) {
|
||||||
let attributeCarrier = html.querySelectorAll(`[${attribute}]`)
|
let attributeCarrier = html.querySelectorAll(`[${attribute}]`)
|
||||||
attributeCarrier.forEach(element => {
|
attributeCarrier.forEach((element) => {
|
||||||
let attributeVal = element.getAttribute(attribute)
|
let attributeVal = element.getAttribute(attribute)
|
||||||
element.removeAttribute(attribute)
|
element.removeAttribute(attribute)
|
||||||
replaceFunc.call(this, context, element, attributeVal)
|
replaceFunc.call(this, context, element, attributeVal)
|
||||||
|
@ -176,7 +176,7 @@ export default class Card {
|
||||||
*/
|
*/
|
||||||
static _replaceCallback(context, element, attributeVal) {
|
static _replaceCallback(context, element, attributeVal) {
|
||||||
if (element.tagName == 'A') {
|
if (element.tagName == 'A') {
|
||||||
element.addEventListener('pointerdown', event => {
|
element.addEventListener('pointerdown', (event) => {
|
||||||
event.preventDefault()
|
event.preventDefault()
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
@ -189,7 +189,7 @@ export default class Card {
|
||||||
trimmedArgs = trimmedArgs.substring(0, trimmedArgs.length - 1)
|
trimmedArgs = trimmedArgs.substring(0, trimmedArgs.length - 1)
|
||||||
|
|
||||||
let callParts = funcPart.split('.')
|
let callParts = funcPart.split('.')
|
||||||
let argsStrings = trimmedArgs.split(',').filter(entry => {
|
let argsStrings = trimmedArgs.split(',').filter((entry) => {
|
||||||
return entry.trim() != ''
|
return entry.trim() != ''
|
||||||
})
|
})
|
||||||
/**
|
/**
|
||||||
|
@ -218,12 +218,12 @@ export default class Card {
|
||||||
// These are 'hardcoded' inside the convert.js.
|
// These are 'hardcoded' inside the convert.js.
|
||||||
if (element.tagName == 'circle') return false
|
if (element.tagName == 'circle') return false
|
||||||
|
|
||||||
this.registerEvent(context, interactionType, element, event => {
|
this.registerEvent(context, interactionType, element, (event) => {
|
||||||
/**
|
/**
|
||||||
* Replaces the strings from the listener with the corresponding variables.
|
* Replaces the strings from the listener with the corresponding variables.
|
||||||
*/
|
*/
|
||||||
let args = []
|
let args = []
|
||||||
argsStrings.forEach(arg => {
|
argsStrings.forEach((arg) => {
|
||||||
arg = arg.trim()
|
arg = arg.trim()
|
||||||
if (arg == 'this') args.push(event.target)
|
if (arg == 'this') args.push(event.target)
|
||||||
else if (arg == 'event') args.push(event)
|
else if (arg == 'event') args.push(event)
|
||||||
|
@ -269,7 +269,7 @@ export default class Card {
|
||||||
*/
|
*/
|
||||||
return html.replace(
|
return html.replace(
|
||||||
/<\s*(a|video|img|image|circle)\s(.*?)(xlink:href|href|src)\s*=\s*["'](\..*?)["']\s*(.*?)>/g,
|
/<\s*(a|video|img|image|circle)\s(.*?)(xlink:href|href|src)\s*=\s*["'](\..*?)["']\s*(.*?)>/g,
|
||||||
function() {
|
function () {
|
||||||
let path = that._getRelativePath(arguments[4])
|
let path = that._getRelativePath(arguments[4])
|
||||||
const tag = `<${arguments[1]} ${arguments[2]} ${arguments[3]}="${path}" ${arguments[5]}>`
|
const tag = `<${arguments[1]} ${arguments[2]} ${arguments[3]}="${path}" ${arguments[5]}>`
|
||||||
/* if (that.debug) */ console.log('Adjusted: ', tag)
|
/* if (that.debug) */ console.log('Adjusted: ', tag)
|
||||||
|
@ -298,7 +298,7 @@ export default class Card {
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
let request = new XMLHttpRequest()
|
let request = new XMLHttpRequest()
|
||||||
|
|
||||||
request.onreadystatechange = function() {
|
request.onreadystatechange = function () {
|
||||||
if (this.readyState == 4) {
|
if (this.readyState == 4) {
|
||||||
if (this.status == 200 || Card._isLocal()) {
|
if (this.status == 200 || Card._isLocal()) {
|
||||||
try {
|
try {
|
||||||
|
@ -423,7 +423,7 @@ export default class Card {
|
||||||
}
|
}
|
||||||
|
|
||||||
this._createPopup(context, position, content, options)
|
this._createPopup(context, position, content, options)
|
||||||
.then(popup => {
|
.then((popup) => {
|
||||||
if (
|
if (
|
||||||
//Test if meanwhile another popup was registered...
|
//Test if meanwhile another popup was registered...
|
||||||
this._getPopup(context) ||
|
this._getPopup(context) ||
|
||||||
|
@ -441,9 +441,9 @@ export default class Card {
|
||||||
// let unnecessaryPopupElement = popup.element.querySelector(".popupContent > .popup")
|
// let unnecessaryPopupElement = popup.element.querySelector(".popupContent > .popup")
|
||||||
// unnecessaryPopupElement.classList.remove("popup")
|
// unnecessaryPopupElement.classList.remove("popup")
|
||||||
|
|
||||||
popupParagraphs.forEach(popupParagraph => {
|
popupParagraphs.forEach((popupParagraph) => {
|
||||||
popupParagraph.setAttribute('draggable', false)
|
popupParagraph.setAttribute('draggable', false)
|
||||||
popupParagraph.addEventListener('mousedown', event => {
|
popupParagraph.addEventListener('mousedown', (event) => {
|
||||||
event.preventDefault()
|
event.preventDefault()
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
@ -451,7 +451,7 @@ export default class Card {
|
||||||
this._setPopup(context, popup, src)
|
this._setPopup(context, popup, src)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.catch(e => console.error(e))
|
.catch((e) => console.error(e))
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -491,14 +491,14 @@ export default class Card {
|
||||||
Object.assign(
|
Object.assign(
|
||||||
{
|
{
|
||||||
parent: context,
|
parent: context,
|
||||||
content
|
content,
|
||||||
},
|
},
|
||||||
Object.assign(
|
Object.assign(
|
||||||
{
|
{
|
||||||
noStyle: true,
|
noStyle: true,
|
||||||
// TODO: Remove offset when positioning according to element position
|
// TODO: Remove offset when positioning according to element position
|
||||||
// is working.
|
// is working.
|
||||||
posOffset: 10
|
posOffset: 10,
|
||||||
},
|
},
|
||||||
options
|
options
|
||||||
)
|
)
|
||||||
|
@ -510,7 +510,7 @@ export default class Card {
|
||||||
// We manually prevent this here.
|
// We manually prevent this here.
|
||||||
popup.element.style.display = 'none'
|
popup.element.style.display = 'none'
|
||||||
|
|
||||||
let promise = new Promise(resolve => {
|
let promise = new Promise((resolve) => {
|
||||||
if (popup.loaded) resolve(popup)
|
if (popup.loaded) resolve(popup)
|
||||||
else {
|
else {
|
||||||
popup.onload = () => {
|
popup.onload = () => {
|
||||||
|
@ -519,7 +519,7 @@ export default class Card {
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
promise.then(popup => {
|
promise.then((popup) => {
|
||||||
popup.element.style.display = 'block'
|
popup.element.style.display = 'block'
|
||||||
popup.element.style.visibility = 'hidden'
|
popup.element.style.visibility = 'hidden'
|
||||||
popup.element.style.opacity = 0
|
popup.element.style.opacity = 0
|
||||||
|
@ -531,12 +531,12 @@ export default class Card {
|
||||||
})
|
})
|
||||||
|
|
||||||
Object.assign(popup.element.style, {
|
Object.assign(popup.element.style, {
|
||||||
zIndex: this.zIndices.popup
|
zIndex: this.zIndices.popup,
|
||||||
})
|
})
|
||||||
|
|
||||||
TweenLite.to(popup.element, this.animation.popup, {
|
TweenLite.to(popup.element, this.animation.popup, {
|
||||||
autoAlpha: 1,
|
autoAlpha: 1,
|
||||||
ease: Power2.easeIn
|
ease: Power2.easeIn,
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
|
@ -560,7 +560,7 @@ export default class Card {
|
||||||
popup.remove()
|
popup.remove()
|
||||||
//this._cleanup(context)
|
//this._cleanup(context)
|
||||||
//overlay.parentNode.removeChild(overlay)
|
//overlay.parentNode.removeChild(overlay)
|
||||||
}
|
},
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -618,7 +618,7 @@ export default class Card {
|
||||||
let popupPage = parser.parseFromString(xhr.responseText, 'text/html')
|
let popupPage = parser.parseFromString(xhr.responseText, 'text/html')
|
||||||
|
|
||||||
//Fix the relative path of loaded images in the popup.
|
//Fix the relative path of loaded images in the popup.
|
||||||
popupPage.querySelectorAll('img').forEach(node => {
|
popupPage.querySelectorAll('img').forEach((node) => {
|
||||||
node.setAttribute('src', that._getRelativePath(node.getAttribute('src')))
|
node.setAttribute('src', that._getRelativePath(node.getAttribute('src')))
|
||||||
})
|
})
|
||||||
let html = popupPage.body.innerHTML
|
let html = popupPage.body.innerHTML
|
||||||
|
@ -648,7 +648,7 @@ export default class Card {
|
||||||
if (editable) {
|
if (editable) {
|
||||||
let isDirty = mainController.askSaveNode()
|
let isDirty = mainController.askSaveNode()
|
||||||
if (isDirty)
|
if (isDirty)
|
||||||
mainController.saveNode(html.innerHTML, url => {
|
mainController.saveNode(html.innerHTML, (url) => {
|
||||||
if (callback) {
|
if (callback) {
|
||||||
callback()
|
callback()
|
||||||
}
|
}
|
||||||
|
@ -670,12 +670,12 @@ export default class Card {
|
||||||
}
|
}
|
||||||
|
|
||||||
Card._openPopup(context, src, local, content, {
|
Card._openPopup(context, src, local, content, {
|
||||||
closeCommand: callback
|
closeCommand: callback,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
overlay.onclick = e => {
|
overlay.onclick = (e) => {
|
||||||
if (editable) e.preventDefault()
|
if (editable) e.preventDefault()
|
||||||
}
|
}
|
||||||
//console.log("onreadystatechange", editable)
|
//console.log("onreadystatechange", editable)
|
||||||
|
@ -712,7 +712,7 @@ export default class Card {
|
||||||
for (let highlight of correspondingHighlights) {
|
for (let highlight of correspondingHighlights) {
|
||||||
if (highlight.parentNode && highlight.parentNode.nodeName.toLowerCase() == 'g') {
|
if (highlight.parentNode && highlight.parentNode.nodeName.toLowerCase() == 'g') {
|
||||||
Highlight.openHighlight(highlight, {
|
Highlight.openHighlight(highlight, {
|
||||||
animation: Card.highlightAnimation
|
animation: Card.highlightAnimation,
|
||||||
})
|
})
|
||||||
this._addHighlight(context, highlight)
|
this._addHighlight(context, highlight)
|
||||||
}
|
}
|
||||||
|
@ -841,19 +841,19 @@ export default class Card {
|
||||||
// TODO: Adjust to load while animating (Problem: Unload when cancelled).
|
// TODO: Adjust to load while animating (Problem: Unload when cancelled).
|
||||||
// console.log('loadHighlightPopup', src, position, local)
|
// console.log('loadHighlightPopup', src, position, local)
|
||||||
this._loadPopupContent(context, src)
|
this._loadPopupContent(context, src)
|
||||||
.then(content => {
|
.then((content) => {
|
||||||
this._openPopup(context, src, local, content, {
|
this._openPopup(context, src, local, content, {
|
||||||
highlight: node,
|
highlight: node,
|
||||||
closeCommand: popup => {
|
closeCommand: (popup) => {
|
||||||
this._overlayCleanup(context, overlay)
|
this._overlayCleanup(context, overlay)
|
||||||
popup.remove()
|
popup.remove()
|
||||||
}
|
},
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
.catch(err => {
|
.catch((err) => {
|
||||||
console.error(err)
|
console.error(err)
|
||||||
})
|
})
|
||||||
}
|
},
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -937,7 +937,7 @@ export default class Card {
|
||||||
|
|
||||||
let globalBottomRight = {
|
let globalBottomRight = {
|
||||||
x: imageWidth,
|
x: imageWidth,
|
||||||
y: imageHeight
|
y: imageHeight,
|
||||||
}
|
}
|
||||||
|
|
||||||
globalBottomRight = Points.fromNodeToPage(zoomable, globalBottomRight)
|
globalBottomRight = Points.fromNodeToPage(zoomable, globalBottomRight)
|
||||||
|
@ -1003,7 +1003,7 @@ export default class Card {
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
top: 0,
|
top: 0,
|
||||||
left: 0,
|
left: 0,
|
||||||
zIndex: 200
|
zIndex: 200,
|
||||||
})
|
})
|
||||||
|
|
||||||
wrapper.appendChild(zoomContainer)
|
wrapper.appendChild(zoomContainer)
|
||||||
|
@ -1071,13 +1071,13 @@ export default class Card {
|
||||||
y: current.y,
|
y: current.y,
|
||||||
width: current.width + borderX,
|
width: current.width + borderX,
|
||||||
height: current.height + borderY,
|
height: current.height + borderY,
|
||||||
transformOrigin
|
transformOrigin,
|
||||||
})
|
})
|
||||||
TweenLite.set(zoomable, { opacity: 0 })
|
TweenLite.set(zoomable, { opacity: 0 })
|
||||||
|
|
||||||
let icon = zoomedFig.querySelector('.icon')
|
let icon = zoomedFig.querySelector('.icon')
|
||||||
TweenLite.set(icon, {
|
TweenLite.set(icon, {
|
||||||
transformOrigin
|
transformOrigin,
|
||||||
})
|
})
|
||||||
zoomedFig.style.transformOrigin =
|
zoomedFig.style.transformOrigin =
|
||||||
'calc(100% - ' +
|
'calc(100% - ' +
|
||||||
|
@ -1097,8 +1097,8 @@ export default class Card {
|
||||||
ease: Power2.easeIn,
|
ease: Power2.easeIn,
|
||||||
css: {
|
css: {
|
||||||
scaleX: scaleFactor,
|
scaleX: scaleFactor,
|
||||||
scaleY: scaleFactor
|
scaleY: scaleFactor,
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
0
|
0
|
||||||
)
|
)
|
||||||
|
@ -1107,11 +1107,11 @@ export default class Card {
|
||||||
display: 'block',
|
display: 'block',
|
||||||
opacity: 0,
|
opacity: 0,
|
||||||
x: -parseFloat(zoomedFigStyle.borderLeftWidth),
|
x: -parseFloat(zoomedFigStyle.borderLeftWidth),
|
||||||
width: current.width + borderX
|
width: current.width + borderX,
|
||||||
}
|
},
|
||||||
})
|
})
|
||||||
.to(zoomCaption, this.animation.fade, {
|
.to(zoomCaption, this.animation.fade, {
|
||||||
autoAlpha: 1
|
autoAlpha: 1,
|
||||||
})
|
})
|
||||||
} else this._openZoomableEditorBehaviour(wrapper, img, zoomable, zoomedFig, current)
|
} else this._openZoomableEditorBehaviour(wrapper, img, zoomable, zoomedFig, current)
|
||||||
}
|
}
|
||||||
|
@ -1160,7 +1160,7 @@ export default class Card {
|
||||||
x: current.x,
|
x: current.x,
|
||||||
y: current.y,
|
y: current.y,
|
||||||
width: current.width,
|
width: current.width,
|
||||||
height: current.height
|
height: current.height,
|
||||||
})
|
})
|
||||||
let editor = mainController.topController().ensureEditor(img)
|
let editor = mainController.topController().ensureEditor(img)
|
||||||
let savedDisplay = zoomIcon.style.display
|
let savedDisplay = zoomIcon.style.display
|
||||||
|
@ -1187,13 +1187,13 @@ export default class Card {
|
||||||
wrapper.appendChild(iconClone)
|
wrapper.appendChild(iconClone)
|
||||||
TweenLite.set(iconClone, { x: current.iconPos.x, y: current.iconPos.y })
|
TweenLite.set(iconClone, { x: current.iconPos.x, y: current.iconPos.y })
|
||||||
|
|
||||||
zoomable.onmousedown = event => {
|
zoomable.onmousedown = (event) => {
|
||||||
if (this.debug) console.log('mousedown', event.target)
|
if (this.debug) console.log('mousedown', event.target)
|
||||||
event.preventDefault()
|
event.preventDefault()
|
||||||
zoomable.dragging = true
|
zoomable.dragging = true
|
||||||
zoomable.dragStartPos = { x: event.pageX, y: event.pageY }
|
zoomable.dragStartPos = { x: event.pageX, y: event.pageY }
|
||||||
}
|
}
|
||||||
zoomable.onmousemove = event => {
|
zoomable.onmousemove = (event) => {
|
||||||
if (this.debug) console.log('onmousemove', event.target)
|
if (this.debug) console.log('onmousemove', event.target)
|
||||||
if (zoomable.dragging) {
|
if (zoomable.dragging) {
|
||||||
event.preventDefault()
|
event.preventDefault()
|
||||||
|
@ -1201,7 +1201,7 @@ export default class Card {
|
||||||
let dy = event.pageY - zoomable.dragStartPos.y
|
let dy = event.pageY - zoomable.dragStartPos.y
|
||||||
TweenLite.set([zoomable, iconClone], {
|
TweenLite.set([zoomable, iconClone], {
|
||||||
x: '+=' + dx,
|
x: '+=' + dx,
|
||||||
y: '+=' + dy
|
y: '+=' + dy,
|
||||||
})
|
})
|
||||||
zoomable.dragStartPos = { x: event.pageX, y: event.pageY }
|
zoomable.dragStartPos = { x: event.pageX, y: event.pageY }
|
||||||
if (editor) {
|
if (editor) {
|
||||||
|
@ -1214,7 +1214,7 @@ export default class Card {
|
||||||
}
|
}
|
||||||
|
|
||||||
let startZoom = 1
|
let startZoom = 1
|
||||||
zoomable.onmousewheel = event => {
|
zoomable.onmousewheel = (event) => {
|
||||||
event.preventDefault()
|
event.preventDefault()
|
||||||
let direction = event.detail < 0 || event.wheelDelta > 0
|
let direction = event.detail < 0 || event.wheelDelta > 0
|
||||||
const zoomFactor = 1.1
|
const zoomFactor = 1.1
|
||||||
|
@ -1250,24 +1250,24 @@ export default class Card {
|
||||||
let zoomedCaption = zoomedFig.querySelector('figcaption.zoomcap')
|
let zoomedCaption = zoomedFig.querySelector('figcaption.zoomcap')
|
||||||
|
|
||||||
TweenLite.to(zoomedCaption, this.animation.fade, {
|
TweenLite.to(zoomedCaption, this.animation.fade, {
|
||||||
autoAlpha: 0
|
autoAlpha: 0,
|
||||||
})
|
})
|
||||||
|
|
||||||
TweenLite.to(zoomedFig, this.animation.zoomable, {
|
TweenLite.to(zoomedFig, this.animation.zoomable, {
|
||||||
css: {
|
css: {
|
||||||
scaleX: 1,
|
scaleX: 1,
|
||||||
scaleY: 1
|
scaleY: 1,
|
||||||
},
|
},
|
||||||
onComplete: () => {
|
onComplete: () => {
|
||||||
TweenLite.set(zoomable, {
|
TweenLite.set(zoomable, {
|
||||||
opacity: 1
|
opacity: 1,
|
||||||
})
|
})
|
||||||
|
|
||||||
let div = zoomedFig.parentNode
|
let div = zoomedFig.parentNode
|
||||||
let videoElement = div.querySelector('video')
|
let videoElement = div.querySelector('video')
|
||||||
if (videoElement) videoElement.pause()
|
if (videoElement) videoElement.pause()
|
||||||
div.parentNode.removeChild(div)
|
div.parentNode.removeChild(div)
|
||||||
}
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
InteractionMapper.off(zoomedFig)
|
InteractionMapper.off(zoomedFig)
|
||||||
|
@ -1341,12 +1341,12 @@ export default class Card {
|
||||||
height: globalIndexCardRect.height,
|
height: globalIndexCardRect.height,
|
||||||
maxWidth: '100%',
|
maxWidth: '100%',
|
||||||
margin: 0,
|
margin: 0,
|
||||||
zIndex: this.zIndices.article
|
zIndex: this.zIndices.article,
|
||||||
}
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
TweenLite.set(articleClone, {
|
TweenLite.set(articleClone, {
|
||||||
autoAlpha: 0
|
autoAlpha: 0,
|
||||||
})
|
})
|
||||||
|
|
||||||
TweenLite.set(card, { css: { maxWidth: '100%' } })
|
TweenLite.set(card, { css: { maxWidth: '100%' } })
|
||||||
|
@ -1356,7 +1356,7 @@ export default class Card {
|
||||||
scaleX,
|
scaleX,
|
||||||
scaleY,
|
scaleY,
|
||||||
transformOrigin: '0% 0%',
|
transformOrigin: '0% 0%',
|
||||||
rotation: angle
|
rotation: angle,
|
||||||
})
|
})
|
||||||
indexbox.prepend(clone)
|
indexbox.prepend(clone)
|
||||||
clone.setAttribute('data-source', src)
|
clone.setAttribute('data-source', src)
|
||||||
|
@ -1365,7 +1365,7 @@ export default class Card {
|
||||||
let title = titlebar.querySelector('h2')
|
let title = titlebar.querySelector('h2')
|
||||||
let titlebarStyle = window.getComputedStyle(titlebar)
|
let titlebarStyle = window.getComputedStyle(titlebar)
|
||||||
let start = {
|
let start = {
|
||||||
height: parseInt(titlebarStyle.height)
|
height: parseInt(titlebarStyle.height),
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.dynamicHeight) {
|
if (this.dynamicHeight) {
|
||||||
|
@ -1385,10 +1385,7 @@ export default class Card {
|
||||||
|
|
||||||
//jquery hyphenate below
|
//jquery hyphenate below
|
||||||
if (this._isJQueryPresent()) {
|
if (this._isJQueryPresent()) {
|
||||||
$('.column')
|
$('.column').not('.overview').children('p').hyphenate('de')
|
||||||
.not('.overview')
|
|
||||||
.children('p')
|
|
||||||
.hyphenate('de')
|
|
||||||
}
|
}
|
||||||
|
|
||||||
//logging
|
//logging
|
||||||
|
@ -1414,23 +1411,23 @@ export default class Card {
|
||||||
card.classList.add('visited')
|
card.classList.add('visited')
|
||||||
},
|
},
|
||||||
onUpdateParams: ['{self}'],
|
onUpdateParams: ['{self}'],
|
||||||
onUpdate: self => {
|
onUpdate: (self) => {
|
||||||
let transform = self.target._gsTransform
|
let transform = self.target._gsTransform
|
||||||
TweenLite.set(title, {
|
TweenLite.set(title, {
|
||||||
scale: 1 / transform.scaleX
|
scale: 1 / transform.scaleX,
|
||||||
})
|
})
|
||||||
TweenLite.set(titlebar, {
|
TweenLite.set(titlebar, {
|
||||||
height: (start.height * 1) / transform.scaleY
|
height: (start.height * 1) / transform.scaleY,
|
||||||
})
|
})
|
||||||
|
|
||||||
// Retain the border at same visual thickness.
|
// Retain the border at same visual thickness.
|
||||||
titlebar.style.borderBottomWidth = desiredBorderBottomWidth / transform.scaleY + 'px'
|
titlebar.style.borderBottomWidth = desiredBorderBottomWidth / transform.scaleY + 'px'
|
||||||
}
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
TweenLite.to([articleClone], this.animation.articleTransition / 2, {
|
TweenLite.to([articleClone], this.animation.articleTransition / 2, {
|
||||||
delay: this.animation.articleTransition / 2,
|
delay: this.animation.articleTransition / 2,
|
||||||
autoAlpha: 1
|
autoAlpha: 1,
|
||||||
})
|
})
|
||||||
|
|
||||||
if (editable) {
|
if (editable) {
|
||||||
|
@ -1479,11 +1476,11 @@ export default class Card {
|
||||||
if (editable) {
|
if (editable) {
|
||||||
let isDirty = mainController.askSaveNode()
|
let isDirty = mainController.askSaveNode()
|
||||||
if (isDirty) {
|
if (isDirty) {
|
||||||
mainController.saveNode(html.innerHTML, url => {
|
mainController.saveNode(html.innerHTML, (url) => {
|
||||||
callback(url)
|
callback(url)
|
||||||
this._closeIndexCard(context, card, clone, articleClone, {
|
this._closeIndexCard(context, card, clone, articleClone, {
|
||||||
eventElements,
|
eventElements,
|
||||||
src
|
src,
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
} else {
|
} else {
|
||||||
|
@ -1522,7 +1519,7 @@ export default class Card {
|
||||||
|
|
||||||
let scale = {
|
let scale = {
|
||||||
x: globalPreviewRect.width / globalIndexCardRect.width,
|
x: globalPreviewRect.width / globalIndexCardRect.width,
|
||||||
y: globalPreviewRect.height / globalIndexCardRect.height
|
y: globalPreviewRect.height / globalIndexCardRect.height,
|
||||||
}
|
}
|
||||||
|
|
||||||
let titlebar = clonedSubcard.querySelector('.titlebar')
|
let titlebar = clonedSubcard.querySelector('.titlebar')
|
||||||
|
@ -1551,16 +1548,16 @@ export default class Card {
|
||||||
let titlebarStyle = window.getComputedStyle(previewTitlebar)
|
let titlebarStyle = window.getComputedStyle(previewTitlebar)
|
||||||
|
|
||||||
TweenLite.to(titlebar, this.animation.articleTransition, {
|
TweenLite.to(titlebar, this.animation.articleTransition, {
|
||||||
height: parseInt(titlebarStyle.height)
|
height: parseInt(titlebarStyle.height),
|
||||||
})
|
})
|
||||||
|
|
||||||
TweenLite.to(clonedArticle, this.animation.articleTransition / 2, {
|
TweenLite.to(clonedArticle, this.animation.articleTransition / 2, {
|
||||||
autoAlpha: 0
|
autoAlpha: 0,
|
||||||
})
|
})
|
||||||
|
|
||||||
let title = titlebar.querySelector('h2')
|
let title = titlebar.querySelector('h2')
|
||||||
let original = {
|
let original = {
|
||||||
height: parseInt(titlebarStyle.height)
|
height: parseInt(titlebarStyle.height),
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.dynamicHeight) {
|
if (this.dynamicHeight) {
|
||||||
|
@ -1589,24 +1586,24 @@ export default class Card {
|
||||||
mainController.popController()
|
mainController.popController()
|
||||||
}
|
}
|
||||||
clonedSubcard.remove()
|
clonedSubcard.remove()
|
||||||
}
|
},
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
onUpdateParams: ['{self}'],
|
onUpdateParams: ['{self}'],
|
||||||
onUpdate: function(self) {
|
onUpdate: function (self) {
|
||||||
let transform = self.target._gsTransform
|
let transform = self.target._gsTransform
|
||||||
|
|
||||||
TweenLite.set(title, {
|
TweenLite.set(title, {
|
||||||
scale: 1 / transform.scaleX
|
scale: 1 / transform.scaleX,
|
||||||
})
|
})
|
||||||
|
|
||||||
TweenLite.set(titlebar, {
|
TweenLite.set(titlebar, {
|
||||||
height: (original.height * 1) / transform.scaleY
|
height: (original.height * 1) / transform.scaleY,
|
||||||
})
|
})
|
||||||
|
|
||||||
// Retain the border at same visual thickness.
|
// Retain the border at same visual thickness.
|
||||||
titlebar.style.borderBottomWidth = desiredBorderBottomWidth / transform.scaleY + 'px'
|
titlebar.style.borderBottomWidth = desiredBorderBottomWidth / transform.scaleY + 'px'
|
||||||
}
|
},
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1653,7 +1650,7 @@ export default class Card {
|
||||||
* Called by the expandIndexCard(...)
|
* Called by the expandIndexCard(...)
|
||||||
*/
|
*/
|
||||||
let target = event.target
|
let target = event.target
|
||||||
const saveCallback = url => {
|
const saveCallback = (url) => {
|
||||||
let handler = `Card.openIndexCard(event, '${url}')`
|
let handler = `Card.openIndexCard(event, '${url}')`
|
||||||
if (this.debug) console.log('File has changed', target, handler)
|
if (this.debug) console.log('File has changed', target, handler)
|
||||||
|
|
||||||
|
@ -1744,9 +1741,9 @@ export default class Card {
|
||||||
}
|
}
|
||||||
|
|
||||||
let highlights = this._getHighlights(context)
|
let highlights = this._getHighlights(context)
|
||||||
highlights.forEach(highlight => {
|
highlights.forEach((highlight) => {
|
||||||
Highlight.closeHighlight(highlight, {
|
Highlight.closeHighlight(highlight, {
|
||||||
animation: Card.highlightAnimation
|
animation: Card.highlightAnimation,
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
|
@ -1768,13 +1765,13 @@ export default class Card {
|
||||||
let global = this._getGlobalRect(element)
|
let global = this._getGlobalRect(element)
|
||||||
let localPosition = Points.fromPageToNode(context, {
|
let localPosition = Points.fromPageToNode(context, {
|
||||||
x: global.x,
|
x: global.x,
|
||||||
y: global.y
|
y: global.y,
|
||||||
})
|
})
|
||||||
return DOMRectReadOnly.fromRect({
|
return DOMRectReadOnly.fromRect({
|
||||||
x: localPosition.x,
|
x: localPosition.x,
|
||||||
y: localPosition.y,
|
y: localPosition.y,
|
||||||
width: global.width,
|
width: global.width,
|
||||||
height: global.height
|
height: global.height,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1797,7 +1794,7 @@ export default class Card {
|
||||||
x: globalPosition.x,
|
x: globalPosition.x,
|
||||||
y: globalPosition.y,
|
y: globalPosition.y,
|
||||||
width: cardWidth,
|
width: cardWidth,
|
||||||
height: cardHeight
|
height: cardHeight,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1819,19 +1816,19 @@ export default class Card {
|
||||||
this._replaceAttributes(context, html, 'onclick', this._replaceCallback)
|
this._replaceAttributes(context, html, 'onclick', this._replaceCallback)
|
||||||
}
|
}
|
||||||
let zoomableWrappers = html.querySelectorAll('.svg-wrapper')
|
let zoomableWrappers = html.querySelectorAll('.svg-wrapper')
|
||||||
zoomableWrappers.forEach(wrapper => {
|
zoomableWrappers.forEach((wrapper) => {
|
||||||
let svg = wrapper.querySelector('svg')
|
let svg = wrapper.querySelector('svg')
|
||||||
Object.assign(wrapper.style, {
|
Object.assign(wrapper.style, {
|
||||||
width: svg.getAttribute('width') + 'px',
|
width: svg.getAttribute('width') + 'px',
|
||||||
height: svg.getAttribute('height') + 'px'
|
height: svg.getAttribute('height') + 'px',
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
let zoomableVideoWrappers = html.querySelectorAll('.video-wrapper')
|
let zoomableVideoWrappers = html.querySelectorAll('.video-wrapper')
|
||||||
zoomableVideoWrappers.forEach(wrapper => {
|
zoomableVideoWrappers.forEach((wrapper) => {
|
||||||
let video = wrapper.querySelector('video')
|
let video = wrapper.querySelector('video')
|
||||||
Object.assign(wrapper.style, {
|
Object.assign(wrapper.style, {
|
||||||
width: video.getAttribute('width') + 'px',
|
width: video.getAttribute('width') + 'px',
|
||||||
height: video.getAttribute('height') + 'px'
|
height: video.getAttribute('height') + 'px',
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
|
@ -1870,12 +1867,12 @@ export default class Card {
|
||||||
let globalClick = event.center ? event.center : { x: event.x, y: event.y }
|
let globalClick = event.center ? event.center : { x: event.x, y: event.y }
|
||||||
let localClick = Points.fromPageToNode(indexbox, globalClick)
|
let localClick = Points.fromPageToNode(indexbox, globalClick)
|
||||||
|
|
||||||
let linkRects = links.map(link => {
|
let linkRects = links.map((link) => {
|
||||||
let rect = link.getBoundingClientRect()
|
let rect = link.getBoundingClientRect()
|
||||||
let topLeft = Points.fromPageToNode(indexbox, rect)
|
let topLeft = Points.fromPageToNode(indexbox, rect)
|
||||||
let center = Points.fromPageToNode(indexbox, {
|
let center = Points.fromPageToNode(indexbox, {
|
||||||
x: rect.x + rect.width / 2,
|
x: rect.x + rect.width / 2,
|
||||||
y: rect.y + rect.height / 2
|
y: rect.y + rect.height / 2,
|
||||||
})
|
})
|
||||||
return {
|
return {
|
||||||
x: topLeft.x,
|
x: topLeft.x,
|
||||||
|
@ -1883,12 +1880,12 @@ export default class Card {
|
||||||
width: rect.width,
|
width: rect.width,
|
||||||
height: rect.height,
|
height: rect.height,
|
||||||
center,
|
center,
|
||||||
link
|
link,
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
let distances = []
|
let distances = []
|
||||||
linkRects.forEach(rect => {
|
linkRects.forEach((rect) => {
|
||||||
let distance = Card.pointRectDist(localClick, rect)
|
let distance = Card.pointRectDist(localClick, rect)
|
||||||
if (distance == 0.0) {
|
if (distance == 0.0) {
|
||||||
// Distance == 0.0 indicates an inside relation. Since these
|
// Distance == 0.0 indicates an inside relation. Since these
|
||||||
|
@ -2095,7 +2092,7 @@ Card.zIndices = {
|
||||||
article: 10,
|
article: 10,
|
||||||
popup: 100,
|
popup: 100,
|
||||||
zoomable: 101,
|
zoomable: 101,
|
||||||
zoomedFigure: 102
|
zoomedFigure: 102,
|
||||||
}
|
}
|
||||||
|
|
||||||
Card.animation = {
|
Card.animation = {
|
||||||
|
@ -2103,5 +2100,5 @@ Card.animation = {
|
||||||
fade: 0.2,
|
fade: 0.2,
|
||||||
popup: 0.1,
|
popup: 0.1,
|
||||||
highlight: 0.4,
|
highlight: 0.4,
|
||||||
zoomable: 0.5
|
zoomable: 0.5,
|
||||||
}
|
}
|
||||||
|
|
|
@ -94,7 +94,7 @@ export default class Highlight extends Object {
|
||||||
obj.classList.add(this.expandedClass)
|
obj.classList.add(this.expandedClass)
|
||||||
obj.setAttribute('stroke-width', stroke / scale)
|
obj.setAttribute('stroke-width', stroke / scale)
|
||||||
if (onComplete) onComplete()
|
if (onComplete) onComplete()
|
||||||
}
|
},
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -113,7 +113,7 @@ export default class Highlight extends Object {
|
||||||
obj.classList.remove('zooming')
|
obj.classList.remove('zooming')
|
||||||
obj.classList.remove(this.expandedClass)
|
obj.classList.remove(this.expandedClass)
|
||||||
obj.setAttribute('stroke-width', stroke)
|
obj.setAttribute('stroke-width', stroke)
|
||||||
}
|
},
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -163,7 +163,7 @@ export default class Highlight extends Object {
|
||||||
this.shrink(maskImage, { stroke })
|
this.shrink(maskImage, { stroke })
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
let circles = Array.from(circleGroup.children).filter(e => e.tagName == 'circle')
|
let circles = Array.from(circleGroup.children).filter((e) => e.tagName == 'circle')
|
||||||
for (let c of circles) {
|
for (let c of circles) {
|
||||||
//console.log("shrinking all circles")
|
//console.log("shrinking all circles")
|
||||||
this.shrink(c, { stroke })
|
this.shrink(c, { stroke })
|
||||||
|
@ -210,18 +210,18 @@ export default class Highlight extends Object {
|
||||||
// eslint-disable-next-line no-unused-vars
|
// eslint-disable-next-line no-unused-vars
|
||||||
let [mask, maskImage] = this._getSVGMask(target, {
|
let [mask, maskImage] = this._getSVGMask(target, {
|
||||||
svgRoot,
|
svgRoot,
|
||||||
image
|
image,
|
||||||
})
|
})
|
||||||
let center = this._calculateCenterRelativeTo(target, image)
|
let center = this._calculateCenterRelativeTo(target, image)
|
||||||
console.log('_calculateCenterRelativeTo', center)
|
console.log('_calculateCenterRelativeTo', center)
|
||||||
TweenLite.set(maskImage, {
|
TweenLite.set(maskImage, {
|
||||||
transformOrigin: `${center.x} ${center.y}`
|
transformOrigin: `${center.x} ${center.y}`,
|
||||||
})
|
})
|
||||||
TweenLite.set(target, { transformOrigin: '50% 50%' })
|
TweenLite.set(target, { transformOrigin: '50% 50%' })
|
||||||
|
|
||||||
TweenLite.to([target, maskImage], animation, {
|
TweenLite.to([target, maskImage], animation, {
|
||||||
scale,
|
scale,
|
||||||
onComplete: onExpanded
|
onComplete: onExpanded,
|
||||||
})
|
})
|
||||||
|
|
||||||
target.classList.add(this.expandedClass)
|
target.classList.add(this.expandedClass)
|
||||||
|
@ -259,7 +259,7 @@ export default class Highlight extends Object {
|
||||||
[mask, maskImage] = this._createSVGMask(circle, {
|
[mask, maskImage] = this._createSVGMask(circle, {
|
||||||
svgRoot,
|
svgRoot,
|
||||||
image,
|
image,
|
||||||
id
|
id,
|
||||||
})
|
})
|
||||||
|
|
||||||
return [mask, maskImage]
|
return [mask, maskImage]
|
||||||
|
@ -353,7 +353,7 @@ export default class Highlight extends Object {
|
||||||
let [mask, maskImage] = this._getSVGMask(target)
|
let [mask, maskImage] = this._getSVGMask(target)
|
||||||
// console.log('Close Highlight', maskImage)
|
// console.log('Close Highlight', maskImage)
|
||||||
TweenLite.to([target, maskImage], animation, {
|
TweenLite.to([target, maskImage], animation, {
|
||||||
scale: 1
|
scale: 1,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -63,7 +63,7 @@ export class CardPluginBase {
|
||||||
let requirements = this._collectAllRequirements()
|
let requirements = this._collectAllRequirements()
|
||||||
let missing = []
|
let missing = []
|
||||||
|
|
||||||
requirements.forEach(module => {
|
requirements.forEach((module) => {
|
||||||
if (context.modules.indexOf(module.name) == -1) {
|
if (context.modules.indexOf(module.name) == -1) {
|
||||||
missing.push(module.name)
|
missing.push(module.name)
|
||||||
}
|
}
|
||||||
|
@ -121,12 +121,12 @@ CardPlugin.LightBox = class LightBox extends CardPluginBase {
|
||||||
top: 0,
|
top: 0,
|
||||||
left: 0,
|
left: 0,
|
||||||
width: '100%',
|
width: '100%',
|
||||||
height: '100%'
|
height: '100%',
|
||||||
},
|
},
|
||||||
this.style,
|
this.style,
|
||||||
{
|
{
|
||||||
display: 'none',
|
display: 'none',
|
||||||
position: 'absolute'
|
position: 'absolute',
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
|
|
||||||
|
@ -199,7 +199,7 @@ CardPlugin.EnlargeableThumbnail = class EnlargeableThumbnail extends CardPluginB
|
||||||
wrapper.appendChild(icon)
|
wrapper.appendChild(icon)
|
||||||
|
|
||||||
Object.assign(wrapper.style, {
|
Object.assign(wrapper.style, {
|
||||||
cursor: 'pointer'
|
cursor: 'pointer',
|
||||||
})
|
})
|
||||||
|
|
||||||
InteractionMapper.on(this.interactionType, wrapper, () => {
|
InteractionMapper.on(this.interactionType, wrapper, () => {
|
||||||
|
@ -221,13 +221,13 @@ CardPlugin.EnlargeableThumbnail = class EnlargeableThumbnail extends CardPluginB
|
||||||
|
|
||||||
Object.assign(imageWrapper.style, {
|
Object.assign(imageWrapper.style, {
|
||||||
maxWidth: 'none',
|
maxWidth: 'none',
|
||||||
maxHeight: 'none'
|
maxHeight: 'none',
|
||||||
})
|
})
|
||||||
|
|
||||||
Object.assign(image.style, {
|
Object.assign(image.style, {
|
||||||
width: '100%',
|
width: '100%',
|
||||||
height: '100%',
|
height: '100%',
|
||||||
objectFit: 'cover'
|
objectFit: 'cover',
|
||||||
})
|
})
|
||||||
|
|
||||||
this._replaceIcon(imageWrapper)
|
this._replaceIcon(imageWrapper)
|
||||||
|
@ -250,7 +250,7 @@ CardPlugin.EnlargeableThumbnail = class EnlargeableThumbnail extends CardPluginB
|
||||||
|
|
||||||
const max = {
|
const max = {
|
||||||
width: context.offsetWidth * maxFillRatio,
|
width: context.offsetWidth * maxFillRatio,
|
||||||
height: context.offsetHeight * maxFillRatio
|
height: context.offsetHeight * maxFillRatio,
|
||||||
}
|
}
|
||||||
|
|
||||||
let majorSide
|
let majorSide
|
||||||
|
@ -284,14 +284,14 @@ CardPlugin.EnlargeableThumbnail = class EnlargeableThumbnail extends CardPluginB
|
||||||
|
|
||||||
let targetDimensions = {
|
let targetDimensions = {
|
||||||
width: 0,
|
width: 0,
|
||||||
height: 0
|
height: 0,
|
||||||
}
|
}
|
||||||
|
|
||||||
let position = Points.fromPageToNode(context, Points.fromNodeToPage(source, { x: 0, y: 0 }))
|
let position = Points.fromPageToNode(context, Points.fromNodeToPage(source, { x: 0, y: 0 }))
|
||||||
|
|
||||||
let targetOffset = {
|
let targetOffset = {
|
||||||
x: 0,
|
x: 0,
|
||||||
y: 0
|
y: 0,
|
||||||
}
|
}
|
||||||
|
|
||||||
targetDimensions[majorSide.name] = size
|
targetDimensions[majorSide.name] = size
|
||||||
|
@ -311,22 +311,22 @@ CardPlugin.EnlargeableThumbnail = class EnlargeableThumbnail extends CardPluginB
|
||||||
y: position.y,
|
y: position.y,
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
width: parseInt(sourceStyle.width),
|
width: parseInt(sourceStyle.width),
|
||||||
height: parseInt(sourceStyle.height)
|
height: parseInt(sourceStyle.height),
|
||||||
})
|
})
|
||||||
|
|
||||||
TweenMax.set(overlay, {
|
TweenMax.set(overlay, {
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
autoAlpha: 0
|
autoAlpha: 0,
|
||||||
})
|
})
|
||||||
|
|
||||||
TweenMax.to(imageWrapper, this.zoomAnimationDuration, {
|
TweenMax.to(imageWrapper, this.zoomAnimationDuration, {
|
||||||
x: targetOffset.x,
|
x: targetOffset.x,
|
||||||
y: targetOffset.y,
|
y: targetOffset.y,
|
||||||
width: targetDimensions.width,
|
width: targetDimensions.width,
|
||||||
height: targetDimensions.height
|
height: targetDimensions.height,
|
||||||
})
|
})
|
||||||
TweenMax.to(overlay, this.fadeAnimationTime, {
|
TweenMax.to(overlay, this.fadeAnimationTime, {
|
||||||
autoAlpha: 1
|
autoAlpha: 1,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -358,10 +358,10 @@ CardPlugin.EnlargeableThumbnail = class EnlargeableThumbnail extends CardPluginB
|
||||||
|
|
||||||
timeline
|
timeline
|
||||||
.to(overlay, this.fadeAnimationDuration, {
|
.to(overlay, this.fadeAnimationDuration, {
|
||||||
autoAlpha: 0
|
autoAlpha: 0,
|
||||||
})
|
})
|
||||||
.set(overlay, {
|
.set(overlay, {
|
||||||
display: 'none'
|
display: 'none',
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -418,7 +418,7 @@ CardPlugin.Speech = class SpeechPlugin extends CardPluginBase {
|
||||||
this._end = this._end.bind(this)
|
this._end = this._end.bind(this)
|
||||||
|
|
||||||
this._setupUtterance()
|
this._setupUtterance()
|
||||||
this.utterance.addEventListener('end', event => {
|
this.utterance.addEventListener('end', (event) => {
|
||||||
this._end()
|
this._end()
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
@ -451,7 +451,7 @@ CardPlugin.Speech = class SpeechPlugin extends CardPluginBase {
|
||||||
} else {
|
} else {
|
||||||
if (subcard) {
|
if (subcard) {
|
||||||
let clone = subcard.cloneNode(true)
|
let clone = subcard.cloneNode(true)
|
||||||
clone.querySelectorAll('figure').forEach(figure => {
|
clone.querySelectorAll('figure').forEach((figure) => {
|
||||||
figure.parentNode.removeChild(figure)
|
figure.parentNode.removeChild(figure)
|
||||||
})
|
})
|
||||||
|
|
||||||
|
@ -554,10 +554,10 @@ CardPlugin.Speech = class SpeechPlugin extends CardPluginBase {
|
||||||
}
|
}
|
||||||
|
|
||||||
async _stop() {
|
async _stop() {
|
||||||
return new Promise(resolve => {
|
return new Promise((resolve) => {
|
||||||
if (this.activeUtterance) {
|
if (this.activeUtterance) {
|
||||||
this.activeUtterance.addEventListener('end', resolve, {
|
this.activeUtterance.addEventListener('end', resolve, {
|
||||||
once: true
|
once: true,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -66,12 +66,12 @@ export default class ScatterCard extends Card {
|
||||||
scatterContainer.element.appendChild(element)
|
scatterContainer.element.appendChild(element)
|
||||||
new DOMScatter(element, scatterContainer, {
|
new DOMScatter(element, scatterContainer, {
|
||||||
width: 1400,
|
width: 1400,
|
||||||
height: 1200
|
height: 1200,
|
||||||
})
|
})
|
||||||
|
|
||||||
this.setup(element, html, {
|
this.setup(element, html, {
|
||||||
basePath,
|
basePath,
|
||||||
modules
|
modules,
|
||||||
})
|
})
|
||||||
return element
|
return element
|
||||||
}
|
}
|
||||||
|
@ -132,15 +132,15 @@ export default class ScatterCard extends Card {
|
||||||
let url = basePath + '/' + item + '/index.html'
|
let url = basePath + '/' + item + '/index.html'
|
||||||
console.log('Loading', url)
|
console.log('Loading', url)
|
||||||
this.loadHTML(url)
|
this.loadHTML(url)
|
||||||
.then(html => {
|
.then((html) => {
|
||||||
console.log('Received', html)
|
console.log('Received', html)
|
||||||
let element = this.createCardScatter(html, scatterContainer, {
|
let element = this.createCardScatter(html, scatterContainer, {
|
||||||
basePath,
|
basePath,
|
||||||
modules
|
modules,
|
||||||
})
|
})
|
||||||
resolve(element)
|
resolve(element)
|
||||||
})
|
})
|
||||||
.catch(e => reject(e))
|
.catch((e) => reject(e))
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -157,6 +157,6 @@ ScatterCard.selectedLanguage = 0
|
||||||
ScatterCard.languages = ['Deutsch', 'English']
|
ScatterCard.languages = ['Deutsch', 'English']
|
||||||
ScatterCard.languageTags = {
|
ScatterCard.languageTags = {
|
||||||
Deutsch: 'de',
|
Deutsch: 'de',
|
||||||
English: 'en'
|
English: 'en',
|
||||||
}
|
}
|
||||||
ScatterCard.scatterContainer = null
|
ScatterCard.scatterContainer = null
|
||||||
|
|
|
@ -20,7 +20,7 @@ export default class Theme {
|
||||||
path = path ? path : './config.json'
|
path = path ? path : './config.json'
|
||||||
|
|
||||||
let xhttp = new XMLHttpRequest()
|
let xhttp = new XMLHttpRequest()
|
||||||
xhttp.onreadystatechange = function() {
|
xhttp.onreadystatechange = function () {
|
||||||
if (this.readyState == 4) {
|
if (this.readyState == 4) {
|
||||||
if (this.status == 200 || Theme._isLocal()) {
|
if (this.status == 200 || Theme._isLocal()) {
|
||||||
try {
|
try {
|
||||||
|
|
|
@ -17,7 +17,7 @@ export default class CardWrapper extends Object {
|
||||||
handleClicks() {
|
handleClicks() {
|
||||||
this.domNode.addEventListener(
|
this.domNode.addEventListener(
|
||||||
'click',
|
'click',
|
||||||
event => {
|
(event) => {
|
||||||
if (event.isTrusted) {
|
if (event.isTrusted) {
|
||||||
Events.stop(event)
|
Events.stop(event)
|
||||||
if (this.triggerSVGClicks && this.isSVGNode(event.target)) {
|
if (this.triggerSVGClicks && this.isSVGNode(event.target)) {
|
||||||
|
@ -32,7 +32,7 @@ export default class CardWrapper extends Object {
|
||||||
handleClicksAsTaps() {
|
handleClicksAsTaps() {
|
||||||
this.domNode.addEventListener(
|
this.domNode.addEventListener(
|
||||||
'click',
|
'click',
|
||||||
event => {
|
(event) => {
|
||||||
if (event.isTrusted) {
|
if (event.isTrusted) {
|
||||||
Events.stop(event)
|
Events.stop(event)
|
||||||
}
|
}
|
||||||
|
@ -99,20 +99,20 @@ export default class CardWrapper extends Object {
|
||||||
let globalClick = event.center ? event.center : { x: event.x, y: event.y }
|
let globalClick = event.center ? event.center : { x: event.x, y: event.y }
|
||||||
let localClick = Points.fromPageToNode(element, globalClick)
|
let localClick = Points.fromPageToNode(element, globalClick)
|
||||||
|
|
||||||
let clickRects = activeNodes.map(link => {
|
let clickRects = activeNodes.map((link) => {
|
||||||
let rect = link.getBoundingClientRect()
|
let rect = link.getBoundingClientRect()
|
||||||
// Since the getBoundingClientRect is untransformed we cannot rely on it's size
|
// Since the getBoundingClientRect is untransformed we cannot rely on it's size
|
||||||
// We need a transformed bottom right to calculate local width and height
|
// We need a transformed bottom right to calculate local width and height
|
||||||
let bottomRight = Points.fromPageToNode(element, {
|
let bottomRight = Points.fromPageToNode(element, {
|
||||||
x: rect.x + rect.width,
|
x: rect.x + rect.width,
|
||||||
y: rect.y + rect.height
|
y: rect.y + rect.height,
|
||||||
})
|
})
|
||||||
let topLeft = Points.fromPageToNode(element, rect)
|
let topLeft = Points.fromPageToNode(element, rect)
|
||||||
let width = Math.abs(bottomRight.x - topLeft.x)
|
let width = Math.abs(bottomRight.x - topLeft.x)
|
||||||
let height = Math.abs(bottomRight.y - topLeft.y)
|
let height = Math.abs(bottomRight.y - topLeft.y)
|
||||||
let center = Points.fromPageToNode(element, {
|
let center = Points.fromPageToNode(element, {
|
||||||
x: rect.x + width / 2,
|
x: rect.x + width / 2,
|
||||||
y: rect.y + height / 2
|
y: rect.y + height / 2,
|
||||||
})
|
})
|
||||||
return {
|
return {
|
||||||
x: topLeft.x,
|
x: topLeft.x,
|
||||||
|
@ -120,12 +120,12 @@ export default class CardWrapper extends Object {
|
||||||
width,
|
width,
|
||||||
height,
|
height,
|
||||||
center,
|
center,
|
||||||
link
|
link,
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
let distances = []
|
let distances = []
|
||||||
clickRects.forEach(rect => {
|
clickRects.forEach((rect) => {
|
||||||
let distance = Points.distanceToRect(localClick, rect)
|
let distance = Points.distanceToRect(localClick, rect)
|
||||||
distances.push(parseInt(distance))
|
distances.push(parseInt(distance))
|
||||||
})
|
})
|
||||||
|
|
|
@ -4,10 +4,10 @@
|
||||||
|
|
||||||
var docTestLogMessages = []
|
var docTestLogMessages = []
|
||||||
|
|
||||||
Array.prototype.equals = function(array) {
|
Array.prototype.equals = function (array) {
|
||||||
return (
|
return (
|
||||||
this.length == array.length &&
|
this.length == array.length &&
|
||||||
this.every(function(this_i, i) {
|
this.every(function (this_i, i) {
|
||||||
return this_i == array[i]
|
return this_i == array[i]
|
||||||
})
|
})
|
||||||
)
|
)
|
||||||
|
|
|
@ -33,7 +33,7 @@ export default class Errors {
|
||||||
errors = document.createElement('div')
|
errors = document.createElement('div')
|
||||||
errors.setAttribute('id', 'runtime-errors')
|
errors.setAttribute('id', 'runtime-errors')
|
||||||
this.setStyle(document.body, {
|
this.setStyle(document.body, {
|
||||||
border: '2px solid red'
|
border: '2px solid red',
|
||||||
})
|
})
|
||||||
this.setStyle(errors, {
|
this.setStyle(errors, {
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
|
@ -41,7 +41,7 @@ export default class Errors {
|
||||||
padding: '8px',
|
padding: '8px',
|
||||||
width: '100%',
|
width: '100%',
|
||||||
background: 'red',
|
background: 'red',
|
||||||
color: 'white'
|
color: 'white',
|
||||||
})
|
})
|
||||||
document.body.appendChild(errors)
|
document.body.appendChild(errors)
|
||||||
let counter = document.createElement('div')
|
let counter = document.createElement('div')
|
||||||
|
@ -55,7 +55,7 @@ export default class Errors {
|
||||||
fontSize: '18px',
|
fontSize: '18px',
|
||||||
textAlign: 'center',
|
textAlign: 'center',
|
||||||
lineHeight: '32px',
|
lineHeight: '32px',
|
||||||
verticalAlign: 'middle'
|
verticalAlign: 'middle',
|
||||||
})
|
})
|
||||||
counter.innerHTML = '1'
|
counter.innerHTML = '1'
|
||||||
errors.appendChild(counter)
|
errors.appendChild(counter)
|
||||||
|
@ -66,7 +66,7 @@ export default class Errors {
|
||||||
top: '6px',
|
top: '6px',
|
||||||
left: '48px',
|
left: '48px',
|
||||||
height: '44px',
|
height: '44px',
|
||||||
fontSize: '32px'
|
fontSize: '32px',
|
||||||
})
|
})
|
||||||
header.innerHTML = 'Runtime Errors'
|
header.innerHTML = 'Runtime Errors'
|
||||||
errors.appendChild(header)
|
errors.appendChild(header)
|
||||||
|
@ -97,7 +97,7 @@ export default class Errors {
|
||||||
let errors = document.getElementById('runtime-errors')
|
let errors = document.getElementById('runtime-errors')
|
||||||
let infos = errors.querySelectorAll('.info')
|
let infos = errors.querySelectorAll('.info')
|
||||||
if (infos.length > 0) {
|
if (infos.length > 0) {
|
||||||
infos.forEach(info => errors.removeChild(info))
|
infos.forEach((info) => errors.removeChild(info))
|
||||||
} else {
|
} else {
|
||||||
this.expandErrors()
|
this.expandErrors()
|
||||||
}
|
}
|
||||||
|
@ -116,7 +116,7 @@ export default class Errors {
|
||||||
// Register more informative error handler
|
// Register more informative error handler
|
||||||
window.addEventListener(
|
window.addEventListener(
|
||||||
'error',
|
'error',
|
||||||
event => {
|
(event) => {
|
||||||
if (typeof event.error == 'undefined') {
|
if (typeof event.error == 'undefined') {
|
||||||
// This sometimes happens in Edge. Since we have no error
|
// This sometimes happens in Edge. Since we have no error
|
||||||
// position, we cannot do much beside an info log.
|
// position, we cannot do much beside an info log.
|
||||||
|
@ -128,7 +128,7 @@ export default class Errors {
|
||||||
true
|
true
|
||||||
)
|
)
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', event => {
|
document.addEventListener('DOMContentLoaded', (event) => {
|
||||||
this.showErrors()
|
this.showErrors()
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
|
@ -2,7 +2,7 @@ export default class Events {
|
||||||
static stop(event) {
|
static stop(event) {
|
||||||
event.preventDefault()
|
event.preventDefault()
|
||||||
// I removed this, as it destroys all the Hammer.js events.
|
// I removed this, as it destroys all the Hammer.js events.
|
||||||
// And also the click event.
|
// And also the click event.
|
||||||
// It seems to have no (apparent) negative impact. -SO
|
// It seems to have no (apparent) negative impact. -SO
|
||||||
// event.stopPropagation()
|
// event.stopPropagation()
|
||||||
}
|
}
|
||||||
|
@ -65,7 +65,7 @@ export default class Events {
|
||||||
clientX: t.clientX,
|
clientX: t.clientX,
|
||||||
clientY: t.clientY,
|
clientY: t.clientY,
|
||||||
pageX: t.pageX,
|
pageX: t.pageX,
|
||||||
pageY: t.pageY
|
pageY: t.pageY,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
return touches
|
return touches
|
||||||
|
@ -105,8 +105,8 @@ export default class Events {
|
||||||
ctrlKey: event.ctrlKey,
|
ctrlKey: event.ctrlKey,
|
||||||
altKey: event.altKey,
|
altKey: event.altKey,
|
||||||
shiftKey: event.shiftKey,
|
shiftKey: event.shiftKey,
|
||||||
metaKey: event.metaKey
|
metaKey: event.metaKey,
|
||||||
}
|
},
|
||||||
}
|
}
|
||||||
if (event.type.startsWith('touch')) {
|
if (event.type.startsWith('touch')) {
|
||||||
// On Safari-WebKit the TouchEvent has layerX, layerY coordinates
|
// On Safari-WebKit the TouchEvent has layerX, layerY coordinates
|
||||||
|
@ -219,7 +219,7 @@ export default class Events {
|
||||||
width: '480px',
|
width: '480px',
|
||||||
height: '640px',
|
height: '640px',
|
||||||
overflow: 'auto',
|
overflow: 'auto',
|
||||||
backgroundColor: 'lightgray'
|
backgroundColor: 'lightgray',
|
||||||
})
|
})
|
||||||
document.body.appendChild(element)
|
document.body.appendChild(element)
|
||||||
this.popup = element
|
this.popup = element
|
||||||
|
@ -240,7 +240,7 @@ export default class Events {
|
||||||
}
|
}
|
||||||
Elements.setStyle(this.popup, {
|
Elements.setStyle(this.popup, {
|
||||||
left: event.clientX + 'px',
|
left: event.clientX + 'px',
|
||||||
top: event.clientY + 'px'
|
top: event.clientY + 'px',
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -17,7 +17,7 @@ export class CardLoader {
|
||||||
scale = 1,
|
scale = 1,
|
||||||
minScale = 0.5,
|
minScale = 0.5,
|
||||||
maxScale = 1.5,
|
maxScale = 1.5,
|
||||||
rotation = 0
|
rotation = 0,
|
||||||
} = {}
|
} = {}
|
||||||
) {
|
) {
|
||||||
this.src = src
|
this.src = src
|
||||||
|
@ -52,8 +52,8 @@ export class PDFLoader extends CardLoader {
|
||||||
|
|
||||||
load(domNode) {
|
load(domNode) {
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
PDFJS.getDocument(this.src).then(pdf => {
|
PDFJS.getDocument(this.src).then((pdf) => {
|
||||||
pdf.getPage(1).then(page => {
|
pdf.getPage(1).then((page) => {
|
||||||
let scale = this.scale * app.renderer.resolution
|
let scale = this.scale * app.renderer.resolution
|
||||||
let invScale = 1 / scale
|
let invScale = 1 / scale
|
||||||
let viewport = page.getViewport(scale)
|
let viewport = page.getViewport(scale)
|
||||||
|
@ -67,7 +67,7 @@ export class PDFLoader extends CardLoader {
|
||||||
// Render PDF page into canvas context.
|
// Render PDF page into canvas context.
|
||||||
let renderContext = {
|
let renderContext = {
|
||||||
canvasContext: context,
|
canvasContext: context,
|
||||||
viewport: viewport
|
viewport: viewport,
|
||||||
}
|
}
|
||||||
page.render(renderContext)
|
page.render(renderContext)
|
||||||
domNode.appendChild(canvas)
|
domNode.appendChild(canvas)
|
||||||
|
@ -87,7 +87,7 @@ export class ImageLoader extends CardLoader {
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
let isImage = domNode instanceof HTMLImageElement
|
let isImage = domNode instanceof HTMLImageElement
|
||||||
let image = isImage ? domNode : document.createElement('img')
|
let image = isImage ? domNode : document.createElement('img')
|
||||||
image.onload = e => {
|
image.onload = (e) => {
|
||||||
if (!isImage) {
|
if (!isImage) {
|
||||||
domNode.appendChild(image)
|
domNode.appendChild(image)
|
||||||
this.addedNode = image
|
this.addedNode = image
|
||||||
|
@ -103,7 +103,7 @@ export class ImageLoader extends CardLoader {
|
||||||
image.height = image.naturalHeight
|
image.height = image.naturalHeight
|
||||||
resolve(this)
|
resolve(this)
|
||||||
}
|
}
|
||||||
image.onerror = e => {
|
image.onerror = (e) => {
|
||||||
reject(this)
|
reject(this)
|
||||||
}
|
}
|
||||||
image.src = this.src
|
image.src = this.src
|
||||||
|
@ -125,10 +125,10 @@ export class FrameLoader extends CardLoader {
|
||||||
domNode.appendChild(iframe)
|
domNode.appendChild(iframe)
|
||||||
this.addedNode = iframe
|
this.addedNode = iframe
|
||||||
}
|
}
|
||||||
iframe.onload = e => {
|
iframe.onload = (e) => {
|
||||||
resolve(this)
|
resolve(this)
|
||||||
}
|
}
|
||||||
iframe.onerror = e => {
|
iframe.onerror = (e) => {
|
||||||
reject(this)
|
reject(this)
|
||||||
}
|
}
|
||||||
iframe.src = this.src
|
iframe.src = this.src
|
||||||
|
@ -141,7 +141,7 @@ export class HTMLLoader extends CardLoader {
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
let xhr = new XMLHttpRequest()
|
let xhr = new XMLHttpRequest()
|
||||||
xhr.open('GET', this.src, false)
|
xhr.open('GET', this.src, false)
|
||||||
xhr.onreadystatechange = e => {
|
xhr.onreadystatechange = (e) => {
|
||||||
if (xhr.readyState == 4) {
|
if (xhr.readyState == 4) {
|
||||||
domNode.innerHTML = this.prepare(xhr.response)
|
domNode.innerHTML = this.prepare(xhr.response)
|
||||||
this.addedNode = domNode.firstElementChild
|
this.addedNode = domNode.firstElementChild
|
||||||
|
@ -151,7 +151,7 @@ export class HTMLLoader extends CardLoader {
|
||||||
resolve(this)
|
resolve(this)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
xhr.onerror = e => {
|
xhr.onerror = (e) => {
|
||||||
reject(this)
|
reject(this)
|
||||||
}
|
}
|
||||||
xhr.send()
|
xhr.send()
|
||||||
|
@ -209,7 +209,7 @@ export class DOMFlip {
|
||||||
onClose = null,
|
onClose = null,
|
||||||
onUpdate = null,
|
onUpdate = null,
|
||||||
onRemoved = null,
|
onRemoved = null,
|
||||||
onLoaded = null
|
onLoaded = null,
|
||||||
} = {}
|
} = {}
|
||||||
) {
|
) {
|
||||||
this.domScatterContainer = domScatterContainer
|
this.domScatterContainer = domScatterContainer
|
||||||
|
@ -251,8 +251,8 @@ export class DOMFlip {
|
||||||
// call we can access the new dom element by id
|
// call we can access the new dom element by id
|
||||||
this.cardWrapper = dom.querySelector('#' + this.id)
|
this.cardWrapper = dom.querySelector('#' + this.id)
|
||||||
let front = this.cardWrapper.querySelector('.front')
|
let front = this.cardWrapper.querySelector('.front')
|
||||||
this.frontLoader.load(front).then(loader => {
|
this.frontLoader.load(front).then((loader) => {
|
||||||
this.frontLoaded(loader).then(obj => {
|
this.frontLoaded(loader).then((obj) => {
|
||||||
if (this.onLoaded) this.onLoaded()
|
if (this.onLoaded) this.onLoaded()
|
||||||
resolve(this)
|
resolve(this)
|
||||||
})
|
})
|
||||||
|
@ -276,7 +276,7 @@ export class DOMFlip {
|
||||||
scalable: this.scalable,
|
scalable: this.scalable,
|
||||||
rotatable: this.rotatable,
|
rotatable: this.rotatable,
|
||||||
overdoScaling: this.overdoScaling,
|
overdoScaling: this.overdoScaling,
|
||||||
tapDelegate: this.tapDelegateFactory ? new this.tapDelegateFactory(this.cardWrapper) : null
|
tapDelegate: this.tapDelegateFactory ? new this.tapDelegateFactory(this.cardWrapper) : null,
|
||||||
})
|
})
|
||||||
|
|
||||||
if (this.center) {
|
if (this.center) {
|
||||||
|
@ -284,7 +284,7 @@ export class DOMFlip {
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.closeOnMinScale) {
|
if (this.closeOnMinScale) {
|
||||||
const removeOnMinScale = function() {
|
const removeOnMinScale = function () {
|
||||||
if (scatter.scale <= scatter.minScale) {
|
if (scatter.scale <= scatter.minScale) {
|
||||||
this.flippable.close()
|
this.flippable.close()
|
||||||
|
|
||||||
|
@ -306,7 +306,7 @@ export class DOMFlip {
|
||||||
let back = this.cardWrapper.querySelector('.back')
|
let back = this.cardWrapper.querySelector('.back')
|
||||||
|
|
||||||
if (this.preloadBack) {
|
if (this.preloadBack) {
|
||||||
this.backLoader.load(back).then(loader => {
|
this.backLoader.load(back).then((loader) => {
|
||||||
this.setupFlippable(flippable, loader)
|
this.setupFlippable(flippable, loader)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
@ -340,7 +340,7 @@ export class DOMFlip {
|
||||||
} else {
|
} else {
|
||||||
let back = this.cardWrapper.querySelector('.back')
|
let back = this.cardWrapper.querySelector('.back')
|
||||||
let flippable = this.flippable
|
let flippable = this.flippable
|
||||||
this.backLoader.load(back).then(loader => {
|
this.backLoader.load(back).then((loader) => {
|
||||||
this.setupFlippable(flippable, loader)
|
this.setupFlippable(flippable, loader)
|
||||||
flippable.start({ duration: this.flipDuration, targetCenter })
|
flippable.start({ duration: this.flipDuration, targetCenter })
|
||||||
})
|
})
|
||||||
|
@ -352,7 +352,7 @@ export class DOMFlip {
|
||||||
opacity: 0,
|
opacity: 0,
|
||||||
onComplete: () => {
|
onComplete: () => {
|
||||||
this.cardWrapper.remove()
|
this.cardWrapper.remove()
|
||||||
}
|
},
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -400,7 +400,7 @@ export class DOMFlippable {
|
||||||
TweenLite.set(this.back, { rotationY: -180 })
|
TweenLite.set(this.back, { rotationY: -180 })
|
||||||
TweenLite.set([this.back, this.front], {
|
TweenLite.set([this.back, this.front], {
|
||||||
backfaceVisibility: 'hidden',
|
backfaceVisibility: 'hidden',
|
||||||
perspective: 5000
|
perspective: 5000,
|
||||||
})
|
})
|
||||||
TweenLite.set(this.front, { visibility: 'visible' })
|
TweenLite.set(this.front, { visibility: 'visible' })
|
||||||
this.infoBtn = element.querySelector('.infoBtn')
|
this.infoBtn = element.querySelector('.infoBtn')
|
||||||
|
@ -412,18 +412,18 @@ export class DOMFlippable {
|
||||||
scatter.tapDelegate = tapDelegate
|
scatter.tapDelegate = tapDelegate
|
||||||
}
|
}
|
||||||
if (this.infoBtn) {
|
if (this.infoBtn) {
|
||||||
scatter.tapDelegate.onTap(this.infoBtn, event => {
|
scatter.tapDelegate.onTap(this.infoBtn, (event) => {
|
||||||
this.flip.start()
|
this.flip.start()
|
||||||
})
|
})
|
||||||
this.enable(this.infoBtn)
|
this.enable(this.infoBtn)
|
||||||
}
|
}
|
||||||
if (this.backBtn) {
|
if (this.backBtn) {
|
||||||
scatter.tapDelegate.onTap(this.backBtn, event => {
|
scatter.tapDelegate.onTap(this.backBtn, (event) => {
|
||||||
this.start()
|
this.start()
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
if (this.closeBtn) {
|
if (this.closeBtn) {
|
||||||
scatter.tapDelegate.onTap(this.closeBtn, event => {
|
scatter.tapDelegate.onTap(this.closeBtn, (event) => {
|
||||||
this.close()
|
this.close()
|
||||||
})
|
})
|
||||||
this.enable(this.closeBtn)
|
this.enable(this.closeBtn)
|
||||||
|
@ -447,7 +447,7 @@ export class DOMFlippable {
|
||||||
if (this.onRemoved) {
|
if (this.onRemoved) {
|
||||||
this.onRemoved.call(this)
|
this.onRemoved.call(this)
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -476,7 +476,7 @@ export class DOMFlippable {
|
||||||
|
|
||||||
scaleButtons() {
|
scaleButtons() {
|
||||||
TweenLite.set([this.infoBtn, this.backBtn, this.closeBtn], {
|
TweenLite.set([this.infoBtn, this.backBtn, this.closeBtn], {
|
||||||
scale: this.buttonScale
|
scale: this.buttonScale,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -589,7 +589,7 @@ export class DOMFlippable {
|
||||||
ease: Power1.easeOut,
|
ease: Power1.easeOut,
|
||||||
transformOrigin: '50% 50%',
|
transformOrigin: '50% 50%',
|
||||||
onUpdate,
|
onUpdate,
|
||||||
onComplete: e => {
|
onComplete: (e) => {
|
||||||
if (this.flipped) {
|
if (this.flipped) {
|
||||||
//this.hide(this.front)
|
//this.hide(this.front)
|
||||||
this.enable(this.backBtn)
|
this.enable(this.backBtn)
|
||||||
|
@ -618,7 +618,7 @@ export class DOMFlippable {
|
||||||
this.scatter.translatable = translatable
|
this.scatter.translatable = translatable
|
||||||
this.scatter.rotatable = rotatable
|
this.scatter.rotatable = rotatable
|
||||||
},
|
},
|
||||||
force3D: true
|
force3D: true,
|
||||||
})
|
})
|
||||||
// See https://greensock.com/forums/topic/7997-rotate-the-shortest-way/
|
// See https://greensock.com/forums/topic/7997-rotate-the-shortest-way/
|
||||||
TweenLite.to(this.element, this.flipDuration / 2, {
|
TweenLite.to(this.element, this.flipDuration / 2, {
|
||||||
|
@ -630,7 +630,7 @@ export class DOMFlippable {
|
||||||
height: h,
|
height: h,
|
||||||
x: x,
|
x: x,
|
||||||
y: y,
|
y: y,
|
||||||
onComplete: e => {
|
onComplete: (e) => {
|
||||||
if (this.flipped) {
|
if (this.flipped) {
|
||||||
this.hide(this.front)
|
this.hide(this.front)
|
||||||
// this.hide(this.infoBtn)
|
// this.hide(this.infoBtn)
|
||||||
|
@ -638,7 +638,7 @@ export class DOMFlippable {
|
||||||
this.hide(this.back)
|
this.hide(this.back)
|
||||||
// this.show(this.infoBtn)
|
// this.show(this.infoBtn)
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -5,7 +5,7 @@ export class FrameContainer {
|
||||||
constructor(element) {
|
constructor(element) {
|
||||||
this.element = element
|
this.element = element
|
||||||
this.delegate = new InteractionMapper(element, this, {
|
this.delegate = new InteractionMapper(element, this, {
|
||||||
mouseWheelElement: window
|
mouseWheelElement: window,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -47,7 +47,7 @@ export class FrameTarget {
|
||||||
bubbles: true,
|
bubbles: true,
|
||||||
cancelable: true,
|
cancelable: true,
|
||||||
clientX: p.x,
|
clientX: p.x,
|
||||||
clientY: p.y
|
clientY: p.y,
|
||||||
})
|
})
|
||||||
this.target.dispatchEvent(event)
|
this.target.dispatchEvent(event)
|
||||||
}
|
}
|
||||||
|
@ -79,7 +79,7 @@ export class FrameTarget {
|
||||||
radiusX: 2.5,
|
radiusX: 2.5,
|
||||||
radiusY: 2.5,
|
radiusY: 2.5,
|
||||||
rotationAngle: 10,
|
rotationAngle: 10,
|
||||||
force: 0.5
|
force: 0.5,
|
||||||
})
|
})
|
||||||
|
|
||||||
const touchEvent = new TouchEvent(type, {
|
const touchEvent = new TouchEvent(type, {
|
||||||
|
@ -88,7 +88,7 @@ export class FrameTarget {
|
||||||
touches: [touchObj],
|
touches: [touchObj],
|
||||||
targetTouches: [touchObj],
|
targetTouches: [touchObj],
|
||||||
changedTouches: [touchObj],
|
changedTouches: [touchObj],
|
||||||
shiftKey: false
|
shiftKey: false,
|
||||||
})
|
})
|
||||||
if (this.debug) console.log('simulateTouchEventChrome', touchEvent)
|
if (this.debug) console.log('simulateTouchEventChrome', touchEvent)
|
||||||
this.target.dispatchEvent(touchEvent)
|
this.target.dispatchEvent(touchEvent)
|
||||||
|
@ -101,7 +101,7 @@ export class FrameTarget {
|
||||||
bubbles: true,
|
bubbles: true,
|
||||||
cancelable: true,
|
cancelable: true,
|
||||||
clientX: p.x,
|
clientX: p.x,
|
||||||
clientY: p.y
|
clientY: p.y,
|
||||||
}
|
}
|
||||||
data[touchEventKey] = this.createTouchList(pointMap)
|
data[touchEventKey] = this.createTouchList(pointMap)
|
||||||
let event = new TouchEvent(type, data)
|
let event = new TouchEvent(type, data)
|
||||||
|
|
|
@ -14,7 +14,7 @@ function onerror(event) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function load() {
|
function load() {
|
||||||
loadQueue.forEach(url => {
|
loadQueue.forEach((url) => {
|
||||||
let xhr = new XMLHttpRequest()
|
let xhr = new XMLHttpRequest()
|
||||||
xhr.responseType = 'blob'
|
xhr.responseType = 'blob'
|
||||||
xhr.onload = onload
|
xhr.onload = onload
|
||||||
|
@ -25,7 +25,7 @@ function load() {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
self.onmessage = event => {
|
self.onmessage = (event) => {
|
||||||
let msg = event.data
|
let msg = event.data
|
||||||
switch (msg.command) {
|
switch (msg.command) {
|
||||||
case 'load':
|
case 'load':
|
||||||
|
|
|
@ -21,7 +21,7 @@ export default class Index {
|
||||||
|
|
||||||
let icon = wrapper.querySelector('.icon')
|
let icon = wrapper.querySelector('.icon')
|
||||||
|
|
||||||
icon.onerror = e => {
|
icon.onerror = (e) => {
|
||||||
if (this.notfound) icon.src = this.notfound
|
if (this.notfound) icon.src = this.notfound
|
||||||
}
|
}
|
||||||
let iconSrc = src.replace('.html', '.png')
|
let iconSrc = src.replace('.html', '.png')
|
||||||
|
@ -49,7 +49,7 @@ export default class Index {
|
||||||
let icon = wrapper.querySelector('.icon')
|
let icon = wrapper.querySelector('.icon')
|
||||||
|
|
||||||
icon.parentNode.replaceChild(iframe, icon)
|
icon.parentNode.replaceChild(iframe, icon)
|
||||||
iframe.onload = e => {
|
iframe.onload = (e) => {
|
||||||
this.frames()
|
this.frames()
|
||||||
}
|
}
|
||||||
iframe.src = src + window.location.search
|
iframe.src = src + window.location.search
|
||||||
|
|
|
@ -553,7 +553,7 @@ export class InteractionDelegate {
|
||||||
useCapture = true,
|
useCapture = true,
|
||||||
capturePointerEvents = true,
|
capturePointerEvents = true,
|
||||||
cancelOnWindowOut = true,
|
cancelOnWindowOut = true,
|
||||||
debug = false
|
debug = false,
|
||||||
} = {}
|
} = {}
|
||||||
) {
|
) {
|
||||||
this.debug = debug
|
this.debug = debug
|
||||||
|
@ -589,7 +589,7 @@ export class InteractionDelegate {
|
||||||
if (this.debug) console.log('Pointer API' + window.PointerEvent)
|
if (this.debug) console.log('Pointer API' + window.PointerEvent)
|
||||||
element.addEventListener(
|
element.addEventListener(
|
||||||
'pointerdown',
|
'pointerdown',
|
||||||
e => {
|
(e) => {
|
||||||
if (this.debug) console.log('pointerdown', e.pointerId)
|
if (this.debug) console.log('pointerdown', e.pointerId)
|
||||||
if (this.capture(e)) {
|
if (this.capture(e)) {
|
||||||
if (this.capturePointerEvents) {
|
if (this.capturePointerEvents) {
|
||||||
|
@ -606,7 +606,7 @@ export class InteractionDelegate {
|
||||||
)
|
)
|
||||||
element.addEventListener(
|
element.addEventListener(
|
||||||
'pointermove',
|
'pointermove',
|
||||||
e => {
|
(e) => {
|
||||||
if (this.debug) console.log('pointermove', e.pointerId, e.pointerType)
|
if (this.debug) console.log('pointermove', e.pointerId, e.pointerType)
|
||||||
|
|
||||||
if (e.pointerType == 'touch' || (e.pointerType == 'mouse' && Events.isPointerDown(e))) {
|
if (e.pointerType == 'touch' || (e.pointerType == 'mouse' && Events.isPointerDown(e))) {
|
||||||
|
@ -619,7 +619,7 @@ export class InteractionDelegate {
|
||||||
)
|
)
|
||||||
element.addEventListener(
|
element.addEventListener(
|
||||||
'pointerup',
|
'pointerup',
|
||||||
e => {
|
(e) => {
|
||||||
if (this.debug) console.log('pointerup', e.pointerId, e.pointerType)
|
if (this.debug) console.log('pointerup', e.pointerId, e.pointerType)
|
||||||
this.onEnd(e)
|
this.onEnd(e)
|
||||||
if (this.capturePointerEvents) {
|
if (this.capturePointerEvents) {
|
||||||
|
@ -634,7 +634,7 @@ export class InteractionDelegate {
|
||||||
)
|
)
|
||||||
element.addEventListener(
|
element.addEventListener(
|
||||||
'pointercancel',
|
'pointercancel',
|
||||||
e => {
|
(e) => {
|
||||||
if (this.debug) console.log('pointercancel', e.pointerId, e.pointerType)
|
if (this.debug) console.log('pointercancel', e.pointerId, e.pointerType)
|
||||||
this.onEnd(e)
|
this.onEnd(e)
|
||||||
if (this.capturePointerEvents) element.releasePointerCapture(e.pointerId)
|
if (this.capturePointerEvents) element.releasePointerCapture(e.pointerId)
|
||||||
|
@ -645,7 +645,7 @@ export class InteractionDelegate {
|
||||||
if (!this.capturePointerEvents) {
|
if (!this.capturePointerEvents) {
|
||||||
element.addEventListener(
|
element.addEventListener(
|
||||||
'pointerleave',
|
'pointerleave',
|
||||||
e => {
|
(e) => {
|
||||||
if (this.debug) console.log('pointerleave', e.pointerId, e.pointerType)
|
if (this.debug) console.log('pointerleave', e.pointerId, e.pointerType)
|
||||||
if (e.target == element) this.onEnd(e)
|
if (e.target == element) this.onEnd(e)
|
||||||
},
|
},
|
||||||
|
@ -656,7 +656,7 @@ export class InteractionDelegate {
|
||||||
if (!this.capturePointerEvents) {
|
if (!this.capturePointerEvents) {
|
||||||
element.addEventListener(
|
element.addEventListener(
|
||||||
'pointerout',
|
'pointerout',
|
||||||
e => {
|
(e) => {
|
||||||
if (this.debug) console.log('pointerout', e.pointerId, e.pointerType)
|
if (this.debug) console.log('pointerout', e.pointerId, e.pointerType)
|
||||||
if (e.target == element) this.onEnd(e)
|
if (e.target == element) this.onEnd(e)
|
||||||
},
|
},
|
||||||
|
@ -667,7 +667,7 @@ export class InteractionDelegate {
|
||||||
if (this.cancelOnWindowOut) {
|
if (this.cancelOnWindowOut) {
|
||||||
window.addEventListener(
|
window.addEventListener(
|
||||||
'pointerout',
|
'pointerout',
|
||||||
e => {
|
(e) => {
|
||||||
if (this.debug) console.log('pointerout', e.pointerId, e.pointerType, e.target)
|
if (this.debug) console.log('pointerout', e.pointerId, e.pointerType, e.target)
|
||||||
if (e.target == element) {
|
if (e.target == element) {
|
||||||
this.onEnd(e)
|
this.onEnd(e)
|
||||||
|
@ -680,7 +680,7 @@ export class InteractionDelegate {
|
||||||
if (this.debug) console.log('Touch API')
|
if (this.debug) console.log('Touch API')
|
||||||
element.addEventListener(
|
element.addEventListener(
|
||||||
'touchstart',
|
'touchstart',
|
||||||
e => {
|
(e) => {
|
||||||
if (this.debug) console.log('touchstart', this.touchPoints(e))
|
if (this.debug) console.log('touchstart', this.touchPoints(e))
|
||||||
if (this.capture(e)) {
|
if (this.capture(e)) {
|
||||||
for (let touch of e.changedTouches) {
|
for (let touch of e.changedTouches) {
|
||||||
|
@ -692,7 +692,7 @@ export class InteractionDelegate {
|
||||||
)
|
)
|
||||||
element.addEventListener(
|
element.addEventListener(
|
||||||
'touchmove',
|
'touchmove',
|
||||||
e => {
|
(e) => {
|
||||||
if (this.debug) console.log('touchmove', this.touchPoints(e), e)
|
if (this.debug) console.log('touchmove', this.touchPoints(e), e)
|
||||||
for (let touch of e.changedTouches) {
|
for (let touch of e.changedTouches) {
|
||||||
this.onMove(touch)
|
this.onMove(touch)
|
||||||
|
@ -705,7 +705,7 @@ export class InteractionDelegate {
|
||||||
)
|
)
|
||||||
element.addEventListener(
|
element.addEventListener(
|
||||||
'touchend',
|
'touchend',
|
||||||
e => {
|
(e) => {
|
||||||
if (this.debug) console.log('touchend', this.touchPoints(e))
|
if (this.debug) console.log('touchend', this.touchPoints(e))
|
||||||
for (let touch of e.changedTouches) {
|
for (let touch of e.changedTouches) {
|
||||||
this.onEnd(touch)
|
this.onEnd(touch)
|
||||||
|
@ -715,7 +715,7 @@ export class InteractionDelegate {
|
||||||
)
|
)
|
||||||
element.addEventListener(
|
element.addEventListener(
|
||||||
'touchcancel',
|
'touchcancel',
|
||||||
e => {
|
(e) => {
|
||||||
if (this.debug) console.log('touchcancel', e.targetTouches.length, e.changedTouches.length)
|
if (this.debug) console.log('touchcancel', e.targetTouches.length, e.changedTouches.length)
|
||||||
for (let touch of e.changedTouches) {
|
for (let touch of e.changedTouches) {
|
||||||
this.onEnd(touch)
|
this.onEnd(touch)
|
||||||
|
@ -728,7 +728,7 @@ export class InteractionDelegate {
|
||||||
|
|
||||||
element.addEventListener(
|
element.addEventListener(
|
||||||
'mousedown',
|
'mousedown',
|
||||||
e => {
|
(e) => {
|
||||||
if (this.debug) console.log('mousedown', e)
|
if (this.debug) console.log('mousedown', e)
|
||||||
if (this.capture(e)) {
|
if (this.capture(e)) {
|
||||||
this.onStart(e)
|
this.onStart(e)
|
||||||
|
@ -738,7 +738,7 @@ export class InteractionDelegate {
|
||||||
)
|
)
|
||||||
element.addEventListener(
|
element.addEventListener(
|
||||||
'mousemove',
|
'mousemove',
|
||||||
e => {
|
(e) => {
|
||||||
// Dow we only use move events if the mouse is down?
|
// Dow we only use move events if the mouse is down?
|
||||||
// HOver effects have to be implemented by other means
|
// HOver effects have to be implemented by other means
|
||||||
// && Events.isMouseDown(e))
|
// && Events.isMouseDown(e))
|
||||||
|
@ -752,7 +752,7 @@ export class InteractionDelegate {
|
||||||
)
|
)
|
||||||
element.addEventListener(
|
element.addEventListener(
|
||||||
'mouseup',
|
'mouseup',
|
||||||
e => {
|
(e) => {
|
||||||
if (this.debug) console.log('mouseup', e)
|
if (this.debug) console.log('mouseup', e)
|
||||||
this.onEnd(e)
|
this.onEnd(e)
|
||||||
},
|
},
|
||||||
|
@ -762,7 +762,7 @@ export class InteractionDelegate {
|
||||||
if (!this.capturePointerEvents) {
|
if (!this.capturePointerEvents) {
|
||||||
element.addEventListener(
|
element.addEventListener(
|
||||||
'mouseout',
|
'mouseout',
|
||||||
e => {
|
(e) => {
|
||||||
if (e.target == element) {
|
if (e.target == element) {
|
||||||
this.onEnd(e)
|
this.onEnd(e)
|
||||||
console.warn("Shouldn't happen: mouseout ends interaction")
|
console.warn("Shouldn't happen: mouseout ends interaction")
|
||||||
|
@ -774,7 +774,7 @@ export class InteractionDelegate {
|
||||||
if (this.cancelOnWindowOut) {
|
if (this.cancelOnWindowOut) {
|
||||||
window.addEventListener(
|
window.addEventListener(
|
||||||
'mouseout',
|
'mouseout',
|
||||||
e => {
|
(e) => {
|
||||||
if (e.target == element) {
|
if (e.target == element) {
|
||||||
this.onEnd(e)
|
this.onEnd(e)
|
||||||
}
|
}
|
||||||
|
@ -968,7 +968,7 @@ export class InteractionMapper extends InteractionDelegate {
|
||||||
useCapture = true,
|
useCapture = true,
|
||||||
capturePointerEvents = true,
|
capturePointerEvents = true,
|
||||||
mouseWheelElement = null,
|
mouseWheelElement = null,
|
||||||
logInteractionsAbove = 12
|
logInteractionsAbove = 12,
|
||||||
} = {}
|
} = {}
|
||||||
) {
|
) {
|
||||||
super(element, target, {
|
super(element, target, {
|
||||||
|
@ -976,7 +976,7 @@ export class InteractionMapper extends InteractionDelegate {
|
||||||
useCapture,
|
useCapture,
|
||||||
capturePointerEvents,
|
capturePointerEvents,
|
||||||
longPressTime,
|
longPressTime,
|
||||||
mouseWheelElement
|
mouseWheelElement,
|
||||||
})
|
})
|
||||||
this.logInteractionsAbove = logInteractionsAbove
|
this.logInteractionsAbove = logInteractionsAbove
|
||||||
}
|
}
|
||||||
|
@ -1132,7 +1132,7 @@ export class InteractionMapper extends InteractionDelegate {
|
||||||
hammer.get('tap').set(opts)
|
hammer.get('tap').set(opts)
|
||||||
}
|
}
|
||||||
|
|
||||||
hammer.on(type, event => {
|
hammer.on(type, (event) => {
|
||||||
cb(event)
|
cb(event)
|
||||||
})
|
})
|
||||||
|
|
||||||
|
@ -1146,7 +1146,7 @@ export class InteractionMapper extends InteractionDelegate {
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
for (let j = 0; j < elements.length; j++) {
|
for (let j = 0; j < elements.length; j++) {
|
||||||
Hammer.on(elements[j], type, event => {
|
Hammer.on(elements[j], type, (event) => {
|
||||||
cb(event)
|
cb(event)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
@ -1177,7 +1177,7 @@ export class InteractionMapper extends InteractionDelegate {
|
||||||
|
|
||||||
if (Hammer.__hammers.has(element)) {
|
if (Hammer.__hammers.has(element)) {
|
||||||
const elementHammers = Hammer.__hammers.get(element)
|
const elementHammers = Hammer.__hammers.get(element)
|
||||||
elementHammers.forEach(it => it.destroy())
|
elementHammers.forEach((it) => it.destroy())
|
||||||
Hammer.__hammers.delete(element)
|
Hammer.__hammers.delete(element)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -6,14 +6,14 @@ let logMessages = new Set()
|
||||||
let logHandlers = {
|
let logHandlers = {
|
||||||
log: console.log,
|
log: console.log,
|
||||||
warn: console.warn,
|
warn: console.warn,
|
||||||
error: console.error
|
error: console.error,
|
||||||
}
|
}
|
||||||
|
|
||||||
try {
|
try {
|
||||||
ipc = window.ipcRenderer || require('electron').ipcRenderer
|
ipc = window.ipcRenderer || require('electron').ipcRenderer
|
||||||
logHandlers.log = message => ipc.send('log', message)
|
logHandlers.log = (message) => ipc.send('log', message)
|
||||||
logHandlers.warn = message => ipc.send('warn', message)
|
logHandlers.warn = (message) => ipc.send('warn', message)
|
||||||
logHandlers.error = message => ipc.send('error', message)
|
logHandlers.error = (message) => ipc.send('error', message)
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.log('Cannot use electron logging.')
|
console.log('Cannot use electron logging.')
|
||||||
}
|
}
|
||||||
|
|
|
@ -71,7 +71,7 @@ export default class AbstractPopup extends PIXI.Graphics {
|
||||||
radius: theme.radius,
|
radius: theme.radius,
|
||||||
onHidden: null,
|
onHidden: null,
|
||||||
visible: true,
|
visible: true,
|
||||||
orientation: null
|
orientation: null,
|
||||||
},
|
},
|
||||||
opts
|
opts
|
||||||
)
|
)
|
||||||
|
@ -105,7 +105,7 @@ export default class AbstractPopup extends PIXI.Graphics {
|
||||||
// interaction
|
// interaction
|
||||||
//-----------------
|
//-----------------
|
||||||
this.interactive = true
|
this.interactive = true
|
||||||
this.on('added', e => {
|
this.on('added', (e) => {
|
||||||
this.show()
|
this.show()
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
@ -285,7 +285,7 @@ export default class AbstractPopup extends PIXI.Graphics {
|
||||||
if (cb) {
|
if (cb) {
|
||||||
cb.call(this)
|
cb.call(this)
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
return this
|
return this
|
||||||
|
@ -305,7 +305,7 @@ export default class AbstractPopup extends PIXI.Graphics {
|
||||||
if (cb) {
|
if (cb) {
|
||||||
cb.call(this)
|
cb.call(this)
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
if (this.opts.onHidden) {
|
if (this.opts.onHidden) {
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en" style="max-width: none;">
|
||||||
<head>
|
<head>
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||||
|
|
||||||
|
|
|
@ -8,10 +8,8 @@
|
||||||
<link rel="stylesheet" href=".././3rdparty/highlight/styles/default.css">
|
<link rel="stylesheet" href=".././3rdparty/highlight/styles/default.css">
|
||||||
<link rel="stylesheet" href="../../css/doctest.css">
|
<link rel="stylesheet" href="../../css/doctest.css">
|
||||||
|
|
||||||
<script src=".././3rdparty/highlight/highlight.pack.js"></script>
|
<script src="../../lib/3rdparty/highlight/highlight.pack.js"></script>
|
||||||
<script src=".././3rdparty/all.js"></script>
|
<script src="../../dist/iwmlib.3rdparty.js"></script>
|
||||||
|
|
||||||
<script src=".../../dist/iwmlib.pixi.js"></script>
|
|
||||||
<script src="../../dist/iwmlib.pixi.js"></script>
|
<script src="../../dist/iwmlib.pixi.js"></script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|
|
@ -50,21 +50,21 @@ const app = new PIXIApp({
|
||||||
app.setup()
|
app.setup()
|
||||||
app.run()
|
app.run()
|
||||||
|
|
||||||
let highlightBtn = new PIXI.Graphics();
|
// let highlightBtn = new PIXI.Graphics();
|
||||||
highlightBtn.lineStyle(2, 0x033792);
|
// highlightBtn.lineStyle(2, 0x033792);
|
||||||
highlightBtn.drawRoundedRect(15, 40, 30, 30, 10);
|
// highlightBtn.drawRoundedRect(15, 40, 30, 30, 10);
|
||||||
highlightBtn.endFill();
|
// highlightBtn.endFill();
|
||||||
app.stage.addChild(highlightBtn);
|
// app.stage.addChild(highlightBtn);
|
||||||
|
|
||||||
// app.loadSprites("assets/app-circle.png", sprites => {
|
app.loadSprites("assets/app-circle.png", sprites => {
|
||||||
// let circle = sprites.get("assets/app-circle.png")
|
let circle = sprites.get("assets/app-circle.png")
|
||||||
// circle.anchor.set(0.5)
|
circle.anchor.set(0.5)
|
||||||
// circle.x = app.screen.width / 2
|
circle.x = app.screen.width / 2
|
||||||
// circle.y = app.screen.height / 2
|
circle.y = app.screen.height / 2
|
||||||
// circle.width = 80
|
circle.width = 80
|
||||||
// circle.height = 80
|
circle.height = 80
|
||||||
// app.scene.addChild(circle)
|
app.scene.addChild(circle)
|
||||||
// app.run()
|
app.run()
|
||||||
// })
|
})
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
@ -16,11 +16,11 @@ import { debounce } from '../utils.js'
|
||||||
*
|
*
|
||||||
* @private
|
* @private
|
||||||
* @class
|
* @class
|
||||||
* @extends PIXI.interaction.InteractionManager
|
* @extends PIXI.InteractionManager
|
||||||
* @see {@link http://pixijs.download/dev/docs/PIXI.interaction.InteractionManager.html|PIXI.interaction.InteractionManager}
|
* @see {@link http://pixijs.download/dev/docs/PIXI.interaction.InteractionManager.html|PIXI.interaction.InteractionManager}
|
||||||
* @see {@link https://stackoverflow.com/questions/29710696/webgl-drawing-buffer-size-does-not-equal-canvas-size}
|
* @see {@link https://stackoverflow.com/questions/29710696/webgl-drawing-buffer-size-does-not-equal-canvas-size}
|
||||||
*/
|
*/
|
||||||
class FullscreenInteractionManager extends PIXI.interaction.InteractionManager {
|
class FullscreenInteractionManager extends PIXI.InteractionManager {
|
||||||
mapPositionToPoint(point, x, y) {
|
mapPositionToPoint(point, x, y) {
|
||||||
let resolution = this.renderer.resolution
|
let resolution = this.renderer.resolution
|
||||||
let extendWidth = 1.0
|
let extendWidth = 1.0
|
||||||
|
@ -98,7 +98,7 @@ export default class PIXIApp extends PIXI.Application {
|
||||||
roundPixels = true,
|
roundPixels = true,
|
||||||
monkeyPatchMapping = true,
|
monkeyPatchMapping = true,
|
||||||
adaptive = true,
|
adaptive = true,
|
||||||
graphql = false
|
graphql = false,
|
||||||
}) {
|
}) {
|
||||||
const fullScreen = !width || !height
|
const fullScreen = !width || !height
|
||||||
|
|
||||||
|
@ -111,12 +111,12 @@ export default class PIXIApp extends PIXI.Application {
|
||||||
view,
|
view,
|
||||||
width,
|
width,
|
||||||
height,
|
height,
|
||||||
transparent,
|
backgroundAlpha: transparent,
|
||||||
antialias,
|
antialias,
|
||||||
resolution,
|
resolution,
|
||||||
autoResize,
|
autoResize,
|
||||||
backgroundColor,
|
backgroundColor,
|
||||||
forceCanvas
|
forceCanvas,
|
||||||
})
|
})
|
||||||
|
|
||||||
this.width = width
|
this.width = width
|
||||||
|
@ -137,7 +137,7 @@ export default class PIXIApp extends PIXI.Application {
|
||||||
this.graphql = graphql
|
this.graphql = graphql
|
||||||
if (fullScreen || autoResize) {
|
if (fullScreen || autoResize) {
|
||||||
console.log('App is in fullScreen mode or autoResize mode')
|
console.log('App is in fullScreen mode or autoResize mode')
|
||||||
const resizeDebounced = debounce(event => this.resizeApp(event), 50)
|
const resizeDebounced = debounce((event) => this.resizeApp(event), 50)
|
||||||
window.addEventListener('resize', resizeDebounced)
|
window.addEventListener('resize', resizeDebounced)
|
||||||
document.body.addEventListener('orientationchange', this.checkOrientation.bind(this))
|
document.body.addEventListener('orientationchange', this.checkOrientation.bind(this))
|
||||||
}
|
}
|
||||||
|
@ -167,25 +167,25 @@ export default class PIXIApp extends PIXI.Application {
|
||||||
// GraphQL
|
// GraphQL
|
||||||
if (this.graphql && typeof apollo !== 'undefined') {
|
if (this.graphql && typeof apollo !== 'undefined') {
|
||||||
const networkInterface = apollo.createNetworkInterface({
|
const networkInterface = apollo.createNetworkInterface({
|
||||||
uri: '/graphql'
|
uri: '/graphql',
|
||||||
})
|
})
|
||||||
|
|
||||||
const wsClient = new subscriptions.SubscriptionClient(`wss://${location.hostname}/subscriptions`, {
|
const wsClient = new subscriptions.SubscriptionClient(`wss://${location.hostname}/subscriptions`, {
|
||||||
reconnect: true,
|
reconnect: true,
|
||||||
connectionParams: {}
|
connectionParams: {},
|
||||||
})
|
})
|
||||||
|
|
||||||
const networkInterfaceWithSubscriptions = subscriptions.addGraphQLSubscriptions(networkInterface, wsClient)
|
const networkInterfaceWithSubscriptions = subscriptions.addGraphQLSubscriptions(networkInterface, wsClient)
|
||||||
|
|
||||||
this.apolloClient = new apollo.ApolloClient({
|
this.apolloClient = new apollo.ApolloClient({
|
||||||
networkInterface: networkInterfaceWithSubscriptions
|
networkInterface: networkInterfaceWithSubscriptions,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
// progress
|
// progress
|
||||||
this._progress = new Progress(
|
this._progress = new Progress(
|
||||||
Object.assign({ theme: this.theme }, this.progressOpts, {
|
Object.assign({ theme: this.theme }, this.progressOpts, {
|
||||||
app: this
|
app: this,
|
||||||
})
|
})
|
||||||
)
|
)
|
||||||
this._progress.visible = false
|
this._progress.visible = false
|
||||||
|
@ -214,7 +214,7 @@ export default class PIXIApp extends PIXI.Application {
|
||||||
if (value != this.orient) {
|
if (value != this.orient) {
|
||||||
setTimeout(
|
setTimeout(
|
||||||
100,
|
100,
|
||||||
function() {
|
function () {
|
||||||
this.orientationChanged(true)
|
this.orientationChanged(true)
|
||||||
}.bind(this)
|
}.bind(this)
|
||||||
)
|
)
|
||||||
|
@ -469,7 +469,7 @@ export default class PIXIApp extends PIXI.Application {
|
||||||
loadSprites(resources, loaded = null, { resolutionDependent = true, progress = false } = {}) {
|
loadSprites(resources, loaded = null, { resolutionDependent = true, progress = false } = {}) {
|
||||||
this.loadTextures(
|
this.loadTextures(
|
||||||
resources,
|
resources,
|
||||||
textures => {
|
(textures) => {
|
||||||
let sprites = new Map()
|
let sprites = new Map()
|
||||||
|
|
||||||
for (let [key, texture] of textures) {
|
for (let [key, texture] of textures) {
|
||||||
|
@ -528,7 +528,7 @@ export default class PIXIApp extends PIXI.Application {
|
||||||
}
|
}
|
||||||
|
|
||||||
if (progress) {
|
if (progress) {
|
||||||
loader.on('progress', e => {
|
loader.on('progress', (e) => {
|
||||||
this.progress(e.progress)
|
this.progress(e.progress)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
@ -719,7 +719,7 @@ class FpsDisplay extends PIXI.Graphics {
|
||||||
fontWeight: 'bold',
|
fontWeight: 'bold',
|
||||||
fill: '#f6f6f6',
|
fill: '#f6f6f6',
|
||||||
stroke: '#434f4f',
|
stroke: '#434f4f',
|
||||||
strokeThickness: 3
|
strokeThickness: 3,
|
||||||
})
|
})
|
||||||
)
|
)
|
||||||
this.text.position.set(6, 6)
|
this.text.position.set(6, 6)
|
||||||
|
|
|
@ -11,7 +11,7 @@
|
||||||
<script src="../../dist/iwmlib.pixi.js"></script>
|
<script src="../../dist/iwmlib.pixi.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h1>PIXI.Application with nothing!</h1>
|
<h1>Vanilla PIXI.Application</h1>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
const app = new PIXI.Application({
|
const app = new PIXI.Application({
|
||||||
|
|
|
@ -50,7 +50,7 @@ export default class Badge extends AbstractPopup {
|
||||||
minWidth: 0,
|
minWidth: 0,
|
||||||
minHeight: 0,
|
minHeight: 0,
|
||||||
padding: theme.padding / 2,
|
padding: theme.padding / 2,
|
||||||
tooltip: null
|
tooltip: null,
|
||||||
},
|
},
|
||||||
opts
|
opts
|
||||||
)
|
)
|
||||||
|
@ -84,7 +84,7 @@ export default class Badge extends AbstractPopup {
|
||||||
if (typeof this.opts.tooltip === 'string') {
|
if (typeof this.opts.tooltip === 'string') {
|
||||||
this.tooltip = new Tooltip({
|
this.tooltip = new Tooltip({
|
||||||
object: this,
|
object: this,
|
||||||
content: this.opts.tooltip
|
content: this.opts.tooltip,
|
||||||
})
|
})
|
||||||
} else {
|
} else {
|
||||||
this.opts.tooltip = Object.assign({}, { object: this }, this.opts.tooltip)
|
this.opts.tooltip = Object.assign({}, { object: this }, this.opts.tooltip)
|
||||||
|
|
|
@ -93,7 +93,7 @@ export default class BlurFilter extends PIXI.Filter {
|
||||||
x: value.x,
|
x: value.x,
|
||||||
y: value.y,
|
y: value.y,
|
||||||
width: value.width,
|
width: value.width,
|
||||||
height: value.height
|
height: value.height,
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
const bounds = value.getBounds()
|
const bounds = value.getBounds()
|
||||||
|
@ -102,7 +102,7 @@ export default class BlurFilter extends PIXI.Filter {
|
||||||
x: bounds.x,
|
x: bounds.x,
|
||||||
y: bounds.y,
|
y: bounds.y,
|
||||||
width: bounds.width,
|
width: bounds.width,
|
||||||
height: bounds.height
|
height: bounds.height,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -76,7 +76,7 @@ import Mercator from './maps/projections/mercator.js'
|
||||||
import Robinson from './maps/projections/robinson.js'
|
import Robinson from './maps/projections/robinson.js'
|
||||||
window.Projection = {
|
window.Projection = {
|
||||||
Mercator,
|
Mercator,
|
||||||
Robinson
|
Robinson,
|
||||||
}
|
}
|
||||||
|
|
||||||
import MapViewport from './maps/mapviewport.js'
|
import MapViewport from './maps/mapviewport.js'
|
||||||
|
@ -91,7 +91,7 @@ import {
|
||||||
RigidContainer,
|
RigidContainer,
|
||||||
CompactScatter,
|
CompactScatter,
|
||||||
CoverScatter,
|
CoverScatter,
|
||||||
MapObjectScatter
|
MapObjectScatter,
|
||||||
} from './maps/scatter.js'
|
} from './maps/scatter.js'
|
||||||
|
|
||||||
window.AdvancedScatterContainer = AdvancedScatterContainer
|
window.AdvancedScatterContainer = AdvancedScatterContainer
|
||||||
|
|
|
@ -156,7 +156,7 @@ export default class Button extends PIXI.Container {
|
||||||
verticalAlign: 'middle',
|
verticalAlign: 'middle',
|
||||||
tooltip: null,
|
tooltip: null,
|
||||||
badge: null,
|
badge: null,
|
||||||
visible: true
|
visible: true,
|
||||||
},
|
},
|
||||||
opts
|
opts
|
||||||
)
|
)
|
||||||
|
@ -177,7 +177,7 @@ export default class Button extends PIXI.Container {
|
||||||
strokeAlpha: this.HIDDEN_ALPHA,
|
strokeAlpha: this.HIDDEN_ALPHA,
|
||||||
strokeActiveAlpha: this.HIDDEN_ALPHA,
|
strokeActiveAlpha: this.HIDDEN_ALPHA,
|
||||||
fillAlpha: this.HIDDEN_ALPHA,
|
fillAlpha: this.HIDDEN_ALPHA,
|
||||||
fillActiveAlpha: this.HIDDEN_ALPHA
|
fillActiveAlpha: this.HIDDEN_ALPHA,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -249,15 +249,15 @@ export default class Button extends PIXI.Container {
|
||||||
|
|
||||||
// interaction
|
// interaction
|
||||||
//-----------------
|
//-----------------
|
||||||
this.button.on('pointerover', e => {
|
this.button.on('pointerover', (e) => {
|
||||||
this.capture(e)
|
this.capture(e)
|
||||||
TweenLite.to([this.button, this.content], this.theme.fast, {
|
TweenLite.to([this.button, this.content], this.theme.fast, {
|
||||||
alpha: 0.83,
|
alpha: 0.83,
|
||||||
overwrite: 'none'
|
overwrite: 'none',
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
this.button.on('pointermove', e => {
|
this.button.on('pointermove', (e) => {
|
||||||
this.capture(e)
|
this.capture(e)
|
||||||
})
|
})
|
||||||
|
|
||||||
|
@ -268,17 +268,17 @@ export default class Button extends PIXI.Container {
|
||||||
this.button.on('scroll', this.onEnd.bind(this))
|
this.button.on('scroll', this.onEnd.bind(this))
|
||||||
|
|
||||||
// eslint-disable-next-line no-unused-vars
|
// eslint-disable-next-line no-unused-vars
|
||||||
this.button.on('pointerdown', e => {
|
this.button.on('pointerdown', (e) => {
|
||||||
//this.capture(e)
|
//this.capture(e)
|
||||||
this.__start.x = e.data.global.x
|
this.__start.x = e.data.global.x
|
||||||
this.__start.y = e.data.global.y
|
this.__start.y = e.data.global.y
|
||||||
TweenLite.to([this.button, this.content], this.theme.fast, {
|
TweenLite.to([this.button, this.content], this.theme.fast, {
|
||||||
alpha: 0.7,
|
alpha: 0.7,
|
||||||
overwrite: 'none'
|
overwrite: 'none',
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
this.button.on('pointerup', e => {
|
this.button.on('pointerup', (e) => {
|
||||||
this.capture(e)
|
this.capture(e)
|
||||||
|
|
||||||
const distance = Points.distance(e.data.global, this.__start)
|
const distance = Points.distance(e.data.global, this.__start)
|
||||||
|
@ -290,7 +290,7 @@ export default class Button extends PIXI.Container {
|
||||||
|
|
||||||
TweenLite.to([this.button, this.content], this.theme.fast, {
|
TweenLite.to([this.button, this.content], this.theme.fast, {
|
||||||
alpha: 0.83,
|
alpha: 0.83,
|
||||||
overwrite: 'none'
|
overwrite: 'none',
|
||||||
})
|
})
|
||||||
|
|
||||||
if (this.opts.type === 'checkbox') {
|
if (this.opts.type === 'checkbox') {
|
||||||
|
@ -321,7 +321,7 @@ export default class Button extends PIXI.Container {
|
||||||
if (typeof this.opts.tooltip === 'string') {
|
if (typeof this.opts.tooltip === 'string') {
|
||||||
this.tooltip = new Tooltip({
|
this.tooltip = new Tooltip({
|
||||||
object: this,
|
object: this,
|
||||||
content: this.opts.tooltip
|
content: this.opts.tooltip,
|
||||||
})
|
})
|
||||||
} else {
|
} else {
|
||||||
this.opts.tooltip = Object.assign({}, { object: this }, this.opts.tooltip)
|
this.opts.tooltip = Object.assign({}, { object: this }, this.opts.tooltip)
|
||||||
|
@ -338,7 +338,7 @@ export default class Button extends PIXI.Container {
|
||||||
align: 'right',
|
align: 'right',
|
||||||
verticalAlign: 'top',
|
verticalAlign: 'top',
|
||||||
offsetLeft: 0,
|
offsetLeft: 0,
|
||||||
offsetTop: 0
|
offsetTop: 0,
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
if (typeof this.opts.badge === 'string') {
|
if (typeof this.opts.badge === 'string') {
|
||||||
|
@ -716,7 +716,7 @@ export default class Button extends PIXI.Container {
|
||||||
this.capture(event)
|
this.capture(event)
|
||||||
TweenLite.to([this.button, this.content], this.theme.fast, {
|
TweenLite.to([this.button, this.content], this.theme.fast, {
|
||||||
alpha: 1,
|
alpha: 1,
|
||||||
overwrite: 'none'
|
overwrite: 'none',
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -126,7 +126,7 @@ export default class ButtonGroup extends PIXI.Container {
|
||||||
orientation: 'horizontal',
|
orientation: 'horizontal',
|
||||||
align: 'center', // left, center, right
|
align: 'center', // left, center, right
|
||||||
verticalAlign: 'middle', // top, middle, bottom
|
verticalAlign: 'middle', // top, middle, bottom
|
||||||
visible: true
|
visible: true,
|
||||||
},
|
},
|
||||||
opts
|
opts
|
||||||
)
|
)
|
||||||
|
@ -216,7 +216,7 @@ export default class ButtonGroup extends PIXI.Container {
|
||||||
it.verticalAlign = it.verticalAlign || this.opts.verticalAlign
|
it.verticalAlign = it.verticalAlign || this.opts.verticalAlign
|
||||||
it.afterAction = (event, button) => {
|
it.afterAction = (event, button) => {
|
||||||
if (this.opts.type === 'radio' && button.opts.type === 'default') {
|
if (this.opts.type === 'radio' && button.opts.type === 'default') {
|
||||||
this.buttons.forEach(it => {
|
this.buttons.forEach((it) => {
|
||||||
if (it.opts.type === 'default') {
|
if (it.opts.type === 'default') {
|
||||||
it.active = false
|
it.active = false
|
||||||
}
|
}
|
||||||
|
@ -243,7 +243,7 @@ export default class ButtonGroup extends PIXI.Container {
|
||||||
|
|
||||||
button.__originalPosition = {
|
button.__originalPosition = {
|
||||||
x: button.x,
|
x: button.x,
|
||||||
y: button.y
|
y: button.y,
|
||||||
}
|
}
|
||||||
|
|
||||||
position += (this.opts.orientation === 'horizontal' ? button.width : button.height) + this.opts.margin
|
position += (this.opts.orientation === 'horizontal' ? button.width : button.height) + this.opts.margin
|
||||||
|
@ -255,7 +255,7 @@ export default class ButtonGroup extends PIXI.Container {
|
||||||
if (this.opts.orientation === 'vertical') {
|
if (this.opts.orientation === 'vertical') {
|
||||||
const maxWidth = this.getMaxButtonWidth()
|
const maxWidth = this.getMaxButtonWidth()
|
||||||
|
|
||||||
this.buttons.forEach(it => {
|
this.buttons.forEach((it) => {
|
||||||
it.opts.minWidth = maxWidth
|
it.opts.minWidth = maxWidth
|
||||||
it.layout()
|
it.layout()
|
||||||
})
|
})
|
||||||
|
@ -283,7 +283,7 @@ export default class ButtonGroup extends PIXI.Container {
|
||||||
//--------------------
|
//--------------------
|
||||||
if (this.opts.app) {
|
if (this.opts.app) {
|
||||||
const app = this.opts.app
|
const app = this.opts.app
|
||||||
app.view.addEventListener('mousewheel', event => {
|
app.view.addEventListener('mousewheel', (event) => {
|
||||||
const bounds = this.getBounds()
|
const bounds = this.getBounds()
|
||||||
const x = event.clientX - app.view.getBoundingClientRect().left
|
const x = event.clientX - app.view.getBoundingClientRect().left
|
||||||
const y = event.clientY - app.view.getBoundingClientRect().top
|
const y = event.clientY - app.view.getBoundingClientRect().top
|
||||||
|
@ -338,7 +338,7 @@ export default class ButtonGroup extends PIXI.Container {
|
||||||
*/
|
*/
|
||||||
draw() {
|
draw() {
|
||||||
if (this.opts.margin === 0) {
|
if (this.opts.margin === 0) {
|
||||||
this.buttons.forEach(it => it.hide())
|
this.buttons.forEach((it) => it.hide())
|
||||||
|
|
||||||
this.container.clear()
|
this.container.clear()
|
||||||
this.container.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha)
|
this.container.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha)
|
||||||
|
@ -378,7 +378,7 @@ export default class ButtonGroup extends PIXI.Container {
|
||||||
set disabled(value) {
|
set disabled(value) {
|
||||||
this._disabled = value
|
this._disabled = value
|
||||||
|
|
||||||
this.buttons.forEach(it => (it.disabled = value))
|
this.buttons.forEach((it) => (it.disabled = value))
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -416,7 +416,7 @@ export default class ButtonGroup extends PIXI.Container {
|
||||||
* @return {number} The maximum with of a button of the button group.
|
* @return {number} The maximum with of a button of the button group.
|
||||||
*/
|
*/
|
||||||
getMaxButtonWidth() {
|
getMaxButtonWidth() {
|
||||||
let widths = this.buttons.map(it => it.width)
|
let widths = this.buttons.map((it) => it.width)
|
||||||
|
|
||||||
return Math.max(...widths)
|
return Math.max(...widths)
|
||||||
}
|
}
|
||||||
|
@ -459,7 +459,7 @@ export default class ButtonGroup extends PIXI.Container {
|
||||||
|
|
||||||
this.__delta = {
|
this.__delta = {
|
||||||
x: this.container.position.x - event.data.global.x,
|
x: this.container.position.x - event.data.global.x,
|
||||||
y: this.container.position.y - event.data.global.y
|
y: this.container.position.y - event.data.global.y,
|
||||||
}
|
}
|
||||||
|
|
||||||
TweenLite.killTweensOf(this.container.position, { x: true, y: true })
|
TweenLite.killTweensOf(this.container.position, { x: true, y: true })
|
||||||
|
@ -539,7 +539,7 @@ export default class ButtonGroup extends PIXI.Container {
|
||||||
throwProps,
|
throwProps,
|
||||||
ease: Strong.easeOut,
|
ease: Strong.easeOut,
|
||||||
onUpdate: () => this.stack(),
|
onUpdate: () => this.stack(),
|
||||||
onComplete: () => ThrowPropsPlugin.untrack(this.container.position)
|
onComplete: () => ThrowPropsPlugin.untrack(this.container.position),
|
||||||
},
|
},
|
||||||
0.8,
|
0.8,
|
||||||
0.4
|
0.4
|
||||||
|
@ -635,8 +635,8 @@ export default class ButtonGroup extends PIXI.Container {
|
||||||
sorted.push(it)
|
sorted.push(it)
|
||||||
})
|
})
|
||||||
|
|
||||||
const min = Math.min(...sorted.map(it => it.x))
|
const min = Math.min(...sorted.map((it) => it.x))
|
||||||
const max = Math.max(...sorted.map(it => it.x + it.button.width))
|
const max = Math.max(...sorted.map((it) => it.x + it.button.width))
|
||||||
const center = (min + max) / 2
|
const center = (min + max) / 2
|
||||||
|
|
||||||
// z-index
|
// z-index
|
||||||
|
@ -661,7 +661,7 @@ export default class ButtonGroup extends PIXI.Container {
|
||||||
|
|
||||||
return 0
|
return 0
|
||||||
})
|
})
|
||||||
.forEach(it => it.parent.addChild(it))
|
.forEach((it) => it.parent.addChild(it))
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -692,8 +692,8 @@ export default class ButtonGroup extends PIXI.Container {
|
||||||
sorted.push(it)
|
sorted.push(it)
|
||||||
})
|
})
|
||||||
|
|
||||||
const min = Math.min(...sorted.map(it => it.y))
|
const min = Math.min(...sorted.map((it) => it.y))
|
||||||
const max = Math.max(...sorted.map(it => it.y + it.button.height))
|
const max = Math.max(...sorted.map((it) => it.y + it.button.height))
|
||||||
const center = (min + max) / 2
|
const center = (min + max) / 2
|
||||||
|
|
||||||
// z-index
|
// z-index
|
||||||
|
@ -718,6 +718,6 @@ export default class ButtonGroup extends PIXI.Container {
|
||||||
|
|
||||||
return 0
|
return 0
|
||||||
})
|
})
|
||||||
.forEach(it => it.parent.addChild(it))
|
.forEach((it) => it.parent.addChild(it))
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -155,7 +155,7 @@ export class DeepZoomInfo {
|
||||||
this.baseURL = this.urlForTile(this.baseLevel, 0, 0, false)
|
this.baseURL = this.urlForTile(this.baseLevel, 0, 0, false)
|
||||||
|
|
||||||
if (loadBaseImage) {
|
if (loadBaseImage) {
|
||||||
this.imageForURL(this.baseURL, e => {
|
this.imageForURL(this.baseURL, (e) => {
|
||||||
this.size = [e.target.naturalWidth, e.target.naturalHeight]
|
this.size = [e.target.naturalWidth, e.target.naturalHeight]
|
||||||
this.baseImage = e.target
|
this.baseImage = e.target
|
||||||
})
|
})
|
||||||
|
@ -332,7 +332,7 @@ export class DeepZoomImage extends PIXI.Container {
|
||||||
useWorker = '',
|
useWorker = '',
|
||||||
minimumLevel = 0,
|
minimumLevel = 0,
|
||||||
alpha = 1,
|
alpha = 1,
|
||||||
app = window.app
|
app = window.app,
|
||||||
} = {}
|
} = {}
|
||||||
) {
|
) {
|
||||||
super()
|
super()
|
||||||
|
@ -708,7 +708,7 @@ export class DeepZoomImage extends PIXI.Container {
|
||||||
let changed = { added: [], removed: [] }
|
let changed = { added: [], removed: [] }
|
||||||
let newNeeded = new Map()
|
let newNeeded = new Map()
|
||||||
let { centerCol, centerRow, needed } = this.neededTiles(tiles, level)
|
let { centerCol, centerRow, needed } = this.neededTiles(tiles, level)
|
||||||
needed.forEach(d => {
|
needed.forEach((d) => {
|
||||||
let [url, col, row] = d
|
let [url, col, row] = d
|
||||||
newNeeded.set(url, [col, row])
|
newNeeded.set(url, [col, row])
|
||||||
if (!tiles.requested.has(url)) {
|
if (!tiles.requested.has(url)) {
|
||||||
|
@ -856,7 +856,7 @@ export class DeepZoomImage extends PIXI.Container {
|
||||||
}
|
}
|
||||||
|
|
||||||
hideTilesAboveLevel(level) {
|
hideTilesAboveLevel(level) {
|
||||||
Object.keys(this.tileLayers).forEach(key => {
|
Object.keys(this.tileLayers).forEach((key) => {
|
||||||
let tiles = this.tileLayers[key]
|
let tiles = this.tileLayers[key]
|
||||||
if (tiles.level > level) {
|
if (tiles.level > level) {
|
||||||
tiles.visible = false
|
tiles.visible = false
|
||||||
|
@ -869,7 +869,7 @@ export class DeepZoomImage extends PIXI.Container {
|
||||||
* @param {number} level - The zoom level of the grid
|
* @param {number} level - The zoom level of the grid
|
||||||
*/
|
*/
|
||||||
destroyTilesAboveLevel(level) {
|
destroyTilesAboveLevel(level) {
|
||||||
Object.keys(this.tileLayers).forEach(key => {
|
Object.keys(this.tileLayers).forEach((key) => {
|
||||||
let tiles = this.tileLayers[key]
|
let tiles = this.tileLayers[key]
|
||||||
if (tiles.level > level && !tiles.keep) {
|
if (tiles.level > level && !tiles.keep) {
|
||||||
for (let url of tiles.available.keys()) {
|
for (let url of tiles.available.keys()) {
|
||||||
|
@ -882,7 +882,7 @@ export class DeepZoomImage extends PIXI.Container {
|
||||||
}
|
}
|
||||||
|
|
||||||
destroyAllTiles() {
|
destroyAllTiles() {
|
||||||
Object.keys(this.tileLayers).forEach(key => {
|
Object.keys(this.tileLayers).forEach((key) => {
|
||||||
this.destroyTiles(key)
|
this.destroyTiles(key)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
@ -893,7 +893,7 @@ export class DeepZoomImage extends PIXI.Container {
|
||||||
* @memberof DeepZoomImage
|
* @memberof DeepZoomImage
|
||||||
*/
|
*/
|
||||||
tintObsoleteTiles() {
|
tintObsoleteTiles() {
|
||||||
Object.keys(this.tileLayers).forEach(key => {
|
Object.keys(this.tileLayers).forEach((key) => {
|
||||||
let tiles = this.tileLayers[key]
|
let tiles = this.tileLayers[key]
|
||||||
tiles.untintTiles()
|
tiles.untintTiles()
|
||||||
if (!tiles.keep) {
|
if (!tiles.keep) {
|
||||||
|
@ -908,7 +908,7 @@ export class DeepZoomImage extends PIXI.Container {
|
||||||
* @memberof DeepZoomImage
|
* @memberof DeepZoomImage
|
||||||
*/
|
*/
|
||||||
destroyUnneededTiles() {
|
destroyUnneededTiles() {
|
||||||
Object.keys(this.tileLayers).forEach(key => {
|
Object.keys(this.tileLayers).forEach((key) => {
|
||||||
let tiles = this.tileLayers[key]
|
let tiles = this.tileLayers[key]
|
||||||
if (!tiles.keep) {
|
if (!tiles.keep) {
|
||||||
tiles.destroyUnneededTiles()
|
tiles.destroyUnneededTiles()
|
||||||
|
@ -922,7 +922,7 @@ export class DeepZoomImage extends PIXI.Container {
|
||||||
* @memberof DeepZoomImage
|
* @memberof DeepZoomImage
|
||||||
*/
|
*/
|
||||||
destroyObsoleteTiles() {
|
destroyObsoleteTiles() {
|
||||||
Object.keys(this.tileLayers).forEach(key => {
|
Object.keys(this.tileLayers).forEach((key) => {
|
||||||
let tiles = this.tileLayers[key]
|
let tiles = this.tileLayers[key]
|
||||||
if (!tiles.keep) {
|
if (!tiles.keep) {
|
||||||
tiles.destroyObsoleteTiles()
|
tiles.destroyObsoleteTiles()
|
||||||
|
@ -937,7 +937,7 @@ export class DeepZoomImage extends PIXI.Container {
|
||||||
* @memberof DeepZoomImage
|
* @memberof DeepZoomImage
|
||||||
*/
|
*/
|
||||||
destroyTiles() {
|
destroyTiles() {
|
||||||
Object.keys(this.tileLayers).forEach(key => {
|
Object.keys(this.tileLayers).forEach((key) => {
|
||||||
let tiles = this.tileLayers[key]
|
let tiles = this.tileLayers[key]
|
||||||
if (!tiles.keep) {
|
if (!tiles.keep) {
|
||||||
tiles.destroyTiles(this.quadTrees)
|
tiles.destroyTiles(this.quadTrees)
|
||||||
|
@ -949,7 +949,7 @@ export class DeepZoomImage extends PIXI.Container {
|
||||||
* @param {number} level - The zoom level of the grid
|
* @param {number} level - The zoom level of the grid
|
||||||
*/
|
*/
|
||||||
tintTilesBelowLevel(level) {
|
tintTilesBelowLevel(level) {
|
||||||
Object.keys(this.tileLayers).forEach(key => {
|
Object.keys(this.tileLayers).forEach((key) => {
|
||||||
let tiles = this.tileLayers[key]
|
let tiles = this.tileLayers[key]
|
||||||
if (tiles.level < level) {
|
if (tiles.level < level) {
|
||||||
tiles.tintTiles(this.quadTrees)
|
tiles.tintTiles(this.quadTrees)
|
||||||
|
@ -989,7 +989,7 @@ export class DeepZoomImage extends PIXI.Container {
|
||||||
this.fastLoads += 1
|
this.fastLoads += 1
|
||||||
this.populateTiles(currentTiles, this.currentLevel, {
|
this.populateTiles(currentTiles, this.currentLevel, {
|
||||||
onlyone: false,
|
onlyone: false,
|
||||||
about: event.about
|
about: event.about,
|
||||||
})
|
})
|
||||||
if (this.fastLoads == 3) {
|
if (this.fastLoads == 3) {
|
||||||
this.fastLoads = 0
|
this.fastLoads = 0
|
||||||
|
|
|
@ -40,7 +40,7 @@ export class TileLoader {
|
||||||
if (this.loaded.has(url)) this.loaded.delete(url)
|
if (this.loaded.has(url)) this.loaded.delete(url)
|
||||||
if (this.loading.has(url)) this.loading.delete(url)
|
if (this.loading.has(url)) this.loading.delete(url)
|
||||||
//Tile.unschedule(url)
|
//Tile.unschedule(url)
|
||||||
this.loadQueue = this.loadQueue.filter(item => item != url)
|
this.loadQueue = this.loadQueue.filter((item) => item != url)
|
||||||
}
|
}
|
||||||
|
|
||||||
/** Cancels loading by clearing the load queue **/
|
/** Cancels loading by clearing the load queue **/
|
||||||
|
@ -246,7 +246,7 @@ export class RequestTileLoader extends TileLoader {
|
||||||
let xhr = new XMLHttpRequest()
|
let xhr = new XMLHttpRequest()
|
||||||
xhr.open('GET', url, false)
|
xhr.open('GET', url, false)
|
||||||
xhr.responseType = 'arraybuffer'
|
xhr.responseType = 'arraybuffer'
|
||||||
xhr.onload = e => {
|
xhr.onload = (e) => {
|
||||||
let CompressedImage = PIXI.compressedTextures.CompressedImage
|
let CompressedImage = PIXI.compressedTextures.CompressedImage
|
||||||
let compressed = CompressedImage.loadFromArrayBuffer(xhr.response, url)
|
let compressed = CompressedImage.loadFromArrayBuffer(xhr.response, url)
|
||||||
let base = new PIXI.BaseTexture(compressed)
|
let base = new PIXI.BaseTexture(compressed)
|
||||||
|
@ -320,7 +320,7 @@ export class WorkerTileLoader extends TileLoader {
|
||||||
|
|
||||||
let worker = (this.worker = new Worker(workerPath))
|
let worker = (this.worker = new Worker(workerPath))
|
||||||
|
|
||||||
worker.onmessage = event => {
|
worker.onmessage = (event) => {
|
||||||
if (event.data.success) {
|
if (event.data.success) {
|
||||||
let { url, col, row, buffer } = event.data
|
let { url, col, row, buffer } = event.data
|
||||||
//console.log("WorkerTileLoader.loaded", url, buffer)
|
//console.log("WorkerTileLoader.loaded", url, buffer)
|
||||||
|
|
|
@ -9,12 +9,12 @@ function load() {
|
||||||
let [col, row, url] = tile
|
let [col, row, url] = tile
|
||||||
let xhr = new XMLHttpRequest()
|
let xhr = new XMLHttpRequest()
|
||||||
xhr.responseType = 'arraybuffer'
|
xhr.responseType = 'arraybuffer'
|
||||||
xhr.onload = event => {
|
xhr.onload = (event) => {
|
||||||
pendingRequests.delete(url)
|
pendingRequests.delete(url)
|
||||||
let buffer = xhr.response
|
let buffer = xhr.response
|
||||||
postMessage({ success: true, url, col, row, buffer }, [buffer])
|
postMessage({ success: true, url, col, row, buffer }, [buffer])
|
||||||
}
|
}
|
||||||
xhr.onerror = event => {
|
xhr.onerror = (event) => {
|
||||||
pendingRequests.delete(url)
|
pendingRequests.delete(url)
|
||||||
let buffer = null
|
let buffer = null
|
||||||
postMessage({ success: false, url, col, row, buffer })
|
postMessage({ success: false, url, col, row, buffer })
|
||||||
|
@ -29,7 +29,7 @@ function load() {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
self.onmessage = event => {
|
self.onmessage = (event) => {
|
||||||
let msg = event.data
|
let msg = event.data
|
||||||
switch (msg.command) {
|
switch (msg.command) {
|
||||||
case 'load':
|
case 'load':
|
||||||
|
|
|
@ -51,7 +51,7 @@ export class Tiles extends PIXI.Container {
|
||||||
|
|
||||||
this.infoColor = Colors.random()
|
this.infoColor = Colors.random()
|
||||||
this.pprint()
|
this.pprint()
|
||||||
this.destroyed = false
|
//this.destroyed = false
|
||||||
}
|
}
|
||||||
|
|
||||||
/** Tests whether all tiles are loaded. **/
|
/** Tests whether all tiles are loaded. **/
|
||||||
|
@ -169,7 +169,7 @@ export class Tiles extends PIXI.Container {
|
||||||
if (this.showGrid) {
|
if (this.showGrid) {
|
||||||
this.highlightTile(refCol, refRow)
|
this.highlightTile(refCol, refRow)
|
||||||
}
|
}
|
||||||
urlpos.forEach(d => {
|
urlpos.forEach((d) => {
|
||||||
let [url, col, row] = d
|
let [url, col, row] = d
|
||||||
if (this.loader.schedule(url, col, row)) {
|
if (this.loader.schedule(url, col, row)) {
|
||||||
if (onlyone) {
|
if (onlyone) {
|
||||||
|
@ -229,7 +229,7 @@ export class Tiles extends PIXI.Container {
|
||||||
* cancelled.
|
* cancelled.
|
||||||
**/
|
**/
|
||||||
destroy() {
|
destroy() {
|
||||||
this.destroyed = true
|
//this.destroyed = true
|
||||||
this.loader.destroy()
|
this.loader.destroy()
|
||||||
super.destroy({ children: true }) // Calls destroyChildren
|
super.destroy({ children: true }) // Calls destroyChildren
|
||||||
this.available.clear()
|
this.available.clear()
|
||||||
|
|
|
@ -47,7 +47,7 @@ export class ScatterLoader extends CardLoader {
|
||||||
width: w,
|
width: w,
|
||||||
height: h,
|
height: h,
|
||||||
view: canvas,
|
view: canvas,
|
||||||
resolution: resolution
|
resolution: resolution,
|
||||||
})
|
})
|
||||||
|
|
||||||
let displayObject = this.scatter.displayObject
|
let displayObject = this.scatter.displayObject
|
||||||
|
@ -88,7 +88,7 @@ export class ScatterLoader extends CardLoader {
|
||||||
let image = isImage ? domNode : document.createElement('img')
|
let image = isImage ? domNode : document.createElement('img')
|
||||||
let [x, y, w, h, cloneURL] = this.cloneScatterImage()
|
let [x, y, w, h, cloneURL] = this.cloneScatterImage()
|
||||||
let [ww, hh] = this.unscaledSize()
|
let [ww, hh] = this.unscaledSize()
|
||||||
image.onload = e => {
|
image.onload = (e) => {
|
||||||
if (!isImage) domNode.appendChild(image)
|
if (!isImage) domNode.appendChild(image)
|
||||||
this.x = x
|
this.x = x
|
||||||
this.y = y
|
this.y = y
|
||||||
|
@ -98,7 +98,7 @@ export class ScatterLoader extends CardLoader {
|
||||||
this.rotation = this.scatter.rotation
|
this.rotation = this.scatter.rotation
|
||||||
resolve(this)
|
resolve(this)
|
||||||
}
|
}
|
||||||
image.onerror = e => {
|
image.onerror = (e) => {
|
||||||
reject(this)
|
reject(this)
|
||||||
}
|
}
|
||||||
image.src = cloneURL
|
image.src = cloneURL
|
||||||
|
@ -113,7 +113,7 @@ export default class FlipEffect {
|
||||||
this.backLoader = backLoader
|
this.backLoader = backLoader
|
||||||
this.scatterLoader = new ScatterLoader(scatter)
|
this.scatterLoader = new ScatterLoader(scatter)
|
||||||
this.domFlip = new DOMFlip(domScatterContainer, flipTemplate, this.scatterLoader, backLoader, {
|
this.domFlip = new DOMFlip(domScatterContainer, flipTemplate, this.scatterLoader, backLoader, {
|
||||||
onBack: this.backCardClosed.bind(this)
|
onBack: this.backCardClosed.bind(this),
|
||||||
})
|
})
|
||||||
this.setupInfoButton()
|
this.setupInfoButton()
|
||||||
}
|
}
|
||||||
|
@ -121,7 +121,7 @@ export default class FlipEffect {
|
||||||
startFlip() {
|
startFlip() {
|
||||||
let center = this.flipCenter()
|
let center = this.flipCenter()
|
||||||
let loader = this.backLoader
|
let loader = this.backLoader
|
||||||
this.domFlip.load().then(domFlip => {
|
this.domFlip.load().then((domFlip) => {
|
||||||
this.scatter.displayObject.visible = false
|
this.scatter.displayObject.visible = false
|
||||||
domFlip.centerAt(center)
|
domFlip.centerAt(center)
|
||||||
domFlip.zoom(this.scatter.scale)
|
domFlip.zoom(this.scatter.scale)
|
||||||
|
@ -176,10 +176,10 @@ export default class FlipEffect {
|
||||||
this.infoBtn.lineTo(0, 14)
|
this.infoBtn.lineTo(0, 14)
|
||||||
this.infoBtn.endFill()
|
this.infoBtn.endFill()
|
||||||
|
|
||||||
this.infoBtn.on('click', e => {
|
this.infoBtn.on('click', (e) => {
|
||||||
this.infoSelected()
|
this.infoSelected()
|
||||||
})
|
})
|
||||||
this.infoBtn.on('tap', e => {
|
this.infoBtn.on('tap', (e) => {
|
||||||
this.infoSelected()
|
this.infoSelected()
|
||||||
})
|
})
|
||||||
|
|
||||||
|
@ -200,7 +200,7 @@ export default class FlipEffect {
|
||||||
displayObject.addChild(this.infoBtn)
|
displayObject.addChild(this.infoBtn)
|
||||||
}
|
}
|
||||||
|
|
||||||
this.scatter.addTransformEventCallback(e => {
|
this.scatter.addTransformEventCallback((e) => {
|
||||||
let displayObject = this.scatter.displayObject
|
let displayObject = this.scatter.displayObject
|
||||||
if (displayObject.foreground) {
|
if (displayObject.foreground) {
|
||||||
if (e.scale) {
|
if (e.scale) {
|
||||||
|
@ -217,7 +217,7 @@ export default class FlipEffect {
|
||||||
let canvas = document.createElement('canvas')
|
let canvas = document.createElement('canvas')
|
||||||
canvas.width = 88 * 4
|
canvas.width = 88 * 4
|
||||||
canvas.height = 44 * 4
|
canvas.height = 44 * 4
|
||||||
svgImage.onload = e => {
|
svgImage.onload = (e) => {
|
||||||
let displayObject = this.scatter.displayObject
|
let displayObject = this.scatter.displayObject
|
||||||
canvas.getContext('2d').drawImage(svgImage, 0, 0, canvas.width, canvas.height)
|
canvas.getContext('2d').drawImage(svgImage, 0, 0, canvas.width, canvas.height)
|
||||||
let texure = new PIXI.Texture(new PIXI.BaseTexture(canvas))
|
let texure = new PIXI.Texture(new PIXI.BaseTexture(canvas))
|
||||||
|
@ -234,10 +234,10 @@ export default class FlipEffect {
|
||||||
this.infoBtn.position = new PIXI.Point(w, h)
|
this.infoBtn.position = new PIXI.Point(w, h)
|
||||||
this.infoBtn.interactive = true
|
this.infoBtn.interactive = true
|
||||||
this.infoBtn.updateTransform()
|
this.infoBtn.updateTransform()
|
||||||
this.infoBtn.on('click', e => {
|
this.infoBtn.on('click', (e) => {
|
||||||
this.infoSelected()
|
this.infoSelected()
|
||||||
})
|
})
|
||||||
this.infoBtn.on('tap', e => {
|
this.infoBtn.on('tap', (e) => {
|
||||||
this.infoSelected()
|
this.infoSelected()
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
|
@ -86,7 +86,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
|
||||||
focus: 800,
|
focus: 800,
|
||||||
near: 10,
|
near: 10,
|
||||||
far: 10000,
|
far: 10000,
|
||||||
orthographic: false
|
orthographic: false,
|
||||||
},
|
},
|
||||||
opts
|
opts
|
||||||
)
|
)
|
||||||
|
@ -228,7 +228,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
|
||||||
height: this.opts.useBackTransforms ? toObject.height * 2 : fromObject.height * 2,
|
height: this.opts.useBackTransforms ? toObject.height * 2 : fromObject.height * 2,
|
||||||
rotation: this.opts.useBackTransforms ? toObject.rotation : fromObject.rotation,
|
rotation: this.opts.useBackTransforms ? toObject.rotation : fromObject.rotation,
|
||||||
skewX: this.opts.useBackTransforms ? toObject.skew.x : fromObject.skew.x,
|
skewX: this.opts.useBackTransforms ? toObject.skew.x : fromObject.skew.x,
|
||||||
skewY: this.opts.useBackTransforms ? toObject.skew.y : fromObject.skew.y
|
skewY: this.opts.useBackTransforms ? toObject.skew.y : fromObject.skew.y,
|
||||||
}
|
}
|
||||||
|
|
||||||
// set toObject end values
|
// set toObject end values
|
||||||
|
@ -265,7 +265,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
|
||||||
if (this.opts.onComplete) {
|
if (this.opts.onComplete) {
|
||||||
this.opts.onComplete(this, this)
|
this.opts.onComplete(this, this)
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
// x & y
|
// x & y
|
||||||
|
@ -273,7 +273,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
|
||||||
TweenLite.to(this, this.opts.duration, {
|
TweenLite.to(this, this.opts.duration, {
|
||||||
x: to.x,
|
x: to.x,
|
||||||
y: to.y,
|
y: to.y,
|
||||||
ease: this.opts.transformEase
|
ease: this.opts.transformEase,
|
||||||
})
|
})
|
||||||
|
|
||||||
// width & height
|
// width & height
|
||||||
|
@ -281,7 +281,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
|
||||||
TweenLite.to([front, back], this.opts.duration, {
|
TweenLite.to([front, back], this.opts.duration, {
|
||||||
width: to.width,
|
width: to.width,
|
||||||
height: to.height,
|
height: to.height,
|
||||||
ease: this.opts.transformEase
|
ease: this.opts.transformEase,
|
||||||
})
|
})
|
||||||
|
|
||||||
// rotation
|
// rotation
|
||||||
|
@ -289,9 +289,9 @@ export default class Flippable extends PIXI.projection.Camera3d {
|
||||||
TweenLite.to(this, this.opts.duration, {
|
TweenLite.to(this, this.opts.duration, {
|
||||||
directionalRotation: {
|
directionalRotation: {
|
||||||
rotation: `${to.rotation}_short`,
|
rotation: `${to.rotation}_short`,
|
||||||
useRadians: true
|
useRadians: true,
|
||||||
},
|
},
|
||||||
ease: this.opts.transformEase
|
ease: this.opts.transformEase,
|
||||||
})
|
})
|
||||||
|
|
||||||
// skewX & skewY
|
// skewX & skewY
|
||||||
|
@ -299,7 +299,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
|
||||||
TweenLite.to(this.skew, this.opts.duration, {
|
TweenLite.to(this.skew, this.opts.duration, {
|
||||||
x: to.skewX,
|
x: to.skewX,
|
||||||
y: to.skewY,
|
y: to.skewY,
|
||||||
ease: this.opts.transformEase
|
ease: this.opts.transformEase,
|
||||||
})
|
})
|
||||||
|
|
||||||
// camera
|
// camera
|
||||||
|
@ -308,7 +308,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
|
||||||
.to(this.euler, half, {
|
.to(this.euler, half, {
|
||||||
x: this.opts.eulerX,
|
x: this.opts.eulerX,
|
||||||
y: this.opts.eulerY,
|
y: this.opts.eulerY,
|
||||||
ease
|
ease,
|
||||||
})
|
})
|
||||||
.to(this.euler, half, { x: 0, y: 0, ease })
|
.to(this.euler, half, { x: 0, y: 0, ease })
|
||||||
|
|
||||||
|
@ -385,7 +385,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
|
||||||
const bounds = displayObject.getBounds()
|
const bounds = displayObject.getBounds()
|
||||||
return {
|
return {
|
||||||
x: bounds.x + bounds.width / 2,
|
x: bounds.x + bounds.width / 2,
|
||||||
y: bounds.y + bounds.height / 2
|
y: bounds.y + bounds.height / 2,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -411,7 +411,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
|
||||||
displayObject.skew.x,
|
displayObject.skew.x,
|
||||||
displayObject.skew.y,
|
displayObject.skew.y,
|
||||||
displayObject.pivot.x,
|
displayObject.pivot.x,
|
||||||
displayObject.pivot.y
|
displayObject.pivot.y,
|
||||||
]
|
]
|
||||||
|
|
||||||
displayObject.position.set(0, 0)
|
displayObject.position.set(0, 0)
|
||||||
|
|
|
@ -30,7 +30,7 @@ export class Hypenate {
|
||||||
result.push(p + '-')
|
result.push(p + '-')
|
||||||
}
|
}
|
||||||
result.push(last)
|
result.push(last)
|
||||||
return result.filter(p => p.length > 0)
|
return result.filter((p) => p.length > 0)
|
||||||
}
|
}
|
||||||
|
|
||||||
static splitWord(word) {
|
static splitWord(word) {
|
||||||
|
@ -288,7 +288,7 @@ export class LabeledGraphics extends PIXI.Graphics {
|
||||||
}
|
}
|
||||||
return {
|
return {
|
||||||
text: `${data.text}${i > 0 ? ' ' : ''}${words[i]}`,
|
text: `${data.text}${i > 0 ? ' ' : ''}${words[i]}`,
|
||||||
length: data.length + wordLength + spaceLength
|
length: data.length + wordLength + spaceLength,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{ text: '', length: dotsLength }
|
{ text: '', length: dotsLength }
|
||||||
|
|
|
@ -54,7 +54,7 @@ export default class List extends PIXI.Container {
|
||||||
verticalAlign: 'middle',
|
verticalAlign: 'middle',
|
||||||
width: null,
|
width: null,
|
||||||
height: null,
|
height: null,
|
||||||
app: null
|
app: null,
|
||||||
},
|
},
|
||||||
opts
|
opts
|
||||||
)
|
)
|
||||||
|
@ -107,7 +107,7 @@ export default class List extends PIXI.Container {
|
||||||
//--------------------
|
//--------------------
|
||||||
if (this.opts.app) {
|
if (this.opts.app) {
|
||||||
const app = this.opts.app
|
const app = this.opts.app
|
||||||
app.view.addEventListener('mousewheel', event => {
|
app.view.addEventListener('mousewheel', (event) => {
|
||||||
const bounds = this.mask ? this.mask.getBounds() : this.getBounds()
|
const bounds = this.mask ? this.mask.getBounds() : this.getBounds()
|
||||||
const x = event.clientX - app.view.getBoundingClientRect().left
|
const x = event.clientX - app.view.getBoundingClientRect().left
|
||||||
const y = event.clientY - app.view.getBoundingClientRect().top
|
const y = event.clientY - app.view.getBoundingClientRect().top
|
||||||
|
@ -165,13 +165,13 @@ export default class List extends PIXI.Container {
|
||||||
if (this.opts.orientation === 'vertical') {
|
if (this.opts.orientation === 'vertical') {
|
||||||
switch (this.opts.align) {
|
switch (this.opts.align) {
|
||||||
case 'center':
|
case 'center':
|
||||||
this.__items.forEach(it => (it.x = margin + this.width / 2 - it.width / 2))
|
this.__items.forEach((it) => (it.x = margin + this.width / 2 - it.width / 2))
|
||||||
break
|
break
|
||||||
case 'right':
|
case 'right':
|
||||||
this.__items.forEach(it => (it.x = margin + this.width - it.width))
|
this.__items.forEach((it) => (it.x = margin + this.width - it.width))
|
||||||
break
|
break
|
||||||
default:
|
default:
|
||||||
this.__items.forEach(it => (it.x = margin))
|
this.__items.forEach((it) => (it.x = margin))
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -191,13 +191,13 @@ export default class List extends PIXI.Container {
|
||||||
if (this.opts.orientation === 'horizontal') {
|
if (this.opts.orientation === 'horizontal') {
|
||||||
switch (this.opts.verticalAlign) {
|
switch (this.opts.verticalAlign) {
|
||||||
case 'top':
|
case 'top':
|
||||||
this.__items.forEach(it => (it.y = margin))
|
this.__items.forEach((it) => (it.y = margin))
|
||||||
break
|
break
|
||||||
case 'bottom':
|
case 'bottom':
|
||||||
this.__items.forEach(it => (it.y = margin + this.height - it.height))
|
this.__items.forEach((it) => (it.y = margin + this.height - it.height))
|
||||||
break
|
break
|
||||||
default:
|
default:
|
||||||
this.__items.forEach(it => (it.y = margin + this.height / 2 - it.height / 2))
|
this.__items.forEach((it) => (it.y = margin + this.height / 2 - it.height / 2))
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -221,7 +221,7 @@ export default class List extends PIXI.Container {
|
||||||
get innerWidth() {
|
get innerWidth() {
|
||||||
let size = 0
|
let size = 0
|
||||||
|
|
||||||
this.__items.forEach(it => (size += it.width))
|
this.__items.forEach((it) => (size += it.width))
|
||||||
size += this.opts.padding * (this.__items.length - 1)
|
size += this.opts.padding * (this.__items.length - 1)
|
||||||
size += 2 * this.opts.margin
|
size += 2 * this.opts.margin
|
||||||
|
|
||||||
|
@ -234,7 +234,7 @@ export default class List extends PIXI.Container {
|
||||||
get innerHeight() {
|
get innerHeight() {
|
||||||
let size = 0
|
let size = 0
|
||||||
|
|
||||||
this.__items.forEach(it => (size += it.height))
|
this.__items.forEach((it) => (size += it.height))
|
||||||
size += this.opts.padding * (this.__items.length - 1)
|
size += this.opts.padding * (this.__items.length - 1)
|
||||||
size += 2 * this.opts.margin
|
size += 2 * this.opts.margin
|
||||||
|
|
||||||
|
@ -268,7 +268,7 @@ export default class List extends PIXI.Container {
|
||||||
|
|
||||||
this.__delta = {
|
this.__delta = {
|
||||||
x: this.container.position.x - event.data.global.x,
|
x: this.container.position.x - event.data.global.x,
|
||||||
y: this.container.position.y - event.data.global.y
|
y: this.container.position.y - event.data.global.y,
|
||||||
}
|
}
|
||||||
|
|
||||||
TweenLite.killTweensOf(this.container.position, { x: true, y: true })
|
TweenLite.killTweensOf(this.container.position, { x: true, y: true })
|
||||||
|
@ -313,7 +313,7 @@ export default class List extends PIXI.Container {
|
||||||
throwProps.x = {
|
throwProps.x = {
|
||||||
velocity: 'auto',
|
velocity: 'auto',
|
||||||
min,
|
min,
|
||||||
max: 0
|
max: 0,
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
let min = this.opts.height - this.innerHeight
|
let min = this.opts.height - this.innerHeight
|
||||||
|
@ -321,7 +321,7 @@ export default class List extends PIXI.Container {
|
||||||
throwProps.y = {
|
throwProps.y = {
|
||||||
velocity: 'auto',
|
velocity: 'auto',
|
||||||
min,
|
min,
|
||||||
max: 0
|
max: 0,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -331,7 +331,7 @@ export default class List extends PIXI.Container {
|
||||||
{
|
{
|
||||||
throwProps,
|
throwProps,
|
||||||
ease: Strong.easeOut,
|
ease: Strong.easeOut,
|
||||||
onComplete: () => ThrowPropsPlugin.untrack(this.container.position)
|
onComplete: () => ThrowPropsPlugin.untrack(this.container.position),
|
||||||
},
|
},
|
||||||
0.8,
|
0.8,
|
||||||
0.4
|
0.4
|
||||||
|
|
|
@ -66,7 +66,7 @@ export default class Message extends InteractivePopup {
|
||||||
verticalAlign: 'top', // top, middle, bottom
|
verticalAlign: 'top', // top, middle, bottom
|
||||||
duration: 5,
|
duration: 5,
|
||||||
autoClose: true,
|
autoClose: true,
|
||||||
closeDuration: theme.fast
|
closeDuration: theme.fast,
|
||||||
},
|
},
|
||||||
opts
|
opts
|
||||||
)
|
)
|
||||||
|
|
|
@ -55,7 +55,7 @@ export default class Modal extends PIXI.Container {
|
||||||
backgroundFill: theme.background,
|
backgroundFill: theme.background,
|
||||||
backgroundFillAlpha: 0.6,
|
backgroundFillAlpha: 0.6,
|
||||||
closeOnBackground: true,
|
closeOnBackground: true,
|
||||||
visible: true
|
visible: true,
|
||||||
},
|
},
|
||||||
opts
|
opts
|
||||||
)
|
)
|
||||||
|
@ -87,7 +87,7 @@ export default class Modal extends PIXI.Container {
|
||||||
// interaction
|
// interaction
|
||||||
//-----------------
|
//-----------------
|
||||||
this.interactive = true
|
this.interactive = true
|
||||||
this.on('added', e => {
|
this.on('added', (e) => {
|
||||||
if (this.visible) {
|
if (this.visible) {
|
||||||
this.show()
|
this.show()
|
||||||
}
|
}
|
||||||
|
@ -101,7 +101,7 @@ export default class Modal extends PIXI.Container {
|
||||||
|
|
||||||
if (this.opts.closeOnBackground) {
|
if (this.opts.closeOnBackground) {
|
||||||
background.interactive = true
|
background.interactive = true
|
||||||
background.on('pointerup', e => {
|
background.on('pointerup', (e) => {
|
||||||
this.hide()
|
this.hide()
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
@ -112,7 +112,7 @@ export default class Modal extends PIXI.Container {
|
||||||
visible: true,
|
visible: true,
|
||||||
onHidden: () => {
|
onHidden: () => {
|
||||||
this.hide()
|
this.hide()
|
||||||
}
|
},
|
||||||
})
|
})
|
||||||
let popup = new InteractivePopup(popupOpts)
|
let popup = new InteractivePopup(popupOpts)
|
||||||
this.popup = popup
|
this.popup = popup
|
||||||
|
@ -153,7 +153,7 @@ export default class Modal extends PIXI.Container {
|
||||||
show() {
|
show() {
|
||||||
TweenLite.to(this, this.theme.fast, {
|
TweenLite.to(this, this.theme.fast, {
|
||||||
alpha: 1,
|
alpha: 1,
|
||||||
onStart: () => (this.visible = true)
|
onStart: () => (this.visible = true),
|
||||||
})
|
})
|
||||||
|
|
||||||
return this
|
return this
|
||||||
|
@ -167,7 +167,7 @@ export default class Modal extends PIXI.Container {
|
||||||
hide() {
|
hide() {
|
||||||
TweenLite.to(this, this.theme.fast, {
|
TweenLite.to(this, this.theme.fast, {
|
||||||
alpha: 0,
|
alpha: 0,
|
||||||
onComplete: () => (this.visible = false)
|
onComplete: () => (this.visible = false),
|
||||||
})
|
})
|
||||||
|
|
||||||
return this
|
return this
|
||||||
|
|
|
@ -10,7 +10,7 @@ export default class Popover extends PIXI.Graphics {
|
||||||
placement = 'top',
|
placement = 'top',
|
||||||
width = 250,
|
width = 250,
|
||||||
titleStyle = {},
|
titleStyle = {},
|
||||||
textStyle = { fontSize: '1.6em' }
|
textStyle = { fontSize: '1.6em' },
|
||||||
} = {}) {
|
} = {}) {
|
||||||
super()
|
super()
|
||||||
|
|
||||||
|
@ -22,7 +22,7 @@ export default class Popover extends PIXI.Graphics {
|
||||||
placement,
|
placement,
|
||||||
width,
|
width,
|
||||||
titleStyle,
|
titleStyle,
|
||||||
textStyle
|
textStyle,
|
||||||
}
|
}
|
||||||
|
|
||||||
this.padding = 12
|
this.padding = 12
|
||||||
|
@ -33,7 +33,7 @@ export default class Popover extends PIXI.Graphics {
|
||||||
stroke: '#f6f6f6',
|
stroke: '#f6f6f6',
|
||||||
strokeThickness: 3,
|
strokeThickness: 3,
|
||||||
wordWrap: true,
|
wordWrap: true,
|
||||||
wordWrapWidth: width - this.padding * 2
|
wordWrapWidth: width - this.padding * 2,
|
||||||
}
|
}
|
||||||
|
|
||||||
this.titleTextStyle = new PIXI.TextStyle(Object.assign({}, style, titleStyle))
|
this.titleTextStyle = new PIXI.TextStyle(Object.assign({}, style, titleStyle))
|
||||||
|
|
|
@ -29,7 +29,7 @@ export class InteractivePopup extends AbstractPopup {
|
||||||
closeOnPopup: false,
|
closeOnPopup: false,
|
||||||
closeButton: true,
|
closeButton: true,
|
||||||
button: null,
|
button: null,
|
||||||
buttonGroup: null
|
buttonGroup: null,
|
||||||
},
|
},
|
||||||
opts
|
opts
|
||||||
)
|
)
|
||||||
|
@ -62,7 +62,7 @@ export class InteractivePopup extends AbstractPopup {
|
||||||
|
|
||||||
// interaction
|
// interaction
|
||||||
//-----------------
|
//-----------------
|
||||||
this.on('pointerup', e => {
|
this.on('pointerup', (e) => {
|
||||||
if (this.opts.closeOnPopup) {
|
if (this.opts.closeOnPopup) {
|
||||||
this.hide()
|
this.hide()
|
||||||
} else {
|
} else {
|
||||||
|
@ -95,7 +95,7 @@ export class InteractivePopup extends AbstractPopup {
|
||||||
|
|
||||||
closeButton.interactive = true
|
closeButton.interactive = true
|
||||||
closeButton.buttonMode = true
|
closeButton.buttonMode = true
|
||||||
closeButton.on('pointerdown', e => {
|
closeButton.on('pointerdown', (e) => {
|
||||||
this.hide()
|
this.hide()
|
||||||
})
|
})
|
||||||
|
|
||||||
|
@ -228,7 +228,7 @@ export default class Popup extends InteractivePopup {
|
||||||
{
|
{
|
||||||
closeButton: false,
|
closeButton: false,
|
||||||
minWidth: 0,
|
minWidth: 0,
|
||||||
minHeight: 0
|
minHeight: 0,
|
||||||
},
|
},
|
||||||
opts
|
opts
|
||||||
)
|
)
|
||||||
|
|
|
@ -50,7 +50,7 @@ export default class PopupMenu extends Popup {
|
||||||
items: [],
|
items: [],
|
||||||
margin: theme.margin / 2,
|
margin: theme.margin / 2,
|
||||||
textStyle: theme.textStyle,
|
textStyle: theme.textStyle,
|
||||||
closeOnPopup: true
|
closeOnPopup: true,
|
||||||
},
|
},
|
||||||
opts
|
opts
|
||||||
)
|
)
|
||||||
|
@ -88,19 +88,19 @@ export default class PopupMenu extends Popup {
|
||||||
object.interactive = true
|
object.interactive = true
|
||||||
object.buttonMode = true
|
object.buttonMode = true
|
||||||
}
|
}
|
||||||
object.on('pointerover', e => {
|
object.on('pointerover', (e) => {
|
||||||
TweenLite.to(object, this.theme.fast, {
|
TweenLite.to(object, this.theme.fast, {
|
||||||
alpha: 0.83,
|
alpha: 0.83,
|
||||||
overwrite: 'none'
|
overwrite: 'none',
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
object.on('pointerout', e => {
|
object.on('pointerout', (e) => {
|
||||||
TweenLite.to(object, this.theme.fast, {
|
TweenLite.to(object, this.theme.fast, {
|
||||||
alpha: 1,
|
alpha: 1,
|
||||||
overwrite: 'none'
|
overwrite: 'none',
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
object.on('pointerup', e => {
|
object.on('pointerup', (e) => {
|
||||||
item.action.call(object, e, object)
|
item.action.call(object, e, object)
|
||||||
if (this.opts.closeOnAction) {
|
if (this.opts.closeOnAction) {
|
||||||
this.hide()
|
this.hide()
|
||||||
|
|
|
@ -81,7 +81,7 @@ export default class Progress extends PIXI.Container {
|
||||||
backgroundFillAlpha: 1,
|
backgroundFillAlpha: 1,
|
||||||
radius: theme.radius,
|
radius: theme.radius,
|
||||||
destroyOnComplete: true,
|
destroyOnComplete: true,
|
||||||
visible: true
|
visible: true,
|
||||||
},
|
},
|
||||||
opts
|
opts
|
||||||
)
|
)
|
||||||
|
@ -116,7 +116,7 @@ export default class Progress extends PIXI.Container {
|
||||||
setup() {
|
setup() {
|
||||||
// interaction
|
// interaction
|
||||||
//-----------------
|
//-----------------
|
||||||
this.on('added', e => {
|
this.on('added', (e) => {
|
||||||
this.show()
|
this.show()
|
||||||
})
|
})
|
||||||
|
|
||||||
|
@ -261,7 +261,7 @@ export default class Progress extends PIXI.Container {
|
||||||
hide() {
|
hide() {
|
||||||
TweenLite.to(this, this.theme.fast, {
|
TweenLite.to(this, this.theme.fast, {
|
||||||
alpha: 0,
|
alpha: 0,
|
||||||
onComplete: () => (this.visible = false)
|
onComplete: () => (this.visible = false),
|
||||||
})
|
})
|
||||||
|
|
||||||
return this
|
return this
|
||||||
|
@ -293,10 +293,10 @@ export default class Progress extends PIXI.Container {
|
||||||
if (value === 100 && this.opts.destroyOnComplete) {
|
if (value === 100 && this.opts.destroyOnComplete) {
|
||||||
TweenLite.to(this, this.theme.fast, {
|
TweenLite.to(this, this.theme.fast, {
|
||||||
alpha: 0,
|
alpha: 0,
|
||||||
onComplete: () => this.destroy({ children: true })
|
onComplete: () => this.destroy({ children: true }),
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -33,7 +33,7 @@ export class ScatterContainer extends PIXI.Graphics {
|
||||||
showPolygon = false,
|
showPolygon = false,
|
||||||
showTouches = false,
|
showTouches = false,
|
||||||
backgroundColor = null,
|
backgroundColor = null,
|
||||||
app = window.app
|
app = window.app,
|
||||||
} = {}
|
} = {}
|
||||||
) {
|
) {
|
||||||
super()
|
super()
|
||||||
|
@ -41,7 +41,7 @@ export class ScatterContainer extends PIXI.Graphics {
|
||||||
if (this.container)
|
if (this.container)
|
||||||
this.containerDimensions = {
|
this.containerDimensions = {
|
||||||
x: this.container.width,
|
x: this.container.width,
|
||||||
y: this.container.height
|
y: this.container.height,
|
||||||
}
|
}
|
||||||
this.backgroundWidth = null
|
this.backgroundWidth = null
|
||||||
this.backgroundHeight = null
|
this.backgroundHeight = null
|
||||||
|
@ -56,7 +56,7 @@ export class ScatterContainer extends PIXI.Graphics {
|
||||||
this.backgroundColor = backgroundColor
|
this.backgroundColor = backgroundColor
|
||||||
if (showBounds || showTouches || showPolygon) {
|
if (showBounds || showTouches || showPolygon) {
|
||||||
//console.log("Show TOUCHES!!!")
|
//console.log("Show TOUCHES!!!")
|
||||||
this.app.ticker.add(delta => this.update(delta), this)
|
this.app.ticker.add((delta) => this.update(delta), this)
|
||||||
}
|
}
|
||||||
if (backgroundColor) {
|
if (backgroundColor) {
|
||||||
this.updateBackground()
|
this.updateBackground()
|
||||||
|
@ -277,7 +277,7 @@ export class DisplayObjectScatter extends AbstractScatter {
|
||||||
overdoScaling = 1.5,
|
overdoScaling = 1.5,
|
||||||
onTransform = null,
|
onTransform = null,
|
||||||
onResize,
|
onResize,
|
||||||
onThrowFinished = null
|
onThrowFinished = null,
|
||||||
} = {}
|
} = {}
|
||||||
) {
|
) {
|
||||||
// For the simulation of named parameters,
|
// For the simulation of named parameters,
|
||||||
|
@ -300,7 +300,7 @@ export class DisplayObjectScatter extends AbstractScatter {
|
||||||
onThrowFinished,
|
onThrowFinished,
|
||||||
rotationDegrees,
|
rotationDegrees,
|
||||||
rotation,
|
rotation,
|
||||||
onTransform
|
onTransform,
|
||||||
})
|
})
|
||||||
this.onResize = onResize
|
this.onResize = onResize
|
||||||
this.displayObject = displayObject
|
this.displayObject = displayObject
|
||||||
|
@ -325,7 +325,7 @@ export class DisplayObjectScatter extends AbstractScatter {
|
||||||
scale: this.scale,
|
scale: this.scale,
|
||||||
x: this.x,
|
x: this.x,
|
||||||
y: this.y,
|
y: this.y,
|
||||||
rotation: this.rotation
|
rotation: this.rotation,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -43,13 +43,13 @@ export default class Scrollbox extends PIXI.Container {
|
||||||
underflow: 'top-left',
|
underflow: 'top-left',
|
||||||
fadeScrollbar: false,
|
fadeScrollbar: false,
|
||||||
fadeWait: 3000,
|
fadeWait: 3000,
|
||||||
fadeEase: 'easeInOutSine'
|
fadeEase: 'easeInOutSine',
|
||||||
},
|
},
|
||||||
options
|
options
|
||||||
)
|
)
|
||||||
this.ease = new PIXI.extras.Ease.list()
|
this.ease = new PIXI.extras.Ease.list()
|
||||||
|
|
||||||
this.on('added', event => {
|
this.on('added', (event) => {
|
||||||
this.update()
|
this.update()
|
||||||
})
|
})
|
||||||
|
|
||||||
|
@ -63,7 +63,7 @@ export default class Scrollbox extends PIXI.Container {
|
||||||
passiveWheel: this.options.stopPropagation,
|
passiveWheel: this.options.stopPropagation,
|
||||||
stopPropagation: this.options.stopPropagation,
|
stopPropagation: this.options.stopPropagation,
|
||||||
screenWidth: this.options.boxWidth,
|
screenWidth: this.options.boxWidth,
|
||||||
screenHeight: this.options.boxHeight
|
screenHeight: this.options.boxHeight,
|
||||||
})
|
})
|
||||||
)
|
)
|
||||||
this.content.decelerate().on('moved', () => this._drawScrollbars())
|
this.content.decelerate().on('moved', () => this._drawScrollbars())
|
||||||
|
@ -396,10 +396,7 @@ export default class Scrollbox extends PIXI.Container {
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
_drawMask() {
|
_drawMask() {
|
||||||
this._maskContent
|
this._maskContent.beginFill(0).drawRect(0, 0, this.boxWidth, this.boxHeight).endFill()
|
||||||
.beginFill(0)
|
|
||||||
.drawRect(0, 0, this.boxWidth, this.boxHeight)
|
|
||||||
.endFill()
|
|
||||||
this.content.mask = this._maskContent
|
this.content.mask = this._maskContent
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -440,7 +437,7 @@ export default class Scrollbox extends PIXI.Container {
|
||||||
const time = this.options.fade === true ? 1000 : this.options.fade
|
const time = this.options.fade === true ? 1000 : this.options.fade
|
||||||
this.fade = this.ease.to(this.scrollbar, { alpha: 0 }, time, {
|
this.fade = this.ease.to(this.scrollbar, { alpha: 0 }, time, {
|
||||||
wait: this.options.fadeWait,
|
wait: this.options.fadeWait,
|
||||||
ease: this.options.fadeEase
|
ease: this.options.fadeEase,
|
||||||
})
|
})
|
||||||
this.fade.on('each', () => (this.content.dirty = true))
|
this.fade.on('each', () => (this.content.dirty = true))
|
||||||
}
|
}
|
||||||
|
|
|
@ -119,7 +119,7 @@ export default class Slider extends PIXI.Container {
|
||||||
onUpdate: null,
|
onUpdate: null,
|
||||||
onComplete: null,
|
onComplete: null,
|
||||||
tooltip: null,
|
tooltip: null,
|
||||||
visible: true
|
visible: true,
|
||||||
},
|
},
|
||||||
opts
|
opts
|
||||||
)
|
)
|
||||||
|
@ -174,7 +174,7 @@ export default class Slider extends PIXI.Container {
|
||||||
//-----------------
|
//-----------------
|
||||||
const container = this.opts.container
|
const container = this.opts.container
|
||||||
|
|
||||||
this.on('pointermove', e => {
|
this.on('pointermove', (e) => {
|
||||||
if (this.control.dragging) {
|
if (this.control.dragging) {
|
||||||
const moveX = this.control.event.data.getLocalPosition(this.control.parent).x
|
const moveX = this.control.event.data.getLocalPosition(this.control.parent).x
|
||||||
this._value = this.pixelToValue(moveX - this.control.delta - this.opts.controlRadius)
|
this._value = this.pixelToValue(moveX - this.control.delta - this.opts.controlRadius)
|
||||||
|
@ -188,20 +188,20 @@ export default class Slider extends PIXI.Container {
|
||||||
})
|
})
|
||||||
|
|
||||||
if (container instanceof Element) {
|
if (container instanceof Element) {
|
||||||
container.addEventListener('pointerup', e => this.onEnd(e), false)
|
container.addEventListener('pointerup', (e) => this.onEnd(e), false)
|
||||||
container.addEventListener('pointercancel', e => this.onEnd(e), false)
|
container.addEventListener('pointercancel', (e) => this.onEnd(e), false)
|
||||||
container.addEventListener('pointerleave', e => this.onEnd(e), false)
|
container.addEventListener('pointerleave', (e) => this.onEnd(e), false)
|
||||||
container.addEventListener('pointerout', e => this.onEnd(e), false)
|
container.addEventListener('pointerout', (e) => this.onEnd(e), false)
|
||||||
container.addEventListener('mouseup', e => this.onEnd(e), false)
|
container.addEventListener('mouseup', (e) => this.onEnd(e), false)
|
||||||
container.addEventListener('mousecancel', e => this.onEnd(e), false)
|
container.addEventListener('mousecancel', (e) => this.onEnd(e), false)
|
||||||
container.addEventListener('mouseleave', e => this.onEnd(e), false)
|
container.addEventListener('mouseleave', (e) => this.onEnd(e), false)
|
||||||
container.addEventListener('mouseout', e => this.onEnd(e), false)
|
container.addEventListener('mouseout', (e) => this.onEnd(e), false)
|
||||||
} else {
|
} else {
|
||||||
container.interactive = true
|
container.interactive = true
|
||||||
container.on('pointerup', e => this.onEnd(e))
|
container.on('pointerup', (e) => this.onEnd(e))
|
||||||
container.on('pointercancel', e => this.onEnd(e))
|
container.on('pointercancel', (e) => this.onEnd(e))
|
||||||
container.on('pointerleave', e => this.onEnd(e))
|
container.on('pointerleave', (e) => this.onEnd(e))
|
||||||
container.on('pointerout', e => this.onEnd(e))
|
container.on('pointerout', (e) => this.onEnd(e))
|
||||||
}
|
}
|
||||||
|
|
||||||
// Slider
|
// Slider
|
||||||
|
@ -217,7 +217,7 @@ export default class Slider extends PIXI.Container {
|
||||||
control.y = this.opts.controlRadius
|
control.y = this.opts.controlRadius
|
||||||
|
|
||||||
// pointerdown on the control for dragndrop
|
// pointerdown on the control for dragndrop
|
||||||
control.on('pointerdown', e => {
|
control.on('pointerdown', (e) => {
|
||||||
control.event = e
|
control.event = e
|
||||||
control.delta = e.data.getLocalPosition(this.control).x
|
control.delta = e.data.getLocalPosition(this.control).x
|
||||||
control.dragging = true
|
control.dragging = true
|
||||||
|
@ -233,21 +233,21 @@ export default class Slider extends PIXI.Container {
|
||||||
|
|
||||||
// interaction
|
// interaction
|
||||||
//-----------------
|
//-----------------
|
||||||
this.sliderObj.on('pointerover', e => {
|
this.sliderObj.on('pointerover', (e) => {
|
||||||
TweenLite.to(this.control, this.theme.fast, { alpha: 0.83 })
|
TweenLite.to(this.control, this.theme.fast, { alpha: 0.83 })
|
||||||
})
|
})
|
||||||
|
|
||||||
this.sliderObj.on('pointerout', e => {
|
this.sliderObj.on('pointerout', (e) => {
|
||||||
TweenLite.to(this.control, this.theme.fast, { alpha: 1 })
|
TweenLite.to(this.control, this.theme.fast, { alpha: 1 })
|
||||||
})
|
})
|
||||||
|
|
||||||
this.sliderObj.on('pointerdown', e => {
|
this.sliderObj.on('pointerdown', (e) => {
|
||||||
this.sliderObj.pointerdowned = true
|
this.sliderObj.pointerdowned = true
|
||||||
TweenLite.to(this.control, this.theme.fast, { alpha: 0.7 })
|
TweenLite.to(this.control, this.theme.fast, { alpha: 0.7 })
|
||||||
})
|
})
|
||||||
|
|
||||||
// Click on the slider bar
|
// Click on the slider bar
|
||||||
this.sliderObj.on('pointerup', e => {
|
this.sliderObj.on('pointerup', (e) => {
|
||||||
if (this.sliderObj.pointerdowned) {
|
if (this.sliderObj.pointerdowned) {
|
||||||
this.sliderObj.pointerdowned = false
|
this.sliderObj.pointerdowned = false
|
||||||
const position = e.data.getLocalPosition(this.control.parent)
|
const position = e.data.getLocalPosition(this.control.parent)
|
||||||
|
@ -266,7 +266,7 @@ export default class Slider extends PIXI.Container {
|
||||||
if (typeof this.opts.tooltip === 'string') {
|
if (typeof this.opts.tooltip === 'string') {
|
||||||
this.tooltip = new Tooltip({
|
this.tooltip = new Tooltip({
|
||||||
object: this,
|
object: this,
|
||||||
content: this.opts.tooltip
|
content: this.opts.tooltip,
|
||||||
})
|
})
|
||||||
} else {
|
} else {
|
||||||
this.opts.tooltip.object = this
|
this.opts.tooltip.object = this
|
||||||
|
|
|
@ -82,7 +82,7 @@ export default class Stylus extends PIXI.Graphics {
|
||||||
captureEvents = true,
|
captureEvents = true,
|
||||||
acceptMouseEvents = true,
|
acceptMouseEvents = true,
|
||||||
lineWidth = 16,
|
lineWidth = 16,
|
||||||
minStrokeLength = 4
|
minStrokeLength = 4,
|
||||||
} = {}) {
|
} = {}) {
|
||||||
super()
|
super()
|
||||||
this.activePointers = 0
|
this.activePointers = 0
|
||||||
|
@ -164,7 +164,7 @@ export default class Stylus extends PIXI.Graphics {
|
||||||
}
|
}
|
||||||
|
|
||||||
registerEventHandler() {
|
registerEventHandler() {
|
||||||
window.addEventListener('keydown', e => {
|
window.addEventListener('keydown', (e) => {
|
||||||
switch (e.keyCode) {
|
switch (e.keyCode) {
|
||||||
case 38: // up arrow
|
case 38: // up arrow
|
||||||
this.tiltX += 5
|
this.tiltX += 5
|
||||||
|
@ -182,7 +182,7 @@ export default class Stylus extends PIXI.Graphics {
|
||||||
if (this.debug) console.log('keydown', e.keyCode, this.tiltX, this.tiltY)
|
if (this.debug) console.log('keydown', e.keyCode, this.tiltX, this.tiltY)
|
||||||
})
|
})
|
||||||
|
|
||||||
this.on('pointerdown', e => {
|
this.on('pointerdown', (e) => {
|
||||||
if (this.debug) console.log('pointerdown', e)
|
if (this.debug) console.log('pointerdown', e)
|
||||||
if (this.eventInside(e)) {
|
if (this.eventInside(e)) {
|
||||||
this.activePointers += 1
|
this.activePointers += 1
|
||||||
|
@ -192,13 +192,13 @@ export default class Stylus extends PIXI.Graphics {
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
this.on('pointermove', e => {
|
this.on('pointermove', (e) => {
|
||||||
if (Events.isPointerDown(e.data.originalEvent) || this.isStylusPointer(e) || this.isStylusTouch(e)) {
|
if (Events.isPointerDown(e.data.originalEvent) || this.isStylusPointer(e) || this.isStylusTouch(e)) {
|
||||||
if (this.debug) console.log('pointermove', e, this.eventInside(e))
|
if (this.debug) console.log('pointermove', e, this.eventInside(e))
|
||||||
if (this.eventInside(e) && this.singlePointer()) this.moveStroke(this.toStroke(e))
|
if (this.eventInside(e) && this.singlePointer()) this.moveStroke(this.toStroke(e))
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
this.on('pointerup', e => {
|
this.on('pointerup', (e) => {
|
||||||
if (this.eventInside(e)) {
|
if (this.eventInside(e)) {
|
||||||
if (this.activePointers > 0) {
|
if (this.activePointers > 0) {
|
||||||
this.activePointers -= 1
|
this.activePointers -= 1
|
||||||
|
@ -207,13 +207,13 @@ export default class Stylus extends PIXI.Graphics {
|
||||||
}
|
}
|
||||||
if (this.debug) console.log('pointerup', this.activePointers)
|
if (this.debug) console.log('pointerup', this.activePointers)
|
||||||
})
|
})
|
||||||
this.on('pointerleave', e => {
|
this.on('pointerleave', (e) => {
|
||||||
if (this.activePointers > 0) {
|
if (this.activePointers > 0) {
|
||||||
this.activePointers -= 1
|
this.activePointers -= 1
|
||||||
}
|
}
|
||||||
this.endStroke(this.toStroke(e))
|
this.endStroke(this.toStroke(e))
|
||||||
})
|
})
|
||||||
this.on('pointercancel', e => {
|
this.on('pointercancel', (e) => {
|
||||||
if (this.activePointers > 0) {
|
if (this.activePointers > 0) {
|
||||||
this.activePointers -= 1
|
this.activePointers -= 1
|
||||||
}
|
}
|
||||||
|
@ -277,7 +277,7 @@ export default class Stylus extends PIXI.Graphics {
|
||||||
tiltX: this.tiltX,
|
tiltX: this.tiltX,
|
||||||
tiltY: this.tiltY,
|
tiltY: this.tiltY,
|
||||||
color: this.color,
|
color: this.color,
|
||||||
lineWidth: this.tiltToLineWidth(this.tiltY)
|
lineWidth: this.tiltToLineWidth(this.tiltY),
|
||||||
}
|
}
|
||||||
return desc
|
return desc
|
||||||
}
|
}
|
||||||
|
|
|
@ -147,7 +147,7 @@ export default class Switch extends PIXI.Container {
|
||||||
beforeAction: null,
|
beforeAction: null,
|
||||||
afterAction: null,
|
afterAction: null,
|
||||||
tooltip: null,
|
tooltip: null,
|
||||||
visible: true
|
visible: true,
|
||||||
},
|
},
|
||||||
opts
|
opts
|
||||||
)
|
)
|
||||||
|
@ -188,7 +188,7 @@ export default class Switch extends PIXI.Container {
|
||||||
controlStroke: this.opts.controlStroke,
|
controlStroke: this.opts.controlStroke,
|
||||||
controlStrokeWidth: this.opts.controlStrokeWidth,
|
controlStrokeWidth: this.opts.controlStrokeWidth,
|
||||||
controlStrokeAlpha: this.opts.controlStrokeAlpha,
|
controlStrokeAlpha: this.opts.controlStrokeAlpha,
|
||||||
controlRadius: this.opts.controlRadius
|
controlRadius: this.opts.controlRadius,
|
||||||
}
|
}
|
||||||
|
|
||||||
// setup
|
// setup
|
||||||
|
@ -228,19 +228,19 @@ export default class Switch extends PIXI.Container {
|
||||||
|
|
||||||
// interaction
|
// interaction
|
||||||
//-----------------
|
//-----------------
|
||||||
this.switchObj.on('pointerover', e => {
|
this.switchObj.on('pointerover', (e) => {
|
||||||
TweenLite.to(this.control, this.theme.fast, { alpha: 0.83 })
|
TweenLite.to(this.control, this.theme.fast, { alpha: 0.83 })
|
||||||
})
|
})
|
||||||
|
|
||||||
this.switchObj.on('pointerout', e => {
|
this.switchObj.on('pointerout', (e) => {
|
||||||
TweenLite.to(this.control, this.theme.fast, { alpha: 1 })
|
TweenLite.to(this.control, this.theme.fast, { alpha: 1 })
|
||||||
})
|
})
|
||||||
|
|
||||||
this.switchObj.on('pointerdown', e => {
|
this.switchObj.on('pointerdown', (e) => {
|
||||||
TweenLite.to(this.control, this.theme.fast, { alpha: 0.7 })
|
TweenLite.to(this.control, this.theme.fast, { alpha: 0.7 })
|
||||||
})
|
})
|
||||||
|
|
||||||
this.switchObj.on('pointerup', e => {
|
this.switchObj.on('pointerup', (e) => {
|
||||||
if (this.opts.beforeAction) {
|
if (this.opts.beforeAction) {
|
||||||
this.opts.beforeAction.call(this, e, this)
|
this.opts.beforeAction.call(this, e, this)
|
||||||
}
|
}
|
||||||
|
@ -278,7 +278,7 @@ export default class Switch extends PIXI.Container {
|
||||||
if (typeof this.opts.tooltip === 'string') {
|
if (typeof this.opts.tooltip === 'string') {
|
||||||
this.tooltip = new Tooltip({
|
this.tooltip = new Tooltip({
|
||||||
object: this,
|
object: this,
|
||||||
content: this.opts.tooltip
|
content: this.opts.tooltip,
|
||||||
})
|
})
|
||||||
} else {
|
} else {
|
||||||
this.opts.tooltip.object = this
|
this.opts.tooltip.object = this
|
||||||
|
@ -416,7 +416,7 @@ export default class Switch extends PIXI.Container {
|
||||||
stroke: this.opts.strokeActive,
|
stroke: this.opts.strokeActive,
|
||||||
controlFill: this.opts.controlFillActive,
|
controlFill: this.opts.controlFillActive,
|
||||||
controlStroke: this.opts.controlStrokeActive,
|
controlStroke: this.opts.controlStrokeActive,
|
||||||
format: 'number'
|
format: 'number',
|
||||||
},
|
},
|
||||||
fillAlpha: this.opts.fillActiveAlpha,
|
fillAlpha: this.opts.fillActiveAlpha,
|
||||||
strokeWidth: this.opts.strokeActiveWidth,
|
strokeWidth: this.opts.strokeActiveWidth,
|
||||||
|
@ -426,11 +426,11 @@ export default class Switch extends PIXI.Container {
|
||||||
controlStrokeAlpha: this.opts.controlStrokeActiveAlpha,
|
controlStrokeAlpha: this.opts.controlStrokeActiveAlpha,
|
||||||
controlRadius: this.opts.controlRadiusActive,
|
controlRadius: this.opts.controlRadiusActive,
|
||||||
onUpdate: () => this.drawAnimated(),
|
onUpdate: () => this.drawAnimated(),
|
||||||
onComplete: () => this.draw()
|
onComplete: () => this.draw(),
|
||||||
})
|
})
|
||||||
} else {
|
} else {
|
||||||
TweenLite.to(this.control, this.opts.durationActive, {
|
TweenLite.to(this.control, this.opts.durationActive, {
|
||||||
x: this.xInactive
|
x: this.xInactive,
|
||||||
})
|
})
|
||||||
TweenLite.to(this.tempAnimated, this.opts.durationActive, {
|
TweenLite.to(this.tempAnimated, this.opts.durationActive, {
|
||||||
colorProps: {
|
colorProps: {
|
||||||
|
@ -438,7 +438,7 @@ export default class Switch extends PIXI.Container {
|
||||||
stroke: this.opts.stroke,
|
stroke: this.opts.stroke,
|
||||||
controlFill: this.opts.controlFill,
|
controlFill: this.opts.controlFill,
|
||||||
controlStroke: this.opts.controlStroke,
|
controlStroke: this.opts.controlStroke,
|
||||||
format: 'number'
|
format: 'number',
|
||||||
},
|
},
|
||||||
fillAlpha: this.opts.fillAlpha,
|
fillAlpha: this.opts.fillAlpha,
|
||||||
strokeWidth: this.opts.strokeWidth,
|
strokeWidth: this.opts.strokeWidth,
|
||||||
|
@ -448,7 +448,7 @@ export default class Switch extends PIXI.Container {
|
||||||
controlStrokeAlpha: this.opts.controlStrokeAlpha,
|
controlStrokeAlpha: this.opts.controlStrokeAlpha,
|
||||||
controlRadius: this.opts.controlRadius,
|
controlRadius: this.opts.controlRadius,
|
||||||
onUpdate: () => this.drawAnimated(),
|
onUpdate: () => this.drawAnimated(),
|
||||||
onComplete: () => this.draw()
|
onComplete: () => this.draw(),
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -121,7 +121,7 @@ export class RecorderTools extends PIXI.Container {
|
||||||
// Since this delegate might shadow another delegate, we mus avoid
|
// Since this delegate might shadow another delegate, we mus avoid
|
||||||
// capturing PointerEvents.
|
// capturing PointerEvents.
|
||||||
this.delegate = new InteractionMapper(container, this, {
|
this.delegate = new InteractionMapper(container, this, {
|
||||||
capturePointerEvents: false
|
capturePointerEvents: false,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -150,7 +150,7 @@ export default class Text extends PIXI.Container {
|
||||||
verticalAlign: 'middle',
|
verticalAlign: 'middle',
|
||||||
tooltip: null,
|
tooltip: null,
|
||||||
badge: null,
|
badge: null,
|
||||||
visible: true
|
visible: true,
|
||||||
},
|
},
|
||||||
opts
|
opts
|
||||||
)
|
)
|
||||||
|
@ -171,7 +171,7 @@ export default class Text extends PIXI.Container {
|
||||||
strokeAlpha: 0,
|
strokeAlpha: 0,
|
||||||
strokeActiveAlpha: 0,
|
strokeActiveAlpha: 0,
|
||||||
fillAlpha: 0,
|
fillAlpha: 0,
|
||||||
fillActiveAlpha: 0
|
fillActiveAlpha: 0,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -243,15 +243,15 @@ export default class Text extends PIXI.Container {
|
||||||
|
|
||||||
// interaction
|
// interaction
|
||||||
//-----------------
|
//-----------------
|
||||||
this.button.on('pointerover', e => {
|
this.button.on('pointerover', (e) => {
|
||||||
this.capture(e)
|
this.capture(e)
|
||||||
TweenLite.to([this.button, this.content], this.theme.fast, {
|
TweenLite.to([this.button, this.content], this.theme.fast, {
|
||||||
alpha: 0.83,
|
alpha: 0.83,
|
||||||
overwrite: 'none'
|
overwrite: 'none',
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
this.button.on('pointermove', e => {
|
this.button.on('pointermove', (e) => {
|
||||||
this.capture(e)
|
this.capture(e)
|
||||||
})
|
})
|
||||||
|
|
||||||
|
@ -262,17 +262,17 @@ export default class Text extends PIXI.Container {
|
||||||
this.button.on('scroll', this.onEnd.bind(this))
|
this.button.on('scroll', this.onEnd.bind(this))
|
||||||
|
|
||||||
// eslint-disable-next-line no-unused-vars
|
// eslint-disable-next-line no-unused-vars
|
||||||
this.button.on('pointerdown', e => {
|
this.button.on('pointerdown', (e) => {
|
||||||
//this.capture(e)
|
//this.capture(e)
|
||||||
this.__start.x = e.data.global.x
|
this.__start.x = e.data.global.x
|
||||||
this.__start.y = e.data.global.y
|
this.__start.y = e.data.global.y
|
||||||
TweenLite.to([this.button, this.content], this.theme.fast, {
|
TweenLite.to([this.button, this.content], this.theme.fast, {
|
||||||
alpha: 0.7,
|
alpha: 0.7,
|
||||||
overwrite: 'none'
|
overwrite: 'none',
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
this.button.on('pointerup', e => {
|
this.button.on('pointerup', (e) => {
|
||||||
this.capture(e)
|
this.capture(e)
|
||||||
|
|
||||||
const distance = Points.distance(e.data.global, this.__start)
|
const distance = Points.distance(e.data.global, this.__start)
|
||||||
|
@ -288,7 +288,7 @@ export default class Text extends PIXI.Container {
|
||||||
|
|
||||||
TweenLite.to([this.button, this.content], this.theme.fast, {
|
TweenLite.to([this.button, this.content], this.theme.fast, {
|
||||||
alpha: 0.83,
|
alpha: 0.83,
|
||||||
overwrite: 'none'
|
overwrite: 'none',
|
||||||
})
|
})
|
||||||
|
|
||||||
if (this.opts.type === 'checkbox') {
|
if (this.opts.type === 'checkbox') {
|
||||||
|
@ -315,7 +315,7 @@ export default class Text extends PIXI.Container {
|
||||||
if (typeof this.opts.tooltip === 'string') {
|
if (typeof this.opts.tooltip === 'string') {
|
||||||
this.tooltip = new Tooltip({
|
this.tooltip = new Tooltip({
|
||||||
object: this,
|
object: this,
|
||||||
content: this.opts.tooltip
|
content: this.opts.tooltip,
|
||||||
})
|
})
|
||||||
} else {
|
} else {
|
||||||
this.opts.tooltip = Object.assign({}, { object: this }, this.opts.tooltip)
|
this.opts.tooltip = Object.assign({}, { object: this }, this.opts.tooltip)
|
||||||
|
@ -332,7 +332,7 @@ export default class Text extends PIXI.Container {
|
||||||
align: 'right',
|
align: 'right',
|
||||||
verticalAlign: 'top',
|
verticalAlign: 'top',
|
||||||
offsetLeft: 0,
|
offsetLeft: 0,
|
||||||
offsetTop: 0
|
offsetTop: 0,
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
if (typeof this.opts.badge === 'string') {
|
if (typeof this.opts.badge === 'string') {
|
||||||
|
@ -708,7 +708,7 @@ export default class Text extends PIXI.Container {
|
||||||
this.capture(event)
|
this.capture(event)
|
||||||
TweenLite.to([this.button, this.content], this.theme.fast, {
|
TweenLite.to([this.button, this.content], this.theme.fast, {
|
||||||
alpha: 1,
|
alpha: 1,
|
||||||
overwrite: 'none'
|
overwrite: 'none',
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -112,7 +112,7 @@ export default class Theme {
|
||||||
textActiveAlpha: 1,
|
textActiveAlpha: 1,
|
||||||
iconColor: color2,
|
iconColor: color2,
|
||||||
iconColorActive: colorPrimary,
|
iconColorActive: colorPrimary,
|
||||||
background: color1
|
background: color1,
|
||||||
},
|
},
|
||||||
opts
|
opts
|
||||||
)
|
)
|
||||||
|
@ -129,7 +129,7 @@ export default class Theme {
|
||||||
stroke: color1,
|
stroke: color1,
|
||||||
strokeThickness: 0,
|
strokeThickness: 0,
|
||||||
miterLimit: 1,
|
miterLimit: 1,
|
||||||
lineJoin: 'round'
|
lineJoin: 'round',
|
||||||
},
|
},
|
||||||
this.opts.textStyle
|
this.opts.textStyle
|
||||||
)
|
)
|
||||||
|
|
|
@ -75,7 +75,7 @@ export class Ticks {
|
||||||
end: last,
|
end: last,
|
||||||
visibleStart: visibleFirst,
|
visibleStart: visibleFirst,
|
||||||
visibleEnd: visibleLast,
|
visibleEnd: visibleLast,
|
||||||
units: units
|
units: units,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -717,7 +717,7 @@ export default class Timeline extends BitmapLabeledGraphics {
|
||||||
{
|
{
|
||||||
x: x,
|
x: x,
|
||||||
y: y,
|
y: y,
|
||||||
align
|
align,
|
||||||
},
|
},
|
||||||
FontInfo.small
|
FontInfo.small
|
||||||
)
|
)
|
||||||
|
@ -732,21 +732,21 @@ export default class Timeline extends BitmapLabeledGraphics {
|
||||||
let start = this.start.toLocaleDateString('de', {
|
let start = this.start.toLocaleDateString('de', {
|
||||||
year: 'numeric',
|
year: 'numeric',
|
||||||
month: 'numeric',
|
month: 'numeric',
|
||||||
day: 'numeric'
|
day: 'numeric',
|
||||||
})
|
})
|
||||||
let end = this.end.toLocaleDateString('de', {
|
let end = this.end.toLocaleDateString('de', {
|
||||||
year: 'numeric',
|
year: 'numeric',
|
||||||
month: 'numeric',
|
month: 'numeric',
|
||||||
day: 'numeric'
|
day: 'numeric',
|
||||||
})
|
})
|
||||||
this.ensureLabel(this.labelPrefix + 'start', start, {
|
this.ensureLabel(this.labelPrefix + 'start', start, {
|
||||||
x: this.toX(this.start),
|
x: this.toX(this.start),
|
||||||
y: h2
|
y: h2,
|
||||||
})
|
})
|
||||||
this.ensureLabel(this.labelPrefix + 'end', end, {
|
this.ensureLabel(this.labelPrefix + 'end', end, {
|
||||||
x: this.toX(this.end),
|
x: this.toX(this.end),
|
||||||
y: h2,
|
y: h2,
|
||||||
align: 'right'
|
align: 'right',
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -56,7 +56,7 @@ export default class Tooltip extends AbstractPopup {
|
||||||
container: null,
|
container: null,
|
||||||
offsetLeft: 8,
|
offsetLeft: 8,
|
||||||
offsetTop: -8,
|
offsetTop: -8,
|
||||||
delay: 0
|
delay: 0,
|
||||||
},
|
},
|
||||||
opts
|
opts
|
||||||
)
|
)
|
||||||
|
@ -89,11 +89,11 @@ export default class Tooltip extends AbstractPopup {
|
||||||
|
|
||||||
let mouseoverTooltip = false
|
let mouseoverTooltip = false
|
||||||
|
|
||||||
this.on('mouseover', e => {
|
this.on('mouseover', (e) => {
|
||||||
mouseoverTooltip = true
|
mouseoverTooltip = true
|
||||||
})
|
})
|
||||||
|
|
||||||
this.on('mouseout', e => {
|
this.on('mouseout', (e) => {
|
||||||
mouseoverTooltip = false
|
mouseoverTooltip = false
|
||||||
if (!mouseoverObject) {
|
if (!mouseoverObject) {
|
||||||
this.hide(() => {
|
this.hide(() => {
|
||||||
|
@ -109,7 +109,7 @@ export default class Tooltip extends AbstractPopup {
|
||||||
|
|
||||||
let mouseoverObject = false
|
let mouseoverObject = false
|
||||||
|
|
||||||
object.on('mouseover', e => {
|
object.on('mouseover', (e) => {
|
||||||
this.timeout = window.setTimeout(() => {
|
this.timeout = window.setTimeout(() => {
|
||||||
mouseoverObject = true
|
mouseoverObject = true
|
||||||
this.visible = true
|
this.visible = true
|
||||||
|
@ -118,13 +118,13 @@ export default class Tooltip extends AbstractPopup {
|
||||||
}, this.opts.delay * 1000)
|
}, this.opts.delay * 1000)
|
||||||
})
|
})
|
||||||
|
|
||||||
object.on('mousemove', e => {
|
object.on('mousemove', (e) => {
|
||||||
if (mouseoverObject) {
|
if (mouseoverObject) {
|
||||||
this.setPosition(e)
|
this.setPosition(e)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
object.on('mouseout', e => {
|
object.on('mouseout', (e) => {
|
||||||
mouseoverObject = false
|
mouseoverObject = false
|
||||||
window.clearTimeout(this.timeout)
|
window.clearTimeout(this.timeout)
|
||||||
if (!mouseoverTooltip) {
|
if (!mouseoverTooltip) {
|
||||||
|
|
|
@ -59,7 +59,7 @@ export default class Volatile {
|
||||||
distance: 160,
|
distance: 160,
|
||||||
duration: 1.5,
|
duration: 1.5,
|
||||||
ease: Quad.easeOut,
|
ease: Quad.easeOut,
|
||||||
destroyOnComplete: true
|
destroyOnComplete: true,
|
||||||
},
|
},
|
||||||
opts
|
opts
|
||||||
)
|
)
|
||||||
|
@ -149,7 +149,7 @@ export default class Volatile {
|
||||||
if (this.opts.destroyOnComplete) {
|
if (this.opts.destroyOnComplete) {
|
||||||
object.destroy({ children: true })
|
object.destroy({ children: true })
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
62
lib/popup.js
62
lib/popup.js
|
@ -63,7 +63,7 @@ export default class Popup extends Poppable {
|
||||||
onResize = null,
|
onResize = null,
|
||||||
onMove = null,
|
onMove = null,
|
||||||
noStyle = false,
|
noStyle = false,
|
||||||
hideOnUp = true
|
hideOnUp = true,
|
||||||
} = {}) {
|
} = {}) {
|
||||||
super()
|
super()
|
||||||
this.context = context
|
this.context = context
|
||||||
|
@ -129,7 +129,7 @@ export default class Popup extends Poppable {
|
||||||
img.style.top = '0px'
|
img.style.top = '0px'
|
||||||
img.style.width = '16px'
|
img.style.width = '16px'
|
||||||
img.style.height = '16px'
|
img.style.height = '16px'
|
||||||
img.onclick = e => {
|
img.onclick = (e) => {
|
||||||
this.close()
|
this.close()
|
||||||
}
|
}
|
||||||
this.element.appendChild(img)
|
this.element.appendChild(img)
|
||||||
|
@ -143,17 +143,17 @@ export default class Popup extends Poppable {
|
||||||
img.style.height = '16px'
|
img.style.height = '16px'
|
||||||
img.src = this.resizeIcon
|
img.src = this.resizeIcon
|
||||||
img.setAttribute('draggable', true)
|
img.setAttribute('draggable', true)
|
||||||
img.ondragstart = e => {
|
img.ondragstart = (e) => {
|
||||||
this.currentPos = { x: e.clientX, y: e.clientY }
|
this.currentPos = { x: e.clientX, y: e.clientY }
|
||||||
return true
|
return true
|
||||||
}
|
}
|
||||||
img.ondrag = e => {
|
img.ondrag = (e) => {
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
|
|
||||||
let target = this.element.querySelector('iframe') || this.element
|
let target = this.element.querySelector('iframe') || this.element
|
||||||
let delta = {
|
let delta = {
|
||||||
x: e.clientX - this.currentPos.x,
|
x: e.clientX - this.currentPos.x,
|
||||||
y: e.clientY - this.currentPos.y
|
y: e.clientY - this.currentPos.y,
|
||||||
}
|
}
|
||||||
|
|
||||||
this.currentPos = { x: e.clientX, y: e.clientY }
|
this.currentPos = { x: e.clientX, y: e.clientY }
|
||||||
|
@ -179,7 +179,7 @@ export default class Popup extends Poppable {
|
||||||
this.onResize({ target, delta, width, height })
|
this.onResize({ target, delta, width, height })
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
img.ondragend = e => {}
|
img.ondragend = (e) => {}
|
||||||
this.element.appendChild(img)
|
this.element.appendChild(img)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -205,7 +205,7 @@ export default class Popup extends Poppable {
|
||||||
let iframe = document.createElement('iframe')
|
let iframe = document.createElement('iframe')
|
||||||
iframe.setAttribute('frameBorder', 0)
|
iframe.setAttribute('frameBorder', 0)
|
||||||
iframe.src = content[key]
|
iframe.src = content[key]
|
||||||
iframe.onload = e => {
|
iframe.onload = (e) => {
|
||||||
let body = iframe.contentWindow.document.body
|
let body = iframe.contentWindow.document.body
|
||||||
let observer = new MutationObserver(() => {
|
let observer = new MutationObserver(() => {
|
||||||
this.iframeChanged(iframe)
|
this.iframeChanged(iframe)
|
||||||
|
@ -214,7 +214,7 @@ export default class Popup extends Poppable {
|
||||||
attributes: true,
|
attributes: true,
|
||||||
subtree: true,
|
subtree: true,
|
||||||
childList: true,
|
childList: true,
|
||||||
characterData: true
|
characterData: true,
|
||||||
})
|
})
|
||||||
let w = Math.max(body.scrollWidth, body.offsetWidth)
|
let w = Math.max(body.scrollWidth, body.offsetWidth)
|
||||||
let h = Math.max(body.scrollHeight, body.offsetHeight)
|
let h = Math.max(body.scrollHeight, body.offsetHeight)
|
||||||
|
@ -256,7 +256,7 @@ export default class Popup extends Poppable {
|
||||||
if (!image.complete && !image.src.startsWith('data:')) {
|
if (!image.complete && !image.src.startsWith('data:')) {
|
||||||
total += 1
|
total += 1
|
||||||
console.log('image not complete', image.src)
|
console.log('image not complete', image.src)
|
||||||
image.onload = e => {
|
image.onload = (e) => {
|
||||||
count += 1
|
count += 1
|
||||||
if (count == total) {
|
if (count == total) {
|
||||||
this.loaded = true
|
this.loaded = true
|
||||||
|
@ -305,33 +305,33 @@ export default class Popup extends Poppable {
|
||||||
if (window.PointerEvent)
|
if (window.PointerEvent)
|
||||||
this.parent.addEventListener('pointerup', close.bind(this), {
|
this.parent.addEventListener('pointerup', close.bind(this), {
|
||||||
capture: true,
|
capture: true,
|
||||||
once: true
|
once: true,
|
||||||
})
|
})
|
||||||
else if (window.TouchEvent)
|
else if (window.TouchEvent)
|
||||||
this.parent.addEventListener('touchend', close.bind(this), {
|
this.parent.addEventListener('touchend', close.bind(this), {
|
||||||
capture: true,
|
capture: true,
|
||||||
once: true
|
once: true,
|
||||||
})
|
})
|
||||||
else
|
else
|
||||||
this.parent.addEventListener('mouseup', close.bind(this), {
|
this.parent.addEventListener('mouseup', close.bind(this), {
|
||||||
capture: true,
|
capture: true,
|
||||||
once: true
|
once: true,
|
||||||
})
|
})
|
||||||
} else {
|
} else {
|
||||||
if (window.PointerEvent)
|
if (window.PointerEvent)
|
||||||
this.parent.addEventListener('pointerdown', close.bind(this), {
|
this.parent.addEventListener('pointerdown', close.bind(this), {
|
||||||
capture: true,
|
capture: true,
|
||||||
once: true
|
once: true,
|
||||||
})
|
})
|
||||||
else if (window.TouchEvent)
|
else if (window.TouchEvent)
|
||||||
this.parent.addEventListener('touchstart', close.bind(this), {
|
this.parent.addEventListener('touchstart', close.bind(this), {
|
||||||
capture: true,
|
capture: true,
|
||||||
once: true
|
once: true,
|
||||||
})
|
})
|
||||||
else
|
else
|
||||||
this.parent.addEventListener('mousedown', close.bind(this), {
|
this.parent.addEventListener('mousedown', close.bind(this), {
|
||||||
capture: true,
|
capture: true,
|
||||||
once: true
|
once: true,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -362,17 +362,17 @@ export default class Popup extends Poppable {
|
||||||
if (this.draggable) {
|
if (this.draggable) {
|
||||||
let target = this.element
|
let target = this.element
|
||||||
target.setAttribute('draggable', true)
|
target.setAttribute('draggable', true)
|
||||||
target.ondragstart = e => {
|
target.ondragstart = (e) => {
|
||||||
this.currentPos = { x: e.clientX, y: e.clientY }
|
this.currentPos = { x: e.clientX, y: e.clientY }
|
||||||
var img = document.createElement('img')
|
var img = document.createElement('img')
|
||||||
img.src = 'data:image/gifbase64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
|
img.src = 'data:image/gifbase64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
|
||||||
e.dataTransfer.setDragImage(img, 0, 0)
|
e.dataTransfer.setDragImage(img, 0, 0)
|
||||||
}
|
}
|
||||||
target.ondrag = e => {
|
target.ondrag = (e) => {
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
let delta = {
|
let delta = {
|
||||||
x: e.clientX - this.currentPos.x,
|
x: e.clientX - this.currentPos.x,
|
||||||
y: e.clientY - this.currentPos.y
|
y: e.clientY - this.currentPos.y,
|
||||||
}
|
}
|
||||||
this.currentPos = { x: e.clientX, y: e.clientY }
|
this.currentPos = { x: e.clientX, y: e.clientY }
|
||||||
let left = parseFloat(target.style.left)
|
let left = parseFloat(target.style.left)
|
||||||
|
@ -388,7 +388,7 @@ export default class Popup extends Poppable {
|
||||||
|
|
||||||
this.lastDrag = { left, top }
|
this.lastDrag = { left, top }
|
||||||
}
|
}
|
||||||
target.ondragend = e => {
|
target.ondragend = (e) => {
|
||||||
target.style.left = this.lastDrag.left + 'px'
|
target.style.left = this.lastDrag.left + 'px'
|
||||||
target.style.top = this.lastDrag.top + 'px'
|
target.style.top = this.lastDrag.top + 'px'
|
||||||
this.currentPos = null
|
this.currentPos = null
|
||||||
|
@ -514,14 +514,14 @@ export default class Popup extends Poppable {
|
||||||
withinDimensions() {
|
withinDimensions() {
|
||||||
return {
|
return {
|
||||||
width: this.keepWithin.offsetWidth,
|
width: this.keepWithin.offsetWidth,
|
||||||
height: this.keepWithin.offsetHeight
|
height: this.keepWithin.offsetHeight,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
localDimensions() {
|
localDimensions() {
|
||||||
return {
|
return {
|
||||||
width: this.element.offsetWidth,
|
width: this.element.offsetWidth,
|
||||||
height: this.element.offsetHeight
|
height: this.element.offsetHeight,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -676,7 +676,7 @@ export default class Popup extends Poppable {
|
||||||
let style = {
|
let style = {
|
||||||
maxWidth: this.maxWidth + 'px',
|
maxWidth: this.maxWidth + 'px',
|
||||||
zIndex: this.zIndex,
|
zIndex: this.zIndex,
|
||||||
position: 'absolute'
|
position: 'absolute',
|
||||||
}
|
}
|
||||||
if (this.minWidth) {
|
if (this.minWidth) {
|
||||||
style.minWidth = this.minWidth + 'px'
|
style.minWidth = this.minWidth + 'px'
|
||||||
|
@ -690,7 +690,7 @@ export default class Popup extends Poppable {
|
||||||
fontFamily: this.fontFamily,
|
fontFamily: this.fontFamily,
|
||||||
fontSize: this.fontSize,
|
fontSize: this.fontSize,
|
||||||
stroke: 'black',
|
stroke: 'black',
|
||||||
fill: 'white'
|
fill: 'white',
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -729,7 +729,7 @@ export default class Popup extends Poppable {
|
||||||
borderTopWidth: this.notchSize + 'px',
|
borderTopWidth: this.notchSize + 'px',
|
||||||
borderRight: this.notchSize + 'px solid transparent',
|
borderRight: this.notchSize + 'px solid transparent',
|
||||||
borderLeft: this.notchSize + 'px solid transparent',
|
borderLeft: this.notchSize + 'px solid transparent',
|
||||||
borderBottom: 0
|
borderBottom: 0,
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
return {
|
return {
|
||||||
|
@ -742,7 +742,7 @@ export default class Popup extends Poppable {
|
||||||
borderTop: this.notchSize + 'px solid ' + this.backgroundColor,
|
borderTop: this.notchSize + 'px solid ' + this.backgroundColor,
|
||||||
borderRight: this.notchSize + 'px solid transparent',
|
borderRight: this.notchSize + 'px solid transparent',
|
||||||
borderLeft: this.notchSize + 'px solid transparent',
|
borderLeft: this.notchSize + 'px solid transparent',
|
||||||
borderBottom: 0
|
borderBottom: 0,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -758,7 +758,7 @@ export default class Popup extends Poppable {
|
||||||
borderBottomWidth: this.notchSize + 'px',
|
borderBottomWidth: this.notchSize + 'px',
|
||||||
borderRight: this.notchSize + 'px solid transparent',
|
borderRight: this.notchSize + 'px solid transparent',
|
||||||
borderLeft: this.notchSize + 'px solid transparent',
|
borderLeft: this.notchSize + 'px solid transparent',
|
||||||
borderTop: 0
|
borderTop: 0,
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
return {
|
return {
|
||||||
|
@ -770,7 +770,7 @@ export default class Popup extends Poppable {
|
||||||
borderBottom: this.notchSize + 'px solid ' + this.backgroundColor,
|
borderBottom: this.notchSize + 'px solid ' + this.backgroundColor,
|
||||||
borderRight: this.notchSize + 'px solid transparent',
|
borderRight: this.notchSize + 'px solid transparent',
|
||||||
borderLeft: this.notchSize + 'px solid transparent',
|
borderLeft: this.notchSize + 'px solid transparent',
|
||||||
borderTop: 0
|
borderTop: 0,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -796,7 +796,7 @@ export default class Popup extends Poppable {
|
||||||
borderLeftWidth: this.notchSize,
|
borderLeftWidth: this.notchSize,
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
borderTop: this.notchSize + 'px solid transparent',
|
borderTop: this.notchSize + 'px solid transparent',
|
||||||
borderBottom: this.notchSize + 'px solid transparent'
|
borderBottom: this.notchSize + 'px solid transparent',
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
let borderRight = this.notchSize + 'px solid transparent'
|
let borderRight = this.notchSize + 'px solid transparent'
|
||||||
|
@ -825,7 +825,7 @@ export default class Popup extends Poppable {
|
||||||
// boxShadow,
|
// boxShadow,
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
borderTop: this.notchSize + 'px solid transparent',
|
borderTop: this.notchSize + 'px solid transparent',
|
||||||
borderBottom: this.notchSize + 'px solid transparent'
|
borderBottom: this.notchSize + 'px solid transparent',
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -864,7 +864,7 @@ export default class Popup extends Poppable {
|
||||||
useEventPosWithBoundingBox = false,
|
useEventPosWithBoundingBox = false,
|
||||||
interactive = false,
|
interactive = false,
|
||||||
onResize = null,
|
onResize = null,
|
||||||
onMove = null
|
onMove = null,
|
||||||
} = {}
|
} = {}
|
||||||
) {
|
) {
|
||||||
let notchPosition = switchPos && point.y < 50 ? 'topCenter' : 'bottomCenter'
|
let notchPosition = switchPos && point.y < 50 ? 'topCenter' : 'bottomCenter'
|
||||||
|
@ -893,7 +893,7 @@ export default class Popup extends Poppable {
|
||||||
useEventPosWithBoundingBox,
|
useEventPosWithBoundingBox,
|
||||||
interactive,
|
interactive,
|
||||||
onResize,
|
onResize,
|
||||||
onMove
|
onMove,
|
||||||
})
|
})
|
||||||
popup.register(context)
|
popup.register(context)
|
||||||
popup.showAt(content, point)
|
popup.showAt(content, point)
|
||||||
|
|
|
@ -36,7 +36,7 @@ export default class PopupMenu extends Popup {
|
||||||
highlightColor = 'black',
|
highlightColor = 'black',
|
||||||
notchPosition = 'bottomLeft',
|
notchPosition = 'bottomLeft',
|
||||||
keepWithin = null,
|
keepWithin = null,
|
||||||
autoClose = true
|
autoClose = true,
|
||||||
} = {}) {
|
} = {}) {
|
||||||
super({
|
super({
|
||||||
parent,
|
parent,
|
||||||
|
@ -48,7 +48,7 @@ export default class PopupMenu extends Popup {
|
||||||
backgroundColor,
|
backgroundColor,
|
||||||
keepWithin,
|
keepWithin,
|
||||||
normalColor,
|
normalColor,
|
||||||
autoClose
|
autoClose,
|
||||||
})
|
})
|
||||||
this.commands = commands
|
this.commands = commands
|
||||||
this.zIndex = zIndex
|
this.zIndex = zIndex
|
||||||
|
@ -77,21 +77,21 @@ export default class PopupMenu extends Popup {
|
||||||
item.style.paddingBottom = item.style.paddingTop = this.spacing
|
item.style.paddingBottom = item.style.paddingTop = this.spacing
|
||||||
Elements.setStyle(item, {
|
Elements.setStyle(item, {
|
||||||
color: this.normalColor,
|
color: this.normalColor,
|
||||||
cursor: 'default'
|
cursor: 'default',
|
||||||
})
|
})
|
||||||
Elements.addClass(item, 'unselectable')
|
Elements.addClass(item, 'unselectable')
|
||||||
Elements.addClass(item, 'popupMenuItem')
|
Elements.addClass(item, 'popupMenuItem')
|
||||||
this.items[key] = item
|
this.items[key] = item
|
||||||
item.onclick = event => {
|
item.onclick = (event) => {
|
||||||
this.perform(event, key)
|
this.perform(event, key)
|
||||||
}
|
}
|
||||||
item.ontap = event => {
|
item.ontap = (event) => {
|
||||||
this.perform(event, key)
|
this.perform(event, key)
|
||||||
}
|
}
|
||||||
item.onmouseover = event => {
|
item.onmouseover = (event) => {
|
||||||
this.over(event, key)
|
this.over(event, key)
|
||||||
}
|
}
|
||||||
item.onmouseout = event => {
|
item.onmouseout = (event) => {
|
||||||
this.out(event, key)
|
this.out(event, key)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -192,7 +192,7 @@ export default class PopupMenu extends Popup {
|
||||||
keepWithin = null,
|
keepWithin = null,
|
||||||
backgroundColor = '#EEE',
|
backgroundColor = '#EEE',
|
||||||
normalColor = '#444',
|
normalColor = '#444',
|
||||||
autoClose = true
|
autoClose = true,
|
||||||
} = {}
|
} = {}
|
||||||
) {
|
) {
|
||||||
let registered = Poppable.get(context)
|
let registered = Poppable.get(context)
|
||||||
|
@ -216,11 +216,11 @@ export default class PopupMenu extends Popup {
|
||||||
normalColor,
|
normalColor,
|
||||||
notchPosition,
|
notchPosition,
|
||||||
keepWithin,
|
keepWithin,
|
||||||
autoClose
|
autoClose,
|
||||||
})
|
})
|
||||||
popup.showAt(commands, point)
|
popup.showAt(commands, point)
|
||||||
popup.register(context)
|
popup.register(context)
|
||||||
popup.closeEventListener = e => {
|
popup.closeEventListener = (e) => {
|
||||||
if (this.eventOutside(e)) this.closePopup(context)
|
if (this.eventOutside(e)) this.closePopup(context)
|
||||||
}
|
}
|
||||||
if (autoClose) {
|
if (autoClose) {
|
||||||
|
|
149
lib/scatter.js
149
lib/scatter.js
|
@ -44,7 +44,8 @@ const END = 'onEnd'
|
||||||
*/
|
*/
|
||||||
export class ScatterEvent extends BaseEvent {
|
export class ScatterEvent extends BaseEvent {
|
||||||
constructor(
|
constructor(
|
||||||
target, { translate = { x: 0, y: 0 }, scale = null, rotate = 0, about = null, fast = false, type = null } = {}
|
target,
|
||||||
|
{ translate = { x: 0, y: 0 }, scale = null, rotate = 0, about = null, fast = false, type = null } = {}
|
||||||
) {
|
) {
|
||||||
super('scatterTransformed', { target: target })
|
super('scatterTransformed', { target: target })
|
||||||
this.translate = translate
|
this.translate = translate
|
||||||
|
@ -94,7 +95,7 @@ class Throwable {
|
||||||
throwVisibility = 44,
|
throwVisibility = 44,
|
||||||
throwDamping = 0.95,
|
throwDamping = 0.95,
|
||||||
autoThrow = true,
|
autoThrow = true,
|
||||||
onThrowFinished = null
|
onThrowFinished = null,
|
||||||
} = {}) {
|
} = {}) {
|
||||||
this.movableX = movableX
|
this.movableX = movableX
|
||||||
this.movableY = movableY
|
this.movableY = movableY
|
||||||
|
@ -105,7 +106,7 @@ class Throwable {
|
||||||
this.velocity = null
|
this.velocity = null
|
||||||
this.timestamp = null
|
this.timestamp = null
|
||||||
this.onThrowFinished = onThrowFinished
|
this.onThrowFinished = onThrowFinished
|
||||||
//console.log("onThrowFinished", onThrowFinished)
|
//console.log("onThrowFinished", onThrowFinished)
|
||||||
}
|
}
|
||||||
|
|
||||||
observeVelocity() {
|
observeVelocity() {
|
||||||
|
@ -127,13 +128,12 @@ class Throwable {
|
||||||
t: t,
|
t: t,
|
||||||
dt: dt,
|
dt: dt,
|
||||||
dx: delta.x / number,
|
dx: delta.x / number,
|
||||||
dy: delta.y / number
|
dy: delta.y / number,
|
||||||
}
|
}
|
||||||
this.velocities.push(velocity)
|
this.velocities.push(velocity)
|
||||||
while (this.velocities.length > buffer) {
|
while (this.velocities.length > buffer) {
|
||||||
this.velocities.shift()
|
this.velocities.shift()
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -183,7 +183,7 @@ class Throwable {
|
||||||
animateThrow(time) {
|
animateThrow(time) {
|
||||||
if (this.velocity != null) {
|
if (this.velocity != null) {
|
||||||
let dt = this._throwDeltaTime()
|
let dt = this._throwDeltaTime()
|
||||||
// console.log("animateThrow", dt)
|
// console.log("animateThrow", dt)
|
||||||
let next = this.nextVelocity(this.velocity)
|
let next = this.nextVelocity(this.velocity)
|
||||||
let prevLength = Points.length(this.velocity)
|
let prevLength = Points.length(this.velocity)
|
||||||
let nextLength = Points.length(next)
|
let nextLength = Points.length(next)
|
||||||
|
@ -226,7 +226,7 @@ class Throwable {
|
||||||
let next = Points.multiplyScalar(velocity, this.throwDamping)
|
let next = Points.multiplyScalar(velocity, this.throwDamping)
|
||||||
return {
|
return {
|
||||||
x: this.movableX ? next.x : 0,
|
x: this.movableX ? next.x : 0,
|
||||||
y: this.movableY ? next.y : 0
|
y: this.movableY ? next.y : 0,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -271,7 +271,7 @@ export class AbstractScatter extends Throwable {
|
||||||
scaleCloseBuffer = 0.05,
|
scaleCloseBuffer = 0.05,
|
||||||
maxRotation = Angle.degree2radian(5),
|
maxRotation = Angle.degree2radian(5),
|
||||||
minInteractionDistance = 0,
|
minInteractionDistance = 0,
|
||||||
useLowPassFilter = false
|
useLowPassFilter = false,
|
||||||
} = {}) {
|
} = {}) {
|
||||||
if (rotationDegrees != null && rotation != null) {
|
if (rotationDegrees != null && rotation != null) {
|
||||||
throw new Error('Use rotationDegrees or rotation but not both')
|
throw new Error('Use rotationDegrees or rotation but not both')
|
||||||
|
@ -286,7 +286,7 @@ export class AbstractScatter extends Throwable {
|
||||||
throwVisibility,
|
throwVisibility,
|
||||||
throwDamping,
|
throwDamping,
|
||||||
autoThrow,
|
autoThrow,
|
||||||
onThrowFinished
|
onThrowFinished,
|
||||||
})
|
})
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -361,7 +361,7 @@ export class AbstractScatter extends Throwable {
|
||||||
|
|
||||||
_callCloseCallbacks() {
|
_callCloseCallbacks() {
|
||||||
if (this.onClose) {
|
if (this.onClose) {
|
||||||
this.onClose.forEach(callback => callback(this))
|
this.onClose.forEach((callback) => callback(this))
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -381,7 +381,6 @@ export class AbstractScatter extends Throwable {
|
||||||
let delta = interaction.delta()
|
let delta = interaction.delta()
|
||||||
|
|
||||||
if (delta != null) {
|
if (delta != null) {
|
||||||
|
|
||||||
let rotate = delta.rotate
|
let rotate = delta.rotate
|
||||||
let zoom = delta.zoom
|
let zoom = delta.zoom
|
||||||
if (this.maxRotation != null) {
|
if (this.maxRotation != null) {
|
||||||
|
@ -468,8 +467,8 @@ export class AbstractScatter extends Throwable {
|
||||||
|
|
||||||
keepOnStage(velocity, collision = 0.5) {
|
keepOnStage(velocity, collision = 0.5) {
|
||||||
let stagePolygon = this.containerPolygon
|
let stagePolygon = this.containerPolygon
|
||||||
// UO: since keepOnStage is called in nextVelocity we need to
|
// UO: since keepOnStage is called in nextVelocity we need to
|
||||||
// ensure a return value
|
// ensure a return value
|
||||||
if (!stagePolygon) return { x: 0, y: 0 }
|
if (!stagePolygon) return { x: 0, y: 0 }
|
||||||
let polygon = this.polygon
|
let polygon = this.polygon
|
||||||
let bounced = this.bouncing()
|
let bounced = this.bouncing()
|
||||||
|
@ -480,7 +479,7 @@ export class AbstractScatter extends Throwable {
|
||||||
let dx = this.movableX ? velocity.x : 0
|
let dx = this.movableX ? velocity.x : 0
|
||||||
let dy = this.movableY ? velocity.y : 0
|
let dy = this.movableY ? velocity.y : 0
|
||||||
let factor = this.throwDamping
|
let factor = this.throwDamping
|
||||||
// if (recentered) {
|
// if (recentered) {
|
||||||
if (x < 0) {
|
if (x < 0) {
|
||||||
dx = -dx
|
dx = -dx
|
||||||
factor = collision
|
factor = collision
|
||||||
|
@ -513,13 +512,13 @@ export class AbstractScatter extends Throwable {
|
||||||
if (this.scale < this.minScale + this.scaleCloseThreshold - this.scaleCloseBuffer) {
|
if (this.scale < this.minScale + this.scaleCloseThreshold - this.scaleCloseBuffer) {
|
||||||
this.zoom(this.minScale, {
|
this.zoom(this.minScale, {
|
||||||
animate: 0.2,
|
animate: 0.2,
|
||||||
onComplete: this.close.bind(this)
|
onComplete: this.close.bind(this),
|
||||||
})
|
})
|
||||||
} else if (this.scale < this.minScale + this.scaleCloseThreshold) {
|
} else if (this.scale < this.minScale + this.scaleCloseThreshold) {
|
||||||
this.zoom(this.minScale + this.scaleCloseThreshold, {
|
this.zoom(this.minScale + this.scaleCloseThreshold, {
|
||||||
animate: 0.4
|
animate: 0.4,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
rotateDegrees(degrees, anchor) {
|
rotateDegrees(degrees, anchor) {
|
||||||
|
@ -539,12 +538,12 @@ export class AbstractScatter extends Throwable {
|
||||||
x: '+=' + d.x,
|
x: '+=' + d.x,
|
||||||
y: '+=' + d.y,
|
y: '+=' + d.y,
|
||||||
/* scale: scale, uo: not defined, why was this here? */
|
/* scale: scale, uo: not defined, why was this here? */
|
||||||
onUpdate: e => {
|
onUpdate: (e) => {
|
||||||
let p = this.position
|
let p = this.position
|
||||||
let dx = p.x - startPos.x
|
let dx = p.x - startPos.x
|
||||||
let dy = p.x - startPos.y
|
let dy = p.x - startPos.y
|
||||||
this.onMoved(dx, dy)
|
this.onMoved(dx, dy)
|
||||||
}
|
},
|
||||||
})
|
})
|
||||||
} else {
|
} else {
|
||||||
this._move(d)
|
this._move(d)
|
||||||
|
@ -573,7 +572,7 @@ export class AbstractScatter extends Throwable {
|
||||||
scale: scale,
|
scale: scale,
|
||||||
delay: delay,
|
delay: delay,
|
||||||
onComplete: onComplete,
|
onComplete: onComplete,
|
||||||
onUpdate: this.onZoomed.bind(this)
|
onUpdate: this.onZoomed.bind(this),
|
||||||
})
|
})
|
||||||
} else {
|
} else {
|
||||||
this.scale = scale
|
this.scale = scale
|
||||||
|
@ -583,7 +582,7 @@ export class AbstractScatter extends Throwable {
|
||||||
}
|
}
|
||||||
|
|
||||||
_move(delta) {
|
_move(delta) {
|
||||||
// this.addVelocity(delta) uo: reverted commit fa0256d782dd498c6d3e51321260ca375ca9f855
|
// this.addVelocity(delta) uo: reverted commit fa0256d782dd498c6d3e51321260ca375ca9f855
|
||||||
this.x += this.movableX ? delta.x : 0
|
this.x += this.movableX ? delta.x : 0
|
||||||
this.y += this.movableX ? delta.y : 0
|
this.y += this.movableX ? delta.y : 0
|
||||||
}
|
}
|
||||||
|
@ -591,7 +590,7 @@ export class AbstractScatter extends Throwable {
|
||||||
transform(translate, zoom, rotate, anchor) {
|
transform(translate, zoom, rotate, anchor) {
|
||||||
let delta = {
|
let delta = {
|
||||||
x: this.movableX ? translate.x : 0,
|
x: this.movableX ? translate.x : 0,
|
||||||
y: this.movableY ? translate.y : 0
|
y: this.movableY ? translate.y : 0,
|
||||||
}
|
}
|
||||||
if (this.resizable) var vzoom = zoom
|
if (this.resizable) var vzoom = zoom
|
||||||
if (!this.translatable) delta = { x: 0, y: 0 }
|
if (!this.translatable) delta = { x: 0, y: 0 }
|
||||||
|
@ -606,9 +605,9 @@ export class AbstractScatter extends Throwable {
|
||||||
rotate: 0,
|
rotate: 0,
|
||||||
about: anchor,
|
about: anchor,
|
||||||
fast: false,
|
fast: false,
|
||||||
type: UPDATE
|
type: UPDATE,
|
||||||
})
|
})
|
||||||
this.onTransform.forEach(function(f) {
|
this.onTransform.forEach(function (f) {
|
||||||
f(event)
|
f(event)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
@ -622,7 +621,7 @@ export class AbstractScatter extends Throwable {
|
||||||
let newOrigin = Points.arc(anchor, beta + rotate, distance * thresholdedZoom)
|
let newOrigin = Points.arc(anchor, beta + rotate, distance * thresholdedZoom)
|
||||||
let extra = Points.subtract(newOrigin, origin)
|
let extra = Points.subtract(newOrigin, origin)
|
||||||
const anchorOffset = Points.subtract(anchor, origin)
|
const anchorOffset = Points.subtract(anchor, origin)
|
||||||
// this._move(offset)
|
// this._move(offset)
|
||||||
this.scale = newScale
|
this.scale = newScale
|
||||||
this.rotation += rotate
|
this.rotation += rotate
|
||||||
let offset = Points.negate(anchorOffset)
|
let offset = Points.negate(anchorOffset)
|
||||||
|
@ -637,9 +636,9 @@ export class AbstractScatter extends Throwable {
|
||||||
translate: delta,
|
translate: delta,
|
||||||
scale: newScale,
|
scale: newScale,
|
||||||
rotate: rotate,
|
rotate: rotate,
|
||||||
about: anchor
|
about: anchor,
|
||||||
})
|
})
|
||||||
this.onTransform.forEach(function(f) {
|
this.onTransform.forEach(function (f) {
|
||||||
f(event)
|
f(event)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
@ -705,7 +704,7 @@ export class AbstractScatter extends Throwable {
|
||||||
if (this.scale > this.maxScale) zoom = 1 - amount
|
if (this.scale > this.maxScale) zoom = 1 - amount
|
||||||
if (zoom != 1) {
|
if (zoom != 1) {
|
||||||
this.transform({ x: 0, y: 0 }, zoom, 0, this.zoomAnchor)
|
this.transform({ x: 0, y: 0 }, zoom, 0, this.zoomAnchor)
|
||||||
requestAnimationFrame(dt => {
|
requestAnimationFrame((dt) => {
|
||||||
this.animateZoomBounce(dt)
|
this.animateZoomBounce(dt)
|
||||||
})
|
})
|
||||||
return
|
return
|
||||||
|
@ -762,9 +761,9 @@ export class AbstractScatter extends Throwable {
|
||||||
rotate: 0,
|
rotate: 0,
|
||||||
about: null,
|
about: null,
|
||||||
fast: false,
|
fast: false,
|
||||||
type: START
|
type: START,
|
||||||
})
|
})
|
||||||
this.onTransform.forEach(function(f) {
|
this.onTransform.forEach(function (f) {
|
||||||
f(event)
|
f(event)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
@ -798,9 +797,9 @@ export class AbstractScatter extends Throwable {
|
||||||
rotate: 0,
|
rotate: 0,
|
||||||
about: null,
|
about: null,
|
||||||
fast: false,
|
fast: false,
|
||||||
type: END
|
type: END,
|
||||||
})
|
})
|
||||||
this.onTransform.forEach(function(f) {
|
this.onTransform.forEach(function (f) {
|
||||||
f(event)
|
f(event)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
@ -828,9 +827,9 @@ export class AbstractScatter extends Throwable {
|
||||||
translate: delta,
|
translate: delta,
|
||||||
scale: this.scale,
|
scale: this.scale,
|
||||||
about: this.currentAbout,
|
about: this.currentAbout,
|
||||||
type: null
|
type: null,
|
||||||
})
|
})
|
||||||
this.onTransform.forEach(function(f) {
|
this.onTransform.forEach(function (f) {
|
||||||
f(event)
|
f(event)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
@ -842,9 +841,9 @@ export class AbstractScatter extends Throwable {
|
||||||
scale: this.scale,
|
scale: this.scale,
|
||||||
about: this.currentAbout,
|
about: this.currentAbout,
|
||||||
fast: false,
|
fast: false,
|
||||||
type: null
|
type: null,
|
||||||
})
|
})
|
||||||
this.onTransform.forEach(function(f) {
|
this.onTransform.forEach(function (f) {
|
||||||
f(event)
|
f(event)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
@ -856,9 +855,9 @@ export class AbstractScatter extends Throwable {
|
||||||
translate: { x: dx, y: dy },
|
translate: { x: dx, y: dy },
|
||||||
about: about,
|
about: about,
|
||||||
fast: true,
|
fast: true,
|
||||||
type: null
|
type: null,
|
||||||
})
|
})
|
||||||
this.onTransform.forEach(function(f) {
|
this.onTransform.forEach(function (f) {
|
||||||
f(event)
|
f(event)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
@ -869,9 +868,9 @@ export class AbstractScatter extends Throwable {
|
||||||
let event = new ScatterEvent(this, {
|
let event = new ScatterEvent(this, {
|
||||||
scale: this.scale,
|
scale: this.scale,
|
||||||
fast: false,
|
fast: false,
|
||||||
type: null
|
type: null,
|
||||||
})
|
})
|
||||||
this.onTransform.forEach(function(f) {
|
this.onTransform.forEach(function (f) {
|
||||||
f(event)
|
f(event)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
@ -885,9 +884,9 @@ export class AbstractScatter extends Throwable {
|
||||||
scale: this.scale,
|
scale: this.scale,
|
||||||
about: about,
|
about: about,
|
||||||
fast: false,
|
fast: false,
|
||||||
type: null
|
type: null,
|
||||||
})
|
})
|
||||||
this.onTransform.forEach(function(f) {
|
this.onTransform.forEach(function (f) {
|
||||||
f(event)
|
f(event)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
@ -912,13 +911,14 @@ export class DOMScatterContainer {
|
||||||
* @param {DOM node} debugCanvas - Shows debug infos about touches if not null
|
* @param {DOM node} debugCanvas - Shows debug infos about touches if not null
|
||||||
*/
|
*/
|
||||||
constructor(
|
constructor(
|
||||||
element, {
|
element,
|
||||||
|
{
|
||||||
stopEvents = 'auto',
|
stopEvents = 'auto',
|
||||||
claimEvents = true,
|
claimEvents = true,
|
||||||
useCapture = true,
|
useCapture = true,
|
||||||
capturePointerEvents = true,
|
capturePointerEvents = true,
|
||||||
touchAction = 'none',
|
touchAction = 'none',
|
||||||
debugCanvas = null
|
debugCanvas = null,
|
||||||
} = {}
|
} = {}
|
||||||
) {
|
) {
|
||||||
this.onCapture = null
|
this.onCapture = null
|
||||||
|
@ -930,7 +930,7 @@ export class DOMScatterContainer {
|
||||||
movement of scatter objects, the touchmove event has to be bound again.
|
movement of scatter objects, the touchmove event has to be bound again.
|
||||||
*/
|
*/
|
||||||
if (Capabilities.isSafari) {
|
if (Capabilities.isSafari) {
|
||||||
document.addEventListener('touchmove', event => this.preventPinch(event), false)
|
document.addEventListener('touchmove', (event) => this.preventPinch(event), false)
|
||||||
stopEvents = false
|
stopEvents = false
|
||||||
} else {
|
} else {
|
||||||
stopEvents = true
|
stopEvents = true
|
||||||
|
@ -945,11 +945,11 @@ export class DOMScatterContainer {
|
||||||
this.delegate = new InteractionMapper(element, this, {
|
this.delegate = new InteractionMapper(element, this, {
|
||||||
useCapture,
|
useCapture,
|
||||||
capturePointerEvents,
|
capturePointerEvents,
|
||||||
mouseWheelElement: window
|
mouseWheelElement: window,
|
||||||
})
|
})
|
||||||
|
|
||||||
if (debugCanvas !== null) {
|
if (debugCanvas !== null) {
|
||||||
requestAnimationFrame(dt => {
|
requestAnimationFrame((dt) => {
|
||||||
this.showTouches(dt, debugCanvas)
|
this.showTouches(dt, debugCanvas)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
@ -971,7 +971,7 @@ export class DOMScatterContainer {
|
||||||
context.fill()
|
context.fill()
|
||||||
context.stroke()
|
context.stroke()
|
||||||
}
|
}
|
||||||
requestAnimationFrame(dt => {
|
requestAnimationFrame((dt) => {
|
||||||
this.showTouches(dt, canvas)
|
this.showTouches(dt, canvas)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
@ -1076,7 +1076,8 @@ export class DOMScatterContainer {
|
||||||
export class DOMScatter extends AbstractScatter {
|
export class DOMScatter extends AbstractScatter {
|
||||||
constructor(
|
constructor(
|
||||||
element,
|
element,
|
||||||
container, {
|
container,
|
||||||
|
{
|
||||||
startScale = 1.0,
|
startScale = 1.0,
|
||||||
minScale = 0.1,
|
minScale = 0.1,
|
||||||
maxScale = 1.0,
|
maxScale = 1.0,
|
||||||
|
@ -1112,7 +1113,7 @@ export class DOMScatter extends AbstractScatter {
|
||||||
scaleCloseBuffer = 0.05,
|
scaleCloseBuffer = 0.05,
|
||||||
useLowPassFilter = false,
|
useLowPassFilter = false,
|
||||||
maxRotation = Angle.degree2radian(15),
|
maxRotation = Angle.degree2radian(15),
|
||||||
minInteractionDistance = 200
|
minInteractionDistance = 200,
|
||||||
} = {}
|
} = {}
|
||||||
) {
|
) {
|
||||||
super({
|
super({
|
||||||
|
@ -1139,7 +1140,7 @@ export class DOMScatter extends AbstractScatter {
|
||||||
onClose,
|
onClose,
|
||||||
useLowPassFilter,
|
useLowPassFilter,
|
||||||
maxRotation,
|
maxRotation,
|
||||||
minInteractionDistance
|
minInteractionDistance,
|
||||||
})
|
})
|
||||||
if (container == null || width == null || height == null) {
|
if (container == null || width == null || height == null) {
|
||||||
throw new Error('Invalid value: null')
|
throw new Error('Invalid value: null')
|
||||||
|
@ -1167,7 +1168,7 @@ export class DOMScatter extends AbstractScatter {
|
||||||
height: height,
|
height: height,
|
||||||
scale: startScale,
|
scale: startScale,
|
||||||
rotation: this.startRotationDegrees,
|
rotation: this.startRotationDegrees,
|
||||||
transformOrigin: transformOrigin
|
transformOrigin: transformOrigin,
|
||||||
}
|
}
|
||||||
this.tapNodes = new Map()
|
this.tapNodes = new Map()
|
||||||
|
|
||||||
|
@ -1189,15 +1190,15 @@ export class DOMScatter extends AbstractScatter {
|
||||||
button.className = 'interactiveElement'
|
button.className = 'interactiveElement'
|
||||||
this.element.appendChild(button)
|
this.element.appendChild(button)
|
||||||
|
|
||||||
button.addEventListener('pointerdown', e => {
|
button.addEventListener('pointerdown', (e) => {
|
||||||
this.startResize(e)
|
this.startResize(e)
|
||||||
})
|
})
|
||||||
|
|
||||||
button.addEventListener('pointermove', e => {
|
button.addEventListener('pointermove', (e) => {
|
||||||
this.resize(e)
|
this.resize(e)
|
||||||
})
|
})
|
||||||
|
|
||||||
button.addEventListener('pointerup', e => {
|
button.addEventListener('pointerup', (e) => {
|
||||||
this.stopResize(e)
|
this.stopResize(e)
|
||||||
})
|
})
|
||||||
this.resizeButton = button
|
this.resizeButton = button
|
||||||
|
@ -1214,7 +1215,7 @@ export class DOMScatter extends AbstractScatter {
|
||||||
scale: this.scale,
|
scale: this.scale,
|
||||||
x: this.x,
|
x: this.x,
|
||||||
y: this.y,
|
y: this.y,
|
||||||
rotation: this.rotation
|
rotation: this.rotation,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1265,7 +1266,7 @@ export class DOMScatter extends AbstractScatter {
|
||||||
top: rect.top - stage.top,
|
top: rect.top - stage.top,
|
||||||
left: rect.left - stage.left,
|
left: rect.left - stage.left,
|
||||||
width: rect.width,
|
width: rect.width,
|
||||||
height: rect.height
|
height: rect.height,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1273,10 +1274,10 @@ export class DOMScatter extends AbstractScatter {
|
||||||
let r = this.bounds
|
let r = this.bounds
|
||||||
let w2 = r.width / 2
|
let w2 = r.width / 2
|
||||||
let h2 = r.height / 2
|
let h2 = r.height / 2
|
||||||
// if (this.resizable) {
|
// if (this.resizable) {
|
||||||
// w2 *= this.scale
|
// w2 *= this.scale
|
||||||
// h2 *= this.scale
|
// h2 *= this.scale
|
||||||
// }
|
// }
|
||||||
var x = r.left + w2
|
var x = r.left + w2
|
||||||
var y = r.top + h2
|
var y = r.top + h2
|
||||||
return { x, y }
|
return { x, y }
|
||||||
|
@ -1306,7 +1307,7 @@ export class DOMScatter extends AbstractScatter {
|
||||||
set scale(scale) {
|
set scale(scale) {
|
||||||
TweenLite.set(this.element, {
|
TweenLite.set(this.element, {
|
||||||
scale: scale,
|
scale: scale,
|
||||||
transformOrigin: this.transformOrigin
|
transformOrigin: this.transformOrigin,
|
||||||
})
|
})
|
||||||
this._scale = scale
|
this._scale = scale
|
||||||
}
|
}
|
||||||
|
@ -1338,9 +1339,9 @@ export class DOMScatter extends AbstractScatter {
|
||||||
hide() {
|
hide() {
|
||||||
TweenLite.to(this.element, 0.1, {
|
TweenLite.to(this.element, 0.1, {
|
||||||
display: 'none',
|
display: 'none',
|
||||||
onComplete: e => {
|
onComplete: (e) => {
|
||||||
this.element.parentNode.removeChild(this.element)
|
this.element.parentNode.removeChild(this.element)
|
||||||
}
|
},
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1354,7 +1355,7 @@ export class DOMScatter extends AbstractScatter {
|
||||||
x: p.x,
|
x: p.x,
|
||||||
y: p.y,
|
y: p.y,
|
||||||
rotation: rotationDegrees,
|
rotation: rotationDegrees,
|
||||||
transformOrigin: this.transformOrigin
|
transformOrigin: this.transformOrigin,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1396,7 +1397,7 @@ export class DOMScatter extends AbstractScatter {
|
||||||
}
|
}
|
||||||
this._x = x
|
this._x = x
|
||||||
this._y = y
|
this._y = y
|
||||||
// this.addVelocity({ x: delta.x, y: delta.y }) uo: reverted commit fa0256d782dd498c6d3e51321260ca375ca9f855
|
// this.addVelocity({ x: delta.x, y: delta.y }) uo: reverted commit fa0256d782dd498c6d3e51321260ca375ca9f855
|
||||||
TweenLite.set(this.element, { x, y })
|
TweenLite.set(this.element, { x, y })
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1415,7 +1416,7 @@ export class DOMScatter extends AbstractScatter {
|
||||||
|
|
||||||
let oldPostition = {
|
let oldPostition = {
|
||||||
x: this.element.getBoundingClientRect().left,
|
x: this.element.getBoundingClientRect().left,
|
||||||
y: this.element.getBoundingClientRect().top
|
y: this.element.getBoundingClientRect().top,
|
||||||
}
|
}
|
||||||
this.bringToFront()
|
this.bringToFront()
|
||||||
|
|
||||||
|
@ -1423,7 +1424,7 @@ export class DOMScatter extends AbstractScatter {
|
||||||
|
|
||||||
let newPostition = {
|
let newPostition = {
|
||||||
x: this.element.getBoundingClientRect().left,
|
x: this.element.getBoundingClientRect().left,
|
||||||
y: this.element.getBoundingClientRect().top
|
y: this.element.getBoundingClientRect().top,
|
||||||
}
|
}
|
||||||
|
|
||||||
let offset = Points.subtract(oldPostition, newPostition)
|
let offset = Points.subtract(oldPostition, newPostition)
|
||||||
|
@ -1468,7 +1469,7 @@ export class DOMScatter extends AbstractScatter {
|
||||||
)
|
)
|
||||||
TweenLite.to(this.element, 0, {
|
TweenLite.to(this.element, 0, {
|
||||||
width: this.element.offsetWidth + resizeW / this.scale,
|
width: this.element.offsetWidth + resizeW / this.scale,
|
||||||
height: this.element.offsetHeight + resizeH / this.scale
|
height: this.element.offsetHeight + resizeH / this.scale,
|
||||||
})
|
})
|
||||||
|
|
||||||
this.oldX = e.clientX
|
this.oldX = e.clientX
|
||||||
|
@ -1485,12 +1486,12 @@ export class DOMScatter extends AbstractScatter {
|
||||||
let event = new CustomEvent('resizeEnded')
|
let event = new CustomEvent('resizeEnded')
|
||||||
let oldPostition = {
|
let oldPostition = {
|
||||||
x: this.element.getBoundingClientRect().left,
|
x: this.element.getBoundingClientRect().left,
|
||||||
y: this.element.getBoundingClientRect().top
|
y: this.element.getBoundingClientRect().top,
|
||||||
}
|
}
|
||||||
this.element.style.transformOrigin = '50% 50%'
|
this.element.style.transformOrigin = '50% 50%'
|
||||||
let newPostition = {
|
let newPostition = {
|
||||||
x: this.element.getBoundingClientRect().left,
|
x: this.element.getBoundingClientRect().left,
|
||||||
y: this.element.getBoundingClientRect().top
|
y: this.element.getBoundingClientRect().top,
|
||||||
}
|
}
|
||||||
let offset = Points.subtract(oldPostition, newPostition)
|
let offset = Points.subtract(oldPostition, newPostition)
|
||||||
|
|
||||||
|
@ -1503,4 +1504,4 @@ export class DOMScatter extends AbstractScatter {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
DOMScatter.zIndex = 1000
|
DOMScatter.zIndex = 1000
|
||||||
|
|
|
@ -43,7 +43,7 @@ export default class UITest {
|
||||||
timeScale: 1,
|
timeScale: 1,
|
||||||
eventType: 'auto',
|
eventType: 'auto',
|
||||||
debug: false,
|
debug: false,
|
||||||
defaultInterval: null
|
defaultInterval: null,
|
||||||
},
|
},
|
||||||
opts
|
opts
|
||||||
)
|
)
|
||||||
|
@ -54,7 +54,7 @@ export default class UITest {
|
||||||
Object.assign(
|
Object.assign(
|
||||||
{},
|
{},
|
||||||
{
|
{
|
||||||
paused: true
|
paused: true,
|
||||||
},
|
},
|
||||||
this.opts
|
this.opts
|
||||||
)
|
)
|
||||||
|
@ -172,7 +172,7 @@ export default class UITest {
|
||||||
element,
|
element,
|
||||||
position,
|
position,
|
||||||
timelinePosition,
|
timelinePosition,
|
||||||
opts
|
opts,
|
||||||
})
|
})
|
||||||
|
|
||||||
// opts
|
// opts
|
||||||
|
@ -186,7 +186,7 @@ export default class UITest {
|
||||||
eventType: null,
|
eventType: null,
|
||||||
context: window,
|
context: window,
|
||||||
bubbles: true,
|
bubbles: true,
|
||||||
cancelable: true
|
cancelable: true,
|
||||||
},
|
},
|
||||||
opts
|
opts
|
||||||
)
|
)
|
||||||
|
@ -199,7 +199,7 @@ export default class UITest {
|
||||||
// timeline
|
// timeline
|
||||||
//--------------------
|
//--------------------
|
||||||
this._timeline.addCallback(
|
this._timeline.addCallback(
|
||||||
position => {
|
(position) => {
|
||||||
// element
|
// element
|
||||||
//--------------------
|
//--------------------
|
||||||
const elem = Util.extractElement(opts.context, element)
|
const elem = Util.extractElement(opts.context, element)
|
||||||
|
@ -226,7 +226,7 @@ export default class UITest {
|
||||||
//--------------------
|
//--------------------
|
||||||
const eventOpts = {
|
const eventOpts = {
|
||||||
bubbles: opts.bubbles,
|
bubbles: opts.bubbles,
|
||||||
cancelable: opts.cancelable
|
cancelable: opts.cancelable,
|
||||||
}
|
}
|
||||||
|
|
||||||
if (opts.eventTypes[0]) {
|
if (opts.eventTypes[0]) {
|
||||||
|
@ -295,7 +295,7 @@ export default class UITest {
|
||||||
element,
|
element,
|
||||||
position,
|
position,
|
||||||
timelinePosition,
|
timelinePosition,
|
||||||
opts
|
opts,
|
||||||
})
|
})
|
||||||
|
|
||||||
// opts
|
// opts
|
||||||
|
@ -312,7 +312,7 @@ export default class UITest {
|
||||||
eventTypes: this.resolveEvents(['down', 'move', 'up']),
|
eventTypes: this.resolveEvents(['down', 'move', 'up']),
|
||||||
context: window,
|
context: window,
|
||||||
bubbles: true,
|
bubbles: true,
|
||||||
cancelable: true
|
cancelable: true,
|
||||||
},
|
},
|
||||||
opts
|
opts
|
||||||
)
|
)
|
||||||
|
@ -320,7 +320,7 @@ export default class UITest {
|
||||||
// timeline
|
// timeline
|
||||||
//--------------------
|
//--------------------
|
||||||
this._timeline.addCallback(
|
this._timeline.addCallback(
|
||||||
position => {
|
(position) => {
|
||||||
// element
|
// element
|
||||||
//--------------------
|
//--------------------
|
||||||
const elem = Util.extractElement(opts.context, element)
|
const elem = Util.extractElement(opts.context, element)
|
||||||
|
@ -333,7 +333,7 @@ export default class UITest {
|
||||||
//--------------------
|
//--------------------
|
||||||
const eventOpts = {
|
const eventOpts = {
|
||||||
bubbles: opts.bubbles,
|
bubbles: opts.bubbles,
|
||||||
cancelable: opts.cancelable
|
cancelable: opts.cancelable,
|
||||||
}
|
}
|
||||||
|
|
||||||
const gsOpts = {
|
const gsOpts = {
|
||||||
|
@ -376,7 +376,7 @@ export default class UITest {
|
||||||
if (opts.onComplete) {
|
if (opts.onComplete) {
|
||||||
opts.onComplete.call(this, event)
|
opts.onComplete.call(this, event)
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
// to
|
// to
|
||||||
|
@ -431,7 +431,7 @@ export default class UITest {
|
||||||
element,
|
element,
|
||||||
position,
|
position,
|
||||||
timelinePosition,
|
timelinePosition,
|
||||||
opts
|
opts,
|
||||||
})
|
})
|
||||||
|
|
||||||
// opts
|
// opts
|
||||||
|
@ -451,7 +451,7 @@ export default class UITest {
|
||||||
eventTypes: this.resolveEvents(['down', 'move', 'up']),
|
eventTypes: this.resolveEvents(['down', 'move', 'up']),
|
||||||
context: window,
|
context: window,
|
||||||
bubbles: true,
|
bubbles: true,
|
||||||
cancelable: true
|
cancelable: true,
|
||||||
},
|
},
|
||||||
opts
|
opts
|
||||||
)
|
)
|
||||||
|
@ -459,7 +459,7 @@ export default class UITest {
|
||||||
// timeline
|
// timeline
|
||||||
//--------------------
|
//--------------------
|
||||||
this._timeline.addCallback(
|
this._timeline.addCallback(
|
||||||
position => {
|
(position) => {
|
||||||
// element
|
// element
|
||||||
//--------------------
|
//--------------------
|
||||||
const elem = Util.extractElement(opts.context, element)
|
const elem = Util.extractElement(opts.context, element)
|
||||||
|
@ -511,7 +511,7 @@ export default class UITest {
|
||||||
bubbles: opts.bubbles,
|
bubbles: opts.bubbles,
|
||||||
cancelable: opts.cancelable,
|
cancelable: opts.cancelable,
|
||||||
pointerId: key,
|
pointerId: key,
|
||||||
isPrimary: key === 0
|
isPrimary: key === 0,
|
||||||
}
|
}
|
||||||
|
|
||||||
const gsOpts = {
|
const gsOpts = {
|
||||||
|
@ -554,7 +554,7 @@ export default class UITest {
|
||||||
if (opts.onComplete && (opts.doubleCallbacks || key === 0)) {
|
if (opts.onComplete && (opts.doubleCallbacks || key === 0)) {
|
||||||
opts.onComplete.call(this, event)
|
opts.onComplete.call(this, event)
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
// to
|
// to
|
||||||
|
@ -689,7 +689,7 @@ export default class UITest {
|
||||||
const data = []
|
const data = []
|
||||||
|
|
||||||
if (this.opts.eventType === 'pointer') {
|
if (this.opts.eventType === 'pointer') {
|
||||||
events.forEach(it => {
|
events.forEach((it) => {
|
||||||
if (it === 'down') {
|
if (it === 'down') {
|
||||||
data.push('pointerdown')
|
data.push('pointerdown')
|
||||||
} else if (it === 'move') {
|
} else if (it === 'move') {
|
||||||
|
@ -699,7 +699,7 @@ export default class UITest {
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
} else if (this.opts.eventType === 'touch') {
|
} else if (this.opts.eventType === 'touch') {
|
||||||
events.forEach(it => {
|
events.forEach((it) => {
|
||||||
if (it === 'down') {
|
if (it === 'down') {
|
||||||
data.push('touchstart')
|
data.push('touchstart')
|
||||||
} else if (it === 'move') {
|
} else if (it === 'move') {
|
||||||
|
@ -709,7 +709,7 @@ export default class UITest {
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
} else {
|
} else {
|
||||||
events.forEach(it => {
|
events.forEach((it) => {
|
||||||
if (it === 'down') {
|
if (it === 'down') {
|
||||||
data.push('mousedown')
|
data.push('mousedown')
|
||||||
} else if (it === 'move') {
|
} else if (it === 'move') {
|
||||||
|
@ -797,11 +797,11 @@ class Util {
|
||||||
|
|
||||||
if (Array.isArray(opts.bezier)) {
|
if (Array.isArray(opts.bezier)) {
|
||||||
bezier = {
|
bezier = {
|
||||||
values: opts.bezier.map(it => Util.extractPosition(it)),
|
values: opts.bezier.map((it) => Util.extractPosition(it)),
|
||||||
type: 'thru'
|
type: 'thru',
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
opts.bezier.values = opts.bezier.values.map(it => Util.extractPosition(it))
|
opts.bezier.values = opts.bezier.values.map((it) => Util.extractPosition(it))
|
||||||
bezier = opts.bezier
|
bezier = opts.bezier
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -826,29 +826,29 @@ class Util {
|
||||||
const objects = []
|
const objects = []
|
||||||
|
|
||||||
if (opts.bezier) {
|
if (opts.bezier) {
|
||||||
opts.bezier.forEach(it => {
|
opts.bezier.forEach((it) => {
|
||||||
let bezier = null
|
let bezier = null
|
||||||
|
|
||||||
if (Array.isArray(it)) {
|
if (Array.isArray(it)) {
|
||||||
bezier = {
|
bezier = {
|
||||||
values: it.map(it => Util.extractPosition(it)),
|
values: it.map((it) => Util.extractPosition(it)),
|
||||||
type: 'thru'
|
type: 'thru',
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
it.values = it.values.map(it => Util.extractPosition(it))
|
it.values = it.values.map((it) => Util.extractPosition(it))
|
||||||
bezier = it
|
bezier = it
|
||||||
}
|
}
|
||||||
|
|
||||||
objects.push({
|
objects.push({
|
||||||
bezier
|
bezier,
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
} else {
|
} else {
|
||||||
opts.to.forEach(it => {
|
opts.to.forEach((it) => {
|
||||||
const to = Util.extractPosition(it)
|
const to = Util.extractPosition(it)
|
||||||
objects.push({
|
objects.push({
|
||||||
x: to.x,
|
x: to.x,
|
||||||
y: to.y
|
y: to.y,
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
@ -945,13 +945,13 @@ class Event {
|
||||||
const eventOpts = {
|
const eventOpts = {
|
||||||
bubbles: true,
|
bubbles: true,
|
||||||
cancelable: true,
|
cancelable: true,
|
||||||
composed: false
|
composed: false,
|
||||||
}
|
}
|
||||||
|
|
||||||
// UIEventInit
|
// UIEventInit
|
||||||
const uiEventOpts = {
|
const uiEventOpts = {
|
||||||
detail: 0,
|
detail: 0,
|
||||||
view: window
|
view: window,
|
||||||
}
|
}
|
||||||
|
|
||||||
// MouseEvent
|
// MouseEvent
|
||||||
|
@ -967,7 +967,7 @@ class Event {
|
||||||
button: 0,
|
button: 0,
|
||||||
buttons: 1,
|
buttons: 1,
|
||||||
relatedTarget: null,
|
relatedTarget: null,
|
||||||
region: null
|
region: null,
|
||||||
}
|
}
|
||||||
|
|
||||||
// TouchEvent
|
// TouchEvent
|
||||||
|
@ -978,7 +978,7 @@ class Event {
|
||||||
ctrlKey: false,
|
ctrlKey: false,
|
||||||
shiftKey: false,
|
shiftKey: false,
|
||||||
altKey: false,
|
altKey: false,
|
||||||
metaKey: false
|
metaKey: false,
|
||||||
}
|
}
|
||||||
|
|
||||||
// PointerEvent
|
// PointerEvent
|
||||||
|
@ -992,7 +992,7 @@ class Event {
|
||||||
tiltY: 0,
|
tiltY: 0,
|
||||||
twist: 0,
|
twist: 0,
|
||||||
pointerType: 'touch',
|
pointerType: 'touch',
|
||||||
isPrimary: true
|
isPrimary: true,
|
||||||
}
|
}
|
||||||
|
|
||||||
if (type.startsWith('pointer')) {
|
if (type.startsWith('pointer')) {
|
||||||
|
|
38
lib/utils.js
38
lib/utils.js
|
@ -18,7 +18,7 @@ export function isEmpty(obj) {
|
||||||
* See https://stackoverflow.com/questions/105034/create-guid-uuid-in-javascript/21963136#21963136
|
* See https://stackoverflow.com/questions/105034/create-guid-uuid-in-javascript/21963136#21963136
|
||||||
*/
|
*/
|
||||||
export function uuid() {
|
export function uuid() {
|
||||||
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
|
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
|
||||||
let r = (Math.random() * 16) | 0,
|
let r = (Math.random() * 16) | 0,
|
||||||
v = c == 'x' ? r : (r & 0x3) | 0x8
|
v = c == 'x' ? r : (r & 0x3) | 0x8
|
||||||
return v.toString(16)
|
return v.toString(16)
|
||||||
|
@ -100,10 +100,10 @@ export function sample(population, k) {
|
||||||
// Taken from: https://davidwalsh.name/essential-javascript-functions
|
// Taken from: https://davidwalsh.name/essential-javascript-functions
|
||||||
export function debounce(func, wait, immediate) {
|
export function debounce(func, wait, immediate) {
|
||||||
let timeout
|
let timeout
|
||||||
return function() {
|
return function () {
|
||||||
let context = this,
|
let context = this,
|
||||||
args = arguments
|
args = arguments
|
||||||
let later = function() {
|
let later = function () {
|
||||||
timeout = null
|
timeout = null
|
||||||
if (!immediate) func.apply(context, args)
|
if (!immediate) func.apply(context, args)
|
||||||
}
|
}
|
||||||
|
@ -247,14 +247,14 @@ export class Colors {
|
||||||
// long version
|
// long version
|
||||||
let r = hex.match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i)
|
let r = hex.match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i)
|
||||||
if (r) {
|
if (r) {
|
||||||
return r.slice(1, 4).map(x => {
|
return r.slice(1, 4).map((x) => {
|
||||||
return parseInt(x, 16)
|
return parseInt(x, 16)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
// short version
|
// short version
|
||||||
r = hex.match(/^#([0-9a-f])([0-9a-f])([0-9a-f])$/i)
|
r = hex.match(/^#([0-9a-f])([0-9a-f])([0-9a-f])$/i)
|
||||||
if (r) {
|
if (r) {
|
||||||
return r.slice(1, 4).map(x => {
|
return r.slice(1, 4).map((x) => {
|
||||||
return 0x11 * parseInt(x, 16)
|
return 0x11 * parseInt(x, 16)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
@ -273,7 +273,7 @@ export class Colors {
|
||||||
return {
|
return {
|
||||||
r: Math.round(lerp(rgb1.r, rgb2.r, amount)),
|
r: Math.round(lerp(rgb1.r, rgb2.r, amount)),
|
||||||
g: Math.round(lerp(rgb1.g, rgb2.g, amount)),
|
g: Math.round(lerp(rgb1.g, rgb2.g, amount)),
|
||||||
b: Math.round(lerp(rgb1.b, rgb2.b, amount))
|
b: Math.round(lerp(rgb1.b, rgb2.b, amount)),
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -384,7 +384,7 @@ export class Points {
|
||||||
static arc(p, alpha, radius) {
|
static arc(p, alpha, radius) {
|
||||||
return {
|
return {
|
||||||
x: p.x + radius * Math.cos(alpha),
|
x: p.x + radius * Math.cos(alpha),
|
||||||
y: p.y + radius * Math.sin(alpha)
|
y: p.y + radius * Math.sin(alpha),
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -411,19 +411,17 @@ export class Points {
|
||||||
}
|
}
|
||||||
|
|
||||||
static fromPageToNode(element, p) {
|
static fromPageToNode(element, p) {
|
||||||
// if (window.webkitConvertPointFromPageToNode) {
|
if (window.webkitConvertPointFromPageToNode) {
|
||||||
// return window.webkitConvertPointFromPageToNode(element,
|
return window.webkitConvertPointFromPageToNode(element, new WebKitPoint(p.x, p.y))
|
||||||
// new WebKitPoint(p.x, p.y))
|
}
|
||||||
// }
|
//return window.convertPointFromPageToNode(element, p.x, p.y)
|
||||||
return window.convertPointFromPageToNode(element, p.x, p.y)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
static fromNodeToPage(element, p) {
|
static fromNodeToPage(element, p) {
|
||||||
// if (window.webkitConvertPointFromNodeToPage) {
|
if (window.webkitConvertPointFromNodeToPage) {
|
||||||
// return window.webkitConvertPointFromNodeToPage(element,
|
return window.webkitConvertPointFromNodeToPage(element, new WebKitPoint(p.x, p.y))
|
||||||
// new WebKitPoint(p.x, p.y))
|
}
|
||||||
// }
|
//return window.convertPointFromNodeToPage(element, p.x, p.y)
|
||||||
return window.convertPointFromNodeToPage(element, p.x, p.y)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -447,7 +445,7 @@ export class Sets {
|
||||||
const i = sets.reduce((m, s, i) => (s.size < sets[m].size ? i : m), 0)
|
const i = sets.reduce((m, s, i) => (s.size < sets[m].size ? i : m), 0)
|
||||||
const [smallest] = sets.splice(i, 1)
|
const [smallest] = sets.splice(i, 1)
|
||||||
const res = new Set()
|
const res = new Set()
|
||||||
for (let val of smallest) if (sets.every(s => s.has(val))) res.add(val)
|
for (let val of smallest) if (sets.every((s) => s.has(val))) res.add(val)
|
||||||
return res
|
return res
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -930,14 +928,14 @@ export class Strings {
|
||||||
static toUpperCaseEachWord(str, delim = ' ') {
|
static toUpperCaseEachWord(str, delim = ' ') {
|
||||||
return str
|
return str
|
||||||
.split(delim)
|
.split(delim)
|
||||||
.map(v => v.toUpperCaseFirstChar())
|
.map((v) => v.toUpperCaseFirstChar())
|
||||||
.join(delim)
|
.join(delim)
|
||||||
}
|
}
|
||||||
|
|
||||||
static toLowerCaseEachWord(str, delim = ' ') {
|
static toLowerCaseEachWord(str, delim = ' ') {
|
||||||
return str
|
return str
|
||||||
.split(delim)
|
.split(delim)
|
||||||
.map(v => v.toLowerCaseFirstChar())
|
.map((v) => v.toLowerCaseFirstChar())
|
||||||
.join(delim)
|
.join(delim)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
File diff suppressed because it is too large
Load Diff
32
package.json
32
package.json
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "iwmlib",
|
"name": "iwmlib",
|
||||||
"version": "1.1.2",
|
"version": "2.0.0-beta.0",
|
||||||
"description": "An Open Source library for multi-touch, WebGL powered applications.",
|
"description": "An Open Source library for multi-touch, WebGL powered applications.",
|
||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
"directories": {
|
"directories": {
|
||||||
|
@ -28,33 +28,33 @@
|
||||||
"license": "LGPL-3.0-or-later",
|
"license": "LGPL-3.0-or-later",
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@pixi/jsdoc-template": "^2.5.1",
|
"@pixi/jsdoc-template": "^2.5.1",
|
||||||
"eslint": "^6.8.0",
|
"eslint": "^8.23.1",
|
||||||
"eslint-config-prettier": "^6.9.0",
|
"eslint-config-prettier": "^8.5.0",
|
||||||
"eslint-plugin-prettier": "^3.1.2",
|
"eslint-plugin-prettier": "^4.2.1",
|
||||||
"fs-extra": "^8.0.1",
|
"fs-extra": "^10.1.0",
|
||||||
"gulp": "^4.0.2",
|
"gulp": "^4.0.2",
|
||||||
"gulp-concat": "^2.6.1",
|
"gulp-concat": "^2.6.1",
|
||||||
"gulp-prettier": "^2.3.0",
|
"gulp-prettier": "^4.0.0",
|
||||||
"gulp-rename": "^1.4.0",
|
"gulp-rename": "^2.0.0",
|
||||||
"gulp-replace": "^1.0.0",
|
"gulp-replace": "^1.0.0",
|
||||||
"gulp-uglify": "^3.0.2",
|
"gulp-uglify": "^3.0.2",
|
||||||
"htmlhint": "^0.11.0",
|
"htmlhint": "^1.1.4",
|
||||||
"prettier": "^1.19.1",
|
"prettier": "^2.7.1",
|
||||||
"puppeteer": "^1.20.0",
|
"puppeteer": "^17.1.3",
|
||||||
"stylelint": "^11.1.1",
|
"stylelint": "^14.12.0",
|
||||||
"stylelint-config-standard": "^19.0.0"
|
"stylelint-config-standard": "^28.0.0"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"gsap": "^2.1.3",
|
"gsap": "^2.1.3",
|
||||||
"hammerjs": "^2.0.8",
|
"hammerjs": "^2.0.8",
|
||||||
"optimal-select": "^4.0.1",
|
"optimal-select": "^4.0.1",
|
||||||
"pixi-compressed-textures": "^2.0.5",
|
"pixi-compressed-textures": "^2.0.5",
|
||||||
"pixi-ease": "^2.4.2",
|
"pixi-ease": "^3.0.7",
|
||||||
"pixi-filters": "^3.0.3",
|
"pixi-filters": "^4.2.0",
|
||||||
"pixi-particles": "^4.2.0",
|
"pixi-particles": "^4.2.0",
|
||||||
"pixi-projection": "^0.3.7",
|
"pixi-projection": "^0.4.4",
|
||||||
"pixi-viewport": "^4.8.0",
|
"pixi-viewport": "^4.8.0",
|
||||||
"pixi.js": "^5.2.1",
|
"pixi.js": "^6.5.3",
|
||||||
"propagating-hammerjs": "^1.4.7"
|
"propagating-hammerjs": "^1.4.7"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue