diff --git a/.eslintrc b/.eslintrc
index 290b33b..e060e9c 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -22,7 +22,6 @@
"TweenMax": false,
"TimelineLite": false,
"TimelineMax": false,
- "d3": false,
"SystemJS": false,
"app": true
},
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/css/highlight.css b/css/highlight.css
index 2a04689..63db9c3 100644
--- a/css/highlight.css
+++ b/css/highlight.css
@@ -4,8 +4,6 @@ circle {
stroke-width: 8px;
}
-
-
mask circle {
stroke-width: 0;
fill: white;
diff --git a/dist/iwmlib.js b/dist/iwmlib.js
index b000db8..98d036b 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 + ')'
}
}
@@ -3530,11 +3325,23 @@
}
close() {
+ this._callCloseCallbacks();
+ this._removeSelfFromScatterContainer();
+ }
+
+ _callCloseCallbacks() {
if (this.onClose) {
this.onClose.forEach(callback => callback(this));
}
}
+ _removeSelfFromScatterContainer() {
+ // Removes self from container when it's closed.
+ if (this.container) {
+ this.container.remove(this);
+ }
+ }
+
gesture(interaction) {
let delta = interaction.delta();
if (delta != null) {
@@ -3665,10 +3472,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 +3527,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 +3578,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 +3643,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 +3702,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 +3865,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 +3876,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 +3912,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 +3928,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 +3984,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 +4415,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,
@@ -4678,6 +4457,8 @@
DOMScatter$1.zIndex = 1000;
+ /* eslint-disable no-unused-vars */
+
class CardLoader {
constructor(
src,
@@ -4698,7 +4479,7 @@
this.x = x;
this.y = y;
this.scale = scale;
- this.rotation = 0;
+ this.rotation = rotation;
this.maxScale = maxScale;
this.minScale = minScale;
this.wantedWidth = width;
@@ -4706,12 +4487,6 @@
this.maxWidth = maxWidth != null ? maxWidth : window.innerWidth;
this.maxHeight = maxHeight != null ? maxHeight : window.innerHeight;
this.addedNode = null;
- console.log({
- width,
- height,
- maxWidth,
- maxHeight
- });
}
unload() {
@@ -4796,7 +4571,6 @@
return new Promise((resolve, reject) => {
let isFrame = domNode instanceof HTMLIFrameElement;
let iframe = isFrame ? domNode : document.createElement('iframe');
- console.log('FrameLoader.load', isFrame, iframe, this.src);
iframe.frameBorder = 0;
iframe.style.scrolling = false;
iframe.width = this.wantedWidth;
@@ -4823,14 +4597,9 @@
let xhr = new XMLHttpRequest();
xhr.open('GET', this.src, false);
xhr.onload = e => {
- domNode.innerHTML = xhr.response;
+ domNode.innerHTML = this.prepare(xhr.response);
this.addedNode = domNode.firstElementChild;
let { width, height } = this.size(this.addedNode);
- console.log('HTMLLoader.load', {
- added: this.addedNode,
- width,
- height
- });
if (width) this.wantedWidth = width || this.wantedWidth;
if (height) this.wantedHeight = height || this.wantedHeight;
resolve(this);
@@ -4842,6 +4611,18 @@
})
}
+ /**
+ * Preoares the html before it is assigned with innerHTML.
+ * Can be overwritten in subclasses.
+ *
+ * @param {*} html
+ * @returns
+ * @memberof HTMLLoader
+ */
+ prepare(html) {
+ return html
+ }
+
/**
* Tries to determine the size of the addedNode.
* Checks for explicit width and height style attributes.
@@ -4934,28 +4715,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 +4747,7 @@
//Remove callback
if (scatter.onTransform) {
- let callbackIdx = scatter.onTransform.indexOf(
- removeOnMinScale
- );
+ let callbackIdx = scatter.onTransform.indexOf(removeOnMinScale);
scatter.onTransform.splice(callbackIdx, 1);
}
}
@@ -5005,7 +4778,6 @@
}
setupFlippable(flippable, loader) {
- console.log('setupFlippable', loader.wantedWidth);
flippable.wantedWidth = loader.wantedWidth;
flippable.wantedHeight = loader.wantedHeight;
flippable.wantedScale = loader.scale;
@@ -5015,7 +4787,6 @@
}
start({ targetCenter = null } = {}) {
- console.log('DOMFlip.start', targetCenter);
if (this.preloadBack) {
this.flippable.start({ duration: this.flipDuration, targetCenter });
} else {
@@ -5165,7 +4936,6 @@
clickInfo() {
this.bringToFront();
- console.log('clickInfo');
this.infoBtn.click();
}
@@ -5192,6 +4962,7 @@
let startScale = this.element._gsTransform.scaleX;
let w = this.element.style.width;
let h = this.element.style.height;
+ // eslint-disable-next-line no-console
console.log(info, startX, startY, startAngle, startScale, w, h);
}
@@ -5248,9 +5019,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;
@@ -5263,14 +5032,12 @@
let y = this.flipped ? yy : this.startY;
let onUpdate = this.onUpdate !== null ? () => this.onUpdate(this) : null;
- console.log('start', this.flipDuration);
TweenLite.to(this.card, this.flipDuration, {
rotationY: targetY,
ease: Power1.easeOut,
transformOrigin: '50% 50%',
onUpdate,
onComplete: e => {
- console.log('start end', this.flipDuration);
if (this.flipped) {
//this.hide(this.front)
this.enable(this.backBtn);
@@ -5301,8 +5068,6 @@
},
force3D: true
});
-
- console.log('start 2', this.wantedWidth, this.startWidth, { w, h });
// See https://greensock.com/forums/topic/7997-rotate-the-shortest-way/
TweenLite.to(this.element, this.flipDuration / 2, {
scale: targetScale,
@@ -5464,6 +5229,8 @@
Poppable.registrations = new Map();
+ /* eslint-disable no-console */
+
/** A Popup that shows text labels, images, or html
*/
class Popup$1 extends Poppable {
@@ -5610,8 +5377,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
@@ -5645,6 +5411,7 @@
}
for (let key in content) {
+ console.log('using', key, this.loaded);
switch (key) {
case 'selector':
break
@@ -5713,10 +5480,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 => {
@@ -5756,7 +5520,7 @@
handleClose(e) {
let closing = this.closingEvent(e);
if (closing) {
- this.close();
+ this.close(e);
} else {
this.setupCloseHandler();
}
@@ -5828,8 +5592,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,18 +5642,17 @@
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);
}
/** Close and remove the Popup from the DOM tree.
*/
- close() {
+ close(event) {
//console.log("Popup.close", this.closeCommand)
this.unregister(this.context);
if (this.closeCommand) {
- this.closeCommand(this, () => this.remove());
+ this.closeCommand(this, () => this.remove(), event);
} else {
this.remove();
}
@@ -6035,36 +5797,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 +5964,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 +5992,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 +6029,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 +6092,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 +6383,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 +6406,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 +6423,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 +6488,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 +6523,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 +6547,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 +6556,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 +6580,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 +6795,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 +6833,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 +6846,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 +6940,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 +6953,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 +6966,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 +7116,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 +7260,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 +7335,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 +7392,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 +7528,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 +7589,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 +7612,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 +7717,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 +7744,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 +7901,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 +7958,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 +8051,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 +8084,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 +8110,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 +8149,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 +8179,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
});
@@ -8637,6 +8224,22 @@
return requestedSame
}
+ static _calculateCenterRelativeTo(target, image) {
+ console.log('_calculateCenterRelativeTo', target, image);
+ let bbox = image.getBBox();
+ let width = bbox.width;
+ let height = bbox.height;
+ let cx = target.getAttribute('cx');
+ let cy = target.getAttribute('cy');
+ let r = target.getAttribute('r');
+ let radius = r.endsWith('%') ? (parseFloat(r) / 100) * width : parseFloat(r);
+
+ let x = cx.endsWith('%') ? (parseFloat(cx) / 100) * width : cx;
+ let y = cy.endsWith('%') ? (parseFloat(cy) / 100) * height : cx;
+ console.log({ x, y, width, height, radius });
+ return { x, y }
+ }
+
/**
* Opens a popup for a highlight. Typically used as a onlick handler of a link.
*
@@ -8645,14 +8248,16 @@
* @returns {bool} false - Returns false to prevent default click action
* @memberof Card
*/
- static loadHighlightPopup(event) {
- if (this.debug) console.log('Load Highlight Popup: ', event);
- let node;
- if (event.firstTarget) {
- node = event.firstTarget;
- } else {
- node = event.target;
+ static loadHighlightPopup(event, node = null) {
+ if (this.debug) console.log('Card.loadHighlightPopup', event, node);
+ if (node == null) {
+ if (event.firstTarget) {
+ node = event.firstTarget;
+ } else {
+ node = event.target;
+ }
}
+
let context = this.getContext(node);
event.stopPropagation();
@@ -8671,11 +8276,10 @@
animation: Card.highlightAnimation,
onExpanded: () => {
// We assume it's always a circle. This may break, when other svg shapes are used.
- let x = node.getAttribute('cx');
- let y = node.getAttribute('cy');
- let position = { x, y };
- let radius = parseFloat(node.getAttribute('r'));
+ let svgRoot = node.closest('svg');
+ let image = svgRoot.querySelector('image');
+ let position = Card._calculateCenterRelativeTo(node, image);
/*
As the popup is appended directly to the card. We have to
@@ -8683,18 +8287,17 @@
card space.
*/
- let svgRoot = node.closest('svg');
+ // let svgRoot = node.closest('svg')
let svgPoint = svgRoot.createSVGPoint();
svgPoint.x = position.x;
- svgPoint.y = position.y - radius;
+ svgPoint.y = position.y;
let matrix = node.getCTM();
let point = svgPoint.matrixTransform(matrix);
- let global = Points.fromNodeToPage(
- node.closest('div'),
- point
- );
+ let closestDiv = node.closest('div');
+ console.log('closestDiv', closestDiv, point);
+ let global = Points.fromNodeToPage(closestDiv, point);
let local = Points.fromPageToNode(context, global);
let overlay = document.createElement('div');
@@ -8705,7 +8308,7 @@
// we could load the data while the circle is animating.
// but for simplicity it's just done here for now.
// TODO: Adjust to load while animating (Problem: Unload when cancelled).
- console.log(src);
+ console.log('loadHighlightPopup', src, position, local);
this._loadPopupContent(src)
.then(content => {
this._openPopup(context, src, local, content, {
@@ -8740,16 +8343,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 +8363,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 +8412,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 +8526,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 +8579,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 +8612,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 +8706,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 +8757,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 +8790,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 +8861,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 +8887,7 @@
});
// Retain the border at same visual thickness.
- titlebar.style.borderBottomWidth =
- desiredBorderBottomWidth / transform.scaleY + 'px';
+ titlebar.style.borderBottomWidth = desiredBorderBottomWidth / transform.scaleY + 'px';
}
});
@@ -9346,13 +8910,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 +8977,7 @@
});
// Retain the border at same visual thickness.
- titlebar.style.borderBottomWidth =
- desiredBorderBottomWidth / transform.scaleY + 'px';
+ titlebar.style.borderBottomWidth = desiredBorderBottomWidth / transform.scaleY + 'px';
}
});
};
@@ -9430,9 +8987,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 +8995,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 +9092,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 +9129,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 +9277,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 +9312,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 +9475,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 +9524,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 +9566,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 +9619,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 +9630,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 +9642,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 +9665,6 @@
}
/* eslint-disable no-console */
- /* global TweenLite */
let _HighlightEnabled = true;
let _CircleIds = 0;
@@ -10199,10 +9726,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 +9741,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 +9826,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 +9846,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 +9860,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 +9869,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 +9892,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 +9905,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 +9940,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 +10011,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 +10110,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 +10137,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 +10145,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 +10223,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 +10311,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 +10328,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 +10413,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 +10443,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 +10454,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 +10465,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 +10507,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 +10549,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 +10654,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..22dd2dc 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,1973 @@
}
}
+ /* 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: {},
+ 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;
+
+ this.opts.textStyle = Object.assign({}, theme.textStyle, this.opts.textStyle);
+ this.opts.textStyleActive = Object.assign({}, theme.textStyleActive, this.opts.textStyleActive);
+
+ 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', this.onEnd.bind(this));
+ this.button.on('pointercancel', this.onEnd.bind(this));
+ this.button.on('pointerupoutside', this.onEnd.bind(this));
+ this.button.on('pointertap', this.onEnd.bind(this));
+ this.button.on('scroll', this.onEnd.bind(this));
+
+ // 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);
+ this.addChild(badge);
+ this.badge = badge;
+ }
+
+ this.layout();
+
+ // 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;
+
+ // badge
+ //--------------------
+ if (this.badge) {
+ this.removeChild(this.badge);
+ const width = this._width;
+ const height = this._height;
+ this.addChild(this.badge);
+
+ const badge = this.badge;
+
+ switch (badge.opts.align) {
+ case 'left':
+ badge.x = -badge.width / 2 + badge.opts.offsetLeft;
+ break
+ case 'center':
+ badge.x = width / 2 - badge.width / 2 + badge.opts.offsetLeft;
+ break
+ case 'right':
+ badge.x = width - badge.width / 2 + badge.opts.offsetLeft;
+ }
+
+ switch (badge.opts.verticalAlign) {
+ case 'top':
+ badge.y = -badge.height / 2 + badge.opts.offsetTop;
+ break
+ case 'middle':
+ badge.y = height / 2 - badge.height / 2 + badge.opts.offsetTop;
+ break
+ case 'bottom':
+ badge.y = height - badge.height / 2 + badge.opts.offsetTop;
+ }
+ }
+
+ // 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;
+ }
+ }
+
+ onEnd(event) {
+ this.capture(event);
+ TweenLite.to([this.button, this.content], this.theme.fast, {
+ alpha: 1,
+ overwrite: 'none'
+ });
+ }
+ }
+
+ /* 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. If the buttons are wider than the maximum width, the buttons get stacked. Note: The buttons can only be stacked if margin is not zero. Note 2: Load the Greensock ThrowPropsPlugin for smoother animations.
+ * @param {number} [opts.maxHeight] - The maximum height of the button group. If the buttons are higher than the maximum height, the buttons get stacked. Note: The buttons can only be stacked if margin is not zero. Note 2: Load the Greensock ThrowPropsPlugin for smoother animations.
+ * @param {number} [opts.stackPadding=10] - The padding for stacked buttons.
+ * @param {PIXI.Application} [opts.app=window.app] - The PixiJS Application. Must be set if you want to use the mousewheel to scroll your button group. Only used when the buttons are stacked (with maxWidth or maxHeight).
+ * @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,
+ stackPadding: 10,
+ app: window.app,
+ 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: {},
+ 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.opts.textStyle = Object.assign({}, theme.textStyle, this.opts.textStyle);
+ this.opts.textStyleActive = Object.assign({}, theme.textStyleActive, this.opts.textStyleActive);
+
+ 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;
+ let index = 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;
+
+ button.__initIndex = index;
+ index++;
+ }
+
+ 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.margin > 0 && (this.opts.maxWidth || this.opts.maxHeight)) {
+ 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.__initHeight = this.container.height;
+ }
+
+ 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();
+
+ // stack
+ //-----------------
+ if (this.opts.margin > 0 && (this.opts.maxWidth || this.opts.maxHeight)) {
+ 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));
+ }
+
+ /**
+ * Gets or sets the maximum width of the button group for stacking. Usefull when you want to resize the available space.
+ *
+ * @member {number}
+ */
+ get maxWidth() {
+ return this.opts.maxWidth
+ }
+
+ set maxWidth(value) {
+ this.opts.maxWidth = value;
+ this.layout();
+ }
+
+ /**
+ * Gets or sets the maximum height of the button group for stacking. Usefull when you want to resize the available space.
+ *
+ * @member {number}
+ */
+ get maxHeight() {
+ return this.opts.maxHeight
+ }
+
+ set maxHeight(value) {
+ this.opts.maxHeight = value;
+ this.layout();
+ }
+
+ /**
+ * 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) {
+ if (
+ (this.opts.maxWidth != null && this.__initWidth > this.opts.maxWidth) ||
+ (this.opts.maxHeight != null && this.__initHeight > this.opts.maxHeight)
+ ) {
+ 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;
+ }
+
+ this.stack();
+ }
+ }
+
+ /**
+ *
+ * @private
+ * @param {*} event
+ */
+ onEnd(event) {
+ if (this.__dragging) {
+ this.__dragging = false;
+
+ this.capture(event);
+
+ const throwProps = { x: { velocity: 'auto' }, y: { velocity: 'auto' } };
+
+ if (this.opts.orientation === 'horizontal') {
+ if (this.__initWidth > this.opts.maxWidth) {
+ // stack!
+ const distanceToLeft = this.container.x;
+ const distanceToRight = this.opts.maxWidth - this.container.x - this.__initWidth;
+
+ if (distanceToLeft > 0) {
+ throwProps.x.end = 0;
+ } else if (distanceToRight > 0) {
+ throwProps.x.end = this.opts.maxWidth - this.__initWidth;
+ }
+ } else {
+ // just magnetize
+ throwProps.x.end = 0;
+ }
+ } else {
+ if (this.__initHeight > this.opts.maxHeight) {
+ // stack!
+ const distanceToTop = this.container.y;
+ const distanceToBottom = this.opts.maxHeight - this.container.y - this.__initHeight;
+
+ if (distanceToTop > 0) {
+ throwProps.y.end = 0;
+ } else if (distanceToBottom > 0) {
+ throwProps.y.end = this.opts.maxHeight - this.__initHeight;
+ }
+ } else {
+ // just magnetize
+ throwProps.y.end = 0;
+ }
+ }
+
+ if (typeof ThrowPropsPlugin != 'undefined') {
+ ThrowPropsPlugin.to(
+ this.container.position,
+ {
+ throwProps,
+ ease: Strong.easeOut,
+ onUpdate: () => this.stack(),
+ onComplete: () => ThrowPropsPlugin.untrack(this.container.position)
+ },
+ 0.8,
+ 0.4
+ );
+ } else {
+ if (this.opts.orientation === 'horizontal' && throwProps.x.end != null) {
+ TweenMax.to(this.container.position, 0.3, { x: throwProps.x.end, onUpdate: this.stack.bind(this) });
+ } else if (this.opts.orientation === 'vertical' && throwProps.y.end != null) {
+ TweenMax.to(this.container.position, 0.3, { y: throwProps.y.end, onUpdate: this.stack.bind(this) });
+ }
+ }
+ }
+ }
+
+ /**
+ *
+ * @private
+ * @param {*} event
+ */
+ onScroll(event) {
+ if (
+ (this.opts.maxWidth != null && this.__initWidth > this.opts.maxWidth) ||
+ (this.opts.maxHeight != null && this.__initHeight > this.opts.maxHeight)
+ ) {
+ 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;
+ }
+ }
+
+ 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);
+ }
+
+ /**
+ * @private
+ */
+ stack() {
+ if (this.opts.maxWidth) {
+ this._stackHorizontal();
+ } else if (this.opts.maxHeight) {
+ this._stackVertical();
+ }
+ }
+
+ /**
+ * @private
+ */
+ _stackHorizontal() {
+ const sorted = [];
+
+ let reverseCounter = this.buttons.length - 1;
+
+ this.buttons.forEach((it, index) => {
+ const leftCorner = it.__originalPosition.x + this.container.x;
+ const rightCorner = it.__originalPosition.x + it.button.width;
+ const paddingLeft = index * this.opts.stackPadding;
+ const paddingRight = reverseCounter * this.opts.stackPadding;
+ if (leftCorner < paddingLeft) {
+ // left border
+ it.x = -this.container.x + paddingLeft;
+ } else if (rightCorner > -this.container.x + this.opts.maxWidth - paddingRight) {
+ // right border
+ it.x = -this.container.x + this.opts.maxWidth - it.button.width - paddingRight;
+ } else {
+ it.x = it.__originalPosition.x;
+ }
+
+ reverseCounter--;
+
+ sorted.push(it);
+ });
+
+ const min = Math.min(...sorted.map(it => it.x));
+ const max = Math.max(...sorted.map(it => it.x + it.button.width));
+ const center = (min + max) / 2;
+
+ // z-index
+ sorted
+ .sort((a, b) => {
+ const centerA = a.x + a.button.width / 2;
+ const centerB = b.x + b.button.width / 2;
+
+ if (centerA < center && centerB < center) {
+ if (a.x < b.x) {
+ return -1
+ } else if (b.x < a.x) {
+ return 1
+ }
+ } else if (centerA > center && centerB > center) {
+ if (a.x + a.button.width > b.x + b.button.width) {
+ return -1
+ } else if (b.x + b.button.width < a.x + a.button.x) {
+ return 1
+ }
+ }
+
+ return 0
+ })
+ .forEach(it => it.parent.addChild(it));
+ }
+
+ /**
+ * @private
+ */
+ _stackVertical() {
+ const sorted = [];
+
+ let reverseCounter = this.buttons.length - 1;
+
+ this.buttons.forEach((it, index) => {
+ const topCorner = it.__originalPosition.y + this.container.y;
+ const bottomCorner = it.__originalPosition.y + it.button.height;
+ const paddingTop = index * this.opts.stackPadding;
+ const paddingBottom = reverseCounter * this.opts.stackPadding;
+ if (topCorner < paddingTop) {
+ // top border
+ it.y = -this.container.y + paddingTop;
+ } else if (bottomCorner > -this.container.y + this.opts.maxHeight - paddingBottom) {
+ // bottom border
+ it.y = -this.container.y + this.opts.maxHeight - it.button.height - paddingBottom;
+ } else {
+ it.y = it.__originalPosition.y;
+ }
+
+ reverseCounter--;
+
+ sorted.push(it);
+ });
+
+ const min = Math.min(...sorted.map(it => it.y));
+ const max = Math.max(...sorted.map(it => it.y + it.button.height));
+ const center = (min + max) / 2;
+
+ // z-index
+ sorted
+ .sort((a, b) => {
+ const centerA = a.y + a.button.height / 2;
+ const centerB = b.y + b.button.height / 2;
+
+ if (centerA < center && centerB < center) {
+ if (a.y < b.y) {
+ return -1
+ } else if (b.y < a.y) {
+ return 1
+ }
+ } else if (centerA > center && centerB > center) {
+ if (a.y + a.button.height > b.y + b.button.height) {
+ return -1
+ } else if (b.y + b.button.height < a.y + a.button.y) {
+ return 1
+ }
+ }
+
+ return 0
+ })
+ .forEach(it => 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 +4224,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 +4336,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 +4367,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 +4508,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 +4529,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 +4558,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 +4567,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 +4618,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 +4631,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 +4650,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 +4683,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 +4696,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 +4864,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 +4997,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 +5116,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 +5150,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 +5159,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 +5289,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 +5496,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 +5518,7 @@
let scaled = 0;
let alpha = 0;
let zoom = 1;
- for(let i=0; i t1 + this.longPressTime;
if (tookLong) {
@@ -5656,10 +5768,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 +5793,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 +5860,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 +5898,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 +5911,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 +5926,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 +5937,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 +5948,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 +5959,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 +5972,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 +5984,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 +6007,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 +6056,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 +6097,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 +6160,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 +6210,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 +6342,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 +6376,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 +6385,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 +6400,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 +6479,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 +6552,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 +6573,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 +6634,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 +6647,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 +6667,7 @@
}
toString() {
- return (
- 'Event(scatterResized width: ' +
- this.width +
- 'height: ' +
- this.height +
- ')'
- )
+ return 'Event(scatterResized width: ' + this.width + 'height: ' + this.height + ')'
}
}
@@ -6942,11 +6940,23 @@
}
close() {
+ this._callCloseCallbacks();
+ this._removeSelfFromScatterContainer();
+ }
+
+ _callCloseCallbacks() {
if (this.onClose) {
this.onClose.forEach(callback => callback(this));
}
}
+ _removeSelfFromScatterContainer() {
+ // Removes self from container when it's closed.
+ if (this.container) {
+ this.container.remove(this);
+ }
+ }
+
gesture(interaction) {
let delta = interaction.delta();
if (delta != null) {
@@ -7077,10 +7087,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 +7142,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 +7193,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 +7258,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 +7317,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 +7858,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,
@@ -7914,6 +7900,8 @@
DOMScatter.zIndex = 1000;
+ /* eslint-disable no-unused-vars */
+
class CardLoader {
constructor(
src,
@@ -7934,7 +7922,7 @@
this.x = x;
this.y = y;
this.scale = scale;
- this.rotation = 0;
+ this.rotation = rotation;
this.maxScale = maxScale;
this.minScale = minScale;
this.wantedWidth = width;
@@ -7942,12 +7930,6 @@
this.maxWidth = maxWidth != null ? maxWidth : window.innerWidth;
this.maxHeight = maxHeight != null ? maxHeight : window.innerHeight;
this.addedNode = null;
- console.log({
- width,
- height,
- maxWidth,
- maxHeight
- });
}
unload() {
@@ -8034,28 +8016,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 +8048,7 @@
//Remove callback
if (scatter.onTransform) {
- let callbackIdx = scatter.onTransform.indexOf(
- removeOnMinScale
- );
+ let callbackIdx = scatter.onTransform.indexOf(removeOnMinScale);
scatter.onTransform.splice(callbackIdx, 1);
}
}
@@ -8105,7 +8079,6 @@
}
setupFlippable(flippable, loader) {
- console.log('setupFlippable', loader.wantedWidth);
flippable.wantedWidth = loader.wantedWidth;
flippable.wantedHeight = loader.wantedHeight;
flippable.wantedScale = loader.scale;
@@ -8115,7 +8088,6 @@
}
start({ targetCenter = null } = {}) {
- console.log('DOMFlip.start', targetCenter);
if (this.preloadBack) {
this.flippable.start({ duration: this.flipDuration, targetCenter });
} else {
@@ -8265,7 +8237,6 @@
clickInfo() {
this.bringToFront();
- console.log('clickInfo');
this.infoBtn.click();
}
@@ -8292,6 +8263,7 @@
let startScale = this.element._gsTransform.scaleX;
let w = this.element.style.width;
let h = this.element.style.height;
+ // eslint-disable-next-line no-console
console.log(info, startX, startY, startAngle, startScale, w, h);
}
@@ -8348,9 +8320,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;
@@ -8363,14 +8333,12 @@
let y = this.flipped ? yy : this.startY;
let onUpdate = this.onUpdate !== null ? () => this.onUpdate(this) : null;
- console.log('start', this.flipDuration);
TweenLite.to(this.card, this.flipDuration, {
rotationY: targetY,
ease: Power1.easeOut,
transformOrigin: '50% 50%',
onUpdate,
onComplete: e => {
- console.log('start end', this.flipDuration);
if (this.flipped) {
//this.hide(this.front)
this.enable(this.backBtn);
@@ -8401,8 +8369,6 @@
},
force3D: true
});
-
- console.log('start 2', this.wantedWidth, this.startWidth, { w, h });
// See https://greensock.com/forums/topic/7997-rotate-the-shortest-way/
TweenLite.to(this.element, this.flipDuration / 2, {
scale: targetScale,
@@ -8505,11 +8471,10 @@
if (registeredTiles.has(url)) {
let tiles = registeredTiles.get(url);
tiles.add(this);
- if (debug) console.log("Tile.register", url, tiles.size);
- }
- else {
+ if (debug) console.log('Tile.register', url, tiles.size);
+ } else {
registeredTiles.set(url, new Set([this]));
- if (debug) console.log("Tile.register", url, 1);
+ if (debug) console.log('Tile.register', url, 1);
}
}
@@ -8542,32 +8507,31 @@
keptTextures.push({ url: this.url, texture: this.texture });
let opts = { children: true, texture: false, baseTexture: false };
- if (debug) console.log("Tile.destroy", registeredTiles.size, opts);
+ if (debug) console.log('Tile.destroy', registeredTiles.size, opts);
super.destroy(opts);
while (keptTextures.length > keepTextures) {
let { url, texture } = keptTextures.shift();
if (Tile.isObsolete(url)) {
texture.destroy(true); // Destroy base as well
- if (debug) console.log("Destroying texture and baseTexture", url);
+ if (debug) console.log('Destroying texture and baseTexture', url);
}
}
- }
- else {
+ } else {
// No longer registered and not pending
- if (count <= 0) { // && !Tile.isPending(this.url)
+ if (count <= 0) {
+ // && !Tile.isPending(this.url)
let opts = { children: true, texture: true, baseTexture: true };
super.destroy(opts);
- if (debug) console.log("Tile.destroy", registeredTiles.size, opts);
- }
- else {
+ if (debug) console.log('Tile.destroy', registeredTiles.size, opts);
+ } else {
let opts = { children: true, texture: false, baseTexture: false };
- if (debug) console.log("Tile.destroy", registeredTiles.size, opts);
+ if (debug) console.log('Tile.destroy', registeredTiles.size, opts);
super.destroy(opts);
}
if (this.parent != null) {
// UO: Emit warning and remove
- console.warn("Destroying tile with parent. Hiding instead");
+ console.warn('Destroying tile with parent. Hiding instead');
this.visible = false;
}
}
@@ -8600,10 +8564,9 @@
renderWebGL(renderer) {
try {
super.renderWebGL(renderer);
- }
- catch (e) {
+ } catch (e) {
// We want persistent logging here
- Logging.error("Error in Tile.renderWebGL: " + e.message);
+ Logging.error('Error in Tile.renderWebGL: ' + e.message);
}
}
@@ -8629,15 +8592,14 @@
}
}
}
- if (count > 0)
- console.log("Sweeping textures", count);
+ if (count > 0) console.log('Sweeping textures', count);
}
}
/**
* Texture received too late. We do not need it.
- * @param {*} url
- * @param {*} texture
+ * @param {*} url
+ * @param {*} texture
*/
static lateTexture(url, texture) {
lateTextures.set(url, texture);
@@ -8723,7 +8685,7 @@
_textureAvailable(url, col, row, texture) {
let tile = this.loaded.get(url);
if (tile != null) {
- console.warn("Tile already loaded");
+ console.warn('Tile already loaded');
tile.unregister();
}
try {
@@ -8731,9 +8693,8 @@
this.loaded.set(url, tile);
this.tiles.tileAvailable(tile, col, row, url);
} catch (error) {
- console.warn("Tile loading error", error);
+ console.warn('Tile loading error', error);
}
-
}
}
@@ -8743,7 +8704,6 @@
* Calls the Tiles.tileAvailable method if the texture is available.
**/
class PIXITileLoader extends TileLoader {
-
constructor(tiles, compression) {
super(tiles);
this.destroyed = false;
@@ -8785,15 +8745,13 @@
/** Load one and only one of the scheduled tiles **/
loadOneTile() {
- if (this.destroyed)
- return
+ if (this.destroyed) return
this._loadOneTile();
}
/** Load all scheduled tiles **/
loadAll() {
- if (this.destroyed)
- return
+ if (this.destroyed) return
this._loadAllTiles();
}
@@ -8804,7 +8762,7 @@
try {
this.loader.reset();
} catch (error) {
- console.warn("Error while resetting loader", error);
+ console.warn('Error while resetting loader', error);
}
}
@@ -8823,15 +8781,14 @@
let texture = resource.texture;
let url = resource.url;
Tile.lateTexture(url, texture);
- console.warn("Received resource after destroy", texture);
+ console.warn('Received resource after destroy', texture);
return
}
try {
let [col, row] = this.map.get(resource.url);
this._textureAvailable(resource.url, col, row, resource.texture);
- }
- catch (err) {
- console.warn("Texture unavailable: " + err.message);
+ } catch (err) {
+ console.warn('Texture unavailable: ' + err.message);
}
}
@@ -8877,9 +8834,8 @@
if (!this.loaded.has(url)) {
let resource = this.loader.resources[url];
if (resource) {
- console.log("Resource already added", url);
- }
- else {
+ console.log('Resource already added', url);
+ } else {
urls.push(url);
i += 1;
}
@@ -8892,20 +8848,18 @@
}
}
-
/**
* Uses Workers but can be replaced with other loaders implementing
* the public methods without underscore.
* Calls the Tiles.tileAvailable method if the texture is available.
**/
class WorkerTileLoader extends TileLoader {
-
constructor(tiles, workerPath) {
super(tiles);
- let worker = this.worker = new Worker(workerPath);
+ let worker = (this.worker = new Worker(workerPath));
- worker.onmessage = (event) => {
+ worker.onmessage = event => {
if (event.data.success) {
let { url, col, row, buffer } = event.data;
//console.log("WorkerTileLoader.loaded", url, buffer)
@@ -8923,7 +8877,7 @@
let url = this.loadQueue.pop();
let [col, row] = this.map.get(url);
let tile = [col, row, url];
- this.worker.postMessage({ command: "load", tiles: [tile] });
+ this.worker.postMessage({ command: 'load', tiles: [tile] });
}
}
@@ -8934,16 +8888,16 @@
let [col, row] = this.map.get(url);
tiles.push([col, row, url]);
}
- this.worker.postMessage({ command: "load", tiles });
+ this.worker.postMessage({ command: 'load', tiles });
}
cancel() {
super.cancel();
- this.worker.postMessage({ command: "abort" });
+ this.worker.postMessage({ command: 'abort' });
}
destroy() {
- this.worker.postMessage({ command: "abort" });
+ this.worker.postMessage({ command: 'abort' });
this.worker.terminate();
this.worker = null;
super.destroy();
@@ -8966,18 +8920,7 @@
* @param {number} fadeInTime - time needed to fade in tiles if TweenLite is set
**/
class Tiles extends PIXI.Container {
- constructor(
- level,
- view,
- scale,
- cols,
- rows,
- width,
- height,
- tileSize,
- overlap,
- fadeInTime = 0.33
- ) {
+ constructor(level, view, scale, cols, rows, width, height, tileSize, overlap, fadeInTime = 0.33) {
super();
this.debug = false;
this.showGrid = false;
@@ -9014,8 +8957,6 @@
this.destroyed = false;
}
-
-
/** Tests whether all tiles are loaded. **/
isComplete() {
return this.cols * this.rows === this.children.length
@@ -9054,19 +8995,19 @@
if (this.debug)
console.log(
'Tiles level: ' +
- this.level +
- ' scale: ' +
- this.scale.x +
- ' cols: ' +
- this.cols +
- ' rows: ' +
- this.rows +
- ' w: ' +
- this.pixelWidth +
- ' h: ' +
- this.pixelHeight +
- ' tsize:' +
- this.tileSize
+ this.level +
+ ' scale: ' +
+ this.scale.x +
+ ' cols: ' +
+ this.cols +
+ ' rows: ' +
+ this.rows +
+ ' w: ' +
+ this.pixelWidth +
+ ' h: ' +
+ this.pixelHeight +
+ ' tsize:' +
+ this.tileSize
);
}
@@ -9214,8 +9155,8 @@
}
/* Destroys the tiles which are not with the bounds of the app to free
- * memory.
- **/
+ * memory.
+ **/
destroyTiles(quadTrees) {
let count = 0;
for (let [url, tile] of this.available.entries()) {
@@ -9224,8 +9165,7 @@
count += 1;
}
}
- if (count && this.debug)
- console.log('destroyTiles', this.level, count);
+ if (count && this.debug) console.log('destroyTiles', this.level, count);
}
destroyUnneededTiles() {
@@ -9236,8 +9176,7 @@
count += 1;
}
}
- if (count && this.debug)
- console.log('destroyUnneededTiles', this.level, count);
+ if (count && this.debug) console.log('destroyUnneededTiles', this.level, count);
}
highlightInfos() {
@@ -9319,15 +9258,14 @@
// number in the file system for the folder with tiles
this.clip = this.clip || null; // e.g. { level: 12, col: 301436, row: 354060 }
this.type = this.type || 'dzi';
- this.urlTileTemplate =
- this.urlTileTemplate || '{path}/{level}/{column}_{row}.{format}';
+ this.urlTileTemplate = this.urlTileTemplate || '{path}/{level}/{column}_{row}.{format}';
this.setupDimensions();
}
/* Computes the needed number of layers from the width and height
- * of the image. Note that this includes the level 0, i.e. 0 ... 4
- * means that 5 levels exist.
- **/
+ * of the image. Note that this includes the level 0, i.e. 0 ... 4
+ * means that 5 levels exist.
+ **/
numLevels() {
let maxDimension = Math.max(this.width, this.height);
let boundary = this.type === 'dzi' ? 1 : this.tileSize;
@@ -9510,15 +9448,7 @@
test() {
//console.log("w=" + this.width + " h=" + this.height + " maxlevel=" + this.maxLevel + " base=" + this.baseLevel)
for (let i = 0; i <= this.maxLevel; i++) {
- console.log(
- ' ' +
- i +
- ' -> ' +
- this.getScale(i) +
- ' [' +
- this.dimensions(i) +
- ']'
- );
+ console.log(' ' + i + ' -> ' + this.getScale(i) + ' [' + this.dimensions(i) + ']');
}
console.log(this.urlForTile(this.baseLevel, 0, 0));
}
@@ -9558,12 +9488,7 @@
**/
noQuads() {
if (this.previous === null) return false
- return (
- this.nw === null &&
- this.ne === null &&
- this.sw === null &&
- this.se === null
- )
+ return this.nw === null && this.ne === null && this.sw === null && this.se === null
}
/** Unlink the given quad node
@@ -9602,7 +9527,6 @@
}
}
-
/**
* The main class of a deeply zoomable image that is represented by a hierarchy
* of tile layers for each zoom level. This gives the user the impression that
@@ -9620,7 +9544,7 @@
debug = false,
shadow = false,
center = false,
- world = null, // Defines the world bounds the images lives in
+ world = null, // Defines the world bounds the images lives in
highResolution = true,
autoLoadTiles = true,
useWorker = '',
@@ -9635,9 +9559,7 @@
this.shadow = shadow;
this.world = world;
this.useWorker = useWorker;
- this.resolution = highResolution
- ? Math.round(window.devicePixelRatio)
- : 1;
+ this.resolution = highResolution ? Math.round(window.devicePixelRatio) : 1;
this.alpha = alpha;
this.fastLoads = 0;
this.active = true;
@@ -9827,7 +9749,7 @@
**/
get maxScale() {
let delta = this.info.maxLevel - this.info.baseLevel;
- return Math.pow(2, delta) / this.resolution * 2
+ return (Math.pow(2, delta) / this.resolution) * 2
}
/** Getter for the current width.
@@ -9842,7 +9764,6 @@
return this.pixelSize[1]
}
-
/* Overrides PIXI.Container.hitArea()
* Allows to optimize the hit testing. Container with hit areas are directly
* hit tested without consideration of children.
@@ -9912,7 +9833,7 @@
}
worldBounds() {
- let viewBounds = this.app.scene.bounds || this.app.scene.getBounds();
+ let viewBounds = this.app.scene.bounds || this.app.scene.getBounds();
// Using getBounds extends visible scope after loading tiles and leads
// to excessive loading. So we prefer bounds over getBounds()
if (this.world != null) {
@@ -9950,11 +9871,7 @@
let topLeft = tiles.toLocal(worldTopLeft);
let bottomRight = tiles.toLocal(worldBottomRight);
tiles._centerPoint = tilesCenter;
- let bounds = new PIXI.Rectangle(
- topLeft.x,
- topLeft.y,
- bottomRight.x - topLeft.x,
- bottomRight.y - topLeft.y);
+ let bounds = new PIXI.Rectangle(topLeft.x, topLeft.y, bottomRight.x - topLeft.x, bottomRight.y - topLeft.y);
tiles._boundsRect = bounds;
@@ -9999,9 +9916,6 @@
return { centerCol, centerRow, needed }
}
-
-
-
/** Returns all changed tiles for a given level.
* @param {Tiles} tiles - the grid of tiles
* @param {number} level - The zoom level of the grid
@@ -10054,8 +9968,7 @@
* @param {PIXI.Point} about - point of interaction
*/
populateTiles(tiles, level, { onlyone = false, about = null } = {}) {
- if (tiles.isComplete())
- return
+ if (tiles.isComplete()) return
let referenceCol = -1;
let referenceRow = -1;
let { centerCol, centerRow, changed } = this.changedTiles(tiles, level);
@@ -10066,8 +9979,7 @@
let scaledTileSize = tiles.tileSize * tiles.tileScale;
referenceCol = Math.floor(refPoint.x / scaledTileSize);
referenceRow = Math.floor(refPoint.y / scaledTileSize);
- }
- else {
+ } else {
referenceCol = centerCol;
referenceRow = centerRow;
}
@@ -10105,17 +10017,7 @@
let [cols, rows, w, h] = this.info.dimensions(level);
let increasedLevels = level - this.info.baseLevel;
let invScale = Math.pow(0.5, increasedLevels);
- let tiles = new Tiles(
- level,
- this,
- invScale,
- cols,
- rows,
- w,
- h,
- this.info.tileSize,
- this.info.overlap
- );
+ let tiles = new Tiles(level, this, invScale, cols, rows, w, h, this.info.tileSize, this.info.overlap);
this.addTiles(key, tiles);
if (this.info.clip) {
let rest = this.info.rests[level];
@@ -10218,7 +10120,6 @@
});
}
-
/**
* Destroy tiles in all layers that are no longer needed
*
@@ -10263,8 +10164,8 @@
}
/* Tint all tiles
- * @param {number} level - The zoom level of the grid
- */
+ * @param {number} level - The zoom level of the grid
+ */
tintTilesBelowLevel(level) {
Object.keys(this.tileLayers).forEach(key => {
let tiles = this.tileLayers[key];
@@ -10276,7 +10177,7 @@
/**
* Ensure that the given tiles layer is the topmost one and visible.
- * @param {*} tiles
+ * @param {*} tiles
*/
bringTilesToFront(tiles) {
this.tileContainer.addChild(tiles);
@@ -10310,8 +10211,7 @@
});
if (this.fastLoads == 3) {
this.fastLoads = 0;
- }
- else {
+ } else {
return
}
}
@@ -10339,10 +10239,10 @@
}
/**
- *Activates the textures on the DeepZoomImage.
- *
- * @memberof DeepZoomImage
- */
+ *Activates the textures on the DeepZoomImage.
+ *
+ * @memberof DeepZoomImage
+ */
activate() {
this.active = true;
this.destroyTilesAboveLevel(this.currentLevel);
@@ -10351,10 +10251,10 @@
}
/**
- *Dectivates the textures on the DeepZoomImage.
- *
- * @memberof DeepZoomImage
- */
+ *Dectivates the textures on the DeepZoomImage.
+ *
+ * @memberof DeepZoomImage
+ */
deactivate() {
this.active = false;
this.destroyAllTiles();
@@ -10480,15 +10380,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 +10409,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 +10489,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 +10639,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 +10678,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 +10770,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 +10860,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 +10878,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 +10945,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 +11032,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 +11056,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);
}
@@ -11338,6 +11194,8 @@
}
}
+ /* eslint-disable no-unused-vars */
+
/** A container for scatter objects, which uses a single InteractionMapper
* for all children. This reduces the number of registered event handlers
* and covers the common use case that multiple objects are scattered
@@ -11414,12 +11272,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 +11356,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 +11367,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 +11384,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 +11398,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
}
@@ -11687,15 +11526,12 @@
roundPixel(value) {
// UO: Should be obsolete because Renderer supports roundPixels by default
return value
- let res = this.renderer.resolution;
- return Math.round(value * res) / res
}
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 +11640,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 +11653,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 +11802,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 +11842,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 +12021,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 +12074,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 +12223,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 {
@@ -12546,6 +12341,8 @@
}
}
+ /* eslint-disable no-unused-vars */
+
class Ticks {
get reservedPrefixes() {
return ['decade', 'year', 'month', 'day', 'hour', 'minute', 'second']
@@ -12633,24 +12430,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 +12461,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 +12611,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 +12652,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 +12721,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;
@@ -12970,15 +12735,11 @@
this.minZoom = 1;
this.maxZoom = 12000;
this.scroll = 0;
+ this.draggable = false;
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 +12751,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 +12908,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;
}
}
@@ -13249,9 +13002,9 @@
this.killTweens();
this.deltas = [];
this.validScroll();
- if (typeof ThrowPropsPlugin != 'undefined') {
- ThrowPropsPlugin.track(this, 'delta');
- }
+ // if (typeof ThrowPropsPlugin != 'undefined') {
+ // ThrowPropsPlugin.track(this, 'delta')
+ // }
}
onMove(event, interaction) {
@@ -13260,6 +13013,9 @@
return
}
this.scroll += delta.x;
+ if (this.draggable) {
+ this.y += delta.y;
+ }
while (this.deltas.length > 10) {
this.deltas.pop(0);
}
@@ -13271,11 +13027,10 @@
}
onEnd(event, interaction) {
- if (typeof ThrowPropsPlugin != 'undefined') {
- let vel = ThrowPropsPlugin.getVelocity(this, 'delta');
- ThrowPropsPlugin.untrack(this);
- }
-
+ // if (typeof ThrowPropsPlugin != 'undefined') {
+ // let vel = ThrowPropsPlugin.getVelocity(this, 'delta')
+ // ThrowPropsPlugin.untrack(this)
+ // }
this.killTweens();
this.redraw();
let delta = 0;
@@ -13288,7 +13043,6 @@
this.autoScroll = true;
let anchor = interaction.current.mean();
this.keepInBounds(delta, anchor);
-
for (let key of interaction.ended.keys()) {
if (interaction.isDoubleTap(key)) {
this.onDoubleTap(event, interaction, key);
@@ -13656,10 +13410,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 +13419,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 +13496,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 +13517,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 +13528,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 +13539,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 +13550,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 +13627,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 +13646,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 +13706,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 +13966,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 +13979,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 +14041,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 +14101,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 +14115,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 +14156,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 +14172,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 +14373,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 +14393,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 +14430,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 +14444,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 +14561,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 +14819,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 +14982,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 +15012,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 +15032,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 +15056,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 +15259,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 +15461,7 @@
}
}
- /* globals */
+ /* globals ThrowPropsPlugin, Strong */
/**
* Class that represents a PixiJS List.
@@ -15964,9 +15568,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 +15625,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 +15654,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 +15791,7 @@
{
throwProps,
ease: Strong.easeOut,
- onComplete: () =>
- ThrowPropsPlugin.untrack(this.container.position)
+ onComplete: () => ThrowPropsPlugin.untrack(this.container.position)
},
0.8,
0.4
@@ -16219,20 +15812,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 +15831,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..b7ce313 100644
--- a/doc/out/AbstractPopup.html
+++ b/doc/out/AbstractPopup.html
@@ -252,6 +252,10 @@
disabled
+ maxHeight
+
+ maxWidth
+
@@ -263,6 +267,8 @@
Methods
+ - capture
+
- hide
- layout
@@ -2491,7 +2497,7 @@ a string, a number or a PIXI.Text object.
@@ -2648,7 +2654,7 @@ a string, a number or a PIXI.Text object.
@@ -2753,7 +2759,7 @@ a string, a number or a PIXI.Text object.
@@ -2912,7 +2918,7 @@ a string, a number or a PIXI.Text object.
diff --git a/doc/out/Badge.html b/doc/out/Badge.html
index 1d623cb..3bb36ce 100644
--- a/doc/out/Badge.html
+++ b/doc/out/Badge.html
@@ -252,6 +252,10 @@
disabled
+ maxHeight
+
+ maxWidth
+
@@ -263,6 +267,8 @@
Methods
+ - capture
+
- hide
- layout
@@ -1939,7 +1945,7 @@ a string, a number or a PIXI.Text object.
@@ -2100,7 +2106,7 @@ a string, a number or a PIXI.Text object.
@@ -2209,7 +2215,7 @@ a string, a number or a PIXI.Text object.
@@ -2368,7 +2374,7 @@ a string, a number or a PIXI.Text object.
diff --git a/doc/out/BlurFilter.html b/doc/out/BlurFilter.html
index 9514f8d..73e8970 100644
--- a/doc/out/BlurFilter.html
+++ b/doc/out/BlurFilter.html
@@ -252,6 +252,10 @@
- disabled
+ - maxHeight
+
+ - maxWidth
+
@@ -263,6 +267,8 @@
Methods
+ - capture
+
- hide
- layout
@@ -1792,7 +1798,7 @@ app.scene.filters = [blurFilter]
diff --git a/doc/out/Button.html b/doc/out/Button.html
index 130f6df..bc7c972 100644
--- a/doc/out/Button.html
+++ b/doc/out/Button.html
@@ -252,6 +252,10 @@
- disabled
+ - maxHeight
+
+ - maxWidth
+
@@ -263,6 +267,8 @@
Methods
+ - capture
+
- hide
- layout
@@ -1465,7 +1471,7 @@
@@ -3493,7 +3499,7 @@ the tint property of the icon sprite.
@@ -3598,7 +3604,7 @@ the tint property of the icon sprite.
@@ -3703,7 +3709,7 @@ the tint property of the icon sprite.
@@ -3810,7 +3816,7 @@ the tint property of the icon sprite.
diff --git a/doc/out/ButtonGroup.html b/doc/out/ButtonGroup.html
index 30aaabf..cf54f43 100644
--- a/doc/out/ButtonGroup.html
+++ b/doc/out/ButtonGroup.html
@@ -252,6 +252,10 @@
- disabled
+ - maxHeight
+
+ - maxWidth
+
@@ -263,6 +267,8 @@
Methods
+ - capture
+
- hide
- layout
@@ -1465,7 +1471,7 @@
@@ -1811,6 +1817,146 @@ or a Theme object.
+
+
+ maxWidth |
+
+
+
+
+
+number
+
+
+
+ |
+
+
+
+
+ |
+
+
+
+
+
+ optional
+
+
+
+
+
+ The maximum width of the button group. If the buttons are wider than the maximum width, the buttons get stacked. Note: The buttons can only be stacked if margin is not zero. Note 2: Load the Greensock ThrowPropsPlugin for smoother animations. |
+
+
+
+
+
+
+ maxHeight |
+
+
+
+
+
+number
+
+
+
+ |
+
+
+
+
+ |
+
+
+
+
+
+ optional
+
+
+
+
+
+ The maximum height of the button group. If the buttons are higher than the maximum height, the buttons get stacked. Note: The buttons can only be stacked if margin is not zero. Note 2: Load the Greensock ThrowPropsPlugin for smoother animations. |
+
+
+
+
+
+
+ stackPadding |
+
+
+
+
+
+number
+
+
+
+ |
+
+
+
+
+ 10
+
+ |
+
+
+
+
+
+ optional
+
+
+
+
+
+ The padding for stacked buttons. |
+
+
+
+
+
+
+ app |
+
+
+
+
+
+PIXI.Application
+
+
+
+ |
+
+
+
+
+ window.app
+
+ |
+
+
+
+
+
+ optional
+
+
+
+
+
+ The PixiJS Application. Must be set if you want to use the mousewheel to scroll your button group. Only used when the buttons are stacked (with maxWidth or maxHeight). |
+
+
+
+
padding |
@@ -2859,6 +3005,108 @@ app.scene.addChild(buttonGroup)
+
+
+
+
+
+
+
+
+-
+
+
+
+ maxHeight
+ number
+
+
+
+
+
+
+
+
+
+-
+
+
+
Gets or sets the maximum height of the button group for stacking. Usefull when you want to resize the available space.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+-
+
+
+
+ maxWidth
+ number
+
+
+
+
+
+
+
+
+
+-
+
+
+
Gets or sets the maximum width of the button group for stacking. Usefull when you want to resize the available space.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -2873,6 +3121,130 @@ app.scene.addChild(buttonGroup)
+-
+
+
+
+
+ capture
+
+ (event)
+
+
+
+
+
+
+
+
+
+
+
+
+
+-
+
+
+
+
Captures an event to inform InteractionMapper about processed events.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Name |
+
+
+ Type |
+
+
+
+ Description |
+
+
+
+
+
+
+
+
+ event |
+
+
+
+
+
+event
+|
+
+PIXI.InteractionEvent
+
+
+
+ |
+
+
+
+
+
+ The PIXI event to capture. |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
@@ -2994,7 +3366,7 @@ app.scene.addChild(buttonGroup)
@@ -3099,7 +3471,7 @@ app.scene.addChild(buttonGroup)
@@ -3206,7 +3578,7 @@ app.scene.addChild(buttonGroup)
diff --git a/doc/out/DeepZoomImage.html b/doc/out/DeepZoomImage.html
index 2ac1c23..0599ca7 100644
--- a/doc/out/DeepZoomImage.html
+++ b/doc/out/DeepZoomImage.html
@@ -252,6 +252,10 @@
- disabled
+ - maxHeight
+
+ - maxWidth
+
@@ -263,6 +267,8 @@
Methods
+ - capture
+
- hide
- layout
@@ -1469,7 +1475,7 @@ more detailed tiles at the larger level as fast as possible.
@@ -1922,7 +1928,7 @@ Adds a PIXI.Container if necessary.
@@ -2000,7 +2006,7 @@ rect.
@@ -2152,7 +2158,7 @@ rect.
@@ -2228,7 +2234,7 @@ rect.
@@ -2372,7 +2378,7 @@ rect.
@@ -2547,7 +2553,7 @@ rect.
@@ -2668,7 +2674,7 @@ rect.
@@ -2746,7 +2752,7 @@ the also overwritten _calculateBounds method.
@@ -2921,7 +2927,7 @@ the also overwritten _calculateBounds method.
@@ -2997,7 +3003,7 @@ the also overwritten _calculateBounds method.
@@ -3073,7 +3079,7 @@ the also overwritten _calculateBounds method.
@@ -3150,7 +3156,7 @@ visible quadTrees
@@ -3272,7 +3278,7 @@ be reused.
@@ -3348,7 +3354,7 @@ be reused.
@@ -3469,7 +3475,7 @@ be reused.
@@ -3620,7 +3626,7 @@ a new Tiles layer if necessary
@@ -3741,7 +3747,7 @@ a new Tiles layer if necessary
@@ -3862,7 +3868,7 @@ a new Tiles layer if necessary
@@ -4076,7 +4082,7 @@ a new Tiles layer if necessary
@@ -4220,7 +4226,7 @@ a new Tiles layer if necessary
@@ -4413,7 +4419,7 @@ Optional parameter:
@@ -4560,7 +4566,7 @@ layer.
@@ -4690,7 +4696,7 @@ Can be overwritten in subclasses.
@@ -4796,7 +4802,7 @@ large images.
@@ -4872,7 +4878,7 @@ large images.
@@ -5090,7 +5096,7 @@ i.e. after loading a single tile
diff --git a/doc/out/DeepZoomInfo.html b/doc/out/DeepZoomInfo.html
index fecf0d4..57d0e00 100644
--- a/doc/out/DeepZoomInfo.html
+++ b/doc/out/DeepZoomInfo.html
@@ -252,6 +252,10 @@
- disabled
+ - maxHeight
+
+ - maxWidth
+
@@ -263,6 +267,8 @@
Methods
+ - capture
+
- hide
- layout
@@ -1631,7 +1637,7 @@ height and width of the overall image, overlap, and image type.
@@ -1781,7 +1787,7 @@ height and width of the overall image, overlap, and image type.
@@ -1931,7 +1937,7 @@ height and width of the overall image, overlap, and image type.
@@ -2081,7 +2087,7 @@ height and width of the overall image, overlap, and image type.
@@ -2231,7 +2237,7 @@ height and width of the overall image, overlap, and image type.
@@ -2405,7 +2411,7 @@ on completion.
@@ -2603,7 +2609,7 @@ on completion.
diff --git a/doc/out/Flippable.html b/doc/out/Flippable.html
index 4b6c486..0c78dac 100644
--- a/doc/out/Flippable.html
+++ b/doc/out/Flippable.html
@@ -252,6 +252,10 @@
- disabled
+ - maxHeight
+
+ - maxWidth
+
@@ -263,6 +267,8 @@
Methods
+ - capture
+
- hide
- layout
@@ -2399,7 +2405,7 @@ front.on('click', event => flippable.toggle())
@@ -2506,7 +2512,7 @@ front.on('click', event => flippable.toggle())
diff --git a/doc/out/FontInfo.html b/doc/out/FontInfo.html
index d0b9130..38cdc37 100644
--- a/doc/out/FontInfo.html
+++ b/doc/out/FontInfo.html
@@ -252,6 +252,10 @@
- disabled
+ - maxHeight
+
+ - maxWidth
+
@@ -263,6 +267,8 @@
Methods
+ - capture
+
- hide
- layout
@@ -1553,7 +1559,7 @@
diff --git a/doc/out/Hypenate.html b/doc/out/Hypenate.html
index c018c72..39ea656 100644
--- a/doc/out/Hypenate.html
+++ b/doc/out/Hypenate.html
@@ -252,6 +252,10 @@
- disabled
+ - maxHeight
+
+ - maxWidth
+
@@ -263,6 +267,8 @@
Methods
+ - capture
+
- hide
- layout
@@ -1557,7 +1563,7 @@
@@ -1755,7 +1761,7 @@
diff --git a/doc/out/InteractivePopup.html b/doc/out/InteractivePopup.html
index 358e7ac..0e0a6c4 100644
--- a/doc/out/InteractivePopup.html
+++ b/doc/out/InteractivePopup.html
@@ -252,6 +252,10 @@
- disabled
+ - maxHeight
+
+ - maxWidth
+
@@ -263,6 +267,8 @@
Methods
+ - capture
+
- hide
- layout
@@ -1910,7 +1916,7 @@ a string, a number or a PIXI.Text object.
@@ -2069,7 +2075,7 @@ a string, a number or a PIXI.Text object.
@@ -2178,7 +2184,7 @@ a string, a number or a PIXI.Text object.
@@ -2337,7 +2343,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..8451acc 100644
--- a/doc/out/LabeledGraphics.exports.LabeledGraphics.html
+++ b/doc/out/LabeledGraphics.exports.LabeledGraphics.html
@@ -252,6 +252,10 @@
- disabled
+ - maxHeight
+
+ - maxWidth
+
@@ -263,6 +267,8 @@
Methods
+ - capture
+
- hide
- layout
@@ -1463,7 +1469,7 @@
@@ -1555,7 +1561,7 @@
diff --git a/doc/out/LabeledGraphics.html b/doc/out/LabeledGraphics.html
index 14e6732..0ec4242 100644
--- a/doc/out/LabeledGraphics.html
+++ b/doc/out/LabeledGraphics.html
@@ -252,6 +252,10 @@
- disabled
+ - maxHeight
+
+ - maxWidth
+
@@ -263,6 +267,8 @@
Methods
+ - capture
+
- hide
- layout
@@ -1463,7 +1469,7 @@
@@ -1571,7 +1577,7 @@ resuse and place labels across different layout variants
@@ -1647,7 +1653,7 @@ resuse and place labels across different layout variants
@@ -1723,7 +1729,7 @@ resuse and place labels across different layout variants
@@ -1996,7 +2002,7 @@ maxWidth: {number} word wraps text using hyphenation if possible
@@ -2146,7 +2152,7 @@ maxWidth: {number} word wraps text using hyphenation if possible
@@ -2267,7 +2273,7 @@ maxWidth: {number} word wraps text using hyphenation if possible
@@ -2388,7 +2394,7 @@ maxWidth: {number} word wraps text using hyphenation if possible
@@ -2620,7 +2626,7 @@ than wanted
diff --git a/doc/out/List.html b/doc/out/List.html
index 2250f6d..0370460 100644
--- a/doc/out/List.html
+++ b/doc/out/List.html
@@ -252,6 +252,10 @@
- disabled
+ - maxHeight
+
+ - maxWidth
+
@@ -263,6 +267,8 @@
Methods
+ - capture
+
- hide
- layout
@@ -2077,7 +2083,7 @@ app.scene.addChild(list)
@@ -2201,7 +2207,7 @@ app.scene.addChild(list)
@@ -2306,7 +2312,7 @@ app.scene.addChild(list)
@@ -2427,7 +2433,7 @@ app.scene.addChild(list)
@@ -2579,7 +2585,7 @@ app.scene.addChild(list)
diff --git a/doc/out/Message.html b/doc/out/Message.html
index aea87a6..b5c413c 100644
--- a/doc/out/Message.html
+++ b/doc/out/Message.html
@@ -252,6 +252,10 @@
- disabled
+ - maxHeight
+
+ - maxWidth
+
@@ -263,6 +267,8 @@
Methods
+ - capture
+
- hide
- layout
@@ -2169,7 +2175,7 @@ a string, a number or a PIXI.Text object.
@@ -2435,7 +2441,7 @@ a string, a number or a PIXI.Text object.
diff --git a/doc/out/MessageInteractivePopup.html b/doc/out/MessageInteractivePopup.html
index 495f1b2..6a132ef 100644
--- a/doc/out/MessageInteractivePopup.html
+++ b/doc/out/MessageInteractivePopup.html
@@ -252,6 +252,10 @@
- disabled
+ - maxHeight
+
+ - maxWidth
+
@@ -263,6 +267,8 @@
Methods
+ - capture
+
- hide
- layout
@@ -1783,7 +1789,7 @@ like Popup, Message...
diff --git a/doc/out/MessageMessageInteractivePopup.html b/doc/out/MessageMessageInteractivePopup.html
index 1aaf8e4..c93037f 100644
--- a/doc/out/MessageMessageInteractivePopup.html
+++ b/doc/out/MessageMessageInteractivePopup.html
@@ -252,6 +252,10 @@
- disabled
+ - maxHeight
+
+ - maxWidth
+
@@ -263,6 +267,8 @@
Methods
+ - capture
+
- hide
- layout
@@ -1783,7 +1789,7 @@ like Popup, Message...
diff --git a/doc/out/Modal.html b/doc/out/Modal.html
index 09b033f..53d4504 100644
--- a/doc/out/Modal.html
+++ b/doc/out/Modal.html
@@ -252,6 +252,10 @@
- disabled
+ - maxHeight
+
+ - maxWidth
+
@@ -263,6 +267,8 @@
Methods
+ - capture
+
- hide
- layout
@@ -2015,7 +2021,7 @@ a string or a PIXI.Text object.
@@ -2229,7 +2235,7 @@ a string or a PIXI.Text object.
@@ -2336,7 +2342,7 @@ a string or a PIXI.Text object.
diff --git a/doc/out/ModalInteractivePopup.html b/doc/out/ModalInteractivePopup.html
index fdaf3e1..e755e36 100644
--- a/doc/out/ModalInteractivePopup.html
+++ b/doc/out/ModalInteractivePopup.html
@@ -252,6 +252,10 @@
- disabled
+ - maxHeight
+
+ - maxWidth
+
@@ -263,6 +267,8 @@
Methods
+ - capture
+
- hide
- layout
@@ -1783,7 +1789,7 @@ like Popup, Message...
diff --git a/doc/out/ModalModalInteractivePopup.html b/doc/out/ModalModalInteractivePopup.html
index 96e34e2..66eac11 100644
--- a/doc/out/ModalModalInteractivePopup.html
+++ b/doc/out/ModalModalInteractivePopup.html
@@ -252,6 +252,10 @@
- disabled
+ - maxHeight
+
+ - maxWidth
+
@@ -263,6 +267,8 @@
Methods
+ - capture
+
- hide
- layout
@@ -1783,7 +1789,7 @@ like Popup, Message...
diff --git a/doc/out/PIXIApp.html b/doc/out/PIXIApp.html
index 6888662..f6102ca 100644
--- a/doc/out/PIXIApp.html
+++ b/doc/out/PIXIApp.html
@@ -252,6 +252,10 @@
- disabled
+ - maxHeight
+
+ - maxWidth
+
@@ -263,6 +267,8 @@
Methods
+ - capture
+
- hide
- layout
@@ -1466,7 +1472,7 @@ by several functions and makes meaningful pre-assumptions.
@@ -2316,7 +2322,7 @@ const app = new PIXIApp({
@@ -2423,7 +2429,7 @@ const app = new PIXIApp({
@@ -2552,7 +2558,7 @@ handler for the orientationchange event.
@@ -2749,7 +2755,7 @@ to browser page coordinates.
@@ -2946,7 +2952,7 @@ to local DisplayObject coordinates.
@@ -3023,7 +3029,7 @@ to the layout method.
@@ -3188,7 +3194,7 @@ to the layout method.
@@ -3347,7 +3353,7 @@ adapt their layout to the new app size.
@@ -3680,7 +3686,7 @@ renderer resolution?
@@ -4013,7 +4019,7 @@ renderer resolution?
@@ -4170,7 +4176,7 @@ renderer resolution?
@@ -4327,7 +4333,7 @@ renderer resolution?
@@ -4528,7 +4534,7 @@ rejected with an error.
@@ -4633,7 +4639,7 @@ rejected with an error.
@@ -4769,7 +4775,7 @@ rejected with an error.
@@ -4930,7 +4936,7 @@ called without a parameter.
@@ -5131,7 +5137,7 @@ rejected with an error.
@@ -5428,7 +5434,7 @@ rejected with an error.
@@ -5534,7 +5540,7 @@ Overwrite this method if you need additonal views and components.
@@ -5737,7 +5743,7 @@ rejected with an error.
diff --git a/doc/out/Popup.html b/doc/out/Popup.html
index a7139d1..f7a3c35 100644
--- a/doc/out/Popup.html
+++ b/doc/out/Popup.html
@@ -252,6 +252,10 @@
- disabled
+ - maxHeight
+
+ - maxWidth
+
@@ -263,6 +267,8 @@
Methods
+ - capture
+
- hide
- layout
@@ -1465,7 +1471,7 @@
@@ -1901,7 +1907,7 @@ a string, a number or a PIXI.Text object.
@@ -2062,7 +2068,7 @@ a string, a number or a PIXI.Text object.
@@ -2171,7 +2177,7 @@ a string, a number or a PIXI.Text object.
@@ -2330,7 +2336,7 @@ a string, a number or a PIXI.Text object.
diff --git a/doc/out/PopupInteractivePopup.html b/doc/out/PopupInteractivePopup.html
index c32d641..8779b1e 100644
--- a/doc/out/PopupInteractivePopup.html
+++ b/doc/out/PopupInteractivePopup.html
@@ -252,6 +252,10 @@
- disabled
+ - maxHeight
+
+ - maxWidth
+
@@ -263,6 +267,8 @@
Methods
+ - capture
+
- hide
- layout
@@ -1783,7 +1789,7 @@ like Popup, Message...
diff --git a/doc/out/PopupMenu.html b/doc/out/PopupMenu.html
index 95d90a8..707ee85 100644
--- a/doc/out/PopupMenu.html
+++ b/doc/out/PopupMenu.html
@@ -252,6 +252,10 @@
- disabled
+ - maxHeight
+
+ - maxWidth
+
@@ -263,6 +267,8 @@
Methods
+ - capture
+
- hide
- layout
@@ -1955,7 +1961,7 @@ a string, a number or a PIXI.Text object.
@@ -2116,7 +2122,7 @@ a string, a number or a PIXI.Text object.
@@ -2225,7 +2231,7 @@ a string, a number or a PIXI.Text object.
@@ -2384,7 +2390,7 @@ a string, a number or a PIXI.Text object.
diff --git a/doc/out/PopupMenuPopupInteractivePopup.html b/doc/out/PopupMenuPopupInteractivePopup.html
index fb28912..b82c8a6 100644
--- a/doc/out/PopupMenuPopupInteractivePopup.html
+++ b/doc/out/PopupMenuPopupInteractivePopup.html
@@ -252,6 +252,10 @@
- disabled
+ - maxHeight
+
+ - maxWidth
+
@@ -263,6 +267,8 @@
Methods
+ - capture
+
- hide
- layout
@@ -1783,7 +1789,7 @@ like Popup, Message...
diff --git a/doc/out/PopupMenuPopupMenuPopupInteractivePopup.html b/doc/out/PopupMenuPopupMenuPopupInteractivePopup.html
index 34a86bc..a4f04c8 100644
--- a/doc/out/PopupMenuPopupMenuPopupInteractivePopup.html
+++ b/doc/out/PopupMenuPopupMenuPopupInteractivePopup.html
@@ -252,6 +252,10 @@
- disabled
+ - maxHeight
+
+ - maxWidth
+
@@ -263,6 +267,8 @@
Methods
+ - capture
+
- hide
- layout
@@ -1783,7 +1789,7 @@ like Popup, Message...
diff --git a/doc/out/PopupMenuPopupMenuPopupPopupInteractivePopup.html b/doc/out/PopupMenuPopupMenuPopupPopupInteractivePopup.html
index 04b4996..bc9c457 100644
--- a/doc/out/PopupMenuPopupMenuPopupPopupInteractivePopup.html
+++ b/doc/out/PopupMenuPopupMenuPopupPopupInteractivePopup.html
@@ -252,6 +252,10 @@
- disabled
+ - maxHeight
+
+ - maxWidth
+
@@ -263,6 +267,8 @@
Methods
+ - capture
+
- hide
- layout
@@ -1783,7 +1789,7 @@ like Popup, Message...
diff --git a/doc/out/PopupMenuPopupPopupInteractivePopup.html b/doc/out/PopupMenuPopupPopupInteractivePopup.html
index 9fb5615..dbf9dd8 100644
--- a/doc/out/PopupMenuPopupPopupInteractivePopup.html
+++ b/doc/out/PopupMenuPopupPopupInteractivePopup.html
@@ -252,6 +252,10 @@
- disabled
+ - maxHeight
+
+ - maxWidth
+
@@ -263,6 +267,8 @@
Methods
+ - capture
+
- hide
- layout
@@ -1783,7 +1789,7 @@ like Popup, Message...
diff --git a/doc/out/PopupPopupInteractivePopup.html b/doc/out/PopupPopupInteractivePopup.html
index f2535ed..119702a 100644
--- a/doc/out/PopupPopupInteractivePopup.html
+++ b/doc/out/PopupPopupInteractivePopup.html
@@ -252,6 +252,10 @@
- disabled
+ - maxHeight
+
+ - maxWidth
+
@@ -263,6 +267,8 @@
Methods
+ - capture
+
- hide
- layout
@@ -1783,7 +1789,7 @@ like Popup, Message...
diff --git a/doc/out/Progress.html b/doc/out/Progress.html
index 81b3498..d5b10e0 100644
--- a/doc/out/Progress.html
+++ b/doc/out/Progress.html
@@ -252,6 +252,10 @@
- disabled
+ - maxHeight
+
+ - maxWidth
+
@@ -263,6 +267,8 @@
Methods
+ - capture
+
- hide
- layout
@@ -2552,7 +2558,7 @@ app.scene.addChild(progress)
@@ -2762,7 +2768,7 @@ app.scene.addChild(progress)
@@ -2869,7 +2875,7 @@ app.scene.addChild(progress)
diff --git a/doc/out/Scrollview.html b/doc/out/Scrollview.html
index 30dd5f4..8862c40 100644
--- a/doc/out/Scrollview.html
+++ b/doc/out/Scrollview.html
@@ -252,6 +252,10 @@
- disabled
+ - maxHeight
+
+ - maxWidth
+
@@ -263,6 +267,8 @@
Methods
+ - capture
+
- hide
- layout
@@ -1701,7 +1707,7 @@ app.loader
diff --git a/doc/out/Slider.html b/doc/out/Slider.html
index 0837f2e..ad8cdd0 100644
--- a/doc/out/Slider.html
+++ b/doc/out/Slider.html
@@ -252,6 +252,10 @@
- disabled
+ - maxHeight
+
+ - maxWidth
+
@@ -263,6 +267,8 @@
Methods
+ - capture
+
- hide
- layout
@@ -2643,7 +2649,7 @@ app.scene.addChild(slider)
@@ -2748,7 +2754,7 @@ app.scene.addChild(slider)
@@ -2853,7 +2859,7 @@ app.scene.addChild(slider)
@@ -2960,7 +2966,7 @@ app.scene.addChild(slider)
diff --git a/doc/out/Switch.html b/doc/out/Switch.html
index 9e9d798..b798b04 100644
--- a/doc/out/Switch.html
+++ b/doc/out/Switch.html
@@ -252,6 +252,10 @@
- disabled
+ - maxHeight
+
+ - maxWidth
+
@@ -263,6 +267,8 @@
Methods
+ - capture
+
- hide
- layout
@@ -3073,7 +3079,7 @@ app.scene.addChild(switch1)
@@ -3178,7 +3184,7 @@ app.scene.addChild(switch1)
@@ -3283,7 +3289,7 @@ app.scene.addChild(switch1)
@@ -3390,7 +3396,7 @@ app.scene.addChild(switch1)
diff --git a/doc/out/TextLabel.TextLabel.html b/doc/out/TextLabel.TextLabel.html
index 9ade891..884d5c9 100644
--- a/doc/out/TextLabel.TextLabel.html
+++ b/doc/out/TextLabel.TextLabel.html
@@ -252,6 +252,10 @@
- disabled
+ - maxHeight
+
+ - maxWidth
+
@@ -263,6 +267,8 @@
Methods
+ - capture
+
- hide
- layout
@@ -1463,7 +1469,7 @@
@@ -1684,7 +1690,7 @@
diff --git a/doc/out/Theme.html b/doc/out/Theme.html
index a144eef..c824413 100644
--- a/doc/out/Theme.html
+++ b/doc/out/Theme.html
@@ -252,6 +252,10 @@
- disabled
+ - maxHeight
+
+ - maxWidth
+
@@ -263,6 +267,8 @@
Methods
+ - capture
+
- hide
- layout
@@ -2999,7 +3005,7 @@ const app = new PIXIApp({
@@ -3159,7 +3165,7 @@ const app = new PIXIApp({
diff --git a/doc/out/ThemeDark.html b/doc/out/ThemeDark.html
index d6780a8..c49c5bf 100644
--- a/doc/out/ThemeDark.html
+++ b/doc/out/ThemeDark.html
@@ -252,6 +252,10 @@
- disabled
+ - maxHeight
+
+ - maxWidth
+
@@ -263,6 +267,8 @@
Methods
+ - capture
+
- hide
- layout
@@ -1465,7 +1471,7 @@
@@ -1580,7 +1586,7 @@ const app = new PIXIApp({
diff --git a/doc/out/ThemeLight.html b/doc/out/ThemeLight.html
index 2da33fd..d16c866 100644
--- a/doc/out/ThemeLight.html
+++ b/doc/out/ThemeLight.html
@@ -252,6 +252,10 @@
- disabled
+ - maxHeight
+
+ - maxWidth
+
@@ -263,6 +267,8 @@
Methods
+ - capture
+
- hide
- layout
@@ -1466,7 +1472,7 @@ The color1 is set to 0xf6f6f6, color2 to 0x282828.
@@ -1592,7 +1598,7 @@ const app = new PIXIApp({
diff --git a/doc/out/ThemeRed.html b/doc/out/ThemeRed.html
index c95b6ac..50c6d00 100644
--- a/doc/out/ThemeRed.html
+++ b/doc/out/ThemeRed.html
@@ -252,6 +252,10 @@
- disabled
+ - maxHeight
+
+ - maxWidth
+
@@ -263,6 +267,8 @@
Methods
+ - capture
+
- hide
- layout
@@ -1466,7 +1472,7 @@ The primaryColor is set to 0xd92f31.
@@ -1592,7 +1598,7 @@ const app = new PIXIApp({
diff --git a/doc/out/TileQuadNode.html b/doc/out/TileQuadNode.html
index 23880b0..a3551e8 100644
--- a/doc/out/TileQuadNode.html
+++ b/doc/out/TileQuadNode.html
@@ -252,6 +252,10 @@
- disabled
+ - maxHeight
+
+ - maxWidth
+
@@ -263,6 +267,8 @@
Methods
+ - capture
+
- hide
- layout
@@ -1472,7 +1478,7 @@ the memory pressure.
@@ -1676,7 +1682,7 @@ the memory pressure.
@@ -1844,7 +1850,7 @@ and west flags to address nw, ne, sw, and se.
@@ -1921,7 +1927,7 @@ an indicator of tiles to free.
@@ -2044,7 +2050,7 @@ an indicator of tiles to free.
diff --git a/doc/out/Tooltip.html b/doc/out/Tooltip.html
index 7fc26e5..d0e7429 100644
--- a/doc/out/Tooltip.html
+++ b/doc/out/Tooltip.html
@@ -252,6 +252,10 @@
- disabled
+ - maxHeight
+
+ - maxWidth
+
@@ -263,6 +267,8 @@
Methods
+ - capture
+
- hide
- layout
@@ -2077,7 +2083,7 @@ a string, a number or a PIXI.Text object.
@@ -2238,7 +2244,7 @@ a string, a number or a PIXI.Text object.
@@ -2347,7 +2353,7 @@ a string, a number or a PIXI.Text object.
@@ -2506,7 +2512,7 @@ a string, a number or a PIXI.Text object.
diff --git a/doc/out/UITest.html b/doc/out/UITest.html
index 8a3bb49..38b4782 100644
--- a/doc/out/UITest.html
+++ b/doc/out/UITest.html
@@ -252,6 +252,10 @@
- disabled
+ - maxHeight
+
+ - maxWidth
+
@@ -263,6 +267,8 @@
Methods
+ - capture
+
- hide
- layout
@@ -1962,7 +1968,7 @@ test.start()
@@ -2596,7 +2602,7 @@ test.start()
@@ -4177,7 +4183,7 @@ test.start()
diff --git a/doc/out/Volatile.html b/doc/out/Volatile.html
index ee09a08..a9cf73c 100644
--- a/doc/out/Volatile.html
+++ b/doc/out/Volatile.html
@@ -252,6 +252,10 @@
- disabled
+ - maxHeight
+
+ - maxWidth
+
@@ -263,6 +267,8 @@
Methods
+ - capture
+
- hide
- layout
@@ -2093,7 +2099,7 @@ app.scene.addChild(button)
diff --git a/doc/out/global.html b/doc/out/global.html
index ce1d837..71da6ac 100644
--- a/doc/out/global.html
+++ b/doc/out/global.html
@@ -252,6 +252,10 @@
- disabled
+ - maxHeight
+
+ - maxWidth
+
@@ -263,6 +267,8 @@
Methods
+ - capture
+
- hide
- layout
@@ -1655,7 +1661,7 @@
@@ -1943,7 +1949,7 @@
@@ -2231,7 +2237,7 @@
@@ -3314,7 +3320,7 @@
diff --git a/doc/out/index.html b/doc/out/index.html
index 4d36a1e..817bb14 100644
--- a/doc/out/index.html
+++ b/doc/out/index.html
@@ -252,6 +252,10 @@
- disabled
+ - maxHeight
+
+ - maxWidth
+
@@ -263,6 +267,8 @@
Methods
+ - capture
+
- hide
- layout
@@ -1479,7 +1485,7 @@
diff --git a/doc/out/pixi_abstractpopup.js.html b/doc/out/pixi_abstractpopup.js.html
index d938b46..f5739e7 100644
--- a/doc/out/pixi_abstractpopup.js.html
+++ b/doc/out/pixi_abstractpopup.js.html
@@ -252,6 +252,10 @@
- disabled
+ - maxHeight
+
+ - maxWidth
+
@@ -263,6 +267,8 @@
Methods
+ - capture
+
- hide
- layout
@@ -1523,12 +1529,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
@@ -1571,10 +1575,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)
}
@@ -1601,10 +1602,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
}
@@ -1675,31 +1673,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()
@@ -1825,7 +1808,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..b22da33 100644
--- a/doc/out/pixi_app.js.html
+++ b/doc/out/pixi_app.js.html
@@ -252,6 +252,10 @@
- disabled
+ - maxHeight
+
+ - maxWidth
+
@@ -263,6 +267,8 @@
Methods
+ - capture
+
- hide
- layout
@@ -1468,10 +1474,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
@@ -1583,10 +1586,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')
@@ -1617,18 +1617,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
@@ -1764,10 +1758,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()
@@ -1788,8 +1779,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)
}
@@ -1818,8 +1808,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
@@ -1828,12 +1817,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)
}
/**
@@ -1884,9 +1868,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
@@ -1899,9 +1881,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
@@ -1920,11 +1900,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 => {
@@ -1957,11 +1933,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]
}
@@ -1974,16 +1946,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)
@@ -2148,11 +2114,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)
}
}
@@ -2227,7 +2189,7 @@ class FpsDisplay extends PIXI.Graphics {
diff --git a/doc/out/pixi_badge.js.html b/doc/out/pixi_badge.js.html
index bc0f61b..7e40f6f 100644
--- a/doc/out/pixi_badge.js.html
+++ b/doc/out/pixi_badge.js.html
@@ -252,6 +252,10 @@
- disabled
+ - maxHeight
+
+ - maxWidth
+
@@ -263,6 +267,8 @@
Methods
+ - capture
+
- hide
- layout
@@ -1527,11 +1533,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)
}
}
@@ -1548,12 +1550,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
}
@@ -1571,7 +1569,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..591471d 100644
--- a/doc/out/pixi_blurfilter.js.html
+++ b/doc/out/pixi_blurfilter.js.html
@@ -252,6 +252,10 @@
- disabled
+ - maxHeight
+
+ - maxWidth
+
@@ -263,6 +267,8 @@
Methods
+ - capture
+
- hide
- layout
@@ -1508,9 +1514,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)
}
/**
@@ -1629,12 +1633,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)
@@ -1668,12 +1667,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) {
@@ -1682,12 +1676,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]
}
}
}
@@ -1738,7 +1727,7 @@ class TiltShiftYFilter extends TiltShiftAxisFilter {
diff --git a/doc/out/pixi_button.js.html b/doc/out/pixi_button.js.html
index b9e3dde..d3fdc1f 100644
--- a/doc/out/pixi_button.js.html
+++ b/doc/out/pixi_button.js.html
@@ -252,6 +252,10 @@
- disabled
+ - maxHeight
+
+ - maxWidth
+
@@ -263,6 +267,8 @@
Methods
+ - capture
+
- hide
- layout
@@ -1438,11 +1444,12 @@
- /* 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.
@@ -1575,8 +1582,8 @@ export default class Button extends PIXI.Container {
strokeActive: theme.strokeActive,
strokeActiveWidth: theme.strokeActiveWidth,
strokeActiveAlpha: theme.strokeActiveAlpha,
- textStyle: theme.textStyle,
- textStyleActive: theme.textStyleActive,
+ textStyle: {},
+ textStyleActive: {},
style: 'default',
radius: theme.radius,
disabled: false,
@@ -1596,15 +1603,12 @@ export default class Button extends PIXI.Container {
this.id = this.opts.id
- if (
- typeof this.opts.icon === 'undefined' &&
- typeof this.opts.iconActive !== 'undefined'
- ) {
+ this.opts.textStyle = Object.assign({}, theme.textStyle, this.opts.textStyle)
+ this.opts.textStyleActive = Object.assign({}, theme.textStyleActive, this.opts.textStyleActive)
+
+ 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
}
@@ -1620,6 +1624,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
@@ -1674,17 +1680,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
@@ -1701,17 +1701,17 @@ export default class Button extends PIXI.Container {
this.capture(e)
})
- this.button.on('pointerout', e => {
- this.capture(e)
- TweenLite.to([this.button, this.content], this.theme.fast, {
- alpha: 1,
- overwrite: 'none'
- })
- })
+ this.button.on('pointerout', this.onEnd.bind(this))
+ this.button.on('pointercancel', this.onEnd.bind(this))
+ this.button.on('pointerupoutside', this.onEnd.bind(this))
+ this.button.on('pointertap', this.onEnd.bind(this))
+ this.button.on('scroll', this.onEnd.bind(this))
// 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'
@@ -1720,25 +1720,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)
+ }
}
})
@@ -1759,11 +1764,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)
}
}
@@ -1787,44 +1788,12 @@ export default class Button extends PIXI.Container {
}
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
}
+ this.layout()
+
// set position
//-----------------
this.position.set(this.opts.x, this.opts.y)
@@ -1909,6 +1878,39 @@ export default class Button extends PIXI.Container {
this.icon = icon
+ // badge
+ //--------------------
+ if (this.badge) {
+ this.removeChild(this.badge)
+ const width = this._width
+ const height = this._height
+ this.addChild(this.badge)
+
+ const badge = this.badge
+
+ switch (badge.opts.align) {
+ case 'left':
+ badge.x = -badge.width / 2 + badge.opts.offsetLeft
+ break
+ case 'center':
+ badge.x = width / 2 - badge.width / 2 + badge.opts.offsetLeft
+ break
+ case 'right':
+ badge.x = width - badge.width / 2 + badge.opts.offsetLeft
+ }
+
+ switch (badge.opts.verticalAlign) {
+ case 'top':
+ badge.y = -badge.height / 2 + badge.opts.offsetTop
+ break
+ case 'middle':
+ badge.y = height / 2 - badge.height / 2 + badge.opts.offsetTop
+ break
+ case 'bottom':
+ badge.y = height - badge.height / 2 + badge.opts.offsetTop
+ }
+ }
+
// draw
//-----------------
this.draw()
@@ -1956,8 +1958,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
}
@@ -1969,8 +1970,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
}
@@ -1986,30 +1986,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
@@ -2126,9 +2109,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)
@@ -2168,6 +2149,14 @@ export default class Button extends PIXI.Container {
this.icon.tint = value
}
}
+
+ onEnd(event) {
+ this.capture(event)
+ TweenLite.to([this.button, this.content], this.theme.fast, {
+ alpha: 1,
+ overwrite: 'none'
+ })
+ }
}
@@ -2182,7 +2171,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..59225e8 100644
--- a/doc/out/pixi_buttongroup.js.html
+++ b/doc/out/pixi_buttongroup.js.html
@@ -252,6 +252,10 @@
- disabled
+ - maxHeight
+
+ - maxWidth
+
@@ -263,6 +267,8 @@
Methods
+ - capture
+
- hide
- layout
@@ -1438,8 +1444,11 @@
- import Theme from './theme.js'
+ /* globals ThrowPropsPlugin, Strong */
+
+import Theme from './theme.js'
import Button from './button.js'
+import Events from '../events.js'
/**
* Class that represents a PixiJS ButtonGroup.
@@ -1463,7 +1472,7 @@ import Button from './button.js'
* @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}
*/
-export default class ButtonGroup extends PIXI.Graphics {
+export default class ButtonGroup extends PIXI.Container {
/**
* Creates an instance of a ButtonGroup.
*
@@ -1479,6 +1488,10 @@ 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 button group. If the buttons are wider than the maximum width, the buttons get stacked. Note: The buttons can only be stacked if margin is not zero. Note 2: Load the Greensock ThrowPropsPlugin for smoother animations.
+ * @param {number} [opts.maxHeight] - The maximum height of the button group. If the buttons are higher than the maximum height, the buttons get stacked. Note: The buttons can only be stacked if margin is not zero. Note 2: Load the Greensock ThrowPropsPlugin for smoother animations.
+ * @param {number} [opts.stackPadding=10] - The padding for stacked buttons.
+ * @param {PIXI.Application} [opts.app=window.app] - The PixiJS Application. Must be set if you want to use the mousewheel to scroll your button group. Only used when the buttons are stacked (with maxWidth or maxHeight).
* @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.
@@ -1527,6 +1540,10 @@ export default class ButtonGroup extends PIXI.Graphics {
buttons: [],
minWidth: 44,
minHeight: 44,
+ maxWidth: null,
+ maxHeight: null,
+ stackPadding: 10,
+ app: window.app,
padding: theme.padding,
margin: theme.margin,
iconPosition: 'left', // left, right
@@ -1542,8 +1559,8 @@ export default class ButtonGroup extends PIXI.Graphics {
strokeActive: theme.strokeActive,
strokeActiveWidth: theme.strokeActiveWidth,
strokeActiveAlpha: theme.strokeActiveAlpha,
- textStyle: theme.textStyle,
- textStyleActive: theme.textStyleActive,
+ textStyle: {},
+ textStyleActive: {},
style: 'default',
radius: theme.radius,
disabled: null,
@@ -1556,9 +1573,13 @@ export default class ButtonGroup extends PIXI.Graphics {
opts
)
+ this.opts.textStyle = Object.assign({}, theme.textStyle, this.opts.textStyle)
+ this.opts.textStyleActive = Object.assign({}, theme.textStyleActive, this.opts.textStyleActive)
+
this.buttons = []
this._disabled = null
+ this.__dragging = false
this.visible = this.opts.visible
@@ -1578,9 +1599,16 @@ export default class ButtonGroup extends PIXI.Graphics {
* @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
+ let index = 0
for (let it of this.opts.buttons) {
delete it.x
@@ -1604,19 +1632,11 @@ export default class ButtonGroup extends PIXI.Graphics {
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.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.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
@@ -1635,10 +1655,7 @@ export default class ButtonGroup extends PIXI.Graphics {
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'
- ) {
+ if (this.opts.type === 'radio' && button.opts.type === 'default') {
this.buttons.forEach(it => {
if (it.opts.type === 'default') {
it.active = false
@@ -1655,23 +1672,24 @@ export default class ButtonGroup extends PIXI.Graphics {
if (typeof it.tooltip === 'string') {
it.tooltip = { content: it.tooltip, container: this }
} else {
- it.tooltip = Object.assign(
- {},
- { container: this },
- it.tooltip
- )
+ it.tooltip = Object.assign({}, { container: this }, it.tooltip)
}
}
let button = new Button(it)
- this.addChild(button)
+ this.container.addChild(button)
this.buttons.push(button)
- position +=
- (this.opts.orientation === 'horizontal'
- ? button.width
- : button.height) + this.opts.margin
+ button.__originalPosition = {
+ x: button.x,
+ y: button.y
+ }
+
+ position += (this.opts.orientation === 'horizontal' ? button.width : button.height) + this.opts.margin
+
+ button.__initIndex = index
+ index++
}
if (this.opts.orientation === 'vertical') {
@@ -1689,6 +1707,43 @@ export default class ButtonGroup extends PIXI.Graphics {
this.disabled = this.opts.disabled
}
+ // interaction
+ //--------------------
+ if (this.opts.margin > 0 && (this.opts.maxWidth || this.opts.maxHeight)) {
+ 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.__initHeight = this.container.height
+ }
+
return this
}
@@ -1706,6 +1761,12 @@ export default class ButtonGroup extends PIXI.Graphics {
//-----------------
this.draw()
+ // stack
+ //-----------------
+ if (this.opts.margin > 0 && (this.opts.maxWidth || this.opts.maxHeight)) {
+ this.stack()
+ }
+
return this
}
@@ -1719,41 +1780,27 @@ export default class ButtonGroup extends PIXI.Graphics {
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
- )
+ 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.lineStyle(
- this.opts.strokeWidth,
- this.opts.stroke,
- this.opts.strokeAlpha / 2
- )
+ this.container.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)
+ this.container.moveTo(it.x, it.y)
if (this.opts.orientation === 'horizontal') {
- this.lineTo(it.x, it.height)
+ this.container.lineTo(it.x, it.height)
} else {
- this.lineTo(it.width, it.y)
+ this.container.lineTo(it.width, it.y)
}
}
})
- this.endFill()
+ this.container.endFill()
}
return this
@@ -1774,6 +1821,34 @@ export default class ButtonGroup extends PIXI.Graphics {
this.buttons.forEach(it => (it.disabled = value))
}
+ /**
+ * Gets or sets the maximum width of the button group for stacking. Usefull when you want to resize the available space.
+ *
+ * @member {number}
+ */
+ get maxWidth() {
+ return this.opts.maxWidth
+ }
+
+ set maxWidth(value) {
+ this.opts.maxWidth = value
+ this.layout()
+ }
+
+ /**
+ * Gets or sets the maximum height of the button group for stacking. Usefull when you want to resize the available space.
+ *
+ * @member {number}
+ */
+ get maxHeight() {
+ return this.opts.maxHeight
+ }
+
+ set maxHeight(value) {
+ this.opts.maxHeight = value
+ this.layout()
+ }
+
/**
* Searches all buttons of the button group and returns the maximum width of one button.
*
@@ -1807,6 +1882,284 @@ export default class ButtonGroup extends PIXI.Graphics {
return this
}
+
+ /**
+ *
+ * @private
+ * @param {*} event
+ */
+ onStart(event) {
+ if (
+ (this.opts.maxWidth != null && this.__initWidth > this.opts.maxWidth) ||
+ (this.opts.maxHeight != null && this.__initHeight > this.opts.maxHeight)
+ ) {
+ 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
+ }
+
+ this.stack()
+ }
+ }
+
+ /**
+ *
+ * @private
+ * @param {*} event
+ */
+ onEnd(event) {
+ if (this.__dragging) {
+ this.__dragging = false
+
+ this.capture(event)
+
+ const throwProps = { x: { velocity: 'auto' }, y: { velocity: 'auto' } }
+
+ if (this.opts.orientation === 'horizontal') {
+ if (this.__initWidth > this.opts.maxWidth) {
+ // stack!
+ const distanceToLeft = this.container.x
+ const distanceToRight = this.opts.maxWidth - this.container.x - this.__initWidth
+
+ if (distanceToLeft > 0) {
+ throwProps.x.end = 0
+ } else if (distanceToRight > 0) {
+ throwProps.x.end = this.opts.maxWidth - this.__initWidth
+ }
+ } else {
+ // just magnetize
+ throwProps.x.end = 0
+ }
+ } else {
+ if (this.__initHeight > this.opts.maxHeight) {
+ // stack!
+ const distanceToTop = this.container.y
+ const distanceToBottom = this.opts.maxHeight - this.container.y - this.__initHeight
+
+ if (distanceToTop > 0) {
+ throwProps.y.end = 0
+ } else if (distanceToBottom > 0) {
+ throwProps.y.end = this.opts.maxHeight - this.__initHeight
+ }
+ } else {
+ // just magnetize
+ throwProps.y.end = 0
+ }
+ }
+
+ if (typeof ThrowPropsPlugin != 'undefined') {
+ ThrowPropsPlugin.to(
+ this.container.position,
+ {
+ throwProps,
+ ease: Strong.easeOut,
+ onUpdate: () => this.stack(),
+ onComplete: () => ThrowPropsPlugin.untrack(this.container.position)
+ },
+ 0.8,
+ 0.4
+ )
+ } else {
+ if (this.opts.orientation === 'horizontal' && throwProps.x.end != null) {
+ TweenMax.to(this.container.position, 0.3, { x: throwProps.x.end, onUpdate: this.stack.bind(this) })
+ } else if (this.opts.orientation === 'vertical' && throwProps.y.end != null) {
+ TweenMax.to(this.container.position, 0.3, { y: throwProps.y.end, onUpdate: this.stack.bind(this) })
+ }
+ }
+ }
+ }
+
+ /**
+ *
+ * @private
+ * @param {*} event
+ */
+ onScroll(event) {
+ if (
+ (this.opts.maxWidth != null && this.__initWidth > this.opts.maxWidth) ||
+ (this.opts.maxHeight != null && this.__initHeight > this.opts.maxHeight)
+ ) {
+ 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
+ }
+ }
+
+ 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.capturedBy(originalEvent, this)
+ }
+
+ /**
+ * @private
+ */
+ stack() {
+ if (this.opts.maxWidth) {
+ this._stackHorizontal()
+ } else if (this.opts.maxHeight) {
+ this._stackVertical()
+ }
+ }
+
+ /**
+ * @private
+ */
+ _stackHorizontal() {
+ const sorted = []
+
+ let reverseCounter = this.buttons.length - 1
+
+ this.buttons.forEach((it, index) => {
+ const leftCorner = it.__originalPosition.x + this.container.x
+ const rightCorner = it.__originalPosition.x + it.button.width
+ const paddingLeft = index * this.opts.stackPadding
+ const paddingRight = reverseCounter * this.opts.stackPadding
+ if (leftCorner < paddingLeft) {
+ // left border
+ it.x = -this.container.x + paddingLeft
+ } else if (rightCorner > -this.container.x + this.opts.maxWidth - paddingRight) {
+ // right border
+ it.x = -this.container.x + this.opts.maxWidth - it.button.width - paddingRight
+ } else {
+ it.x = it.__originalPosition.x
+ }
+
+ reverseCounter--
+
+ sorted.push(it)
+ })
+
+ const min = Math.min(...sorted.map(it => it.x))
+ const max = Math.max(...sorted.map(it => it.x + it.button.width))
+ const center = (min + max) / 2
+
+ // z-index
+ sorted
+ .sort((a, b) => {
+ const centerA = a.x + a.button.width / 2
+ const centerB = b.x + b.button.width / 2
+
+ if (centerA < center && centerB < center) {
+ if (a.x < b.x) {
+ return -1
+ } else if (b.x < a.x) {
+ return 1
+ }
+ } else if (centerA > center && centerB > center) {
+ if (a.x + a.button.width > b.x + b.button.width) {
+ return -1
+ } else if (b.x + b.button.width < a.x + a.button.x) {
+ return 1
+ }
+ }
+
+ return 0
+ })
+ .forEach(it => it.parent.addChild(it))
+ }
+
+ /**
+ * @private
+ */
+ _stackVertical() {
+ const sorted = []
+
+ let reverseCounter = this.buttons.length - 1
+
+ this.buttons.forEach((it, index) => {
+ const topCorner = it.__originalPosition.y + this.container.y
+ const bottomCorner = it.__originalPosition.y + it.button.height
+ const paddingTop = index * this.opts.stackPadding
+ const paddingBottom = reverseCounter * this.opts.stackPadding
+ if (topCorner < paddingTop) {
+ // top border
+ it.y = -this.container.y + paddingTop
+ } else if (bottomCorner > -this.container.y + this.opts.maxHeight - paddingBottom) {
+ // bottom border
+ it.y = -this.container.y + this.opts.maxHeight - it.button.height - paddingBottom
+ } else {
+ it.y = it.__originalPosition.y
+ }
+
+ reverseCounter--
+
+ sorted.push(it)
+ })
+
+ const min = Math.min(...sorted.map(it => it.y))
+ const max = Math.max(...sorted.map(it => it.y + it.button.height))
+ const center = (min + max) / 2
+
+ // z-index
+ sorted
+ .sort((a, b) => {
+ const centerA = a.y + a.button.height / 2
+ const centerB = b.y + b.button.height / 2
+
+ if (centerA < center && centerB < center) {
+ if (a.y < b.y) {
+ return -1
+ } else if (b.y < a.y) {
+ return 1
+ }
+ } else if (centerA > center && centerB > center) {
+ if (a.y + a.button.height > b.y + b.button.height) {
+ return -1
+ } else if (b.y + b.button.height < a.y + a.button.y) {
+ return 1
+ }
+ }
+
+ return 0
+ })
+ .forEach(it => it.parent.addChild(it))
+ }
}
@@ -1821,7 +2174,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..0f52010 100644
--- a/doc/out/pixi_deepzoom_image.js.html
+++ b/doc/out/pixi_deepzoom_image.js.html
@@ -252,6 +252,10 @@
- disabled
+ - maxHeight
+
+ - maxWidth
+
@@ -263,6 +267,8 @@
Methods
+ - capture
+
- hide
- layout
@@ -1480,15 +1486,14 @@ export class DeepZoomInfo {
// number in the file system for the folder with tiles
this.clip = this.clip || null // e.g. { level: 12, col: 301436, row: 354060 }
this.type = this.type || 'dzi'
- this.urlTileTemplate =
- this.urlTileTemplate || '{path}/{level}/{column}_{row}.{format}'
+ this.urlTileTemplate = this.urlTileTemplate || '{path}/{level}/{column}_{row}.{format}'
this.setupDimensions()
}
/* Computes the needed number of layers from the width and height
- * of the image. Note that this includes the level 0, i.e. 0 ... 4
- * means that 5 levels exist.
- **/
+ * of the image. Note that this includes the level 0, i.e. 0 ... 4
+ * means that 5 levels exist.
+ **/
numLevels() {
let maxDimension = Math.max(this.width, this.height)
let boundary = this.type === 'dzi' ? 1 : this.tileSize
@@ -1671,15 +1676,7 @@ export class DeepZoomInfo {
test() {
//console.log("w=" + this.width + " h=" + this.height + " maxlevel=" + this.maxLevel + " base=" + this.baseLevel)
for (let i = 0; i <= this.maxLevel; i++) {
- console.log(
- ' ' +
- i +
- ' -> ' +
- this.getScale(i) +
- ' [' +
- this.dimensions(i) +
- ']'
- )
+ console.log(' ' + i + ' -> ' + this.getScale(i) + ' [' + this.dimensions(i) + ']')
}
console.log(this.urlForTile(this.baseLevel, 0, 0))
}
@@ -1719,12 +1716,7 @@ class TileQuadNode {
**/
noQuads() {
if (this.previous === null) return false
- return (
- this.nw === null &&
- this.ne === null &&
- this.sw === null &&
- this.se === null
- )
+ return this.nw === null && this.ne === null && this.sw === null && this.se === null
}
/** Unlink the given quad node
@@ -1763,7 +1755,6 @@ class TileQuadNode {
}
}
-
/**
* The main class of a deeply zoomable image that is represented by a hierarchy
* of tile layers for each zoom level. This gives the user the impression that
@@ -1781,7 +1772,7 @@ export class DeepZoomImage extends PIXI.Container {
debug = false,
shadow = false,
center = false,
- world = null, // Defines the world bounds the images lives in
+ world = null, // Defines the world bounds the images lives in
highResolution = true,
autoLoadTiles = true,
useWorker = '',
@@ -1796,9 +1787,7 @@ export class DeepZoomImage extends PIXI.Container {
this.shadow = shadow
this.world = world
this.useWorker = useWorker
- this.resolution = highResolution
- ? Math.round(window.devicePixelRatio)
- : 1
+ this.resolution = highResolution ? Math.round(window.devicePixelRatio) : 1
this.alpha = alpha
this.fastLoads = 0
this.active = true
@@ -1988,7 +1977,7 @@ export class DeepZoomImage extends PIXI.Container {
**/
get maxScale() {
let delta = this.info.maxLevel - this.info.baseLevel
- return Math.pow(2, delta) / this.resolution * 2
+ return (Math.pow(2, delta) / this.resolution) * 2
}
/** Getter for the current width.
@@ -2003,7 +1992,6 @@ export class DeepZoomImage extends PIXI.Container {
return this.pixelSize[1]
}
-
/* Overrides PIXI.Container.hitArea()
* Allows to optimize the hit testing. Container with hit areas are directly
* hit tested without consideration of children.
@@ -2073,7 +2061,7 @@ export class DeepZoomImage extends PIXI.Container {
}
worldBounds() {
- let viewBounds = this.app.scene.bounds || this.app.scene.getBounds()
+ let viewBounds = this.app.scene.bounds || this.app.scene.getBounds()
// Using getBounds extends visible scope after loading tiles and leads
// to excessive loading. So we prefer bounds over getBounds()
if (this.world != null) {
@@ -2111,11 +2099,7 @@ export class DeepZoomImage extends PIXI.Container {
let topLeft = tiles.toLocal(worldTopLeft)
let bottomRight = tiles.toLocal(worldBottomRight)
tiles._centerPoint = tilesCenter
- let bounds = new PIXI.Rectangle(
- topLeft.x,
- topLeft.y,
- bottomRight.x - topLeft.x,
- bottomRight.y - topLeft.y)
+ let bounds = new PIXI.Rectangle(topLeft.x, topLeft.y, bottomRight.x - topLeft.x, bottomRight.y - topLeft.y)
tiles._boundsRect = bounds
@@ -2160,9 +2144,6 @@ export class DeepZoomImage extends PIXI.Container {
return { centerCol, centerRow, needed }
}
-
-
-
/** Returns all changed tiles for a given level.
* @param {Tiles} tiles - the grid of tiles
* @param {number} level - The zoom level of the grid
@@ -2215,8 +2196,7 @@ export class DeepZoomImage extends PIXI.Container {
* @param {PIXI.Point} about - point of interaction
*/
populateTiles(tiles, level, { onlyone = false, about = null } = {}) {
- if (tiles.isComplete())
- return
+ if (tiles.isComplete()) return
let referenceCol = -1
let referenceRow = -1
let { centerCol, centerRow, changed } = this.changedTiles(tiles, level)
@@ -2227,8 +2207,7 @@ export class DeepZoomImage extends PIXI.Container {
let scaledTileSize = tiles.tileSize * tiles.tileScale
referenceCol = Math.floor(refPoint.x / scaledTileSize)
referenceRow = Math.floor(refPoint.y / scaledTileSize)
- }
- else {
+ } else {
referenceCol = centerCol
referenceRow = centerRow
}
@@ -2266,17 +2245,7 @@ export class DeepZoomImage extends PIXI.Container {
let [cols, rows, w, h] = this.info.dimensions(level)
let increasedLevels = level - this.info.baseLevel
let invScale = Math.pow(0.5, increasedLevels)
- let tiles = new Tiles(
- level,
- this,
- invScale,
- cols,
- rows,
- w,
- h,
- this.info.tileSize,
- this.info.overlap
- )
+ let tiles = new Tiles(level, this, invScale, cols, rows, w, h, this.info.tileSize, this.info.overlap)
this.addTiles(key, tiles)
if (this.info.clip) {
let rest = this.info.rests[level]
@@ -2379,7 +2348,6 @@ export class DeepZoomImage extends PIXI.Container {
})
}
-
/**
* Destroy tiles in all layers that are no longer needed
*
@@ -2424,8 +2392,8 @@ export class DeepZoomImage extends PIXI.Container {
}
/* Tint all tiles
- * @param {number} level - The zoom level of the grid
- */
+ * @param {number} level - The zoom level of the grid
+ */
tintTilesBelowLevel(level) {
Object.keys(this.tileLayers).forEach(key => {
let tiles = this.tileLayers[key]
@@ -2437,7 +2405,7 @@ export class DeepZoomImage extends PIXI.Container {
/**
* Ensure that the given tiles layer is the topmost one and visible.
- * @param {*} tiles
+ * @param {*} tiles
*/
bringTilesToFront(tiles) {
this.tileContainer.addChild(tiles)
@@ -2471,8 +2439,7 @@ export class DeepZoomImage extends PIXI.Container {
})
if (this.fastLoads == 3) {
this.fastLoads = 0
- }
- else {
+ } else {
return
}
}
@@ -2500,10 +2467,10 @@ export class DeepZoomImage extends PIXI.Container {
}
/**
- *Activates the textures on the DeepZoomImage.
- *
- * @memberof DeepZoomImage
- */
+ *Activates the textures on the DeepZoomImage.
+ *
+ * @memberof DeepZoomImage
+ */
activate() {
this.active = true
this.destroyTilesAboveLevel(this.currentLevel)
@@ -2512,10 +2479,10 @@ export class DeepZoomImage extends PIXI.Container {
}
/**
- *Dectivates the textures on the DeepZoomImage.
- *
- * @memberof DeepZoomImage
- */
+ *Dectivates the textures on the DeepZoomImage.
+ *
+ * @memberof DeepZoomImage
+ */
deactivate() {
this.active = false
this.destroyAllTiles()
@@ -2545,7 +2512,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..74a8d5c 100644
--- a/doc/out/pixi_flippable.js.html
+++ b/doc/out/pixi_flippable.js.html
@@ -252,6 +252,10 @@
- disabled
+ - maxHeight
+
+ - maxWidth
+
@@ -263,6 +267,8 @@
Methods
+ - capture
+
- hide
- layout
@@ -1533,12 +1539,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
// 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
//--------------------
@@ -1577,9 +1578,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
// 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)
@@ -1671,21 +1670,11 @@ export default class Flippable extends PIXI.projection.Camera3d {
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
@@ -1771,15 +1760,11 @@ export default class Flippable extends PIXI.projection.Camera3d {
// 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 })
}
/**
@@ -1793,8 +1778,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
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
@@ -1861,10 +1845,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
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 = [
@@ -1925,7 +1906,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..a272b7e 100644
--- a/doc/out/pixi_labeledgraphics.js.html
+++ b/doc/out/pixi_labeledgraphics.js.html
@@ -252,6 +252,10 @@
- disabled
+ - maxHeight
+
+ - maxWidth
+
@@ -263,6 +267,8 @@
Methods
+ - capture
+
- hide
- layout
@@ -1517,15 +1523,9 @@ export class Hypenate {
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
@@ -1576,12 +1576,7 @@ class TextLabel extends PIXI.Text {
* @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
@@ -1730,21 +1725,11 @@ export class LabeledGraphics extends PIXI.Graphics {
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 {
@@ -1870,7 +1855,7 @@ export class BitmapLabeledGraphics extends LabeledGraphics {
diff --git a/doc/out/pixi_list.js.html b/doc/out/pixi_list.js.html
index fd54631..7759be4 100644
--- a/doc/out/pixi_list.js.html
+++ b/doc/out/pixi_list.js.html
@@ -252,6 +252,10 @@
- disabled
+ - maxHeight
+
+ - maxWidth
+
@@ -263,6 +267,8 @@
Methods
+ - capture
+
- hide
- layout
@@ -1438,7 +1444,7 @@
- /* globals */
+ /* globals ThrowPropsPlugin, Strong */
/* Imports */
import Events from '../events.js'
@@ -1548,9 +1554,7 @@ export default class List extends PIXI.Container {
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)) {
@@ -1607,14 +1611,10 @@ export default class List extends PIXI.Container {
if (this.opts.orientation === 'vertical') {
switch (this.opts.align) {
case 'center':
- this.__items.forEach(
- it => (it.x = margin + this.width / 2 - it.width / 2)
- )
+ this.__items.forEach(it => (it.x = margin + this.width / 2 - it.width / 2))
break
case 'right':
- this.__items.forEach(
- it => (it.x = margin + this.width - it.width)
- )
+ this.__items.forEach(it => (it.x = margin + this.width - it.width))
break
default:
this.__items.forEach(it => (it.x = margin))
@@ -1640,14 +1640,10 @@ export default class List extends PIXI.Container {
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
}
@@ -1781,8 +1777,7 @@ export default class List extends PIXI.Container {
{
throwProps,
ease: Strong.easeOut,
- onComplete: () =>
- ThrowPropsPlugin.untrack(this.container.position)
+ onComplete: () => ThrowPropsPlugin.untrack(this.container.position)
},
0.8,
0.4
@@ -1803,20 +1798,14 @@ export default class List extends PIXI.Container {
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
}
}
@@ -1828,10 +1817,7 @@ export default class List extends PIXI.Container {
* @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.capturedBy(originalEvent, this)
}
}
@@ -1848,7 +1834,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..6371178 100644
--- a/doc/out/pixi_message.js.html
+++ b/doc/out/pixi_message.js.html
@@ -252,6 +252,10 @@
- disabled
+ - maxHeight
+
+ - maxWidth
+
@@ -263,6 +267,8 @@
Methods
+ - capture
+
- hide
- layout
@@ -1531,8 +1537,7 @@ export default class Message extends InteractivePopup {
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
+ this.x = this.opts.app.size.width - this.opts.margin - this.width
break
}
@@ -1545,8 +1550,7 @@ export default class Message extends InteractivePopup {
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
+ this.y = this.opts.app.size.height - this.opts.margin - this.height
break
}
}
@@ -1579,7 +1583,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..5dc074f 100644
--- a/doc/out/pixi_modal.js.html
+++ b/doc/out/pixi_modal.js.html
@@ -252,6 +252,10 @@
- disabled
+ - maxHeight
+
+ - maxWidth
+
@@ -263,6 +267,8 @@
Methods
+ - capture
+
- hide
- layout
@@ -1574,10 +1580,7 @@ export default class Modal extends PIXI.Container {
// 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()
@@ -1661,7 +1664,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..b6c9956 100644
--- a/doc/out/pixi_popup.js.html
+++ b/doc/out/pixi_popup.js.html
@@ -252,6 +252,10 @@
- disabled
+ - maxHeight
+
+ - maxWidth
+
@@ -263,6 +267,8 @@
Methods
+ - capture
+
- hide
- layout
@@ -1513,10 +1519,7 @@ export class InteractivePopup extends AbstractPopup {
// closeButton
//-----------------
if (this.opts.closeButton) {
- let closeButton = PIXI.Sprite.fromImage(
- '../../assets/icons/close.png',
- true
- )
+ let closeButton = PIXI.Sprite.fromImage('../../assets/icons/close.png', true)
closeButton.width = this.headerStyle.fontSize
closeButton.height = closeButton.width
closeButton.tint = this.theme.color2
@@ -1540,10 +1543,7 @@ export class InteractivePopup extends AbstractPopup {
//-----------------
if (this.opts.maxWidth) {
const wordWrapWidth =
- this.opts.maxWidth -
- 2 * this.opts.padding -
- this.smallPadding -
- this._closeButton.width
+ this.opts.maxWidth - 2 * this.opts.padding - this.smallPadding - this._closeButton.width
if (this._header) {
this.headerStyle.wordWrapWidth = wordWrapWidth
} else if (this._content) {
@@ -1556,18 +1556,10 @@ export class InteractivePopup extends AbstractPopup {
//-----------------
if (this.opts.button || this.opts.buttonGroup) {
if (this.opts.button) {
- this._buttons = new Button(
- Object.assign(
- { textStyle: this.theme.textStyleSmall },
- 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
- )
+ Object.assign({ textStyle: this.theme.textStyleSmall }, this.opts.buttonGroup)
)
}
this.addChild(this._buttons)
@@ -1589,18 +1581,15 @@ export class InteractivePopup extends AbstractPopup {
// closeButton
//-----------------
if (this.opts.closeButton) {
- this._closeButton.x =
- this.wantedWidth - this.smallPadding - this._closeButton.width
+ 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
+ this._buttons.x = this.wantedWidth - this.opts.padding - this._buttons.width
+ this._buttons.y = this.wantedHeight - this.opts.padding - this._buttons.height
}
return this
@@ -1623,10 +1612,7 @@ export class InteractivePopup extends AbstractPopup {
}
if (this._buttons) {
- size.width = Math.max(
- size.width,
- this._buttons.x + this._buttons.width
- )
+ size.width = Math.max(size.width, this._buttons.x + this._buttons.width)
size.height += this.innerPadding + this._buttons.height
}
@@ -1688,7 +1674,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..880aecb 100644
--- a/doc/out/pixi_popupmenu.js.html
+++ b/doc/out/pixi_popupmenu.js.html
@@ -252,6 +252,10 @@
- disabled
+ - maxHeight
+
+ - maxWidth
+
@@ -263,6 +267,8 @@
Methods
+ - capture
+
- hide
- layout
@@ -1514,10 +1520,7 @@ export default class PopupMenu extends Popup {
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
}
@@ -1574,7 +1577,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..b5a4310 100644
--- a/doc/out/pixi_progress.js.html
+++ b/doc/out/pixi_progress.js.html
@@ -252,6 +252,10 @@
- disabled
+ - maxHeight
+
+ - maxWidth
+
@@ -263,6 +267,8 @@
Methods
+ - capture
+
- hide
- layout
@@ -1594,10 +1600,7 @@ export default class Progress extends PIXI.Container {
//-----------------
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()
}
@@ -1641,20 +1644,10 @@ export default class Progress extends PIXI.Container {
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)
}
@@ -1678,24 +1671,11 @@ export default class Progress extends PIXI.Container {
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)
}
@@ -1779,7 +1759,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..fd005ad 100644
--- a/doc/out/pixi_scrollview.js.html
+++ b/doc/out/pixi_scrollview.js.html
@@ -252,6 +252,10 @@
- disabled
+ - maxHeight
+
+ - maxWidth
+
@@ -263,6 +267,8 @@
Methods
+ - capture
+
- hide
- layout
@@ -1512,7 +1518,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..6a7e2be 100644
--- a/doc/out/pixi_slider.js.html
+++ b/doc/out/pixi_slider.js.html
@@ -252,6 +252,10 @@
- disabled
+ - maxHeight
+
+ - maxWidth
+
@@ -263,6 +267,8 @@
Methods
+ - capture
+
- hide
- layout
@@ -1616,12 +1622,8 @@ export default class Slider extends PIXI.Container {
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
@@ -1633,16 +1635,8 @@ export default class Slider extends PIXI.Container {
if (container instanceof Element) {
container.addEventListener('pointerup', e => this.onEnd(e), false)
- container.addEventListener(
- 'pointercancel',
- e => this.onEnd(e),
- false
- )
- container.addEventListener(
- 'pointerleave',
- e => this.onEnd(e),
- false
- )
+ container.addEventListener('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)
@@ -1703,9 +1697,7 @@ export default class Slider extends PIXI.Container {
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 })
}
})
@@ -1765,11 +1757,7 @@ export default class Slider extends PIXI.Container {
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)
@@ -1783,20 +1771,10 @@ export default class Slider extends PIXI.Container {
// 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()
@@ -1834,10 +1812,7 @@ export default class Slider extends PIXI.Container {
} 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)
}
/**
@@ -1853,10 +1828,7 @@ export default class Slider extends PIXI.Container {
} 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
}
/**
@@ -1951,7 +1923,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..157d208 100644
--- a/doc/out/pixi_switch.js.html
+++ b/doc/out/pixi_switch.js.html
@@ -252,6 +252,10 @@
- disabled
+ - maxHeight
+
+ - maxWidth
+
@@ -263,6 +267,8 @@
Methods
+ - capture
+
- hide
- layout
@@ -1592,10 +1598,8 @@ export default class Switch extends PIXI.Container {
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
//-----------------
@@ -1757,32 +1761,15 @@ export default class Switch extends PIXI.Container {
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,
@@ -1804,21 +1791,11 @@ export default class Switch extends PIXI.Container {
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()
@@ -1834,24 +1811,11 @@ export default class Switch extends PIXI.Container {
*/
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,
@@ -1871,10 +1835,7 @@ export default class Switch extends PIXI.Container {
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()
@@ -2016,7 +1977,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..dc1ed85 100644
--- a/doc/out/pixi_theme.js.html
+++ b/doc/out/pixi_theme.js.html
@@ -252,6 +252,10 @@
- disabled
+ - maxHeight
+
+ - maxWidth
+
@@ -263,6 +267,8 @@
Methods
+ - capture
+
- hide
- layout
@@ -1520,8 +1526,7 @@ export default class Theme {
* 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
@@ -1713,7 +1718,7 @@ export class ThemeRed extends Theme {
diff --git a/doc/out/pixi_tooltip.js.html b/doc/out/pixi_tooltip.js.html
index b880d59..f680371 100644
--- a/doc/out/pixi_tooltip.js.html
+++ b/doc/out/pixi_tooltip.js.html
@@ -252,6 +252,10 @@
- disabled
+ - maxHeight
+
+ - maxWidth
+
@@ -263,6 +267,8 @@
Methods
+ - capture
+
- hide
- layout
@@ -1605,7 +1611,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..8dcbacc 100644
--- a/doc/out/pixi_volatile.js.html
+++ b/doc/out/pixi_volatile.js.html
@@ -252,6 +252,10 @@
- disabled
+ - maxHeight
+
+ - maxWidth
+
@@ -263,6 +267,8 @@
Methods
+ - capture
+
- hide
- layout
@@ -1609,7 +1615,7 @@ export default class Volatile {
diff --git a/doc/out/uitest.js.html b/doc/out/uitest.js.html
index 01e3689..ff1b09f 100644
--- a/doc/out/uitest.js.html
+++ b/doc/out/uitest.js.html
@@ -252,6 +252,10 @@
- disabled
+ - maxHeight
+
+ - maxWidth
+
@@ -263,6 +267,8 @@
Methods
+ - capture
+
- hide
- layout
@@ -1634,9 +1640,7 @@ export default class UITest {
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
//--------------------
@@ -1674,14 +1678,8 @@ export default class UITest {
if (opts.eventTypes[0]) {
// create and dispatch event
//--------------------
- const eventStart = Event.create(
- elem,
- coords,
- opts.eventTypes[0],
- eventOpts
- )
- if (this.opts.debug)
- console.log('dispatch event', eventStart)
+ const eventStart = Event.create(elem, coords, opts.eventTypes[0], eventOpts)
+ if (this.opts.debug) console.log('dispatch event', eventStart)
elem.dispatchEvent(eventStart)
// onStart
@@ -1693,14 +1691,8 @@ export default class UITest {
// create and dispatch event
//--------------------
- const eventComplete = Event.create(
- elem,
- coords,
- opts.eventTypes[1],
- eventOpts
- )
- if (this.opts.debug)
- console.log('dispatch event', eventComplete)
+ const eventComplete = Event.create(elem, coords, opts.eventTypes[1], eventOpts)
+ if (this.opts.debug) console.log('dispatch event', eventComplete)
elem.dispatchEvent(eventComplete)
// onComplete
@@ -1795,14 +1787,8 @@ export default class UITest {
onStart: () => {
// create and dispatch event
//--------------------
- const event = Event.create(
- elem,
- from,
- opts.eventTypes[0],
- eventOpts
- )
- if (this.opts.debug)
- console.log('dispatch event', event)
+ const event = Event.create(elem, from, opts.eventTypes[0], eventOpts)
+ if (this.opts.debug) console.log('dispatch event', event)
elem.dispatchEvent(event)
// onStart
@@ -1814,14 +1800,8 @@ export default class UITest {
onUpdate: () => {
// create and dispatch event
//--------------------
- const event = Event.create(
- elem,
- from,
- opts.eventTypes[1],
- eventOpts
- )
- if (this.opts.debug)
- console.log('dispatch event', event)
+ const event = Event.create(elem, from, opts.eventTypes[1], eventOpts)
+ if (this.opts.debug) console.log('dispatch event', event)
elem.dispatchEvent(event)
// onUpdate
@@ -1833,14 +1813,8 @@ export default class UITest {
onComplete: () => {
// create and dispatch event
//--------------------
- const event = Event.create(
- elem,
- from,
- opts.eventTypes[2],
- eventOpts
- )
- if (this.opts.debug)
- console.log('dispatch event', event)
+ const event = Event.create(elem, from, opts.eventTypes[2], eventOpts)
+ if (this.opts.debug) console.log('dispatch event', event)
elem.dispatchEvent(event)
// onComplete
@@ -1991,66 +1965,39 @@ export default class UITest {
onStart: () => {
// create and dispatch event
//--------------------
- const event = Event.create(
- elem,
- from,
- opts.eventTypes[0],
- eventOpts
- )
- if (this.opts.debug)
- console.log('dispatch event', event)
+ const event = Event.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.create(
- elem,
- from,
- opts.eventTypes[1],
- eventOpts
- )
- if (this.opts.debug)
- console.log('dispatch event', event)
+ const event = Event.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.create(
- elem,
- from,
- opts.eventTypes[2],
- eventOpts
- )
- if (this.opts.debug)
- console.log('dispatch event', event)
+ const event = Event.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)
}
}
@@ -2168,9 +2115,7 @@ export default class UITest {
'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) {
@@ -2245,12 +2190,8 @@ class Util {
* @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
}
@@ -2306,9 +2247,7 @@ class Util {
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
}
@@ -2444,16 +2383,9 @@ class Event {
* @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 = {
@@ -2512,25 +2444,12 @@ class Event {
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))
}
}
}
@@ -2547,7 +2466,7 @@ class Event {
diff --git a/gulpfile.js b/gulpfile.js
index e818761..0e6466b 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -38,13 +38,9 @@ function vendors() {
}
function preload() {
- return src(
- [
- './node_modules/gsap/src/uncompressed/TweenMax.js',
- './lib/3rdparty/convertPointFromPageToNode.js'
- ],
- { sourcemaps: false }
- )
+ return src(['./node_modules/gsap/src/uncompressed/TweenMax.js', './lib/3rdparty/convertPointFromPageToNode.js'], {
+ sourcemaps: false
+ })
.pipe(concat('iwmlib.3rdparty.preload.js'))
.pipe(replace(/^\/\/# sourceMappingURL=.*$/gim, ''))
.pipe(dest('dist', { sourcemaps: false }))
@@ -55,12 +51,7 @@ function preload() {
function prettify() {
return src(
- [
- './lib/*.js',
- './lib/card/*.js',
- './lib/pixi/*.js',
- '!./lib/bootstrap.babel.js'
- ],
+ ['./lib/*.js', './lib/card/*.js', './lib/pixi/*.js', './lib/pixi/deepzoom/*.js', '!./lib/bootstrap.babel.js'],
{
base: './lib'
}
@@ -70,7 +61,8 @@ function prettify() {
singleQuote: true,
jsxSingleQuote: true,
tabWidth: 4,
- semi: false
+ semi: false,
+ printWidth: 120
})
)
.pipe(dest('./lib'))
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..b9b1acc 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
})
@@ -675,6 +645,22 @@ export default class Card {
return requestedSame
}
+ static _calculateCenterRelativeTo(target, image) {
+ console.log('_calculateCenterRelativeTo', target, image)
+ let bbox = image.getBBox()
+ let width = bbox.width
+ let height = bbox.height
+ let cx = target.getAttribute('cx')
+ let cy = target.getAttribute('cy')
+ let r = target.getAttribute('r')
+ let radius = r.endsWith('%') ? (parseFloat(r) / 100) * width : parseFloat(r)
+
+ let x = cx.endsWith('%') ? (parseFloat(cx) / 100) * width : cx
+ let y = cy.endsWith('%') ? (parseFloat(cy) / 100) * height : cx
+ console.log({ x, y, width, height, radius })
+ return { x, y }
+ }
+
/**
* Opens a popup for a highlight. Typically used as a onlick handler of a link.
*
@@ -683,14 +669,16 @@ export default class Card {
* @returns {bool} false - Returns false to prevent default click action
* @memberof Card
*/
- static loadHighlightPopup(event) {
- if (this.debug) console.log('Load Highlight Popup: ', event)
- let node
- if (event.firstTarget) {
- node = event.firstTarget
- } else {
- node = event.target
+ static loadHighlightPopup(event, node = null) {
+ if (this.debug) console.log('Card.loadHighlightPopup', event, node)
+ if (node == null) {
+ if (event.firstTarget) {
+ node = event.firstTarget
+ } else {
+ node = event.target
+ }
}
+
let context = this.getContext(node)
event.stopPropagation()
@@ -709,11 +697,10 @@ export default class Card {
animation: Card.highlightAnimation,
onExpanded: () => {
// We assume it's always a circle. This may break, when other svg shapes are used.
- let x = node.getAttribute('cx')
- let y = node.getAttribute('cy')
- let position = { x, y }
- let radius = parseFloat(node.getAttribute('r'))
+ let svgRoot = node.closest('svg')
+ let image = svgRoot.querySelector('image')
+ let position = Card._calculateCenterRelativeTo(node, image)
/*
As the popup is appended directly to the card. We have to
@@ -721,18 +708,17 @@ export default class Card {
card space.
*/
- let svgRoot = node.closest('svg')
+ // let svgRoot = node.closest('svg')
let svgPoint = svgRoot.createSVGPoint()
svgPoint.x = position.x
- svgPoint.y = position.y - radius
+ svgPoint.y = position.y
let matrix = node.getCTM()
let point = svgPoint.matrixTransform(matrix)
- let global = Points.fromNodeToPage(
- node.closest('div'),
- point
- )
+ let closestDiv = node.closest('div')
+ console.log('closestDiv', closestDiv, point)
+ let global = Points.fromNodeToPage(closestDiv, point)
let local = Points.fromPageToNode(context, global)
let overlay = document.createElement('div')
@@ -743,7 +729,7 @@ export default class Card {
// we could load the data while the circle is animating.
// but for simplicity it's just done here for now.
// TODO: Adjust to load while animating (Problem: Unload when cancelled).
- console.log(src)
+ console.log('loadHighlightPopup', src, position, local)
this._loadPopupContent(src)
.then(content => {
this._openPopup(context, src, local, content, {
@@ -778,16 +764,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 +784,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 +833,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 +947,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 +1000,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 +1033,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 +1127,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 +1178,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 +1211,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 +1282,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 +1308,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 +1331,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 +1398,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 +1408,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 +1416,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 +1523,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 +1560,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 +1708,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 +1743,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/index.html b/lib/card/index.html
index 5e4e7e4..0cafbe1 100644
--- a/lib/card/index.html
+++ b/lib/card/index.html
@@ -71,7 +71,7 @@
-
@@ -96,8 +96,8 @@
const wrapper2 = new CardWrapper(demoCardWithSelector)
wrapper2.handleClicksAsTaps()
- wrapper2.onTap('circle', event => {
- Card.loadHighlightPopup(event)
+ wrapper2.onTap('circle', (event, node) => {
+ Card.loadHighlightPopup(event, node)
})
wrapper2.onTap('a', event => {
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..20f6b36 100644
--- a/lib/flippable.js
+++ b/lib/flippable.js
@@ -1,6 +1,7 @@
+/* eslint-disable no-unused-vars */
+/* global PDFJS Power1 */
import { getId } from './utils.js'
import { DOMScatter } from './scatter.js'
-import { InteractionMapper } from './interaction.js'
export class CardLoader {
constructor(
@@ -22,7 +23,7 @@ export class CardLoader {
this.x = x
this.y = y
this.scale = scale
- this.rotation = 0
+ this.rotation = rotation
this.maxScale = maxScale
this.minScale = minScale
this.wantedWidth = width
@@ -30,12 +31,6 @@ export class CardLoader {
this.maxWidth = maxWidth != null ? maxWidth : window.innerWidth
this.maxHeight = maxHeight != null ? maxHeight : window.innerHeight
this.addedNode = null
- console.log({
- width,
- height,
- maxWidth,
- maxHeight
- })
}
unload() {
@@ -120,7 +115,6 @@ export class FrameLoader extends CardLoader {
return new Promise((resolve, reject) => {
let isFrame = domNode instanceof HTMLIFrameElement
let iframe = isFrame ? domNode : document.createElement('iframe')
- console.log('FrameLoader.load', isFrame, iframe, this.src)
iframe.frameBorder = 0
iframe.style.scrolling = false
iframe.width = this.wantedWidth
@@ -147,14 +141,9 @@ export class HTMLLoader extends CardLoader {
let xhr = new XMLHttpRequest()
xhr.open('GET', this.src, false)
xhr.onload = e => {
- domNode.innerHTML = xhr.response
+ domNode.innerHTML = this.prepare(xhr.response)
this.addedNode = domNode.firstElementChild
let { width, height } = this.size(this.addedNode)
- console.log('HTMLLoader.load', {
- added: this.addedNode,
- width,
- height
- })
if (width) this.wantedWidth = width || this.wantedWidth
if (height) this.wantedHeight = height || this.wantedHeight
resolve(this)
@@ -166,6 +155,18 @@ export class HTMLLoader extends CardLoader {
})
}
+ /**
+ * Preoares the html before it is assigned with innerHTML.
+ * Can be overwritten in subclasses.
+ *
+ * @param {*} html
+ * @returns
+ * @memberof HTMLLoader
+ */
+ prepare(html) {
+ return html
+ }
+
/**
* Tries to determine the size of the addedNode.
* Checks for explicit width and height style attributes.
@@ -258,28 +259,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 +291,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)
}
}
@@ -329,7 +322,6 @@ export class DOMFlip {
}
setupFlippable(flippable, loader) {
- console.log('setupFlippable', loader.wantedWidth)
flippable.wantedWidth = loader.wantedWidth
flippable.wantedHeight = loader.wantedHeight
flippable.wantedScale = loader.scale
@@ -339,7 +331,6 @@ export class DOMFlip {
}
start({ targetCenter = null } = {}) {
- console.log('DOMFlip.start', targetCenter)
if (this.preloadBack) {
this.flippable.start({ duration: this.flipDuration, targetCenter })
} else {
@@ -489,7 +480,6 @@ export class DOMFlippable {
clickInfo() {
this.bringToFront()
- console.log('clickInfo')
this.infoBtn.click()
}
@@ -516,6 +506,7 @@ export class DOMFlippable {
let startScale = this.element._gsTransform.scaleX
let w = this.element.style.width
let h = this.element.style.height
+ // eslint-disable-next-line no-console
console.log(info, startX, startY, startAngle, startScale, w, h)
}
@@ -572,9 +563,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
@@ -587,14 +576,12 @@ export class DOMFlippable {
let y = this.flipped ? yy : this.startY
let onUpdate = this.onUpdate !== null ? () => this.onUpdate(this) : null
- console.log('start', this.flipDuration)
TweenLite.to(this.card, this.flipDuration, {
rotationY: targetY,
ease: Power1.easeOut,
transformOrigin: '50% 50%',
onUpdate,
onComplete: e => {
- console.log('start end', this.flipDuration)
if (this.flipped) {
//this.hide(this.front)
this.enable(this.backBtn)
@@ -625,8 +612,6 @@ export class DOMFlippable {
},
force3D: true
})
-
- console.log('start 2', this.wantedWidth, this.startWidth, { w, h })
// See https://greensock.com/forums/topic/7997-rotate-the-shortest-way/
TweenLite.to(this.element, this.flipDuration / 2, {
scale: targetScale,
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.html b/lib/pixi/button.html
index e9fa2d1..49d9f65 100644
--- a/lib/pixi/button.html
+++ b/lib/pixi/button.html
@@ -32,13 +32,13 @@
const app = new PIXIApp({
view: canvas,
width: 900,
- height: 420,
+ height: 600,
transparent: false
}).setup().run()
-let button1 = new Button({x: 10, y: 10})
+const button1 = new Button({x: 10, y: 10})
-let button2 = new Button({
+const button2 = new Button({
theme: 'red',
x: 60,
y: 10,
@@ -49,7 +49,7 @@ let button2 = new Button({
}
})
-let button3 = new Button({
+const button3 = new Button({
x: 150,
y: 10,
label: 'Checkbox button',
@@ -59,7 +59,7 @@ let button3 = new Button({
}
})
-let button4 = new Button({
+const button4 = new Button({
x: 330,
y: 10,
label: 'Disabled button',
@@ -69,14 +69,14 @@ let button4 = new Button({
}
})
-let button5 = new Button({
+const button5 = new Button({
x: 500,
y: 10,
label: 'Active button',
active: true
})
-let button6 = new Button({
+const button6 = new Button({
x: 650,
y: 10,
label: 'Active disabled button',
@@ -85,7 +85,7 @@ let button6 = new Button({
disabled: true
})
-let button7 = new Button({
+const button7 = new Button({
x: 10,
y: 70,
label: 'Icon button',
@@ -94,7 +94,7 @@ let button7 = new Button({
icon: 'arrow_back'
})
-let button8 = new Button({
+const button8 = new Button({
x: 180,
y: 70,
theme: 'light',
@@ -104,7 +104,7 @@ let button8 = new Button({
iconPosition: 'right'
})
-let button9 = new Button({
+const button9 = new Button({
x: 10,
y: 130,
type: 'checkbox',
@@ -112,7 +112,7 @@ let button9 = new Button({
iconActive: 'pause'
})
-let button10 = new Button({
+const button10 = new Button({
x: 60,
y: 130,
icon: 'stop',
@@ -121,14 +121,14 @@ let button10 = new Button({
}
})
-let button11 = new Button({
+const button11 = new Button({
x: 110,
y: 130,
icon: 'star_border',
tooltip: 'Bookmark'
})
-let button12 = new Button({
+const button12 = new Button({
x: 10,
y: 190,
icon: 'airplay',
@@ -141,7 +141,7 @@ let button12 = new Button({
type: 'checkbox'
})
-let button13 = new Button({
+const button13 = new Button({
x: 50,
y: 190,
label: 'Button',
@@ -169,7 +169,7 @@ let button13 = new Button({
type: 'checkbox'
})
-let button14 = new Button({
+const button14 = new Button({
x: 10,
y: 250,
label: 'Button',
@@ -178,7 +178,7 @@ let button14 = new Button({
iconActive: 'add_circle'
})
-let button15 = new Button({
+const button15 = new Button({
x: 200,
y: 250,
label: 'Button',
@@ -187,7 +187,7 @@ let button15 = new Button({
iconActive: null
})
-let button16 = new Button({
+const button16 = new Button({
x: 400,
y: 250,
label: 'Button',
@@ -197,7 +197,7 @@ let button16 = new Button({
active: true
})
-let button17 = new Button({
+const button17 = new Button({
x: 600,
y: 250,
label: 'Button',
@@ -215,7 +215,7 @@ let graphic2 = new PIXI.Graphics()
graphic2.beginFill(0x40c3f2)
graphic2.drawCircle(30, 30, 30)
-let button18 = new Button({
+const button18 = new Button({
x: 10,
y: 310,
label: 'Button',
@@ -232,7 +232,7 @@ let graphic4 = new PIXI.Graphics()
graphic4.beginFill(0xf8ce2d)
graphic4.drawCircle(40, 40, 40)
-let button19 = new Button({
+const button19 = new Button({
x: 200,
y: 310,
label: 'Button',
@@ -243,7 +243,7 @@ let button19 = new Button({
iconPosition: 'right'
})
-let button20 = new Button({
+const button20 = new Button({
x: 400,
y: 310,
label: 'Link Button',
@@ -251,7 +251,7 @@ let button20 = new Button({
style: 'link'
})
-let button21 = new Button({
+const button21 = new Button({
x: 600,
y: 310,
minWidth: 70,
@@ -261,11 +261,73 @@ let button21 = new Button({
style: 'link'
})
+const button22 = new Button({
+ x: 10,
+ y: 440,
+ icon: 'play_arrow',
+ badge: '19'
+})
+
+const button23 = new Button({
+ x: 100,
+ y: 440,
+ icon: 'stop',
+ badge: 'Stop'
+})
+
+const button24 = new Button({
+ x: 200,
+ y: 440,
+ icon: 'star_border',
+ badge: {
+ content: 'Bookmark',
+ align: 'center',
+ verticalAlign: 'bottom',
+ offsetTop: 8,
+ radius: 14,
+ fill: 0xfe832d
+ }
+})
+
+const button25 = new Button({
+ x: 300,
+ y: 460,
+ icon: 'add',
+ badge: {
+ content: 'Sweden',
+ align: 'center',
+ verticalAlign: 'top',
+ offsetTop: -20,
+ radius: 12,
+ fill: 0x5856d6
+ }
+})
+
+const countries = ['Tajikistan', 'Zambia', 'Dominica', 'Australia', 'Botswana', 'Mozambique', 'Lesotho', 'Thailand', 'Gabon', 'Cuba', 'Mexico', 'Central African Republic', 'Réunion', 'Montenegro', 'Romania', 'Jamaica', 'Thailand', 'Cameroon', 'French Guiana', 'Nigeria', 'Tokelau', 'Slovenia', 'Kuwait', 'Palestinian Territories', 'Estonia', 'Germany', 'Cameroon', 'Somalia', 'El Salvador', 'San Marino', 'Sierra Leone', 'Sierra Leone', 'Gibraltar', 'Benin', 'Russia', 'Iraq', 'Tunisia', 'Greenland', 'Côte d\'Ivoire', 'Tanzania', 'Zambia', 'Bermuda', 'Somalia', 'Malaysia', 'Croatia', 'Togo', 'Belgium', 'Uruguay', 'Equatorial Guinea', 'Nigeria', 'St. Martin', 'Tuvalu', 'South Africa', 'Hong Kong SAR China', 'Palau', 'Canary Islands', 'Algeria', 'Hong Kong SAR China', 'Brunei', 'Dominican Republic', 'Sierra Leone', 'Moldova', 'Indonesia', 'Central African Republic', 'Anguilla', 'Malaysia', 'Bahrain', 'Indonesia', 'Peru', 'Namibia', 'Congo - Brazzaville', 'Micronesia', 'Cambodia', 'Réunion', 'Honduras', 'Hungary', 'Brazil', 'Trinidad & Tobago', 'Hungary', 'Madagascar', 'Sierra Leone', 'Seychelles', 'St. Martin', 'New Caledonia', 'Tokelau', 'Macedonia', 'Netherlands', 'Panama', 'Venezuela', 'Nepal', 'Guernsey', 'Papua New Guinea', 'Finland', 'Malaysia', 'Hong Kong SAR China', 'Trinidad & Tobago', 'Montserrat', 'Comoros', 'Benin', 'South Korea', 'Peru', 'Botswana', 'Cambodia', 'Isle of Man', 'Mozambique']
+setInterval(() => {
+ button25.badge.content = countries[Math.floor(Math.random() * countries.length)]
+ button25.layout()
+}, 1000)
+
+const button26 = new Button({
+ x: 10,
+ y: 520,
+ label: 'add',
+ type: 'checkbox',
+ strokeActive: 0x28a745,
+ textStyleActive: {
+ fill: 0x28a745
+ }
+})
+
app.scene.addChild(button1, button2, button3, button4, button5, button6)
app.scene.addChild(button7, button8)
app.scene.addChild(button9, button10, button11)
app.scene.addChild(button12, button13)
app.scene.addChild(button14, button15, button16, button17)
app.scene.addChild(button18, button19, button20, button21)
+app.scene.addChild(button22, button23, button24, button25)
+app.scene.addChild(button26)