From 5f46b4feaec1f8ff2b2f1a26c3c91acb3b3bfe7f Mon Sep 17 00:00:00 2001
From: Sebastian Kupke
Date: Tue, 30 Jul 2019 16:56:29 +0200
Subject: [PATCH 01/30] Working on stacked buttons.
---
.prettierrc | 3 +-
dist/iwmlib.js | 1087 +---
dist/iwmlib.pixi.js | 4602 ++++++++---------
doc/out/AbstractPopup.html | 2 +-
doc/out/Badge.html | 2 +-
doc/out/BlurFilter.html | 2 +-
doc/out/Button.html | 2 +-
doc/out/ButtonGroup.html | 114 +-
doc/out/DeepZoomImage.html | 2 +-
doc/out/DeepZoomInfo.html | 2 +-
doc/out/Flippable.html | 2 +-
doc/out/FontInfo.html | 2 +-
doc/out/Hypenate.html | 2 +-
doc/out/InteractivePopup.html | 2 +-
...beledGraphics.exports.LabeledGraphics.html | 2 +-
doc/out/LabeledGraphics.html | 2 +-
doc/out/List.html | 2 +-
doc/out/Message.html | 2 +-
doc/out/MessageInteractivePopup.html | 2 +-
doc/out/MessageMessageInteractivePopup.html | 2 +-
doc/out/Modal.html | 2 +-
doc/out/ModalInteractivePopup.html | 2 +-
doc/out/ModalModalInteractivePopup.html | 2 +-
doc/out/PIXIApp.html | 2 +-
doc/out/Popup.html | 2 +-
doc/out/PopupInteractivePopup.html | 2 +-
doc/out/PopupMenu.html | 2 +-
doc/out/PopupMenuPopupInteractivePopup.html | 2 +-
...pupMenuPopupMenuPopupInteractivePopup.html | 2 +-
...nuPopupMenuPopupPopupInteractivePopup.html | 2 +-
.../PopupMenuPopupPopupInteractivePopup.html | 2 +-
doc/out/PopupPopupInteractivePopup.html | 2 +-
doc/out/Progress.html | 2 +-
doc/out/Scrollview.html | 2 +-
doc/out/Slider.html | 2 +-
doc/out/Switch.html | 2 +-
doc/out/TextLabel.TextLabel.html | 2 +-
doc/out/Theme.html | 2 +-
doc/out/ThemeDark.html | 2 +-
doc/out/ThemeLight.html | 2 +-
doc/out/ThemeRed.html | 2 +-
doc/out/TileQuadNode.html | 2 +-
doc/out/Tooltip.html | 2 +-
doc/out/UITest.html | 2 +-
doc/out/Volatile.html | 2 +-
doc/out/global.html | 2 +-
doc/out/index.html | 2 +-
doc/out/pixi_abstractpopup.js.html | 2 +-
doc/out/pixi_app.js.html | 2 +-
doc/out/pixi_badge.js.html | 2 +-
doc/out/pixi_blurfilter.js.html | 2 +-
doc/out/pixi_button.js.html | 2 +-
doc/out/pixi_buttongroup.js.html | 5 +-
doc/out/pixi_deepzoom_image.js.html | 2 +-
doc/out/pixi_flippable.js.html | 2 +-
doc/out/pixi_labeledgraphics.js.html | 2 +-
doc/out/pixi_list.js.html | 2 +-
doc/out/pixi_message.js.html | 2 +-
doc/out/pixi_modal.js.html | 2 +-
doc/out/pixi_popup.js.html | 2 +-
doc/out/pixi_popupmenu.js.html | 2 +-
doc/out/pixi_progress.js.html | 2 +-
doc/out/pixi_scrollview.js.html | 2 +-
doc/out/pixi_slider.js.html | 2 +-
doc/out/pixi_switch.js.html | 2 +-
doc/out/pixi_theme.js.html | 2 +-
doc/out/pixi_tooltip.js.html | 2 +-
doc/out/pixi_volatile.js.html | 2 +-
doc/out/uitest.js.html | 2 +-
lib/bootstrap.js | 14 +-
lib/bundle.js | 10 +-
lib/capabilities.js | 20 +-
lib/card/card.js | 176 +-
lib/card/highlight.js | 36 +-
lib/card/plugin.js | 73 +-
lib/card/scatter.js | 24 +-
lib/card/wrapper.js | 18 +-
lib/doctest.js | 22 +-
lib/events.js | 16 +-
lib/flippable.js | 46 +-
lib/frames.js | 34 +-
lib/interaction.js | 189 +-
lib/logging.js | 6 +-
lib/pixi/abstractpopup.js | 39 +-
lib/pixi/app.js | 80 +-
lib/pixi/badge.js | 14 +-
lib/pixi/blurfilter.js | 25 +-
lib/pixi/button.js | 121 +-
lib/pixi/buttongroup.html | 68 +-
lib/pixi/buttongroup.js | 298 +-
lib/pixi/flipeffect.js | 22 +-
lib/pixi/flippable.js | 47 +-
lib/pixi/labeledgraphics.js | 33 +-
lib/pixi/list.js | 40 +-
lib/pixi/message.js | 6 +-
lib/pixi/modal.js | 5 +-
lib/pixi/popover.js | 13 +-
lib/pixi/popup.js | 36 +-
lib/pixi/popupmenu.js | 5 +-
lib/pixi/progress.js | 38 +-
lib/pixi/scatter.js | 44 +-
lib/pixi/scrollbox.js | 89 +-
lib/pixi/slider.js | 56 +-
lib/pixi/stylus.js | 31 +-
lib/pixi/switch.js | 71 +-
lib/pixi/test.js | 24 +-
lib/pixi/theme.js | 3 +-
lib/pixi/timeline.js | 87 +-
lib/popup.js | 50 +-
lib/popupmenu.js | 36 +-
lib/scatter.js | 101 +-
lib/uitest.js | 145 +-
lib/utils.js | 65 +-
package-lock.json | 90 +-
package.json | 6 +-
115 files changed, 3277 insertions(+), 5134 deletions(-)
diff --git a/.prettierrc b/.prettierrc
index abd7e04..2d84bde 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -2,5 +2,6 @@
"singleQuote": true,
"jsxSingleQuote": true,
"tabWidth": 4,
- "semi": false
+ "semi": false,
+ "printWidth": 120
}
diff --git a/dist/iwmlib.js b/dist/iwmlib.js
index b000db8..ba4243b 100644
--- a/dist/iwmlib.js
+++ b/dist/iwmlib.js
@@ -124,32 +124,21 @@
static expect(expr, value) {
if (this.pprint(expr) != this.pprint(value)) {
//throw new Error("got `" + expr + "` but expected `" + value + "`.")
- throw new Error(
- 'got `' +
- this.pprint(expr) +
- '` but expected `' +
- this.pprint(value) +
- '`.'
- )
+ throw new Error('got `' + this.pprint(expr) + '` but expected `' + this.pprint(value) + '`.')
}
}
static expectError(error, message) {
let index = error.toString().indexOf(message);
if (index < 0) {
- throw new Error(
- 'got `' + message + '` but expected `' + error + '`.'
- )
+ throw new Error('got `' + message + '` but expected `' + error + '`.')
}
}
static expectLog(...messages) {
// if (!docTestLogMessages.equals(messages)) {
docTestLogMessages.forEach((msg, i) => {
- if (msg != messages[i])
- throw new Error(
- 'Unexpected log message: `' + messages[i] + '`.'
- )
+ if (msg != messages[i]) throw new Error('Unexpected log message: `' + messages[i] + '`.')
});
// throw new Error('Uups')
//}
@@ -198,10 +187,7 @@
let lines = text.value.split('\n');
let better = [];
for (let line of lines) {
- if (
- replaceExpect &&
- line.trim().startsWith('Doctest.expect(')
- ) {
+ if (replaceExpect && line.trim().startsWith('Doctest.expect(')) {
line = line.replace(/Doctest\.expect\(/, '>>> ').trim();
if (line.endsWith(')') || line.endsWith(',')) {
line = line.slice(0, -1);
@@ -406,8 +392,7 @@
// be this is a bug or a security feature. Workaround: we introduce
// a mouseDownSubstitute attribute that can be assigned to cloned
// events after instantiation.
- if (Reflect.has(event, 'mouseDownSubstitute'))
- return event.mouseDownSubstitute
+ if (Reflect.has(event, 'mouseDownSubstitute')) return event.mouseDownSubstitute
return event.buttons || event.which
}
@@ -442,15 +427,7 @@
for (let i = 0; i < targets.length; i++) {
let t = targets[i];
let touchTarget = document.elementFromPoint(t.pageX, t.pageY);
- let touch = new Touch(
- undefined,
- touchTarget,
- t.identifier,
- t.pageX,
- t.pageY,
- t.screenX,
- t.screenY
- );
+ let touch = new Touch(undefined, touchTarget, t.identifier, t.pageX, t.pageY, t.screenX, t.screenY);
touches.push(touch);
}
return new TouchList(...touches)
@@ -534,8 +511,7 @@
let result = event.type;
let selector = this.selector(event.target);
result += ' selector: ' + selector;
- if (event.target != document.querySelector(selector))
- console.log('Cannot resolve', selector);
+ if (event.target != document.querySelector(selector)) console.log('Cannot resolve', selector);
let keys = ['layerX', 'layerY', 'pageX', 'pageY', 'clientX', 'clientY'];
for (let key of keys) {
try {
@@ -688,7 +664,7 @@
}
}
- /* globals WebKitPoint */
+ /* globals */
/** Tests whether an object is empty
* @param {Object} obj - the object to be tested
@@ -755,9 +731,7 @@
}
static startYearRange(date) {
- return new Date(
- Date.UTC(date.getFullYear() - 1, 11, 31, 23, 59, 59, 999)
- )
+ return new Date(Date.UTC(date.getFullYear() - 1, 11, 31, 23, 59, 59, 999))
}
static endYearRange(date) {
@@ -777,11 +751,7 @@
}
static nextDay(date) {
- return this.create(
- date.getFullYear(),
- date.getMonth(),
- date.getDate() + 1
- )
+ return this.create(date.getFullYear(), date.getMonth(), date.getDate() + 1)
}
static nextHour(date) {
@@ -1284,15 +1254,9 @@
*/
draw(context, { lineWidth = 2, stroke = '#000000', fill = null } = {}) {
context.beginPath();
- context.moveTo(
- this.points[0].x + this.center.x,
- this.points[0].y + this.center.y
- );
+ context.moveTo(this.points[0].x + this.center.x, this.points[0].y + this.center.y);
for (let i = 1; i < this.points.length; i++) {
- context.lineTo(
- this.points[i].x + this.center.x,
- this.points[i].y + this.center.y
- );
+ context.lineTo(this.points[i].x + this.center.x, this.points[i].y + this.center.y);
}
context.closePath();
context.lineWidth = lineWidth;
@@ -1349,10 +1313,7 @@
for (i = 0, j = nvert - 1; i < nvert; j = i++) {
if (
verty[i] > testy != verty[j] > testy &&
- testx <
- ((vertx[j] - vertx[i]) * (testy - verty[i])) /
- (verty[j] - verty[i]) +
- vertx[i]
+ testx < ((vertx[j] - vertx[i]) * (testy - verty[i])) / (verty[j] - verty[i]) + vertx[i]
)
c = !c;
}
@@ -1386,12 +1347,8 @@
for (side = 0; side < this.getNumberOfSides(); side++) {
/* get the axis that we will project onto */
if (side == 0) {
- axis.x =
- this.points[this.getNumberOfSides() - 1].y -
- this.points[0].y;
- axis.y =
- this.points[0].x -
- this.points[this.getNumberOfSides() - 1].x;
+ axis.x = this.points[this.getNumberOfSides() - 1].y - this.points[0].y;
+ axis.y = this.points[0].x - this.points[this.getNumberOfSides() - 1].x;
} else {
axis.x = this.points[side - 1].y - this.points[side].y;
axis.y = this.points[side].x - this.points[side - 1].x;
@@ -1415,8 +1372,7 @@
maxA += tmp;
/* project polygon B onto axis to determine the min/max */
- minB = maxB =
- other.points[0].x * axis.x + other.points[0].y * axis.y;
+ minB = maxB = other.points[0].x * axis.x + other.points[0].y * axis.y;
for (i = 1; i < other.getNumberOfSides(); i++) {
tmp = other.points[i].x * axis.x + other.points[i].y * axis.y;
if (tmp > maxB) maxB = tmp;
@@ -1443,12 +1399,8 @@
for (side = 0; side < other.getNumberOfSides(); side++) {
/* get the axis that we will project onto */
if (side == 0) {
- axis.x =
- other.points[other.getNumberOfSides() - 1].y -
- other.points[0].y;
- axis.y =
- other.points[0].x -
- other.points[other.getNumberOfSides() - 1].x;
+ axis.x = other.points[other.getNumberOfSides() - 1].y - other.points[0].y;
+ axis.y = other.points[0].x - other.points[other.getNumberOfSides() - 1].x;
} else {
axis.x = other.points[side - 1].y - other.points[side].y;
axis.y = other.points[side].x - other.points[side - 1].x;
@@ -1472,8 +1424,7 @@
maxA += tmp;
/* project polygon B onto axis to determine the min/max */
- minB = maxB =
- other.points[0].x * axis.x + other.points[0].y * axis.y;
+ minB = maxB = other.points[0].x * axis.x + other.points[0].y * axis.y;
for (i = 1; i < other.getNumberOfSides(); i++) {
tmp = other.points[i].x * axis.x + other.points[i].y * axis.y;
if (tmp > maxB) maxB = tmp;
@@ -1530,12 +1481,7 @@
* @memberof Rect
*/
static contains(rect, point) {
- return (
- point.x > rect.left &&
- point.x < rect.x + rect.right &&
- point.y > rect.top &&
- point.y < rect.bottom
- )
+ return point.x > rect.left && point.x < rect.x + rect.right && point.y > rect.top && point.y < rect.bottom
}
/**
@@ -1615,8 +1561,7 @@
* @access private
*/
__push(value) {
- let removed =
- this.buffer.length === this.bufferMaxSize ? this.buffer.shift() : 0;
+ let removed = this.buffer.length === this.bufferMaxSize ? this.buffer.shift() : 0;
this.buffer.push(value);
return removed
@@ -1720,11 +1665,7 @@
}
}
- static setup({
- log = console.log,
- warn = console.warn,
- error = console.error
- } = {}) {
+ static setup({ log = console.log, warn = console.warn, error = console.error } = {}) {
logHandlers.log = log;
logHandlers.warn = warn;
logHandlers.error = error;
@@ -1931,10 +1872,10 @@
delta() {
let prev = [];
let curr = [];
- let cm = { x: 0, y: 0};
- let pm = { x: 0, y: 0};
+ let cm = { x: 0, y: 0 };
+ let pm = { x: 0, y: 0 };
let count = 0;
- for(let key of this.current.keys()) {
+ for (let key of this.current.keys()) {
if (this.previous.has(key)) {
let p = this.previous.get(key);
let c = this.current.get(key);
@@ -1953,7 +1894,7 @@
let scaled = 0;
let alpha = 0;
let zoom = 1;
- for(let i=0; i t1 + this.longPressTime;
if (tookLong) {
@@ -2235,10 +2144,7 @@
this.unregisterTap(key);
}
}
- if (
- this.tapTimestamps.has(key) &&
- performance.now() > this.tapTimestamps.get(key) + this.tapDuration
- ) {
+ if (this.tapTimestamps.has(key) && performance.now() > this.tapTimestamps.get(key) + this.tapDuration) {
//console.log("tap too long")
this.unregisterTap(key);
}
@@ -2263,11 +2169,7 @@
isLongPress(key) {
let ended = this.ended.get(key);
let start = this.start.get(key);
- if (
- start &&
- ended &&
- Points$1.distance(ended, start) < this.tapDistance
- ) {
+ if (start && ended && Points$1.distance(ended, start) < this.tapDistance) {
let t1 = this.timestamps.get(key);
let tookLong = performance.now() > t1 + this.longPressTime;
if (tookLong) {
@@ -2334,9 +2236,7 @@
setupInteraction() {
if (this.debug) {
- let error = this.targetInterface.implementationError(
- this.target.constructor
- );
+ let error = this.targetInterface.implementationError(this.target.constructor);
if (error != null) {
throw new Error('Expected IInteractionTarget: ' + error)
}
@@ -2374,16 +2274,11 @@
element.addEventListener(
'pointermove',
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))) {
// this.capture(e) &&
- if (this.debug)
- console.log('pointermove captured', e.pointerId);
+ if (this.debug) console.log('pointermove captured', e.pointerId);
this.onMove(e);
}
},
@@ -2392,8 +2287,7 @@
element.addEventListener(
'pointerup',
e => {
- if (this.debug)
- console.log('pointerup', e.pointerId, e.pointerType);
+ if (this.debug) console.log('pointerup', e.pointerId, e.pointerType);
this.onEnd(e);
if (this.capturePointerEvents) {
try {
@@ -2408,11 +2302,9 @@
element.addEventListener(
'pointercancel',
e => {
- if (this.debug)
- console.log('pointercancel', e.pointerId, e.pointerType);
+ if (this.debug) console.log('pointercancel', e.pointerId, e.pointerType);
this.onEnd(e);
- if (this.capturePointerEvents)
- element.releasePointerCapture(e.pointerId);
+ if (this.capturePointerEvents) element.releasePointerCapture(e.pointerId);
},
useCapture
);
@@ -2421,12 +2313,7 @@
element.addEventListener(
'pointerleave',
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);
},
useCapture
@@ -2437,12 +2324,7 @@
element.addEventListener(
'pointerout',
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);
},
useCapture
@@ -2453,13 +2335,7 @@
window.addEventListener(
'pointerout',
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) {
this.onEnd(e);
}
@@ -2472,8 +2348,7 @@
element.addEventListener(
'touchstart',
e => {
- if (this.debug)
- console.log('touchstart', this.touchPoints(e));
+ if (this.debug) console.log('touchstart', this.touchPoints(e));
if (this.capture(e)) {
for (let touch of e.changedTouches) {
this.onStart(touch);
@@ -2485,8 +2360,7 @@
element.addEventListener(
'touchmove',
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) {
this.onMove(touch);
}
@@ -2509,12 +2383,7 @@
element.addEventListener(
'touchcancel',
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) {
this.onEnd(touch);
}
@@ -2563,9 +2432,7 @@
e => {
if (e.target == element) {
this.onEnd(e);
- console.warn(
- "Shouldn't happen: mouseout ends interaction"
- );
+ console.warn("Shouldn't happen: mouseout ends interaction");
}
},
useCapture
@@ -2606,16 +2473,8 @@
}
setupMouseWheelInteraction() {
- this.mouseWheelElement.addEventListener(
- 'mousewheel',
- this.onMouseWheel.bind(this),
- true
- );
- this.mouseWheelElement.addEventListener(
- 'DOMMouseScroll',
- this.onMouseWheel.bind(this),
- true
- );
+ this.mouseWheelElement.addEventListener('mousewheel', this.onMouseWheel.bind(this), true);
+ this.mouseWheelElement.addEventListener('DOMMouseScroll', this.onMouseWheel.bind(this), true);
}
onMouseWheel(event) {
@@ -2677,10 +2536,7 @@
break
}
case 'Touch': {
- let id =
- event.touchType === 'stylus'
- ? 'stylus'
- : event.identifier.toString();
+ let id = event.touchType === 'stylus' ? 'stylus' : event.identifier.toString();
result[id] = this.getPosition(event);
break
}
@@ -2730,10 +2586,7 @@
let point = extracted[key];
let updated = this.interaction.update(key, point);
if (updated) {
- console.warn(
- "new pointer in updateInteraction shouldn't happen",
- key
- );
+ console.warn("new pointer in updateInteraction shouldn't happen", key);
this.interactionStarted(event, key, point);
}
}
@@ -2865,11 +2718,7 @@
onEnd(event) {
let extracted = this.extractPoint(event, 'changedTouches');
this.endInteraction(event, extracted);
- let mapped = this.interaction.mapInteraction(
- extracted,
- ['ended'],
- this.mapPositionToPoint.bind(this)
- );
+ let mapped = this.interaction.mapInteraction(extracted, ['ended'], this.mapPositionToPoint.bind(this));
for (let [target, interaction] of mapped.entries()) {
target.onEnd(event, interaction);
}
@@ -2903,10 +2752,7 @@
// convert to array
types = Array.isArray(types) ? types : types.split(/\s/);
- if (
- elements instanceof NodeList ||
- elements instanceof HTMLCollection
- ) {
+ if (elements instanceof NodeList || elements instanceof HTMLCollection) {
elements = Array.from(elements);
}
elements = Array.isArray(elements) ? elements : [elements];
@@ -2915,9 +2761,7 @@
const type = types[i].toLowerCase();
// list of hammer events
- const useHammer = /^(tap|doubletap|press|pan|swipe|pinch|rotate).*$/.test(
- type
- );
+ const useHammer = /^(tap|doubletap|press|pan|swipe|pinch|rotate).*$/.test(type);
// if it is a hammer event
if (useHammer) {
@@ -2932,33 +2776,15 @@
// recognizers
if (type.startsWith('pan')) {
- hammer
- .get('pan')
- .set(
- Object.assign(
- { direction: Hammer.DIRECTION_ALL },
- opts
- )
- );
+ hammer.get('pan').set(Object.assign({ direction: Hammer.DIRECTION_ALL }, opts));
} else if (type.startsWith('pinch')) {
- hammer
- .get('pinch')
- .set(Object.assign({ enable: true }, opts));
+ hammer.get('pinch').set(Object.assign({ enable: true }, opts));
} else if (type.startsWith('press')) {
hammer.get('press').set(opts);
} else if (type.startsWith('rotate')) {
- hammer
- .get('rotate')
- .set(Object.assign({ enable: true }, opts));
+ hammer.get('rotate').set(Object.assign({ enable: true }, opts));
} else if (type.startsWith('swipe')) {
- hammer
- .get('swipe')
- .set(
- Object.assign(
- { direction: Hammer.DIRECTION_ALL },
- opts
- )
- );
+ hammer.get('swipe').set(Object.assign({ direction: Hammer.DIRECTION_ALL }, opts));
} else if (type.startsWith('tap')) {
hammer.get('tap').set(opts);
}
@@ -3029,20 +2855,12 @@
*/
static get isElectron() {
// Renderer process
- if (
- typeof window !== 'undefined' &&
- typeof window.process === 'object' &&
- window.process.type === 'renderer'
- ) {
+ if (typeof window !== 'undefined' && typeof window.process === 'object' && window.process.type === 'renderer') {
return true
}
// Main process
- if (
- typeof process !== 'undefined' &&
- typeof process.versions === 'object' &&
- !!process.versions.electron
- ) {
+ if (typeof process !== 'undefined' && typeof process.versions === 'object' && !!process.versions.electron) {
return true
}
@@ -3110,9 +2928,7 @@
class CapabilitiesTests {
static testConfirm() {
let bool = confirm('Please confirm');
- document.getElementById('demo').innerHTML = bool
- ? 'Confirmed'
- : 'Not confirmed';
+ document.getElementById('demo').innerHTML = bool ? 'Confirmed' : 'Not confirmed';
}
static testPrompt() {
@@ -3133,9 +2949,7 @@
}
static testMultiTouchTable() {
- let value =
- 'Is the device a multi-touch table? ' +
- Capabilities.isMultiTouchTable;
+ let value = 'Is the device a multi-touch table? ' + Capabilities.isMultiTouchTable;
multi_touch_table.innerHTML = value;
}
@@ -3205,14 +3019,7 @@
class ScatterEvent extends BaseEvent {
constructor(
target,
- {
- translate = { x: 0, y: 0 },
- scale = null,
- rotate = 0,
- about = null,
- fast = false,
- type = null
- } = {}
+ { translate = { x: 0, y: 0 }, scale = null, rotate = 0, about = null, fast = false, type = null } = {}
) {
super('scatterTransformed', { target: target });
this.translate = translate;
@@ -3225,13 +3032,7 @@
toString() {
return (
- "Event('scatterTransformed', scale: " +
- this.scale +
- ' about: ' +
- this.about.x +
- ', ' +
- this.about.y +
- ')'
+ "Event('scatterTransformed', scale: " + this.scale + ' about: ' + this.about.x + ', ' + this.about.y + ')'
)
}
}
@@ -3251,13 +3052,7 @@
}
toString() {
- return (
- 'Event(scatterResized width: ' +
- this.width +
- 'height: ' +
- this.height +
- ')'
- )
+ return 'Event(scatterResized width: ' + this.width + 'height: ' + this.height + ')'
}
}
@@ -3532,6 +3327,13 @@
close() {
if (this.onClose) {
this.onClose.forEach(callback => callback(this));
+
+ /**
+ Removes self from container when it's closed.
+ */
+ if (this.container) {
+ this.container.remove(this);
+ }
}
}
@@ -3665,10 +3467,7 @@
_checkAutoClose() {
if (this.scaleAutoClose)
- if (
- this.scale <
- this.minScale + this.scaleCloseThreshold - this.scaleCloseBuffer
- ) {
+ if (this.scale < this.minScale + this.scaleCloseThreshold - this.scaleCloseBuffer) {
this.zoom(this.minScale, {
animate: 0.2,
onComplete: this.close.bind(this)
@@ -3723,17 +3522,7 @@
this.move(delta, { animate: animate });
}
- zoom(
- scale,
- {
- animate = 0,
- about = null,
- delay = 0,
- x = null,
- y = null,
- onComplete = null
- } = {}
- ) {
+ zoom(scale, { animate = 0, about = null, delay = 0, x = null, y = null, onComplete = null } = {}) {
let anchor = about || this.center;
if (scale != this.scale) {
if (animate > 0) {
@@ -3784,15 +3573,9 @@
let origin = this.rotationOrigin;
let beta = Points$1.angle(origin, anchor);
let distance = Points$1.distance(origin, anchor);
- let { scale: newScale, zoom: thresholdedZoom } = this.calculateScale(
- zoom
- );
+ let { scale: newScale, zoom: thresholdedZoom } = this.calculateScale(zoom);
- let newOrigin = Points$1.arc(
- anchor,
- beta + rotate,
- distance * thresholdedZoom
- );
+ let newOrigin = Points$1.arc(anchor, beta + rotate, distance * thresholdedZoom);
let extra = Points$1.subtract(newOrigin, origin);
let offset = Points$1.subtract(anchor, origin);
this._move(offset);
@@ -3855,10 +3638,8 @@
}
calculateScaleTransparency() {
- let transparency =
- (this.scale - this.minScale) / this.scaleCloseThreshold;
- transparency =
- transparency > 1 ? 1 : transparency < 0 ? 0 : transparency;
+ let transparency = (this.scale - this.minScale) / this.scaleCloseThreshold;
+ transparency = transparency > 1 ? 1 : transparency < 0 ? 0 : transparency;
return transparency
}
@@ -3916,8 +3697,7 @@
if (this.scaleAutoClose) {
if (this.scale <= this.minScale + this.scaleCloseThreshold) {
- if (this.scaleAutoCloseTimeout)
- clearTimeout(this.scaleAutoCloseTimeout);
+ if (this.scaleAutoCloseTimeout) clearTimeout(this.scaleAutoCloseTimeout);
this.scaleAutoCloseTimeout = setTimeout(() => {
this._checkAutoClose();
}, 600);
@@ -4080,13 +3860,7 @@
*/
constructor(
element,
- {
- stopEvents = 'auto',
- claimEvents = true,
- useCapture = true,
- touchAction = 'none',
- debugCanvas = null
- } = {}
+ { stopEvents = 'auto', claimEvents = true, useCapture = true, touchAction = 'none', debugCanvas = null } = {}
) {
this.onCapture = null;
this.element = element;
@@ -4097,11 +3871,7 @@
movement of scatter objects, the touchmove event has to be bound again.
*/
if (Capabilities.isSafari) {
- document.addEventListener(
- 'touchmove',
- event => this.preventPinch(event),
- false
- );
+ document.addEventListener('touchmove', event => this.preventPinch(event), false);
stopEvents = false;
} else {
stopEvents = true;
@@ -4137,14 +3907,7 @@
for (let [key, point] of current.entries()) {
let local = point;
context.beginPath();
- context.arc(
- local.x * resolution,
- local.y * resolution,
- radius,
- 0,
- 2 * Math.PI,
- false
- );
+ context.arc(local.x * resolution, local.y * resolution, radius, 0, 2 * Math.PI, false);
context.fill();
context.stroke();
}
@@ -4160,6 +3923,22 @@
}
}
+ /**
+ * Removes an element from the scatter.
+ *
+ * @param {Scatter} scatter - Element to remove.
+ * @memberof DOMScatterContainer
+ */
+ remove(scatter) {
+ this.scatter.delete(scatter.element);
+ }
+
+ /**
+ * Adds an element to the ScatterContainer.
+ *
+ * @param {Scatter} scatter - Element to add to the ScatterContainer.
+ * @memberof DOMScatterContainer
+ */
add(scatter) {
this.scatter.set(scatter.element, scatter);
}
@@ -4200,10 +3979,7 @@
***/
let found = document.elementFromPoint(global.x, global.y);
for (let target of this.scatter.values()) {
- if (
- target.interactive &&
- this.isDescendant(target.element, found)
- ) {
+ if (target.interactive && this.isDescendant(target.element, found)) {
if (this.stopEvents) Events.stop(event);
if (this.claimEvents) event.claimedByScatter = target;
return target
@@ -4634,10 +4410,8 @@
let resizeH = -r * Math.sin(Angle.degree2radian(phiCorrected));
if (
- (this.element.offsetWidth + resizeW) / this.scale >
- (this.width * 0.5) / this.scale &&
- (this.element.offsetHeight + resizeH) / this.scale >
- (this.height * 0.3) / this.scale
+ (this.element.offsetWidth + resizeW) / this.scale > (this.width * 0.5) / this.scale &&
+ (this.element.offsetHeight + resizeH) / this.scale > (this.height * 0.3) / this.scale
)
TweenLite.to(this.element, 0, {
width: this.element.offsetWidth + resizeW / this.scale,
@@ -4934,28 +4708,22 @@
frontLoaded(loader) {
return new Promise((resolve, reject) => {
- let scatter = new DOMScatter$1(
- this.cardWrapper,
- this.domScatterContainer,
- {
- x: loader.x,
- y: loader.y,
- startScale: loader.scale,
- scale: loader.scale,
- maxScale: loader.maxScale,
- minScale: loader.minScale,
- width: loader.wantedWidth,
- height: loader.wantedHeight,
- rotation: loader.rotation,
- translatable: this.translatable,
- scalable: this.scalable,
- rotatable: this.rotatable,
- overdoScaling: this.overdoScaling,
- tapDelegate: this.tapDelegateFactory
- ? this.tapDelegateFactory(this.cardWrapper)
- : null
- }
- );
+ let scatter = new DOMScatter$1(this.cardWrapper, this.domScatterContainer, {
+ x: loader.x,
+ y: loader.y,
+ startScale: loader.scale,
+ scale: loader.scale,
+ maxScale: loader.maxScale,
+ minScale: loader.minScale,
+ width: loader.wantedWidth,
+ height: loader.wantedHeight,
+ rotation: loader.rotation,
+ translatable: this.translatable,
+ scalable: this.scalable,
+ rotatable: this.rotatable,
+ overdoScaling: this.overdoScaling,
+ tapDelegate: this.tapDelegateFactory ? this.tapDelegateFactory(this.cardWrapper) : null
+ });
if (this.center) {
scatter.centerAt(this.center);
@@ -4972,9 +4740,7 @@
//Remove callback
if (scatter.onTransform) {
- let callbackIdx = scatter.onTransform.indexOf(
- removeOnMinScale
- );
+ let callbackIdx = scatter.onTransform.indexOf(removeOnMinScale);
scatter.onTransform.splice(callbackIdx, 1);
}
}
@@ -5248,9 +5014,7 @@
this.flipped = !this.flipped;
let targetY = this.flipped ? 180 : 0;
- let targetZ = this.flipped
- ? this.startAngle + this.targetRotation(this.startAngle)
- : this.startAngle;
+ let targetZ = this.flipped ? this.startAngle + this.targetRotation(this.startAngle) : this.startAngle;
let targetScale = this.flipped ? this.wantedScale : this.startScale;
let w = this.flipped ? this.wantedWidth : this.startWidth;
let h = this.flipped ? this.wantedHeight : this.startHeight;
@@ -5610,8 +5374,7 @@
img.ondrag = e => {
e.preventDefault();
- let target =
- this.element.querySelector('iframe') || this.element;
+ let target = this.element.querySelector('iframe') || this.element;
let delta = {
x: e.clientX - this.currentPos.x,
y: e.clientY - this.currentPos.y
@@ -5713,10 +5476,7 @@
if (images.length > 0) {
let count = 0;
for (let image of images) {
- if (
- !image.complete &&
- !image.src.startsWith('data:')
- ) {
+ if (!image.complete && !image.src.startsWith('data:')) {
total += 1;
console.log('image not complete', image.src);
image.onload = e => {
@@ -5828,8 +5588,7 @@
target.ondragstart = e => {
this.currentPos = { x: e.clientX, y: e.clientY };
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);
};
target.ondrag = e => {
@@ -5879,8 +5638,7 @@
layout() {}
remove() {
- if (this.parent.contains(this.element))
- this.parent.removeChild(this.element);
+ if (this.parent.contains(this.element)) this.parent.removeChild(this.element);
this.unregister(this.context);
}
@@ -6035,36 +5793,30 @@
//if targetBoundingBox is set, popup is placed next to the rectangle
if (this.targetBoundingBox) {
let bbTop = this.targetBoundingBox.y;
- let bbBottom =
- this.targetBoundingBox.y + this.targetBoundingBox.height;
+ let bbBottom = this.targetBoundingBox.y + this.targetBoundingBox.height;
let bbLeft = this.targetBoundingBox.x;
- let bbRight =
- this.targetBoundingBox.x + this.targetBoundingBox.width;
+ let bbRight = this.targetBoundingBox.x + this.targetBoundingBox.width;
//console.log("place popup with bb set:", x, y, bbTop, bbBottom, bbLeft, bbRight)
switch (notchPosition) {
case 'bottomLeft':
case 'bottomRight':
case 'bottomCenter':
y = bbTop;
- if (!this.useEventPosWithBoundingBox)
- x = (bbLeft + bbRight) / 2;
+ if (!this.useEventPosWithBoundingBox) x = (bbLeft + bbRight) / 2;
break
case 'topLeft':
case 'topRight':
case 'topCenter':
y = bbBottom;
- if (!this.useEventPosWithBoundingBox)
- x = (bbLeft + bbRight) / 2;
+ if (!this.useEventPosWithBoundingBox) x = (bbLeft + bbRight) / 2;
break
case 'centerRight':
x = bbLeft;
- if (!this.useEventPosWithBoundingBox)
- y = (bbTop + bbBottom) / 2;
+ if (!this.useEventPosWithBoundingBox) y = (bbTop + bbBottom) / 2;
break
case 'centerLeft':
x = bbRight;
- if (!this.useEventPosWithBoundingBox)
- y = (bbTop + bbBottom) / 2;
+ if (!this.useEventPosWithBoundingBox) y = (bbTop + bbBottom) / 2;
break
default:
break
@@ -6208,8 +5960,7 @@
boxShadow: '0 12px 15px rgba(0, 0, 0, 0.1)',
bottom: -this.notchSize + 'px',
position: 'absolute',
- borderTop:
- this.notchSize + 'px solid ' + this.backgroundColor,
+ borderTop: this.notchSize + 'px solid ' + this.backgroundColor,
borderRight: this.notchSize + 'px solid transparent',
borderLeft: this.notchSize + 'px solid transparent',
borderBottom: 0
@@ -6237,8 +5988,7 @@
left,
top: -this.notchSize + 'px',
position: 'absolute',
- borderBottom:
- this.notchSize + 'px solid ' + this.backgroundColor,
+ borderBottom: this.notchSize + 'px solid ' + this.backgroundColor,
borderRight: this.notchSize + 'px solid transparent',
borderLeft: this.notchSize + 'px solid transparent',
borderTop: 0
@@ -6275,16 +6025,13 @@
let top = size.height / 2 - this.notchSize;
if (notchPosition.endsWith('Left')) {
left = -this.notchSize * 2 + 'px';
- borderRight =
- this.notchSize + 'px solid ' + this.backgroundColor;
- this.element.style.boxShadow =
- '15px 10px 15px rgba(0, 0, 0, 0.3)';
+ borderRight = this.notchSize + 'px solid ' + this.backgroundColor;
+ this.element.style.boxShadow = '15px 10px 15px rgba(0, 0, 0, 0.3)';
}
if (notchPosition.endsWith('Right')) {
left = size.width + 'px';
borderLeft = this.notchSize + 'px solid ' + this.backgroundColor;
- this.element.style.boxShadow =
- '15px 5px 15px rgba(0, 0, 0, 0.3)';
+ this.element.style.boxShadow = '15px 5px 15px rgba(0, 0, 0, 0.3)';
}
top = Math.round(top) + 'px';
@@ -6341,8 +6088,7 @@
onMove = null
} = {}
) {
- let notchPosition =
- switchPos && point.y < 50 ? 'topCenter' : 'bottomCenter';
+ let notchPosition = switchPos && point.y < 50 ? 'topCenter' : 'bottomCenter';
let popup = new Popup$1({
parent,
context,
@@ -6633,8 +6379,7 @@
return
}
console.log('open', point);
- let notchPosition =
- point.y < 50 && switchPos ? 'topCenter' : 'bottomCenter';
+ let notchPosition = point.y < 50 && switchPos ? 'topCenter' : 'bottomCenter';
let popup = new PopupMenu({
parent,
fontSize,
@@ -6657,21 +6402,9 @@
if (this.eventOutside(e)) this.closePopup(context);
};
if (autoClose) {
- context.addEventListener(
- 'mousedown',
- popup.closeEventListener,
- true
- );
- context.addEventListener(
- 'touchstart',
- popup.closeEventListener,
- true
- );
- context.addEventListener(
- 'pointerdown',
- popup.closeEventListener,
- true
- );
+ context.addEventListener('mousedown', popup.closeEventListener, true);
+ context.addEventListener('touchstart', popup.closeEventListener, true);
+ context.addEventListener('pointerdown', popup.closeEventListener, true);
}
}
@@ -6686,18 +6419,9 @@
let registered = Poppable.get(context);
if (registered) {
registered.close();
- context.removeEventListener(
- 'mousedown',
- registered.closeEventListener
- );
- context.removeEventListener(
- 'touchstart',
- registered.closeEventListener
- );
- context.removeEventListener(
- 'pointerdown',
- registered.closeEventListener
- );
+ context.removeEventListener('mousedown', registered.closeEventListener);
+ context.removeEventListener('touchstart', registered.closeEventListener);
+ context.removeEventListener('pointerdown', registered.closeEventListener);
}
}
}
@@ -6760,15 +6484,7 @@
let point = pointMap.get(key);
let p = Points$1.fromPageToNode(this.frame, point);
let touchTarget = doc.elementFromPoint(p.x, p.y);
- let touch = new Touch(
- undefined,
- touchTarget,
- key,
- p.x,
- p.y,
- p.x,
- p.y
- );
+ let touch = new Touch(undefined, touchTarget, key, p.x, p.y, p.x, p.y);
touches.push(touch);
}
return new TouchList(...touches)
@@ -6803,12 +6519,7 @@
this.target.dispatchEvent(touchEvent);
}
- simulateTouchEventSafari(
- type,
- point,
- pointMap,
- touchEventKey = 'targetTouches'
- ) {
+ simulateTouchEventSafari(type, point, pointMap, touchEventKey = 'targetTouches') {
let p = Points$1.fromPageToNode(this.frame, point);
let data = {
view: this.frame.contentWindow,
@@ -6832,9 +6543,7 @@
}
isMouseLikeEvent(event) {
- return (
- event.type.startsWith('mouse') || event.type.startsWith('pointer')
- )
+ return event.type.startsWith('mouse') || event.type.startsWith('pointer')
}
onStart(event, interaction) {
@@ -6843,11 +6552,7 @@
if (this.isMouseLikeEvent(event)) {
this.simulateMouseEvent('mousedown', point);
} else {
- this.simulateTouchEvent(
- 'touchstart',
- point,
- interaction.current
- );
+ this.simulateTouchEvent('touchstart', point, interaction.current);
return
}
}
@@ -6871,12 +6576,7 @@
if (this.isMouseLikeEvent(event)) {
this.simulateMouseEvent('mouseend', point);
} else {
- this.simulateTouchEvent(
- 'touchend',
- point,
- interaction.ended,
- 'changedTouches'
- );
+ this.simulateTouchEvent('touchend', point, interaction.ended, 'changedTouches');
return
}
}
@@ -7091,9 +6791,7 @@
if (opts.eventType) {
opts.eventTypes = opts.eventType;
}
- opts.eventTypes = Array.isArray(opts.eventTypes)
- ? opts.eventTypes
- : [opts.eventTypes];
+ opts.eventTypes = Array.isArray(opts.eventTypes) ? opts.eventTypes : [opts.eventTypes];
// timeline
//--------------------
@@ -7131,14 +6829,8 @@
if (opts.eventTypes[0]) {
// create and dispatch event
//--------------------
- const eventStart = Event$1.create(
- elem,
- coords,
- opts.eventTypes[0],
- eventOpts
- );
- if (this.opts.debug)
- console.log('dispatch event', eventStart);
+ const eventStart = Event$1.create(elem, coords, opts.eventTypes[0], eventOpts);
+ if (this.opts.debug) console.log('dispatch event', eventStart);
elem.dispatchEvent(eventStart);
// onStart
@@ -7150,14 +6842,8 @@
// create and dispatch event
//--------------------
- const eventComplete = Event$1.create(
- elem,
- coords,
- opts.eventTypes[1],
- eventOpts
- );
- if (this.opts.debug)
- console.log('dispatch event', eventComplete);
+ const eventComplete = Event$1.create(elem, coords, opts.eventTypes[1], eventOpts);
+ if (this.opts.debug) console.log('dispatch event', eventComplete);
elem.dispatchEvent(eventComplete);
// onComplete
@@ -7250,14 +6936,8 @@
onStart: () => {
// create and dispatch event
//--------------------
- const event = Event$1.create(
- elem,
- from,
- opts.eventTypes[0],
- eventOpts
- );
- if (this.opts.debug)
- console.log('dispatch event', event);
+ const event = Event$1.create(elem, from, opts.eventTypes[0], eventOpts);
+ if (this.opts.debug) console.log('dispatch event', event);
elem.dispatchEvent(event);
// onStart
@@ -7269,14 +6949,8 @@
onUpdate: () => {
// create and dispatch event
//--------------------
- const event = Event$1.create(
- elem,
- from,
- opts.eventTypes[1],
- eventOpts
- );
- if (this.opts.debug)
- console.log('dispatch event', event);
+ const event = Event$1.create(elem, from, opts.eventTypes[1], eventOpts);
+ if (this.opts.debug) console.log('dispatch event', event);
elem.dispatchEvent(event);
// onUpdate
@@ -7288,14 +6962,8 @@
onComplete: () => {
// create and dispatch event
//--------------------
- const event = Event$1.create(
- elem,
- from,
- opts.eventTypes[2],
- eventOpts
- );
- if (this.opts.debug)
- console.log('dispatch event', event);
+ const event = Event$1.create(elem, from, opts.eventTypes[2], eventOpts);
+ if (this.opts.debug) console.log('dispatch event', event);
elem.dispatchEvent(event);
// onComplete
@@ -7444,66 +7112,39 @@
onStart: () => {
// create and dispatch event
//--------------------
- const event = Event$1.create(
- elem,
- from,
- opts.eventTypes[0],
- eventOpts
- );
- if (this.opts.debug)
- console.log('dispatch event', event);
+ const event = Event$1.create(elem, from, opts.eventTypes[0], eventOpts);
+ if (this.opts.debug) console.log('dispatch event', event);
elem.dispatchEvent(event);
// onStart
//--------------------
- if (
- opts.onStart &&
- (opts.doubleCallbacks || key === 0)
- ) {
+ if (opts.onStart && (opts.doubleCallbacks || key === 0)) {
opts.onStart.call(this, event);
}
},
onUpdate: () => {
// create and dispatch event
//--------------------
- const event = Event$1.create(
- elem,
- from,
- opts.eventTypes[1],
- eventOpts
- );
- if (this.opts.debug)
- console.log('dispatch event', event);
+ const event = Event$1.create(elem, from, opts.eventTypes[1], eventOpts);
+ if (this.opts.debug) console.log('dispatch event', event);
elem.dispatchEvent(event);
// onUpdate
//--------------------
- if (
- opts.onUpdate &&
- (opts.doubleCallbacks || key === 0)
- ) {
+ if (opts.onUpdate && (opts.doubleCallbacks || key === 0)) {
opts.onUpdate.call(this, event);
}
},
onComplete: () => {
// create and dispatch event
//--------------------
- const event = Event$1.create(
- elem,
- from,
- opts.eventTypes[2],
- eventOpts
- );
- if (this.opts.debug)
- console.log('dispatch event', event);
+ const event = Event$1.create(elem, from, opts.eventTypes[2], eventOpts);
+ if (this.opts.debug) console.log('dispatch event', event);
elem.dispatchEvent(event);
// onComplete
//--------------------
- if (
- opts.onComplete &&
- (opts.doubleCallbacks || key === 0)
- ) {
+ if (opts.onComplete && (opts.doubleCallbacks || key === 0)) {
opts.onComplete.call(this, event);
}
}
@@ -7615,9 +7256,7 @@
'No execution time was specified for this action, and a default interval was not set in the class constructor!'
)
}
- timelinePosition =
- Math.max(...this._timelinePositions) +
- (this.opts.defaultInterval || 1);
+ timelinePosition = Math.max(...this._timelinePositions) + (this.opts.defaultInterval || 1);
}
if (opts === null) {
@@ -7692,12 +7331,8 @@
* @return {HTMLElement|string} element - The HTML element on which the event is to be executed, e.g. button, document, h2, canvas, etc. or an selector string. If a selector has been specified, it is evaluated immediately before the event is called using the querySelector method.
*/
static extractElement(context, element) {
- const cont = Util.isFrame(context)
- ? context.contentDocument
- : context.document;
- const elem = Util.isString(element)
- ? cont.querySelector(element)
- : element;
+ const cont = Util.isFrame(context) ? context.contentDocument : context.document;
+ const elem = Util.isString(element) ? cont.querySelector(element) : element;
return elem
}
@@ -7753,9 +7388,7 @@
type: 'thru'
};
} else {
- opts.bezier.values = opts.bezier.values.map(it =>
- Util.extractPosition(it)
- );
+ opts.bezier.values = opts.bezier.values.map(it => Util.extractPosition(it));
bezier = opts.bezier;
}
@@ -7891,16 +7524,9 @@
* @param {string} type - The type of the event, see https://developer.mozilla.org/de/docs/Web/Events
* @param {object} opts - An options object. Every paramter of the event object can be overridden, see e.g. https://developer.mozilla.org/de/docs/Web/API/MouseEvent for all the properties.
*/
- static create(
- target,
- position = { x: 0, y: 0 },
- type = 'pointerup',
- opts = {}
- ) {
+ static create(target, position = { x: 0, y: 0 }, type = 'pointerup', opts = {}) {
const rect =
- typeof target.getBoundingClientRect === 'function'
- ? target.getBoundingClientRect()
- : { x: 0, y: 0 };
+ typeof target.getBoundingClientRect === 'function' ? target.getBoundingClientRect() : { x: 0, y: 0 };
// EventInit
const eventOpts = {
@@ -7959,25 +7585,12 @@
if (type.startsWith('pointer')) {
return new PointerEvent(
type,
- Object.assign(
- {},
- eventOpts,
- uiEventOpts,
- mouseEventOpts,
- pointerEventOpts,
- opts
- )
+ Object.assign({}, eventOpts, uiEventOpts, mouseEventOpts, pointerEventOpts, opts)
)
} else if (type.startsWith('touch')) {
- return new TouchEvent(
- type,
- Object.assign({}, eventOpts, uiEventOpts, touchEventOpts, opts)
- )
+ return new TouchEvent(type, Object.assign({}, eventOpts, uiEventOpts, touchEventOpts, opts))
} else {
- return new MouseEvent(
- type,
- Object.assign({}, eventOpts, uiEventOpts, mouseEventOpts, opts)
- )
+ return new MouseEvent(type, Object.assign({}, eventOpts, uiEventOpts, mouseEventOpts, opts))
}
}
}
@@ -7995,8 +7608,7 @@
console.log('Setup Card...', modules);
context.modules = [];
modules.forEach(module => {
- if (module.apply(context))
- context.modules.push(module.constructor.name);
+ if (module.apply(context)) context.modules.push(module.constructor.name);
});
}
@@ -8101,10 +7713,7 @@
event.stopPropagation();
if (callStack) callStack.call(that, ...args);
else {
- console.error(
- 'Could not call callback function ' + attributeVal,
- ...args
- );
+ console.error('Could not call callback function ' + attributeVal, ...args);
}
});
}
@@ -8131,9 +7740,7 @@
/<\s*(a|video|img|image|circle)\s(.*?)(xlink:href|href|src)\s*=\s*["'](\..*?)["']\s*(.*?)>/g,
function(data) {
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);
return tag
}
@@ -8290,16 +7897,13 @@
//Test if meanwhile another popup was registered...
this._getPopup(context) ||
// Or if an highlight was loaded, if the highlight already was closed.
- (highlight !== null &&
- !this._isHighlightActive(context, highlight))
+ (highlight !== null && !this._isHighlightActive(context, highlight))
) {
//.. if so remove the create popup instantly.
popup.remove();
} else {
// Otherwise set the popup regularly.
- let popupParagraphs = popup.element.querySelectorAll(
- '.popupContent > *'
- );
+ let popupParagraphs = popup.element.querySelectorAll('.popupContent > *');
// Remove a design error of naming two adjacent elements popup.
// Todo: fix this properly and remove this code.
@@ -8350,8 +7954,7 @@
* @memberof Card
*/
static _createPopup(context, position, content, options = {}) {
- if (this.debug)
- console.log('Create Popup.', context, position, content, options);
+ if (this.debug) console.log('Create Popup.', context, position, content, options);
let popup = new Popup(
Object.assign(
{
@@ -8444,9 +8047,7 @@
node = event.target;
}
if (local == null) {
- let globalClick = event.center
- ? event.center
- : { x: event.x, y: event.y };
+ let globalClick = event.center ? event.center : { x: event.x, y: event.y };
local = Points.fromPageToNode(context, globalClick);
}
if (this.debug) console.log('loadPopup', event);
@@ -8479,17 +8080,11 @@
// Extract the body from the Popup site.
let parser = new DOMParser();
- 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.
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;
/**
@@ -8511,18 +8106,10 @@
Card._cleanup(context);
if (!isSame) {
- Card._activateCorrespondingHighlights(
- context,
- node,
- parentArticle
- );
+ Card._activateCorrespondingHighlights(context, node, parentArticle);
let callback = (popup, callback) => {
- if (this.debug)
- console.log(
- 'Close popup (Editable = ' + editable + ').',
- popup
- );
+ if (this.debug) console.log('Close popup (Editable = ' + editable + ').', popup);
if (editable) {
let isDirty = mainController.askSaveNode();
if (isDirty)
@@ -8558,8 +8145,7 @@
};
//console.log("onreadystatechange", editable)
if (editable) {
- if (this.debug)
- console.log('pushController', src, popup.insertedNode);
+ if (this.debug) console.log('pushController', src, popup.insertedNode);
mainController.pushController(popup.insertedNode, src);
}
};
@@ -8589,10 +8175,7 @@
}
if (correspondingHighlights.length > 0) {
for (let highlight of correspondingHighlights) {
- if (
- highlight.parentNode &&
- highlight.parentNode.nodeName.toLowerCase() == 'g'
- ) {
+ if (highlight.parentNode && highlight.parentNode.nodeName.toLowerCase() == 'g') {
Highlight.openHighlight(highlight, {
animation: Card.highlightAnimation
});
@@ -8691,10 +8274,7 @@
let matrix = node.getCTM();
let point = svgPoint.matrixTransform(matrix);
- let global = Points.fromNodeToPage(
- node.closest('div'),
- point
- );
+ let global = Points.fromNodeToPage(node.closest('div'), point);
let local = Points.fromPageToNode(context, global);
let overlay = document.createElement('div');
@@ -8740,16 +8320,12 @@
xhr.onreadystatechange = () => {
if (xhr.readyState == 4) {
if (xhr.status == 200 || xhr.status == 0) {
- let html = this.postProcessResponseText(
- xhr.responseText
- );
+ let html = this.postProcessResponseText(xhr.responseText);
let selector = Card.popupHtmlSelector;
let content = { html: html.body.innerHTML, selector };
resolve(content);
} else {
- reject(
- ` Popup request failed (Code: ${xhr.status}): Could not load resource: ${src}`
- );
+ reject(` Popup request failed (Code: ${xhr.status}): Could not load resource: ${src}`);
}
}
};
@@ -8764,8 +8340,7 @@
let editable = Card.isEditable();
if (editable) {
- if (node.classList.contains('zoomable-icon'))
- this._openZoomable(event);
+ if (node.classList.contains('zoomable-icon')) this._openZoomable(event);
return
}
this._openZoomable(event);
@@ -8814,10 +8389,7 @@
globalBottomRight = Points.fromNodeToPage(zoomable, globalBottomRight);
let globalFigurePos = Points.fromNodeToPage(zoomable, { x: 0, y: 0 });
let localFigurePos = Points.fromPageToNode(wrapper, globalFigurePos);
- let relativeBottomRight = Points.fromPageToNode(
- zoomable,
- globalBottomRight
- );
+ let relativeBottomRight = Points.fromPageToNode(zoomable, globalBottomRight);
let width =
relativeBottomRight.x +
@@ -8931,12 +8503,8 @@
});
let zoomedFigStyle = window.getComputedStyle(zoomedFig);
- let borderX =
- parseFloat(zoomedFigStyle.borderLeftWidth) +
- parseFloat(zoomedFigStyle.borderRightWidth);
- let borderY =
- parseFloat(zoomedFigStyle.borderBottomWidth) +
- parseFloat(zoomedFigStyle.borderTopWidth);
+ let borderX = parseFloat(zoomedFigStyle.borderLeftWidth) + parseFloat(zoomedFigStyle.borderRightWidth);
+ let borderY = parseFloat(zoomedFigStyle.borderBottomWidth) + parseFloat(zoomedFigStyle.borderTopWidth);
const scaleFactor = 2;
const transformOrigin = 'bottom right';
@@ -8988,14 +8556,7 @@
.to(zoomCaption, this.animation.fade, {
autoAlpha: 1
});
- } else
- this._openZoomableEditorBehaviour(
- wrapper,
- img,
- zoomable,
- zoomedFig,
- current
- );
+ } else this._openZoomableEditorBehaviour(wrapper, img, zoomable, zoomedFig, current);
}
/**
@@ -9028,13 +8589,7 @@
return parent.querySelector('.icon')
}
- static _openZoomableEditorBehaviour(
- wrapper,
- img,
- zoomable,
- zoomedFig,
- current
- ) {
+ static _openZoomableEditorBehaviour(wrapper, img, zoomable, zoomedFig, current) {
let zoomContainer = document.createElement('div');
let zoomIcon = zoomable.querySelector('.zoom-icon');
zoomContainer.style.position = 'relative';
@@ -9128,8 +8683,7 @@
* @memberof Card
*/
static closeZoomable(context, zoomable, zoomedFig) {
- if (this.debug)
- console.log('Close Zoomable', context, zoomable, zoomedFig);
+ if (this.debug) console.log('Close Zoomable', context, zoomable, zoomedFig);
if (zoomable) {
this._unsetZoomable(context);
@@ -9180,13 +8734,7 @@
* @param {*} src - The src of the expanded element
* @param {*} callback - A callback that is called when the expanded element is closed
*/
- static expandIndexCard(
- card,
- html,
- tagName = 'article',
- src = null,
- callback = null
- ) {
+ static expandIndexCard(card, html, tagName = 'article', src = null, callback = null) {
let editable = Card.isEditable();
let context = this.getContext(card);
@@ -9219,10 +8767,7 @@
let globalPreviewRect = Card._getGlobalRect(card);
let globalIndexCardRect = Card._getGlobalRect(indexbox);
- let localOrigin = Points.fromPageToNode(
- indexbox,
- Rect.getPosition(globalPreviewRect)
- );
+ let localOrigin = Points.fromPageToNode(indexbox, Rect.getPosition(globalPreviewRect));
let scaleX = globalPreviewRect.width / globalIndexCardRect.width;
let scaleY = globalPreviewRect.height / globalIndexCardRect.height;
@@ -9293,15 +8838,12 @@
let cardName = strparts[strparts.length - 1];
strparts = card.className.split(' ');
let cardType = strparts[1];
- let msg =
- 'Card: ' + cardID + ': openTopic: ' + cardType + ', ' + cardName;
+ let msg = 'Card: ' + cardID + ': openTopic: ' + cardType + ', ' + cardName;
console.log('Logging:', msg);
Logging.log(msg);
}
- let desiredBorderBottomWidth = parseInt(
- window.getComputedStyle(titlebar).borderBottomWidth
- );
+ let desiredBorderBottomWidth = parseInt(window.getComputedStyle(titlebar).borderBottomWidth);
TweenLite.to(clone, Card.animation.articleTransition, {
x: -padding,
y: -padding,
@@ -9322,8 +8864,7 @@
});
// Retain the border at same visual thickness.
- titlebar.style.borderBottomWidth =
- desiredBorderBottomWidth / transform.scaleY + 'px';
+ titlebar.style.borderBottomWidth = desiredBorderBottomWidth / transform.scaleY + 'px';
}
});
@@ -9346,13 +8887,7 @@
let cardName = strparts[strparts.length - 1];
strparts = card.className.split(' ');
let cardType = strparts[1];
- let msg =
- 'Card: ' +
- cardID +
- ': closeTopic: ' +
- cardType +
- ', ' +
- cardName;
+ let msg = 'Card: ' + cardID + ': closeTopic: ' + cardType + ', ' + cardName;
console.log('Logging:', msg);
Logging.log(msg);
}
@@ -9419,8 +8954,7 @@
});
// Retain the border at same visual thickness.
- titlebar.style.borderBottomWidth =
- desiredBorderBottomWidth / transform.scaleY + 'px';
+ titlebar.style.borderBottomWidth = desiredBorderBottomWidth / transform.scaleY + 'px';
}
});
};
@@ -9430,9 +8964,7 @@
if (iconClone == null) {
iconClone = clone.querySelector('.cardicon');
- console.warn(
- "Legacy selector. Change it to 'card-icon' and find a more suitable name."
- );
+ console.warn("Legacy selector. Change it to 'card-icon' and find a more suitable name.");
}
if (iconClone.tagName == 'img') {
@@ -9440,11 +8972,7 @@
}
//console.log("ICON: ", iconClone)
iconClone.classList.remove('info');
- iconClone.classList.add(
- 'close',
- 'view-button',
- 'transparent-background'
- );
+ iconClone.classList.add('close', 'view-button', 'transparent-background');
// We append the icon clone to the subcard-content.
// Then it's always on the content and not on the background
@@ -9541,13 +9069,7 @@
// card.insertAdjacentElement('afterbegin', article)
// TweenLite.set(article, { autoAlpha: 0 })
- Card.expandIndexCard(
- card,
- parsedHTML,
- 'article',
- relativeSource,
- saveCallback
- );
+ Card.expandIndexCard(card, parsedHTML, 'article', relativeSource, saveCallback);
}
};
xhr.onerror = () => {
@@ -9584,9 +9106,7 @@
let dom = child.closest('.info-card');
if (!dom) {
dom = child.querySelector('.wrapper');
- console.warn(
- "Change the 'wrapper' class to 'info-card' it's more suitable."
- );
+ console.warn("Change the 'wrapper' class to 'info-card' it's more suitable.");
}
return dom // (dom == null) ? document.body : dom
}
@@ -9734,9 +9254,7 @@
if (indexbox != null) {
// column != null ||
let links = Array.from(indexbox.getElementsByTagName('a'));
- 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 linkRects = links.map(link => {
@@ -9771,16 +9289,9 @@
let closestLinkIndex = distances.indexOf(Math.min(...distances));
let closestLink = links[closestLinkIndex];
- console.log(
- 'finding closest links',
- closestLink,
- closestLink.getClientRects()
- );
+ console.log('finding closest links', closestLink, closestLink.getClientRects());
- if (
- distances[closestLinkIndex] < 44 &&
- closestLink.getAttribute('href')
- ) {
+ if (distances[closestLinkIndex] < 44 && closestLink.getAttribute('href')) {
// Adapt context and local position
let context = this.getContext(closestLink);
let local = Points.fromPageToNode(context, globalClick);
@@ -9941,10 +9452,7 @@
/* eslint-disable no-console */
class CardWrapper extends Object {
- constructor(
- domNode,
- { triggerSVGClicks = true, allowClickDistance = 44 } = {}
- ) {
+ constructor(domNode, { triggerSVGClicks = true, allowClickDistance = 44 } = {}) {
super();
this.domNode = domNode;
this.triggerSVGClicks = triggerSVGClicks;
@@ -9993,7 +9501,7 @@
isClickable(node) {
if (node == null) return false
- // console.log("isClickable", node, this.isClickPrevented(node))
+ // console.log("isClickable", node, this.isClickPrevented(node))
if (this.isClickPrevented(node)) {
return false
}
@@ -10035,9 +9543,7 @@
nearestActive(event) {
let element = this.domNode;
let activeNodes = this.activeNodes();
- 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$1.fromPageToNode(element, globalClick);
let clickRects = activeNodes.map(link => {
@@ -10090,7 +9596,7 @@
}
nodeTapped(node, event) {
- console.log("nodeTapped", node, this.isClickable(node));
+ console.log('nodeTapped', node, this.isClickable(node));
if (this.isClickable(node)) {
this.simulateClick(node, event);
return true
@@ -10101,7 +9607,7 @@
return true
}
for (let [selector, handler] of this.tapHandler.entries()) {
- console.log("nodeTapped", selector);
+ console.log('nodeTapped', selector);
for (let obj of this.domNode.querySelectorAll(selector)) {
if (node == obj) {
handler(event, node);
@@ -10113,10 +9619,9 @@
}
tap(event, calledBy = 'unknown') {
-
if (event.isTrusted) {
let node = this.nearestActive(event);
- console.log("tap", node);
+ console.log('tap', node);
this.nodeTapped(node, event);
/* let node = document.elementFromPoint(event.clientX, event.clientY)
@@ -10137,7 +9642,6 @@
}
/* eslint-disable no-console */
- /* global TweenLite */
let _HighlightEnabled = true;
let _CircleIds = 0;
@@ -10199,10 +9703,7 @@
if (circle.classList.length == 0) {
circle.removeAttribute('class');
}
- if (
- circle.hasAttribute('id') &&
- circle.getAttribute('id').startsWith('@@')
- ) {
+ if (circle.hasAttribute('id') && circle.getAttribute('id').startsWith('@@')) {
circle.removeAttribute('id');
}
circle.removeAttribute('data-svg-origin');
@@ -10217,10 +9718,7 @@
}
}
- static expand(
- obj,
- { scale = 2, duration = 3, stroke = 2, onComplete = null } = {}
- ) {
+ static expand(obj, { scale = 2, duration = 3, stroke = 2, onComplete = null } = {}) {
if (obj == null) return
//console.log("expand")
obj.classList.add('zooming');
@@ -10305,9 +9803,7 @@
this.shrink(maskImage, { stroke });
return
}
- let circles = Array.from(circleGroup.children).filter(
- e => e.tagName == 'circle'
- );
+ let circles = Array.from(circleGroup.children).filter(e => e.tagName == 'circle');
for (let c of circles) {
//console.log("shrinking all circles")
this.shrink(c, { stroke });
@@ -10327,10 +9823,7 @@
return false
}
- static openHighlight(
- target,
- { animation = 0.5, scale = 2, onExpanded = null } = {}
- ) {
+ static openHighlight(target, { animation = 0.5, scale = 2, onExpanded = null } = {}) {
if (Highlight$1._isExpanded(target)) {
console.log('Target is already expanded!');
return
@@ -10344,10 +9837,7 @@
let image = parent.querySelector(imageId);
if (image) {
this._bringToFront(image);
- } else
- console.error(
- 'Could not find corresponding image element.'
- );
+ } else console.error('Could not find corresponding image element.');
} else console.log('Element was no parent:', target);
}
this._bringToFront(target);
@@ -10356,14 +9846,14 @@
return
}
let image = svgRoot.querySelector('image');
-
+
// eslint-disable-next-line no-unused-vars
let [mask, maskImage] = Highlight$1._getSVGMask(target, {
svgRoot,
image
});
let center = Highlight$1._calculateCenterRelativeTo(target, image);
- console.log("_calculateCenterRelativeTo", center);
+ console.log('_calculateCenterRelativeTo', center);
TweenLite.set(maskImage, {
transformOrigin: `${center.x} ${center.y}`
});
@@ -10379,7 +9869,7 @@
}
static toggleHighlight(node) {
- console.log("toggleHighlight", Highlight$1._isExpanded(node));
+ console.log('toggleHighlight', Highlight$1._isExpanded(node));
if (Highlight$1._isExpanded(node)) {
Highlight$1.closeHighlight(node);
} else {
@@ -10392,12 +9882,7 @@
if (target && parent) {
parent.removeChild(target);
parent.appendChild(target);
- } else
- console.error(
- 'Could not bring to front. Either no target or no parent.',
- target,
- parent
- );
+ } else console.error('Could not bring to front. Either no target or no parent.', target, parent);
}
static _getSVGMask(circle, { svgRoot = null, image = null } = {}) {
@@ -10432,10 +9917,7 @@
* @returns
* @memberof Highlight
*/
- static _createSVGMask(
- element,
- { svgRoot = null, image = null, id = null } = {}
- ) {
+ static _createSVGMask(element, { svgRoot = null, image = null, id = null } = {}) {
// We can fetch these values here, but it's more efficient to
// simply pass them in, as it's likely they were already retrieved beforehand.
if (svgRoot == null) svgRoot = element.closest('svg');
@@ -10506,18 +9988,8 @@
return target.classList.contains(Highlight$1.expandedClass)
}
- static _setExpanded(target) {
- target.classList.add(Highlight$1.expandedClass);
- }
-
- static _notExpanded(target) {
- target.classList.remove(Highlight$1.expandedClass);
- }
-
static closeHighlight(target, { animation = 0.5 } = {}) {
-
- Highlight$1._notExpanded(target);
-
+ target.classList.remove(Highlight$1.expandedClass);
// eslint-disable-next-line no-unused-vars
let [mask, maskImage] = Highlight$1._getSVGMask(target);
console.log('Close Highlight', maskImage);
@@ -10615,11 +10087,7 @@
* @returns
* @memberof Card
*/
- static createCardScatter(
- html,
- scatterContainer,
- { basePath = './', modules = [] } = {}
- ) {
+ static createCardScatter(html, scatterContainer, { basePath = './', modules = [] } = {}) {
let element = document.createElement('div');
scatterContainer.element.appendChild(element);
@@ -10646,11 +10114,7 @@
* @returns
* @memberof CardScatter
*/
- static loadAndCreateScatterCard(
- scatterContainer,
- item,
- { basePath = '../', modules = [], onClose = null } = {}
- ) {
+ static loadAndCreateScatterCard(scatterContainer, item, { basePath = '../', modules = [], onClose = null } = {}) {
console.log(basePath);
return new Promise((resolve, reject) => {
let url = basePath + '/' + item + '/index.html';
@@ -10658,14 +10122,10 @@
this.loadHTML(url)
.then(html => {
console.log('Received', html);
- let element = this.createCardScatter(
- html,
- scatterContainer,
- {
- basePath,
- modules
- }
- );
+ let element = this.createCardScatter(html, scatterContainer, {
+ basePath,
+ modules
+ });
if (onClose) this.addOnCloseListener(element, onClose);
resolve(element);
})
@@ -10740,10 +10200,7 @@
}
_getVerificationFunctions(context) {
- return [
- this._verifyContext.bind(this, context),
- this._verifyRequirements.bind(this, context)
- ]
+ return [this._verifyContext.bind(this, context), this._verifyRequirements.bind(this, context)]
}
_verifyContext(context) {
@@ -10831,11 +10288,7 @@
constructor(
wrapperSelector,
overlaySelector = null,
- {
- zoomAnimationDuration = 0.4,
- fadeAnimationDuration = 0.4,
- interactionType = 'tap'
- } = {}
+ { zoomAnimationDuration = 0.4, fadeAnimationDuration = 0.4, interactionType = 'tap' } = {}
) {
super();
this.wrapperSelector = wrapperSelector;
@@ -10852,14 +10305,7 @@
_getVerificationFunctions(context) {
let arr = super._getVerificationFunctions(context);
- let funcs = [
- this._verifyElementsExist.bind(
- this,
- context,
- this.wrapperSelector,
- this.overlaySelector
- )
- ];
+ let funcs = [this._verifyElementsExist.bind(this, context, this.wrapperSelector, this.overlaySelector)];
return arr.concat(funcs)
}
@@ -10944,9 +10390,7 @@
* The minor side should not exceed the height of the context window.
*/
const maxMinorSize =
- context.offsetHeight -
- 2 * parseInt(headerStlye.paddingTop) -
- 2 * parseInt(headerStlye.marginTop);
+ context.offsetHeight - 2 * parseInt(headerStlye.paddingTop) - 2 * parseInt(headerStlye.marginTop);
const max = {
width: context.offsetWidth * maxFillRatio,
@@ -10976,10 +10420,7 @@
// const minorImageSize = getImageSize(minorSide)
let ratio = getImageSize(minorSide) / getImageSize(majorSide);
- let size =
- majorImageSize > max[majorSide.name]
- ? max[majorSide.name]
- : majorImageSize;
+ let size = majorImageSize > max[majorSide.name] ? max[majorSide.name] : majorImageSize;
if (size * ratio > maxMinorSize) {
size = maxMinorSize / ratio;
@@ -10990,10 +10431,7 @@
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 = {
x: 0,
@@ -11004,13 +10442,9 @@
targetDimensions[minorSide.name] = size * ratio;
targetOffset[majorSide.axis] =
- (context['offset' + capitalize(majorSide.name)] -
- targetDimensions[majorSide.name]) /
- 2;
+ (context['offset' + capitalize(majorSide.name)] - targetDimensions[majorSide.name]) / 2;
targetOffset[minorSide.axis] =
- (context['offset' + capitalize(minorSide.name)] -
- targetDimensions[minorSide.name]) /
- 2;
+ (context['offset' + capitalize(minorSide.name)] - targetDimensions[minorSide.name]) / 2;
overlay.appendChild(imageWrapper);
@@ -11050,18 +10484,14 @@
}
getBorderHeight(style) {
- const borderWidth =
- parseInt(style.borderTopWidth) + parseInt(style.borderBottomWidth);
- const padding =
- parseInt(style.paddingTop) + parseInt(style.paddingBottom);
+ const borderWidth = parseInt(style.borderTopWidth) + parseInt(style.borderBottomWidth);
+ const padding = parseInt(style.paddingTop) + parseInt(style.paddingBottom);
return parseInt(style.width) + borderWidth + padding
}
getBorderWidth(style) {
- const borderWidth =
- parseInt(style.borderLeftWidth) + parseInt(style.borderRightWidth);
- const padding =
- parseInt(style.paddingLeft) + parseInt(style.paddingRight);
+ const borderWidth = parseInt(style.borderLeftWidth) + parseInt(style.borderRightWidth);
+ const padding = parseInt(style.paddingLeft) + parseInt(style.paddingRight);
return parseInt(style.width) + borderWidth + padding
}
@@ -11096,16 +10526,12 @@
_doesParentExist(context, parent) {
if (parent == null) return true
let valid = context.querySelector(parent) != null;
- if (!valid)
- console.error('Could not find parent on context.', context, parent);
+ if (!valid) console.error('Could not find parent on context.', context, parent);
return valid
}
append(context) {
- parent =
- this.parent == null
- ? context
- : context.querySelector(this.parent).appendChild(container);
+ parent = this.parent == null ? context : context.querySelector(this.parent).appendChild(container);
let container = document.createElement('div');
container.className = this.className;
parent.appendChild(container);
@@ -11205,15 +10631,8 @@
utterance.onboundary = () => {
console.log('onboundary', node.innerText);
- if (
- this.currentText.substring(0, 5) !=
- node.innerText.substring(0, 5)
- ) {
- console.log(
- 'text for speech synth changed!',
- this.currentText,
- node.innerText
- );
+ if (this.currentText.substring(0, 5) != node.innerText.substring(0, 5)) {
+ console.log('text for speech synth changed!', this.currentText, node.innerText);
this._stop();
}
};
diff --git a/dist/iwmlib.pixi.js b/dist/iwmlib.pixi.js
index 96f3428..5a7432c 100644
--- a/dist/iwmlib.pixi.js
+++ b/dist/iwmlib.pixi.js
@@ -83,8 +83,7 @@
* is used for large actived text.
*/
constructor(opts = {}) {
- const colorPrimary =
- opts.primaryColor != null ? opts.primaryColor : 0x5ec7f8; // blue
+ const colorPrimary = opts.primaryColor != null ? opts.primaryColor : 0x5ec7f8; // blue
const color1 = opts.color1 != null ? opts.color1 : 0x282828; // black
const color2 = opts.color2 != null ? opts.color2 : 0xf6f6f6; // white
@@ -418,10 +417,7 @@
//-----------------
if (this.opts.background) {
this.background.clear();
- this.background.beginFill(
- this.opts.backgroundFill,
- this.opts.backgroundFillAlpha
- );
+ this.background.beginFill(this.opts.backgroundFill, this.opts.backgroundFillAlpha);
this.background.drawRect(0, 0, width, height);
this.background.endFill();
}
@@ -465,20 +461,10 @@
const wantedWidth = this.opts.width || width - 2 * this.opts.margin;
const wantedHeight = this.opts.height;
- this.bar.lineStyle(
- this.opts.strokeWidth,
- this.opts.stroke,
- this.opts.strokeAlpha
- );
+ this.bar.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha);
this.bar.beginFill(this.opts.fill, this.opts.fillAlpha);
if (this.radius > 1) {
- this.bar.drawRoundedRect(
- 0,
- 0,
- wantedWidth,
- wantedHeight,
- this.radius
- );
+ this.bar.drawRoundedRect(0, 0, wantedWidth, wantedHeight, this.radius);
} else {
this.bar.drawRect(0, 0, wantedWidth, wantedHeight);
}
@@ -502,24 +488,11 @@
const barActiveWidth = (wantedWidth * this._progress) / 100;
- this.barActive.lineStyle(
- this.opts.strokeActiveWidth,
- this.opts.strokeActive,
- this.opts.strokeActiveAlpha
- );
- this.barActive.beginFill(
- this.opts.fillActive,
- this.opts.fillActiveAlpha
- );
+ this.barActive.lineStyle(this.opts.strokeActiveWidth, this.opts.strokeActive, this.opts.strokeActiveAlpha);
+ this.barActive.beginFill(this.opts.fillActive, this.opts.fillActiveAlpha);
if (barActiveWidth > 0) {
if (this.radius > 1) {
- this.barActive.drawRoundedRect(
- 0,
- 0,
- barActiveWidth,
- wantedHeight,
- this.radius
- );
+ this.barActive.drawRoundedRect(0, 0, barActiveWidth, wantedHeight, this.radius);
} else {
this.barActive.drawRect(0, 0, barActiveWidth, wantedHeight);
}
@@ -674,12 +647,10 @@
if (this.opts.maxWidth) {
this.headerStyle.wordWrap = true;
- this.headerStyle.wordWrapWidth =
- this.opts.maxWidth - 2 * this.opts.padding;
+ this.headerStyle.wordWrapWidth = this.opts.maxWidth - 2 * this.opts.padding;
this.textStyle.wordWrap = true;
- this.textStyle.wordWrapWidth =
- this.opts.maxWidth - 2 * this.opts.padding;
+ this.textStyle.wordWrapWidth = this.opts.maxWidth - 2 * this.opts.padding;
}
this.alpha = 0;
@@ -722,10 +693,7 @@
if (this.opts.header instanceof PIXI.Text) {
header = this.opts.header;
} else if (typeof this.opts.header === 'number') {
- header = new PIXI.Text(
- this.opts.header.toString(),
- this.headerStyle
- );
+ header = new PIXI.Text(this.opts.header.toString(), this.headerStyle);
} else {
header = new PIXI.Text(this.opts.header, this.headerStyle);
}
@@ -752,10 +720,7 @@
if (typeof this.opts.content === 'string') {
content = new PIXI.Text(this.opts.content, this.textStyle);
} else if (typeof this.opts.content === 'number') {
- content = new PIXI.Text(
- this.opts.content.toString(),
- this.textStyle
- );
+ content = new PIXI.Text(this.opts.content.toString(), this.textStyle);
} else {
content = this.opts.content;
}
@@ -826,31 +791,16 @@
* @return {AbstractPopup} A reference to the popup for chaining.
*/
draw() {
- const square =
- Math.round(this.wantedWidth) === Math.round(this.wantedHeight);
+ const square = Math.round(this.wantedWidth) === Math.round(this.wantedHeight);
const diameter = Math.round(this.opts.radius * 2);
this.clear();
- this.lineStyle(
- this.opts.strokeWidth,
- this.opts.stroke,
- this.opts.strokeAlpha
- );
+ this.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha);
this.beginFill(this.opts.fill, this.opts.fillAlpha);
if (square && diameter === this.wantedWidth) {
- this.drawCircle(
- this.wantedWidth / 2,
- this.wantedHeight / 2,
- this.opts.radius
- );
+ this.drawCircle(this.wantedWidth / 2, this.wantedHeight / 2, this.opts.radius);
} else {
- this.drawRoundedRect(
- 0,
- 0,
- this.wantedWidth,
- this.wantedHeight,
- this.opts.radius
- );
+ this.drawRoundedRect(0, 0, this.wantedWidth, this.wantedHeight, this.opts.radius);
}
this.endFill();
@@ -1201,11 +1151,7 @@
content: this.opts.tooltip
});
} else {
- this.opts.tooltip = Object.assign(
- {},
- { object: this },
- this.opts.tooltip
- );
+ this.opts.tooltip = Object.assign({}, { object: this }, this.opts.tooltip);
this.tooltip = new Tooltip(this.opts.tooltip);
}
}
@@ -1222,12 +1168,8 @@
layout() {
super.layout();
- this.content.x =
- this.width / 2 - this.content.width / 2 - this.opts.strokeWidth / 2;
- this.content.y =
- this.height / 2 -
- this.content.height / 2 -
- this.opts.strokeWidth / 2;
+ this.content.x = this.width / 2 - this.content.width / 2 - this.opts.strokeWidth / 2;
+ this.content.y = this.height / 2 - this.content.height / 2 - this.opts.strokeWidth / 2;
return this
}
@@ -1273,8 +1215,7 @@
// be this is a bug or a security feature. Workaround: we introduce
// a mouseDownSubstitute attribute that can be assigned to cloned
// events after instantiation.
- if (Reflect.has(event, 'mouseDownSubstitute'))
- return event.mouseDownSubstitute
+ if (Reflect.has(event, 'mouseDownSubstitute')) return event.mouseDownSubstitute
return event.buttons || event.which
}
@@ -1309,15 +1250,7 @@
for (let i = 0; i < targets.length; i++) {
let t = targets[i];
let touchTarget = document.elementFromPoint(t.pageX, t.pageY);
- let touch = new Touch(
- undefined,
- touchTarget,
- t.identifier,
- t.pageX,
- t.pageY,
- t.screenX,
- t.screenY
- );
+ let touch = new Touch(undefined, touchTarget, t.identifier, t.pageX, t.pageY, t.screenX, t.screenY);
touches.push(touch);
}
return new TouchList(...touches)
@@ -1401,8 +1334,7 @@
let result = event.type;
let selector = this.selector(event.target);
result += ' selector: ' + selector;
- if (event.target != document.querySelector(selector))
- console.log('Cannot resolve', selector);
+ if (event.target != document.querySelector(selector)) console.log('Cannot resolve', selector);
let keys = ['layerX', 'layerY', 'pageX', 'pageY', 'clientX', 'clientY'];
for (let key of keys) {
try {
@@ -1490,1671 +1422,7 @@
Events$1.simulated = [];
Events$1.simulationRunning = false;
- /* global PIXI TweenLite */
-
- /**
- * Callback for the button action.
- *
- * @callback actionCallback
- * @param {object} event - The event object.
- * @param {Button} button - A reference to the button (also this refers to the button).
- */
-
- /**
- * Callback for the button beforeAction.
- *
- * @callback beforeActionCallback
- * @param {object} event - The event object.
- * @param {Button} button - A reference to the button (also this refers to the button).
- */
-
- /**
- * Callback for the button afterAction.
- *
- * @callback afterActionCallback
- * @param {object} event - The event object.
- * @param {Button} button - A reference to the button (also this refers to the button).
- */
-
- /**
- * Class that represents a PixiJS Button.
- *
- * @example
- * // Create the button
- * const button = new Button({
- * label: 'My Button',
- * action: () => console.log('Button was clicked')
- * })
- *
- * // Add the button to a DisplayObject
- * app.scene.addChild(button)
- *
- * @class
- * @extends PIXI.Container
- * @see {@link http://pixijs.download/dev/docs/PIXI.Container.html|PIXI.Container}
- * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/button.html|DocTest}
- */
- class Button extends PIXI.Container {
- /**
- * Creates an instance of a Button.
- *
- * @constructor
- * @param {object} [opts] - An options object to specify to style and behaviour of the button.
- * @param {number} [opts.id=auto generated] - The id of the button.
- * @param {string} [opts.label] - The label of the button.
- * @param {number} [opts.x=0] - The x position of the button. Can be also set after creation with button.x = 0.
- * @param {number} [opts.y=0] - The y position of the button. Can be also set after creation with button.y = 0.
- * @param {string|Theme} [opts.theme=dark] - The theme to use for this button. Possible values are dark, light, red
- * or a Theme object.
- * @param {number} [opts.minWidth=44] - The minimum width of the button.
- * @param {number} [opts.minHeight=44] - The minimum height of the button.
- * @param {number} [opts.padding=Theme.padding] - The inner spacing (distance from icon and/or label) to the border.
- * @param {string|PIXI.DisplayObject} [opts.icon] - The icon of the button. Can be a predefined one, an URL or an PIXI.DisplayObject.
- * @param {string|PIXI.DisplayObject} [opts.iconActive=icon] - The icon of the button when activated. Can be a predefined one, an URL or an PIXI.DisplayObject.
- * @param {string} [opts.iconPosition=left] - The position of the icon in relation to the label. Can be left or right.
- * @param {number} [opts.iconColor=Theme.iconColor] - The color of the icon (set by the tint property) as a hex value.
- * @param {number} [opts.iconColorActive=Theme.iconColorActive] - The color of the icon when activated.
- * @param {number} [opts.fill=Theme.fill] - The color of the button background as a hex value.
- * @param {number} [opts.fillAlpha=Theme.fillAlpha] - The alpha value of the background.
- * @param {number} [opts.fillActive=Theme.fillActive] - The color of the button background when activated.
- * @param {number} [opts.fillActiveAlpha=Theme.fillActiveAlpha] - The alpha value of the background when activated.
- * @param {number} [opts.stroke=Theme.stroke] - The color of the border as a hex value.
- * @param {number} [opts.strokeWidth=Theme.strokeWidth] - The width of the border in pixel.
- * @param {number} [opts.strokeAlpha=Theme.strokeAlpha] - The alpha value of the border.
- * @param {number} [opts.strokeActive=Theme.strokeActive] - The color of the border when activated.
- * @param {number} [opts.strokeActiveWidth=Theme.strokeActiveWidth] - The width of the border in pixel when activated.
- * @param {number} [opts.strokeActiveAlpha=Theme.strokeActiveAlpha] - The alpha value of the border when activated.
- * @param {object} [opts.textStyle=Theme.textStyle] - A textstyle object for the styling of the label. See PIXI.TextStyle
- * for possible options.
- * @param {number} [opts.textStyleActive=Theme.textStyleActive] - A textstyle object for the styling of the label when the
- * button is activated. See PIXI.TextStyle for possible options.
- * @param {string} [opts.style=default] - A shortcut for styling options. Possible values are default, link.
- * @param {number} [opts.radius=Theme.radius] - The radius of the four corners of the button (which is a rounded rectangle).
- * @param {boolean} [opts.disabled=false] - Is the button disabled? When disabled, the button has a lower alpha value
- * and cannot be clicked (interactive is set to false).
- * @param {boolean} [opts.active=false] - Is the button initially active?
- * @param {actionCallback} [opts.action] - Executed when the button was triggered (by pointerup).
- * @param {beforeActionCallback} [opts.beforeAction] - Executed before the main action is triggered.
- * @param {afterActionCallback} [opts.afterAction] - Executed after the main action was triggered.
- * @param {string} [opts.type=default] - The type of the button. Can be default or checkbox. When the type is
- * checkbox, the active state is toggled automatically.
- * @param {string} [opts.align=center] - The horizontal position of the label and the icon. Possible values are
- * left, center and right. Only affects the style when the minWidth is bigger than the width of the icon and label.
- * @param {string} [opts.verticalAlign=middle] - The vertical position of the label and the icon. Possible values are
- * top, middle and button. Only affects the style when the minHeight is bigger than the height of the icon and label.
- * @param {string|object} [opts.tooltip] - A string for the label of the tooltip or an object to configure the tooltip
- * to display.
- * @param {string|object} [opts.badge] - A string for the label of the badge or an object to configure the badge to display.
- * If the parameter is an object, all badge options can be set plus the following:
- * @param {string} [opts.badge.align=right] - The horizontal alignment of the badge. Possible values: left, center, right
- * @param {string} [opts.badge.verticalAlign=top] - The vertical alignment of the badge. Possible values: top, middle, bottom
- * @param {number} [opts.badge.offsetLeft=0] - The horizontal shift of the badge.
- * @param {number} [opts.badge.offsetTop=0] - The vertical shift of the badge.
- * @param {boolean} [opts.visible=true] - Is the button initially visible (property visible)?
- */
- constructor(opts = {}) {
- super();
-
- const theme = Theme.fromString(opts.theme);
- this.theme = theme;
-
- this.opts = Object.assign(
- {},
- {
- id: PIXI.utils.uid(),
- label: null,
- x: 0,
- y: 0,
- minWidth: 44,
- minHeight: 44,
- padding: theme.padding,
- icon: undefined,
- iconActive: undefined,
- iconPosition: 'left',
- iconColor: theme.iconColor,
- iconColorActive: theme.iconColorActive,
- fill: theme.fill,
- fillAlpha: theme.fillAlpha,
- fillActive: theme.fillActive,
- fillActiveAlpha: theme.fillActiveAlpha,
- stroke: theme.stroke,
- strokeWidth: theme.strokeWidth,
- strokeAlpha: theme.strokeAlpha,
- strokeActive: theme.strokeActive,
- strokeActiveWidth: theme.strokeActiveWidth,
- strokeActiveAlpha: theme.strokeActiveAlpha,
- textStyle: theme.textStyle,
- textStyleActive: theme.textStyleActive,
- style: 'default',
- radius: theme.radius,
- disabled: false,
- active: false,
- action: null,
- beforeAction: null,
- afterAction: null,
- type: 'default',
- align: 'center',
- verticalAlign: 'middle',
- tooltip: null,
- badge: null,
- visible: true
- },
- opts
- );
-
- this.id = this.opts.id;
-
- if (
- typeof this.opts.icon === 'undefined' &&
- typeof this.opts.iconActive !== 'undefined'
- ) {
- this.opts.icon = this.opts.iconActive;
- } else if (
- typeof this.opts.icon !== 'undefined' &&
- typeof this.opts.iconActive === 'undefined'
- ) {
- this.opts.iconActive = this.opts.icon;
- }
-
- if (this.opts.style === 'link') {
- Object.assign(this.opts, {
- strokeAlpha: 0,
- strokeActiveAlpha: 0,
- fillAlpha: 0,
- fillActiveAlpha: 0
- });
- }
-
- this._active = null;
- this._disabled = null;
-
- this.iconInactive = null;
- this.iconActive = null;
- this.text = null;
-
- this.button = null;
- this.content = null;
-
- this.tooltip = null;
- this.badge = null;
-
- this.visible = this.opts.visible;
-
- // setup
- //-----------------
- this.setup();
- }
-
- /**
- * Captures an event to inform InteractionMapper about processed events.
- *
- * @param {event|PIXI.InteractionEvent} event - The PIXI event to capture.
- */
- capture(event) {
- Events$1.capturedBy(event.data.originalEvent, this);
- }
-
- /**
- * Creates children and instantiates everything.
- *
- * @private
- * @return {Button} A reference to the button for chaining.
- */
- setup() {
- // Button
- //-----------------
- let button = new PIXI.Graphics();
- this.button = button;
- this.addChild(button);
-
- // Content
- //-----------------
- let content = new PIXI.Container();
- this.content = content;
- this.addChild(content);
-
- // Text
- //-----------------
- if (this.opts.label) {
- this.text = new PIXI.Text(this.opts.label, this.opts.textStyle);
- }
-
- // Icon
- //-----------------
- if (this.opts.icon) {
- this.iconInactive = this.loadIcon(
- this.opts.icon,
- this.opts.iconColor
- );
- }
-
- if (this.opts.iconActive) {
- this.iconActive = this.loadIcon(
- this.opts.iconActive,
- this.opts.iconColorActive
- );
- }
-
- // interaction
- //-----------------
- this.button.on('pointerover', e => {
- this.capture(e);
- TweenLite.to([this.button, this.content], this.theme.fast, {
- alpha: 0.83,
- overwrite: 'none'
- });
- });
-
- this.button.on('pointermove', e => {
- this.capture(e);
- });
-
- this.button.on('pointerout', e => {
- this.capture(e);
- TweenLite.to([this.button, this.content], this.theme.fast, {
- alpha: 1,
- overwrite: 'none'
- });
- });
-
- // eslint-disable-next-line no-unused-vars
- this.button.on('pointerdown', e => {
- //this.capture(e)
- TweenLite.to([this.button, this.content], this.theme.fast, {
- alpha: 0.7,
- overwrite: 'none'
- });
- });
-
- this.button.on('pointerup', e => {
- this.capture(e);
- if (this.opts.beforeAction) {
- this.opts.beforeAction.call(this, e, this);
- }
-
- if (this.opts.action) {
- this.opts.action.call(this, e, this);
- }
-
- TweenLite.to([this.button, this.content], this.theme.fast, {
- alpha: 0.83,
- overwrite: 'none'
- });
-
- if (this.opts.type === 'checkbox') {
- this.active = !this.active;
- }
-
- if (this.opts.afterAction) {
- this.opts.afterAction.call(this, e, this);
- }
- });
-
- // disabled
- //-----------------
- this.disabled = this.opts.disabled;
-
- // active
- //-----------------
- this.active = this.opts.active; // calls .layout()
-
- // tooltip
- //-----------------
- if (this.opts.tooltip) {
- if (typeof this.opts.tooltip === 'string') {
- this.tooltip = new Tooltip({
- object: this,
- content: this.opts.tooltip
- });
- } else {
- this.opts.tooltip = Object.assign(
- {},
- { object: this },
- this.opts.tooltip
- );
- this.tooltip = new Tooltip(this.opts.tooltip);
- }
- }
-
- // badge
- //-----------------
- if (this.opts.badge) {
- let opts = Object.assign(
- {},
- {
- align: 'right',
- verticalAlign: 'top',
- offsetLeft: 0,
- offsetTop: 0
- }
- );
- if (typeof this.opts.badge === 'string') {
- opts = Object.assign(opts, { content: this.opts.badge });
- } else {
- opts = Object.assign(opts, this.opts.badge);
- }
-
- const badge = new Badge(opts);
-
- switch (opts.align) {
- case 'left':
- badge.x = this.x - badge.width / 2 + opts.offsetLeft;
- break
- case 'center':
- badge.x =
- this.x +
- this.width / 2 -
- badge.width / 2 +
- opts.offsetLeft;
- break
- case 'right':
- badge.x =
- this.x + this.width - badge.width / 2 + opts.offsetLeft;
- }
-
- switch (opts.verticalAlign) {
- case 'top':
- badge.y = this.y - badge.height / 2 + opts.offsetTop;
- break
- case 'middle':
- badge.y =
- this.y +
- this.height / 2 -
- badge.height / 2 +
- opts.offsetTop;
- break
- case 'bottom':
- badge.y =
- this.y + this.height - badge.height / 2 + opts.offsetTop;
- }
-
- this.addChild(badge);
-
- this.badge = badge;
- }
-
- // set position
- //-----------------
- this.position.set(this.opts.x, this.opts.y);
-
- return this
- }
-
- /**
- * Should be called to refresh the layout of the button. Can be used after resizing.
- *
- * @return {Button} A reference to the button for chaining.
- */
- layout() {
- // Clear content
- //-----------------
- this.removeChild(this.content);
- this.content = new PIXI.Container();
- this.addChild(this.content);
-
- // Set the icon
- //-----------------
- let icon = null;
-
- if (!this.active && this.iconInactive) {
- icon = this.iconInactive;
- } else if (this.active && this.iconActive) {
- icon = this.iconActive;
- }
-
- // Set the text
- //-----------------
- if (this.text) {
- this.text.position.set(0, 0);
- }
-
- // Width and Height
- //-----------------
- let width = 0;
- if (icon && this.text) {
- width = icon.width + this.text.width + 3 * this.opts.padding;
- } else if (icon) {
- width = icon.width + 2 * this.opts.padding;
- } else if (this.text) {
- width = this.text.width + 2 * this.opts.padding;
- }
-
- if (width < this.opts.minWidth) {
- width = this.opts.minWidth;
- }
-
- let height = 0;
- if (icon) {
- height = icon.height + 2 * this.opts.padding;
- } else if (this.text) {
- height = this.text.height + 2 * this.opts.padding;
- }
-
- if (height < this.opts.minHeight) {
- height = this.opts.minHeight;
- }
-
- this._width = width;
- this._height = height;
-
- // Position icon and text
- //-----------------
- if (icon && this.text) {
- if (this.opts.iconPosition === 'right') {
- icon.x = this.text.width + this.opts.padding;
- } else {
- this.text.x = icon.width + this.opts.padding;
- }
- this.content.addChild(icon, this.text);
- } else if (icon) {
- this.content.addChild(icon);
- } else if (this.text) {
- this.content.addChild(this.text);
- }
-
- this.layoutInnerContent();
- this.layoutContent();
-
- this.icon = icon;
-
- // draw
- //-----------------
- this.draw();
-
- return this
- }
-
- /**
- * Calculates the positions of the content children (icon and/or text).
- *
- * @private
- * @return {Button} A reference to the button for chaining.
- */
- layoutInnerContent() {
- for (let child of this.content.children) {
- switch (this.opts.verticalAlign) {
- case 'top':
- child.y = 0;
- break
- case 'middle':
- child.y = this.content.height / 2 - child.height / 2;
- break
- case 'bottom':
- child.y = this.content.height - child.height;
- break
- }
- }
-
- return this
- }
-
- /**
- * Sets the horizontal and vertical position of the content.
- * Uses the option keys "align" and "verticalAlign".
- *
- * @private
- * @return {Button} A reference to the button for chaining.
- */
- layoutContent() {
- switch (this.opts.align) {
- case 'left':
- this.content.x = this.opts.padding;
- break
- case 'center':
- this.content.x = (this._width - this.content.width) / 2;
- break
- case 'right':
- this.content.x =
- this._width - this.opts.padding - this.content.width;
- break
- }
-
- switch (this.opts.verticalAlign) {
- case 'top':
- this.content.y = this.opts.padding;
- break
- case 'middle':
- this.content.y = (this._height - this.content.height) / 2;
- break
- case 'bottom':
- this.content.y =
- this._height - this.opts.padding - this.content.height;
- break
- }
-
- return this
- }
-
- /**
- * Draws the canvas.
- *
- * @private
- * @return {Button} A reference to the button for chaining.
- */
- draw() {
- this.button.clear();
- if (this.active) {
- this.button.lineStyle(
- this.opts.strokeActiveWidth,
- this.opts.strokeActive,
- this.opts.strokeActiveAlpha
- );
- this.button.beginFill(
- this.opts.fillActive,
- this.opts.fillActiveAlpha
- );
- } else {
- this.button.lineStyle(
- this.opts.strokeWidth,
- this.opts.stroke,
- this.opts.strokeAlpha
- );
- this.button.beginFill(this.opts.fill, this.opts.fillAlpha);
- }
- this.button.drawRoundedRect(
- 0,
- 0,
- this._width,
- this._height,
- this.opts.radius
- );
- this.button.endFill();
-
- return this
- }
-
- /**
- * Gets or sets the active state.
- *
- * @member {boolean}
- */
- get active() {
- return this._active
- }
- set active(value) {
- this._active = value;
-
- if (this._active) {
- if (this.text) {
- this.text.style = this.opts.textStyleActive;
- }
- } else {
- if (this.text) {
- this.text.style = this.opts.textStyle;
- }
- }
-
- this.layout();
- }
-
- /**
- * Gets or sets the disabled state. When disabled, the button cannot be clicked.
- *
- * @member {boolean}
- */
- get disabled() {
- return this._disabled
- }
- set disabled(value) {
- this._disabled = value;
-
- if (this._disabled) {
- this.button.interactive = false;
- this.button.buttonMode = false;
- this.button.alpha = 0.5;
- if (this.icon) {
- this.icon.alpha = 0.5;
- }
- if (this.text) {
- this.text.alpha = 0.5;
- }
- } else {
- this.button.interactive = true;
- this.button.buttonMode = true;
- this.button.alpha = 1;
- if (this.icon) {
- this.icon.alpha = 1;
- }
- if (this.text) {
- this.text.alpha = 1;
- }
- }
- }
-
- /**
- * Shows the button (sets his alpha values to 1).
- *
- * @return {Button} A reference to the button for chaining.
- */
- show() {
- this.opts.strokeAlpha = 1;
- this.opts.strokeActiveAlpha = 1;
- this.opts.fillAlpha = 1;
- this.opts.fillActiveAlpha = 1;
-
- this.layout();
-
- return this
- }
-
- /**
- * Hides the button (sets his alpha values to 0).
- *
- * @return {Button} A reference to the button for chaining.
- */
- hide() {
- this.opts.strokeAlpha = 0;
- this.opts.strokeActiveAlpha = 0;
- this.opts.fillAlpha = 0;
- this.opts.fillActiveAlpha = 0;
-
- this.layout();
-
- return this
- }
-
- /**
- * Loads an icon
- *
- * @private
- * @param {string|PIXI.DisplayObject} icon - The icon to load.
- * @param {number} color - The color of the icon (if not an PIXI.DisplayObject).
- * @return {PIXI.DisplayObject} Return the icon as an PIXI.DisplayObject.
- */
- loadIcon(icon, color) {
- let displayObject = null;
-
- if (icon instanceof PIXI.DisplayObject) {
- displayObject = icon;
- } else {
- let size = 17;
- if (this.text) {
- size = this.text.height;
- } else if (this.opts.minHeight) {
- size = this.opts.minHeight - 2 * this.opts.padding;
- }
-
- const url = Button.iconIsUrl(icon)
- ? icon
- : `../../assets/icons/${icon}.png`;
- const iconTexture = PIXI.Texture.fromImage(url, true);
-
- const sprite = new PIXI.Sprite(iconTexture);
- sprite.tint = color;
- sprite.width = size;
- sprite.height = size;
-
- displayObject = sprite;
- }
-
- return displayObject
- }
-
- /**
- * Tests if an icon string is an url.
- *
- * @private
- * @static
- * @param {string} url - The url to test.
- * @return {boolean} true if the url is an url to an image.
- */
- static iconIsUrl(url) {
- return /\.(png|svg|gif|jpg|jpeg|tif|tiff)$/i.test(url)
- }
-
- /**
- * Gets or sets the color of the current icon (no matter how the status is). Changing the color, changes
- * the tint property of the icon sprite.
- *
- * @member {number}
- */
- get iconColor() {
- return this.icon ? this.icon.tint : null
- }
- set iconColor(value) {
- if (this.icon) {
- this.icon.tint = value;
- }
- }
- }
-
- /**
- * Class that represents a PixiJS ButtonGroup.
- *
- * @example
- * // Create the button group
- * const buttonGroup = new ButtonGroup({
- * buttons: [
- * {label: 'Button 1', action: event => console.log(event)},
- * {label: 'Button 2', action: event => console.log(event)},
- * {label: 'Button 3', action: event => console.log(event)}
- * ],
- * minWidth: 100
- * })
- *
- * // Add the button group to a DisplayObject
- * app.scene.addChild(buttonGroup)
- *
- * @class
- * @extends PIXI.Graphics
- * @see {@link http://pixijs.download/dev/docs/PIXI.Graphics.html|PIXI.Graphics}
- * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/buttongroup.html|DocTest}
- */
- class ButtonGroup extends PIXI.Graphics {
- /**
- * Creates an instance of a ButtonGroup.
- *
- * @constructor
- * @param {object} [opts] - An options object to specify to style and behaviour of the button group.
- * @param {number} [opts.id=auto generated] - The id of the button group.
- * @param {number} [opts.x=0] - The x position of the button group. Can be also set after creation with buttonGroup.x = 0.
- * @param {number} [opts.y=0] - The y position of the button group. Can be also set after creation with buttonGroup.y = 0.
- * @param {object[]} [opts.buttons=[]] - An array of the buttons of the button group. One item of the array (one object)
- * can have exactly the same properties as an Button object when instantiating a Button. If a property of the button group
- * conflicts with a property of a button object, the value from the button object will be used.
- * @param {string|Theme=} [opts.theme=dark] - The theme to use for this button group. Possible values are dark, light, red
- * or a Theme object.
- * @param {number} [opts.minWidth=44] - Button: The minimum width of one button.
- * @param {number} [opts.minHeight=44] - Button: The minimum height of one button.
- * @param {number} [opts.padding=Theme.padding] - Button: The inner spacing (distance from icon and/or label) the the border.
- * @param {number} [opts.margin=Theme.margin] - The outer spacing (distance from one button to the previous/next button).
- * @param {string} [opts.iconPosition=left] - Button: The position of the icon in relation to the label. Can be left or right.
- * @param {number} [opts.iconColor=Theme.iconColor] - Button: The color of the icon (set by the tint property) as a hex value.
- * @param {number} [opts.iconColorActive=Theme.iconColorActive] - Button: The color of the icon when activated.
- * @param {number} [opts.fill=Theme.fill] - Button: The color of the button background as a hex value.
- * @param {number} [opts.fillAlpha=Theme.fillAlpha] - Button: The alpha value of the background.
- * @param {number} [opts.fillActive=Theme.fillActive] - Button: The color of the button background when activated.
- * @param {number} [opts.fillActiveAlpha=Theme.fillActiveAlpha] - Button: The alpha value of the background when activated.
- * @param {number} [opts.stroke=Theme.stroke] - Button: The color of the border as a hex value.
- * @param {number} [opts.strokeWidth=Theme.strokeWidth] - Button: The width of the border in pixel.
- * @param {number} [opts.strokeAlpha=Theme.strokeAlpha] - Button: The alpha value of the border.
- * @param {number} [opts.strokeActive=Theme.strokeActive] - Button: The color of the border when activated.
- * @param {number} [opts.strokeActiveWidth=Theme.strokeActiveWidth] - Button: The width of the border in pixel when activated.
- * @param {number} [opts.strokeActiveAlpha=Theme.strokeActiveAlpha] - Button: The alpha value of the border when activated.
- * @param {object} [opts.textStyle=Theme.textStyle] - Button: A textstyle object for the styling of the label. See PIXI.TextStyle
- * for possible options.
- * @param {number} [opts.textStyleActive=Theme.textStyleActive] - Button: A textstyle object for the styling of the label when the
- * button is activated. See PIXI.TextStyle for possible options.
- * @param {string} [opts.style=default] - A shortcut for styling options. Possible values are default, link.
- * @param {number} [opts.radius=Theme.radius] - Button: The radius of the four corners of the button (which is a rounded rectangle).
- * @param {boolean} [opts.disabled=false] - Is the button group disabled? When disabled, the button group has a lower alpha value
- * and cannot be clicked (interactive of every button is set to false).
- * @param {string} [opts.type=default] - The type of the button group. Can be default, checkbox or radio. When the type is
- * checkbox, the active state is toggled for each button automatically. When the type is radio, only one button can
- * be activated at the same time.
- * @param {string} [opts.orientation=horizontal] - The orientation of the button group. Can be horizontal or vertical.
- * @param {string} [opts.align=center] - Button: The horizontal position of the label and the icon. Possible values are
- * left, center and right. Only affects the style when the minWidth is bigger than the width of the icon and label.
- * @param {string} [opts.verticalAlign=middle] - Button: The vertical position of the label and the icon. Possible values are
- * top, middle and bottom. Only affects the style when the minHeight is bigger than the height of the icon and label.
- * @param {boolean} [opts.visible=true] - Is the button group initially visible (property visible)?
- */
- constructor(opts = {}) {
- super();
-
- const theme = Theme.fromString(opts.theme);
- this.theme = theme;
-
- this.opts = Object.assign(
- {},
- {
- id: PIXI.utils.uid(),
- x: 0,
- y: 0,
- buttons: [],
- minWidth: 44,
- minHeight: 44,
- padding: theme.padding,
- margin: theme.margin,
- iconPosition: 'left', // left, right
- iconColor: theme.iconColor,
- iconColorActive: theme.iconColorActive,
- fill: theme.fill,
- fillAlpha: theme.fillAlpha,
- fillActive: theme.fillActive,
- fillActiveAlpha: theme.fillActiveAlpha,
- stroke: theme.stroke,
- strokeWidth: theme.strokeWidth,
- strokeAlpha: theme.strokeAlpha,
- strokeActive: theme.strokeActive,
- strokeActiveWidth: theme.strokeActiveWidth,
- strokeActiveAlpha: theme.strokeActiveAlpha,
- textStyle: theme.textStyle,
- textStyleActive: theme.textStyleActive,
- style: 'default',
- radius: theme.radius,
- disabled: null,
- type: 'default', // default, checkbox, radio
- orientation: 'horizontal',
- align: 'center', // left, center, right
- verticalAlign: 'middle', // top, middle, bottom
- visible: true
- },
- opts
- );
-
- this.buttons = [];
-
- this._disabled = null;
-
- this.visible = this.opts.visible;
-
- // setup
- //-----------------
- this.setup();
-
- // layout
- //-----------------
- this.layout();
- }
-
- /**
- * Creates children and instantiates everything.
- *
- * @private
- * @return {ButtonGroup} A reference to the button group for chaining.
- */
- setup() {
- // Buttons
- //-----------------
- let position = 0;
-
- for (let it of this.opts.buttons) {
- delete it.x;
- delete it.y;
-
- if (this.opts.orientation === 'horizontal') {
- it.x = position;
- } else {
- it.y = position;
- }
-
- it.theme = it.theme || this.opts.theme;
- it.minWidth = it.minWidth || this.opts.minWidth;
- it.minHeight = it.minHeight || this.opts.minHeight;
- it.padding = it.padding || this.opts.padding;
- it.iconPosition = it.iconPosition || this.opts.iconPosition;
- it.iconColor = it.iconColor || this.opts.iconColor;
- it.iconColorActive = it.iconColorActive || this.opts.iconColorActive;
- it.fill = it.fill || this.opts.fill;
- it.fillAlpha = it.fillAlpha || this.opts.fillAlpha;
- it.fillActive = it.fillActive || this.opts.fillActive;
- it.fillActiveAlpha = it.fillActiveAlpha || this.opts.fillActiveAlpha;
- it.stroke = it.stroke || this.opts.stroke;
- it.strokeWidth =
- it.strokeWidth != null ? it.strokeWidth : this.opts.strokeWidth;
- it.strokeAlpha =
- it.strokeAlpha != null ? it.strokeAlpha : this.opts.strokeAlpha;
- it.strokeActive = it.strokeActive || this.opts.strokeActive;
- it.strokeActiveWidth =
- it.strokeActiveWidth != null
- ? it.strokeActiveWidth
- : this.opts.strokeActiveWidth;
- it.strokeActiveAlpha =
- it.strokeActiveAlpha != null
- ? it.strokeActiveAlpha
- : this.opts.strokeActiveAlpha;
- it.textStyle = it.textStyle || this.opts.textStyle;
- it.textStyleActive = it.textStyleActive || this.opts.textStyleActive;
- it.style = it.style || this.opts.style;
- it.radius = it.radius != null ? it.radius : this.opts.radius;
- if (!it.type) {
- switch (this.opts.type) {
- case 'checkbox':
- it.type = this.opts.type;
- break
- default:
- it.type = 'default';
- break
- }
- }
- //it.type = it.type || this.opts.type || 'default'
- it.align = it.align || this.opts.align;
- it.verticalAlign = it.verticalAlign || this.opts.verticalAlign;
- it.afterAction = (event, button) => {
- if (
- this.opts.type === 'radio' &&
- button.opts.type === 'default'
- ) {
- this.buttons.forEach(it => {
- if (it.opts.type === 'default') {
- it.active = false;
- }
- });
-
- if (button.opts.type === 'default') {
- button.active = true;
- }
- }
- };
-
- if (it.tooltip) {
- if (typeof it.tooltip === 'string') {
- it.tooltip = { content: it.tooltip, container: this };
- } else {
- it.tooltip = Object.assign(
- {},
- { container: this },
- it.tooltip
- );
- }
- }
-
- let button = new Button(it);
-
- this.addChild(button);
- this.buttons.push(button);
-
- position +=
- (this.opts.orientation === 'horizontal'
- ? button.width
- : button.height) + this.opts.margin;
- }
-
- if (this.opts.orientation === 'vertical') {
- const maxWidth = this.getMaxButtonWidth();
-
- this.buttons.forEach(it => {
- it.opts.minWidth = maxWidth;
- it.layout();
- });
- }
-
- // disabled
- //-----------------
- if (this.opts.disabled != null) {
- this.disabled = this.opts.disabled;
- }
-
- return this
- }
-
- /**
- * Should be called to refresh the layout of the button group. Can be used after resizing.
- *
- * @return {ButtonGroup} A reference to the button group for chaining.
- */
- layout() {
- // set position
- //-----------------
- this.position.set(this.opts.x, this.opts.y);
-
- // draw
- //-----------------
- this.draw();
-
- return this
- }
-
- /**
- * Draws the canvas.
- *
- * @private
- * @return {ButtonGroup} A reference to the button group for chaining.
- */
- draw() {
- if (this.opts.margin === 0) {
- this.buttons.forEach(it => it.hide());
-
- this.clear();
- this.lineStyle(
- this.opts.strokeWidth,
- this.opts.stroke,
- this.opts.strokeAlpha
- );
- this.beginFill(this.opts.fill, this.opts.fillAlpha);
- this.drawRoundedRect(
- 0,
- 0,
- this.width,
- this.height,
- this.opts.radius
- );
-
- // Draw borders
- this.lineStyle(
- this.opts.strokeWidth,
- this.opts.stroke,
- this.opts.strokeAlpha / 2
- );
-
- this.buttons.forEach((it, i) => {
- if (i > 0) {
- this.moveTo(it.x, it.y);
-
- if (this.opts.orientation === 'horizontal') {
- this.lineTo(it.x, it.height);
- } else {
- this.lineTo(it.width, it.y);
- }
- }
- });
-
- this.endFill();
- }
-
- return this
- }
-
- /**
- * Gets or sets the disabled state. When disabled, no button of the button group can be clicked.
- *
- * @member {boolean}
- */
- get disabled() {
- return this._disabled
- }
-
- set disabled(value) {
- this._disabled = value;
-
- this.buttons.forEach(it => (it.disabled = value));
- }
-
- /**
- * Searches all buttons of the button group and returns the maximum width of one button.
- *
- * @private
- * @return {number} The maximum with of a button of the button group.
- */
- getMaxButtonWidth() {
- let widths = this.buttons.map(it => it.width);
-
- return Math.max(...widths)
- }
-
- /**
- * Shows the button group (sets his alpha value to 1).
- *
- * @return {ButtonGroup} A reference to the button group for chaining.
- */
- show() {
- this.alpha = 1;
-
- return this
- }
-
- /**
- * Hides the button group (sets his alpha value to 0).
- *
- * @return {ButtonGroup} A reference to the button group for chaining.
- */
- hide() {
- this.alpha = 0;
-
- return this
- }
- }
-
- /**
- * Class that represents a PixiJS InteractivePopup.
- * The class is used for various other Popup-like classes
- * like Popup, Message...
- *
- * @class
- * @abstract
- * @extends AbstractPopup
- */
- class InteractivePopup extends AbstractPopup {
- /**
- * Creates an instance of an InteractivePopup (only for internal use).
- *
- * @constructor
- * @param {object} [opts] - An options object to specify to style and behaviour of the popup.
- * @param {boolean} [opts.closeOnPopup=false] - Should the popup be closed when the user clicks on the popup?
- * @param {boolean} [opts.closeButton=true] - Should a close button be displayed on the upper right corner?
- * @param {object} [opts.button] - A Button object to be display on the lower right corner.
- * @param {object} [opts.buttonGroup] - A ButtonGroup object to be displayed on the lower right corner.
- */
- constructor(opts = {}) {
- opts = Object.assign(
- {},
- {
- closeOnPopup: false,
- closeButton: true,
- button: null,
- buttonGroup: null
- },
- opts
- );
-
- super(opts);
-
- this._closeButton = null;
- this._buttons = null;
-
- // padding
- this.smallPadding = this.opts.padding / 2;
-
- // setup
- //-----------------
- this.setup();
-
- // layout
- //-----------------
- this.layout();
- }
-
- /**
- * Creates the framework and instantiates everything.
- *
- * @private
- * @return {AbstractPopup} A reference to the popup for chaining.
- */
- setup() {
- super.setup();
-
- // interaction
- //-----------------
- this.on('pointerup', e => {
- if (this.opts.closeOnPopup) {
- this.hide();
- } else {
- e.stopPropagation();
- }
- });
-
- // closeButton
- //-----------------
- if (this.opts.closeButton) {
- let closeButton = PIXI.Sprite.fromImage(
- '../../assets/icons/close.png',
- true
- );
- closeButton.width = this.headerStyle.fontSize;
- closeButton.height = closeButton.width;
- closeButton.tint = this.theme.color2;
- // This is needed, because the closeButton belongs to the content. The popup must resize with the closeButton.
- if (this._header) {
- closeButton.x = this._header.width + this.innerPadding;
- } else if (this._content) {
- closeButton.x = this._content.width + this.innerPadding;
- }
-
- closeButton.interactive = true;
- closeButton.buttonMode = true;
- closeButton.on('pointerdown', e => {
- this.hide();
- });
-
- this._closeButton = closeButton;
- this.addChild(closeButton);
-
- // maxWidth is set and a closeButton should be displayed
- //-----------------
- if (this.opts.maxWidth) {
- const wordWrapWidth =
- this.opts.maxWidth -
- 2 * this.opts.padding -
- this.smallPadding -
- this._closeButton.width;
- if (this._header) {
- this.headerStyle.wordWrapWidth = wordWrapWidth;
- } else if (this._content) {
- this.textStyle.wordWrapWidth = wordWrapWidth;
- }
- }
- }
-
- // buttons
- //-----------------
- if (this.opts.button || this.opts.buttonGroup) {
- if (this.opts.button) {
- this._buttons = new Button(
- Object.assign(
- { textStyle: this.theme.textStyleSmall },
- this.opts.button
- )
- );
- } else {
- this._buttons = new ButtonGroup(
- Object.assign(
- { textStyle: this.theme.textStyleSmall },
- this.opts.buttonGroup
- )
- );
- }
- this.addChild(this._buttons);
-
- this._buttons.y = this.innerPadding + this.sy;
- }
-
- return this
- }
-
- /**
- * Should be called to refresh the layout of the popup. Can be used after resizing.
- *
- * @return {AbstractPopup} A reference to the popup for chaining.
- */
- layout() {
- super.layout();
-
- // closeButton
- //-----------------
- if (this.opts.closeButton) {
- this._closeButton.x =
- this.wantedWidth - this.smallPadding - this._closeButton.width;
- this._closeButton.y = this.smallPadding;
- }
-
- // buttons
- //-----------------
- if (this._buttons) {
- this._buttons.x =
- this.wantedWidth - this.opts.padding - this._buttons.width;
- this._buttons.y =
- this.wantedHeight - this.opts.padding - this._buttons.height;
- }
-
- return this
- }
-
- /**
- * Calculates the size of the children of the AbstractPopup.
- * Cannot use getBounds() because it is not updated when children
- * are removed.
- *
- * @private
- * @override
- * @returns {object} An JavaScript object width the keys width and height.
- */
- getInnerSize() {
- let size = super.getInnerSize();
-
- if (this._closeButton) {
- size.width += this.smallPadding + this._closeButton.width;
- }
-
- if (this._buttons) {
- size.width = Math.max(
- size.width,
- this._buttons.x + this._buttons.width
- );
- size.height += this.innerPadding + this._buttons.height;
- }
-
- return size
- }
- }
-
- /**
- * Class that represents a PixiJS Popup.
- *
- * @example
- * // Create the popup
- * const popup = new Popup({
- * header: 'Goethe',
- * content: 'Man kann die Erfahrung nicht früh genug machen, wie entbehrlich man in der Welt ist.'
- * })
- *
- * // Add the popup to a DisplayObject
- * app.scene.addChild(popup)
- *
- * @class
- * @extends InteractivePopup
- * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/popup.html|DocTest}
- */
- class Popup extends InteractivePopup {
- /**
- * Creates an instance of a Popup.
- *
- * @constructor
- * @param {object} [opts] - An options object to specify to style and behaviour of the popup.
- * @param {boolean} [opts.closeButton=false] - Should a close button be displayed on the upper right corner?
- * @param {number} [opts.minWidth=0] - The minimum width of the popup.
- * @param {number} [opts.minHeight=0] - The minimum height of the popup.
- */
- constructor(opts = {}) {
- opts = Object.assign(
- {},
- {
- closeButton: false,
- minWidth: 0,
- minHeight: 0
- },
- opts
- );
-
- super(opts);
- }
- }
-
- /**
- * Class that represents a PixiJS Modal.
- *
- * @example
- * // Create the button and the modal when clicked
- * const button = new Button({
- * label: 'Show Modal',
- * action: e => {
- * const modal = new Modal({
- * app: app,
- * header: 'This is the header',
- * content: 'This is the text.'
- * })
- * app.scene.addChild(modal)
- * }
- * })
- *
- * // Add the button to a DisplayObject
- * app.scene.addChild(button)
- *
- * @class
- * @extends PIXI.Container
- * @extends InteractivePopup
- * @see {@link http://pixijs.download/dev/docs/PIXI.Container.html|PIXI.Container}
- * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/modal.html|DocTest}
- */
- class Modal extends PIXI.Container {
- /**
- * Creates an instance of a Modal.
- *
- * @constructor
- * @param {object} [opts] - An options object to specify to style and behaviour of the modal.
- * @param {number} [opts.id=auto generated] - The id of the modal.
- * @param {PIXIApp} [opts.app=window.app] - The app where the modal belongs to.
- * @param {number} [opts.backgroundFill=Theme.background] - The color of the background.
- * @param {number} [opts.backgroundFillAlpha=0.6] - The opacity of the background.
- * @param {boolean} [opts.closeOnBackground=true] - Should the modal be closed when the user clicks the
- * background?
- * @param {boolean} [opts.visible=true] - Is the modal initially visible (property visible)?
- */
- constructor(opts = {}) {
- super();
-
- const theme = Theme.fromString(opts.theme);
- this.theme = theme;
-
- this.opts = Object.assign(
- {},
- {
- id: PIXI.utils.uid(),
- app: window.app,
- backgroundFill: theme.background,
- backgroundFillAlpha: 0.6,
- closeOnBackground: true,
- visible: true
- },
- opts
- );
-
- this.id = this.opts.id;
-
- this.background = null;
- this.popup = null;
-
- this.alpha = 0;
- this.visible = this.opts.visible;
-
- // setup
- //-----------------
- this.setup();
-
- // layout
- //-----------------
- this.layout();
- }
-
- /**
- * Creates children and instantiates everything.
- *
- * @private
- * @return {Modal} A reference to the modal for chaining.
- */
- setup() {
- // interaction
- //-----------------
- this.interactive = true;
- this.on('added', e => {
- if (this.visible) {
- this.show();
- }
- });
-
- // background
- //-----------------
- let background = new PIXI.Graphics();
- this.background = background;
- this.addChild(this.background);
-
- if (this.opts.closeOnBackground) {
- background.interactive = true;
- background.on('pointerup', e => {
- this.hide();
- });
- }
-
- // popup
- //-----------------
- const popupOpts = Object.assign({}, this.opts, {
- visible: true,
- onHidden: () => {
- this.hide();
- }
- });
- let popup = new InteractivePopup(popupOpts);
- this.popup = popup;
- this.addChild(popup);
- popup.show();
-
- return this
- }
-
- /**
- * Should be called to refresh the layout of the modal. Can be used after resizing.
- *
- * @return {Modal} A reference to the modal for chaining.
- */
- layout() {
- const width = this.opts.app.size.width;
- const height = this.opts.app.size.height;
-
- // background
- //-----------------
- this.background.clear();
- this.background.beginFill(
- this.opts.backgroundFill,
- this.opts.backgroundFillAlpha
- );
- this.background.drawRect(0, 0, width, height);
- this.background.endFill();
-
- // position
- this.popup.x = width / 2 - this.popup.width / 2;
- this.popup.y = height / 2 - this.popup.height / 2;
-
- return this
- }
-
- /**
- * Shows the modal (sets his alpha values to 1).
- *
- * @return {Modal} A reference to the modal for chaining.
- */
- show() {
- TweenLite.to(this, this.theme.fast, {
- alpha: 1,
- onStart: () => (this.visible = true)
- });
-
- return this
- }
-
- /**
- * Hides the modal (sets his alpha values to 0).
- *
- * @return {Modal} A reference to the modal for chaining.
- */
- hide() {
- TweenLite.to(this, this.theme.fast, {
- alpha: 0,
- onComplete: () => (this.visible = false)
- });
-
- return this
- }
-
- /**
- * Sets or gets the header. The getter always returns a PIXI.Text object. The setter can receive
- * a string or a PIXI.Text object.
- *
- * @member {string|PIXI.Text}
- */
- get header() {
- return this.popup.header
- }
- set header(value) {
- this.opts.header = value;
- this.background.destroy();
- this.popup.destroy();
- this.setup().layout();
- }
-
- /**
- * Sets or gets the content. The getter always returns an PIXI.DisplayObject. The setter can receive
- * a string or a PIXI.DisplayObject.
- *
- * @member {string|PIXI.DisplayObject}
- */
- get content() {
- return this.popup.content
- }
- set content(value) {
- this.opts.content = value;
- this.background.destroy();
- this.popup.destroy();
- this.setup().layout();
- }
- }
-
- /**
- * Class that represents a Message. A message pops up and disappears after a specific amount of time.
- *
- * @example
- * // Create the PixiJS App
- * const app = new PIXIApp({
- * view: canvas,
- * width: 900,
- * height: 250
- * }).setup().run()
- *
- * // Create a button
- * let button = new Button({
- * label: 'Click me',
- * action: e => {
- * const message = new Message({
- * app: app,
- * header: 'Header',
- * content: 'Text.'
- * })
- * app.scene.addChild(message)
- * }
- * })
- *
- * // Add the button to the scene
- * app.scene.addChild(button)
- *
- * @class
- * @extends InteractivePopup
- * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/message.html|DocTest}
- */
- class Message extends InteractivePopup {
- /**
- * Creates an instance of a Message.
- *
- * @constructor
- * @param {object} [opts] - An options object to specify to style and behaviour of the message.
- * @param {PIXIApp} [opts.app=window.app] - The PIXIApp where this message belongs to.
- * @param {boolean} [opts.closeButton=false] - Should a close button be displayed in the upper right corner?
- * @param {number} [opts.minWidth=280] - The minimum width of the message box. Automatically expands with the content.
- * @param {number} [opts.minHeight=100] - The minimum height of the message box. Automatically expands with the content.
- * @param {number} [opts.margin=Theme.margin] - The outer spacing of the message box.
- * @param {string} [opts.align=right] - The horizontal position of the message box relative to the app. Possible
- * values are left, center, right.
- * @param {string} [opts.verticalAlign=top] - The vertical position of the message box relative to the app. Possible
- * values are top, middle, bottom.
- * @param {number} [opts.duration=5] - The duration in seconds when the message box should disappear.
- * @param {boolean} [opts.autoClose=true] - Should the message box be closed automatically?
- * @param {number} [opts.closeDuration=Theme.fast] - The duration in seconds of the closing of the message box.
- */
- constructor(opts = {}) {
- const theme = Theme.fromString(opts.theme);
-
- opts = Object.assign(
- {},
- {
- app: window.app,
- closeButton: false,
- minWidth: 280,
- minHeight: 100,
- margin: theme.margin,
- align: 'right', // left, center, right
- verticalAlign: 'top', // top, middle, bottom
- duration: 5,
- autoClose: true,
- closeDuration: theme.fast
- },
- opts
- );
-
- super(opts);
- }
-
- /**
- * Relayouts the position of the message box.
- *
- * @return {Message} Returns the message box for chaining.
- */
- layout() {
- super.layout();
-
- // horizontal
- switch (this.opts.align) {
- case 'left':
- this.x = this.opts.margin;
- break
- case 'center':
- this.x = this.opts.app.size.width / 2 - this.width / 2;
- break
- case 'right':
- this.x =
- this.opts.app.size.width - this.opts.margin - this.width;
- break
- }
-
- // vertical
- switch (this.opts.verticalAlign) {
- case 'top':
- this.y = this.opts.margin;
- break
- case 'middle':
- this.y = this.opts.app.size.height / 2 - this.height / 2;
- break
- case 'bottom':
- this.y =
- this.opts.app.size.height - this.opts.margin - this.height;
- break
- }
- }
-
- /**
- * Shows the message box.
- *
- * @private
- */
- show() {
- super.show();
-
- if (this.opts.autoClose) {
- window.setTimeout(() => {
- this.hide();
- }, this.opts.duration * 1000);
- }
- }
- }
-
- /* globals WebKitPoint */
+ /* globals */
/** Tests whether an object is empty
* @param {Object} obj - the object to be tested
@@ -3213,9 +1481,7 @@
}
static startYearRange(date) {
- return new Date(
- Date.UTC(date.getFullYear() - 1, 11, 31, 23, 59, 59, 999)
- )
+ return new Date(Date.UTC(date.getFullYear() - 1, 11, 31, 23, 59, 59, 999))
}
static endYearRange(date) {
@@ -3235,11 +1501,7 @@
}
static nextDay(date) {
- return this.create(
- date.getFullYear(),
- date.getMonth(),
- date.getDate() + 1
- )
+ return this.create(date.getFullYear(), date.getMonth(), date.getDate() + 1)
}
static nextHour(date) {
@@ -3677,15 +1939,9 @@
*/
draw(context, { lineWidth = 2, stroke = '#000000', fill = null } = {}) {
context.beginPath();
- context.moveTo(
- this.points[0].x + this.center.x,
- this.points[0].y + this.center.y
- );
+ context.moveTo(this.points[0].x + this.center.x, this.points[0].y + this.center.y);
for (let i = 1; i < this.points.length; i++) {
- context.lineTo(
- this.points[i].x + this.center.x,
- this.points[i].y + this.center.y
- );
+ context.lineTo(this.points[i].x + this.center.x, this.points[i].y + this.center.y);
}
context.closePath();
context.lineWidth = lineWidth;
@@ -3742,10 +1998,7 @@
for (i = 0, j = nvert - 1; i < nvert; j = i++) {
if (
verty[i] > testy != verty[j] > testy &&
- testx <
- ((vertx[j] - vertx[i]) * (testy - verty[i])) /
- (verty[j] - verty[i]) +
- vertx[i]
+ testx < ((vertx[j] - vertx[i]) * (testy - verty[i])) / (verty[j] - verty[i]) + vertx[i]
)
c = !c;
}
@@ -3779,12 +2032,8 @@
for (side = 0; side < this.getNumberOfSides(); side++) {
/* get the axis that we will project onto */
if (side == 0) {
- axis.x =
- this.points[this.getNumberOfSides() - 1].y -
- this.points[0].y;
- axis.y =
- this.points[0].x -
- this.points[this.getNumberOfSides() - 1].x;
+ axis.x = this.points[this.getNumberOfSides() - 1].y - this.points[0].y;
+ axis.y = this.points[0].x - this.points[this.getNumberOfSides() - 1].x;
} else {
axis.x = this.points[side - 1].y - this.points[side].y;
axis.y = this.points[side].x - this.points[side - 1].x;
@@ -3808,8 +2057,7 @@
maxA += tmp;
/* project polygon B onto axis to determine the min/max */
- minB = maxB =
- other.points[0].x * axis.x + other.points[0].y * axis.y;
+ minB = maxB = other.points[0].x * axis.x + other.points[0].y * axis.y;
for (i = 1; i < other.getNumberOfSides(); i++) {
tmp = other.points[i].x * axis.x + other.points[i].y * axis.y;
if (tmp > maxB) maxB = tmp;
@@ -3836,12 +2084,8 @@
for (side = 0; side < other.getNumberOfSides(); side++) {
/* get the axis that we will project onto */
if (side == 0) {
- axis.x =
- other.points[other.getNumberOfSides() - 1].y -
- other.points[0].y;
- axis.y =
- other.points[0].x -
- other.points[other.getNumberOfSides() - 1].x;
+ axis.x = other.points[other.getNumberOfSides() - 1].y - other.points[0].y;
+ axis.y = other.points[0].x - other.points[other.getNumberOfSides() - 1].x;
} else {
axis.x = other.points[side - 1].y - other.points[side].y;
axis.y = other.points[side].x - other.points[side - 1].x;
@@ -3865,8 +2109,7 @@
maxA += tmp;
/* project polygon B onto axis to determine the min/max */
- minB = maxB =
- other.points[0].x * axis.x + other.points[0].y * axis.y;
+ minB = maxB = other.points[0].x * axis.x + other.points[0].y * axis.y;
for (i = 1; i < other.getNumberOfSides(); i++) {
tmp = other.points[i].x * axis.x + other.points[i].y * axis.y;
if (tmp > maxB) maxB = tmp;
@@ -3947,8 +2190,7 @@
* @access private
*/
__push(value) {
- let removed =
- this.buffer.length === this.bufferMaxSize ? this.buffer.shift() : 0;
+ let removed = this.buffer.length === this.bufferMaxSize ? this.buffer.shift() : 0;
this.buffer.push(value);
return removed
@@ -3991,6 +2233,1804 @@
}
}
+ /* global */
+
+ /**
+ * Callback for the button action.
+ *
+ * @callback actionCallback
+ * @param {object} event - The event object.
+ * @param {Button} button - A reference to the button (also this refers to the button).
+ */
+
+ /**
+ * Callback for the button beforeAction.
+ *
+ * @callback beforeActionCallback
+ * @param {object} event - The event object.
+ * @param {Button} button - A reference to the button (also this refers to the button).
+ */
+
+ /**
+ * Callback for the button afterAction.
+ *
+ * @callback afterActionCallback
+ * @param {object} event - The event object.
+ * @param {Button} button - A reference to the button (also this refers to the button).
+ */
+
+ /**
+ * Class that represents a PixiJS Button.
+ *
+ * @example
+ * // Create the button
+ * const button = new Button({
+ * label: 'My Button',
+ * action: () => console.log('Button was clicked')
+ * })
+ *
+ * // Add the button to a DisplayObject
+ * app.scene.addChild(button)
+ *
+ * @class
+ * @extends PIXI.Container
+ * @see {@link http://pixijs.download/dev/docs/PIXI.Container.html|PIXI.Container}
+ * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/button.html|DocTest}
+ */
+ class Button extends PIXI.Container {
+ /**
+ * Creates an instance of a Button.
+ *
+ * @constructor
+ * @param {object} [opts] - An options object to specify to style and behaviour of the button.
+ * @param {number} [opts.id=auto generated] - The id of the button.
+ * @param {string} [opts.label] - The label of the button.
+ * @param {number} [opts.x=0] - The x position of the button. Can be also set after creation with button.x = 0.
+ * @param {number} [opts.y=0] - The y position of the button. Can be also set after creation with button.y = 0.
+ * @param {string|Theme} [opts.theme=dark] - The theme to use for this button. Possible values are dark, light, red
+ * or a Theme object.
+ * @param {number} [opts.minWidth=44] - The minimum width of the button.
+ * @param {number} [opts.minHeight=44] - The minimum height of the button.
+ * @param {number} [opts.padding=Theme.padding] - The inner spacing (distance from icon and/or label) to the border.
+ * @param {string|PIXI.DisplayObject} [opts.icon] - The icon of the button. Can be a predefined one, an URL or an PIXI.DisplayObject.
+ * @param {string|PIXI.DisplayObject} [opts.iconActive=icon] - The icon of the button when activated. Can be a predefined one, an URL or an PIXI.DisplayObject.
+ * @param {string} [opts.iconPosition=left] - The position of the icon in relation to the label. Can be left or right.
+ * @param {number} [opts.iconColor=Theme.iconColor] - The color of the icon (set by the tint property) as a hex value.
+ * @param {number} [opts.iconColorActive=Theme.iconColorActive] - The color of the icon when activated.
+ * @param {number} [opts.fill=Theme.fill] - The color of the button background as a hex value.
+ * @param {number} [opts.fillAlpha=Theme.fillAlpha] - The alpha value of the background.
+ * @param {number} [opts.fillActive=Theme.fillActive] - The color of the button background when activated.
+ * @param {number} [opts.fillActiveAlpha=Theme.fillActiveAlpha] - The alpha value of the background when activated.
+ * @param {number} [opts.stroke=Theme.stroke] - The color of the border as a hex value.
+ * @param {number} [opts.strokeWidth=Theme.strokeWidth] - The width of the border in pixel.
+ * @param {number} [opts.strokeAlpha=Theme.strokeAlpha] - The alpha value of the border.
+ * @param {number} [opts.strokeActive=Theme.strokeActive] - The color of the border when activated.
+ * @param {number} [opts.strokeActiveWidth=Theme.strokeActiveWidth] - The width of the border in pixel when activated.
+ * @param {number} [opts.strokeActiveAlpha=Theme.strokeActiveAlpha] - The alpha value of the border when activated.
+ * @param {object} [opts.textStyle=Theme.textStyle] - A textstyle object for the styling of the label. See PIXI.TextStyle
+ * for possible options.
+ * @param {number} [opts.textStyleActive=Theme.textStyleActive] - A textstyle object for the styling of the label when the
+ * button is activated. See PIXI.TextStyle for possible options.
+ * @param {string} [opts.style=default] - A shortcut for styling options. Possible values are default, link.
+ * @param {number} [opts.radius=Theme.radius] - The radius of the four corners of the button (which is a rounded rectangle).
+ * @param {boolean} [opts.disabled=false] - Is the button disabled? When disabled, the button has a lower alpha value
+ * and cannot be clicked (interactive is set to false).
+ * @param {boolean} [opts.active=false] - Is the button initially active?
+ * @param {actionCallback} [opts.action] - Executed when the button was triggered (by pointerup).
+ * @param {beforeActionCallback} [opts.beforeAction] - Executed before the main action is triggered.
+ * @param {afterActionCallback} [opts.afterAction] - Executed after the main action was triggered.
+ * @param {string} [opts.type=default] - The type of the button. Can be default or checkbox. When the type is
+ * checkbox, the active state is toggled automatically.
+ * @param {string} [opts.align=center] - The horizontal position of the label and the icon. Possible values are
+ * left, center and right. Only affects the style when the minWidth is bigger than the width of the icon and label.
+ * @param {string} [opts.verticalAlign=middle] - The vertical position of the label and the icon. Possible values are
+ * top, middle and button. Only affects the style when the minHeight is bigger than the height of the icon and label.
+ * @param {string|object} [opts.tooltip] - A string for the label of the tooltip or an object to configure the tooltip
+ * to display.
+ * @param {string|object} [opts.badge] - A string for the label of the badge or an object to configure the badge to display.
+ * If the parameter is an object, all badge options can be set plus the following:
+ * @param {string} [opts.badge.align=right] - The horizontal alignment of the badge. Possible values: left, center, right
+ * @param {string} [opts.badge.verticalAlign=top] - The vertical alignment of the badge. Possible values: top, middle, bottom
+ * @param {number} [opts.badge.offsetLeft=0] - The horizontal shift of the badge.
+ * @param {number} [opts.badge.offsetTop=0] - The vertical shift of the badge.
+ * @param {boolean} [opts.visible=true] - Is the button initially visible (property visible)?
+ */
+ constructor(opts = {}) {
+ super();
+
+ const theme = Theme.fromString(opts.theme);
+ this.theme = theme;
+
+ this.opts = Object.assign(
+ {},
+ {
+ id: PIXI.utils.uid(),
+ label: null,
+ x: 0,
+ y: 0,
+ minWidth: 44,
+ minHeight: 44,
+ padding: theme.padding,
+ icon: undefined,
+ iconActive: undefined,
+ iconPosition: 'left',
+ iconColor: theme.iconColor,
+ iconColorActive: theme.iconColorActive,
+ fill: theme.fill,
+ fillAlpha: theme.fillAlpha,
+ fillActive: theme.fillActive,
+ fillActiveAlpha: theme.fillActiveAlpha,
+ stroke: theme.stroke,
+ strokeWidth: theme.strokeWidth,
+ strokeAlpha: theme.strokeAlpha,
+ strokeActive: theme.strokeActive,
+ strokeActiveWidth: theme.strokeActiveWidth,
+ strokeActiveAlpha: theme.strokeActiveAlpha,
+ textStyle: theme.textStyle,
+ textStyleActive: theme.textStyleActive,
+ style: 'default',
+ radius: theme.radius,
+ disabled: false,
+ active: false,
+ action: null,
+ beforeAction: null,
+ afterAction: null,
+ type: 'default',
+ align: 'center',
+ verticalAlign: 'middle',
+ tooltip: null,
+ badge: null,
+ visible: true
+ },
+ opts
+ );
+
+ this.id = this.opts.id;
+
+ if (typeof this.opts.icon === 'undefined' && typeof this.opts.iconActive !== 'undefined') {
+ this.opts.icon = this.opts.iconActive;
+ } else if (typeof this.opts.icon !== 'undefined' && typeof this.opts.iconActive === 'undefined') {
+ this.opts.iconActive = this.opts.icon;
+ }
+
+ if (this.opts.style === 'link') {
+ Object.assign(this.opts, {
+ strokeAlpha: 0,
+ strokeActiveAlpha: 0,
+ fillAlpha: 0,
+ fillActiveAlpha: 0
+ });
+ }
+
+ this._active = null;
+ this._disabled = null;
+
+ this.__start = { x: null, y: null };
+
+ this.iconInactive = null;
+ this.iconActive = null;
+ this.text = null;
+
+ this.button = null;
+ this.content = null;
+
+ this.tooltip = null;
+ this.badge = null;
+
+ this.visible = this.opts.visible;
+
+ // setup
+ //-----------------
+ this.setup();
+ }
+
+ /**
+ * Captures an event to inform InteractionMapper about processed events.
+ *
+ * @param {event|PIXI.InteractionEvent} event - The PIXI event to capture.
+ */
+ capture(event) {
+ Events$1.capturedBy(event.data.originalEvent, this);
+ }
+
+ /**
+ * Creates children and instantiates everything.
+ *
+ * @private
+ * @return {Button} A reference to the button for chaining.
+ */
+ setup() {
+ // Button
+ //-----------------
+ let button = new PIXI.Graphics();
+ this.button = button;
+ this.addChild(button);
+
+ // Content
+ //-----------------
+ let content = new PIXI.Container();
+ this.content = content;
+ this.addChild(content);
+
+ // Text
+ //-----------------
+ if (this.opts.label) {
+ this.text = new PIXI.Text(this.opts.label, this.opts.textStyle);
+ }
+
+ // Icon
+ //-----------------
+ if (this.opts.icon) {
+ this.iconInactive = this.loadIcon(this.opts.icon, this.opts.iconColor);
+ }
+
+ if (this.opts.iconActive) {
+ this.iconActive = this.loadIcon(this.opts.iconActive, this.opts.iconColorActive);
+ }
+
+ // interaction
+ //-----------------
+ this.button.on('pointerover', e => {
+ this.capture(e);
+ TweenLite.to([this.button, this.content], this.theme.fast, {
+ alpha: 0.83,
+ overwrite: 'none'
+ });
+ });
+
+ this.button.on('pointermove', e => {
+ this.capture(e);
+ });
+
+ this.button.on('pointerout', e => {
+ this.capture(e);
+ TweenLite.to([this.button, this.content], this.theme.fast, {
+ alpha: 1,
+ overwrite: 'none'
+ });
+ });
+
+ // eslint-disable-next-line no-unused-vars
+ this.button.on('pointerdown', e => {
+ //this.capture(e)
+ this.__start.x = e.data.global.x;
+ this.__start.y = e.data.global.y;
+ TweenLite.to([this.button, this.content], this.theme.fast, {
+ alpha: 0.7,
+ overwrite: 'none'
+ });
+ });
+
+ this.button.on('pointerup', e => {
+ this.capture(e);
+
+ const distance = Points.distance(e.data.global, this.__start);
+
+ if (distance < 5) {
+ if (this.opts.beforeAction) {
+ this.opts.beforeAction.call(this, e, this);
+ }
+
+ if (this.opts.action) {
+ this.opts.action.call(this, e, this);
+ }
+
+ TweenLite.to([this.button, this.content], this.theme.fast, {
+ alpha: 0.83,
+ overwrite: 'none'
+ });
+
+ if (this.opts.type === 'checkbox') {
+ this.active = !this.active;
+ }
+
+ if (this.opts.afterAction) {
+ this.opts.afterAction.call(this, e, this);
+ }
+ }
+ });
+
+ // disabled
+ //-----------------
+ this.disabled = this.opts.disabled;
+
+ // active
+ //-----------------
+ this.active = this.opts.active; // calls .layout()
+
+ // tooltip
+ //-----------------
+ if (this.opts.tooltip) {
+ if (typeof this.opts.tooltip === 'string') {
+ this.tooltip = new Tooltip({
+ object: this,
+ content: this.opts.tooltip
+ });
+ } else {
+ this.opts.tooltip = Object.assign({}, { object: this }, this.opts.tooltip);
+ this.tooltip = new Tooltip(this.opts.tooltip);
+ }
+ }
+
+ // badge
+ //-----------------
+ if (this.opts.badge) {
+ let opts = Object.assign(
+ {},
+ {
+ align: 'right',
+ verticalAlign: 'top',
+ offsetLeft: 0,
+ offsetTop: 0
+ }
+ );
+ if (typeof this.opts.badge === 'string') {
+ opts = Object.assign(opts, { content: this.opts.badge });
+ } else {
+ opts = Object.assign(opts, this.opts.badge);
+ }
+
+ const badge = new Badge(opts);
+
+ switch (opts.align) {
+ case 'left':
+ badge.x = this.x - badge.width / 2 + opts.offsetLeft;
+ break
+ case 'center':
+ badge.x = this.x + this.width / 2 - badge.width / 2 + opts.offsetLeft;
+ break
+ case 'right':
+ badge.x = this.x + this.width - badge.width / 2 + opts.offsetLeft;
+ }
+
+ switch (opts.verticalAlign) {
+ case 'top':
+ badge.y = this.y - badge.height / 2 + opts.offsetTop;
+ break
+ case 'middle':
+ badge.y = this.y + this.height / 2 - badge.height / 2 + opts.offsetTop;
+ break
+ case 'bottom':
+ badge.y = this.y + this.height - badge.height / 2 + opts.offsetTop;
+ }
+
+ this.addChild(badge);
+
+ this.badge = badge;
+ }
+
+ // set position
+ //-----------------
+ this.position.set(this.opts.x, this.opts.y);
+
+ return this
+ }
+
+ /**
+ * Should be called to refresh the layout of the button. Can be used after resizing.
+ *
+ * @return {Button} A reference to the button for chaining.
+ */
+ layout() {
+ // Clear content
+ //-----------------
+ this.removeChild(this.content);
+ this.content = new PIXI.Container();
+ this.addChild(this.content);
+
+ // Set the icon
+ //-----------------
+ let icon = null;
+
+ if (!this.active && this.iconInactive) {
+ icon = this.iconInactive;
+ } else if (this.active && this.iconActive) {
+ icon = this.iconActive;
+ }
+
+ // Set the text
+ //-----------------
+ if (this.text) {
+ this.text.position.set(0, 0);
+ }
+
+ // Width and Height
+ //-----------------
+ let width = 0;
+ if (icon && this.text) {
+ width = icon.width + this.text.width + 3 * this.opts.padding;
+ } else if (icon) {
+ width = icon.width + 2 * this.opts.padding;
+ } else if (this.text) {
+ width = this.text.width + 2 * this.opts.padding;
+ }
+
+ if (width < this.opts.minWidth) {
+ width = this.opts.minWidth;
+ }
+
+ let height = 0;
+ if (icon) {
+ height = icon.height + 2 * this.opts.padding;
+ } else if (this.text) {
+ height = this.text.height + 2 * this.opts.padding;
+ }
+
+ if (height < this.opts.minHeight) {
+ height = this.opts.minHeight;
+ }
+
+ this._width = width;
+ this._height = height;
+
+ // Position icon and text
+ //-----------------
+ if (icon && this.text) {
+ if (this.opts.iconPosition === 'right') {
+ icon.x = this.text.width + this.opts.padding;
+ } else {
+ this.text.x = icon.width + this.opts.padding;
+ }
+ this.content.addChild(icon, this.text);
+ } else if (icon) {
+ this.content.addChild(icon);
+ } else if (this.text) {
+ this.content.addChild(this.text);
+ }
+
+ this.layoutInnerContent();
+ this.layoutContent();
+
+ this.icon = icon;
+
+ // draw
+ //-----------------
+ this.draw();
+
+ return this
+ }
+
+ /**
+ * Calculates the positions of the content children (icon and/or text).
+ *
+ * @private
+ * @return {Button} A reference to the button for chaining.
+ */
+ layoutInnerContent() {
+ for (let child of this.content.children) {
+ switch (this.opts.verticalAlign) {
+ case 'top':
+ child.y = 0;
+ break
+ case 'middle':
+ child.y = this.content.height / 2 - child.height / 2;
+ break
+ case 'bottom':
+ child.y = this.content.height - child.height;
+ break
+ }
+ }
+
+ return this
+ }
+
+ /**
+ * Sets the horizontal and vertical position of the content.
+ * Uses the option keys "align" and "verticalAlign".
+ *
+ * @private
+ * @return {Button} A reference to the button for chaining.
+ */
+ layoutContent() {
+ switch (this.opts.align) {
+ case 'left':
+ this.content.x = this.opts.padding;
+ break
+ case 'center':
+ this.content.x = (this._width - this.content.width) / 2;
+ break
+ case 'right':
+ this.content.x = this._width - this.opts.padding - this.content.width;
+ break
+ }
+
+ switch (this.opts.verticalAlign) {
+ case 'top':
+ this.content.y = this.opts.padding;
+ break
+ case 'middle':
+ this.content.y = (this._height - this.content.height) / 2;
+ break
+ case 'bottom':
+ this.content.y = this._height - this.opts.padding - this.content.height;
+ break
+ }
+
+ return this
+ }
+
+ /**
+ * Draws the canvas.
+ *
+ * @private
+ * @return {Button} A reference to the button for chaining.
+ */
+ draw() {
+ this.button.clear();
+ if (this.active) {
+ this.button.lineStyle(this.opts.strokeActiveWidth, this.opts.strokeActive, this.opts.strokeActiveAlpha);
+ this.button.beginFill(this.opts.fillActive, this.opts.fillActiveAlpha);
+ } else {
+ this.button.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha);
+ this.button.beginFill(this.opts.fill, this.opts.fillAlpha);
+ }
+ this.button.drawRoundedRect(0, 0, this._width, this._height, this.opts.radius);
+ this.button.endFill();
+
+ return this
+ }
+
+ /**
+ * Gets or sets the active state.
+ *
+ * @member {boolean}
+ */
+ get active() {
+ return this._active
+ }
+ set active(value) {
+ this._active = value;
+
+ if (this._active) {
+ if (this.text) {
+ this.text.style = this.opts.textStyleActive;
+ }
+ } else {
+ if (this.text) {
+ this.text.style = this.opts.textStyle;
+ }
+ }
+
+ this.layout();
+ }
+
+ /**
+ * Gets or sets the disabled state. When disabled, the button cannot be clicked.
+ *
+ * @member {boolean}
+ */
+ get disabled() {
+ return this._disabled
+ }
+ set disabled(value) {
+ this._disabled = value;
+
+ if (this._disabled) {
+ this.button.interactive = false;
+ this.button.buttonMode = false;
+ this.button.alpha = 0.5;
+ if (this.icon) {
+ this.icon.alpha = 0.5;
+ }
+ if (this.text) {
+ this.text.alpha = 0.5;
+ }
+ } else {
+ this.button.interactive = true;
+ this.button.buttonMode = true;
+ this.button.alpha = 1;
+ if (this.icon) {
+ this.icon.alpha = 1;
+ }
+ if (this.text) {
+ this.text.alpha = 1;
+ }
+ }
+ }
+
+ /**
+ * Shows the button (sets his alpha values to 1).
+ *
+ * @return {Button} A reference to the button for chaining.
+ */
+ show() {
+ this.opts.strokeAlpha = 1;
+ this.opts.strokeActiveAlpha = 1;
+ this.opts.fillAlpha = 1;
+ this.opts.fillActiveAlpha = 1;
+
+ this.layout();
+
+ return this
+ }
+
+ /**
+ * Hides the button (sets his alpha values to 0).
+ *
+ * @return {Button} A reference to the button for chaining.
+ */
+ hide() {
+ this.opts.strokeAlpha = 0;
+ this.opts.strokeActiveAlpha = 0;
+ this.opts.fillAlpha = 0;
+ this.opts.fillActiveAlpha = 0;
+
+ this.layout();
+
+ return this
+ }
+
+ /**
+ * Loads an icon
+ *
+ * @private
+ * @param {string|PIXI.DisplayObject} icon - The icon to load.
+ * @param {number} color - The color of the icon (if not an PIXI.DisplayObject).
+ * @return {PIXI.DisplayObject} Return the icon as an PIXI.DisplayObject.
+ */
+ loadIcon(icon, color) {
+ let displayObject = null;
+
+ if (icon instanceof PIXI.DisplayObject) {
+ displayObject = icon;
+ } else {
+ let size = 17;
+ if (this.text) {
+ size = this.text.height;
+ } else if (this.opts.minHeight) {
+ size = this.opts.minHeight - 2 * this.opts.padding;
+ }
+
+ const url = Button.iconIsUrl(icon) ? icon : `../../assets/icons/${icon}.png`;
+ const iconTexture = PIXI.Texture.fromImage(url, true);
+
+ const sprite = new PIXI.Sprite(iconTexture);
+ sprite.tint = color;
+ sprite.width = size;
+ sprite.height = size;
+
+ displayObject = sprite;
+ }
+
+ return displayObject
+ }
+
+ /**
+ * Tests if an icon string is an url.
+ *
+ * @private
+ * @static
+ * @param {string} url - The url to test.
+ * @return {boolean} true if the url is an url to an image.
+ */
+ static iconIsUrl(url) {
+ return /\.(png|svg|gif|jpg|jpeg|tif|tiff)$/i.test(url)
+ }
+
+ /**
+ * Gets or sets the color of the current icon (no matter how the status is). Changing the color, changes
+ * the tint property of the icon sprite.
+ *
+ * @member {number}
+ */
+ get iconColor() {
+ return this.icon ? this.icon.tint : null
+ }
+ set iconColor(value) {
+ if (this.icon) {
+ this.icon.tint = value;
+ }
+ }
+ }
+
+ /* globals ThrowPropsPlugin, Strong */
+
+ /**
+ * Class that represents a PixiJS ButtonGroup.
+ *
+ * @example
+ * // Create the button group
+ * const buttonGroup = new ButtonGroup({
+ * buttons: [
+ * {label: 'Button 1', action: event => console.log(event)},
+ * {label: 'Button 2', action: event => console.log(event)},
+ * {label: 'Button 3', action: event => console.log(event)}
+ * ],
+ * minWidth: 100
+ * })
+ *
+ * // Add the button group to a DisplayObject
+ * app.scene.addChild(buttonGroup)
+ *
+ * @class
+ * @extends PIXI.Graphics
+ * @see {@link http://pixijs.download/dev/docs/PIXI.Graphics.html|PIXI.Graphics}
+ * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/buttongroup.html|DocTest}
+ */
+ class ButtonGroup extends PIXI.Container {
+ /**
+ * Creates an instance of a ButtonGroup.
+ *
+ * @constructor
+ * @param {object} [opts] - An options object to specify to style and behaviour of the button group.
+ * @param {number} [opts.id=auto generated] - The id of the button group.
+ * @param {number} [opts.x=0] - The x position of the button group. Can be also set after creation with buttonGroup.x = 0.
+ * @param {number} [opts.y=0] - The y position of the button group. Can be also set after creation with buttonGroup.y = 0.
+ * @param {object[]} [opts.buttons=[]] - An array of the buttons of the button group. One item of the array (one object)
+ * can have exactly the same properties as an Button object when instantiating a Button. If a property of the button group
+ * conflicts with a property of a button object, the value from the button object will be used.
+ * @param {string|Theme=} [opts.theme=dark] - The theme to use for this button group. Possible values are dark, light, red
+ * or a Theme object.
+ * @param {number} [opts.minWidth=44] - Button: The minimum width of one button.
+ * @param {number} [opts.minHeight=44] - Button: The minimum height of one button.
+ * @param {number} [opts.maxWidth] - The maximum width of the button group. Only used if stacked is true and the orientation is horizontal.
+ * @param {number} [opts.maxHeight] - The maximum height of the button group. Only used if stacked is true and the orientation is vertical.
+ * @param {boolean} [opts.stacked=false] - If set to true, the buttons of the button group gets stacked if they are broader or higher than the maximum permitted width or height, depending on orientation.
+ * @param {PIXI.Application} [opts.app] - The PixiJS Application. Must be set if you want to use the mousewheel to scroll your button group.
+ * @param {number} [opts.padding=Theme.padding] - Button: The inner spacing (distance from icon and/or label) the the border.
+ * @param {number} [opts.margin=Theme.margin] - The outer spacing (distance from one button to the previous/next button).
+ * @param {string} [opts.iconPosition=left] - Button: The position of the icon in relation to the label. Can be left or right.
+ * @param {number} [opts.iconColor=Theme.iconColor] - Button: The color of the icon (set by the tint property) as a hex value.
+ * @param {number} [opts.iconColorActive=Theme.iconColorActive] - Button: The color of the icon when activated.
+ * @param {number} [opts.fill=Theme.fill] - Button: The color of the button background as a hex value.
+ * @param {number} [opts.fillAlpha=Theme.fillAlpha] - Button: The alpha value of the background.
+ * @param {number} [opts.fillActive=Theme.fillActive] - Button: The color of the button background when activated.
+ * @param {number} [opts.fillActiveAlpha=Theme.fillActiveAlpha] - Button: The alpha value of the background when activated.
+ * @param {number} [opts.stroke=Theme.stroke] - Button: The color of the border as a hex value.
+ * @param {number} [opts.strokeWidth=Theme.strokeWidth] - Button: The width of the border in pixel.
+ * @param {number} [opts.strokeAlpha=Theme.strokeAlpha] - Button: The alpha value of the border.
+ * @param {number} [opts.strokeActive=Theme.strokeActive] - Button: The color of the border when activated.
+ * @param {number} [opts.strokeActiveWidth=Theme.strokeActiveWidth] - Button: The width of the border in pixel when activated.
+ * @param {number} [opts.strokeActiveAlpha=Theme.strokeActiveAlpha] - Button: The alpha value of the border when activated.
+ * @param {object} [opts.textStyle=Theme.textStyle] - Button: A textstyle object for the styling of the label. See PIXI.TextStyle
+ * for possible options.
+ * @param {number} [opts.textStyleActive=Theme.textStyleActive] - Button: A textstyle object for the styling of the label when the
+ * button is activated. See PIXI.TextStyle for possible options.
+ * @param {string} [opts.style=default] - A shortcut for styling options. Possible values are default, link.
+ * @param {number} [opts.radius=Theme.radius] - Button: The radius of the four corners of the button (which is a rounded rectangle).
+ * @param {boolean} [opts.disabled=false] - Is the button group disabled? When disabled, the button group has a lower alpha value
+ * and cannot be clicked (interactive of every button is set to false).
+ * @param {string} [opts.type=default] - The type of the button group. Can be default, checkbox or radio. When the type is
+ * checkbox, the active state is toggled for each button automatically. When the type is radio, only one button can
+ * be activated at the same time.
+ * @param {string} [opts.orientation=horizontal] - The orientation of the button group. Can be horizontal or vertical.
+ * @param {string} [opts.align=center] - Button: The horizontal position of the label and the icon. Possible values are
+ * left, center and right. Only affects the style when the minWidth is bigger than the width of the icon and label.
+ * @param {string} [opts.verticalAlign=middle] - Button: The vertical position of the label and the icon. Possible values are
+ * top, middle and bottom. Only affects the style when the minHeight is bigger than the height of the icon and label.
+ * @param {boolean} [opts.visible=true] - Is the button group initially visible (property visible)?
+ */
+ constructor(opts = {}) {
+ super();
+
+ const theme = Theme.fromString(opts.theme);
+ this.theme = theme;
+
+ this.opts = Object.assign(
+ {},
+ {
+ id: PIXI.utils.uid(),
+ x: 0,
+ y: 0,
+ buttons: [],
+ minWidth: 44,
+ minHeight: 44,
+ maxWidth: null,
+ maxHeight: null,
+ stacked: false,
+ app: null,
+ padding: theme.padding,
+ margin: theme.margin,
+ iconPosition: 'left', // left, right
+ iconColor: theme.iconColor,
+ iconColorActive: theme.iconColorActive,
+ fill: theme.fill,
+ fillAlpha: theme.fillAlpha,
+ fillActive: theme.fillActive,
+ fillActiveAlpha: theme.fillActiveAlpha,
+ stroke: theme.stroke,
+ strokeWidth: theme.strokeWidth,
+ strokeAlpha: theme.strokeAlpha,
+ strokeActive: theme.strokeActive,
+ strokeActiveWidth: theme.strokeActiveWidth,
+ strokeActiveAlpha: theme.strokeActiveAlpha,
+ textStyle: theme.textStyle,
+ textStyleActive: theme.textStyleActive,
+ style: 'default',
+ radius: theme.radius,
+ disabled: null,
+ type: 'default', // default, checkbox, radio
+ orientation: 'horizontal',
+ align: 'center', // left, center, right
+ verticalAlign: 'middle', // top, middle, bottom
+ visible: true
+ },
+ opts
+ );
+
+ this.buttons = [];
+
+ this._disabled = null;
+ this.__dragging = false;
+
+ this.visible = this.opts.visible;
+
+ // setup
+ //-----------------
+ this.setup();
+
+ // layout
+ //-----------------
+ this.layout();
+ }
+
+ /**
+ * Creates children and instantiates everything.
+ *
+ * @private
+ * @return {ButtonGroup} A reference to the button group for chaining.
+ */
+ setup() {
+ // inner container
+ //--------------------
+ const container = new PIXI.Graphics();
+ this.addChild(container);
+ this.container = container;
+
+ // Buttons
+ //-----------------
+ let position = 0;
+
+ for (let it of this.opts.buttons) {
+ delete it.x;
+ delete it.y;
+
+ if (this.opts.orientation === 'horizontal') {
+ it.x = position;
+ } else {
+ it.y = position;
+ }
+
+ it.theme = it.theme || this.opts.theme;
+ it.minWidth = it.minWidth || this.opts.minWidth;
+ it.minHeight = it.minHeight || this.opts.minHeight;
+ it.padding = it.padding || this.opts.padding;
+ it.iconPosition = it.iconPosition || this.opts.iconPosition;
+ it.iconColor = it.iconColor || this.opts.iconColor;
+ it.iconColorActive = it.iconColorActive || this.opts.iconColorActive;
+ it.fill = it.fill || this.opts.fill;
+ it.fillAlpha = it.fillAlpha || this.opts.fillAlpha;
+ it.fillActive = it.fillActive || this.opts.fillActive;
+ it.fillActiveAlpha = it.fillActiveAlpha || this.opts.fillActiveAlpha;
+ it.stroke = it.stroke || this.opts.stroke;
+ it.strokeWidth = it.strokeWidth != null ? it.strokeWidth : this.opts.strokeWidth;
+ it.strokeAlpha = it.strokeAlpha != null ? it.strokeAlpha : this.opts.strokeAlpha;
+ it.strokeActive = it.strokeActive || this.opts.strokeActive;
+ it.strokeActiveWidth = it.strokeActiveWidth != null ? it.strokeActiveWidth : this.opts.strokeActiveWidth;
+ it.strokeActiveAlpha = it.strokeActiveAlpha != null ? it.strokeActiveAlpha : this.opts.strokeActiveAlpha;
+ it.textStyle = it.textStyle || this.opts.textStyle;
+ it.textStyleActive = it.textStyleActive || this.opts.textStyleActive;
+ it.style = it.style || this.opts.style;
+ it.radius = it.radius != null ? it.radius : this.opts.radius;
+ if (!it.type) {
+ switch (this.opts.type) {
+ case 'checkbox':
+ it.type = this.opts.type;
+ break
+ default:
+ it.type = 'default';
+ break
+ }
+ }
+ //it.type = it.type || this.opts.type || 'default'
+ it.align = it.align || this.opts.align;
+ it.verticalAlign = it.verticalAlign || this.opts.verticalAlign;
+ it.afterAction = (event, button) => {
+ if (this.opts.type === 'radio' && button.opts.type === 'default') {
+ this.buttons.forEach(it => {
+ if (it.opts.type === 'default') {
+ it.active = false;
+ }
+ });
+
+ if (button.opts.type === 'default') {
+ button.active = true;
+ }
+ }
+ };
+
+ if (it.tooltip) {
+ if (typeof it.tooltip === 'string') {
+ it.tooltip = { content: it.tooltip, container: this };
+ } else {
+ it.tooltip = Object.assign({}, { container: this }, it.tooltip);
+ }
+ }
+
+ let button = new Button(it);
+
+ this.container.addChild(button);
+ this.buttons.push(button);
+
+ button.__originalPosition = {
+ x: button.x,
+ y: button.y
+ };
+
+ position += (this.opts.orientation === 'horizontal' ? button.width : button.height) + this.opts.margin;
+ }
+
+ if (this.opts.orientation === 'vertical') {
+ const maxWidth = this.getMaxButtonWidth();
+
+ this.buttons.forEach(it => {
+ it.opts.minWidth = maxWidth;
+ it.layout();
+ });
+ }
+
+ // disabled
+ //-----------------
+ if (this.opts.disabled != null) {
+ this.disabled = this.opts.disabled;
+ }
+
+ // interaction
+ //--------------------
+ if (this.opts.stacked) {
+ this.interactive = true;
+ this.on('pointerdown', this.onStart.bind(this));
+ this.on('pointermove', this.onMove.bind(this));
+ this.on('pointerup', this.onEnd.bind(this));
+ this.on('pointercancel', this.onEnd.bind(this));
+ this.on('pointerout', this.onEnd.bind(this));
+ this.on('pointerupoutside', this.onEnd.bind(this));
+ this.on('scroll', this.onScroll.bind(this));
+
+ // mousewheel
+ //--------------------
+ if (this.opts.app) {
+ const app = this.opts.app;
+ app.view.addEventListener('mousewheel', event => {
+ const bounds = this.getBounds();
+ const x = event.clientX - app.view.getBoundingClientRect().left;
+ const y = event.clientY - app.view.getBoundingClientRect().top;
+ if (bounds.contains(x, y)) {
+ event.preventDefault();
+ this.emit('scroll', event);
+ }
+ });
+ }
+
+ const background = new PIXI.Graphics();
+ background.beginFill(0x000000, 0);
+ background.drawRect(0, 0, this.width, this.height);
+ background.endFill();
+ this.addChildAt(background, 0);
+
+ this.__initWidth = this.container.width;
+ this.__deltaWidth = this.container.width - this.opts.maxWidth;
+ }
+
+ return this
+ }
+
+ /**
+ * Should be called to refresh the layout of the button group. Can be used after resizing.
+ *
+ * @return {ButtonGroup} A reference to the button group for chaining.
+ */
+ layout() {
+ // set position
+ //-----------------
+ this.position.set(this.opts.x, this.opts.y);
+
+ // draw
+ //-----------------
+ this.draw();
+
+ // stacked
+ //-----------------
+ if (this.opts.stacked) {
+ this.stack();
+ }
+
+ return this
+ }
+
+ /**
+ * Draws the canvas.
+ *
+ * @private
+ * @return {ButtonGroup} A reference to the button group for chaining.
+ */
+ draw() {
+ if (this.opts.margin === 0) {
+ this.buttons.forEach(it => it.hide());
+
+ this.container.clear();
+ this.container.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha);
+ this.container.beginFill(this.opts.fill, this.opts.fillAlpha);
+ this.container.drawRoundedRect(0, 0, this.width, this.height, this.opts.radius);
+
+ // Draw borders
+ this.container.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha / 2);
+
+ this.buttons.forEach((it, i) => {
+ if (i > 0) {
+ this.container.moveTo(it.x, it.y);
+
+ if (this.opts.orientation === 'horizontal') {
+ this.container.lineTo(it.x, it.height);
+ } else {
+ this.container.lineTo(it.width, it.y);
+ }
+ }
+ });
+
+ this.container.endFill();
+ }
+
+ return this
+ }
+
+ /**
+ * Gets or sets the disabled state. When disabled, no button of the button group can be clicked.
+ *
+ * @member {boolean}
+ */
+ get disabled() {
+ return this._disabled
+ }
+
+ set disabled(value) {
+ this._disabled = value;
+
+ this.buttons.forEach(it => (it.disabled = value));
+ }
+
+ /**
+ * Searches all buttons of the button group and returns the maximum width of one button.
+ *
+ * @private
+ * @return {number} The maximum with of a button of the button group.
+ */
+ getMaxButtonWidth() {
+ let widths = this.buttons.map(it => it.width);
+
+ return Math.max(...widths)
+ }
+
+ /**
+ * Shows the button group (sets his alpha value to 1).
+ *
+ * @return {ButtonGroup} A reference to the button group for chaining.
+ */
+ show() {
+ this.alpha = 1;
+
+ return this
+ }
+
+ /**
+ * Hides the button group (sets his alpha value to 0).
+ *
+ * @return {ButtonGroup} A reference to the button group for chaining.
+ */
+ hide() {
+ this.alpha = 0;
+
+ return this
+ }
+
+ /**
+ *
+ * @private
+ * @param {*} event
+ */
+ onStart(event) {
+ this.__dragging = true;
+
+ this.capture(event);
+
+ this.__delta = {
+ x: this.container.position.x - event.data.global.x,
+ y: this.container.position.y - event.data.global.y
+ };
+
+ TweenLite.killTweensOf(this.container.position, { x: true, y: true });
+ if (typeof ThrowPropsPlugin != 'undefined') {
+ ThrowPropsPlugin.track(this.container.position, 'x,y');
+ }
+ }
+
+ /**
+ *
+ * @private
+ * @param {*} event
+ */
+ onMove(event) {
+ if (this.__dragging) {
+ this.capture(event);
+
+ if (this.opts.orientation === 'horizontal') {
+ this.container.position.x = event.data.global.x + this.__delta.x;
+ } else {
+ this.container.position.y = event.data.global.y + this.__delta.y;
+ }
+
+ if (this.opts.stacked) {
+ this.stack();
+ }
+ }
+ }
+
+ /**
+ *
+ * @private
+ * @param {*} event
+ */
+ onEnd(event) {
+ if (this.__dragging) {
+ this.__dragging = false;
+
+ this.capture(event);
+
+ if (typeof ThrowPropsPlugin != 'undefined') {
+ const throwProps = { x: { velocity: 'auto' }, y: { velocity: 'auto' } };
+
+ if (this.opts.orientation === 'horizontal') {
+ const distanceToLeft = this.container.x;
+ const distanceToRight = this.opts.maxWidth - this.container.x - this.__initWidth;
+ if (distanceToLeft > 0 && distanceToLeft > distanceToRight) {
+ throwProps.x.end = 0;
+ } else if (distanceToRight > 0 && distanceToRight > distanceToLeft) {
+ throwProps.x.end = this.opts.maxWidth - this.__initWidth;
+ }
+ } else {
+ const distanceToTop = this.container.y;
+ const distanceToBottom = this.opts.maxHeight - this.container.y - this.container.height;
+ if (distanceToTop > 0 && distanceToTop > distanceToBottom) {
+ throwProps.y.end = 0;
+ } else if (distanceToBottom > 0 && distanceToBottom > distanceToTop) {
+ throwProps.y.end = this.opts.maxHeight - this.container.height;
+ }
+ }
+
+ ThrowPropsPlugin.to(
+ this.container.position,
+ {
+ throwProps,
+ ease: Strong.easeOut,
+ onUpdate: () => this.stack(),
+ onComplete: () => ThrowPropsPlugin.untrack(this.container.position)
+ },
+ 0.8,
+ 0.4
+ );
+ }
+ }
+ }
+
+ /**
+ *
+ * @private
+ * @param {*} event
+ */
+ onScroll(event) {
+ this.capture(event);
+
+ if (this.opts.orientation === 'horizontal') {
+ this.container.position.x -= event.deltaX;
+ if (this.container.position.x > 0) {
+ this.container.position.x = 0;
+ } else if (this.container.position.x + this.__initWidth < this.opts.maxWidth) {
+ this.container.position.x = this.opts.maxWidth - this.__initWidth;
+ }
+ } else {
+ this.container.position.y -= event.deltaY;
+ if (this.container.position.y > 0) {
+ this.container.position.y = 0;
+ } else if (this.container.position.y + this.container.height < this.opts.maxHeight) {
+ this.container.position.y = this.opts.maxHeight - this.container.height;
+ }
+ }
+
+ if (this.opts.stacked) {
+ this.stack();
+ }
+ }
+
+ /**
+ * Captures an event to inform InteractionMapper about processed events.
+ *
+ * @param {event|PIXI.InteractionEvent} event - The PIXI event to capture.
+ */
+ capture(event) {
+ const originalEvent = event.data && event.data.originalEvent ? event.data.originalEvent : event;
+ Events$1.capturedBy(originalEvent, this);
+ }
+
+ /**
+ *
+ */
+ stack() {
+ this.buttons.forEach((it, index) => {
+ if (it.__originalPosition.x + this.container.x < 0) {
+ // left border
+ it.x = -this.container.x;
+ } else if (it.__originalPosition.x + it.width > Math.abs(this.container.x) + this.opts.maxWidth) {
+ // right border
+ it.x = Math.abs(this.container.x) + this.opts.maxWidth - it.width;
+ } else {
+ it.x = it.__originalPosition.x;
+ }
+ });
+
+ this.buttons.sort((a, b) => {
+ const delta = Math.abs(this.container.x) + this.opts.maxWidth / 2;
+ const distanceA = Math.abs(a.x - delta);
+ const distanceB = Math.abs(b.x - delta);
+ if (distanceA > distanceB) {
+ return -1
+ } else if (distanceB > distanceA) {
+ return 1
+ } else {
+ return 0
+ }
+ });
+
+ this.buttons.forEach(it => {
+ const parent = it.parent;
+ parent.removeChild(it);
+ parent.addChild(it);
+ });
+ }
+ }
+
+ /**
+ * Class that represents a PixiJS InteractivePopup.
+ * The class is used for various other Popup-like classes
+ * like Popup, Message...
+ *
+ * @class
+ * @abstract
+ * @extends AbstractPopup
+ */
+ class InteractivePopup extends AbstractPopup {
+ /**
+ * Creates an instance of an InteractivePopup (only for internal use).
+ *
+ * @constructor
+ * @param {object} [opts] - An options object to specify to style and behaviour of the popup.
+ * @param {boolean} [opts.closeOnPopup=false] - Should the popup be closed when the user clicks on the popup?
+ * @param {boolean} [opts.closeButton=true] - Should a close button be displayed on the upper right corner?
+ * @param {object} [opts.button] - A Button object to be display on the lower right corner.
+ * @param {object} [opts.buttonGroup] - A ButtonGroup object to be displayed on the lower right corner.
+ */
+ constructor(opts = {}) {
+ opts = Object.assign(
+ {},
+ {
+ closeOnPopup: false,
+ closeButton: true,
+ button: null,
+ buttonGroup: null
+ },
+ opts
+ );
+
+ super(opts);
+
+ this._closeButton = null;
+ this._buttons = null;
+
+ // padding
+ this.smallPadding = this.opts.padding / 2;
+
+ // setup
+ //-----------------
+ this.setup();
+
+ // layout
+ //-----------------
+ this.layout();
+ }
+
+ /**
+ * Creates the framework and instantiates everything.
+ *
+ * @private
+ * @return {AbstractPopup} A reference to the popup for chaining.
+ */
+ setup() {
+ super.setup();
+
+ // interaction
+ //-----------------
+ this.on('pointerup', e => {
+ if (this.opts.closeOnPopup) {
+ this.hide();
+ } else {
+ e.stopPropagation();
+ }
+ });
+
+ // closeButton
+ //-----------------
+ if (this.opts.closeButton) {
+ let closeButton = PIXI.Sprite.fromImage('../../assets/icons/close.png', true);
+ closeButton.width = this.headerStyle.fontSize;
+ closeButton.height = closeButton.width;
+ closeButton.tint = this.theme.color2;
+ // This is needed, because the closeButton belongs to the content. The popup must resize with the closeButton.
+ if (this._header) {
+ closeButton.x = this._header.width + this.innerPadding;
+ } else if (this._content) {
+ closeButton.x = this._content.width + this.innerPadding;
+ }
+
+ closeButton.interactive = true;
+ closeButton.buttonMode = true;
+ closeButton.on('pointerdown', e => {
+ this.hide();
+ });
+
+ this._closeButton = closeButton;
+ this.addChild(closeButton);
+
+ // maxWidth is set and a closeButton should be displayed
+ //-----------------
+ if (this.opts.maxWidth) {
+ const wordWrapWidth =
+ this.opts.maxWidth - 2 * this.opts.padding - this.smallPadding - this._closeButton.width;
+ if (this._header) {
+ this.headerStyle.wordWrapWidth = wordWrapWidth;
+ } else if (this._content) {
+ this.textStyle.wordWrapWidth = wordWrapWidth;
+ }
+ }
+ }
+
+ // buttons
+ //-----------------
+ if (this.opts.button || this.opts.buttonGroup) {
+ if (this.opts.button) {
+ this._buttons = new Button(Object.assign({ textStyle: this.theme.textStyleSmall }, this.opts.button));
+ } else {
+ this._buttons = new ButtonGroup(
+ Object.assign({ textStyle: this.theme.textStyleSmall }, this.opts.buttonGroup)
+ );
+ }
+ this.addChild(this._buttons);
+
+ this._buttons.y = this.innerPadding + this.sy;
+ }
+
+ return this
+ }
+
+ /**
+ * Should be called to refresh the layout of the popup. Can be used after resizing.
+ *
+ * @return {AbstractPopup} A reference to the popup for chaining.
+ */
+ layout() {
+ super.layout();
+
+ // closeButton
+ //-----------------
+ if (this.opts.closeButton) {
+ this._closeButton.x = this.wantedWidth - this.smallPadding - this._closeButton.width;
+ this._closeButton.y = this.smallPadding;
+ }
+
+ // buttons
+ //-----------------
+ if (this._buttons) {
+ this._buttons.x = this.wantedWidth - this.opts.padding - this._buttons.width;
+ this._buttons.y = this.wantedHeight - this.opts.padding - this._buttons.height;
+ }
+
+ return this
+ }
+
+ /**
+ * Calculates the size of the children of the AbstractPopup.
+ * Cannot use getBounds() because it is not updated when children
+ * are removed.
+ *
+ * @private
+ * @override
+ * @returns {object} An JavaScript object width the keys width and height.
+ */
+ getInnerSize() {
+ let size = super.getInnerSize();
+
+ if (this._closeButton) {
+ size.width += this.smallPadding + this._closeButton.width;
+ }
+
+ if (this._buttons) {
+ size.width = Math.max(size.width, this._buttons.x + this._buttons.width);
+ size.height += this.innerPadding + this._buttons.height;
+ }
+
+ return size
+ }
+ }
+
+ /**
+ * Class that represents a PixiJS Popup.
+ *
+ * @example
+ * // Create the popup
+ * const popup = new Popup({
+ * header: 'Goethe',
+ * content: 'Man kann die Erfahrung nicht früh genug machen, wie entbehrlich man in der Welt ist.'
+ * })
+ *
+ * // Add the popup to a DisplayObject
+ * app.scene.addChild(popup)
+ *
+ * @class
+ * @extends InteractivePopup
+ * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/popup.html|DocTest}
+ */
+ class Popup extends InteractivePopup {
+ /**
+ * Creates an instance of a Popup.
+ *
+ * @constructor
+ * @param {object} [opts] - An options object to specify to style and behaviour of the popup.
+ * @param {boolean} [opts.closeButton=false] - Should a close button be displayed on the upper right corner?
+ * @param {number} [opts.minWidth=0] - The minimum width of the popup.
+ * @param {number} [opts.minHeight=0] - The minimum height of the popup.
+ */
+ constructor(opts = {}) {
+ opts = Object.assign(
+ {},
+ {
+ closeButton: false,
+ minWidth: 0,
+ minHeight: 0
+ },
+ opts
+ );
+
+ super(opts);
+ }
+ }
+
+ /**
+ * Class that represents a PixiJS Modal.
+ *
+ * @example
+ * // Create the button and the modal when clicked
+ * const button = new Button({
+ * label: 'Show Modal',
+ * action: e => {
+ * const modal = new Modal({
+ * app: app,
+ * header: 'This is the header',
+ * content: 'This is the text.'
+ * })
+ * app.scene.addChild(modal)
+ * }
+ * })
+ *
+ * // Add the button to a DisplayObject
+ * app.scene.addChild(button)
+ *
+ * @class
+ * @extends PIXI.Container
+ * @extends InteractivePopup
+ * @see {@link http://pixijs.download/dev/docs/PIXI.Container.html|PIXI.Container}
+ * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/modal.html|DocTest}
+ */
+ class Modal extends PIXI.Container {
+ /**
+ * Creates an instance of a Modal.
+ *
+ * @constructor
+ * @param {object} [opts] - An options object to specify to style and behaviour of the modal.
+ * @param {number} [opts.id=auto generated] - The id of the modal.
+ * @param {PIXIApp} [opts.app=window.app] - The app where the modal belongs to.
+ * @param {number} [opts.backgroundFill=Theme.background] - The color of the background.
+ * @param {number} [opts.backgroundFillAlpha=0.6] - The opacity of the background.
+ * @param {boolean} [opts.closeOnBackground=true] - Should the modal be closed when the user clicks the
+ * background?
+ * @param {boolean} [opts.visible=true] - Is the modal initially visible (property visible)?
+ */
+ constructor(opts = {}) {
+ super();
+
+ const theme = Theme.fromString(opts.theme);
+ this.theme = theme;
+
+ this.opts = Object.assign(
+ {},
+ {
+ id: PIXI.utils.uid(),
+ app: window.app,
+ backgroundFill: theme.background,
+ backgroundFillAlpha: 0.6,
+ closeOnBackground: true,
+ visible: true
+ },
+ opts
+ );
+
+ this.id = this.opts.id;
+
+ this.background = null;
+ this.popup = null;
+
+ this.alpha = 0;
+ this.visible = this.opts.visible;
+
+ // setup
+ //-----------------
+ this.setup();
+
+ // layout
+ //-----------------
+ this.layout();
+ }
+
+ /**
+ * Creates children and instantiates everything.
+ *
+ * @private
+ * @return {Modal} A reference to the modal for chaining.
+ */
+ setup() {
+ // interaction
+ //-----------------
+ this.interactive = true;
+ this.on('added', e => {
+ if (this.visible) {
+ this.show();
+ }
+ });
+
+ // background
+ //-----------------
+ let background = new PIXI.Graphics();
+ this.background = background;
+ this.addChild(this.background);
+
+ if (this.opts.closeOnBackground) {
+ background.interactive = true;
+ background.on('pointerup', e => {
+ this.hide();
+ });
+ }
+
+ // popup
+ //-----------------
+ const popupOpts = Object.assign({}, this.opts, {
+ visible: true,
+ onHidden: () => {
+ this.hide();
+ }
+ });
+ let popup = new InteractivePopup(popupOpts);
+ this.popup = popup;
+ this.addChild(popup);
+ popup.show();
+
+ return this
+ }
+
+ /**
+ * Should be called to refresh the layout of the modal. Can be used after resizing.
+ *
+ * @return {Modal} A reference to the modal for chaining.
+ */
+ layout() {
+ const width = this.opts.app.size.width;
+ const height = this.opts.app.size.height;
+
+ // background
+ //-----------------
+ this.background.clear();
+ this.background.beginFill(this.opts.backgroundFill, this.opts.backgroundFillAlpha);
+ this.background.drawRect(0, 0, width, height);
+ this.background.endFill();
+
+ // position
+ this.popup.x = width / 2 - this.popup.width / 2;
+ this.popup.y = height / 2 - this.popup.height / 2;
+
+ return this
+ }
+
+ /**
+ * Shows the modal (sets his alpha values to 1).
+ *
+ * @return {Modal} A reference to the modal for chaining.
+ */
+ show() {
+ TweenLite.to(this, this.theme.fast, {
+ alpha: 1,
+ onStart: () => (this.visible = true)
+ });
+
+ return this
+ }
+
+ /**
+ * Hides the modal (sets his alpha values to 0).
+ *
+ * @return {Modal} A reference to the modal for chaining.
+ */
+ hide() {
+ TweenLite.to(this, this.theme.fast, {
+ alpha: 0,
+ onComplete: () => (this.visible = false)
+ });
+
+ return this
+ }
+
+ /**
+ * Sets or gets the header. The getter always returns a PIXI.Text object. The setter can receive
+ * a string or a PIXI.Text object.
+ *
+ * @member {string|PIXI.Text}
+ */
+ get header() {
+ return this.popup.header
+ }
+ set header(value) {
+ this.opts.header = value;
+ this.background.destroy();
+ this.popup.destroy();
+ this.setup().layout();
+ }
+
+ /**
+ * Sets or gets the content. The getter always returns an PIXI.DisplayObject. The setter can receive
+ * a string or a PIXI.DisplayObject.
+ *
+ * @member {string|PIXI.DisplayObject}
+ */
+ get content() {
+ return this.popup.content
+ }
+ set content(value) {
+ this.opts.content = value;
+ this.background.destroy();
+ this.popup.destroy();
+ this.setup().layout();
+ }
+ }
+
+ /**
+ * Class that represents a Message. A message pops up and disappears after a specific amount of time.
+ *
+ * @example
+ * // Create the PixiJS App
+ * const app = new PIXIApp({
+ * view: canvas,
+ * width: 900,
+ * height: 250
+ * }).setup().run()
+ *
+ * // Create a button
+ * let button = new Button({
+ * label: 'Click me',
+ * action: e => {
+ * const message = new Message({
+ * app: app,
+ * header: 'Header',
+ * content: 'Text.'
+ * })
+ * app.scene.addChild(message)
+ * }
+ * })
+ *
+ * // Add the button to the scene
+ * app.scene.addChild(button)
+ *
+ * @class
+ * @extends InteractivePopup
+ * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/message.html|DocTest}
+ */
+ class Message extends InteractivePopup {
+ /**
+ * Creates an instance of a Message.
+ *
+ * @constructor
+ * @param {object} [opts] - An options object to specify to style and behaviour of the message.
+ * @param {PIXIApp} [opts.app=window.app] - The PIXIApp where this message belongs to.
+ * @param {boolean} [opts.closeButton=false] - Should a close button be displayed in the upper right corner?
+ * @param {number} [opts.minWidth=280] - The minimum width of the message box. Automatically expands with the content.
+ * @param {number} [opts.minHeight=100] - The minimum height of the message box. Automatically expands with the content.
+ * @param {number} [opts.margin=Theme.margin] - The outer spacing of the message box.
+ * @param {string} [opts.align=right] - The horizontal position of the message box relative to the app. Possible
+ * values are left, center, right.
+ * @param {string} [opts.verticalAlign=top] - The vertical position of the message box relative to the app. Possible
+ * values are top, middle, bottom.
+ * @param {number} [opts.duration=5] - The duration in seconds when the message box should disappear.
+ * @param {boolean} [opts.autoClose=true] - Should the message box be closed automatically?
+ * @param {number} [opts.closeDuration=Theme.fast] - The duration in seconds of the closing of the message box.
+ */
+ constructor(opts = {}) {
+ const theme = Theme.fromString(opts.theme);
+
+ opts = Object.assign(
+ {},
+ {
+ app: window.app,
+ closeButton: false,
+ minWidth: 280,
+ minHeight: 100,
+ margin: theme.margin,
+ align: 'right', // left, center, right
+ verticalAlign: 'top', // top, middle, bottom
+ duration: 5,
+ autoClose: true,
+ closeDuration: theme.fast
+ },
+ opts
+ );
+
+ super(opts);
+ }
+
+ /**
+ * Relayouts the position of the message box.
+ *
+ * @return {Message} Returns the message box for chaining.
+ */
+ layout() {
+ super.layout();
+
+ // horizontal
+ switch (this.opts.align) {
+ case 'left':
+ this.x = this.opts.margin;
+ break
+ case 'center':
+ this.x = this.opts.app.size.width / 2 - this.width / 2;
+ break
+ case 'right':
+ this.x = this.opts.app.size.width - this.opts.margin - this.width;
+ break
+ }
+
+ // vertical
+ switch (this.opts.verticalAlign) {
+ case 'top':
+ this.y = this.opts.margin;
+ break
+ case 'middle':
+ this.y = this.opts.app.size.height / 2 - this.height / 2;
+ break
+ case 'bottom':
+ this.y = this.opts.app.size.height - this.opts.margin - this.height;
+ break
+ }
+ }
+
+ /**
+ * Shows the message box.
+ *
+ * @private
+ */
+ show() {
+ super.show();
+
+ if (this.opts.autoClose) {
+ window.setTimeout(() => {
+ this.hide();
+ }, this.opts.duration * 1000);
+ }
+ }
+ }
+
/* global apollo, subscriptions, gql */
/**
@@ -4015,10 +4055,7 @@
let dy = 0;
let canvas = this.renderer.view;
let context = canvas.getContext('webgl');
- if (
- context.drawingBufferWidth < canvas.width ||
- context.drawingBufferHeight < canvas.height
- ) {
+ if (context.drawingBufferWidth < canvas.width || context.drawingBufferHeight < canvas.height) {
extendWidth = context.drawingBufferWidth / canvas.width;
extendHeight = context.drawingBufferHeight / canvas.height;
//dx = wantedWidth - context.drawingBufferWidth
@@ -4130,10 +4167,7 @@
console.log('App is in fullScreen mode or autoResize mode');
const resizeDebounced = debounce(event => this.resize(event), 50);
window.addEventListener('resize', resizeDebounced);
- document.body.addEventListener(
- 'orientationchange',
- this.checkOrientation.bind(this)
- );
+ document.body.addEventListener('orientationchange', this.checkOrientation.bind(this));
}
if (monkeyPatchMapping) {
console.log('Using monkey patched coordinate mapping');
@@ -4164,18 +4198,12 @@
uri: '/graphql'
});
- const wsClient = new subscriptions.SubscriptionClient(
- `wss://${location.hostname}/subscriptions`,
- {
- reconnect: true,
- connectionParams: {}
- }
- );
+ const wsClient = new subscriptions.SubscriptionClient(`wss://${location.hostname}/subscriptions`, {
+ reconnect: true,
+ connectionParams: {}
+ });
- const networkInterfaceWithSubscriptions = subscriptions.addGraphQLSubscriptions(
- networkInterface,
- wsClient
- );
+ const networkInterfaceWithSubscriptions = subscriptions.addGraphQLSubscriptions(networkInterface, wsClient);
this.apolloClient = new apollo.ApolloClient({
networkInterface: networkInterfaceWithSubscriptions
@@ -4311,10 +4339,7 @@
* @param {number} [opts.height=window.innerHeight] - The height of the app to resize to.
* @return {PIXIApp} - Returns the PIXIApp for chaining.
*/
- resize(
- event,
- { width = window.innerWidth, height = window.innerHeight } = {}
- ) {
+ resize(event, { width = window.innerWidth, height = window.innerHeight } = {}) {
this.width = width;
this.height = height;
this.expandRenderer();
@@ -4335,8 +4360,7 @@
monkeyPatchPixiMapping() {
if (this.originalMapPositionToPoint === null) {
let interactionManager = this.renderer.plugins.interaction;
- this.originalMapPositionToPoint =
- interactionManager.mapPositionToPoint;
+ this.originalMapPositionToPoint = interactionManager.mapPositionToPoint;
interactionManager.mapPositionToPoint = (point, x, y) => {
return this.fixedMapPositionToPoint(point, x, y)
};
@@ -4365,8 +4389,7 @@
if (
context !== null &&
- (context.drawingBufferWidth < canvas.width ||
- context.drawingBufferHeight < canvas.height)
+ (context.drawingBufferWidth < canvas.width || context.drawingBufferHeight < canvas.height)
) {
extendWidth = context.drawingBufferWidth / canvas.width;
extendHeight = context.drawingBufferHeight / canvas.height;
@@ -4375,12 +4398,7 @@
}
x *= extendWidth;
y *= extendHeight;
- return this.originalMapPositionToPoint.call(
- interactionManager,
- local,
- x,
- y + dy
- )
+ return this.originalMapPositionToPoint.call(interactionManager, local, x, y + dy)
}
/**
@@ -4431,9 +4449,7 @@
* @return {Modal} Returns the Modal object.
*/
modal(opts = {}) {
- let modal = new Modal(
- Object.assign({ theme: this.theme }, opts, { app: this })
- );
+ let modal = new Modal(Object.assign({ theme: this.theme }, opts, { app: this }));
this.scene.addChild(modal);
return modal
@@ -4446,9 +4462,7 @@
* @return {Message} Returns the Message object.
*/
message(opts = {}) {
- let message = new Message(
- Object.assign({ theme: this.theme }, opts, { app: this })
- );
+ let message = new Message(Object.assign({ theme: this.theme }, opts, { app: this }));
this.scene.addChild(message);
return message
@@ -4467,11 +4481,7 @@
* @param {boolean} [opts.progress=false] - Should a progress bar display the loading status?
* @return {PIXIApp} The PIXIApp object for chaining.
*/
- loadSprites(
- resources,
- loaded = null,
- { resolutionDependent = true, progress = false } = {}
- ) {
+ loadSprites(resources, loaded = null, { resolutionDependent = true, progress = false } = {}) {
this.loadTextures(
resources,
textures => {
@@ -4504,11 +4514,7 @@
* @param {boolean} [opts.progress=false] - Should a progress bar display the loading status?
* @return {PIXIApp} The PIXIApp object for chaining.
*/
- loadTextures(
- resources,
- loaded = null,
- { resolutionDependent = true, progress = false } = {}
- ) {
+ loadTextures(resources, loaded = null, { resolutionDependent = true, progress = false } = {}) {
if (!Array.isArray(resources)) {
resources = [resources];
}
@@ -4521,16 +4527,10 @@
let resolution = Math.round(this.renderer.resolution);
switch (resolution) {
case 2:
- loader.add(
- resource,
- resource.replace(/\.([^.]*)$/, '@2x.$1')
- );
+ loader.add(resource, resource.replace(/\.([^.]*)$/, '@2x.$1'));
break
case 3:
- loader.add(
- resource,
- resource.replace(/\.([^.]*)$/, '@3x.$1')
- );
+ loader.add(resource, resource.replace(/\.([^.]*)$/, '@3x.$1'));
break
default:
loader.add(resource);
@@ -4695,11 +4695,7 @@
pixiGlobal.x *= resolution;
pixiGlobal.y *= resolution;
// console.log("app.convertPointFromNodeToPage", pixiGlobal)
- return window.convertPointFromNodeToPage(
- app.view,
- pixiGlobal.x,
- pixiGlobal.y
- )
+ return window.convertPointFromNodeToPage(app.view, pixiGlobal.x, pixiGlobal.y)
}
}
@@ -4832,9 +4828,7 @@
return this.tiltShiftXFilter.shape
}
set shape(value) {
- this.tiltShiftXFilter.shape = this.tiltShiftYFilter.shape = this.normalize(
- value
- );
+ this.tiltShiftXFilter.shape = this.tiltShiftYFilter.shape = this.normalize(value);
}
/**
@@ -4953,12 +4947,7 @@
this.uniforms.circle = [shape.x, shape.y, shape.r];
} else {
this.uniforms.shape = 2;
- this.uniforms.rectangle = [
- shape.x,
- shape.y,
- shape.x + shape.width,
- shape.y + shape.height
- ];
+ this.uniforms.rectangle = [shape.x, shape.y, shape.x + shape.width, shape.y + shape.height];
}
this.uniforms.blur = blur;
this.uniforms.delta = new PIXI.Point(0, 0);
@@ -4992,12 +4981,7 @@
return new PIXI.Circle(circle[0], circle[1], circle[2])
} else {
const rectangle = this.uniforms.rectangle;
- return new PIXI.Rectangle(
- rectangle[0],
- rectangle[1],
- rectangle[2],
- rectangle[3]
- )
+ return new PIXI.Rectangle(rectangle[0], rectangle[1], rectangle[2], rectangle[3])
}
}
set shape(value) {
@@ -5006,12 +4990,7 @@
this.uniforms.circle = [value.x, value.y, value.r];
} else {
this.uniforms.shape = 2;
- this.uniforms.rectangle = [
- value.x,
- value.y,
- value.x + value.width,
- value.y + value.height
- ];
+ this.uniforms.rectangle = [value.x, value.y, value.x + value.width, value.y + value.height];
}
}
}
@@ -5141,11 +5120,7 @@
}
}
- static setup({
- log = console.log,
- warn = console.warn,
- error = console.error
- } = {}) {
+ static setup({ log = console.log, warn = console.warn, error = console.error } = {}) {
logHandlers.log = log;
logHandlers.warn = warn;
logHandlers.error = error;
@@ -5352,10 +5327,10 @@
delta() {
let prev = [];
let curr = [];
- let cm = { x: 0, y: 0};
- let pm = { x: 0, y: 0};
+ let cm = { x: 0, y: 0 };
+ let pm = { x: 0, y: 0 };
let count = 0;
- for(let key of this.current.keys()) {
+ for (let key of this.current.keys()) {
if (this.previous.has(key)) {
let p = this.previous.get(key);
let c = this.current.get(key);
@@ -5374,7 +5349,7 @@
let scaled = 0;
let alpha = 0;
let zoom = 1;
- for(let i=0; i t1 + this.longPressTime;
if (tookLong) {
@@ -5656,10 +5599,7 @@
this.unregisterTap(key);
}
}
- if (
- this.tapTimestamps.has(key) &&
- performance.now() > this.tapTimestamps.get(key) + this.tapDuration
- ) {
+ if (this.tapTimestamps.has(key) && performance.now() > this.tapTimestamps.get(key) + this.tapDuration) {
//console.log("tap too long")
this.unregisterTap(key);
}
@@ -5684,11 +5624,7 @@
isLongPress(key) {
let ended = this.ended.get(key);
let start = this.start.get(key);
- if (
- start &&
- ended &&
- Points.distance(ended, start) < this.tapDistance
- ) {
+ if (start && ended && Points.distance(ended, start) < this.tapDistance) {
let t1 = this.timestamps.get(key);
let tookLong = performance.now() > t1 + this.longPressTime;
if (tookLong) {
@@ -5755,9 +5691,7 @@
setupInteraction() {
if (this.debug) {
- let error = this.targetInterface.implementationError(
- this.target.constructor
- );
+ let error = this.targetInterface.implementationError(this.target.constructor);
if (error != null) {
throw new Error('Expected IInteractionTarget: ' + error)
}
@@ -5795,16 +5729,11 @@
element.addEventListener(
'pointermove',
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$1.isPointerDown(e))
- ) {
+ if (e.pointerType == 'touch' || (e.pointerType == 'mouse' && Events$1.isPointerDown(e))) {
// this.capture(e) &&
- if (this.debug)
- console.log('pointermove captured', e.pointerId);
+ if (this.debug) console.log('pointermove captured', e.pointerId);
this.onMove(e);
}
},
@@ -5813,8 +5742,7 @@
element.addEventListener(
'pointerup',
e => {
- if (this.debug)
- console.log('pointerup', e.pointerId, e.pointerType);
+ if (this.debug) console.log('pointerup', e.pointerId, e.pointerType);
this.onEnd(e);
if (this.capturePointerEvents) {
try {
@@ -5829,11 +5757,9 @@
element.addEventListener(
'pointercancel',
e => {
- if (this.debug)
- console.log('pointercancel', e.pointerId, e.pointerType);
+ if (this.debug) console.log('pointercancel', e.pointerId, e.pointerType);
this.onEnd(e);
- if (this.capturePointerEvents)
- element.releasePointerCapture(e.pointerId);
+ if (this.capturePointerEvents) element.releasePointerCapture(e.pointerId);
},
useCapture
);
@@ -5842,12 +5768,7 @@
element.addEventListener(
'pointerleave',
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);
},
useCapture
@@ -5858,12 +5779,7 @@
element.addEventListener(
'pointerout',
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);
},
useCapture
@@ -5874,13 +5790,7 @@
window.addEventListener(
'pointerout',
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) {
this.onEnd(e);
}
@@ -5893,8 +5803,7 @@
element.addEventListener(
'touchstart',
e => {
- if (this.debug)
- console.log('touchstart', this.touchPoints(e));
+ if (this.debug) console.log('touchstart', this.touchPoints(e));
if (this.capture(e)) {
for (let touch of e.changedTouches) {
this.onStart(touch);
@@ -5906,8 +5815,7 @@
element.addEventListener(
'touchmove',
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) {
this.onMove(touch);
}
@@ -5930,12 +5838,7 @@
element.addEventListener(
'touchcancel',
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) {
this.onEnd(touch);
}
@@ -5984,9 +5887,7 @@
e => {
if (e.target == element) {
this.onEnd(e);
- console.warn(
- "Shouldn't happen: mouseout ends interaction"
- );
+ console.warn("Shouldn't happen: mouseout ends interaction");
}
},
useCapture
@@ -6027,16 +5928,8 @@
}
setupMouseWheelInteraction() {
- this.mouseWheelElement.addEventListener(
- 'mousewheel',
- this.onMouseWheel.bind(this),
- true
- );
- this.mouseWheelElement.addEventListener(
- 'DOMMouseScroll',
- this.onMouseWheel.bind(this),
- true
- );
+ this.mouseWheelElement.addEventListener('mousewheel', this.onMouseWheel.bind(this), true);
+ this.mouseWheelElement.addEventListener('DOMMouseScroll', this.onMouseWheel.bind(this), true);
}
onMouseWheel(event) {
@@ -6098,10 +5991,7 @@
break
}
case 'Touch': {
- let id =
- event.touchType === 'stylus'
- ? 'stylus'
- : event.identifier.toString();
+ let id = event.touchType === 'stylus' ? 'stylus' : event.identifier.toString();
result[id] = this.getPosition(event);
break
}
@@ -6151,10 +6041,7 @@
let point = extracted[key];
let updated = this.interaction.update(key, point);
if (updated) {
- console.warn(
- "new pointer in updateInteraction shouldn't happen",
- key
- );
+ console.warn("new pointer in updateInteraction shouldn't happen", key);
this.interactionStarted(event, key, point);
}
}
@@ -6286,11 +6173,7 @@
onEnd(event) {
let extracted = this.extractPoint(event, 'changedTouches');
this.endInteraction(event, extracted);
- let mapped = this.interaction.mapInteraction(
- extracted,
- ['ended'],
- this.mapPositionToPoint.bind(this)
- );
+ let mapped = this.interaction.mapInteraction(extracted, ['ended'], this.mapPositionToPoint.bind(this));
for (let [target, interaction] of mapped.entries()) {
target.onEnd(event, interaction);
}
@@ -6324,10 +6207,7 @@
// convert to array
types = Array.isArray(types) ? types : types.split(/\s/);
- if (
- elements instanceof NodeList ||
- elements instanceof HTMLCollection
- ) {
+ if (elements instanceof NodeList || elements instanceof HTMLCollection) {
elements = Array.from(elements);
}
elements = Array.isArray(elements) ? elements : [elements];
@@ -6336,9 +6216,7 @@
const type = types[i].toLowerCase();
// list of hammer events
- const useHammer = /^(tap|doubletap|press|pan|swipe|pinch|rotate).*$/.test(
- type
- );
+ const useHammer = /^(tap|doubletap|press|pan|swipe|pinch|rotate).*$/.test(type);
// if it is a hammer event
if (useHammer) {
@@ -6353,33 +6231,15 @@
// recognizers
if (type.startsWith('pan')) {
- hammer
- .get('pan')
- .set(
- Object.assign(
- { direction: Hammer.DIRECTION_ALL },
- opts
- )
- );
+ hammer.get('pan').set(Object.assign({ direction: Hammer.DIRECTION_ALL }, opts));
} else if (type.startsWith('pinch')) {
- hammer
- .get('pinch')
- .set(Object.assign({ enable: true }, opts));
+ hammer.get('pinch').set(Object.assign({ enable: true }, opts));
} else if (type.startsWith('press')) {
hammer.get('press').set(opts);
} else if (type.startsWith('rotate')) {
- hammer
- .get('rotate')
- .set(Object.assign({ enable: true }, opts));
+ hammer.get('rotate').set(Object.assign({ enable: true }, opts));
} else if (type.startsWith('swipe')) {
- hammer
- .get('swipe')
- .set(
- Object.assign(
- { direction: Hammer.DIRECTION_ALL },
- opts
- )
- );
+ hammer.get('swipe').set(Object.assign({ direction: Hammer.DIRECTION_ALL }, opts));
} else if (type.startsWith('tap')) {
hammer.get('tap').set(opts);
}
@@ -6450,20 +6310,12 @@
*/
static get isElectron() {
// Renderer process
- if (
- typeof window !== 'undefined' &&
- typeof window.process === 'object' &&
- window.process.type === 'renderer'
- ) {
+ if (typeof window !== 'undefined' && typeof window.process === 'object' && window.process.type === 'renderer') {
return true
}
// Main process
- if (
- typeof process !== 'undefined' &&
- typeof process.versions === 'object' &&
- !!process.versions.electron
- ) {
+ if (typeof process !== 'undefined' && typeof process.versions === 'object' && !!process.versions.electron) {
return true
}
@@ -6531,9 +6383,7 @@
class CapabilitiesTests {
static testConfirm() {
let bool = confirm('Please confirm');
- document.getElementById('demo').innerHTML = bool
- ? 'Confirmed'
- : 'Not confirmed';
+ document.getElementById('demo').innerHTML = bool ? 'Confirmed' : 'Not confirmed';
}
static testPrompt() {
@@ -6554,9 +6404,7 @@
}
static testMultiTouchTable() {
- let value =
- 'Is the device a multi-touch table? ' +
- Capabilities.isMultiTouchTable;
+ let value = 'Is the device a multi-touch table? ' + Capabilities.isMultiTouchTable;
multi_touch_table.innerHTML = value;
}
@@ -6617,14 +6465,7 @@
class ScatterEvent extends BaseEvent {
constructor(
target,
- {
- translate = { x: 0, y: 0 },
- scale = null,
- rotate = 0,
- about = null,
- fast = false,
- type = null
- } = {}
+ { translate = { x: 0, y: 0 }, scale = null, rotate = 0, about = null, fast = false, type = null } = {}
) {
super('scatterTransformed', { target: target });
this.translate = translate;
@@ -6637,13 +6478,7 @@
toString() {
return (
- "Event('scatterTransformed', scale: " +
- this.scale +
- ' about: ' +
- this.about.x +
- ', ' +
- this.about.y +
- ')'
+ "Event('scatterTransformed', scale: " + this.scale + ' about: ' + this.about.x + ', ' + this.about.y + ')'
)
}
}
@@ -6663,13 +6498,7 @@
}
toString() {
- return (
- 'Event(scatterResized width: ' +
- this.width +
- 'height: ' +
- this.height +
- ')'
- )
+ return 'Event(scatterResized width: ' + this.width + 'height: ' + this.height + ')'
}
}
@@ -6944,6 +6773,13 @@
close() {
if (this.onClose) {
this.onClose.forEach(callback => callback(this));
+
+ /**
+ Removes self from container when it's closed.
+ */
+ if (this.container) {
+ this.container.remove(this);
+ }
}
}
@@ -7077,10 +6913,7 @@
_checkAutoClose() {
if (this.scaleAutoClose)
- if (
- this.scale <
- this.minScale + this.scaleCloseThreshold - this.scaleCloseBuffer
- ) {
+ if (this.scale < this.minScale + this.scaleCloseThreshold - this.scaleCloseBuffer) {
this.zoom(this.minScale, {
animate: 0.2,
onComplete: this.close.bind(this)
@@ -7135,17 +6968,7 @@
this.move(delta, { animate: animate });
}
- zoom(
- scale,
- {
- animate = 0,
- about = null,
- delay = 0,
- x = null,
- y = null,
- onComplete = null
- } = {}
- ) {
+ zoom(scale, { animate = 0, about = null, delay = 0, x = null, y = null, onComplete = null } = {}) {
let anchor = about || this.center;
if (scale != this.scale) {
if (animate > 0) {
@@ -7196,15 +7019,9 @@
let origin = this.rotationOrigin;
let beta = Points.angle(origin, anchor);
let distance = Points.distance(origin, anchor);
- let { scale: newScale, zoom: thresholdedZoom } = this.calculateScale(
- zoom
- );
+ let { scale: newScale, zoom: thresholdedZoom } = this.calculateScale(zoom);
- 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 offset = Points.subtract(anchor, origin);
this._move(offset);
@@ -7267,10 +7084,8 @@
}
calculateScaleTransparency() {
- let transparency =
- (this.scale - this.minScale) / this.scaleCloseThreshold;
- transparency =
- transparency > 1 ? 1 : transparency < 0 ? 0 : transparency;
+ let transparency = (this.scale - this.minScale) / this.scaleCloseThreshold;
+ transparency = transparency > 1 ? 1 : transparency < 0 ? 0 : transparency;
return transparency
}
@@ -7328,8 +7143,7 @@
if (this.scaleAutoClose) {
if (this.scale <= this.minScale + this.scaleCloseThreshold) {
- if (this.scaleAutoCloseTimeout)
- clearTimeout(this.scaleAutoCloseTimeout);
+ if (this.scaleAutoCloseTimeout) clearTimeout(this.scaleAutoCloseTimeout);
this.scaleAutoCloseTimeout = setTimeout(() => {
this._checkAutoClose();
}, 600);
@@ -7870,10 +7684,8 @@
let resizeH = -r * Math.sin(Angle.degree2radian(phiCorrected));
if (
- (this.element.offsetWidth + resizeW) / this.scale >
- (this.width * 0.5) / this.scale &&
- (this.element.offsetHeight + resizeH) / this.scale >
- (this.height * 0.3) / this.scale
+ (this.element.offsetWidth + resizeW) / this.scale > (this.width * 0.5) / this.scale &&
+ (this.element.offsetHeight + resizeH) / this.scale > (this.height * 0.3) / this.scale
)
TweenLite.to(this.element, 0, {
width: this.element.offsetWidth + resizeW / this.scale,
@@ -8034,28 +7846,22 @@
frontLoaded(loader) {
return new Promise((resolve, reject) => {
- let scatter = new DOMScatter(
- this.cardWrapper,
- this.domScatterContainer,
- {
- x: loader.x,
- y: loader.y,
- startScale: loader.scale,
- scale: loader.scale,
- maxScale: loader.maxScale,
- minScale: loader.minScale,
- width: loader.wantedWidth,
- height: loader.wantedHeight,
- rotation: loader.rotation,
- translatable: this.translatable,
- scalable: this.scalable,
- rotatable: this.rotatable,
- overdoScaling: this.overdoScaling,
- tapDelegate: this.tapDelegateFactory
- ? this.tapDelegateFactory(this.cardWrapper)
- : null
- }
- );
+ let scatter = new DOMScatter(this.cardWrapper, this.domScatterContainer, {
+ x: loader.x,
+ y: loader.y,
+ startScale: loader.scale,
+ scale: loader.scale,
+ maxScale: loader.maxScale,
+ minScale: loader.minScale,
+ width: loader.wantedWidth,
+ height: loader.wantedHeight,
+ rotation: loader.rotation,
+ translatable: this.translatable,
+ scalable: this.scalable,
+ rotatable: this.rotatable,
+ overdoScaling: this.overdoScaling,
+ tapDelegate: this.tapDelegateFactory ? this.tapDelegateFactory(this.cardWrapper) : null
+ });
if (this.center) {
scatter.centerAt(this.center);
@@ -8072,9 +7878,7 @@
//Remove callback
if (scatter.onTransform) {
- let callbackIdx = scatter.onTransform.indexOf(
- removeOnMinScale
- );
+ let callbackIdx = scatter.onTransform.indexOf(removeOnMinScale);
scatter.onTransform.splice(callbackIdx, 1);
}
}
@@ -8348,9 +8152,7 @@
this.flipped = !this.flipped;
let targetY = this.flipped ? 180 : 0;
- let targetZ = this.flipped
- ? this.startAngle + this.targetRotation(this.startAngle)
- : this.startAngle;
+ let targetZ = this.flipped ? this.startAngle + this.targetRotation(this.startAngle) : this.startAngle;
let targetScale = this.flipped ? this.wantedScale : this.startScale;
let w = this.flipped ? this.wantedWidth : this.startWidth;
let h = this.flipped ? this.wantedHeight : this.startHeight;
@@ -10480,15 +10282,9 @@
this.scatter = scatter;
this.backLoader = backLoader;
this.scatterLoader = new ScatterLoader(scatter);
- this.domFlip = new DOMFlip(
- domScatterContainer,
- flipTemplate,
- this.scatterLoader,
- backLoader,
- {
- onBack: this.backCardClosed.bind(this)
- }
- );
+ this.domFlip = new DOMFlip(domScatterContainer, flipTemplate, this.scatterLoader, backLoader, {
+ onBack: this.backCardClosed.bind(this)
+ });
this.setupInfoButton();
}
@@ -10515,11 +10311,7 @@
let center = this.scatter.center;
let canvas = app.renderer.view;
let domNode = this.domFlip.domScatterContainer.element;
- let page = window.convertPointFromNodeToPage(
- canvas,
- center.x * resolution,
- center.y * resolution
- );
+ let page = window.convertPointFromNodeToPage(canvas, center.x * resolution, center.y * resolution);
let local = window.convertPointFromPageToNode(domNode, page.x, page.y);
return local
}
@@ -10599,9 +10391,7 @@
canvas.height = 44 * 4;
svgImage.onload = e => {
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));
this.infoBtn = new PIXI.Sprite(texure);
this.infoBtn.anchor.set(0.5, 0.5);
@@ -10751,12 +10541,7 @@
// planes
//--------------------
- this.setPlanes(
- this.opts.focus,
- this.opts.near,
- this.opts.far,
- this.opts.orthographic
- );
+ this.setPlanes(this.opts.focus, this.opts.near, this.opts.far, this.opts.orthographic);
// flipped
//--------------------
@@ -10795,9 +10580,7 @@
// shadow
//--------------------
- const shadow = new PIXI.projection.Sprite3d(
- PIXI.Texture.fromImage('../../assets/images/shadow.png')
- );
+ const shadow = new PIXI.projection.Sprite3d(PIXI.Texture.fromImage('../../assets/images/shadow.png'));
shadow.renderable = false;
shadow.anchor.set(0.5);
shadow.scale3d.set(0.98);
@@ -10889,21 +10672,11 @@
y: this.opts.useBackTransforms ? toCenter.y : fromCenter.y,
anchorX: this.opts.useBackTransforms ? toObject.x : fromObject.x,
anchorY: this.opts.useBackTransforms ? toObject.y : fromObject.y,
- width: this.opts.useBackTransforms
- ? toObject.width * 2
- : fromObject.width * 2,
- height: this.opts.useBackTransforms
- ? toObject.height * 2
- : fromObject.height * 2,
- rotation: this.opts.useBackTransforms
- ? toObject.rotation
- : fromObject.rotation,
- skewX: this.opts.useBackTransforms
- ? toObject.skew.x
- : fromObject.skew.x,
- skewY: this.opts.useBackTransforms
- ? toObject.skew.y
- : fromObject.skew.y
+ width: this.opts.useBackTransforms ? toObject.width * 2 : fromObject.width * 2,
+ height: this.opts.useBackTransforms ? toObject.height * 2 : fromObject.height * 2,
+ rotation: this.opts.useBackTransforms ? toObject.rotation : fromObject.rotation,
+ skewX: this.opts.useBackTransforms ? toObject.skew.x : fromObject.skew.x,
+ skewY: this.opts.useBackTransforms ? toObject.skew.y : fromObject.skew.y
};
// set toObject end values
@@ -10989,15 +10762,11 @@
// shadow
//--------------------
- new TimelineMax()
- .to(shadow, half, { alpha: 0.3, ease })
- .to(shadow, half, { alpha: 0.7, ease });
+ new TimelineMax().to(shadow, half, { alpha: 0.3, ease }).to(shadow, half, { alpha: 0.7, ease });
// blurfilter
//--------------------
- new TimelineMax()
- .to(blurFilter, half, { blur: 6, ease })
- .to(blurFilter, half, { blur: 0.2, ease });
+ new TimelineMax().to(blurFilter, half, { blur: 6, ease }).to(blurFilter, half, { blur: 0.2, ease });
}
/**
@@ -11011,8 +10780,7 @@
const shadow = this.objects.shadow;
const inner = this.objects.inner;
- inner.position3d.z =
- -Math.sin(inner.euler.y) * front.texture.baseTexture.width * 2;
+ inner.position3d.z = -Math.sin(inner.euler.y) * front.texture.baseTexture.width * 2;
//this.objects.shadow.euler = this.objects.inner.euler
shadow.euler.x = -inner.euler.x;
@@ -11079,10 +10847,7 @@
generateTexture(displayObject) {
// renderTexture
//--------------------
- const renderTexture = PIXI.RenderTexture.create(
- displayObject.width,
- displayObject.height
- );
+ const renderTexture = PIXI.RenderTexture.create(displayObject.width, displayObject.height);
// save position
const transform = [
@@ -11169,12 +10934,8 @@
wordWrapWidth: width - this.padding * 2
};
- this.titleTextStyle = new PIXI.TextStyle(
- Object.assign({}, style, titleStyle)
- );
- this.textTextStyle = new PIXI.TextStyle(
- Object.assign({}, style, textStyle)
- );
+ this.titleTextStyle = new PIXI.TextStyle(Object.assign({}, style, titleStyle));
+ this.textTextStyle = new PIXI.TextStyle(Object.assign({}, style, textStyle));
if (title || text) {
this.setup();
@@ -11197,10 +10958,7 @@
if (this.opts.text) {
this.textText = new PIXI.Text(this.opts.text, this.textTextStyle);
- this.textText.position.set(
- this.padding,
- this.titleY + this.titleHeight + this.padding
- );
+ this.textText.position.set(this.padding, this.titleY + this.titleHeight + this.padding);
this.addChild(this.textText);
}
@@ -11414,12 +11172,8 @@
let y = 0;
// @container: We need to call the constant values, as the container
// gets resized, when a child moves outside the original boundaries.
- let w = this.container
- ? this.containerDimensions.x
- : this.backgroundWidth || this.app.width;
- let h = this.container
- ? this.containerDimensions.y
- : this.backgroundHeight || this.app.height;
+ let w = this.container ? this.containerDimensions.x : this.backgroundWidth || this.app.width;
+ let h = this.container ? this.containerDimensions.y : this.backgroundHeight || this.app.height;
if (this.app.fullscreen && this.app.monkeyPatchMapping) {
let fixed = this.mapPositionToPoint({ x: w, y: 0 });
@@ -11502,14 +11256,8 @@
// if (hit) {
// console.log("findHitScatter", displayObject)
// }
- if (
- hit &&
- this.hitScatter === null &&
- typeof displayObject != undefined
- ) {
- this.hitScatter = displayObject.scatter
- ? displayObject.scatter
- : null;
+ if (hit && this.hitScatter === null && typeof displayObject != undefined) {
+ this.hitScatter = displayObject.scatter ? displayObject.scatter : null;
}
}
@@ -11519,10 +11267,7 @@
let local = new PIXI.Point();
let interactionManager = this.renderer.plugins.interaction;
interactionManager.mapPositionToPoint(local, point.x, point.y);
- if (
- element instanceof DisplayObjectScatter &&
- element.displayObject.parent != null
- ) {
+ if (element instanceof DisplayObjectScatter && element.displayObject.parent != null) {
return element.displayObject.parent.toLocal(local)
}
return local
@@ -11539,12 +11284,7 @@
this.hitScatter = null;
let interactionManager = this.renderer.plugins.interaction;
let fakeEvent = this.fakeInteractionEvent(local);
- interactionManager.processInteractive(
- fakeEvent,
- this,
- this.findHitScatter.bind(this),
- true
- );
+ interactionManager.processInteractive(fakeEvent, this, this.findHitScatter.bind(this), true);
if (this.claimEvents) event.claimedByScatter = this.hitScatter;
return this.hitScatter
}
@@ -11558,8 +11298,7 @@
this.hitScatter = null;
let interactionManager = this.renderer.plugins.interaction;
let displayObject = interactionManager.hitTest(local, this);
- if (displayObject != null && displayObject.scatter != null)
- this.hitScatter = displayObject.scatter;
+ if (displayObject != null && displayObject.scatter != null) this.hitScatter = displayObject.scatter;
if (this.claimEvents) event.claimedByScatter = this.hitScatter;
return this.hitScatter
}
@@ -11694,8 +11433,7 @@
get container() {
// return this.displayObject.parent
let obj = this.displayObject;
- while (obj.parent != null && !(obj.parent instanceof ScatterContainer))
- obj = obj.parent;
+ while (obj.parent != null && !(obj.parent instanceof ScatterContainer)) obj = obj.parent;
return obj.parent
}
@@ -11804,8 +11542,7 @@
mapPositionToContainerPoint(point) {
// UO: We need the coordinates related to this scatter in case
// of nested scatters
- if (this.container != null)
- return this.container.mapPositionToPoint(point, this)
+ if (this.container != null) return this.container.mapPositionToPoint(point, this)
return point
}
@@ -11818,10 +11555,7 @@
if (this.displayObject.parent instanceof ScatterContainer) {
let scatterContainer = this.displayObject.parent;
scatterContainer.bringToFront(this.displayObject);
- } else if (
- this.displayObject.parent != null &&
- this.displayObject.parent.scatter
- ) {
+ } else if (this.displayObject.parent != null && this.displayObject.parent.scatter) {
this.displayObject.parent.scatter.toFront(this.displayObject);
}
}
@@ -11970,21 +11704,9 @@
setupToolbar() {
this.toolbar = new PIXI.Graphics();
- this.record = new RecordCommand(
- this,
- 0xcc0000,
- new PIXI.Circle(0, 0, 16)
- );
- this.play = new PlayCommand(
- this,
- 0x0000cc,
- new PIXI.Polygon(0, 16, 32, 16 + 16, 0, 16 + 32, 0, 16)
- );
- this.stop = new StopCommand(
- this,
- 0x0000cc,
- new PIXI.Rectangle(0, 0, 32, 32)
- );
+ this.record = new RecordCommand(this, 0xcc0000, new PIXI.Circle(0, 0, 16));
+ this.play = new PlayCommand(this, 0x0000cc, new PIXI.Polygon(0, 16, 32, 16 + 16, 0, 16 + 32, 0, 16));
+ this.stop = new StopCommand(this, 0x0000cc, new PIXI.Rectangle(0, 0, 32, 32));
this.toolbar.addChild(this.record).position.set(44, 48);
this.toolbar.addChild(this.play).position.set(44 + 44, 16);
this.toolbar.addChild(this.stop).position.set(44 + 44 + 44 + 16, 32);
@@ -12022,11 +11744,7 @@
mapPositionToPoint(point) {
let local = new PIXI.Point();
- this.renderer.plugins.interaction.mapPositionToPoint(
- local,
- point.x,
- point.y
- );
+ this.renderer.plugins.interaction.mapPositionToPoint(local, point.x, point.y);
return local
}
@@ -12205,15 +11923,9 @@
let first = true;
let lastPart = '';
for (let part of parts) {
- let partMetrics = PIXI.TextMetrics.measureText(
- part,
- pixiStyle
- );
+ let partMetrics = PIXI.TextMetrics.measureText(part, pixiStyle);
if (x + partMetrics.width + space.width > width) {
- newWord +=
- (first || lastPart.endsWith('-')
- ? '\n'
- : '-\n') + part;
+ newWord += (first || lastPart.endsWith('-') ? '\n' : '-\n') + part;
x = partMetrics.width;
} else {
newWord += part;
@@ -12264,12 +11976,7 @@
* @param {canvas}
* @memberof TextLabel
*/
- constructor(
- text,
- style = null,
- canvas = null,
- { minZoom = 0.1, maxZoom = 10 } = {}
- ) {
+ constructor(text, style = null, canvas = null, { minZoom = 0.1, maxZoom = 10 } = {}) {
super(text, style, canvas);
this.normFontSize = this.style.fontSize;
this.minZoom = minZoom;
@@ -12418,21 +12125,11 @@
const truncatedLines = lines.slice(0, maxLines);
const lastLine = truncatedLines[truncatedLines.length - 1];
const words = lastLine.split(' ');
- const wordMetrics = PIXI.TextMetrics.measureText(
- `\u00A0\n...\n${words.join('\n')}`,
- pixiStyle
- );
- const [
- spaceLength,
- dotsLength,
- ...wordLengths
- ] = wordMetrics.lineWidths;
+ const wordMetrics = PIXI.TextMetrics.measureText(`\u00A0\n...\n${words.join('\n')}`, pixiStyle);
+ const [spaceLength, dotsLength, ...wordLengths] = wordMetrics.lineWidths;
const { text: newLastLine } = wordLengths.reduce(
(data, wordLength, i) => {
- if (
- data.length + wordLength + spaceLength >=
- wordWrapWidth
- ) {
+ if (data.length + wordLength + spaceLength >= wordWrapWidth) {
return { ...data, length: wordWrapWidth }
}
return {
@@ -12633,24 +12330,13 @@
return date.toLocaleDateString('de', format)
}
- draw(
- timeline,
- range,
- width,
- height,
- available,
- format,
- nextFormat,
- level,
- extraTicks = false
- ) {
+ draw(timeline, range, width, height, available, format, nextFormat, level, extraTicks = false) {
let first = null;
let last = null;
let keyedFormat = format ? format[this.formatKey] : null;
let keyedNextFormat = nextFormat ? nextFormat[this.formatKey] : null;
let redundant = nextFormat ? this.formatKey in nextFormat : false;
- let fullyRedundant =
- keyedFormat != null && keyedFormat == keyedNextFormat;
+ let fullyRedundant = keyedFormat != null && keyedFormat == keyedNextFormat;
let y = timeline.getY();
for (let { start, end } of this.iterRanges(range)) {
let x = timeline.toX(start);
@@ -12675,12 +12361,7 @@
}
if (!fullyRedundant) {
- timeline.ensureLabel(
- key,
- text,
- { x: xx, y: yy, align },
- FontInfo.small
- );
+ timeline.ensureLabel(key, text, { x: xx, y: yy, align }, FontInfo.small);
}
if (extraTicks) timeline.drawTick(x, -level);
}
@@ -12830,11 +12511,7 @@
}
iterStart(start) {
- return Dates.create(
- start.getFullYear(),
- start.getMonth(),
- start.getDate()
- )
+ return Dates.create(start.getFullYear(), start.getMonth(), start.getDate())
}
next(date) {
@@ -12875,10 +12552,7 @@
let available = amount * size;
availables.set(ticks, available);
if (available < ticks.minWidth) break
- formats.set(
- ticks,
- available < ticks.minLabelWidth ? null : ticks.format(available)
- );
+ formats.set(ticks, available < ticks.minLabelWidth ? null : ticks.format(available));
nextFormats.set(previous, formats.get(ticks));
previous = ticks;
visible.push(ticks);
@@ -12947,16 +12621,7 @@
}
class Timeline extends BitmapLabeledGraphics {
- constructor(
- width,
- height,
- {
- ticks = null,
- baseLine = 0.5,
- showRange = true,
- throwDamping = 0.95
- } = {}
- ) {
+ constructor(width, height, { ticks = null, baseLine = 0.5, showRange = true, throwDamping = 0.95 } = {}) {
super();
this.wantedWidth = width;
this.wantedHeight = height;
@@ -12973,12 +12638,7 @@
this.deltas = [];
this.labelDates = [];
this.colorRanges = [];
- this.rangeColors = new Cycle(
- Colors.eminence,
- Colors.steelblue,
- Colors.ochre,
- Colors.turquoise
- );
+ this.rangeColors = new Cycle(Colors.eminence, Colors.steelblue, Colors.ochre, Colors.turquoise);
this.callbacks = [];
this.onTapCallbacks = [];
this.onDoubleTapCallbacks = [];
@@ -12990,14 +12650,7 @@
this.autoScroll = false;
this.direction = -1;
this.throwDamping = throwDamping;
- this.timeticks =
- ticks ||
- new TimeTicks(
- new DecadeTicks(),
- new YearTicks(),
- new MonthTicks(),
- new DayTicks()
- );
+ this.timeticks = ticks || new TimeTicks(new DecadeTicks(), new YearTicks(), new MonthTicks(), new DayTicks());
this.labelPrefix = '__';
}
@@ -13154,8 +12807,7 @@
prepareLabels() {
for (let key of this.labels.keys()) {
- if (!key.startsWith(this.labelPrefix))
- this.labels.get(key).visible = false;
+ if (!key.startsWith(this.labelPrefix)) this.labels.get(key).visible = false;
}
}
@@ -13656,10 +13308,7 @@
* @readonly
*/
get contentWidth() {
- return (
- this.options.boxWidth -
- (this.isScrollbarVertical ? this.options.scrollbarSize : 0)
- )
+ return this.options.boxWidth - (this.isScrollbarVertical ? this.options.scrollbarSize : 0)
}
/**
@@ -13668,10 +13317,7 @@
* @readonly
*/
get contentHeight() {
- return (
- this.options.boxHeight -
- (this.isScrollbarHorizontal ? this.options.scrollbarSize : 0)
- )
+ return this.options.boxHeight - (this.isScrollbarHorizontal ? this.options.scrollbarSize : 0)
}
/**
@@ -13748,19 +13394,11 @@
this.scrollbar.clear();
let options = {};
options.left = 0;
- options.right =
- this.scrollWidth +
- (this._isScrollbarVertical ? this.options.scrollbarSize : 0);
+ options.right = this.scrollWidth + (this._isScrollbarVertical ? this.options.scrollbarSize : 0);
options.top = 0;
- options.bottom =
- this.scrollHeight +
- (this.isScrollbarHorizontal ? this.options.scrollbarSize : 0);
- const width =
- this.scrollWidth +
- (this.isScrollbarVertical ? this.options.scrollbarSize : 0);
- const height =
- this.scrollHeight +
- (this.isScrollbarHorizontal ? this.options.scrollbarSize : 0);
+ options.bottom = this.scrollHeight + (this.isScrollbarHorizontal ? this.options.scrollbarSize : 0);
+ const width = this.scrollWidth + (this.isScrollbarVertical ? this.options.scrollbarSize : 0);
+ const height = this.scrollHeight + (this.isScrollbarHorizontal ? this.options.scrollbarSize : 0);
this.scrollbarTop = (this.content.top / height) * this.boxHeight;
this.scrollbarTop = this.scrollbarTop < 0 ? 0 : this.scrollbarTop;
this.scrollbarHeight = (this.boxHeight / height) * this.boxHeight;
@@ -13777,14 +13415,9 @@
: this.scrollbarWidth;
if (this.isScrollbarVertical) {
this.scrollbar
- .beginFill(
- this.options.scrollbarBackground,
- this.options.scrollbarBackgroundAlpha
- )
+ .beginFill(this.options.scrollbarBackground, this.options.scrollbarBackgroundAlpha)
.drawRect(
- this.boxWidth -
- this.scrollbarSize +
- this.options.scrollbarOffsetVertical,
+ this.boxWidth - this.scrollbarSize + this.options.scrollbarOffsetVertical,
0,
this.scrollbarSize,
this.boxHeight
@@ -13793,15 +13426,10 @@
}
if (this.isScrollbarHorizontal) {
this.scrollbar
- .beginFill(
- this.options.scrollbarBackground,
- this.options.scrollbarBackgroundAlpha
- )
+ .beginFill(this.options.scrollbarBackground, this.options.scrollbarBackgroundAlpha)
.drawRect(
0,
- this.boxHeight -
- this.scrollbarSize +
- this.options.scrollbarOffsetHorizontal,
+ this.boxHeight - this.scrollbarSize + this.options.scrollbarOffsetHorizontal,
this.boxWidth,
this.scrollbarSize
)
@@ -13809,14 +13437,9 @@
}
if (this.isScrollbarVertical) {
this.scrollbar
- .beginFill(
- this.options.scrollbarForeground,
- this.options.scrollbarForegroundAlpha
- )
+ .beginFill(this.options.scrollbarForeground, this.options.scrollbarForegroundAlpha)
.drawRect(
- this.boxWidth -
- this.scrollbarSize +
- this.options.scrollbarOffsetVertical,
+ this.boxWidth - this.scrollbarSize + this.options.scrollbarOffsetVertical,
this.scrollbarTop,
this.scrollbarSize,
this.scrollbarHeight
@@ -13825,15 +13448,10 @@
}
if (this.isScrollbarHorizontal) {
this.scrollbar
- .beginFill(
- this.options.scrollbarForeground,
- this.options.scrollbarForegroundAlpha
- )
+ .beginFill(this.options.scrollbarForeground, this.options.scrollbarForegroundAlpha)
.drawRect(
this.scrollbarLeft,
- this.boxHeight -
- this.scrollbarSize +
- this.options.scrollbarOffsetHorizontal,
+ this.boxHeight - this.scrollbarSize + this.options.scrollbarOffsetHorizontal,
this.scrollbarWidth,
this.scrollbarSize
)
@@ -13907,10 +13525,7 @@
const local = this.toLocal(e.data.global);
if (this.isScrollbarHorizontal) {
if (local.y > this.boxHeight - this.scrollbarSize) {
- if (
- local.x >= this.scrollbarLeft &&
- local.x <= this.scrollbarLeft + this.scrollbarWidth
- ) {
+ if (local.x >= this.scrollbarLeft && local.x <= this.scrollbarLeft + this.scrollbarWidth) {
this.pointerDown = { type: 'horizontal', last: local };
} else {
if (local.x > this.scrollbarLeft) {
@@ -13929,10 +13544,7 @@
}
if (this.isScrollbarVertical) {
if (local.x > this.boxWidth - this.scrollbarSize) {
- if (
- local.y >= this.scrollbarTop &&
- local.y <= this.scrollbarTop + this.scrollbarWidth
- ) {
+ if (local.y >= this.scrollbarTop && local.y <= this.scrollbarTop + this.scrollbarWidth) {
this.pointerDown = { type: 'vertical', last: local };
} else {
if (local.y > this.scrollbarTop) {
@@ -13992,26 +13604,15 @@
* @param {number} [options.scrollHeight] set the height of the inside of the scrollbox (leave null to use content.height)
*/
resize(options) {
- this.options.boxWidth =
- typeof options.boxWidth !== 'undefined'
- ? options.boxWidth
- : this.options.boxWidth;
- this.options.boxHeight =
- typeof options.boxHeight !== 'undefined'
- ? options.boxHeight
- : this.options.boxHeight;
+ this.options.boxWidth = typeof options.boxWidth !== 'undefined' ? options.boxWidth : this.options.boxWidth;
+ this.options.boxHeight = typeof options.boxHeight !== 'undefined' ? options.boxHeight : this.options.boxHeight;
if (options.scrollWidth) {
this.scrollWidth = options.scrollWidth;
}
if (options.scrollHeight) {
this.scrollHeight = options.scrollHeight;
}
- this.content.resize(
- this.options.boxWidth,
- this.options.boxHeight,
- this.scrollWidth,
- this.scrollHeight
- );
+ this.content.resize(this.options.boxWidth, this.options.boxHeight, this.scrollWidth, this.scrollHeight);
this.update();
}
@@ -14263,12 +13864,8 @@
this.on('pointermove', e => {
if (this.control.dragging) {
- const moveX = this.control.event.data.getLocalPosition(
- this.control.parent
- ).x;
- this._value = this.pixelToValue(
- moveX - this.control.delta - this.opts.controlRadius
- );
+ const moveX = this.control.event.data.getLocalPosition(this.control.parent).x;
+ this._value = this.pixelToValue(moveX - this.control.delta - this.opts.controlRadius);
let x = this.valueToPixel(this._value) + this.opts.controlRadius;
this.control.x = x;
@@ -14280,16 +13877,8 @@
if (container instanceof Element) {
container.addEventListener('pointerup', e => this.onEnd(e), false);
- container.addEventListener(
- 'pointercancel',
- e => this.onEnd(e),
- false
- );
- container.addEventListener(
- 'pointerleave',
- e => this.onEnd(e),
- false
- );
+ container.addEventListener('pointercancel', e => this.onEnd(e), false);
+ container.addEventListener('pointerleave', e => this.onEnd(e), false);
container.addEventListener('pointerout', e => this.onEnd(e), false);
container.addEventListener('mouseup', e => this.onEnd(e), false);
container.addEventListener('mousecancel', e => this.onEnd(e), false);
@@ -14350,9 +13939,7 @@
if (this.sliderObj.pointerdowned) {
this.sliderObj.pointerdowned = false;
const position = e.data.getLocalPosition(this.control.parent);
- this.value = this.pixelToValue(
- position.x - this.opts.controlRadius
- );
+ this.value = this.pixelToValue(position.x - this.opts.controlRadius);
TweenLite.to(this.control, this.theme.fast, { alpha: 0.83 });
}
});
@@ -14412,11 +13999,7 @@
this.sliderObj.clear();
this.sliderObj.beginFill(0xffffff, 0);
this.sliderObj.drawRect(0, 0, x + w + cr, cr * 2);
- this.sliderObj.lineStyle(
- this.opts.strokeWidth,
- this.opts.stroke,
- this.opts.strokeAlpha
- );
+ this.sliderObj.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha);
this.sliderObj.beginFill(this.opts.fill, this.opts.fillAlpha);
this.sliderObj.moveTo(x, y);
this.sliderObj.lineTo(x + w, y);
@@ -14430,20 +14013,10 @@
// Draw control
this.control.clear();
- this.control.lineStyle(
- this.opts.controlStrokeWidth,
- this.opts.controlStroke,
- this.opts.controlStrokeAlpha
- );
- this.control.beginFill(
- this.opts.controlFill,
- this.opts.controlFillAlpha
- );
+ this.control.lineStyle(this.opts.controlStrokeWidth, this.opts.controlStroke, this.opts.controlStrokeAlpha);
+ this.control.beginFill(this.opts.controlFill, this.opts.controlFillAlpha);
this.control.drawCircle(0, 0, cr - 1);
- this.control.beginFill(
- this.opts.controlStroke,
- this.opts.controlStrokeAlpha
- );
+ this.control.beginFill(this.opts.controlStroke, this.opts.controlStrokeAlpha);
this.control.drawCircle(0, 0, cr / 6);
this.control.endFill();
@@ -14481,10 +14054,7 @@
} else if (value > this.opts.max) {
value = this.opts.max;
}
- return (
- (this.opts.width * (value - this.opts.min)) /
- (this.opts.max - this.opts.min)
- )
+ return (this.opts.width * (value - this.opts.min)) / (this.opts.max - this.opts.min)
}
/**
@@ -14500,10 +14070,7 @@
} else if (pixel > this.opts.width) {
pixel = this.opts.width;
}
- return (
- this.opts.min +
- ((this.opts.max - this.opts.min) * pixel) / this.opts.width
- )
+ return this.opts.min + ((this.opts.max - this.opts.min) * pixel) / this.opts.width
}
/**
@@ -14704,10 +14271,7 @@
let identifier = event.data.identifier;
if (typeof event.data.originalEvent.changedTouches !== 'undefined') {
for (let touch of event.data.originalEvent.changedTouches) {
- if (
- touch.identifier === identifier &&
- touch.touchType === 'stylus'
- ) {
+ if (touch.identifier === identifier && touch.touchType === 'stylus') {
this.tiltX = Angle.radian2degree(touch.azimuthAngle);
this.tiltY = 90.0 - Angle.radian2degree(touch.altitudeAngle);
return true
@@ -14727,10 +14291,7 @@
let identifier = event.data.identifier;
if (typeof event.data.originalEvent.changedTouches !== 'undefined') {
for (let touch of event.data.originalEvent.changedTouches) {
- if (
- touch.identifier === identifier &&
- touch.pointerType === 'touch'
- ) {
+ if (touch.identifier === identifier && touch.pointerType === 'touch') {
return true
}
}
@@ -14767,8 +14328,7 @@
this.tiltY += 5;
break
}
- 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 => {
@@ -14782,15 +14342,9 @@
});
this.on('pointermove', e => {
- if (
- Events$1.isPointerDown(e.data.originalEvent) ||
- this.isStylusPointer(e) ||
- this.isStylusTouch(e)
- ) {
- if (this.debug)
- console.log('pointermove', e, this.eventInside(e));
- if (this.eventInside(e) && this.singlePointer())
- this.moveStroke(this.toStroke(e));
+ if (Events$1.isPointerDown(e.data.originalEvent) || this.isStylusPointer(e) || this.isStylusTouch(e)) {
+ if (this.debug) console.log('pointermove', e, this.eventInside(e));
+ if (this.eventInside(e) && this.singlePointer()) this.moveStroke(this.toStroke(e));
}
});
this.on('pointerup', e => {
@@ -14905,11 +14459,7 @@
this.moveTo(start.x, start.y);
for (let i = 1; i < stroke.length; i++) {
let info = stroke[i];
- this.lineStyle(
- this.tiltToLineWidth(info.tiltY),
- info.color,
- this.colorAlpha
- );
+ this.lineStyle(this.tiltToLineWidth(info.tiltY), info.color, this.colorAlpha);
this.lineTo(info.x, info.y);
}
this.endFill();
@@ -15167,10 +14717,8 @@
opts
);
- this.opts.controlRadius =
- this.opts.controlRadius || this.opts.height / 2;
- this.opts.controlRadiusActive =
- this.opts.controlRadiusActive || this.opts.controlRadius;
+ this.opts.controlRadius = this.opts.controlRadius || this.opts.height / 2;
+ this.opts.controlRadiusActive = this.opts.controlRadiusActive || this.opts.controlRadius;
// Validation
//-----------------
@@ -15332,32 +14880,15 @@
draw() {
this.switchObj.clear();
if (this.active) {
- this.switchObj.lineStyle(
- this.opts.strokeActiveWidth,
- this.opts.strokeActive,
- this.opts.strokeActiveAlpha
- );
- this.switchObj.beginFill(
- this.opts.fillActive,
- this.opts.fillActiveAlpha
- );
+ this.switchObj.lineStyle(this.opts.strokeActiveWidth, this.opts.strokeActive, this.opts.strokeActiveAlpha);
+ this.switchObj.beginFill(this.opts.fillActive, this.opts.fillActiveAlpha);
} else {
- this.switchObj.lineStyle(
- this.opts.strokeWidth,
- this.opts.stroke,
- this.opts.strokeAlpha
- );
+ this.switchObj.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha);
this.switchObj.beginFill(this.opts.fill, this.opts.fillAlpha);
}
this.switchObj.moveTo(this.radius, 0);
this.switchObj.lineTo(this.opts.width - this.radius, 0);
- this.switchObj.arcTo(
- this.opts.width,
- 0,
- this.opts.width,
- this.radius,
- this.radius
- );
+ this.switchObj.arcTo(this.opts.width, 0, this.opts.width, this.radius, this.radius);
this.switchObj.lineTo(this.opts.width, this.radius + 1); // BUGFIX: If not specified, there is a small area without a stroke.
this.switchObj.arcTo(
this.opts.width,
@@ -15379,21 +14910,11 @@
this.opts.controlStrokeActive,
this.opts.controlStrokeActiveAlpha
);
- this.control.beginFill(
- this.opts.controlFillActive,
- this.opts.controlFillActiveAlpha
- );
+ this.control.beginFill(this.opts.controlFillActive, this.opts.controlFillActiveAlpha);
this.control.drawCircle(0, 0, this.opts.controlRadiusActive - 1);
} else {
- this.control.lineStyle(
- this.opts.controlStrokeWidth,
- this.opts.controlStroke,
- this.opts.controlStrokeAlpha
- );
- this.control.beginFill(
- this.opts.controlFill,
- this.opts.controlFillAlpha
- );
+ this.control.lineStyle(this.opts.controlStrokeWidth, this.opts.controlStroke, this.opts.controlStrokeAlpha);
+ this.control.beginFill(this.opts.controlFill, this.opts.controlFillAlpha);
this.control.drawCircle(0, 0, this.opts.controlRadius - 1);
}
this.control.endFill();
@@ -15409,24 +14930,11 @@
*/
drawAnimated() {
this.switchObj.clear();
- this.switchObj.lineStyle(
- this.tempAnimated.strokeWidth,
- this.tempAnimated.stroke,
- this.tempAnimated.strokeAlpha
- );
- this.switchObj.beginFill(
- this.tempAnimated.fill,
- this.tempAnimated.fillAlpha
- );
+ this.switchObj.lineStyle(this.tempAnimated.strokeWidth, this.tempAnimated.stroke, this.tempAnimated.strokeAlpha);
+ this.switchObj.beginFill(this.tempAnimated.fill, this.tempAnimated.fillAlpha);
this.switchObj.moveTo(this.radius, 0);
this.switchObj.lineTo(this.opts.width - this.radius, 0);
- this.switchObj.arcTo(
- this.opts.width,
- 0,
- this.opts.width,
- this.radius,
- this.radius
- );
+ this.switchObj.arcTo(this.opts.width, 0, this.opts.width, this.radius, this.radius);
this.switchObj.lineTo(this.opts.width, this.radius + 1); // BUGFIX: If not specified, there is a small area without a stroke.
this.switchObj.arcTo(
this.opts.width,
@@ -15446,10 +14954,7 @@
this.tempAnimated.controlStroke,
this.tempAnimated.controlStrokeAlpha
);
- this.control.beginFill(
- this.tempAnimated.controlFill,
- this.tempAnimated.controlFillAlpha
- );
+ this.control.beginFill(this.tempAnimated.controlFill, this.tempAnimated.controlFillAlpha);
this.control.drawCircle(0, 0, this.tempAnimated.controlRadius - 1);
this.control.endFill();
@@ -15652,10 +15157,7 @@
let object = null;
if (item.label) {
- object = new PIXI.Text(
- item.label,
- item.textStyle || this.opts.textStyle
- );
+ object = new PIXI.Text(item.label, item.textStyle || this.opts.textStyle);
} else {
object = item.content;
}
@@ -15857,7 +15359,7 @@
}
}
- /* globals */
+ /* globals ThrowPropsPlugin, Strong */
/**
* Class that represents a PixiJS List.
@@ -15964,9 +15466,7 @@
if (this.opts.app) {
const app = this.opts.app;
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 y = event.clientY - app.view.getBoundingClientRect().top;
if (bounds.contains(x, y)) {
@@ -16023,14 +15523,10 @@
if (this.opts.orientation === 'vertical') {
switch (this.opts.align) {
case 'center':
- this.__items.forEach(
- it => (it.x = margin + this.width / 2 - it.width / 2)
- );
+ this.__items.forEach(it => (it.x = margin + this.width / 2 - it.width / 2));
break
case 'right':
- this.__items.forEach(
- it => (it.x = margin + this.width - it.width)
- );
+ this.__items.forEach(it => (it.x = margin + this.width - it.width));
break
default:
this.__items.forEach(it => (it.x = margin));
@@ -16056,14 +15552,10 @@
this.__items.forEach(it => (it.y = margin));
break
case 'bottom':
- this.__items.forEach(
- it => (it.y = margin + this.height - it.height)
- );
+ this.__items.forEach(it => (it.y = margin + this.height - it.height));
break
default:
- this.__items.forEach(
- it => (it.y = margin + this.height / 2 - it.height / 2)
- );
+ this.__items.forEach(it => (it.y = margin + this.height / 2 - it.height / 2));
break
}
@@ -16197,8 +15689,7 @@
{
throwProps,
ease: Strong.easeOut,
- onComplete: () =>
- ThrowPropsPlugin.untrack(this.container.position)
+ onComplete: () => ThrowPropsPlugin.untrack(this.container.position)
},
0.8,
0.4
@@ -16219,20 +15710,14 @@
this.container.position.x -= event.deltaX;
if (this.container.position.x > 0) {
this.container.position.x = 0;
- } else if (
- this.container.position.x + this.innerWidth <
- this.opts.width
- ) {
+ } else if (this.container.position.x + this.innerWidth < this.opts.width) {
this.container.position.x = this.opts.width - this.innerWidth;
}
} else {
this.container.position.y -= event.deltaY;
if (this.container.position.y > 0) {
this.container.position.y = 0;
- } else if (
- this.container.position.y + this.innerHeight <
- this.opts.height
- ) {
+ } else if (this.container.position.y + this.innerHeight < this.opts.height) {
this.container.position.y = this.opts.height - this.innerHeight;
}
}
@@ -16244,10 +15729,7 @@
* @param {event|PIXI.InteractionEvent} event - The PIXI event to capture.
*/
capture(event) {
- const originalEvent =
- event.data && event.data.originalEvent
- ? event.data.originalEvent
- : event;
+ const originalEvent = event.data && event.data.originalEvent ? event.data.originalEvent : event;
Events$1.capturedBy(originalEvent, this);
}
}
diff --git a/doc/out/AbstractPopup.html b/doc/out/AbstractPopup.html
index 938d746..820f387 100644
--- a/doc/out/AbstractPopup.html
+++ b/doc/out/AbstractPopup.html
@@ -2912,7 +2912,7 @@ a string, a number or a PIXI.Text object.
diff --git a/doc/out/Badge.html b/doc/out/Badge.html
index 1d623cb..256eb6d 100644
--- a/doc/out/Badge.html
+++ b/doc/out/Badge.html
@@ -2368,7 +2368,7 @@ a string, a number or a PIXI.Text object.
diff --git a/doc/out/BlurFilter.html b/doc/out/BlurFilter.html
index 9514f8d..c756b66 100644
--- a/doc/out/BlurFilter.html
+++ b/doc/out/BlurFilter.html
@@ -1792,7 +1792,7 @@ app.scene.filters = [blurFilter]
diff --git a/doc/out/Button.html b/doc/out/Button.html
index 130f6df..be55d43 100644
--- a/doc/out/Button.html
+++ b/doc/out/Button.html
@@ -3810,7 +3810,7 @@ the tint property of the icon sprite.
diff --git a/doc/out/ButtonGroup.html b/doc/out/ButtonGroup.html
index 30aaabf..4d044ba 100644
--- a/doc/out/ButtonGroup.html
+++ b/doc/out/ButtonGroup.html
@@ -1465,7 +1465,7 @@
@@ -1811,6 +1811,110 @@ or a Theme object.
+
+
+ maxWidth |
+
+
+
+
+
+number
+
+
+
+ |
+
+
+
+
+ |
+
+
+
+
+
+ optional
+
+
+
+
+
+ The maximum width of the buttongroup. Only used if stacked is true and the orientation is horizontal. |
+
+
+
+
+
+
+ maxHeight |
+
+
+
+
+
+number
+
+
+
+ |
+
+
+
+
+ |
+
+
+
+
+
+ optional
+
+
+
+
+
+ The maximum height of the buttongroup. Only used if stacked is true and the orientation is vertical. |
+
+
+
+
+
+
+ stacked |
+
+
+
+
+
+boolean
+
+
+
+ |
+
+
+
+
+ false
+
+ |
+
+
+
+
+
+ optional
+
+
+
+
+
+ If set to true, the buttons of the buttongroup gets stacked if they are broader or higher than the maximum permitted width or height, depending on orientation. |
+
+
+
+
padding |
@@ -2889,7 +2993,7 @@ app.scene.addChild(buttonGroup)
@@ -2994,7 +3098,7 @@ app.scene.addChild(buttonGroup)
@@ -3099,7 +3203,7 @@ app.scene.addChild(buttonGroup)
@@ -3206,7 +3310,7 @@ app.scene.addChild(buttonGroup)
diff --git a/doc/out/DeepZoomImage.html b/doc/out/DeepZoomImage.html
index 2ac1c23..c5ae944 100644
--- a/doc/out/DeepZoomImage.html
+++ b/doc/out/DeepZoomImage.html
@@ -5090,7 +5090,7 @@ i.e. after loading a single tile
diff --git a/doc/out/DeepZoomInfo.html b/doc/out/DeepZoomInfo.html
index fecf0d4..91440e4 100644
--- a/doc/out/DeepZoomInfo.html
+++ b/doc/out/DeepZoomInfo.html
@@ -2603,7 +2603,7 @@ on completion.
diff --git a/doc/out/Flippable.html b/doc/out/Flippable.html
index 4b6c486..23f8325 100644
--- a/doc/out/Flippable.html
+++ b/doc/out/Flippable.html
@@ -2506,7 +2506,7 @@ front.on('click', event => flippable.toggle())
diff --git a/doc/out/FontInfo.html b/doc/out/FontInfo.html
index d0b9130..89cfd33 100644
--- a/doc/out/FontInfo.html
+++ b/doc/out/FontInfo.html
@@ -1553,7 +1553,7 @@
diff --git a/doc/out/Hypenate.html b/doc/out/Hypenate.html
index c018c72..8caa036 100644
--- a/doc/out/Hypenate.html
+++ b/doc/out/Hypenate.html
@@ -1755,7 +1755,7 @@
diff --git a/doc/out/InteractivePopup.html b/doc/out/InteractivePopup.html
index 358e7ac..f30ff13 100644
--- a/doc/out/InteractivePopup.html
+++ b/doc/out/InteractivePopup.html
@@ -2337,7 +2337,7 @@ a string, a number or a PIXI.Text object.
diff --git a/doc/out/LabeledGraphics.exports.LabeledGraphics.html b/doc/out/LabeledGraphics.exports.LabeledGraphics.html
index e64996c..3da8a63 100644
--- a/doc/out/LabeledGraphics.exports.LabeledGraphics.html
+++ b/doc/out/LabeledGraphics.exports.LabeledGraphics.html
@@ -1555,7 +1555,7 @@
diff --git a/doc/out/LabeledGraphics.html b/doc/out/LabeledGraphics.html
index 14e6732..60fe437 100644
--- a/doc/out/LabeledGraphics.html
+++ b/doc/out/LabeledGraphics.html
@@ -2620,7 +2620,7 @@ than wanted
diff --git a/doc/out/List.html b/doc/out/List.html
index 2250f6d..b266a23 100644
--- a/doc/out/List.html
+++ b/doc/out/List.html
@@ -2579,7 +2579,7 @@ app.scene.addChild(list)
diff --git a/doc/out/Message.html b/doc/out/Message.html
index aea87a6..94dab65 100644
--- a/doc/out/Message.html
+++ b/doc/out/Message.html
@@ -2435,7 +2435,7 @@ a string, a number or a PIXI.Text object.
diff --git a/doc/out/MessageInteractivePopup.html b/doc/out/MessageInteractivePopup.html
index 495f1b2..dcfa46c 100644
--- a/doc/out/MessageInteractivePopup.html
+++ b/doc/out/MessageInteractivePopup.html
@@ -1783,7 +1783,7 @@ like Popup, Message...
diff --git a/doc/out/MessageMessageInteractivePopup.html b/doc/out/MessageMessageInteractivePopup.html
index 1aaf8e4..e185f98 100644
--- a/doc/out/MessageMessageInteractivePopup.html
+++ b/doc/out/MessageMessageInteractivePopup.html
@@ -1783,7 +1783,7 @@ like Popup, Message...
diff --git a/doc/out/Modal.html b/doc/out/Modal.html
index 09b033f..1fde7b1 100644
--- a/doc/out/Modal.html
+++ b/doc/out/Modal.html
@@ -2336,7 +2336,7 @@ a string or a PIXI.Text object.
diff --git a/doc/out/ModalInteractivePopup.html b/doc/out/ModalInteractivePopup.html
index fdaf3e1..66912f6 100644
--- a/doc/out/ModalInteractivePopup.html
+++ b/doc/out/ModalInteractivePopup.html
@@ -1783,7 +1783,7 @@ like Popup, Message...
diff --git a/doc/out/ModalModalInteractivePopup.html b/doc/out/ModalModalInteractivePopup.html
index 96e34e2..d1240d2 100644
--- a/doc/out/ModalModalInteractivePopup.html
+++ b/doc/out/ModalModalInteractivePopup.html
@@ -1783,7 +1783,7 @@ like Popup, Message...
diff --git a/doc/out/PIXIApp.html b/doc/out/PIXIApp.html
index 6888662..493ea4c 100644
--- a/doc/out/PIXIApp.html
+++ b/doc/out/PIXIApp.html
@@ -5737,7 +5737,7 @@ rejected with an error.
diff --git a/doc/out/Popup.html b/doc/out/Popup.html
index a7139d1..a45036d 100644
--- a/doc/out/Popup.html
+++ b/doc/out/Popup.html
@@ -2330,7 +2330,7 @@ a string, a number or a PIXI.Text object.
diff --git a/doc/out/PopupInteractivePopup.html b/doc/out/PopupInteractivePopup.html
index c32d641..32214d8 100644
--- a/doc/out/PopupInteractivePopup.html
+++ b/doc/out/PopupInteractivePopup.html
@@ -1783,7 +1783,7 @@ like Popup, Message...
diff --git a/doc/out/PopupMenu.html b/doc/out/PopupMenu.html
index 95d90a8..46cbfda 100644
--- a/doc/out/PopupMenu.html
+++ b/doc/out/PopupMenu.html
@@ -2384,7 +2384,7 @@ a string, a number or a PIXI.Text object.
diff --git a/doc/out/PopupMenuPopupInteractivePopup.html b/doc/out/PopupMenuPopupInteractivePopup.html
index fb28912..6ee94a1 100644
--- a/doc/out/PopupMenuPopupInteractivePopup.html
+++ b/doc/out/PopupMenuPopupInteractivePopup.html
@@ -1783,7 +1783,7 @@ like Popup, Message...
diff --git a/doc/out/PopupMenuPopupMenuPopupInteractivePopup.html b/doc/out/PopupMenuPopupMenuPopupInteractivePopup.html
index 34a86bc..1b98cd1 100644
--- a/doc/out/PopupMenuPopupMenuPopupInteractivePopup.html
+++ b/doc/out/PopupMenuPopupMenuPopupInteractivePopup.html
@@ -1783,7 +1783,7 @@ like Popup, Message...
diff --git a/doc/out/PopupMenuPopupMenuPopupPopupInteractivePopup.html b/doc/out/PopupMenuPopupMenuPopupPopupInteractivePopup.html
index 04b4996..b004e22 100644
--- a/doc/out/PopupMenuPopupMenuPopupPopupInteractivePopup.html
+++ b/doc/out/PopupMenuPopupMenuPopupPopupInteractivePopup.html
@@ -1783,7 +1783,7 @@ like Popup, Message...
diff --git a/doc/out/PopupMenuPopupPopupInteractivePopup.html b/doc/out/PopupMenuPopupPopupInteractivePopup.html
index 9fb5615..ee3893d 100644
--- a/doc/out/PopupMenuPopupPopupInteractivePopup.html
+++ b/doc/out/PopupMenuPopupPopupInteractivePopup.html
@@ -1783,7 +1783,7 @@ like Popup, Message...
diff --git a/doc/out/PopupPopupInteractivePopup.html b/doc/out/PopupPopupInteractivePopup.html
index f2535ed..541d817 100644
--- a/doc/out/PopupPopupInteractivePopup.html
+++ b/doc/out/PopupPopupInteractivePopup.html
@@ -1783,7 +1783,7 @@ like Popup, Message...
diff --git a/doc/out/Progress.html b/doc/out/Progress.html
index 81b3498..53fb59f 100644
--- a/doc/out/Progress.html
+++ b/doc/out/Progress.html
@@ -2869,7 +2869,7 @@ app.scene.addChild(progress)
diff --git a/doc/out/Scrollview.html b/doc/out/Scrollview.html
index 30dd5f4..78ebf74 100644
--- a/doc/out/Scrollview.html
+++ b/doc/out/Scrollview.html
@@ -1701,7 +1701,7 @@ app.loader
diff --git a/doc/out/Slider.html b/doc/out/Slider.html
index 0837f2e..d63ae73 100644
--- a/doc/out/Slider.html
+++ b/doc/out/Slider.html
@@ -2960,7 +2960,7 @@ app.scene.addChild(slider)
diff --git a/doc/out/Switch.html b/doc/out/Switch.html
index 9e9d798..6a9af41 100644
--- a/doc/out/Switch.html
+++ b/doc/out/Switch.html
@@ -3390,7 +3390,7 @@ app.scene.addChild(switch1)
diff --git a/doc/out/TextLabel.TextLabel.html b/doc/out/TextLabel.TextLabel.html
index 9ade891..81c2102 100644
--- a/doc/out/TextLabel.TextLabel.html
+++ b/doc/out/TextLabel.TextLabel.html
@@ -1684,7 +1684,7 @@
diff --git a/doc/out/Theme.html b/doc/out/Theme.html
index a144eef..a89dec8 100644
--- a/doc/out/Theme.html
+++ b/doc/out/Theme.html
@@ -3159,7 +3159,7 @@ const app = new PIXIApp({
diff --git a/doc/out/ThemeDark.html b/doc/out/ThemeDark.html
index d6780a8..a47446e 100644
--- a/doc/out/ThemeDark.html
+++ b/doc/out/ThemeDark.html
@@ -1580,7 +1580,7 @@ const app = new PIXIApp({
diff --git a/doc/out/ThemeLight.html b/doc/out/ThemeLight.html
index 2da33fd..6243a05 100644
--- a/doc/out/ThemeLight.html
+++ b/doc/out/ThemeLight.html
@@ -1592,7 +1592,7 @@ const app = new PIXIApp({
diff --git a/doc/out/ThemeRed.html b/doc/out/ThemeRed.html
index c95b6ac..6dd17bb 100644
--- a/doc/out/ThemeRed.html
+++ b/doc/out/ThemeRed.html
@@ -1592,7 +1592,7 @@ const app = new PIXIApp({
diff --git a/doc/out/TileQuadNode.html b/doc/out/TileQuadNode.html
index 23880b0..0cf4d32 100644
--- a/doc/out/TileQuadNode.html
+++ b/doc/out/TileQuadNode.html
@@ -2044,7 +2044,7 @@ an indicator of tiles to free.
diff --git a/doc/out/Tooltip.html b/doc/out/Tooltip.html
index 7fc26e5..bab9c61 100644
--- a/doc/out/Tooltip.html
+++ b/doc/out/Tooltip.html
@@ -2506,7 +2506,7 @@ a string, a number or a PIXI.Text object.
diff --git a/doc/out/UITest.html b/doc/out/UITest.html
index 8a3bb49..81fc6de 100644
--- a/doc/out/UITest.html
+++ b/doc/out/UITest.html
@@ -4177,7 +4177,7 @@ test.start()
diff --git a/doc/out/Volatile.html b/doc/out/Volatile.html
index ee09a08..c6ec282 100644
--- a/doc/out/Volatile.html
+++ b/doc/out/Volatile.html
@@ -2093,7 +2093,7 @@ app.scene.addChild(button)
diff --git a/doc/out/global.html b/doc/out/global.html
index ce1d837..80927d6 100644
--- a/doc/out/global.html
+++ b/doc/out/global.html
@@ -3314,7 +3314,7 @@
diff --git a/doc/out/index.html b/doc/out/index.html
index 4d36a1e..ea12301 100644
--- a/doc/out/index.html
+++ b/doc/out/index.html
@@ -1479,7 +1479,7 @@
diff --git a/doc/out/pixi_abstractpopup.js.html b/doc/out/pixi_abstractpopup.js.html
index d938b46..1a76339 100644
--- a/doc/out/pixi_abstractpopup.js.html
+++ b/doc/out/pixi_abstractpopup.js.html
@@ -1825,7 +1825,7 @@ export default class AbstractPopup extends PIXI.Graphics {
diff --git a/doc/out/pixi_app.js.html b/doc/out/pixi_app.js.html
index 82b3b27..e389d6f 100644
--- a/doc/out/pixi_app.js.html
+++ b/doc/out/pixi_app.js.html
@@ -2227,7 +2227,7 @@ class FpsDisplay extends PIXI.Graphics {
diff --git a/doc/out/pixi_badge.js.html b/doc/out/pixi_badge.js.html
index bc0f61b..4c0b1aa 100644
--- a/doc/out/pixi_badge.js.html
+++ b/doc/out/pixi_badge.js.html
@@ -1571,7 +1571,7 @@ export default class Badge extends AbstractPopup {
diff --git a/doc/out/pixi_blurfilter.js.html b/doc/out/pixi_blurfilter.js.html
index 3e43189..def5bd9 100644
--- a/doc/out/pixi_blurfilter.js.html
+++ b/doc/out/pixi_blurfilter.js.html
@@ -1738,7 +1738,7 @@ class TiltShiftYFilter extends TiltShiftAxisFilter {
diff --git a/doc/out/pixi_button.js.html b/doc/out/pixi_button.js.html
index b9e3dde..e253390 100644
--- a/doc/out/pixi_button.js.html
+++ b/doc/out/pixi_button.js.html
@@ -2182,7 +2182,7 @@ export default class Button extends PIXI.Container {
diff --git a/doc/out/pixi_buttongroup.js.html b/doc/out/pixi_buttongroup.js.html
index 663cb6f..f2fc08f 100644
--- a/doc/out/pixi_buttongroup.js.html
+++ b/doc/out/pixi_buttongroup.js.html
@@ -1479,6 +1479,9 @@ export default class ButtonGroup extends PIXI.Graphics {
* or a Theme object.
* @param {number} [opts.minWidth=44] - Button: The minimum width of one button.
* @param {number} [opts.minHeight=44] - Button: The minimum height of one button.
+ * @param {number} [opts.maxWidth] - The maximum width of the buttongroup. Only used if stacked is true and the orientation is horizontal.
+ * @param {number} [opts.maxHeight] - The maximum height of the buttongroup. Only used if stacked is true and the orientation is vertical.
+ * @param {boolean} [opts.stacked=false] - If set to true, the buttons of the buttongroup gets stacked if they are broader or higher than the maximum permitted width or height, depending on orientation.
* @param {number} [opts.padding=Theme.padding] - Button: The inner spacing (distance from icon and/or label) the the border.
* @param {number} [opts.margin=Theme.margin] - The outer spacing (distance from one button to the previous/next button).
* @param {string} [opts.iconPosition=left] - Button: The position of the icon in relation to the label. Can be left or right.
@@ -1821,7 +1824,7 @@ export default class ButtonGroup extends PIXI.Graphics {
diff --git a/doc/out/pixi_deepzoom_image.js.html b/doc/out/pixi_deepzoom_image.js.html
index 6541224..71af321 100644
--- a/doc/out/pixi_deepzoom_image.js.html
+++ b/doc/out/pixi_deepzoom_image.js.html
@@ -2545,7 +2545,7 @@ export class DeepZoomImage extends PIXI.Container {
diff --git a/doc/out/pixi_flippable.js.html b/doc/out/pixi_flippable.js.html
index 2d66435..1cbc58e 100644
--- a/doc/out/pixi_flippable.js.html
+++ b/doc/out/pixi_flippable.js.html
@@ -1925,7 +1925,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
diff --git a/doc/out/pixi_labeledgraphics.js.html b/doc/out/pixi_labeledgraphics.js.html
index d1be3f5..8b7cec0 100644
--- a/doc/out/pixi_labeledgraphics.js.html
+++ b/doc/out/pixi_labeledgraphics.js.html
@@ -1870,7 +1870,7 @@ export class BitmapLabeledGraphics extends LabeledGraphics {
diff --git a/doc/out/pixi_list.js.html b/doc/out/pixi_list.js.html
index fd54631..02088ee 100644
--- a/doc/out/pixi_list.js.html
+++ b/doc/out/pixi_list.js.html
@@ -1848,7 +1848,7 @@ export default class List extends PIXI.Container {
diff --git a/doc/out/pixi_message.js.html b/doc/out/pixi_message.js.html
index d1093f6..cd9656f 100644
--- a/doc/out/pixi_message.js.html
+++ b/doc/out/pixi_message.js.html
@@ -1579,7 +1579,7 @@ export default class Message extends InteractivePopup {
diff --git a/doc/out/pixi_modal.js.html b/doc/out/pixi_modal.js.html
index 1588b6a..27ff089 100644
--- a/doc/out/pixi_modal.js.html
+++ b/doc/out/pixi_modal.js.html
@@ -1661,7 +1661,7 @@ export default class Modal extends PIXI.Container {
diff --git a/doc/out/pixi_popup.js.html b/doc/out/pixi_popup.js.html
index a140d09..3480ce7 100644
--- a/doc/out/pixi_popup.js.html
+++ b/doc/out/pixi_popup.js.html
@@ -1688,7 +1688,7 @@ export default class Popup extends InteractivePopup {
diff --git a/doc/out/pixi_popupmenu.js.html b/doc/out/pixi_popupmenu.js.html
index 9c5d94b..459e922 100644
--- a/doc/out/pixi_popupmenu.js.html
+++ b/doc/out/pixi_popupmenu.js.html
@@ -1574,7 +1574,7 @@ export default class PopupMenu extends Popup {
diff --git a/doc/out/pixi_progress.js.html b/doc/out/pixi_progress.js.html
index 67d8359..a34a025 100644
--- a/doc/out/pixi_progress.js.html
+++ b/doc/out/pixi_progress.js.html
@@ -1779,7 +1779,7 @@ export default class Progress extends PIXI.Container {
diff --git a/doc/out/pixi_scrollview.js.html b/doc/out/pixi_scrollview.js.html
index b953d5b..9d50649 100644
--- a/doc/out/pixi_scrollview.js.html
+++ b/doc/out/pixi_scrollview.js.html
@@ -1512,7 +1512,7 @@ export default class Scrollview extends Scrollbox {
diff --git a/doc/out/pixi_slider.js.html b/doc/out/pixi_slider.js.html
index a36eaa2..5f250f8 100644
--- a/doc/out/pixi_slider.js.html
+++ b/doc/out/pixi_slider.js.html
@@ -1951,7 +1951,7 @@ export default class Slider extends PIXI.Container {
diff --git a/doc/out/pixi_switch.js.html b/doc/out/pixi_switch.js.html
index 8f0ffe6..1cebd3a 100644
--- a/doc/out/pixi_switch.js.html
+++ b/doc/out/pixi_switch.js.html
@@ -2016,7 +2016,7 @@ export default class Switch extends PIXI.Container {
diff --git a/doc/out/pixi_theme.js.html b/doc/out/pixi_theme.js.html
index 0c6d67a..3cb870e 100644
--- a/doc/out/pixi_theme.js.html
+++ b/doc/out/pixi_theme.js.html
@@ -1713,7 +1713,7 @@ export class ThemeRed extends Theme {
diff --git a/doc/out/pixi_tooltip.js.html b/doc/out/pixi_tooltip.js.html
index b880d59..2ab5d2e 100644
--- a/doc/out/pixi_tooltip.js.html
+++ b/doc/out/pixi_tooltip.js.html
@@ -1605,7 +1605,7 @@ export default class Tooltip extends AbstractPopup {
diff --git a/doc/out/pixi_volatile.js.html b/doc/out/pixi_volatile.js.html
index f8d7566..f5914db 100644
--- a/doc/out/pixi_volatile.js.html
+++ b/doc/out/pixi_volatile.js.html
@@ -1609,7 +1609,7 @@ export default class Volatile {
diff --git a/doc/out/uitest.js.html b/doc/out/uitest.js.html
index 01e3689..96bed1c 100644
--- a/doc/out/uitest.js.html
+++ b/doc/out/uitest.js.html
@@ -2547,7 +2547,7 @@ class Event {
diff --git a/lib/bootstrap.js b/lib/bootstrap.js
index e94bff0..9bcf68a 100644
--- a/lib/bootstrap.js
+++ b/lib/bootstrap.js
@@ -1,9 +1,6 @@
class Bootstrap extends Object {
static get isSafari() {
- return (
- /Safari/.test(navigator.userAgent) &&
- /Apple Computer, Inc/.test(navigator.vendor)
- )
+ return /Safari/.test(navigator.userAgent) && /Apple Computer, Inc/.test(navigator.vendor)
}
static get isModernSafari() {
@@ -78,11 +75,7 @@ class Bootstrap extends Object {
},
null
)
- } else if (
- this.isModernSafari ||
- this.isModernChrome ||
- this.isModernFirefox
- ) {
+ } else if (this.isModernSafari || this.isModernChrome || this.isModernFirefox) {
this.load(src, callback)
} else {
this.load(
@@ -129,8 +122,7 @@ class Bootstrap extends Object {
baseURL: baseUrl,
map: {
'plugin-babel': baseUrl + '/3rdparty/systemjs/plugin-babel.js',
- 'systemjs-babel-build':
- baseUrl + '/3rdparty/systemjs/systemjs-babel-browser.js'
+ 'systemjs-babel-build': baseUrl + '/3rdparty/systemjs/systemjs-babel-browser.js'
},
transpiler: 'plugin-babel',
meta: {
diff --git a/lib/bundle.js b/lib/bundle.js
index c64ef03..47c3355 100755
--- a/lib/bundle.js
+++ b/lib/bundle.js
@@ -2,15 +2,7 @@ import App from './app.js'
import Doctest from './doctest.js'
import Errors from './errors.js'
import Events from './events.js'
-import {
- DOMFlip,
- DOMFlippable,
- CardLoader,
- PDFLoader,
- ImageLoader,
- FrameLoader,
- HTMLLoader
-} from './flippable.js'
+import { DOMFlip, DOMFlippable, CardLoader, PDFLoader, ImageLoader, FrameLoader, HTMLLoader } from './flippable.js'
import Index from './index.js'
import Interface from './interface.js'
import Logging from './logging.js'
diff --git a/lib/capabilities.js b/lib/capabilities.js
index 1317a18..e64c17f 100644
--- a/lib/capabilities.js
+++ b/lib/capabilities.js
@@ -45,20 +45,12 @@ export class Capabilities {
*/
static get isElectron() {
// Renderer process
- if (
- typeof window !== 'undefined' &&
- typeof window.process === 'object' &&
- window.process.type === 'renderer'
- ) {
+ if (typeof window !== 'undefined' && typeof window.process === 'object' && window.process.type === 'renderer') {
return true
}
// Main process
- if (
- typeof process !== 'undefined' &&
- typeof process.versions === 'object' &&
- !!process.versions.electron
- ) {
+ if (typeof process !== 'undefined' && typeof process.versions === 'object' && !!process.versions.electron) {
return true
}
@@ -126,9 +118,7 @@ export class Capabilities {
export class CapabilitiesTests {
static testConfirm() {
let bool = confirm('Please confirm')
- document.getElementById('demo').innerHTML = bool
- ? 'Confirmed'
- : 'Not confirmed'
+ document.getElementById('demo').innerHTML = bool ? 'Confirmed' : 'Not confirmed'
}
static testPrompt() {
@@ -149,9 +139,7 @@ export class CapabilitiesTests {
}
static testMultiTouchTable() {
- let value =
- 'Is the device a multi-touch table? ' +
- Capabilities.isMultiTouchTable
+ let value = 'Is the device a multi-touch table? ' + Capabilities.isMultiTouchTable
multi_touch_table.innerHTML = value
}
diff --git a/lib/card/card.js b/lib/card/card.js
index d70b53d..30a7b4c 100644
--- a/lib/card/card.js
+++ b/lib/card/card.js
@@ -32,8 +32,7 @@ export default class Card {
console.log('Setup Card...', modules)
context.modules = []
modules.forEach(module => {
- if (module.apply(context))
- context.modules.push(module.constructor.name)
+ if (module.apply(context)) context.modules.push(module.constructor.name)
})
}
@@ -138,10 +137,7 @@ export default class Card {
event.stopPropagation()
if (callStack) callStack.call(that, ...args)
else {
- console.error(
- 'Could not call callback function ' + attributeVal,
- ...args
- )
+ console.error('Could not call callback function ' + attributeVal, ...args)
}
})
}
@@ -168,9 +164,7 @@ export default class Card {
/<\s*(a|video|img|image|circle)\s(.*?)(xlink:href|href|src)\s*=\s*["'](\..*?)["']\s*(.*?)>/g,
function(data) {
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)
return tag
}
@@ -328,16 +322,13 @@ export default class Card {
//Test if meanwhile another popup was registered...
this._getPopup(context) ||
// Or if an highlight was loaded, if the highlight already was closed.
- (highlight !== null &&
- !this._isHighlightActive(context, highlight))
+ (highlight !== null && !this._isHighlightActive(context, highlight))
) {
//.. if so remove the create popup instantly.
popup.remove()
} else {
// Otherwise set the popup regularly.
- let popupParagraphs = popup.element.querySelectorAll(
- '.popupContent > *'
- )
+ let popupParagraphs = popup.element.querySelectorAll('.popupContent > *')
// Remove a design error of naming two adjacent elements popup.
// Todo: fix this properly and remove this code.
@@ -388,8 +379,7 @@ export default class Card {
* @memberof Card
*/
static _createPopup(context, position, content, options = {}) {
- if (this.debug)
- console.log('Create Popup.', context, position, content, options)
+ if (this.debug) console.log('Create Popup.', context, position, content, options)
let popup = new Popup(
Object.assign(
{
@@ -482,9 +472,7 @@ export default class Card {
node = event.target
}
if (local == null) {
- let globalClick = event.center
- ? event.center
- : { x: event.x, y: event.y }
+ let globalClick = event.center ? event.center : { x: event.x, y: event.y }
local = Points.fromPageToNode(context, globalClick)
}
if (this.debug) console.log('loadPopup', event)
@@ -517,17 +505,11 @@ export default class Card {
// Extract the body from the Popup site.
let parser = new DOMParser()
- 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.
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
/**
@@ -549,18 +531,10 @@ export default class Card {
Card._cleanup(context)
if (!isSame) {
- Card._activateCorrespondingHighlights(
- context,
- node,
- parentArticle
- )
+ Card._activateCorrespondingHighlights(context, node, parentArticle)
let callback = (popup, callback) => {
- if (this.debug)
- console.log(
- 'Close popup (Editable = ' + editable + ').',
- popup
- )
+ if (this.debug) console.log('Close popup (Editable = ' + editable + ').', popup)
if (editable) {
let isDirty = mainController.askSaveNode()
if (isDirty)
@@ -596,8 +570,7 @@ export default class Card {
}
//console.log("onreadystatechange", editable)
if (editable) {
- if (this.debug)
- console.log('pushController', src, popup.insertedNode)
+ if (this.debug) console.log('pushController', src, popup.insertedNode)
mainController.pushController(popup.insertedNode, src)
}
}
@@ -627,10 +600,7 @@ export default class Card {
}
if (correspondingHighlights.length > 0) {
for (let highlight of correspondingHighlights) {
- if (
- highlight.parentNode &&
- highlight.parentNode.nodeName.toLowerCase() == 'g'
- ) {
+ if (highlight.parentNode && highlight.parentNode.nodeName.toLowerCase() == 'g') {
Highlight.openHighlight(highlight, {
animation: Card.highlightAnimation
})
@@ -729,10 +699,7 @@ export default class Card {
let matrix = node.getCTM()
let point = svgPoint.matrixTransform(matrix)
- let global = Points.fromNodeToPage(
- node.closest('div'),
- point
- )
+ let global = Points.fromNodeToPage(node.closest('div'), point)
let local = Points.fromPageToNode(context, global)
let overlay = document.createElement('div')
@@ -778,16 +745,12 @@ export default class Card {
xhr.onreadystatechange = () => {
if (xhr.readyState == 4) {
if (xhr.status == 200 || xhr.status == 0) {
- let html = this.postProcessResponseText(
- xhr.responseText
- )
+ let html = this.postProcessResponseText(xhr.responseText)
let selector = Card.popupHtmlSelector
let content = { html: html.body.innerHTML, selector }
resolve(content)
} else {
- reject(
- ` Popup request failed (Code: ${xhr.status}): Could not load resource: ${src}`
- )
+ reject(` Popup request failed (Code: ${xhr.status}): Could not load resource: ${src}`)
}
}
}
@@ -802,8 +765,7 @@ export default class Card {
let editable = Card.isEditable()
if (editable) {
- if (node.classList.contains('zoomable-icon'))
- this._openZoomable(event)
+ if (node.classList.contains('zoomable-icon')) this._openZoomable(event)
return
}
this._openZoomable(event)
@@ -852,10 +814,7 @@ export default class Card {
globalBottomRight = Points.fromNodeToPage(zoomable, globalBottomRight)
let globalFigurePos = Points.fromNodeToPage(zoomable, { x: 0, y: 0 })
let localFigurePos = Points.fromPageToNode(wrapper, globalFigurePos)
- let relativeBottomRight = Points.fromPageToNode(
- zoomable,
- globalBottomRight
- )
+ let relativeBottomRight = Points.fromPageToNode(zoomable, globalBottomRight)
let width =
relativeBottomRight.x +
@@ -969,12 +928,8 @@ export default class Card {
})
let zoomedFigStyle = window.getComputedStyle(zoomedFig)
- let borderX =
- parseFloat(zoomedFigStyle.borderLeftWidth) +
- parseFloat(zoomedFigStyle.borderRightWidth)
- let borderY =
- parseFloat(zoomedFigStyle.borderBottomWidth) +
- parseFloat(zoomedFigStyle.borderTopWidth)
+ let borderX = parseFloat(zoomedFigStyle.borderLeftWidth) + parseFloat(zoomedFigStyle.borderRightWidth)
+ let borderY = parseFloat(zoomedFigStyle.borderBottomWidth) + parseFloat(zoomedFigStyle.borderTopWidth)
const scaleFactor = 2
const transformOrigin = 'bottom right'
@@ -1026,14 +981,7 @@ export default class Card {
.to(zoomCaption, this.animation.fade, {
autoAlpha: 1
})
- } else
- this._openZoomableEditorBehaviour(
- wrapper,
- img,
- zoomable,
- zoomedFig,
- current
- )
+ } else this._openZoomableEditorBehaviour(wrapper, img, zoomable, zoomedFig, current)
}
/**
@@ -1066,13 +1014,7 @@ export default class Card {
return parent.querySelector('.icon')
}
- static _openZoomableEditorBehaviour(
- wrapper,
- img,
- zoomable,
- zoomedFig,
- current
- ) {
+ static _openZoomableEditorBehaviour(wrapper, img, zoomable, zoomedFig, current) {
let zoomContainer = document.createElement('div')
let zoomIcon = zoomable.querySelector('.zoom-icon')
zoomContainer.style.position = 'relative'
@@ -1166,8 +1108,7 @@ export default class Card {
* @memberof Card
*/
static closeZoomable(context, zoomable, zoomedFig) {
- if (this.debug)
- console.log('Close Zoomable', context, zoomable, zoomedFig)
+ if (this.debug) console.log('Close Zoomable', context, zoomable, zoomedFig)
if (zoomable) {
this._unsetZoomable(context)
@@ -1218,13 +1159,7 @@ export default class Card {
* @param {*} src - The src of the expanded element
* @param {*} callback - A callback that is called when the expanded element is closed
*/
- static expandIndexCard(
- card,
- html,
- tagName = 'article',
- src = null,
- callback = null
- ) {
+ static expandIndexCard(card, html, tagName = 'article', src = null, callback = null) {
let editable = Card.isEditable()
let context = this.getContext(card)
@@ -1257,10 +1192,7 @@ export default class Card {
let globalPreviewRect = Card._getGlobalRect(card)
let globalIndexCardRect = Card._getGlobalRect(indexbox)
- let localOrigin = Points.fromPageToNode(
- indexbox,
- Rect.getPosition(globalPreviewRect)
- )
+ let localOrigin = Points.fromPageToNode(indexbox, Rect.getPosition(globalPreviewRect))
let scaleX = globalPreviewRect.width / globalIndexCardRect.width
let scaleY = globalPreviewRect.height / globalIndexCardRect.height
@@ -1331,15 +1263,12 @@ export default class Card {
let cardName = strparts[strparts.length - 1]
strparts = card.className.split(' ')
let cardType = strparts[1]
- let msg =
- 'Card: ' + cardID + ': openTopic: ' + cardType + ', ' + cardName
+ let msg = 'Card: ' + cardID + ': openTopic: ' + cardType + ', ' + cardName
console.log('Logging:', msg)
Logging.log(msg)
}
- let desiredBorderBottomWidth = parseInt(
- window.getComputedStyle(titlebar).borderBottomWidth
- )
+ let desiredBorderBottomWidth = parseInt(window.getComputedStyle(titlebar).borderBottomWidth)
TweenLite.to(clone, Card.animation.articleTransition, {
x: -padding,
y: -padding,
@@ -1360,8 +1289,7 @@ export default class Card {
})
// Retain the border at same visual thickness.
- titlebar.style.borderBottomWidth =
- desiredBorderBottomWidth / transform.scaleY + 'px'
+ titlebar.style.borderBottomWidth = desiredBorderBottomWidth / transform.scaleY + 'px'
}
})
@@ -1384,13 +1312,7 @@ export default class Card {
let cardName = strparts[strparts.length - 1]
strparts = card.className.split(' ')
let cardType = strparts[1]
- let msg =
- 'Card: ' +
- cardID +
- ': closeTopic: ' +
- cardType +
- ', ' +
- cardName
+ let msg = 'Card: ' + cardID + ': closeTopic: ' + cardType + ', ' + cardName
console.log('Logging:', msg)
Logging.log(msg)
}
@@ -1457,8 +1379,7 @@ export default class Card {
})
// Retain the border at same visual thickness.
- titlebar.style.borderBottomWidth =
- desiredBorderBottomWidth / transform.scaleY + 'px'
+ titlebar.style.borderBottomWidth = desiredBorderBottomWidth / transform.scaleY + 'px'
}
})
}
@@ -1468,9 +1389,7 @@ export default class Card {
if (iconClone == null) {
iconClone = clone.querySelector('.cardicon')
- console.warn(
- "Legacy selector. Change it to 'card-icon' and find a more suitable name."
- )
+ console.warn("Legacy selector. Change it to 'card-icon' and find a more suitable name.")
}
if (iconClone.tagName == 'img') {
@@ -1478,11 +1397,7 @@ export default class Card {
}
//console.log("ICON: ", iconClone)
iconClone.classList.remove('info')
- iconClone.classList.add(
- 'close',
- 'view-button',
- 'transparent-background'
- )
+ iconClone.classList.add('close', 'view-button', 'transparent-background')
// We append the icon clone to the subcard-content.
// Then it's always on the content and not on the background
@@ -1589,13 +1504,7 @@ export default class Card {
// card.insertAdjacentElement('afterbegin', article)
// TweenLite.set(article, { autoAlpha: 0 })
- Card.expandIndexCard(
- card,
- parsedHTML,
- 'article',
- relativeSource,
- saveCallback
- )
+ Card.expandIndexCard(card, parsedHTML, 'article', relativeSource, saveCallback)
}
}
xhr.onerror = () => {
@@ -1632,9 +1541,7 @@ export default class Card {
let dom = child.closest('.info-card')
if (!dom) {
dom = child.querySelector('.wrapper')
- console.warn(
- "Change the 'wrapper' class to 'info-card' it's more suitable."
- )
+ console.warn("Change the 'wrapper' class to 'info-card' it's more suitable.")
}
return dom // (dom == null) ? document.body : dom
}
@@ -1782,9 +1689,7 @@ export default class Card {
if (indexbox != null) {
// column != null ||
let links = Array.from(indexbox.getElementsByTagName('a'))
- 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 linkRects = links.map(link => {
@@ -1819,16 +1724,9 @@ export default class Card {
let closestLinkIndex = distances.indexOf(Math.min(...distances))
let closestLink = links[closestLinkIndex]
- console.log(
- 'finding closest links',
- closestLink,
- closestLink.getClientRects()
- )
+ console.log('finding closest links', closestLink, closestLink.getClientRects())
- if (
- distances[closestLinkIndex] < 44 &&
- closestLink.getAttribute('href')
- ) {
+ if (distances[closestLinkIndex] < 44 && closestLink.getAttribute('href')) {
// Adapt context and local position
let context = this.getContext(closestLink)
let local = Points.fromPageToNode(context, globalClick)
diff --git a/lib/card/highlight.js b/lib/card/highlight.js
index b80aac9..7accac8 100644
--- a/lib/card/highlight.js
+++ b/lib/card/highlight.js
@@ -60,10 +60,7 @@ export default class Highlight extends Object {
if (circle.classList.length == 0) {
circle.removeAttribute('class')
}
- if (
- circle.hasAttribute('id') &&
- circle.getAttribute('id').startsWith('@@')
- ) {
+ if (circle.hasAttribute('id') && circle.getAttribute('id').startsWith('@@')) {
circle.removeAttribute('id')
}
circle.removeAttribute('data-svg-origin')
@@ -78,10 +75,7 @@ export default class Highlight extends Object {
}
}
- static expand(
- obj,
- { scale = 2, duration = 3, stroke = 2, onComplete = null } = {}
- ) {
+ static expand(obj, { scale = 2, duration = 3, stroke = 2, onComplete = null } = {}) {
if (obj == null) return
//console.log("expand")
obj.classList.add('zooming')
@@ -166,9 +160,7 @@ export default class Highlight extends Object {
this.shrink(maskImage, { stroke })
return
}
- let circles = Array.from(circleGroup.children).filter(
- e => e.tagName == 'circle'
- )
+ let circles = Array.from(circleGroup.children).filter(e => e.tagName == 'circle')
for (let c of circles) {
//console.log("shrinking all circles")
this.shrink(c, { stroke })
@@ -188,10 +180,7 @@ export default class Highlight extends Object {
return false
}
- static openHighlight(
- target,
- { animation = 0.5, scale = 2, onExpanded = null } = {}
- ) {
+ static openHighlight(target, { animation = 0.5, scale = 2, onExpanded = null } = {}) {
if (Highlight._isExpanded(target)) {
console.log('Target is already expanded!')
return
@@ -205,10 +194,7 @@ export default class Highlight extends Object {
let image = parent.querySelector(imageId)
if (image) {
this._bringToFront(image)
- } else
- console.error(
- 'Could not find corresponding image element.'
- )
+ } else console.error('Could not find corresponding image element.')
} else console.log('Element was no parent:', target)
}
this._bringToFront(target)
@@ -253,12 +239,7 @@ export default class Highlight extends Object {
if (target && parent) {
parent.removeChild(target)
parent.appendChild(target)
- } else
- console.error(
- 'Could not bring to front. Either no target or no parent.',
- target,
- parent
- )
+ } else console.error('Could not bring to front. Either no target or no parent.', target, parent)
}
static _getSVGMask(circle, { svgRoot = null, image = null } = {}) {
@@ -293,10 +274,7 @@ export default class Highlight extends Object {
* @returns
* @memberof Highlight
*/
- static _createSVGMask(
- element,
- { svgRoot = null, image = null, id = null } = {}
- ) {
+ static _createSVGMask(element, { svgRoot = null, image = null, id = null } = {}) {
// We can fetch these values here, but it's more efficient to
// simply pass them in, as it's likely they were already retrieved beforehand.
if (svgRoot == null) svgRoot = element.closest('svg')
diff --git a/lib/card/plugin.js b/lib/card/plugin.js
index 9d38249..519245f 100644
--- a/lib/card/plugin.js
+++ b/lib/card/plugin.js
@@ -48,10 +48,7 @@ export class CardPluginBase {
}
_getVerificationFunctions(context) {
- return [
- this._verifyContext.bind(this, context),
- this._verifyRequirements.bind(this, context)
- ]
+ return [this._verifyContext.bind(this, context), this._verifyRequirements.bind(this, context)]
}
_verifyContext(context) {
@@ -139,11 +136,7 @@ CardPlugin.EnlargeableThumbnail = class EnlargeableThumbnail extends CardPluginB
constructor(
wrapperSelector,
overlaySelector = null,
- {
- zoomAnimationDuration = 0.4,
- fadeAnimationDuration = 0.4,
- interactionType = 'tap'
- } = {}
+ { zoomAnimationDuration = 0.4, fadeAnimationDuration = 0.4, interactionType = 'tap' } = {}
) {
super()
this.wrapperSelector = wrapperSelector
@@ -160,14 +153,7 @@ CardPlugin.EnlargeableThumbnail = class EnlargeableThumbnail extends CardPluginB
_getVerificationFunctions(context) {
let arr = super._getVerificationFunctions(context)
- let funcs = [
- this._verifyElementsExist.bind(
- this,
- context,
- this.wrapperSelector,
- this.overlaySelector
- )
- ]
+ let funcs = [this._verifyElementsExist.bind(this, context, this.wrapperSelector, this.overlaySelector)]
return arr.concat(funcs)
}
@@ -252,9 +238,7 @@ CardPlugin.EnlargeableThumbnail = class EnlargeableThumbnail extends CardPluginB
* The minor side should not exceed the height of the context window.
*/
const maxMinorSize =
- context.offsetHeight -
- 2 * parseInt(headerStlye.paddingTop) -
- 2 * parseInt(headerStlye.marginTop)
+ context.offsetHeight - 2 * parseInt(headerStlye.paddingTop) - 2 * parseInt(headerStlye.marginTop)
const max = {
width: context.offsetWidth * maxFillRatio,
@@ -284,10 +268,7 @@ CardPlugin.EnlargeableThumbnail = class EnlargeableThumbnail extends CardPluginB
// const minorImageSize = getImageSize(minorSide)
let ratio = getImageSize(minorSide) / getImageSize(majorSide)
- let size =
- majorImageSize > max[majorSide.name]
- ? max[majorSide.name]
- : majorImageSize
+ let size = majorImageSize > max[majorSide.name] ? max[majorSide.name] : majorImageSize
if (size * ratio > maxMinorSize) {
size = maxMinorSize / ratio
@@ -298,10 +279,7 @@ CardPlugin.EnlargeableThumbnail = class EnlargeableThumbnail extends CardPluginB
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 = {
x: 0,
@@ -312,13 +290,9 @@ CardPlugin.EnlargeableThumbnail = class EnlargeableThumbnail extends CardPluginB
targetDimensions[minorSide.name] = size * ratio
targetOffset[majorSide.axis] =
- (context['offset' + capitalize(majorSide.name)] -
- targetDimensions[majorSide.name]) /
- 2
+ (context['offset' + capitalize(majorSide.name)] - targetDimensions[majorSide.name]) / 2
targetOffset[minorSide.axis] =
- (context['offset' + capitalize(minorSide.name)] -
- targetDimensions[minorSide.name]) /
- 2
+ (context['offset' + capitalize(minorSide.name)] - targetDimensions[minorSide.name]) / 2
overlay.appendChild(imageWrapper)
@@ -358,18 +332,14 @@ CardPlugin.EnlargeableThumbnail = class EnlargeableThumbnail extends CardPluginB
}
getBorderHeight(style) {
- const borderWidth =
- parseInt(style.borderTopWidth) + parseInt(style.borderBottomWidth)
- const padding =
- parseInt(style.paddingTop) + parseInt(style.paddingBottom)
+ const borderWidth = parseInt(style.borderTopWidth) + parseInt(style.borderBottomWidth)
+ const padding = parseInt(style.paddingTop) + parseInt(style.paddingBottom)
return parseInt(style.width) + borderWidth + padding
}
getBorderWidth(style) {
- const borderWidth =
- parseInt(style.borderLeftWidth) + parseInt(style.borderRightWidth)
- const padding =
- parseInt(style.paddingLeft) + parseInt(style.paddingRight)
+ const borderWidth = parseInt(style.borderLeftWidth) + parseInt(style.borderRightWidth)
+ const padding = parseInt(style.paddingLeft) + parseInt(style.paddingRight)
return parseInt(style.width) + borderWidth + padding
}
@@ -404,16 +374,12 @@ CardPlugin.Ui = class UiPlugin extends CardPluginBase {
_doesParentExist(context, parent) {
if (parent == null) return true
let valid = context.querySelector(parent) != null
- if (!valid)
- console.error('Could not find parent on context.', context, parent)
+ if (!valid) console.error('Could not find parent on context.', context, parent)
return valid
}
append(context) {
- parent =
- this.parent == null
- ? context
- : context.querySelector(this.parent).appendChild(container)
+ parent = this.parent == null ? context : context.querySelector(this.parent).appendChild(container)
let container = document.createElement('div')
container.className = this.className
parent.appendChild(container)
@@ -513,15 +479,8 @@ CardPlugin.Speech = class SpeechPlugin extends CardPluginBase {
utterance.onboundary = () => {
console.log('onboundary', node.innerText)
- if (
- this.currentText.substring(0, 5) !=
- node.innerText.substring(0, 5)
- ) {
- console.log(
- 'text for speech synth changed!',
- this.currentText,
- node.innerText
- )
+ if (this.currentText.substring(0, 5) != node.innerText.substring(0, 5)) {
+ console.log('text for speech synth changed!', this.currentText, node.innerText)
this._stop()
}
}
diff --git a/lib/card/scatter.js b/lib/card/scatter.js
index ffd4ac2..f3df28f 100644
--- a/lib/card/scatter.js
+++ b/lib/card/scatter.js
@@ -63,11 +63,7 @@ export default class ScatterCard extends Card {
* @returns
* @memberof Card
*/
- static createCardScatter(
- html,
- scatterContainer,
- { basePath = './', modules = [] } = {}
- ) {
+ static createCardScatter(html, scatterContainer, { basePath = './', modules = [] } = {}) {
let element = document.createElement('div')
scatterContainer.element.appendChild(element)
@@ -94,11 +90,7 @@ export default class ScatterCard extends Card {
* @returns
* @memberof CardScatter
*/
- static loadAndCreateScatterCard(
- scatterContainer,
- item,
- { basePath = '../', modules = [], onClose = null } = {}
- ) {
+ static loadAndCreateScatterCard(scatterContainer, item, { basePath = '../', modules = [], onClose = null } = {}) {
console.log(basePath)
return new Promise((resolve, reject) => {
let url = basePath + '/' + item + '/index.html'
@@ -106,14 +98,10 @@ export default class ScatterCard extends Card {
this.loadHTML(url)
.then(html => {
console.log('Received', html)
- let element = this.createCardScatter(
- html,
- scatterContainer,
- {
- basePath,
- modules
- }
- )
+ let element = this.createCardScatter(html, scatterContainer, {
+ basePath,
+ modules
+ })
if (onClose) this.addOnCloseListener(element, onClose)
resolve(element)
})
diff --git a/lib/card/wrapper.js b/lib/card/wrapper.js
index 77fc35f..e40fd71 100644
--- a/lib/card/wrapper.js
+++ b/lib/card/wrapper.js
@@ -5,10 +5,7 @@ import Events from '../events.js'
import { Points } from '../utils.js'
export default class CardWrapper extends Object {
- constructor(
- domNode,
- { triggerSVGClicks = true, allowClickDistance = 44 } = {}
- ) {
+ constructor(domNode, { triggerSVGClicks = true, allowClickDistance = 44 } = {}) {
super()
this.domNode = domNode
this.triggerSVGClicks = triggerSVGClicks
@@ -57,7 +54,7 @@ export default class CardWrapper extends Object {
isClickable(node) {
if (node == null) return false
- // console.log("isClickable", node, this.isClickPrevented(node))
+ // console.log("isClickable", node, this.isClickPrevented(node))
if (this.isClickPrevented(node)) {
return false
}
@@ -99,9 +96,7 @@ export default class CardWrapper extends Object {
nearestActive(event) {
let element = this.domNode
let activeNodes = this.activeNodes()
- 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 clickRects = activeNodes.map(link => {
@@ -154,7 +149,7 @@ export default class CardWrapper extends Object {
}
nodeTapped(node, event) {
- console.log("nodeTapped", node, this.isClickable(node))
+ console.log('nodeTapped', node, this.isClickable(node))
if (this.isClickable(node)) {
this.simulateClick(node, event)
return true
@@ -165,7 +160,7 @@ export default class CardWrapper extends Object {
return true
}
for (let [selector, handler] of this.tapHandler.entries()) {
- console.log("nodeTapped", selector)
+ console.log('nodeTapped', selector)
for (let obj of this.domNode.querySelectorAll(selector)) {
if (node == obj) {
handler(event, node)
@@ -177,10 +172,9 @@ export default class CardWrapper extends Object {
}
tap(event, calledBy = 'unknown') {
-
if (event.isTrusted) {
let node = this.nearestActive(event)
- console.log("tap", node)
+ console.log('tap', node)
this.nodeTapped(node, event)
/* let node = document.elementFromPoint(event.clientX, event.clientY)
diff --git a/lib/doctest.js b/lib/doctest.js
index a51eda9..679eb19 100755
--- a/lib/doctest.js
+++ b/lib/doctest.js
@@ -30,32 +30,21 @@ export default class Doctest {
static expect(expr, value) {
if (this.pprint(expr) != this.pprint(value)) {
//throw new Error("got `" + expr + "` but expected `" + value + "`.")
- throw new Error(
- 'got `' +
- this.pprint(expr) +
- '` but expected `' +
- this.pprint(value) +
- '`.'
- )
+ throw new Error('got `' + this.pprint(expr) + '` but expected `' + this.pprint(value) + '`.')
}
}
static expectError(error, message) {
let index = error.toString().indexOf(message)
if (index < 0) {
- throw new Error(
- 'got `' + message + '` but expected `' + error + '`.'
- )
+ throw new Error('got `' + message + '` but expected `' + error + '`.')
}
}
static expectLog(...messages) {
// if (!docTestLogMessages.equals(messages)) {
docTestLogMessages.forEach((msg, i) => {
- if (msg != messages[i])
- throw new Error(
- 'Unexpected log message: `' + messages[i] + '`.'
- )
+ if (msg != messages[i]) throw new Error('Unexpected log message: `' + messages[i] + '`.')
})
// throw new Error('Uups')
//}
@@ -104,10 +93,7 @@ export default class Doctest {
let lines = text.value.split('\n')
let better = []
for (let line of lines) {
- if (
- replaceExpect &&
- line.trim().startsWith('Doctest.expect(')
- ) {
+ if (replaceExpect && line.trim().startsWith('Doctest.expect(')) {
line = line.replace(/Doctest\.expect\(/, '>>> ').trim()
if (line.endsWith(')') || line.endsWith(',')) {
line = line.slice(0, -1)
diff --git a/lib/events.js b/lib/events.js
index 201aa5c..21af172 100755
--- a/lib/events.js
+++ b/lib/events.js
@@ -38,8 +38,7 @@ export default class Events {
// be this is a bug or a security feature. Workaround: we introduce
// a mouseDownSubstitute attribute that can be assigned to cloned
// events after instantiation.
- if (Reflect.has(event, 'mouseDownSubstitute'))
- return event.mouseDownSubstitute
+ if (Reflect.has(event, 'mouseDownSubstitute')) return event.mouseDownSubstitute
return event.buttons || event.which
}
@@ -74,15 +73,7 @@ export default class Events {
for (let i = 0; i < targets.length; i++) {
let t = targets[i]
let touchTarget = document.elementFromPoint(t.pageX, t.pageY)
- let touch = new Touch(
- undefined,
- touchTarget,
- t.identifier,
- t.pageX,
- t.pageY,
- t.screenX,
- t.screenY
- )
+ let touch = new Touch(undefined, touchTarget, t.identifier, t.pageX, t.pageY, t.screenX, t.screenY)
touches.push(touch)
}
return new TouchList(...touches)
@@ -166,8 +157,7 @@ export default class Events {
let result = event.type
let selector = this.selector(event.target)
result += ' selector: ' + selector
- if (event.target != document.querySelector(selector))
- console.log('Cannot resolve', selector)
+ if (event.target != document.querySelector(selector)) console.log('Cannot resolve', selector)
let keys = ['layerX', 'layerY', 'pageX', 'pageY', 'clientX', 'clientY']
for (let key of keys) {
try {
diff --git a/lib/flippable.js b/lib/flippable.js
index 9f867c3..8c57e12 100644
--- a/lib/flippable.js
+++ b/lib/flippable.js
@@ -258,28 +258,22 @@ export class DOMFlip {
frontLoaded(loader) {
return new Promise((resolve, reject) => {
- let scatter = new DOMScatter(
- this.cardWrapper,
- this.domScatterContainer,
- {
- x: loader.x,
- y: loader.y,
- startScale: loader.scale,
- scale: loader.scale,
- maxScale: loader.maxScale,
- minScale: loader.minScale,
- width: loader.wantedWidth,
- height: loader.wantedHeight,
- rotation: loader.rotation,
- translatable: this.translatable,
- scalable: this.scalable,
- rotatable: this.rotatable,
- overdoScaling: this.overdoScaling,
- tapDelegate: this.tapDelegateFactory
- ? this.tapDelegateFactory(this.cardWrapper)
- : null
- }
- )
+ let scatter = new DOMScatter(this.cardWrapper, this.domScatterContainer, {
+ x: loader.x,
+ y: loader.y,
+ startScale: loader.scale,
+ scale: loader.scale,
+ maxScale: loader.maxScale,
+ minScale: loader.minScale,
+ width: loader.wantedWidth,
+ height: loader.wantedHeight,
+ rotation: loader.rotation,
+ translatable: this.translatable,
+ scalable: this.scalable,
+ rotatable: this.rotatable,
+ overdoScaling: this.overdoScaling,
+ tapDelegate: this.tapDelegateFactory ? this.tapDelegateFactory(this.cardWrapper) : null
+ })
if (this.center) {
scatter.centerAt(this.center)
@@ -296,9 +290,7 @@ export class DOMFlip {
//Remove callback
if (scatter.onTransform) {
- let callbackIdx = scatter.onTransform.indexOf(
- removeOnMinScale
- )
+ let callbackIdx = scatter.onTransform.indexOf(removeOnMinScale)
scatter.onTransform.splice(callbackIdx, 1)
}
}
@@ -572,9 +564,7 @@ export class DOMFlippable {
this.flipped = !this.flipped
let targetY = this.flipped ? 180 : 0
- let targetZ = this.flipped
- ? this.startAngle + this.targetRotation(this.startAngle)
- : this.startAngle
+ let targetZ = this.flipped ? this.startAngle + this.targetRotation(this.startAngle) : this.startAngle
let targetScale = this.flipped ? this.wantedScale : this.startScale
let w = this.flipped ? this.wantedWidth : this.startWidth
let h = this.flipped ? this.wantedHeight : this.startHeight
diff --git a/lib/frames.js b/lib/frames.js
index 8baf519..56893a7 100755
--- a/lib/frames.js
+++ b/lib/frames.js
@@ -59,15 +59,7 @@ export class FrameTarget {
let point = pointMap.get(key)
let p = Points.fromPageToNode(this.frame, point)
let touchTarget = doc.elementFromPoint(p.x, p.y)
- let touch = new Touch(
- undefined,
- touchTarget,
- key,
- p.x,
- p.y,
- p.x,
- p.y
- )
+ let touch = new Touch(undefined, touchTarget, key, p.x, p.y, p.x, p.y)
touches.push(touch)
}
return new TouchList(...touches)
@@ -102,12 +94,7 @@ export class FrameTarget {
this.target.dispatchEvent(touchEvent)
}
- simulateTouchEventSafari(
- type,
- point,
- pointMap,
- touchEventKey = 'targetTouches'
- ) {
+ simulateTouchEventSafari(type, point, pointMap, touchEventKey = 'targetTouches') {
let p = Points.fromPageToNode(this.frame, point)
let data = {
view: this.frame.contentWindow,
@@ -131,9 +118,7 @@ export class FrameTarget {
}
isMouseLikeEvent(event) {
- return (
- event.type.startsWith('mouse') || event.type.startsWith('pointer')
- )
+ return event.type.startsWith('mouse') || event.type.startsWith('pointer')
}
onStart(event, interaction) {
@@ -142,11 +127,7 @@ export class FrameTarget {
if (this.isMouseLikeEvent(event)) {
this.simulateMouseEvent('mousedown', point)
} else {
- this.simulateTouchEvent(
- 'touchstart',
- point,
- interaction.current
- )
+ this.simulateTouchEvent('touchstart', point, interaction.current)
return
}
}
@@ -170,12 +151,7 @@ export class FrameTarget {
if (this.isMouseLikeEvent(event)) {
this.simulateMouseEvent('mouseend', point)
} else {
- this.simulateTouchEvent(
- 'touchend',
- point,
- interaction.ended,
- 'changedTouches'
- )
+ this.simulateTouchEvent('touchend', point, interaction.ended, 'changedTouches')
return
}
}
diff --git a/lib/interaction.js b/lib/interaction.js
index 5414545..7a4d9fc 100755
--- a/lib/interaction.js
+++ b/lib/interaction.js
@@ -205,10 +205,10 @@ export class InteractionPoints {
delta() {
let prev = []
let curr = []
- let cm = { x: 0, y: 0}
- let pm = { x: 0, y: 0}
+ let cm = { x: 0, y: 0 }
+ let pm = { x: 0, y: 0 }
let count = 0
- for(let key of this.current.keys()) {
+ for (let key of this.current.keys()) {
if (this.previous.has(key)) {
let p = this.previous.get(key)
let c = this.current.get(key)
@@ -227,7 +227,7 @@ export class InteractionPoints {
let scaled = 0
let alpha = 0
let zoom = 1
- for(let i=0; i t1 + this.longPressTime
if (tookLong) {
@@ -509,10 +477,7 @@ export class Interaction extends InteractionPoints {
this.unregisterTap(key)
}
}
- if (
- this.tapTimestamps.has(key) &&
- performance.now() > this.tapTimestamps.get(key) + this.tapDuration
- ) {
+ if (this.tapTimestamps.has(key) && performance.now() > this.tapTimestamps.get(key) + this.tapDuration) {
//console.log("tap too long")
this.unregisterTap(key)
}
@@ -537,11 +502,7 @@ export class Interaction extends InteractionPoints {
isLongPress(key) {
let ended = this.ended.get(key)
let start = this.start.get(key)
- if (
- start &&
- ended &&
- Points.distance(ended, start) < this.tapDistance
- ) {
+ if (start && ended && Points.distance(ended, start) < this.tapDistance) {
let t1 = this.timestamps.get(key)
let tookLong = performance.now() > t1 + this.longPressTime
if (tookLong) {
@@ -608,9 +569,7 @@ export class InteractionDelegate {
setupInteraction() {
if (this.debug) {
- let error = this.targetInterface.implementationError(
- this.target.constructor
- )
+ let error = this.targetInterface.implementationError(this.target.constructor)
if (error != null) {
throw new Error('Expected IInteractionTarget: ' + error)
}
@@ -648,16 +607,11 @@ export class InteractionDelegate {
element.addEventListener(
'pointermove',
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))) {
// this.capture(e) &&
- if (this.debug)
- console.log('pointermove captured', e.pointerId)
+ if (this.debug) console.log('pointermove captured', e.pointerId)
this.onMove(e)
}
},
@@ -666,8 +620,7 @@ export class InteractionDelegate {
element.addEventListener(
'pointerup',
e => {
- if (this.debug)
- console.log('pointerup', e.pointerId, e.pointerType)
+ if (this.debug) console.log('pointerup', e.pointerId, e.pointerType)
this.onEnd(e)
if (this.capturePointerEvents) {
try {
@@ -682,11 +635,9 @@ export class InteractionDelegate {
element.addEventListener(
'pointercancel',
e => {
- if (this.debug)
- console.log('pointercancel', e.pointerId, e.pointerType)
+ if (this.debug) console.log('pointercancel', e.pointerId, e.pointerType)
this.onEnd(e)
- if (this.capturePointerEvents)
- element.releasePointerCapture(e.pointerId)
+ if (this.capturePointerEvents) element.releasePointerCapture(e.pointerId)
},
useCapture
)
@@ -695,12 +646,7 @@ export class InteractionDelegate {
element.addEventListener(
'pointerleave',
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)
},
useCapture
@@ -711,12 +657,7 @@ export class InteractionDelegate {
element.addEventListener(
'pointerout',
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)
},
useCapture
@@ -727,13 +668,7 @@ export class InteractionDelegate {
window.addEventListener(
'pointerout',
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) {
this.onEnd(e)
}
@@ -746,8 +681,7 @@ export class InteractionDelegate {
element.addEventListener(
'touchstart',
e => {
- if (this.debug)
- console.log('touchstart', this.touchPoints(e))
+ if (this.debug) console.log('touchstart', this.touchPoints(e))
if (this.capture(e)) {
for (let touch of e.changedTouches) {
this.onStart(touch)
@@ -759,8 +693,7 @@ export class InteractionDelegate {
element.addEventListener(
'touchmove',
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) {
this.onMove(touch)
}
@@ -783,12 +716,7 @@ export class InteractionDelegate {
element.addEventListener(
'touchcancel',
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) {
this.onEnd(touch)
}
@@ -837,9 +765,7 @@ export class InteractionDelegate {
e => {
if (e.target == element) {
this.onEnd(e)
- console.warn(
- "Shouldn't happen: mouseout ends interaction"
- )
+ console.warn("Shouldn't happen: mouseout ends interaction")
}
},
useCapture
@@ -880,16 +806,8 @@ export class InteractionDelegate {
}
setupMouseWheelInteraction() {
- this.mouseWheelElement.addEventListener(
- 'mousewheel',
- this.onMouseWheel.bind(this),
- true
- )
- this.mouseWheelElement.addEventListener(
- 'DOMMouseScroll',
- this.onMouseWheel.bind(this),
- true
- )
+ this.mouseWheelElement.addEventListener('mousewheel', this.onMouseWheel.bind(this), true)
+ this.mouseWheelElement.addEventListener('DOMMouseScroll', this.onMouseWheel.bind(this), true)
}
onMouseWheel(event) {
@@ -953,10 +871,7 @@ export class InteractionDelegate {
break
}
case 'Touch': {
- let id =
- event.touchType === 'stylus'
- ? 'stylus'
- : event.identifier.toString()
+ let id = event.touchType === 'stylus' ? 'stylus' : event.identifier.toString()
result[id] = this.getPosition(event)
break
}
@@ -1006,10 +921,7 @@ export class InteractionDelegate {
let point = extracted[key]
let updated = this.interaction.update(key, point)
if (updated) {
- console.warn(
- "new pointer in updateInteraction shouldn't happen",
- key
- )
+ console.warn("new pointer in updateInteraction shouldn't happen", key)
this.interactionStarted(event, key, point)
}
}
@@ -1143,11 +1055,7 @@ export class InteractionMapper extends InteractionDelegate {
onEnd(event) {
let extracted = this.extractPoint(event, 'changedTouches')
this.endInteraction(event, extracted)
- let mapped = this.interaction.mapInteraction(
- extracted,
- ['ended'],
- this.mapPositionToPoint.bind(this)
- )
+ let mapped = this.interaction.mapInteraction(extracted, ['ended'], this.mapPositionToPoint.bind(this))
for (let [target, interaction] of mapped.entries()) {
target.onEnd(event, interaction)
}
@@ -1181,10 +1089,7 @@ export class InteractionMapper extends InteractionDelegate {
// convert to array
types = Array.isArray(types) ? types : types.split(/\s/)
- if (
- elements instanceof NodeList ||
- elements instanceof HTMLCollection
- ) {
+ if (elements instanceof NodeList || elements instanceof HTMLCollection) {
elements = Array.from(elements)
}
elements = Array.isArray(elements) ? elements : [elements]
@@ -1193,9 +1098,7 @@ export class InteractionMapper extends InteractionDelegate {
const type = types[i].toLowerCase()
// list of hammer events
- const useHammer = /^(tap|doubletap|press|pan|swipe|pinch|rotate).*$/.test(
- type
- )
+ const useHammer = /^(tap|doubletap|press|pan|swipe|pinch|rotate).*$/.test(type)
// if it is a hammer event
if (useHammer) {
@@ -1210,33 +1113,15 @@ export class InteractionMapper extends InteractionDelegate {
// recognizers
if (type.startsWith('pan')) {
- hammer
- .get('pan')
- .set(
- Object.assign(
- { direction: Hammer.DIRECTION_ALL },
- opts
- )
- )
+ hammer.get('pan').set(Object.assign({ direction: Hammer.DIRECTION_ALL }, opts))
} else if (type.startsWith('pinch')) {
- hammer
- .get('pinch')
- .set(Object.assign({ enable: true }, opts))
+ hammer.get('pinch').set(Object.assign({ enable: true }, opts))
} else if (type.startsWith('press')) {
hammer.get('press').set(opts)
} else if (type.startsWith('rotate')) {
- hammer
- .get('rotate')
- .set(Object.assign({ enable: true }, opts))
+ hammer.get('rotate').set(Object.assign({ enable: true }, opts))
} else if (type.startsWith('swipe')) {
- hammer
- .get('swipe')
- .set(
- Object.assign(
- { direction: Hammer.DIRECTION_ALL },
- opts
- )
- )
+ hammer.get('swipe').set(Object.assign({ direction: Hammer.DIRECTION_ALL }, opts))
} else if (type.startsWith('tap')) {
hammer.get('tap').set(opts)
}
diff --git a/lib/logging.js b/lib/logging.js
index 9830414..60c72c8 100644
--- a/lib/logging.js
+++ b/lib/logging.js
@@ -59,11 +59,7 @@ export default class Logging {
}
}
- static setup({
- log = console.log,
- warn = console.warn,
- error = console.error
- } = {}) {
+ static setup({ log = console.log, warn = console.warn, error = console.error } = {}) {
logHandlers.log = log
logHandlers.warn = warn
logHandlers.error = error
diff --git a/lib/pixi/abstractpopup.js b/lib/pixi/abstractpopup.js
index c239659..990ce84 100644
--- a/lib/pixi/abstractpopup.js
+++ b/lib/pixi/abstractpopup.js
@@ -83,12 +83,10 @@ export default class AbstractPopup extends PIXI.Graphics {
if (this.opts.maxWidth) {
this.headerStyle.wordWrap = true
- this.headerStyle.wordWrapWidth =
- this.opts.maxWidth - 2 * this.opts.padding
+ this.headerStyle.wordWrapWidth = this.opts.maxWidth - 2 * this.opts.padding
this.textStyle.wordWrap = true
- this.textStyle.wordWrapWidth =
- this.opts.maxWidth - 2 * this.opts.padding
+ this.textStyle.wordWrapWidth = this.opts.maxWidth - 2 * this.opts.padding
}
this.alpha = 0
@@ -131,10 +129,7 @@ export default class AbstractPopup extends PIXI.Graphics {
if (this.opts.header instanceof PIXI.Text) {
header = this.opts.header
} else if (typeof this.opts.header === 'number') {
- header = new PIXI.Text(
- this.opts.header.toString(),
- this.headerStyle
- )
+ header = new PIXI.Text(this.opts.header.toString(), this.headerStyle)
} else {
header = new PIXI.Text(this.opts.header, this.headerStyle)
}
@@ -161,10 +156,7 @@ export default class AbstractPopup extends PIXI.Graphics {
if (typeof this.opts.content === 'string') {
content = new PIXI.Text(this.opts.content, this.textStyle)
} else if (typeof this.opts.content === 'number') {
- content = new PIXI.Text(
- this.opts.content.toString(),
- this.textStyle
- )
+ content = new PIXI.Text(this.opts.content.toString(), this.textStyle)
} else {
content = this.opts.content
}
@@ -235,31 +227,16 @@ export default class AbstractPopup extends PIXI.Graphics {
* @return {AbstractPopup} A reference to the popup for chaining.
*/
draw() {
- const square =
- Math.round(this.wantedWidth) === Math.round(this.wantedHeight)
+ const square = Math.round(this.wantedWidth) === Math.round(this.wantedHeight)
const diameter = Math.round(this.opts.radius * 2)
this.clear()
- this.lineStyle(
- this.opts.strokeWidth,
- this.opts.stroke,
- this.opts.strokeAlpha
- )
+ this.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha)
this.beginFill(this.opts.fill, this.opts.fillAlpha)
if (square && diameter === this.wantedWidth) {
- this.drawCircle(
- this.wantedWidth / 2,
- this.wantedHeight / 2,
- this.opts.radius
- )
+ this.drawCircle(this.wantedWidth / 2, this.wantedHeight / 2, this.opts.radius)
} else {
- this.drawRoundedRect(
- 0,
- 0,
- this.wantedWidth,
- this.wantedHeight,
- this.opts.radius
- )
+ this.drawRoundedRect(0, 0, this.wantedWidth, this.wantedHeight, this.opts.radius)
}
this.endFill()
diff --git a/lib/pixi/app.js b/lib/pixi/app.js
index d20ce7b..263f578 100644
--- a/lib/pixi/app.js
+++ b/lib/pixi/app.js
@@ -28,10 +28,7 @@ class FullscreenInteractionManager extends PIXI.interaction.InteractionManager {
let dy = 0
let canvas = this.renderer.view
let context = canvas.getContext('webgl')
- if (
- context.drawingBufferWidth < canvas.width ||
- context.drawingBufferHeight < canvas.height
- ) {
+ if (context.drawingBufferWidth < canvas.width || context.drawingBufferHeight < canvas.height) {
extendWidth = context.drawingBufferWidth / canvas.width
extendHeight = context.drawingBufferHeight / canvas.height
//dx = wantedWidth - context.drawingBufferWidth
@@ -143,10 +140,7 @@ export default class PIXIApp extends PIXI.Application {
console.log('App is in fullScreen mode or autoResize mode')
const resizeDebounced = debounce(event => this.resize(event), 50)
window.addEventListener('resize', resizeDebounced)
- document.body.addEventListener(
- 'orientationchange',
- this.checkOrientation.bind(this)
- )
+ document.body.addEventListener('orientationchange', this.checkOrientation.bind(this))
}
if (monkeyPatchMapping) {
console.log('Using monkey patched coordinate mapping')
@@ -177,18 +171,12 @@ export default class PIXIApp extends PIXI.Application {
uri: '/graphql'
})
- const wsClient = new subscriptions.SubscriptionClient(
- `wss://${location.hostname}/subscriptions`,
- {
- reconnect: true,
- connectionParams: {}
- }
- )
+ const wsClient = new subscriptions.SubscriptionClient(`wss://${location.hostname}/subscriptions`, {
+ reconnect: true,
+ connectionParams: {}
+ })
- const networkInterfaceWithSubscriptions = subscriptions.addGraphQLSubscriptions(
- networkInterface,
- wsClient
- )
+ const networkInterfaceWithSubscriptions = subscriptions.addGraphQLSubscriptions(networkInterface, wsClient)
this.apolloClient = new apollo.ApolloClient({
networkInterface: networkInterfaceWithSubscriptions
@@ -324,10 +312,7 @@ export default class PIXIApp extends PIXI.Application {
* @param {number} [opts.height=window.innerHeight] - The height of the app to resize to.
* @return {PIXIApp} - Returns the PIXIApp for chaining.
*/
- resize(
- event,
- { width = window.innerWidth, height = window.innerHeight } = {}
- ) {
+ resize(event, { width = window.innerWidth, height = window.innerHeight } = {}) {
this.width = width
this.height = height
this.expandRenderer()
@@ -348,8 +333,7 @@ export default class PIXIApp extends PIXI.Application {
monkeyPatchPixiMapping() {
if (this.originalMapPositionToPoint === null) {
let interactionManager = this.renderer.plugins.interaction
- this.originalMapPositionToPoint =
- interactionManager.mapPositionToPoint
+ this.originalMapPositionToPoint = interactionManager.mapPositionToPoint
interactionManager.mapPositionToPoint = (point, x, y) => {
return this.fixedMapPositionToPoint(point, x, y)
}
@@ -378,8 +362,7 @@ export default class PIXIApp extends PIXI.Application {
if (
context !== null &&
- (context.drawingBufferWidth < canvas.width ||
- context.drawingBufferHeight < canvas.height)
+ (context.drawingBufferWidth < canvas.width || context.drawingBufferHeight < canvas.height)
) {
extendWidth = context.drawingBufferWidth / canvas.width
extendHeight = context.drawingBufferHeight / canvas.height
@@ -388,12 +371,7 @@ export default class PIXIApp extends PIXI.Application {
}
x *= extendWidth
y *= extendHeight
- return this.originalMapPositionToPoint.call(
- interactionManager,
- local,
- x,
- y + dy
- )
+ return this.originalMapPositionToPoint.call(interactionManager, local, x, y + dy)
}
/**
@@ -444,9 +422,7 @@ export default class PIXIApp extends PIXI.Application {
* @return {Modal} Returns the Modal object.
*/
modal(opts = {}) {
- let modal = new Modal(
- Object.assign({ theme: this.theme }, opts, { app: this })
- )
+ let modal = new Modal(Object.assign({ theme: this.theme }, opts, { app: this }))
this.scene.addChild(modal)
return modal
@@ -459,9 +435,7 @@ export default class PIXIApp extends PIXI.Application {
* @return {Message} Returns the Message object.
*/
message(opts = {}) {
- let message = new Message(
- Object.assign({ theme: this.theme }, opts, { app: this })
- )
+ let message = new Message(Object.assign({ theme: this.theme }, opts, { app: this }))
this.scene.addChild(message)
return message
@@ -480,11 +454,7 @@ export default class PIXIApp extends PIXI.Application {
* @param {boolean} [opts.progress=false] - Should a progress bar display the loading status?
* @return {PIXIApp} The PIXIApp object for chaining.
*/
- loadSprites(
- resources,
- loaded = null,
- { resolutionDependent = true, progress = false } = {}
- ) {
+ loadSprites(resources, loaded = null, { resolutionDependent = true, progress = false } = {}) {
this.loadTextures(
resources,
textures => {
@@ -517,11 +487,7 @@ export default class PIXIApp extends PIXI.Application {
* @param {boolean} [opts.progress=false] - Should a progress bar display the loading status?
* @return {PIXIApp} The PIXIApp object for chaining.
*/
- loadTextures(
- resources,
- loaded = null,
- { resolutionDependent = true, progress = false } = {}
- ) {
+ loadTextures(resources, loaded = null, { resolutionDependent = true, progress = false } = {}) {
if (!Array.isArray(resources)) {
resources = [resources]
}
@@ -534,16 +500,10 @@ export default class PIXIApp extends PIXI.Application {
let resolution = Math.round(this.renderer.resolution)
switch (resolution) {
case 2:
- loader.add(
- resource,
- resource.replace(/\.([^.]*)$/, '@2x.$1')
- )
+ loader.add(resource, resource.replace(/\.([^.]*)$/, '@2x.$1'))
break
case 3:
- loader.add(
- resource,
- resource.replace(/\.([^.]*)$/, '@3x.$1')
- )
+ loader.add(resource, resource.replace(/\.([^.]*)$/, '@3x.$1'))
break
default:
loader.add(resource)
@@ -708,11 +668,7 @@ export default class PIXIApp extends PIXI.Application {
pixiGlobal.x *= resolution
pixiGlobal.y *= resolution
// console.log("app.convertPointFromNodeToPage", pixiGlobal)
- return window.convertPointFromNodeToPage(
- app.view,
- pixiGlobal.x,
- pixiGlobal.y
- )
+ return window.convertPointFromNodeToPage(app.view, pixiGlobal.x, pixiGlobal.y)
}
}
diff --git a/lib/pixi/badge.js b/lib/pixi/badge.js
index 99dd20d..b2acd99 100644
--- a/lib/pixi/badge.js
+++ b/lib/pixi/badge.js
@@ -87,11 +87,7 @@ export default class Badge extends AbstractPopup {
content: this.opts.tooltip
})
} else {
- this.opts.tooltip = Object.assign(
- {},
- { object: this },
- this.opts.tooltip
- )
+ this.opts.tooltip = Object.assign({}, { object: this }, this.opts.tooltip)
this.tooltip = new Tooltip(this.opts.tooltip)
}
}
@@ -108,12 +104,8 @@ export default class Badge extends AbstractPopup {
layout() {
super.layout()
- this.content.x =
- this.width / 2 - this.content.width / 2 - this.opts.strokeWidth / 2
- this.content.y =
- this.height / 2 -
- this.content.height / 2 -
- this.opts.strokeWidth / 2
+ this.content.x = this.width / 2 - this.content.width / 2 - this.opts.strokeWidth / 2
+ this.content.y = this.height / 2 - this.content.height / 2 - this.opts.strokeWidth / 2
return this
}
diff --git a/lib/pixi/blurfilter.js b/lib/pixi/blurfilter.js
index 0c11e74..8b55299 100644
--- a/lib/pixi/blurfilter.js
+++ b/lib/pixi/blurfilter.js
@@ -68,9 +68,7 @@ export default class BlurFilter extends PIXI.Filter {
return this.tiltShiftXFilter.shape
}
set shape(value) {
- this.tiltShiftXFilter.shape = this.tiltShiftYFilter.shape = this.normalize(
- value
- )
+ this.tiltShiftXFilter.shape = this.tiltShiftYFilter.shape = this.normalize(value)
}
/**
@@ -189,12 +187,7 @@ class TiltShiftAxisFilter extends PIXI.Filter {
this.uniforms.circle = [shape.x, shape.y, shape.r]
} else {
this.uniforms.shape = 2
- this.uniforms.rectangle = [
- shape.x,
- shape.y,
- shape.x + shape.width,
- shape.y + shape.height
- ]
+ this.uniforms.rectangle = [shape.x, shape.y, shape.x + shape.width, shape.y + shape.height]
}
this.uniforms.blur = blur
this.uniforms.delta = new PIXI.Point(0, 0)
@@ -228,12 +221,7 @@ class TiltShiftAxisFilter extends PIXI.Filter {
return new PIXI.Circle(circle[0], circle[1], circle[2])
} else {
const rectangle = this.uniforms.rectangle
- return new PIXI.Rectangle(
- rectangle[0],
- rectangle[1],
- rectangle[2],
- rectangle[3]
- )
+ return new PIXI.Rectangle(rectangle[0], rectangle[1], rectangle[2], rectangle[3])
}
}
set shape(value) {
@@ -242,12 +230,7 @@ class TiltShiftAxisFilter extends PIXI.Filter {
this.uniforms.circle = [value.x, value.y, value.r]
} else {
this.uniforms.shape = 2
- this.uniforms.rectangle = [
- value.x,
- value.y,
- value.x + value.width,
- value.y + value.height
- ]
+ this.uniforms.rectangle = [value.x, value.y, value.x + value.width, value.y + value.height]
}
}
}
diff --git a/lib/pixi/button.js b/lib/pixi/button.js
index 9762080..f56a851 100644
--- a/lib/pixi/button.js
+++ b/lib/pixi/button.js
@@ -1,8 +1,9 @@
-/* global PIXI TweenLite */
+/* global */
import Theme from './theme.js'
import Tooltip from './tooltip.js'
import Badge from './badge.js'
import Events from '../events.js'
+import { Points } from '../utils.js'
/**
* Callback for the button action.
@@ -156,15 +157,9 @@ export default class Button extends PIXI.Container {
this.id = this.opts.id
- if (
- typeof this.opts.icon === 'undefined' &&
- typeof this.opts.iconActive !== 'undefined'
- ) {
+ if (typeof this.opts.icon === 'undefined' && typeof this.opts.iconActive !== 'undefined') {
this.opts.icon = this.opts.iconActive
- } else if (
- typeof this.opts.icon !== 'undefined' &&
- typeof this.opts.iconActive === 'undefined'
- ) {
+ } else if (typeof this.opts.icon !== 'undefined' && typeof this.opts.iconActive === 'undefined') {
this.opts.iconActive = this.opts.icon
}
@@ -180,6 +175,8 @@ export default class Button extends PIXI.Container {
this._active = null
this._disabled = null
+ this.__start = { x: null, y: null }
+
this.iconInactive = null
this.iconActive = null
this.text = null
@@ -234,17 +231,11 @@ export default class Button extends PIXI.Container {
// Icon
//-----------------
if (this.opts.icon) {
- this.iconInactive = this.loadIcon(
- this.opts.icon,
- this.opts.iconColor
- )
+ this.iconInactive = this.loadIcon(this.opts.icon, this.opts.iconColor)
}
if (this.opts.iconActive) {
- this.iconActive = this.loadIcon(
- this.opts.iconActive,
- this.opts.iconColorActive
- )
+ this.iconActive = this.loadIcon(this.opts.iconActive, this.opts.iconColorActive)
}
// interaction
@@ -272,6 +263,8 @@ export default class Button extends PIXI.Container {
// eslint-disable-next-line no-unused-vars
this.button.on('pointerdown', e => {
//this.capture(e)
+ this.__start.x = e.data.global.x
+ this.__start.y = e.data.global.y
TweenLite.to([this.button, this.content], this.theme.fast, {
alpha: 0.7,
overwrite: 'none'
@@ -280,25 +273,30 @@ export default class Button extends PIXI.Container {
this.button.on('pointerup', e => {
this.capture(e)
- if (this.opts.beforeAction) {
- this.opts.beforeAction.call(this, e, this)
- }
- if (this.opts.action) {
- this.opts.action.call(this, e, this)
- }
+ const distance = Points.distance(e.data.global, this.__start)
- TweenLite.to([this.button, this.content], this.theme.fast, {
- alpha: 0.83,
- overwrite: 'none'
- })
+ if (distance < 5) {
+ if (this.opts.beforeAction) {
+ this.opts.beforeAction.call(this, e, this)
+ }
- if (this.opts.type === 'checkbox') {
- this.active = !this.active
- }
+ if (this.opts.action) {
+ this.opts.action.call(this, e, this)
+ }
- if (this.opts.afterAction) {
- this.opts.afterAction.call(this, e, this)
+ TweenLite.to([this.button, this.content], this.theme.fast, {
+ alpha: 0.83,
+ overwrite: 'none'
+ })
+
+ if (this.opts.type === 'checkbox') {
+ this.active = !this.active
+ }
+
+ if (this.opts.afterAction) {
+ this.opts.afterAction.call(this, e, this)
+ }
}
})
@@ -319,11 +317,7 @@ export default class Button extends PIXI.Container {
content: this.opts.tooltip
})
} else {
- this.opts.tooltip = Object.assign(
- {},
- { object: this },
- this.opts.tooltip
- )
+ this.opts.tooltip = Object.assign({}, { object: this }, this.opts.tooltip)
this.tooltip = new Tooltip(this.opts.tooltip)
}
}
@@ -353,15 +347,10 @@ export default class Button extends PIXI.Container {
badge.x = this.x - badge.width / 2 + opts.offsetLeft
break
case 'center':
- badge.x =
- this.x +
- this.width / 2 -
- badge.width / 2 +
- opts.offsetLeft
+ badge.x = this.x + this.width / 2 - badge.width / 2 + opts.offsetLeft
break
case 'right':
- badge.x =
- this.x + this.width - badge.width / 2 + opts.offsetLeft
+ badge.x = this.x + this.width - badge.width / 2 + opts.offsetLeft
}
switch (opts.verticalAlign) {
@@ -369,15 +358,10 @@ export default class Button extends PIXI.Container {
badge.y = this.y - badge.height / 2 + opts.offsetTop
break
case 'middle':
- badge.y =
- this.y +
- this.height / 2 -
- badge.height / 2 +
- opts.offsetTop
+ badge.y = this.y + this.height / 2 - badge.height / 2 + opts.offsetTop
break
case 'bottom':
- badge.y =
- this.y + this.height - badge.height / 2 + opts.offsetTop
+ badge.y = this.y + this.height - badge.height / 2 + opts.offsetTop
}
this.addChild(badge)
@@ -516,8 +500,7 @@ export default class Button extends PIXI.Container {
this.content.x = (this._width - this.content.width) / 2
break
case 'right':
- this.content.x =
- this._width - this.opts.padding - this.content.width
+ this.content.x = this._width - this.opts.padding - this.content.width
break
}
@@ -529,8 +512,7 @@ export default class Button extends PIXI.Container {
this.content.y = (this._height - this.content.height) / 2
break
case 'bottom':
- this.content.y =
- this._height - this.opts.padding - this.content.height
+ this.content.y = this._height - this.opts.padding - this.content.height
break
}
@@ -546,30 +528,13 @@ export default class Button extends PIXI.Container {
draw() {
this.button.clear()
if (this.active) {
- this.button.lineStyle(
- this.opts.strokeActiveWidth,
- this.opts.strokeActive,
- this.opts.strokeActiveAlpha
- )
- this.button.beginFill(
- this.opts.fillActive,
- this.opts.fillActiveAlpha
- )
+ this.button.lineStyle(this.opts.strokeActiveWidth, this.opts.strokeActive, this.opts.strokeActiveAlpha)
+ this.button.beginFill(this.opts.fillActive, this.opts.fillActiveAlpha)
} else {
- this.button.lineStyle(
- this.opts.strokeWidth,
- this.opts.stroke,
- this.opts.strokeAlpha
- )
+ this.button.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha)
this.button.beginFill(this.opts.fill, this.opts.fillAlpha)
}
- this.button.drawRoundedRect(
- 0,
- 0,
- this._width,
- this._height,
- this.opts.radius
- )
+ this.button.drawRoundedRect(0, 0, this._width, this._height, this.opts.radius)
this.button.endFill()
return this
@@ -686,9 +651,7 @@ export default class Button extends PIXI.Container {
size = this.opts.minHeight - 2 * this.opts.padding
}
- const url = Button.iconIsUrl(icon)
- ? icon
- : `../../assets/icons/${icon}.png`
+ const url = Button.iconIsUrl(icon) ? icon : `../../assets/icons/${icon}.png`
const iconTexture = PIXI.Texture.fromImage(url, true)
const sprite = new PIXI.Sprite(iconTexture)
diff --git a/lib/pixi/buttongroup.html b/lib/pixi/buttongroup.html
index b22a7f6..2bce155 100644
--- a/lib/pixi/buttongroup.html
+++ b/lib/pixi/buttongroup.html
@@ -10,6 +10,7 @@
+
@@ -29,10 +30,10 @@
const app = new PIXIApp({
view: canvas,
width: 1000,
- height: 1000
+ height: 1400
}).setup().run()
-let buttonGroup1 = new ButtonGroup({
+const buttonGroup1 = new ButtonGroup({
x: 10,
y: 10,
buttons: [
@@ -43,7 +44,7 @@ let buttonGroup1 = new ButtonGroup({
]
})
-let buttonGroup2 = new ButtonGroup({
+const buttonGroup2 = new ButtonGroup({
x: 260,
y: 10,
buttons: [
@@ -60,7 +61,7 @@ let buttonGroup2 = new ButtonGroup({
strokeWidth: 3
})
-let buttonGroup3 = new ButtonGroup({
+const buttonGroup3 = new ButtonGroup({
x: 610,
y: 10,
buttons: [
@@ -74,7 +75,7 @@ let buttonGroup3 = new ButtonGroup({
strokeWidth: 1
})
-let buttonGroup4 = new ButtonGroup({
+const buttonGroup4 = new ButtonGroup({
x: 10,
y: 90,
buttons: [
@@ -93,7 +94,7 @@ let buttonGroup4 = new ButtonGroup({
strokeWidth: 1
})
-let buttonGroup5 = new ButtonGroup({
+const buttonGroup5 = new ButtonGroup({
x: 10,
y: 180,
buttons: [
@@ -106,7 +107,7 @@ let buttonGroup5 = new ButtonGroup({
type: 'checkbox'
})
-let buttonGroup6 = new ButtonGroup({
+const buttonGroup6 = new ButtonGroup({
x: 450,
y: 180,
buttons: [
@@ -119,7 +120,7 @@ let buttonGroup6 = new ButtonGroup({
type: 'radio'
})
-let buttonGroup7 = new ButtonGroup({
+const buttonGroup7 = new ButtonGroup({
x: 10,
y: 250,
theme: 'light',
@@ -134,7 +135,7 @@ let buttonGroup7 = new ButtonGroup({
style: 'link'
})
-let buttonGroup8 = new ButtonGroup({
+const buttonGroup8 = new ButtonGroup({
x: 610,
y: 250,
buttons: [
@@ -147,7 +148,7 @@ let buttonGroup8 = new ButtonGroup({
margin: 0
})
-let buttonGroup9 = new ButtonGroup({
+const buttonGroup9 = new ButtonGroup({
x: 10,
y: 320,
buttons: [
@@ -160,7 +161,7 @@ let buttonGroup9 = new ButtonGroup({
minWidth: 70
})
-let buttonGroup10 = new ButtonGroup({
+const buttonGroup10 = new ButtonGroup({
x: 100,
y: 320,
buttons: [
@@ -176,7 +177,7 @@ let buttonGroup10 = new ButtonGroup({
margin: 0
})
-let buttonGroup11 = new ButtonGroup({
+const buttonGroup11 = new ButtonGroup({
x: 250,
y: 320,
buttons: [
@@ -197,7 +198,7 @@ let buttonGroup11 = new ButtonGroup({
type: 'checkbox'
})
-let buttonGroup12 = new ButtonGroup({
+const buttonGroup12 = new ButtonGroup({
x: 400,
y: 320,
buttons: [
@@ -212,7 +213,7 @@ let buttonGroup12 = new ButtonGroup({
type: 'radio'
})
-let buttonGroup13 = new ButtonGroup({
+const buttonGroup13 = new ButtonGroup({
x: 520,
y: 320,
buttons: [
@@ -231,10 +232,49 @@ let buttonGroup13 = new ButtonGroup({
minHeight: 100
})
+const buttonGroup14 = new ButtonGroup({
+ x: 10,
+ y: 960,
+ buttons: [
+ {label: 'Stacked button 1', action: event => console.log('clicked 1')},
+ {label: 'Stacked button 2', action: event => console.log('clicked 2')},
+ {label: 'Stacked button 3', action: event => console.log('clicked 3')},
+ {label: 'Stacked button 4', action: event => console.log('clicked 4')},
+ {label: 'Stacked button 5', action: event => console.log('clicked 5')},
+ {label: 'Stacked button 6', action: event => console.log('clicked 6')},
+ {label: 'Stacked button 7', action: event => console.log('clicked 7')},
+ {label: 'Stacked button 8', action: event => console.log('clicked 8')}
+ ],
+ stacked: true,
+ maxWidth: 620,
+ app
+})
+
+const buttonGroup15 = new ButtonGroup({
+ x: 10,
+ y: 1040,
+ buttons: [
+ {icon: 'battery_charging_20', type: 'checkbox', iconColorActive: 0xd43e36},
+ {icon: 'battery_charging_30', type: 'checkbox', iconColorActive: 0xf99927},
+ {icon: 'battery_charging_50', type: 'checkbox', iconColorActive: 0xefc201},
+ {icon: 'battery_charging_60', type: 'checkbox', iconColorActive: 0x839b00},
+ {icon: 'battery_charging_80', type: 'checkbox', iconColorActive: 0x4ba8af},
+ {icon: 'battery_charging_90', type: 'checkbox', iconColorActive: 0x5386bc},
+ {icon: 'battery_charging_full', type: 'checkbox', iconColorActive: 0x9c71b7}
+ ],
+ orientation: 'vertical',
+ margin: 0,
+ stacked: true,
+ maxHeight: 200,
+ app
+})
+
app.scene.addChild(buttonGroup1, buttonGroup2, buttonGroup3)
app.scene.addChild(buttonGroup4)
app.scene.addChild(buttonGroup5, buttonGroup6)
app.scene.addChild(buttonGroup7, buttonGroup8)
app.scene.addChild(buttonGroup9, buttonGroup10, buttonGroup11, buttonGroup12, buttonGroup13)
+app.scene.addChild(buttonGroup14, buttonGroup15)