diff --git a/.prettierrc b/.prettierrc index abd7e04..2d84bde 100644 --- a/.prettierrc +++ b/.prettierrc @@ -2,5 +2,6 @@ "singleQuote": true, "jsxSingleQuote": true, "tabWidth": 4, - "semi": false + "semi": false, + "printWidth": 120 } diff --git a/dist/iwmlib.js b/dist/iwmlib.js index b000db8..ba4243b 100644 --- a/dist/iwmlib.js +++ b/dist/iwmlib.js @@ -124,32 +124,21 @@ static expect(expr, value) { if (this.pprint(expr) != this.pprint(value)) { //throw new Error("got `" + expr + "` but expected `" + value + "`.") - throw new Error( - 'got `' + - this.pprint(expr) + - '` but expected `' + - this.pprint(value) + - '`.' - ) + throw new Error('got `' + this.pprint(expr) + '` but expected `' + this.pprint(value) + '`.') } } static expectError(error, message) { let index = error.toString().indexOf(message); if (index < 0) { - throw new Error( - 'got `' + message + '` but expected `' + error + '`.' - ) + throw new Error('got `' + message + '` but expected `' + error + '`.') } } static expectLog(...messages) { // if (!docTestLogMessages.equals(messages)) { docTestLogMessages.forEach((msg, i) => { - if (msg != messages[i]) - throw new Error( - 'Unexpected log message: `' + messages[i] + '`.' - ) + if (msg != messages[i]) throw new Error('Unexpected log message: `' + messages[i] + '`.') }); // throw new Error('Uups') //} @@ -198,10 +187,7 @@ let lines = text.value.split('\n'); let better = []; for (let line of lines) { - if ( - replaceExpect && - line.trim().startsWith('Doctest.expect(') - ) { + if (replaceExpect && line.trim().startsWith('Doctest.expect(')) { line = line.replace(/Doctest\.expect\(/, '>>> ').trim(); if (line.endsWith(')') || line.endsWith(',')) { line = line.slice(0, -1); @@ -406,8 +392,7 @@ // be this is a bug or a security feature. Workaround: we introduce // a mouseDownSubstitute attribute that can be assigned to cloned // events after instantiation. - if (Reflect.has(event, 'mouseDownSubstitute')) - return event.mouseDownSubstitute + if (Reflect.has(event, 'mouseDownSubstitute')) return event.mouseDownSubstitute return event.buttons || event.which } @@ -442,15 +427,7 @@ for (let i = 0; i < targets.length; i++) { let t = targets[i]; let touchTarget = document.elementFromPoint(t.pageX, t.pageY); - let touch = new Touch( - undefined, - touchTarget, - t.identifier, - t.pageX, - t.pageY, - t.screenX, - t.screenY - ); + let touch = new Touch(undefined, touchTarget, t.identifier, t.pageX, t.pageY, t.screenX, t.screenY); touches.push(touch); } return new TouchList(...touches) @@ -534,8 +511,7 @@ let result = event.type; let selector = this.selector(event.target); result += ' selector: ' + selector; - if (event.target != document.querySelector(selector)) - console.log('Cannot resolve', selector); + if (event.target != document.querySelector(selector)) console.log('Cannot resolve', selector); let keys = ['layerX', 'layerY', 'pageX', 'pageY', 'clientX', 'clientY']; for (let key of keys) { try { @@ -688,7 +664,7 @@ } } - /* globals WebKitPoint */ + /* globals */ /** Tests whether an object is empty * @param {Object} obj - the object to be tested @@ -755,9 +731,7 @@ } static startYearRange(date) { - return new Date( - Date.UTC(date.getFullYear() - 1, 11, 31, 23, 59, 59, 999) - ) + return new Date(Date.UTC(date.getFullYear() - 1, 11, 31, 23, 59, 59, 999)) } static endYearRange(date) { @@ -777,11 +751,7 @@ } static nextDay(date) { - return this.create( - date.getFullYear(), - date.getMonth(), - date.getDate() + 1 - ) + return this.create(date.getFullYear(), date.getMonth(), date.getDate() + 1) } static nextHour(date) { @@ -1284,15 +1254,9 @@ */ draw(context, { lineWidth = 2, stroke = '#000000', fill = null } = {}) { context.beginPath(); - context.moveTo( - this.points[0].x + this.center.x, - this.points[0].y + this.center.y - ); + context.moveTo(this.points[0].x + this.center.x, this.points[0].y + this.center.y); for (let i = 1; i < this.points.length; i++) { - context.lineTo( - this.points[i].x + this.center.x, - this.points[i].y + this.center.y - ); + context.lineTo(this.points[i].x + this.center.x, this.points[i].y + this.center.y); } context.closePath(); context.lineWidth = lineWidth; @@ -1349,10 +1313,7 @@ for (i = 0, j = nvert - 1; i < nvert; j = i++) { if ( verty[i] > testy != verty[j] > testy && - testx < - ((vertx[j] - vertx[i]) * (testy - verty[i])) / - (verty[j] - verty[i]) + - vertx[i] + testx < ((vertx[j] - vertx[i]) * (testy - verty[i])) / (verty[j] - verty[i]) + vertx[i] ) c = !c; } @@ -1386,12 +1347,8 @@ for (side = 0; side < this.getNumberOfSides(); side++) { /* get the axis that we will project onto */ if (side == 0) { - axis.x = - this.points[this.getNumberOfSides() - 1].y - - this.points[0].y; - axis.y = - this.points[0].x - - this.points[this.getNumberOfSides() - 1].x; + axis.x = this.points[this.getNumberOfSides() - 1].y - this.points[0].y; + axis.y = this.points[0].x - this.points[this.getNumberOfSides() - 1].x; } else { axis.x = this.points[side - 1].y - this.points[side].y; axis.y = this.points[side].x - this.points[side - 1].x; @@ -1415,8 +1372,7 @@ maxA += tmp; /* project polygon B onto axis to determine the min/max */ - minB = maxB = - other.points[0].x * axis.x + other.points[0].y * axis.y; + minB = maxB = other.points[0].x * axis.x + other.points[0].y * axis.y; for (i = 1; i < other.getNumberOfSides(); i++) { tmp = other.points[i].x * axis.x + other.points[i].y * axis.y; if (tmp > maxB) maxB = tmp; @@ -1443,12 +1399,8 @@ for (side = 0; side < other.getNumberOfSides(); side++) { /* get the axis that we will project onto */ if (side == 0) { - axis.x = - other.points[other.getNumberOfSides() - 1].y - - other.points[0].y; - axis.y = - other.points[0].x - - other.points[other.getNumberOfSides() - 1].x; + axis.x = other.points[other.getNumberOfSides() - 1].y - other.points[0].y; + axis.y = other.points[0].x - other.points[other.getNumberOfSides() - 1].x; } else { axis.x = other.points[side - 1].y - other.points[side].y; axis.y = other.points[side].x - other.points[side - 1].x; @@ -1472,8 +1424,7 @@ maxA += tmp; /* project polygon B onto axis to determine the min/max */ - minB = maxB = - other.points[0].x * axis.x + other.points[0].y * axis.y; + minB = maxB = other.points[0].x * axis.x + other.points[0].y * axis.y; for (i = 1; i < other.getNumberOfSides(); i++) { tmp = other.points[i].x * axis.x + other.points[i].y * axis.y; if (tmp > maxB) maxB = tmp; @@ -1530,12 +1481,7 @@ * @memberof Rect */ static contains(rect, point) { - return ( - point.x > rect.left && - point.x < rect.x + rect.right && - point.y > rect.top && - point.y < rect.bottom - ) + return point.x > rect.left && point.x < rect.x + rect.right && point.y > rect.top && point.y < rect.bottom } /** @@ -1615,8 +1561,7 @@ * @access private */ __push(value) { - let removed = - this.buffer.length === this.bufferMaxSize ? this.buffer.shift() : 0; + let removed = this.buffer.length === this.bufferMaxSize ? this.buffer.shift() : 0; this.buffer.push(value); return removed @@ -1720,11 +1665,7 @@ } } - static setup({ - log = console.log, - warn = console.warn, - error = console.error - } = {}) { + static setup({ log = console.log, warn = console.warn, error = console.error } = {}) { logHandlers.log = log; logHandlers.warn = warn; logHandlers.error = error; @@ -1931,10 +1872,10 @@ delta() { let prev = []; let curr = []; - let cm = { x: 0, y: 0}; - let pm = { x: 0, y: 0}; + let cm = { x: 0, y: 0 }; + let pm = { x: 0, y: 0 }; let count = 0; - for(let key of this.current.keys()) { + for (let key of this.current.keys()) { if (this.previous.has(key)) { let p = this.previous.get(key); let c = this.current.get(key); @@ -1953,7 +1894,7 @@ let scaled = 0; let alpha = 0; let zoom = 1; - for(let i=0; i t1 + this.longPressTime; if (tookLong) { @@ -2235,10 +2144,7 @@ this.unregisterTap(key); } } - if ( - this.tapTimestamps.has(key) && - performance.now() > this.tapTimestamps.get(key) + this.tapDuration - ) { + if (this.tapTimestamps.has(key) && performance.now() > this.tapTimestamps.get(key) + this.tapDuration) { //console.log("tap too long") this.unregisterTap(key); } @@ -2263,11 +2169,7 @@ isLongPress(key) { let ended = this.ended.get(key); let start = this.start.get(key); - if ( - start && - ended && - Points$1.distance(ended, start) < this.tapDistance - ) { + if (start && ended && Points$1.distance(ended, start) < this.tapDistance) { let t1 = this.timestamps.get(key); let tookLong = performance.now() > t1 + this.longPressTime; if (tookLong) { @@ -2334,9 +2236,7 @@ setupInteraction() { if (this.debug) { - let error = this.targetInterface.implementationError( - this.target.constructor - ); + let error = this.targetInterface.implementationError(this.target.constructor); if (error != null) { throw new Error('Expected IInteractionTarget: ' + error) } @@ -2374,16 +2274,11 @@ element.addEventListener( 'pointermove', e => { - if (this.debug) - console.log('pointermove', e.pointerId, e.pointerType); + if (this.debug) console.log('pointermove', e.pointerId, e.pointerType); - if ( - e.pointerType == 'touch' || - (e.pointerType == 'mouse' && Events.isPointerDown(e)) - ) { + if (e.pointerType == 'touch' || (e.pointerType == 'mouse' && Events.isPointerDown(e))) { // this.capture(e) && - if (this.debug) - console.log('pointermove captured', e.pointerId); + if (this.debug) console.log('pointermove captured', e.pointerId); this.onMove(e); } }, @@ -2392,8 +2287,7 @@ element.addEventListener( 'pointerup', e => { - if (this.debug) - console.log('pointerup', e.pointerId, e.pointerType); + if (this.debug) console.log('pointerup', e.pointerId, e.pointerType); this.onEnd(e); if (this.capturePointerEvents) { try { @@ -2408,11 +2302,9 @@ element.addEventListener( 'pointercancel', e => { - if (this.debug) - console.log('pointercancel', e.pointerId, e.pointerType); + if (this.debug) console.log('pointercancel', e.pointerId, e.pointerType); this.onEnd(e); - if (this.capturePointerEvents) - element.releasePointerCapture(e.pointerId); + if (this.capturePointerEvents) element.releasePointerCapture(e.pointerId); }, useCapture ); @@ -2421,12 +2313,7 @@ element.addEventListener( 'pointerleave', e => { - if (this.debug) - console.log( - 'pointerleave', - e.pointerId, - e.pointerType - ); + if (this.debug) console.log('pointerleave', e.pointerId, e.pointerType); if (e.target == element) this.onEnd(e); }, useCapture @@ -2437,12 +2324,7 @@ element.addEventListener( 'pointerout', e => { - if (this.debug) - console.log( - 'pointerout', - e.pointerId, - e.pointerType - ); + if (this.debug) console.log('pointerout', e.pointerId, e.pointerType); if (e.target == element) this.onEnd(e); }, useCapture @@ -2453,13 +2335,7 @@ window.addEventListener( 'pointerout', e => { - if (this.debug) - console.log( - 'pointerout', - e.pointerId, - e.pointerType, - e.target - ); + if (this.debug) console.log('pointerout', e.pointerId, e.pointerType, e.target); if (e.target == element) { this.onEnd(e); } @@ -2472,8 +2348,7 @@ element.addEventListener( 'touchstart', e => { - if (this.debug) - console.log('touchstart', this.touchPoints(e)); + if (this.debug) console.log('touchstart', this.touchPoints(e)); if (this.capture(e)) { for (let touch of e.changedTouches) { this.onStart(touch); @@ -2485,8 +2360,7 @@ element.addEventListener( 'touchmove', e => { - if (this.debug) - console.log('touchmove', this.touchPoints(e), e); + if (this.debug) console.log('touchmove', this.touchPoints(e), e); for (let touch of e.changedTouches) { this.onMove(touch); } @@ -2509,12 +2383,7 @@ element.addEventListener( 'touchcancel', e => { - if (this.debug) - console.log( - 'touchcancel', - e.targetTouches.length, - e.changedTouches.length - ); + if (this.debug) console.log('touchcancel', e.targetTouches.length, e.changedTouches.length); for (let touch of e.changedTouches) { this.onEnd(touch); } @@ -2563,9 +2432,7 @@ e => { if (e.target == element) { this.onEnd(e); - console.warn( - "Shouldn't happen: mouseout ends interaction" - ); + console.warn("Shouldn't happen: mouseout ends interaction"); } }, useCapture @@ -2606,16 +2473,8 @@ } setupMouseWheelInteraction() { - this.mouseWheelElement.addEventListener( - 'mousewheel', - this.onMouseWheel.bind(this), - true - ); - this.mouseWheelElement.addEventListener( - 'DOMMouseScroll', - this.onMouseWheel.bind(this), - true - ); + this.mouseWheelElement.addEventListener('mousewheel', this.onMouseWheel.bind(this), true); + this.mouseWheelElement.addEventListener('DOMMouseScroll', this.onMouseWheel.bind(this), true); } onMouseWheel(event) { @@ -2677,10 +2536,7 @@ break } case 'Touch': { - let id = - event.touchType === 'stylus' - ? 'stylus' - : event.identifier.toString(); + let id = event.touchType === 'stylus' ? 'stylus' : event.identifier.toString(); result[id] = this.getPosition(event); break } @@ -2730,10 +2586,7 @@ let point = extracted[key]; let updated = this.interaction.update(key, point); if (updated) { - console.warn( - "new pointer in updateInteraction shouldn't happen", - key - ); + console.warn("new pointer in updateInteraction shouldn't happen", key); this.interactionStarted(event, key, point); } } @@ -2865,11 +2718,7 @@ onEnd(event) { let extracted = this.extractPoint(event, 'changedTouches'); this.endInteraction(event, extracted); - let mapped = this.interaction.mapInteraction( - extracted, - ['ended'], - this.mapPositionToPoint.bind(this) - ); + let mapped = this.interaction.mapInteraction(extracted, ['ended'], this.mapPositionToPoint.bind(this)); for (let [target, interaction] of mapped.entries()) { target.onEnd(event, interaction); } @@ -2903,10 +2752,7 @@ // convert to array types = Array.isArray(types) ? types : types.split(/\s/); - if ( - elements instanceof NodeList || - elements instanceof HTMLCollection - ) { + if (elements instanceof NodeList || elements instanceof HTMLCollection) { elements = Array.from(elements); } elements = Array.isArray(elements) ? elements : [elements]; @@ -2915,9 +2761,7 @@ const type = types[i].toLowerCase(); // list of hammer events - const useHammer = /^(tap|doubletap|press|pan|swipe|pinch|rotate).*$/.test( - type - ); + const useHammer = /^(tap|doubletap|press|pan|swipe|pinch|rotate).*$/.test(type); // if it is a hammer event if (useHammer) { @@ -2932,33 +2776,15 @@ // recognizers if (type.startsWith('pan')) { - hammer - .get('pan') - .set( - Object.assign( - { direction: Hammer.DIRECTION_ALL }, - opts - ) - ); + hammer.get('pan').set(Object.assign({ direction: Hammer.DIRECTION_ALL }, opts)); } else if (type.startsWith('pinch')) { - hammer - .get('pinch') - .set(Object.assign({ enable: true }, opts)); + hammer.get('pinch').set(Object.assign({ enable: true }, opts)); } else if (type.startsWith('press')) { hammer.get('press').set(opts); } else if (type.startsWith('rotate')) { - hammer - .get('rotate') - .set(Object.assign({ enable: true }, opts)); + hammer.get('rotate').set(Object.assign({ enable: true }, opts)); } else if (type.startsWith('swipe')) { - hammer - .get('swipe') - .set( - Object.assign( - { direction: Hammer.DIRECTION_ALL }, - opts - ) - ); + hammer.get('swipe').set(Object.assign({ direction: Hammer.DIRECTION_ALL }, opts)); } else if (type.startsWith('tap')) { hammer.get('tap').set(opts); } @@ -3029,20 +2855,12 @@ */ static get isElectron() { // Renderer process - if ( - typeof window !== 'undefined' && - typeof window.process === 'object' && - window.process.type === 'renderer' - ) { + if (typeof window !== 'undefined' && typeof window.process === 'object' && window.process.type === 'renderer') { return true } // Main process - if ( - typeof process !== 'undefined' && - typeof process.versions === 'object' && - !!process.versions.electron - ) { + if (typeof process !== 'undefined' && typeof process.versions === 'object' && !!process.versions.electron) { return true } @@ -3110,9 +2928,7 @@ class CapabilitiesTests { static testConfirm() { let bool = confirm('Please confirm'); - document.getElementById('demo').innerHTML = bool - ? 'Confirmed' - : 'Not confirmed'; + document.getElementById('demo').innerHTML = bool ? 'Confirmed' : 'Not confirmed'; } static testPrompt() { @@ -3133,9 +2949,7 @@ } static testMultiTouchTable() { - let value = - 'Is the device a multi-touch table? ' + - Capabilities.isMultiTouchTable; + let value = 'Is the device a multi-touch table? ' + Capabilities.isMultiTouchTable; multi_touch_table.innerHTML = value; } @@ -3205,14 +3019,7 @@ class ScatterEvent extends BaseEvent { constructor( target, - { - translate = { x: 0, y: 0 }, - scale = null, - rotate = 0, - about = null, - fast = false, - type = null - } = {} + { translate = { x: 0, y: 0 }, scale = null, rotate = 0, about = null, fast = false, type = null } = {} ) { super('scatterTransformed', { target: target }); this.translate = translate; @@ -3225,13 +3032,7 @@ toString() { return ( - "Event('scatterTransformed', scale: " + - this.scale + - ' about: ' + - this.about.x + - ', ' + - this.about.y + - ')' + "Event('scatterTransformed', scale: " + this.scale + ' about: ' + this.about.x + ', ' + this.about.y + ')' ) } } @@ -3251,13 +3052,7 @@ } toString() { - return ( - 'Event(scatterResized width: ' + - this.width + - 'height: ' + - this.height + - ')' - ) + return 'Event(scatterResized width: ' + this.width + 'height: ' + this.height + ')' } } @@ -3532,6 +3327,13 @@ close() { if (this.onClose) { this.onClose.forEach(callback => callback(this)); + + /** + Removes self from container when it's closed. + */ + if (this.container) { + this.container.remove(this); + } } } @@ -3665,10 +3467,7 @@ _checkAutoClose() { if (this.scaleAutoClose) - if ( - this.scale < - this.minScale + this.scaleCloseThreshold - this.scaleCloseBuffer - ) { + if (this.scale < this.minScale + this.scaleCloseThreshold - this.scaleCloseBuffer) { this.zoom(this.minScale, { animate: 0.2, onComplete: this.close.bind(this) @@ -3723,17 +3522,7 @@ this.move(delta, { animate: animate }); } - zoom( - scale, - { - animate = 0, - about = null, - delay = 0, - x = null, - y = null, - onComplete = null - } = {} - ) { + zoom(scale, { animate = 0, about = null, delay = 0, x = null, y = null, onComplete = null } = {}) { let anchor = about || this.center; if (scale != this.scale) { if (animate > 0) { @@ -3784,15 +3573,9 @@ let origin = this.rotationOrigin; let beta = Points$1.angle(origin, anchor); let distance = Points$1.distance(origin, anchor); - let { scale: newScale, zoom: thresholdedZoom } = this.calculateScale( - zoom - ); + let { scale: newScale, zoom: thresholdedZoom } = this.calculateScale(zoom); - let newOrigin = Points$1.arc( - anchor, - beta + rotate, - distance * thresholdedZoom - ); + let newOrigin = Points$1.arc(anchor, beta + rotate, distance * thresholdedZoom); let extra = Points$1.subtract(newOrigin, origin); let offset = Points$1.subtract(anchor, origin); this._move(offset); @@ -3855,10 +3638,8 @@ } calculateScaleTransparency() { - let transparency = - (this.scale - this.minScale) / this.scaleCloseThreshold; - transparency = - transparency > 1 ? 1 : transparency < 0 ? 0 : transparency; + let transparency = (this.scale - this.minScale) / this.scaleCloseThreshold; + transparency = transparency > 1 ? 1 : transparency < 0 ? 0 : transparency; return transparency } @@ -3916,8 +3697,7 @@ if (this.scaleAutoClose) { if (this.scale <= this.minScale + this.scaleCloseThreshold) { - if (this.scaleAutoCloseTimeout) - clearTimeout(this.scaleAutoCloseTimeout); + if (this.scaleAutoCloseTimeout) clearTimeout(this.scaleAutoCloseTimeout); this.scaleAutoCloseTimeout = setTimeout(() => { this._checkAutoClose(); }, 600); @@ -4080,13 +3860,7 @@ */ constructor( element, - { - stopEvents = 'auto', - claimEvents = true, - useCapture = true, - touchAction = 'none', - debugCanvas = null - } = {} + { stopEvents = 'auto', claimEvents = true, useCapture = true, touchAction = 'none', debugCanvas = null } = {} ) { this.onCapture = null; this.element = element; @@ -4097,11 +3871,7 @@ movement of scatter objects, the touchmove event has to be bound again. */ if (Capabilities.isSafari) { - document.addEventListener( - 'touchmove', - event => this.preventPinch(event), - false - ); + document.addEventListener('touchmove', event => this.preventPinch(event), false); stopEvents = false; } else { stopEvents = true; @@ -4137,14 +3907,7 @@ for (let [key, point] of current.entries()) { let local = point; context.beginPath(); - context.arc( - local.x * resolution, - local.y * resolution, - radius, - 0, - 2 * Math.PI, - false - ); + context.arc(local.x * resolution, local.y * resolution, radius, 0, 2 * Math.PI, false); context.fill(); context.stroke(); } @@ -4160,6 +3923,22 @@ } } + /** + * Removes an element from the scatter. + * + * @param {Scatter} scatter - Element to remove. + * @memberof DOMScatterContainer + */ + remove(scatter) { + this.scatter.delete(scatter.element); + } + + /** + * Adds an element to the ScatterContainer. + * + * @param {Scatter} scatter - Element to add to the ScatterContainer. + * @memberof DOMScatterContainer + */ add(scatter) { this.scatter.set(scatter.element, scatter); } @@ -4200,10 +3979,7 @@ ***/ let found = document.elementFromPoint(global.x, global.y); for (let target of this.scatter.values()) { - if ( - target.interactive && - this.isDescendant(target.element, found) - ) { + if (target.interactive && this.isDescendant(target.element, found)) { if (this.stopEvents) Events.stop(event); if (this.claimEvents) event.claimedByScatter = target; return target @@ -4634,10 +4410,8 @@ let resizeH = -r * Math.sin(Angle.degree2radian(phiCorrected)); if ( - (this.element.offsetWidth + resizeW) / this.scale > - (this.width * 0.5) / this.scale && - (this.element.offsetHeight + resizeH) / this.scale > - (this.height * 0.3) / this.scale + (this.element.offsetWidth + resizeW) / this.scale > (this.width * 0.5) / this.scale && + (this.element.offsetHeight + resizeH) / this.scale > (this.height * 0.3) / this.scale ) TweenLite.to(this.element, 0, { width: this.element.offsetWidth + resizeW / this.scale, @@ -4934,28 +4708,22 @@ frontLoaded(loader) { return new Promise((resolve, reject) => { - let scatter = new DOMScatter$1( - this.cardWrapper, - this.domScatterContainer, - { - x: loader.x, - y: loader.y, - startScale: loader.scale, - scale: loader.scale, - maxScale: loader.maxScale, - minScale: loader.minScale, - width: loader.wantedWidth, - height: loader.wantedHeight, - rotation: loader.rotation, - translatable: this.translatable, - scalable: this.scalable, - rotatable: this.rotatable, - overdoScaling: this.overdoScaling, - tapDelegate: this.tapDelegateFactory - ? this.tapDelegateFactory(this.cardWrapper) - : null - } - ); + let scatter = new DOMScatter$1(this.cardWrapper, this.domScatterContainer, { + x: loader.x, + y: loader.y, + startScale: loader.scale, + scale: loader.scale, + maxScale: loader.maxScale, + minScale: loader.minScale, + width: loader.wantedWidth, + height: loader.wantedHeight, + rotation: loader.rotation, + translatable: this.translatable, + scalable: this.scalable, + rotatable: this.rotatable, + overdoScaling: this.overdoScaling, + tapDelegate: this.tapDelegateFactory ? this.tapDelegateFactory(this.cardWrapper) : null + }); if (this.center) { scatter.centerAt(this.center); @@ -4972,9 +4740,7 @@ //Remove callback if (scatter.onTransform) { - let callbackIdx = scatter.onTransform.indexOf( - removeOnMinScale - ); + let callbackIdx = scatter.onTransform.indexOf(removeOnMinScale); scatter.onTransform.splice(callbackIdx, 1); } } @@ -5248,9 +5014,7 @@ this.flipped = !this.flipped; let targetY = this.flipped ? 180 : 0; - let targetZ = this.flipped - ? this.startAngle + this.targetRotation(this.startAngle) - : this.startAngle; + let targetZ = this.flipped ? this.startAngle + this.targetRotation(this.startAngle) : this.startAngle; let targetScale = this.flipped ? this.wantedScale : this.startScale; let w = this.flipped ? this.wantedWidth : this.startWidth; let h = this.flipped ? this.wantedHeight : this.startHeight; @@ -5610,8 +5374,7 @@ img.ondrag = e => { e.preventDefault(); - let target = - this.element.querySelector('iframe') || this.element; + let target = this.element.querySelector('iframe') || this.element; let delta = { x: e.clientX - this.currentPos.x, y: e.clientY - this.currentPos.y @@ -5713,10 +5476,7 @@ if (images.length > 0) { let count = 0; for (let image of images) { - if ( - !image.complete && - !image.src.startsWith('data:') - ) { + if (!image.complete && !image.src.startsWith('data:')) { total += 1; console.log('image not complete', image.src); image.onload = e => { @@ -5828,8 +5588,7 @@ target.ondragstart = e => { this.currentPos = { x: e.clientX, y: e.clientY }; var img = document.createElement('img'); - img.src = - 'data:image/gifbase64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'; + img.src = 'data:image/gifbase64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'; e.dataTransfer.setDragImage(img, 0, 0); }; target.ondrag = e => { @@ -5879,8 +5638,7 @@ layout() {} remove() { - if (this.parent.contains(this.element)) - this.parent.removeChild(this.element); + if (this.parent.contains(this.element)) this.parent.removeChild(this.element); this.unregister(this.context); } @@ -6035,36 +5793,30 @@ //if targetBoundingBox is set, popup is placed next to the rectangle if (this.targetBoundingBox) { let bbTop = this.targetBoundingBox.y; - let bbBottom = - this.targetBoundingBox.y + this.targetBoundingBox.height; + let bbBottom = this.targetBoundingBox.y + this.targetBoundingBox.height; let bbLeft = this.targetBoundingBox.x; - let bbRight = - this.targetBoundingBox.x + this.targetBoundingBox.width; + let bbRight = this.targetBoundingBox.x + this.targetBoundingBox.width; //console.log("place popup with bb set:", x, y, bbTop, bbBottom, bbLeft, bbRight) switch (notchPosition) { case 'bottomLeft': case 'bottomRight': case 'bottomCenter': y = bbTop; - if (!this.useEventPosWithBoundingBox) - x = (bbLeft + bbRight) / 2; + if (!this.useEventPosWithBoundingBox) x = (bbLeft + bbRight) / 2; break case 'topLeft': case 'topRight': case 'topCenter': y = bbBottom; - if (!this.useEventPosWithBoundingBox) - x = (bbLeft + bbRight) / 2; + if (!this.useEventPosWithBoundingBox) x = (bbLeft + bbRight) / 2; break case 'centerRight': x = bbLeft; - if (!this.useEventPosWithBoundingBox) - y = (bbTop + bbBottom) / 2; + if (!this.useEventPosWithBoundingBox) y = (bbTop + bbBottom) / 2; break case 'centerLeft': x = bbRight; - if (!this.useEventPosWithBoundingBox) - y = (bbTop + bbBottom) / 2; + if (!this.useEventPosWithBoundingBox) y = (bbTop + bbBottom) / 2; break default: break @@ -6208,8 +5960,7 @@ boxShadow: '0 12px 15px rgba(0, 0, 0, 0.1)', bottom: -this.notchSize + 'px', position: 'absolute', - borderTop: - this.notchSize + 'px solid ' + this.backgroundColor, + borderTop: this.notchSize + 'px solid ' + this.backgroundColor, borderRight: this.notchSize + 'px solid transparent', borderLeft: this.notchSize + 'px solid transparent', borderBottom: 0 @@ -6237,8 +5988,7 @@ left, top: -this.notchSize + 'px', position: 'absolute', - borderBottom: - this.notchSize + 'px solid ' + this.backgroundColor, + borderBottom: this.notchSize + 'px solid ' + this.backgroundColor, borderRight: this.notchSize + 'px solid transparent', borderLeft: this.notchSize + 'px solid transparent', borderTop: 0 @@ -6275,16 +6025,13 @@ let top = size.height / 2 - this.notchSize; if (notchPosition.endsWith('Left')) { left = -this.notchSize * 2 + 'px'; - borderRight = - this.notchSize + 'px solid ' + this.backgroundColor; - this.element.style.boxShadow = - '15px 10px 15px rgba(0, 0, 0, 0.3)'; + borderRight = this.notchSize + 'px solid ' + this.backgroundColor; + this.element.style.boxShadow = '15px 10px 15px rgba(0, 0, 0, 0.3)'; } if (notchPosition.endsWith('Right')) { left = size.width + 'px'; borderLeft = this.notchSize + 'px solid ' + this.backgroundColor; - this.element.style.boxShadow = - '15px 5px 15px rgba(0, 0, 0, 0.3)'; + this.element.style.boxShadow = '15px 5px 15px rgba(0, 0, 0, 0.3)'; } top = Math.round(top) + 'px'; @@ -6341,8 +6088,7 @@ onMove = null } = {} ) { - let notchPosition = - switchPos && point.y < 50 ? 'topCenter' : 'bottomCenter'; + let notchPosition = switchPos && point.y < 50 ? 'topCenter' : 'bottomCenter'; let popup = new Popup$1({ parent, context, @@ -6633,8 +6379,7 @@ return } console.log('open', point); - let notchPosition = - point.y < 50 && switchPos ? 'topCenter' : 'bottomCenter'; + let notchPosition = point.y < 50 && switchPos ? 'topCenter' : 'bottomCenter'; let popup = new PopupMenu({ parent, fontSize, @@ -6657,21 +6402,9 @@ if (this.eventOutside(e)) this.closePopup(context); }; if (autoClose) { - context.addEventListener( - 'mousedown', - popup.closeEventListener, - true - ); - context.addEventListener( - 'touchstart', - popup.closeEventListener, - true - ); - context.addEventListener( - 'pointerdown', - popup.closeEventListener, - true - ); + context.addEventListener('mousedown', popup.closeEventListener, true); + context.addEventListener('touchstart', popup.closeEventListener, true); + context.addEventListener('pointerdown', popup.closeEventListener, true); } } @@ -6686,18 +6419,9 @@ let registered = Poppable.get(context); if (registered) { registered.close(); - context.removeEventListener( - 'mousedown', - registered.closeEventListener - ); - context.removeEventListener( - 'touchstart', - registered.closeEventListener - ); - context.removeEventListener( - 'pointerdown', - registered.closeEventListener - ); + context.removeEventListener('mousedown', registered.closeEventListener); + context.removeEventListener('touchstart', registered.closeEventListener); + context.removeEventListener('pointerdown', registered.closeEventListener); } } } @@ -6760,15 +6484,7 @@ let point = pointMap.get(key); let p = Points$1.fromPageToNode(this.frame, point); let touchTarget = doc.elementFromPoint(p.x, p.y); - let touch = new Touch( - undefined, - touchTarget, - key, - p.x, - p.y, - p.x, - p.y - ); + let touch = new Touch(undefined, touchTarget, key, p.x, p.y, p.x, p.y); touches.push(touch); } return new TouchList(...touches) @@ -6803,12 +6519,7 @@ this.target.dispatchEvent(touchEvent); } - simulateTouchEventSafari( - type, - point, - pointMap, - touchEventKey = 'targetTouches' - ) { + simulateTouchEventSafari(type, point, pointMap, touchEventKey = 'targetTouches') { let p = Points$1.fromPageToNode(this.frame, point); let data = { view: this.frame.contentWindow, @@ -6832,9 +6543,7 @@ } isMouseLikeEvent(event) { - return ( - event.type.startsWith('mouse') || event.type.startsWith('pointer') - ) + return event.type.startsWith('mouse') || event.type.startsWith('pointer') } onStart(event, interaction) { @@ -6843,11 +6552,7 @@ if (this.isMouseLikeEvent(event)) { this.simulateMouseEvent('mousedown', point); } else { - this.simulateTouchEvent( - 'touchstart', - point, - interaction.current - ); + this.simulateTouchEvent('touchstart', point, interaction.current); return } } @@ -6871,12 +6576,7 @@ if (this.isMouseLikeEvent(event)) { this.simulateMouseEvent('mouseend', point); } else { - this.simulateTouchEvent( - 'touchend', - point, - interaction.ended, - 'changedTouches' - ); + this.simulateTouchEvent('touchend', point, interaction.ended, 'changedTouches'); return } } @@ -7091,9 +6791,7 @@ if (opts.eventType) { opts.eventTypes = opts.eventType; } - opts.eventTypes = Array.isArray(opts.eventTypes) - ? opts.eventTypes - : [opts.eventTypes]; + opts.eventTypes = Array.isArray(opts.eventTypes) ? opts.eventTypes : [opts.eventTypes]; // timeline //-------------------- @@ -7131,14 +6829,8 @@ if (opts.eventTypes[0]) { // create and dispatch event //-------------------- - const eventStart = Event$1.create( - elem, - coords, - opts.eventTypes[0], - eventOpts - ); - if (this.opts.debug) - console.log('dispatch event', eventStart); + const eventStart = Event$1.create(elem, coords, opts.eventTypes[0], eventOpts); + if (this.opts.debug) console.log('dispatch event', eventStart); elem.dispatchEvent(eventStart); // onStart @@ -7150,14 +6842,8 @@ // create and dispatch event //-------------------- - const eventComplete = Event$1.create( - elem, - coords, - opts.eventTypes[1], - eventOpts - ); - if (this.opts.debug) - console.log('dispatch event', eventComplete); + const eventComplete = Event$1.create(elem, coords, opts.eventTypes[1], eventOpts); + if (this.opts.debug) console.log('dispatch event', eventComplete); elem.dispatchEvent(eventComplete); // onComplete @@ -7250,14 +6936,8 @@ onStart: () => { // create and dispatch event //-------------------- - const event = Event$1.create( - elem, - from, - opts.eventTypes[0], - eventOpts - ); - if (this.opts.debug) - console.log('dispatch event', event); + const event = Event$1.create(elem, from, opts.eventTypes[0], eventOpts); + if (this.opts.debug) console.log('dispatch event', event); elem.dispatchEvent(event); // onStart @@ -7269,14 +6949,8 @@ onUpdate: () => { // create and dispatch event //-------------------- - const event = Event$1.create( - elem, - from, - opts.eventTypes[1], - eventOpts - ); - if (this.opts.debug) - console.log('dispatch event', event); + const event = Event$1.create(elem, from, opts.eventTypes[1], eventOpts); + if (this.opts.debug) console.log('dispatch event', event); elem.dispatchEvent(event); // onUpdate @@ -7288,14 +6962,8 @@ onComplete: () => { // create and dispatch event //-------------------- - const event = Event$1.create( - elem, - from, - opts.eventTypes[2], - eventOpts - ); - if (this.opts.debug) - console.log('dispatch event', event); + const event = Event$1.create(elem, from, opts.eventTypes[2], eventOpts); + if (this.opts.debug) console.log('dispatch event', event); elem.dispatchEvent(event); // onComplete @@ -7444,66 +7112,39 @@ onStart: () => { // create and dispatch event //-------------------- - const event = Event$1.create( - elem, - from, - opts.eventTypes[0], - eventOpts - ); - if (this.opts.debug) - console.log('dispatch event', event); + const event = Event$1.create(elem, from, opts.eventTypes[0], eventOpts); + if (this.opts.debug) console.log('dispatch event', event); elem.dispatchEvent(event); // onStart //-------------------- - if ( - opts.onStart && - (opts.doubleCallbacks || key === 0) - ) { + if (opts.onStart && (opts.doubleCallbacks || key === 0)) { opts.onStart.call(this, event); } }, onUpdate: () => { // create and dispatch event //-------------------- - const event = Event$1.create( - elem, - from, - opts.eventTypes[1], - eventOpts - ); - if (this.opts.debug) - console.log('dispatch event', event); + const event = Event$1.create(elem, from, opts.eventTypes[1], eventOpts); + if (this.opts.debug) console.log('dispatch event', event); elem.dispatchEvent(event); // onUpdate //-------------------- - if ( - opts.onUpdate && - (opts.doubleCallbacks || key === 0) - ) { + if (opts.onUpdate && (opts.doubleCallbacks || key === 0)) { opts.onUpdate.call(this, event); } }, onComplete: () => { // create and dispatch event //-------------------- - const event = Event$1.create( - elem, - from, - opts.eventTypes[2], - eventOpts - ); - if (this.opts.debug) - console.log('dispatch event', event); + const event = Event$1.create(elem, from, opts.eventTypes[2], eventOpts); + if (this.opts.debug) console.log('dispatch event', event); elem.dispatchEvent(event); // onComplete //-------------------- - if ( - opts.onComplete && - (opts.doubleCallbacks || key === 0) - ) { + if (opts.onComplete && (opts.doubleCallbacks || key === 0)) { opts.onComplete.call(this, event); } } @@ -7615,9 +7256,7 @@ 'No execution time was specified for this action, and a default interval was not set in the class constructor!' ) } - timelinePosition = - Math.max(...this._timelinePositions) + - (this.opts.defaultInterval || 1); + timelinePosition = Math.max(...this._timelinePositions) + (this.opts.defaultInterval || 1); } if (opts === null) { @@ -7692,12 +7331,8 @@ * @return {HTMLElement|string} element - The HTML element on which the event is to be executed, e.g. button, document, h2, canvas, etc. or an selector string. If a selector has been specified, it is evaluated immediately before the event is called using the querySelector method. */ static extractElement(context, element) { - const cont = Util.isFrame(context) - ? context.contentDocument - : context.document; - const elem = Util.isString(element) - ? cont.querySelector(element) - : element; + const cont = Util.isFrame(context) ? context.contentDocument : context.document; + const elem = Util.isString(element) ? cont.querySelector(element) : element; return elem } @@ -7753,9 +7388,7 @@ type: 'thru' }; } else { - opts.bezier.values = opts.bezier.values.map(it => - Util.extractPosition(it) - ); + opts.bezier.values = opts.bezier.values.map(it => Util.extractPosition(it)); bezier = opts.bezier; } @@ -7891,16 +7524,9 @@ * @param {string} type - The type of the event, see https://developer.mozilla.org/de/docs/Web/Events * @param {object} opts - An options object. Every paramter of the event object can be overridden, see e.g. https://developer.mozilla.org/de/docs/Web/API/MouseEvent for all the properties. */ - static create( - target, - position = { x: 0, y: 0 }, - type = 'pointerup', - opts = {} - ) { + static create(target, position = { x: 0, y: 0 }, type = 'pointerup', opts = {}) { const rect = - typeof target.getBoundingClientRect === 'function' - ? target.getBoundingClientRect() - : { x: 0, y: 0 }; + typeof target.getBoundingClientRect === 'function' ? target.getBoundingClientRect() : { x: 0, y: 0 }; // EventInit const eventOpts = { @@ -7959,25 +7585,12 @@ if (type.startsWith('pointer')) { return new PointerEvent( type, - Object.assign( - {}, - eventOpts, - uiEventOpts, - mouseEventOpts, - pointerEventOpts, - opts - ) + Object.assign({}, eventOpts, uiEventOpts, mouseEventOpts, pointerEventOpts, opts) ) } else if (type.startsWith('touch')) { - return new TouchEvent( - type, - Object.assign({}, eventOpts, uiEventOpts, touchEventOpts, opts) - ) + return new TouchEvent(type, Object.assign({}, eventOpts, uiEventOpts, touchEventOpts, opts)) } else { - return new MouseEvent( - type, - Object.assign({}, eventOpts, uiEventOpts, mouseEventOpts, opts) - ) + return new MouseEvent(type, Object.assign({}, eventOpts, uiEventOpts, mouseEventOpts, opts)) } } } @@ -7995,8 +7608,7 @@ console.log('Setup Card...', modules); context.modules = []; modules.forEach(module => { - if (module.apply(context)) - context.modules.push(module.constructor.name); + if (module.apply(context)) context.modules.push(module.constructor.name); }); } @@ -8101,10 +7713,7 @@ event.stopPropagation(); if (callStack) callStack.call(that, ...args); else { - console.error( - 'Could not call callback function ' + attributeVal, - ...args - ); + console.error('Could not call callback function ' + attributeVal, ...args); } }); } @@ -8131,9 +7740,7 @@ /<\s*(a|video|img|image|circle)\s(.*?)(xlink:href|href|src)\s*=\s*["'](\..*?)["']\s*(.*?)>/g, function(data) { let path = that._getRelativePath(arguments[4]); - const tag = `<${arguments[1]} ${arguments[2]} ${ - arguments[3] - }="${path}" ${arguments[5]}>`; + const tag = `<${arguments[1]} ${arguments[2]} ${arguments[3]}="${path}" ${arguments[5]}>`; /* if (that.debug) */ console.log('Adjusted: ', tag); return tag } @@ -8290,16 +7897,13 @@ //Test if meanwhile another popup was registered... this._getPopup(context) || // Or if an highlight was loaded, if the highlight already was closed. - (highlight !== null && - !this._isHighlightActive(context, highlight)) + (highlight !== null && !this._isHighlightActive(context, highlight)) ) { //.. if so remove the create popup instantly. popup.remove(); } else { // Otherwise set the popup regularly. - let popupParagraphs = popup.element.querySelectorAll( - '.popupContent > *' - ); + let popupParagraphs = popup.element.querySelectorAll('.popupContent > *'); // Remove a design error of naming two adjacent elements popup. // Todo: fix this properly and remove this code. @@ -8350,8 +7954,7 @@ * @memberof Card */ static _createPopup(context, position, content, options = {}) { - if (this.debug) - console.log('Create Popup.', context, position, content, options); + if (this.debug) console.log('Create Popup.', context, position, content, options); let popup = new Popup( Object.assign( { @@ -8444,9 +8047,7 @@ node = event.target; } if (local == null) { - let globalClick = event.center - ? event.center - : { x: event.x, y: event.y }; + let globalClick = event.center ? event.center : { x: event.x, y: event.y }; local = Points.fromPageToNode(context, globalClick); } if (this.debug) console.log('loadPopup', event); @@ -8479,17 +8080,11 @@ // Extract the body from the Popup site. let parser = new DOMParser(); - let popupPage = parser.parseFromString( - xhr.responseText, - 'text/html' - ); + let popupPage = parser.parseFromString(xhr.responseText, 'text/html'); //Fix the relative path of loaded images in the popup. popupPage.querySelectorAll('img').forEach(node => { - node.setAttribute( - 'src', - that._getRelativePath(node.getAttribute('src')) - ); + node.setAttribute('src', that._getRelativePath(node.getAttribute('src'))); }); let html = popupPage.body.innerHTML; /** @@ -8511,18 +8106,10 @@ Card._cleanup(context); if (!isSame) { - Card._activateCorrespondingHighlights( - context, - node, - parentArticle - ); + Card._activateCorrespondingHighlights(context, node, parentArticle); let callback = (popup, callback) => { - if (this.debug) - console.log( - 'Close popup (Editable = ' + editable + ').', - popup - ); + if (this.debug) console.log('Close popup (Editable = ' + editable + ').', popup); if (editable) { let isDirty = mainController.askSaveNode(); if (isDirty) @@ -8558,8 +8145,7 @@ }; //console.log("onreadystatechange", editable) if (editable) { - if (this.debug) - console.log('pushController', src, popup.insertedNode); + if (this.debug) console.log('pushController', src, popup.insertedNode); mainController.pushController(popup.insertedNode, src); } }; @@ -8589,10 +8175,7 @@ } if (correspondingHighlights.length > 0) { for (let highlight of correspondingHighlights) { - if ( - highlight.parentNode && - highlight.parentNode.nodeName.toLowerCase() == 'g' - ) { + if (highlight.parentNode && highlight.parentNode.nodeName.toLowerCase() == 'g') { Highlight.openHighlight(highlight, { animation: Card.highlightAnimation }); @@ -8691,10 +8274,7 @@ let matrix = node.getCTM(); let point = svgPoint.matrixTransform(matrix); - let global = Points.fromNodeToPage( - node.closest('div'), - point - ); + let global = Points.fromNodeToPage(node.closest('div'), point); let local = Points.fromPageToNode(context, global); let overlay = document.createElement('div'); @@ -8740,16 +8320,12 @@ xhr.onreadystatechange = () => { if (xhr.readyState == 4) { if (xhr.status == 200 || xhr.status == 0) { - let html = this.postProcessResponseText( - xhr.responseText - ); + let html = this.postProcessResponseText(xhr.responseText); let selector = Card.popupHtmlSelector; let content = { html: html.body.innerHTML, selector }; resolve(content); } else { - reject( - ` Popup request failed (Code: ${xhr.status}): Could not load resource: ${src}` - ); + reject(` Popup request failed (Code: ${xhr.status}): Could not load resource: ${src}`); } } }; @@ -8764,8 +8340,7 @@ let editable = Card.isEditable(); if (editable) { - if (node.classList.contains('zoomable-icon')) - this._openZoomable(event); + if (node.classList.contains('zoomable-icon')) this._openZoomable(event); return } this._openZoomable(event); @@ -8814,10 +8389,7 @@ globalBottomRight = Points.fromNodeToPage(zoomable, globalBottomRight); let globalFigurePos = Points.fromNodeToPage(zoomable, { x: 0, y: 0 }); let localFigurePos = Points.fromPageToNode(wrapper, globalFigurePos); - let relativeBottomRight = Points.fromPageToNode( - zoomable, - globalBottomRight - ); + let relativeBottomRight = Points.fromPageToNode(zoomable, globalBottomRight); let width = relativeBottomRight.x + @@ -8931,12 +8503,8 @@ }); let zoomedFigStyle = window.getComputedStyle(zoomedFig); - let borderX = - parseFloat(zoomedFigStyle.borderLeftWidth) + - parseFloat(zoomedFigStyle.borderRightWidth); - let borderY = - parseFloat(zoomedFigStyle.borderBottomWidth) + - parseFloat(zoomedFigStyle.borderTopWidth); + let borderX = parseFloat(zoomedFigStyle.borderLeftWidth) + parseFloat(zoomedFigStyle.borderRightWidth); + let borderY = parseFloat(zoomedFigStyle.borderBottomWidth) + parseFloat(zoomedFigStyle.borderTopWidth); const scaleFactor = 2; const transformOrigin = 'bottom right'; @@ -8988,14 +8556,7 @@ .to(zoomCaption, this.animation.fade, { autoAlpha: 1 }); - } else - this._openZoomableEditorBehaviour( - wrapper, - img, - zoomable, - zoomedFig, - current - ); + } else this._openZoomableEditorBehaviour(wrapper, img, zoomable, zoomedFig, current); } /** @@ -9028,13 +8589,7 @@ return parent.querySelector('.icon') } - static _openZoomableEditorBehaviour( - wrapper, - img, - zoomable, - zoomedFig, - current - ) { + static _openZoomableEditorBehaviour(wrapper, img, zoomable, zoomedFig, current) { let zoomContainer = document.createElement('div'); let zoomIcon = zoomable.querySelector('.zoom-icon'); zoomContainer.style.position = 'relative'; @@ -9128,8 +8683,7 @@ * @memberof Card */ static closeZoomable(context, zoomable, zoomedFig) { - if (this.debug) - console.log('Close Zoomable', context, zoomable, zoomedFig); + if (this.debug) console.log('Close Zoomable', context, zoomable, zoomedFig); if (zoomable) { this._unsetZoomable(context); @@ -9180,13 +8734,7 @@ * @param {*} src - The src of the expanded element * @param {*} callback - A callback that is called when the expanded element is closed */ - static expandIndexCard( - card, - html, - tagName = 'article', - src = null, - callback = null - ) { + static expandIndexCard(card, html, tagName = 'article', src = null, callback = null) { let editable = Card.isEditable(); let context = this.getContext(card); @@ -9219,10 +8767,7 @@ let globalPreviewRect = Card._getGlobalRect(card); let globalIndexCardRect = Card._getGlobalRect(indexbox); - let localOrigin = Points.fromPageToNode( - indexbox, - Rect.getPosition(globalPreviewRect) - ); + let localOrigin = Points.fromPageToNode(indexbox, Rect.getPosition(globalPreviewRect)); let scaleX = globalPreviewRect.width / globalIndexCardRect.width; let scaleY = globalPreviewRect.height / globalIndexCardRect.height; @@ -9293,15 +8838,12 @@ let cardName = strparts[strparts.length - 1]; strparts = card.className.split(' '); let cardType = strparts[1]; - let msg = - 'Card: ' + cardID + ': openTopic: ' + cardType + ', ' + cardName; + let msg = 'Card: ' + cardID + ': openTopic: ' + cardType + ', ' + cardName; console.log('Logging:', msg); Logging.log(msg); } - let desiredBorderBottomWidth = parseInt( - window.getComputedStyle(titlebar).borderBottomWidth - ); + let desiredBorderBottomWidth = parseInt(window.getComputedStyle(titlebar).borderBottomWidth); TweenLite.to(clone, Card.animation.articleTransition, { x: -padding, y: -padding, @@ -9322,8 +8864,7 @@ }); // Retain the border at same visual thickness. - titlebar.style.borderBottomWidth = - desiredBorderBottomWidth / transform.scaleY + 'px'; + titlebar.style.borderBottomWidth = desiredBorderBottomWidth / transform.scaleY + 'px'; } }); @@ -9346,13 +8887,7 @@ let cardName = strparts[strparts.length - 1]; strparts = card.className.split(' '); let cardType = strparts[1]; - let msg = - 'Card: ' + - cardID + - ': closeTopic: ' + - cardType + - ', ' + - cardName; + let msg = 'Card: ' + cardID + ': closeTopic: ' + cardType + ', ' + cardName; console.log('Logging:', msg); Logging.log(msg); } @@ -9419,8 +8954,7 @@ }); // Retain the border at same visual thickness. - titlebar.style.borderBottomWidth = - desiredBorderBottomWidth / transform.scaleY + 'px'; + titlebar.style.borderBottomWidth = desiredBorderBottomWidth / transform.scaleY + 'px'; } }); }; @@ -9430,9 +8964,7 @@ if (iconClone == null) { iconClone = clone.querySelector('.cardicon'); - console.warn( - "Legacy selector. Change it to 'card-icon' and find a more suitable name." - ); + console.warn("Legacy selector. Change it to 'card-icon' and find a more suitable name."); } if (iconClone.tagName == 'img') { @@ -9440,11 +8972,7 @@ } //console.log("ICON: ", iconClone) iconClone.classList.remove('info'); - iconClone.classList.add( - 'close', - 'view-button', - 'transparent-background' - ); + iconClone.classList.add('close', 'view-button', 'transparent-background'); // We append the icon clone to the subcard-content. // Then it's always on the content and not on the background @@ -9541,13 +9069,7 @@ // card.insertAdjacentElement('afterbegin', article) // TweenLite.set(article, { autoAlpha: 0 }) - Card.expandIndexCard( - card, - parsedHTML, - 'article', - relativeSource, - saveCallback - ); + Card.expandIndexCard(card, parsedHTML, 'article', relativeSource, saveCallback); } }; xhr.onerror = () => { @@ -9584,9 +9106,7 @@ let dom = child.closest('.info-card'); if (!dom) { dom = child.querySelector('.wrapper'); - console.warn( - "Change the 'wrapper' class to 'info-card' it's more suitable." - ); + console.warn("Change the 'wrapper' class to 'info-card' it's more suitable."); } return dom // (dom == null) ? document.body : dom } @@ -9734,9 +9254,7 @@ if (indexbox != null) { // column != null || let links = Array.from(indexbox.getElementsByTagName('a')); - let globalClick = event.center - ? event.center - : { x: event.x, y: event.y }; + let globalClick = event.center ? event.center : { x: event.x, y: event.y }; let localClick = Points.fromPageToNode(indexbox, globalClick); let linkRects = links.map(link => { @@ -9771,16 +9289,9 @@ let closestLinkIndex = distances.indexOf(Math.min(...distances)); let closestLink = links[closestLinkIndex]; - console.log( - 'finding closest links', - closestLink, - closestLink.getClientRects() - ); + console.log('finding closest links', closestLink, closestLink.getClientRects()); - if ( - distances[closestLinkIndex] < 44 && - closestLink.getAttribute('href') - ) { + if (distances[closestLinkIndex] < 44 && closestLink.getAttribute('href')) { // Adapt context and local position let context = this.getContext(closestLink); let local = Points.fromPageToNode(context, globalClick); @@ -9941,10 +9452,7 @@ /* eslint-disable no-console */ class CardWrapper extends Object { - constructor( - domNode, - { triggerSVGClicks = true, allowClickDistance = 44 } = {} - ) { + constructor(domNode, { triggerSVGClicks = true, allowClickDistance = 44 } = {}) { super(); this.domNode = domNode; this.triggerSVGClicks = triggerSVGClicks; @@ -9993,7 +9501,7 @@ isClickable(node) { if (node == null) return false - // console.log("isClickable", node, this.isClickPrevented(node)) + // console.log("isClickable", node, this.isClickPrevented(node)) if (this.isClickPrevented(node)) { return false } @@ -10035,9 +9543,7 @@ nearestActive(event) { let element = this.domNode; let activeNodes = this.activeNodes(); - let globalClick = event.center - ? event.center - : { x: event.x, y: event.y }; + let globalClick = event.center ? event.center : { x: event.x, y: event.y }; let localClick = Points$1.fromPageToNode(element, globalClick); let clickRects = activeNodes.map(link => { @@ -10090,7 +9596,7 @@ } nodeTapped(node, event) { - console.log("nodeTapped", node, this.isClickable(node)); + console.log('nodeTapped', node, this.isClickable(node)); if (this.isClickable(node)) { this.simulateClick(node, event); return true @@ -10101,7 +9607,7 @@ return true } for (let [selector, handler] of this.tapHandler.entries()) { - console.log("nodeTapped", selector); + console.log('nodeTapped', selector); for (let obj of this.domNode.querySelectorAll(selector)) { if (node == obj) { handler(event, node); @@ -10113,10 +9619,9 @@ } tap(event, calledBy = 'unknown') { - if (event.isTrusted) { let node = this.nearestActive(event); - console.log("tap", node); + console.log('tap', node); this.nodeTapped(node, event); /* let node = document.elementFromPoint(event.clientX, event.clientY) @@ -10137,7 +9642,6 @@ } /* eslint-disable no-console */ - /* global TweenLite */ let _HighlightEnabled = true; let _CircleIds = 0; @@ -10199,10 +9703,7 @@ if (circle.classList.length == 0) { circle.removeAttribute('class'); } - if ( - circle.hasAttribute('id') && - circle.getAttribute('id').startsWith('@@') - ) { + if (circle.hasAttribute('id') && circle.getAttribute('id').startsWith('@@')) { circle.removeAttribute('id'); } circle.removeAttribute('data-svg-origin'); @@ -10217,10 +9718,7 @@ } } - static expand( - obj, - { scale = 2, duration = 3, stroke = 2, onComplete = null } = {} - ) { + static expand(obj, { scale = 2, duration = 3, stroke = 2, onComplete = null } = {}) { if (obj == null) return //console.log("expand") obj.classList.add('zooming'); @@ -10305,9 +9803,7 @@ this.shrink(maskImage, { stroke }); return } - let circles = Array.from(circleGroup.children).filter( - e => e.tagName == 'circle' - ); + let circles = Array.from(circleGroup.children).filter(e => e.tagName == 'circle'); for (let c of circles) { //console.log("shrinking all circles") this.shrink(c, { stroke }); @@ -10327,10 +9823,7 @@ return false } - static openHighlight( - target, - { animation = 0.5, scale = 2, onExpanded = null } = {} - ) { + static openHighlight(target, { animation = 0.5, scale = 2, onExpanded = null } = {}) { if (Highlight$1._isExpanded(target)) { console.log('Target is already expanded!'); return @@ -10344,10 +9837,7 @@ let image = parent.querySelector(imageId); if (image) { this._bringToFront(image); - } else - console.error( - 'Could not find corresponding image element.' - ); + } else console.error('Could not find corresponding image element.'); } else console.log('Element was no parent:', target); } this._bringToFront(target); @@ -10356,14 +9846,14 @@ return } let image = svgRoot.querySelector('image'); - + // eslint-disable-next-line no-unused-vars let [mask, maskImage] = Highlight$1._getSVGMask(target, { svgRoot, image }); let center = Highlight$1._calculateCenterRelativeTo(target, image); - console.log("_calculateCenterRelativeTo", center); + console.log('_calculateCenterRelativeTo', center); TweenLite.set(maskImage, { transformOrigin: `${center.x} ${center.y}` }); @@ -10379,7 +9869,7 @@ } static toggleHighlight(node) { - console.log("toggleHighlight", Highlight$1._isExpanded(node)); + console.log('toggleHighlight', Highlight$1._isExpanded(node)); if (Highlight$1._isExpanded(node)) { Highlight$1.closeHighlight(node); } else { @@ -10392,12 +9882,7 @@ if (target && parent) { parent.removeChild(target); parent.appendChild(target); - } else - console.error( - 'Could not bring to front. Either no target or no parent.', - target, - parent - ); + } else console.error('Could not bring to front. Either no target or no parent.', target, parent); } static _getSVGMask(circle, { svgRoot = null, image = null } = {}) { @@ -10432,10 +9917,7 @@ * @returns * @memberof Highlight */ - static _createSVGMask( - element, - { svgRoot = null, image = null, id = null } = {} - ) { + static _createSVGMask(element, { svgRoot = null, image = null, id = null } = {}) { // We can fetch these values here, but it's more efficient to // simply pass them in, as it's likely they were already retrieved beforehand. if (svgRoot == null) svgRoot = element.closest('svg'); @@ -10506,18 +9988,8 @@ return target.classList.contains(Highlight$1.expandedClass) } - static _setExpanded(target) { - target.classList.add(Highlight$1.expandedClass); - } - - static _notExpanded(target) { - target.classList.remove(Highlight$1.expandedClass); - } - static closeHighlight(target, { animation = 0.5 } = {}) { - - Highlight$1._notExpanded(target); - + target.classList.remove(Highlight$1.expandedClass); // eslint-disable-next-line no-unused-vars let [mask, maskImage] = Highlight$1._getSVGMask(target); console.log('Close Highlight', maskImage); @@ -10615,11 +10087,7 @@ * @returns * @memberof Card */ - static createCardScatter( - html, - scatterContainer, - { basePath = './', modules = [] } = {} - ) { + static createCardScatter(html, scatterContainer, { basePath = './', modules = [] } = {}) { let element = document.createElement('div'); scatterContainer.element.appendChild(element); @@ -10646,11 +10114,7 @@ * @returns * @memberof CardScatter */ - static loadAndCreateScatterCard( - scatterContainer, - item, - { basePath = '../', modules = [], onClose = null } = {} - ) { + static loadAndCreateScatterCard(scatterContainer, item, { basePath = '../', modules = [], onClose = null } = {}) { console.log(basePath); return new Promise((resolve, reject) => { let url = basePath + '/' + item + '/index.html'; @@ -10658,14 +10122,10 @@ this.loadHTML(url) .then(html => { console.log('Received', html); - let element = this.createCardScatter( - html, - scatterContainer, - { - basePath, - modules - } - ); + let element = this.createCardScatter(html, scatterContainer, { + basePath, + modules + }); if (onClose) this.addOnCloseListener(element, onClose); resolve(element); }) @@ -10740,10 +10200,7 @@ } _getVerificationFunctions(context) { - return [ - this._verifyContext.bind(this, context), - this._verifyRequirements.bind(this, context) - ] + return [this._verifyContext.bind(this, context), this._verifyRequirements.bind(this, context)] } _verifyContext(context) { @@ -10831,11 +10288,7 @@ constructor( wrapperSelector, overlaySelector = null, - { - zoomAnimationDuration = 0.4, - fadeAnimationDuration = 0.4, - interactionType = 'tap' - } = {} + { zoomAnimationDuration = 0.4, fadeAnimationDuration = 0.4, interactionType = 'tap' } = {} ) { super(); this.wrapperSelector = wrapperSelector; @@ -10852,14 +10305,7 @@ _getVerificationFunctions(context) { let arr = super._getVerificationFunctions(context); - let funcs = [ - this._verifyElementsExist.bind( - this, - context, - this.wrapperSelector, - this.overlaySelector - ) - ]; + let funcs = [this._verifyElementsExist.bind(this, context, this.wrapperSelector, this.overlaySelector)]; return arr.concat(funcs) } @@ -10944,9 +10390,7 @@ * The minor side should not exceed the height of the context window. */ const maxMinorSize = - context.offsetHeight - - 2 * parseInt(headerStlye.paddingTop) - - 2 * parseInt(headerStlye.marginTop); + context.offsetHeight - 2 * parseInt(headerStlye.paddingTop) - 2 * parseInt(headerStlye.marginTop); const max = { width: context.offsetWidth * maxFillRatio, @@ -10976,10 +10420,7 @@ // const minorImageSize = getImageSize(minorSide) let ratio = getImageSize(minorSide) / getImageSize(majorSide); - let size = - majorImageSize > max[majorSide.name] - ? max[majorSide.name] - : majorImageSize; + let size = majorImageSize > max[majorSide.name] ? max[majorSide.name] : majorImageSize; if (size * ratio > maxMinorSize) { size = maxMinorSize / ratio; @@ -10990,10 +10431,7 @@ height: 0 }; - let position = Points.fromPageToNode( - context, - Points.fromNodeToPage(source, { x: 0, y: 0 }) - ); + let position = Points.fromPageToNode(context, Points.fromNodeToPage(source, { x: 0, y: 0 })); let targetOffset = { x: 0, @@ -11004,13 +10442,9 @@ targetDimensions[minorSide.name] = size * ratio; targetOffset[majorSide.axis] = - (context['offset' + capitalize(majorSide.name)] - - targetDimensions[majorSide.name]) / - 2; + (context['offset' + capitalize(majorSide.name)] - targetDimensions[majorSide.name]) / 2; targetOffset[minorSide.axis] = - (context['offset' + capitalize(minorSide.name)] - - targetDimensions[minorSide.name]) / - 2; + (context['offset' + capitalize(minorSide.name)] - targetDimensions[minorSide.name]) / 2; overlay.appendChild(imageWrapper); @@ -11050,18 +10484,14 @@ } getBorderHeight(style) { - const borderWidth = - parseInt(style.borderTopWidth) + parseInt(style.borderBottomWidth); - const padding = - parseInt(style.paddingTop) + parseInt(style.paddingBottom); + const borderWidth = parseInt(style.borderTopWidth) + parseInt(style.borderBottomWidth); + const padding = parseInt(style.paddingTop) + parseInt(style.paddingBottom); return parseInt(style.width) + borderWidth + padding } getBorderWidth(style) { - const borderWidth = - parseInt(style.borderLeftWidth) + parseInt(style.borderRightWidth); - const padding = - parseInt(style.paddingLeft) + parseInt(style.paddingRight); + const borderWidth = parseInt(style.borderLeftWidth) + parseInt(style.borderRightWidth); + const padding = parseInt(style.paddingLeft) + parseInt(style.paddingRight); return parseInt(style.width) + borderWidth + padding } @@ -11096,16 +10526,12 @@ _doesParentExist(context, parent) { if (parent == null) return true let valid = context.querySelector(parent) != null; - if (!valid) - console.error('Could not find parent on context.', context, parent); + if (!valid) console.error('Could not find parent on context.', context, parent); return valid } append(context) { - parent = - this.parent == null - ? context - : context.querySelector(this.parent).appendChild(container); + parent = this.parent == null ? context : context.querySelector(this.parent).appendChild(container); let container = document.createElement('div'); container.className = this.className; parent.appendChild(container); @@ -11205,15 +10631,8 @@ utterance.onboundary = () => { console.log('onboundary', node.innerText); - if ( - this.currentText.substring(0, 5) != - node.innerText.substring(0, 5) - ) { - console.log( - 'text for speech synth changed!', - this.currentText, - node.innerText - ); + if (this.currentText.substring(0, 5) != node.innerText.substring(0, 5)) { + console.log('text for speech synth changed!', this.currentText, node.innerText); this._stop(); } }; diff --git a/dist/iwmlib.pixi.js b/dist/iwmlib.pixi.js index 96f3428..5a7432c 100644 --- a/dist/iwmlib.pixi.js +++ b/dist/iwmlib.pixi.js @@ -83,8 +83,7 @@ * is used for large actived text. */ constructor(opts = {}) { - const colorPrimary = - opts.primaryColor != null ? opts.primaryColor : 0x5ec7f8; // blue + const colorPrimary = opts.primaryColor != null ? opts.primaryColor : 0x5ec7f8; // blue const color1 = opts.color1 != null ? opts.color1 : 0x282828; // black const color2 = opts.color2 != null ? opts.color2 : 0xf6f6f6; // white @@ -418,10 +417,7 @@ //----------------- if (this.opts.background) { this.background.clear(); - this.background.beginFill( - this.opts.backgroundFill, - this.opts.backgroundFillAlpha - ); + this.background.beginFill(this.opts.backgroundFill, this.opts.backgroundFillAlpha); this.background.drawRect(0, 0, width, height); this.background.endFill(); } @@ -465,20 +461,10 @@ const wantedWidth = this.opts.width || width - 2 * this.opts.margin; const wantedHeight = this.opts.height; - this.bar.lineStyle( - this.opts.strokeWidth, - this.opts.stroke, - this.opts.strokeAlpha - ); + this.bar.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha); this.bar.beginFill(this.opts.fill, this.opts.fillAlpha); if (this.radius > 1) { - this.bar.drawRoundedRect( - 0, - 0, - wantedWidth, - wantedHeight, - this.radius - ); + this.bar.drawRoundedRect(0, 0, wantedWidth, wantedHeight, this.radius); } else { this.bar.drawRect(0, 0, wantedWidth, wantedHeight); } @@ -502,24 +488,11 @@ const barActiveWidth = (wantedWidth * this._progress) / 100; - this.barActive.lineStyle( - this.opts.strokeActiveWidth, - this.opts.strokeActive, - this.opts.strokeActiveAlpha - ); - this.barActive.beginFill( - this.opts.fillActive, - this.opts.fillActiveAlpha - ); + this.barActive.lineStyle(this.opts.strokeActiveWidth, this.opts.strokeActive, this.opts.strokeActiveAlpha); + this.barActive.beginFill(this.opts.fillActive, this.opts.fillActiveAlpha); if (barActiveWidth > 0) { if (this.radius > 1) { - this.barActive.drawRoundedRect( - 0, - 0, - barActiveWidth, - wantedHeight, - this.radius - ); + this.barActive.drawRoundedRect(0, 0, barActiveWidth, wantedHeight, this.radius); } else { this.barActive.drawRect(0, 0, barActiveWidth, wantedHeight); } @@ -674,12 +647,10 @@ if (this.opts.maxWidth) { this.headerStyle.wordWrap = true; - this.headerStyle.wordWrapWidth = - this.opts.maxWidth - 2 * this.opts.padding; + this.headerStyle.wordWrapWidth = this.opts.maxWidth - 2 * this.opts.padding; this.textStyle.wordWrap = true; - this.textStyle.wordWrapWidth = - this.opts.maxWidth - 2 * this.opts.padding; + this.textStyle.wordWrapWidth = this.opts.maxWidth - 2 * this.opts.padding; } this.alpha = 0; @@ -722,10 +693,7 @@ if (this.opts.header instanceof PIXI.Text) { header = this.opts.header; } else if (typeof this.opts.header === 'number') { - header = new PIXI.Text( - this.opts.header.toString(), - this.headerStyle - ); + header = new PIXI.Text(this.opts.header.toString(), this.headerStyle); } else { header = new PIXI.Text(this.opts.header, this.headerStyle); } @@ -752,10 +720,7 @@ if (typeof this.opts.content === 'string') { content = new PIXI.Text(this.opts.content, this.textStyle); } else if (typeof this.opts.content === 'number') { - content = new PIXI.Text( - this.opts.content.toString(), - this.textStyle - ); + content = new PIXI.Text(this.opts.content.toString(), this.textStyle); } else { content = this.opts.content; } @@ -826,31 +791,16 @@ * @return {AbstractPopup} A reference to the popup for chaining. */ draw() { - const square = - Math.round(this.wantedWidth) === Math.round(this.wantedHeight); + const square = Math.round(this.wantedWidth) === Math.round(this.wantedHeight); const diameter = Math.round(this.opts.radius * 2); this.clear(); - this.lineStyle( - this.opts.strokeWidth, - this.opts.stroke, - this.opts.strokeAlpha - ); + this.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha); this.beginFill(this.opts.fill, this.opts.fillAlpha); if (square && diameter === this.wantedWidth) { - this.drawCircle( - this.wantedWidth / 2, - this.wantedHeight / 2, - this.opts.radius - ); + this.drawCircle(this.wantedWidth / 2, this.wantedHeight / 2, this.opts.radius); } else { - this.drawRoundedRect( - 0, - 0, - this.wantedWidth, - this.wantedHeight, - this.opts.radius - ); + this.drawRoundedRect(0, 0, this.wantedWidth, this.wantedHeight, this.opts.radius); } this.endFill(); @@ -1201,11 +1151,7 @@ content: this.opts.tooltip }); } else { - this.opts.tooltip = Object.assign( - {}, - { object: this }, - this.opts.tooltip - ); + this.opts.tooltip = Object.assign({}, { object: this }, this.opts.tooltip); this.tooltip = new Tooltip(this.opts.tooltip); } } @@ -1222,12 +1168,8 @@ layout() { super.layout(); - this.content.x = - this.width / 2 - this.content.width / 2 - this.opts.strokeWidth / 2; - this.content.y = - this.height / 2 - - this.content.height / 2 - - this.opts.strokeWidth / 2; + this.content.x = this.width / 2 - this.content.width / 2 - this.opts.strokeWidth / 2; + this.content.y = this.height / 2 - this.content.height / 2 - this.opts.strokeWidth / 2; return this } @@ -1273,8 +1215,7 @@ // be this is a bug or a security feature. Workaround: we introduce // a mouseDownSubstitute attribute that can be assigned to cloned // events after instantiation. - if (Reflect.has(event, 'mouseDownSubstitute')) - return event.mouseDownSubstitute + if (Reflect.has(event, 'mouseDownSubstitute')) return event.mouseDownSubstitute return event.buttons || event.which } @@ -1309,15 +1250,7 @@ for (let i = 0; i < targets.length; i++) { let t = targets[i]; let touchTarget = document.elementFromPoint(t.pageX, t.pageY); - let touch = new Touch( - undefined, - touchTarget, - t.identifier, - t.pageX, - t.pageY, - t.screenX, - t.screenY - ); + let touch = new Touch(undefined, touchTarget, t.identifier, t.pageX, t.pageY, t.screenX, t.screenY); touches.push(touch); } return new TouchList(...touches) @@ -1401,8 +1334,7 @@ let result = event.type; let selector = this.selector(event.target); result += ' selector: ' + selector; - if (event.target != document.querySelector(selector)) - console.log('Cannot resolve', selector); + if (event.target != document.querySelector(selector)) console.log('Cannot resolve', selector); let keys = ['layerX', 'layerY', 'pageX', 'pageY', 'clientX', 'clientY']; for (let key of keys) { try { @@ -1490,1671 +1422,7 @@ Events$1.simulated = []; Events$1.simulationRunning = false; - /* global PIXI TweenLite */ - - /** - * Callback for the button action. - * - * @callback actionCallback - * @param {object} event - The event object. - * @param {Button} button - A reference to the button (also this refers to the button). - */ - - /** - * Callback for the button beforeAction. - * - * @callback beforeActionCallback - * @param {object} event - The event object. - * @param {Button} button - A reference to the button (also this refers to the button). - */ - - /** - * Callback for the button afterAction. - * - * @callback afterActionCallback - * @param {object} event - The event object. - * @param {Button} button - A reference to the button (also this refers to the button). - */ - - /** - * Class that represents a PixiJS Button. - * - * @example - * // Create the button - * const button = new Button({ - * label: 'My Button', - * action: () => console.log('Button was clicked') - * }) - * - * // Add the button to a DisplayObject - * app.scene.addChild(button) - * - * @class - * @extends PIXI.Container - * @see {@link http://pixijs.download/dev/docs/PIXI.Container.html|PIXI.Container} - * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/button.html|DocTest} - */ - class Button extends PIXI.Container { - /** - * Creates an instance of a Button. - * - * @constructor - * @param {object} [opts] - An options object to specify to style and behaviour of the button. - * @param {number} [opts.id=auto generated] - The id of the button. - * @param {string} [opts.label] - The label of the button. - * @param {number} [opts.x=0] - The x position of the button. Can be also set after creation with button.x = 0. - * @param {number} [opts.y=0] - The y position of the button. Can be also set after creation with button.y = 0. - * @param {string|Theme} [opts.theme=dark] - The theme to use for this button. Possible values are dark, light, red - * or a Theme object. - * @param {number} [opts.minWidth=44] - The minimum width of the button. - * @param {number} [opts.minHeight=44] - The minimum height of the button. - * @param {number} [opts.padding=Theme.padding] - The inner spacing (distance from icon and/or label) to the border. - * @param {string|PIXI.DisplayObject} [opts.icon] - The icon of the button. Can be a predefined one, an URL or an PIXI.DisplayObject. - * @param {string|PIXI.DisplayObject} [opts.iconActive=icon] - The icon of the button when activated. Can be a predefined one, an URL or an PIXI.DisplayObject. - * @param {string} [opts.iconPosition=left] - The position of the icon in relation to the label. Can be left or right. - * @param {number} [opts.iconColor=Theme.iconColor] - The color of the icon (set by the tint property) as a hex value. - * @param {number} [opts.iconColorActive=Theme.iconColorActive] - The color of the icon when activated. - * @param {number} [opts.fill=Theme.fill] - The color of the button background as a hex value. - * @param {number} [opts.fillAlpha=Theme.fillAlpha] - The alpha value of the background. - * @param {number} [opts.fillActive=Theme.fillActive] - The color of the button background when activated. - * @param {number} [opts.fillActiveAlpha=Theme.fillActiveAlpha] - The alpha value of the background when activated. - * @param {number} [opts.stroke=Theme.stroke] - The color of the border as a hex value. - * @param {number} [opts.strokeWidth=Theme.strokeWidth] - The width of the border in pixel. - * @param {number} [opts.strokeAlpha=Theme.strokeAlpha] - The alpha value of the border. - * @param {number} [opts.strokeActive=Theme.strokeActive] - The color of the border when activated. - * @param {number} [opts.strokeActiveWidth=Theme.strokeActiveWidth] - The width of the border in pixel when activated. - * @param {number} [opts.strokeActiveAlpha=Theme.strokeActiveAlpha] - The alpha value of the border when activated. - * @param {object} [opts.textStyle=Theme.textStyle] - A textstyle object for the styling of the label. See PIXI.TextStyle - * for possible options. - * @param {number} [opts.textStyleActive=Theme.textStyleActive] - A textstyle object for the styling of the label when the - * button is activated. See PIXI.TextStyle for possible options. - * @param {string} [opts.style=default] - A shortcut for styling options. Possible values are default, link. - * @param {number} [opts.radius=Theme.radius] - The radius of the four corners of the button (which is a rounded rectangle). - * @param {boolean} [opts.disabled=false] - Is the button disabled? When disabled, the button has a lower alpha value - * and cannot be clicked (interactive is set to false). - * @param {boolean} [opts.active=false] - Is the button initially active? - * @param {actionCallback} [opts.action] - Executed when the button was triggered (by pointerup). - * @param {beforeActionCallback} [opts.beforeAction] - Executed before the main action is triggered. - * @param {afterActionCallback} [opts.afterAction] - Executed after the main action was triggered. - * @param {string} [opts.type=default] - The type of the button. Can be default or checkbox. When the type is - * checkbox, the active state is toggled automatically. - * @param {string} [opts.align=center] - The horizontal position of the label and the icon. Possible values are - * left, center and right. Only affects the style when the minWidth is bigger than the width of the icon and label. - * @param {string} [opts.verticalAlign=middle] - The vertical position of the label and the icon. Possible values are - * top, middle and button. Only affects the style when the minHeight is bigger than the height of the icon and label. - * @param {string|object} [opts.tooltip] - A string for the label of the tooltip or an object to configure the tooltip - * to display. - * @param {string|object} [opts.badge] - A string for the label of the badge or an object to configure the badge to display. - * If the parameter is an object, all badge options can be set plus the following: - * @param {string} [opts.badge.align=right] - The horizontal alignment of the badge. Possible values: left, center, right - * @param {string} [opts.badge.verticalAlign=top] - The vertical alignment of the badge. Possible values: top, middle, bottom - * @param {number} [opts.badge.offsetLeft=0] - The horizontal shift of the badge. - * @param {number} [opts.badge.offsetTop=0] - The vertical shift of the badge. - * @param {boolean} [opts.visible=true] - Is the button initially visible (property visible)? - */ - constructor(opts = {}) { - super(); - - const theme = Theme.fromString(opts.theme); - this.theme = theme; - - this.opts = Object.assign( - {}, - { - id: PIXI.utils.uid(), - label: null, - x: 0, - y: 0, - minWidth: 44, - minHeight: 44, - padding: theme.padding, - icon: undefined, - iconActive: undefined, - iconPosition: 'left', - iconColor: theme.iconColor, - iconColorActive: theme.iconColorActive, - fill: theme.fill, - fillAlpha: theme.fillAlpha, - fillActive: theme.fillActive, - fillActiveAlpha: theme.fillActiveAlpha, - stroke: theme.stroke, - strokeWidth: theme.strokeWidth, - strokeAlpha: theme.strokeAlpha, - strokeActive: theme.strokeActive, - strokeActiveWidth: theme.strokeActiveWidth, - strokeActiveAlpha: theme.strokeActiveAlpha, - textStyle: theme.textStyle, - textStyleActive: theme.textStyleActive, - style: 'default', - radius: theme.radius, - disabled: false, - active: false, - action: null, - beforeAction: null, - afterAction: null, - type: 'default', - align: 'center', - verticalAlign: 'middle', - tooltip: null, - badge: null, - visible: true - }, - opts - ); - - this.id = this.opts.id; - - if ( - typeof this.opts.icon === 'undefined' && - typeof this.opts.iconActive !== 'undefined' - ) { - this.opts.icon = this.opts.iconActive; - } else if ( - typeof this.opts.icon !== 'undefined' && - typeof this.opts.iconActive === 'undefined' - ) { - this.opts.iconActive = this.opts.icon; - } - - if (this.opts.style === 'link') { - Object.assign(this.opts, { - strokeAlpha: 0, - strokeActiveAlpha: 0, - fillAlpha: 0, - fillActiveAlpha: 0 - }); - } - - this._active = null; - this._disabled = null; - - this.iconInactive = null; - this.iconActive = null; - this.text = null; - - this.button = null; - this.content = null; - - this.tooltip = null; - this.badge = null; - - this.visible = this.opts.visible; - - // setup - //----------------- - this.setup(); - } - - /** - * Captures an event to inform InteractionMapper about processed events. - * - * @param {event|PIXI.InteractionEvent} event - The PIXI event to capture. - */ - capture(event) { - Events$1.capturedBy(event.data.originalEvent, this); - } - - /** - * Creates children and instantiates everything. - * - * @private - * @return {Button} A reference to the button for chaining. - */ - setup() { - // Button - //----------------- - let button = new PIXI.Graphics(); - this.button = button; - this.addChild(button); - - // Content - //----------------- - let content = new PIXI.Container(); - this.content = content; - this.addChild(content); - - // Text - //----------------- - if (this.opts.label) { - this.text = new PIXI.Text(this.opts.label, this.opts.textStyle); - } - - // Icon - //----------------- - if (this.opts.icon) { - this.iconInactive = this.loadIcon( - this.opts.icon, - this.opts.iconColor - ); - } - - if (this.opts.iconActive) { - this.iconActive = this.loadIcon( - this.opts.iconActive, - this.opts.iconColorActive - ); - } - - // interaction - //----------------- - this.button.on('pointerover', e => { - this.capture(e); - TweenLite.to([this.button, this.content], this.theme.fast, { - alpha: 0.83, - overwrite: 'none' - }); - }); - - this.button.on('pointermove', e => { - this.capture(e); - }); - - this.button.on('pointerout', e => { - this.capture(e); - TweenLite.to([this.button, this.content], this.theme.fast, { - alpha: 1, - overwrite: 'none' - }); - }); - - // eslint-disable-next-line no-unused-vars - this.button.on('pointerdown', e => { - //this.capture(e) - TweenLite.to([this.button, this.content], this.theme.fast, { - alpha: 0.7, - overwrite: 'none' - }); - }); - - this.button.on('pointerup', e => { - this.capture(e); - if (this.opts.beforeAction) { - this.opts.beforeAction.call(this, e, this); - } - - if (this.opts.action) { - this.opts.action.call(this, e, this); - } - - TweenLite.to([this.button, this.content], this.theme.fast, { - alpha: 0.83, - overwrite: 'none' - }); - - if (this.opts.type === 'checkbox') { - this.active = !this.active; - } - - if (this.opts.afterAction) { - this.opts.afterAction.call(this, e, this); - } - }); - - // disabled - //----------------- - this.disabled = this.opts.disabled; - - // active - //----------------- - this.active = this.opts.active; // calls .layout() - - // tooltip - //----------------- - if (this.opts.tooltip) { - if (typeof this.opts.tooltip === 'string') { - this.tooltip = new Tooltip({ - object: this, - content: this.opts.tooltip - }); - } else { - this.opts.tooltip = Object.assign( - {}, - { object: this }, - this.opts.tooltip - ); - this.tooltip = new Tooltip(this.opts.tooltip); - } - } - - // badge - //----------------- - if (this.opts.badge) { - let opts = Object.assign( - {}, - { - align: 'right', - verticalAlign: 'top', - offsetLeft: 0, - offsetTop: 0 - } - ); - if (typeof this.opts.badge === 'string') { - opts = Object.assign(opts, { content: this.opts.badge }); - } else { - opts = Object.assign(opts, this.opts.badge); - } - - const badge = new Badge(opts); - - switch (opts.align) { - case 'left': - badge.x = this.x - badge.width / 2 + opts.offsetLeft; - break - case 'center': - badge.x = - this.x + - this.width / 2 - - badge.width / 2 + - opts.offsetLeft; - break - case 'right': - badge.x = - this.x + this.width - badge.width / 2 + opts.offsetLeft; - } - - switch (opts.verticalAlign) { - case 'top': - badge.y = this.y - badge.height / 2 + opts.offsetTop; - break - case 'middle': - badge.y = - this.y + - this.height / 2 - - badge.height / 2 + - opts.offsetTop; - break - case 'bottom': - badge.y = - this.y + this.height - badge.height / 2 + opts.offsetTop; - } - - this.addChild(badge); - - this.badge = badge; - } - - // set position - //----------------- - this.position.set(this.opts.x, this.opts.y); - - return this - } - - /** - * Should be called to refresh the layout of the button. Can be used after resizing. - * - * @return {Button} A reference to the button for chaining. - */ - layout() { - // Clear content - //----------------- - this.removeChild(this.content); - this.content = new PIXI.Container(); - this.addChild(this.content); - - // Set the icon - //----------------- - let icon = null; - - if (!this.active && this.iconInactive) { - icon = this.iconInactive; - } else if (this.active && this.iconActive) { - icon = this.iconActive; - } - - // Set the text - //----------------- - if (this.text) { - this.text.position.set(0, 0); - } - - // Width and Height - //----------------- - let width = 0; - if (icon && this.text) { - width = icon.width + this.text.width + 3 * this.opts.padding; - } else if (icon) { - width = icon.width + 2 * this.opts.padding; - } else if (this.text) { - width = this.text.width + 2 * this.opts.padding; - } - - if (width < this.opts.minWidth) { - width = this.opts.minWidth; - } - - let height = 0; - if (icon) { - height = icon.height + 2 * this.opts.padding; - } else if (this.text) { - height = this.text.height + 2 * this.opts.padding; - } - - if (height < this.opts.minHeight) { - height = this.opts.minHeight; - } - - this._width = width; - this._height = height; - - // Position icon and text - //----------------- - if (icon && this.text) { - if (this.opts.iconPosition === 'right') { - icon.x = this.text.width + this.opts.padding; - } else { - this.text.x = icon.width + this.opts.padding; - } - this.content.addChild(icon, this.text); - } else if (icon) { - this.content.addChild(icon); - } else if (this.text) { - this.content.addChild(this.text); - } - - this.layoutInnerContent(); - this.layoutContent(); - - this.icon = icon; - - // draw - //----------------- - this.draw(); - - return this - } - - /** - * Calculates the positions of the content children (icon and/or text). - * - * @private - * @return {Button} A reference to the button for chaining. - */ - layoutInnerContent() { - for (let child of this.content.children) { - switch (this.opts.verticalAlign) { - case 'top': - child.y = 0; - break - case 'middle': - child.y = this.content.height / 2 - child.height / 2; - break - case 'bottom': - child.y = this.content.height - child.height; - break - } - } - - return this - } - - /** - * Sets the horizontal and vertical position of the content. - * Uses the option keys "align" and "verticalAlign". - * - * @private - * @return {Button} A reference to the button for chaining. - */ - layoutContent() { - switch (this.opts.align) { - case 'left': - this.content.x = this.opts.padding; - break - case 'center': - this.content.x = (this._width - this.content.width) / 2; - break - case 'right': - this.content.x = - this._width - this.opts.padding - this.content.width; - break - } - - switch (this.opts.verticalAlign) { - case 'top': - this.content.y = this.opts.padding; - break - case 'middle': - this.content.y = (this._height - this.content.height) / 2; - break - case 'bottom': - this.content.y = - this._height - this.opts.padding - this.content.height; - break - } - - return this - } - - /** - * Draws the canvas. - * - * @private - * @return {Button} A reference to the button for chaining. - */ - draw() { - this.button.clear(); - if (this.active) { - this.button.lineStyle( - this.opts.strokeActiveWidth, - this.opts.strokeActive, - this.opts.strokeActiveAlpha - ); - this.button.beginFill( - this.opts.fillActive, - this.opts.fillActiveAlpha - ); - } else { - this.button.lineStyle( - this.opts.strokeWidth, - this.opts.stroke, - this.opts.strokeAlpha - ); - this.button.beginFill(this.opts.fill, this.opts.fillAlpha); - } - this.button.drawRoundedRect( - 0, - 0, - this._width, - this._height, - this.opts.radius - ); - this.button.endFill(); - - return this - } - - /** - * Gets or sets the active state. - * - * @member {boolean} - */ - get active() { - return this._active - } - set active(value) { - this._active = value; - - if (this._active) { - if (this.text) { - this.text.style = this.opts.textStyleActive; - } - } else { - if (this.text) { - this.text.style = this.opts.textStyle; - } - } - - this.layout(); - } - - /** - * Gets or sets the disabled state. When disabled, the button cannot be clicked. - * - * @member {boolean} - */ - get disabled() { - return this._disabled - } - set disabled(value) { - this._disabled = value; - - if (this._disabled) { - this.button.interactive = false; - this.button.buttonMode = false; - this.button.alpha = 0.5; - if (this.icon) { - this.icon.alpha = 0.5; - } - if (this.text) { - this.text.alpha = 0.5; - } - } else { - this.button.interactive = true; - this.button.buttonMode = true; - this.button.alpha = 1; - if (this.icon) { - this.icon.alpha = 1; - } - if (this.text) { - this.text.alpha = 1; - } - } - } - - /** - * Shows the button (sets his alpha values to 1). - * - * @return {Button} A reference to the button for chaining. - */ - show() { - this.opts.strokeAlpha = 1; - this.opts.strokeActiveAlpha = 1; - this.opts.fillAlpha = 1; - this.opts.fillActiveAlpha = 1; - - this.layout(); - - return this - } - - /** - * Hides the button (sets his alpha values to 0). - * - * @return {Button} A reference to the button for chaining. - */ - hide() { - this.opts.strokeAlpha = 0; - this.opts.strokeActiveAlpha = 0; - this.opts.fillAlpha = 0; - this.opts.fillActiveAlpha = 0; - - this.layout(); - - return this - } - - /** - * Loads an icon - * - * @private - * @param {string|PIXI.DisplayObject} icon - The icon to load. - * @param {number} color - The color of the icon (if not an PIXI.DisplayObject). - * @return {PIXI.DisplayObject} Return the icon as an PIXI.DisplayObject. - */ - loadIcon(icon, color) { - let displayObject = null; - - if (icon instanceof PIXI.DisplayObject) { - displayObject = icon; - } else { - let size = 17; - if (this.text) { - size = this.text.height; - } else if (this.opts.minHeight) { - size = this.opts.minHeight - 2 * this.opts.padding; - } - - const url = Button.iconIsUrl(icon) - ? icon - : `../../assets/icons/${icon}.png`; - const iconTexture = PIXI.Texture.fromImage(url, true); - - const sprite = new PIXI.Sprite(iconTexture); - sprite.tint = color; - sprite.width = size; - sprite.height = size; - - displayObject = sprite; - } - - return displayObject - } - - /** - * Tests if an icon string is an url. - * - * @private - * @static - * @param {string} url - The url to test. - * @return {boolean} true if the url is an url to an image. - */ - static iconIsUrl(url) { - return /\.(png|svg|gif|jpg|jpeg|tif|tiff)$/i.test(url) - } - - /** - * Gets or sets the color of the current icon (no matter how the status is). Changing the color, changes - * the tint property of the icon sprite. - * - * @member {number} - */ - get iconColor() { - return this.icon ? this.icon.tint : null - } - set iconColor(value) { - if (this.icon) { - this.icon.tint = value; - } - } - } - - /** - * Class that represents a PixiJS ButtonGroup. - * - * @example - * // Create the button group - * const buttonGroup = new ButtonGroup({ - * buttons: [ - * {label: 'Button 1', action: event => console.log(event)}, - * {label: 'Button 2', action: event => console.log(event)}, - * {label: 'Button 3', action: event => console.log(event)} - * ], - * minWidth: 100 - * }) - * - * // Add the button group to a DisplayObject - * app.scene.addChild(buttonGroup) - * - * @class - * @extends PIXI.Graphics - * @see {@link http://pixijs.download/dev/docs/PIXI.Graphics.html|PIXI.Graphics} - * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/buttongroup.html|DocTest} - */ - class ButtonGroup extends PIXI.Graphics { - /** - * Creates an instance of a ButtonGroup. - * - * @constructor - * @param {object} [opts] - An options object to specify to style and behaviour of the button group. - * @param {number} [opts.id=auto generated] - The id of the button group. - * @param {number} [opts.x=0] - The x position of the button group. Can be also set after creation with buttonGroup.x = 0. - * @param {number} [opts.y=0] - The y position of the button group. Can be also set after creation with buttonGroup.y = 0. - * @param {object[]} [opts.buttons=[]] - An array of the buttons of the button group. One item of the array (one object) - * can have exactly the same properties as an Button object when instantiating a Button. If a property of the button group - * conflicts with a property of a button object, the value from the button object will be used. - * @param {string|Theme=} [opts.theme=dark] - The theme to use for this button group. Possible values are dark, light, red - * or a Theme object. - * @param {number} [opts.minWidth=44] - Button: The minimum width of one button. - * @param {number} [opts.minHeight=44] - Button: The minimum height of one button. - * @param {number} [opts.padding=Theme.padding] - Button: The inner spacing (distance from icon and/or label) the the border. - * @param {number} [opts.margin=Theme.margin] - The outer spacing (distance from one button to the previous/next button). - * @param {string} [opts.iconPosition=left] - Button: The position of the icon in relation to the label. Can be left or right. - * @param {number} [opts.iconColor=Theme.iconColor] - Button: The color of the icon (set by the tint property) as a hex value. - * @param {number} [opts.iconColorActive=Theme.iconColorActive] - Button: The color of the icon when activated. - * @param {number} [opts.fill=Theme.fill] - Button: The color of the button background as a hex value. - * @param {number} [opts.fillAlpha=Theme.fillAlpha] - Button: The alpha value of the background. - * @param {number} [opts.fillActive=Theme.fillActive] - Button: The color of the button background when activated. - * @param {number} [opts.fillActiveAlpha=Theme.fillActiveAlpha] - Button: The alpha value of the background when activated. - * @param {number} [opts.stroke=Theme.stroke] - Button: The color of the border as a hex value. - * @param {number} [opts.strokeWidth=Theme.strokeWidth] - Button: The width of the border in pixel. - * @param {number} [opts.strokeAlpha=Theme.strokeAlpha] - Button: The alpha value of the border. - * @param {number} [opts.strokeActive=Theme.strokeActive] - Button: The color of the border when activated. - * @param {number} [opts.strokeActiveWidth=Theme.strokeActiveWidth] - Button: The width of the border in pixel when activated. - * @param {number} [opts.strokeActiveAlpha=Theme.strokeActiveAlpha] - Button: The alpha value of the border when activated. - * @param {object} [opts.textStyle=Theme.textStyle] - Button: A textstyle object for the styling of the label. See PIXI.TextStyle - * for possible options. - * @param {number} [opts.textStyleActive=Theme.textStyleActive] - Button: A textstyle object for the styling of the label when the - * button is activated. See PIXI.TextStyle for possible options. - * @param {string} [opts.style=default] - A shortcut for styling options. Possible values are default, link. - * @param {number} [opts.radius=Theme.radius] - Button: The radius of the four corners of the button (which is a rounded rectangle). - * @param {boolean} [opts.disabled=false] - Is the button group disabled? When disabled, the button group has a lower alpha value - * and cannot be clicked (interactive of every button is set to false). - * @param {string} [opts.type=default] - The type of the button group. Can be default, checkbox or radio. When the type is - * checkbox, the active state is toggled for each button automatically. When the type is radio, only one button can - * be activated at the same time. - * @param {string} [opts.orientation=horizontal] - The orientation of the button group. Can be horizontal or vertical. - * @param {string} [opts.align=center] - Button: The horizontal position of the label and the icon. Possible values are - * left, center and right. Only affects the style when the minWidth is bigger than the width of the icon and label. - * @param {string} [opts.verticalAlign=middle] - Button: The vertical position of the label and the icon. Possible values are - * top, middle and bottom. Only affects the style when the minHeight is bigger than the height of the icon and label. - * @param {boolean} [opts.visible=true] - Is the button group initially visible (property visible)? - */ - constructor(opts = {}) { - super(); - - const theme = Theme.fromString(opts.theme); - this.theme = theme; - - this.opts = Object.assign( - {}, - { - id: PIXI.utils.uid(), - x: 0, - y: 0, - buttons: [], - minWidth: 44, - minHeight: 44, - padding: theme.padding, - margin: theme.margin, - iconPosition: 'left', // left, right - iconColor: theme.iconColor, - iconColorActive: theme.iconColorActive, - fill: theme.fill, - fillAlpha: theme.fillAlpha, - fillActive: theme.fillActive, - fillActiveAlpha: theme.fillActiveAlpha, - stroke: theme.stroke, - strokeWidth: theme.strokeWidth, - strokeAlpha: theme.strokeAlpha, - strokeActive: theme.strokeActive, - strokeActiveWidth: theme.strokeActiveWidth, - strokeActiveAlpha: theme.strokeActiveAlpha, - textStyle: theme.textStyle, - textStyleActive: theme.textStyleActive, - style: 'default', - radius: theme.radius, - disabled: null, - type: 'default', // default, checkbox, radio - orientation: 'horizontal', - align: 'center', // left, center, right - verticalAlign: 'middle', // top, middle, bottom - visible: true - }, - opts - ); - - this.buttons = []; - - this._disabled = null; - - this.visible = this.opts.visible; - - // setup - //----------------- - this.setup(); - - // layout - //----------------- - this.layout(); - } - - /** - * Creates children and instantiates everything. - * - * @private - * @return {ButtonGroup} A reference to the button group for chaining. - */ - setup() { - // Buttons - //----------------- - let position = 0; - - for (let it of this.opts.buttons) { - delete it.x; - delete it.y; - - if (this.opts.orientation === 'horizontal') { - it.x = position; - } else { - it.y = position; - } - - it.theme = it.theme || this.opts.theme; - it.minWidth = it.minWidth || this.opts.minWidth; - it.minHeight = it.minHeight || this.opts.minHeight; - it.padding = it.padding || this.opts.padding; - it.iconPosition = it.iconPosition || this.opts.iconPosition; - it.iconColor = it.iconColor || this.opts.iconColor; - it.iconColorActive = it.iconColorActive || this.opts.iconColorActive; - it.fill = it.fill || this.opts.fill; - it.fillAlpha = it.fillAlpha || this.opts.fillAlpha; - it.fillActive = it.fillActive || this.opts.fillActive; - it.fillActiveAlpha = it.fillActiveAlpha || this.opts.fillActiveAlpha; - it.stroke = it.stroke || this.opts.stroke; - it.strokeWidth = - it.strokeWidth != null ? it.strokeWidth : this.opts.strokeWidth; - it.strokeAlpha = - it.strokeAlpha != null ? it.strokeAlpha : this.opts.strokeAlpha; - it.strokeActive = it.strokeActive || this.opts.strokeActive; - it.strokeActiveWidth = - it.strokeActiveWidth != null - ? it.strokeActiveWidth - : this.opts.strokeActiveWidth; - it.strokeActiveAlpha = - it.strokeActiveAlpha != null - ? it.strokeActiveAlpha - : this.opts.strokeActiveAlpha; - it.textStyle = it.textStyle || this.opts.textStyle; - it.textStyleActive = it.textStyleActive || this.opts.textStyleActive; - it.style = it.style || this.opts.style; - it.radius = it.radius != null ? it.radius : this.opts.radius; - if (!it.type) { - switch (this.opts.type) { - case 'checkbox': - it.type = this.opts.type; - break - default: - it.type = 'default'; - break - } - } - //it.type = it.type || this.opts.type || 'default' - it.align = it.align || this.opts.align; - it.verticalAlign = it.verticalAlign || this.opts.verticalAlign; - it.afterAction = (event, button) => { - if ( - this.opts.type === 'radio' && - button.opts.type === 'default' - ) { - this.buttons.forEach(it => { - if (it.opts.type === 'default') { - it.active = false; - } - }); - - if (button.opts.type === 'default') { - button.active = true; - } - } - }; - - if (it.tooltip) { - if (typeof it.tooltip === 'string') { - it.tooltip = { content: it.tooltip, container: this }; - } else { - it.tooltip = Object.assign( - {}, - { container: this }, - it.tooltip - ); - } - } - - let button = new Button(it); - - this.addChild(button); - this.buttons.push(button); - - position += - (this.opts.orientation === 'horizontal' - ? button.width - : button.height) + this.opts.margin; - } - - if (this.opts.orientation === 'vertical') { - const maxWidth = this.getMaxButtonWidth(); - - this.buttons.forEach(it => { - it.opts.minWidth = maxWidth; - it.layout(); - }); - } - - // disabled - //----------------- - if (this.opts.disabled != null) { - this.disabled = this.opts.disabled; - } - - return this - } - - /** - * Should be called to refresh the layout of the button group. Can be used after resizing. - * - * @return {ButtonGroup} A reference to the button group for chaining. - */ - layout() { - // set position - //----------------- - this.position.set(this.opts.x, this.opts.y); - - // draw - //----------------- - this.draw(); - - return this - } - - /** - * Draws the canvas. - * - * @private - * @return {ButtonGroup} A reference to the button group for chaining. - */ - draw() { - if (this.opts.margin === 0) { - this.buttons.forEach(it => it.hide()); - - this.clear(); - this.lineStyle( - this.opts.strokeWidth, - this.opts.stroke, - this.opts.strokeAlpha - ); - this.beginFill(this.opts.fill, this.opts.fillAlpha); - this.drawRoundedRect( - 0, - 0, - this.width, - this.height, - this.opts.radius - ); - - // Draw borders - this.lineStyle( - this.opts.strokeWidth, - this.opts.stroke, - this.opts.strokeAlpha / 2 - ); - - this.buttons.forEach((it, i) => { - if (i > 0) { - this.moveTo(it.x, it.y); - - if (this.opts.orientation === 'horizontal') { - this.lineTo(it.x, it.height); - } else { - this.lineTo(it.width, it.y); - } - } - }); - - this.endFill(); - } - - return this - } - - /** - * Gets or sets the disabled state. When disabled, no button of the button group can be clicked. - * - * @member {boolean} - */ - get disabled() { - return this._disabled - } - - set disabled(value) { - this._disabled = value; - - this.buttons.forEach(it => (it.disabled = value)); - } - - /** - * Searches all buttons of the button group and returns the maximum width of one button. - * - * @private - * @return {number} The maximum with of a button of the button group. - */ - getMaxButtonWidth() { - let widths = this.buttons.map(it => it.width); - - return Math.max(...widths) - } - - /** - * Shows the button group (sets his alpha value to 1). - * - * @return {ButtonGroup} A reference to the button group for chaining. - */ - show() { - this.alpha = 1; - - return this - } - - /** - * Hides the button group (sets his alpha value to 0). - * - * @return {ButtonGroup} A reference to the button group for chaining. - */ - hide() { - this.alpha = 0; - - return this - } - } - - /** - * Class that represents a PixiJS InteractivePopup. - * The class is used for various other Popup-like classes - * like Popup, Message... - * - * @class - * @abstract - * @extends AbstractPopup - */ - class InteractivePopup extends AbstractPopup { - /** - * Creates an instance of an InteractivePopup (only for internal use). - * - * @constructor - * @param {object} [opts] - An options object to specify to style and behaviour of the popup. - * @param {boolean} [opts.closeOnPopup=false] - Should the popup be closed when the user clicks on the popup? - * @param {boolean} [opts.closeButton=true] - Should a close button be displayed on the upper right corner? - * @param {object} [opts.button] - A Button object to be display on the lower right corner. - * @param {object} [opts.buttonGroup] - A ButtonGroup object to be displayed on the lower right corner. - */ - constructor(opts = {}) { - opts = Object.assign( - {}, - { - closeOnPopup: false, - closeButton: true, - button: null, - buttonGroup: null - }, - opts - ); - - super(opts); - - this._closeButton = null; - this._buttons = null; - - // padding - this.smallPadding = this.opts.padding / 2; - - // setup - //----------------- - this.setup(); - - // layout - //----------------- - this.layout(); - } - - /** - * Creates the framework and instantiates everything. - * - * @private - * @return {AbstractPopup} A reference to the popup for chaining. - */ - setup() { - super.setup(); - - // interaction - //----------------- - this.on('pointerup', e => { - if (this.opts.closeOnPopup) { - this.hide(); - } else { - e.stopPropagation(); - } - }); - - // closeButton - //----------------- - if (this.opts.closeButton) { - let closeButton = PIXI.Sprite.fromImage( - '../../assets/icons/close.png', - true - ); - closeButton.width = this.headerStyle.fontSize; - closeButton.height = closeButton.width; - closeButton.tint = this.theme.color2; - // This is needed, because the closeButton belongs to the content. The popup must resize with the closeButton. - if (this._header) { - closeButton.x = this._header.width + this.innerPadding; - } else if (this._content) { - closeButton.x = this._content.width + this.innerPadding; - } - - closeButton.interactive = true; - closeButton.buttonMode = true; - closeButton.on('pointerdown', e => { - this.hide(); - }); - - this._closeButton = closeButton; - this.addChild(closeButton); - - // maxWidth is set and a closeButton should be displayed - //----------------- - if (this.opts.maxWidth) { - const wordWrapWidth = - this.opts.maxWidth - - 2 * this.opts.padding - - this.smallPadding - - this._closeButton.width; - if (this._header) { - this.headerStyle.wordWrapWidth = wordWrapWidth; - } else if (this._content) { - this.textStyle.wordWrapWidth = wordWrapWidth; - } - } - } - - // buttons - //----------------- - if (this.opts.button || this.opts.buttonGroup) { - if (this.opts.button) { - this._buttons = new Button( - Object.assign( - { textStyle: this.theme.textStyleSmall }, - this.opts.button - ) - ); - } else { - this._buttons = new ButtonGroup( - Object.assign( - { textStyle: this.theme.textStyleSmall }, - this.opts.buttonGroup - ) - ); - } - this.addChild(this._buttons); - - this._buttons.y = this.innerPadding + this.sy; - } - - return this - } - - /** - * Should be called to refresh the layout of the popup. Can be used after resizing. - * - * @return {AbstractPopup} A reference to the popup for chaining. - */ - layout() { - super.layout(); - - // closeButton - //----------------- - if (this.opts.closeButton) { - this._closeButton.x = - this.wantedWidth - this.smallPadding - this._closeButton.width; - this._closeButton.y = this.smallPadding; - } - - // buttons - //----------------- - if (this._buttons) { - this._buttons.x = - this.wantedWidth - this.opts.padding - this._buttons.width; - this._buttons.y = - this.wantedHeight - this.opts.padding - this._buttons.height; - } - - return this - } - - /** - * Calculates the size of the children of the AbstractPopup. - * Cannot use getBounds() because it is not updated when children - * are removed. - * - * @private - * @override - * @returns {object} An JavaScript object width the keys width and height. - */ - getInnerSize() { - let size = super.getInnerSize(); - - if (this._closeButton) { - size.width += this.smallPadding + this._closeButton.width; - } - - if (this._buttons) { - size.width = Math.max( - size.width, - this._buttons.x + this._buttons.width - ); - size.height += this.innerPadding + this._buttons.height; - } - - return size - } - } - - /** - * Class that represents a PixiJS Popup. - * - * @example - * // Create the popup - * const popup = new Popup({ - * header: 'Goethe', - * content: 'Man kann die Erfahrung nicht früh genug machen, wie entbehrlich man in der Welt ist.' - * }) - * - * // Add the popup to a DisplayObject - * app.scene.addChild(popup) - * - * @class - * @extends InteractivePopup - * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/popup.html|DocTest} - */ - class Popup extends InteractivePopup { - /** - * Creates an instance of a Popup. - * - * @constructor - * @param {object} [opts] - An options object to specify to style and behaviour of the popup. - * @param {boolean} [opts.closeButton=false] - Should a close button be displayed on the upper right corner? - * @param {number} [opts.minWidth=0] - The minimum width of the popup. - * @param {number} [opts.minHeight=0] - The minimum height of the popup. - */ - constructor(opts = {}) { - opts = Object.assign( - {}, - { - closeButton: false, - minWidth: 0, - minHeight: 0 - }, - opts - ); - - super(opts); - } - } - - /** - * Class that represents a PixiJS Modal. - * - * @example - * // Create the button and the modal when clicked - * const button = new Button({ - * label: 'Show Modal', - * action: e => { - * const modal = new Modal({ - * app: app, - * header: 'This is the header', - * content: 'This is the text.' - * }) - * app.scene.addChild(modal) - * } - * }) - * - * // Add the button to a DisplayObject - * app.scene.addChild(button) - * - * @class - * @extends PIXI.Container - * @extends InteractivePopup - * @see {@link http://pixijs.download/dev/docs/PIXI.Container.html|PIXI.Container} - * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/modal.html|DocTest} - */ - class Modal extends PIXI.Container { - /** - * Creates an instance of a Modal. - * - * @constructor - * @param {object} [opts] - An options object to specify to style and behaviour of the modal. - * @param {number} [opts.id=auto generated] - The id of the modal. - * @param {PIXIApp} [opts.app=window.app] - The app where the modal belongs to. - * @param {number} [opts.backgroundFill=Theme.background] - The color of the background. - * @param {number} [opts.backgroundFillAlpha=0.6] - The opacity of the background. - * @param {boolean} [opts.closeOnBackground=true] - Should the modal be closed when the user clicks the - * background? - * @param {boolean} [opts.visible=true] - Is the modal initially visible (property visible)? - */ - constructor(opts = {}) { - super(); - - const theme = Theme.fromString(opts.theme); - this.theme = theme; - - this.opts = Object.assign( - {}, - { - id: PIXI.utils.uid(), - app: window.app, - backgroundFill: theme.background, - backgroundFillAlpha: 0.6, - closeOnBackground: true, - visible: true - }, - opts - ); - - this.id = this.opts.id; - - this.background = null; - this.popup = null; - - this.alpha = 0; - this.visible = this.opts.visible; - - // setup - //----------------- - this.setup(); - - // layout - //----------------- - this.layout(); - } - - /** - * Creates children and instantiates everything. - * - * @private - * @return {Modal} A reference to the modal for chaining. - */ - setup() { - // interaction - //----------------- - this.interactive = true; - this.on('added', e => { - if (this.visible) { - this.show(); - } - }); - - // background - //----------------- - let background = new PIXI.Graphics(); - this.background = background; - this.addChild(this.background); - - if (this.opts.closeOnBackground) { - background.interactive = true; - background.on('pointerup', e => { - this.hide(); - }); - } - - // popup - //----------------- - const popupOpts = Object.assign({}, this.opts, { - visible: true, - onHidden: () => { - this.hide(); - } - }); - let popup = new InteractivePopup(popupOpts); - this.popup = popup; - this.addChild(popup); - popup.show(); - - return this - } - - /** - * Should be called to refresh the layout of the modal. Can be used after resizing. - * - * @return {Modal} A reference to the modal for chaining. - */ - layout() { - const width = this.opts.app.size.width; - const height = this.opts.app.size.height; - - // background - //----------------- - this.background.clear(); - this.background.beginFill( - this.opts.backgroundFill, - this.opts.backgroundFillAlpha - ); - this.background.drawRect(0, 0, width, height); - this.background.endFill(); - - // position - this.popup.x = width / 2 - this.popup.width / 2; - this.popup.y = height / 2 - this.popup.height / 2; - - return this - } - - /** - * Shows the modal (sets his alpha values to 1). - * - * @return {Modal} A reference to the modal for chaining. - */ - show() { - TweenLite.to(this, this.theme.fast, { - alpha: 1, - onStart: () => (this.visible = true) - }); - - return this - } - - /** - * Hides the modal (sets his alpha values to 0). - * - * @return {Modal} A reference to the modal for chaining. - */ - hide() { - TweenLite.to(this, this.theme.fast, { - alpha: 0, - onComplete: () => (this.visible = false) - }); - - return this - } - - /** - * Sets or gets the header. The getter always returns a PIXI.Text object. The setter can receive - * a string or a PIXI.Text object. - * - * @member {string|PIXI.Text} - */ - get header() { - return this.popup.header - } - set header(value) { - this.opts.header = value; - this.background.destroy(); - this.popup.destroy(); - this.setup().layout(); - } - - /** - * Sets or gets the content. The getter always returns an PIXI.DisplayObject. The setter can receive - * a string or a PIXI.DisplayObject. - * - * @member {string|PIXI.DisplayObject} - */ - get content() { - return this.popup.content - } - set content(value) { - this.opts.content = value; - this.background.destroy(); - this.popup.destroy(); - this.setup().layout(); - } - } - - /** - * Class that represents a Message. A message pops up and disappears after a specific amount of time. - * - * @example - * // Create the PixiJS App - * const app = new PIXIApp({ - * view: canvas, - * width: 900, - * height: 250 - * }).setup().run() - * - * // Create a button - * let button = new Button({ - * label: 'Click me', - * action: e => { - * const message = new Message({ - * app: app, - * header: 'Header', - * content: 'Text.' - * }) - * app.scene.addChild(message) - * } - * }) - * - * // Add the button to the scene - * app.scene.addChild(button) - * - * @class - * @extends InteractivePopup - * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/message.html|DocTest} - */ - class Message extends InteractivePopup { - /** - * Creates an instance of a Message. - * - * @constructor - * @param {object} [opts] - An options object to specify to style and behaviour of the message. - * @param {PIXIApp} [opts.app=window.app] - The PIXIApp where this message belongs to. - * @param {boolean} [opts.closeButton=false] - Should a close button be displayed in the upper right corner? - * @param {number} [opts.minWidth=280] - The minimum width of the message box. Automatically expands with the content. - * @param {number} [opts.minHeight=100] - The minimum height of the message box. Automatically expands with the content. - * @param {number} [opts.margin=Theme.margin] - The outer spacing of the message box. - * @param {string} [opts.align=right] - The horizontal position of the message box relative to the app. Possible - * values are left, center, right. - * @param {string} [opts.verticalAlign=top] - The vertical position of the message box relative to the app. Possible - * values are top, middle, bottom. - * @param {number} [opts.duration=5] - The duration in seconds when the message box should disappear. - * @param {boolean} [opts.autoClose=true] - Should the message box be closed automatically? - * @param {number} [opts.closeDuration=Theme.fast] - The duration in seconds of the closing of the message box. - */ - constructor(opts = {}) { - const theme = Theme.fromString(opts.theme); - - opts = Object.assign( - {}, - { - app: window.app, - closeButton: false, - minWidth: 280, - minHeight: 100, - margin: theme.margin, - align: 'right', // left, center, right - verticalAlign: 'top', // top, middle, bottom - duration: 5, - autoClose: true, - closeDuration: theme.fast - }, - opts - ); - - super(opts); - } - - /** - * Relayouts the position of the message box. - * - * @return {Message} Returns the message box for chaining. - */ - layout() { - super.layout(); - - // horizontal - switch (this.opts.align) { - case 'left': - this.x = this.opts.margin; - break - case 'center': - this.x = this.opts.app.size.width / 2 - this.width / 2; - break - case 'right': - this.x = - this.opts.app.size.width - this.opts.margin - this.width; - break - } - - // vertical - switch (this.opts.verticalAlign) { - case 'top': - this.y = this.opts.margin; - break - case 'middle': - this.y = this.opts.app.size.height / 2 - this.height / 2; - break - case 'bottom': - this.y = - this.opts.app.size.height - this.opts.margin - this.height; - break - } - } - - /** - * Shows the message box. - * - * @private - */ - show() { - super.show(); - - if (this.opts.autoClose) { - window.setTimeout(() => { - this.hide(); - }, this.opts.duration * 1000); - } - } - } - - /* globals WebKitPoint */ + /* globals */ /** Tests whether an object is empty * @param {Object} obj - the object to be tested @@ -3213,9 +1481,7 @@ } static startYearRange(date) { - return new Date( - Date.UTC(date.getFullYear() - 1, 11, 31, 23, 59, 59, 999) - ) + return new Date(Date.UTC(date.getFullYear() - 1, 11, 31, 23, 59, 59, 999)) } static endYearRange(date) { @@ -3235,11 +1501,7 @@ } static nextDay(date) { - return this.create( - date.getFullYear(), - date.getMonth(), - date.getDate() + 1 - ) + return this.create(date.getFullYear(), date.getMonth(), date.getDate() + 1) } static nextHour(date) { @@ -3677,15 +1939,9 @@ */ draw(context, { lineWidth = 2, stroke = '#000000', fill = null } = {}) { context.beginPath(); - context.moveTo( - this.points[0].x + this.center.x, - this.points[0].y + this.center.y - ); + context.moveTo(this.points[0].x + this.center.x, this.points[0].y + this.center.y); for (let i = 1; i < this.points.length; i++) { - context.lineTo( - this.points[i].x + this.center.x, - this.points[i].y + this.center.y - ); + context.lineTo(this.points[i].x + this.center.x, this.points[i].y + this.center.y); } context.closePath(); context.lineWidth = lineWidth; @@ -3742,10 +1998,7 @@ for (i = 0, j = nvert - 1; i < nvert; j = i++) { if ( verty[i] > testy != verty[j] > testy && - testx < - ((vertx[j] - vertx[i]) * (testy - verty[i])) / - (verty[j] - verty[i]) + - vertx[i] + testx < ((vertx[j] - vertx[i]) * (testy - verty[i])) / (verty[j] - verty[i]) + vertx[i] ) c = !c; } @@ -3779,12 +2032,8 @@ for (side = 0; side < this.getNumberOfSides(); side++) { /* get the axis that we will project onto */ if (side == 0) { - axis.x = - this.points[this.getNumberOfSides() - 1].y - - this.points[0].y; - axis.y = - this.points[0].x - - this.points[this.getNumberOfSides() - 1].x; + axis.x = this.points[this.getNumberOfSides() - 1].y - this.points[0].y; + axis.y = this.points[0].x - this.points[this.getNumberOfSides() - 1].x; } else { axis.x = this.points[side - 1].y - this.points[side].y; axis.y = this.points[side].x - this.points[side - 1].x; @@ -3808,8 +2057,7 @@ maxA += tmp; /* project polygon B onto axis to determine the min/max */ - minB = maxB = - other.points[0].x * axis.x + other.points[0].y * axis.y; + minB = maxB = other.points[0].x * axis.x + other.points[0].y * axis.y; for (i = 1; i < other.getNumberOfSides(); i++) { tmp = other.points[i].x * axis.x + other.points[i].y * axis.y; if (tmp > maxB) maxB = tmp; @@ -3836,12 +2084,8 @@ for (side = 0; side < other.getNumberOfSides(); side++) { /* get the axis that we will project onto */ if (side == 0) { - axis.x = - other.points[other.getNumberOfSides() - 1].y - - other.points[0].y; - axis.y = - other.points[0].x - - other.points[other.getNumberOfSides() - 1].x; + axis.x = other.points[other.getNumberOfSides() - 1].y - other.points[0].y; + axis.y = other.points[0].x - other.points[other.getNumberOfSides() - 1].x; } else { axis.x = other.points[side - 1].y - other.points[side].y; axis.y = other.points[side].x - other.points[side - 1].x; @@ -3865,8 +2109,7 @@ maxA += tmp; /* project polygon B onto axis to determine the min/max */ - minB = maxB = - other.points[0].x * axis.x + other.points[0].y * axis.y; + minB = maxB = other.points[0].x * axis.x + other.points[0].y * axis.y; for (i = 1; i < other.getNumberOfSides(); i++) { tmp = other.points[i].x * axis.x + other.points[i].y * axis.y; if (tmp > maxB) maxB = tmp; @@ -3947,8 +2190,7 @@ * @access private */ __push(value) { - let removed = - this.buffer.length === this.bufferMaxSize ? this.buffer.shift() : 0; + let removed = this.buffer.length === this.bufferMaxSize ? this.buffer.shift() : 0; this.buffer.push(value); return removed @@ -3991,6 +2233,1804 @@ } } + /* global */ + + /** + * Callback for the button action. + * + * @callback actionCallback + * @param {object} event - The event object. + * @param {Button} button - A reference to the button (also this refers to the button). + */ + + /** + * Callback for the button beforeAction. + * + * @callback beforeActionCallback + * @param {object} event - The event object. + * @param {Button} button - A reference to the button (also this refers to the button). + */ + + /** + * Callback for the button afterAction. + * + * @callback afterActionCallback + * @param {object} event - The event object. + * @param {Button} button - A reference to the button (also this refers to the button). + */ + + /** + * Class that represents a PixiJS Button. + * + * @example + * // Create the button + * const button = new Button({ + * label: 'My Button', + * action: () => console.log('Button was clicked') + * }) + * + * // Add the button to a DisplayObject + * app.scene.addChild(button) + * + * @class + * @extends PIXI.Container + * @see {@link http://pixijs.download/dev/docs/PIXI.Container.html|PIXI.Container} + * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/button.html|DocTest} + */ + class Button extends PIXI.Container { + /** + * Creates an instance of a Button. + * + * @constructor + * @param {object} [opts] - An options object to specify to style and behaviour of the button. + * @param {number} [opts.id=auto generated] - The id of the button. + * @param {string} [opts.label] - The label of the button. + * @param {number} [opts.x=0] - The x position of the button. Can be also set after creation with button.x = 0. + * @param {number} [opts.y=0] - The y position of the button. Can be also set after creation with button.y = 0. + * @param {string|Theme} [opts.theme=dark] - The theme to use for this button. Possible values are dark, light, red + * or a Theme object. + * @param {number} [opts.minWidth=44] - The minimum width of the button. + * @param {number} [opts.minHeight=44] - The minimum height of the button. + * @param {number} [opts.padding=Theme.padding] - The inner spacing (distance from icon and/or label) to the border. + * @param {string|PIXI.DisplayObject} [opts.icon] - The icon of the button. Can be a predefined one, an URL or an PIXI.DisplayObject. + * @param {string|PIXI.DisplayObject} [opts.iconActive=icon] - The icon of the button when activated. Can be a predefined one, an URL or an PIXI.DisplayObject. + * @param {string} [opts.iconPosition=left] - The position of the icon in relation to the label. Can be left or right. + * @param {number} [opts.iconColor=Theme.iconColor] - The color of the icon (set by the tint property) as a hex value. + * @param {number} [opts.iconColorActive=Theme.iconColorActive] - The color of the icon when activated. + * @param {number} [opts.fill=Theme.fill] - The color of the button background as a hex value. + * @param {number} [opts.fillAlpha=Theme.fillAlpha] - The alpha value of the background. + * @param {number} [opts.fillActive=Theme.fillActive] - The color of the button background when activated. + * @param {number} [opts.fillActiveAlpha=Theme.fillActiveAlpha] - The alpha value of the background when activated. + * @param {number} [opts.stroke=Theme.stroke] - The color of the border as a hex value. + * @param {number} [opts.strokeWidth=Theme.strokeWidth] - The width of the border in pixel. + * @param {number} [opts.strokeAlpha=Theme.strokeAlpha] - The alpha value of the border. + * @param {number} [opts.strokeActive=Theme.strokeActive] - The color of the border when activated. + * @param {number} [opts.strokeActiveWidth=Theme.strokeActiveWidth] - The width of the border in pixel when activated. + * @param {number} [opts.strokeActiveAlpha=Theme.strokeActiveAlpha] - The alpha value of the border when activated. + * @param {object} [opts.textStyle=Theme.textStyle] - A textstyle object for the styling of the label. See PIXI.TextStyle + * for possible options. + * @param {number} [opts.textStyleActive=Theme.textStyleActive] - A textstyle object for the styling of the label when the + * button is activated. See PIXI.TextStyle for possible options. + * @param {string} [opts.style=default] - A shortcut for styling options. Possible values are default, link. + * @param {number} [opts.radius=Theme.radius] - The radius of the four corners of the button (which is a rounded rectangle). + * @param {boolean} [opts.disabled=false] - Is the button disabled? When disabled, the button has a lower alpha value + * and cannot be clicked (interactive is set to false). + * @param {boolean} [opts.active=false] - Is the button initially active? + * @param {actionCallback} [opts.action] - Executed when the button was triggered (by pointerup). + * @param {beforeActionCallback} [opts.beforeAction] - Executed before the main action is triggered. + * @param {afterActionCallback} [opts.afterAction] - Executed after the main action was triggered. + * @param {string} [opts.type=default] - The type of the button. Can be default or checkbox. When the type is + * checkbox, the active state is toggled automatically. + * @param {string} [opts.align=center] - The horizontal position of the label and the icon. Possible values are + * left, center and right. Only affects the style when the minWidth is bigger than the width of the icon and label. + * @param {string} [opts.verticalAlign=middle] - The vertical position of the label and the icon. Possible values are + * top, middle and button. Only affects the style when the minHeight is bigger than the height of the icon and label. + * @param {string|object} [opts.tooltip] - A string for the label of the tooltip or an object to configure the tooltip + * to display. + * @param {string|object} [opts.badge] - A string for the label of the badge or an object to configure the badge to display. + * If the parameter is an object, all badge options can be set plus the following: + * @param {string} [opts.badge.align=right] - The horizontal alignment of the badge. Possible values: left, center, right + * @param {string} [opts.badge.verticalAlign=top] - The vertical alignment of the badge. Possible values: top, middle, bottom + * @param {number} [opts.badge.offsetLeft=0] - The horizontal shift of the badge. + * @param {number} [opts.badge.offsetTop=0] - The vertical shift of the badge. + * @param {boolean} [opts.visible=true] - Is the button initially visible (property visible)? + */ + constructor(opts = {}) { + super(); + + const theme = Theme.fromString(opts.theme); + this.theme = theme; + + this.opts = Object.assign( + {}, + { + id: PIXI.utils.uid(), + label: null, + x: 0, + y: 0, + minWidth: 44, + minHeight: 44, + padding: theme.padding, + icon: undefined, + iconActive: undefined, + iconPosition: 'left', + iconColor: theme.iconColor, + iconColorActive: theme.iconColorActive, + fill: theme.fill, + fillAlpha: theme.fillAlpha, + fillActive: theme.fillActive, + fillActiveAlpha: theme.fillActiveAlpha, + stroke: theme.stroke, + strokeWidth: theme.strokeWidth, + strokeAlpha: theme.strokeAlpha, + strokeActive: theme.strokeActive, + strokeActiveWidth: theme.strokeActiveWidth, + strokeActiveAlpha: theme.strokeActiveAlpha, + textStyle: theme.textStyle, + textStyleActive: theme.textStyleActive, + style: 'default', + radius: theme.radius, + disabled: false, + active: false, + action: null, + beforeAction: null, + afterAction: null, + type: 'default', + align: 'center', + verticalAlign: 'middle', + tooltip: null, + badge: null, + visible: true + }, + opts + ); + + this.id = this.opts.id; + + if (typeof this.opts.icon === 'undefined' && typeof this.opts.iconActive !== 'undefined') { + this.opts.icon = this.opts.iconActive; + } else if (typeof this.opts.icon !== 'undefined' && typeof this.opts.iconActive === 'undefined') { + this.opts.iconActive = this.opts.icon; + } + + if (this.opts.style === 'link') { + Object.assign(this.opts, { + strokeAlpha: 0, + strokeActiveAlpha: 0, + fillAlpha: 0, + fillActiveAlpha: 0 + }); + } + + this._active = null; + this._disabled = null; + + this.__start = { x: null, y: null }; + + this.iconInactive = null; + this.iconActive = null; + this.text = null; + + this.button = null; + this.content = null; + + this.tooltip = null; + this.badge = null; + + this.visible = this.opts.visible; + + // setup + //----------------- + this.setup(); + } + + /** + * Captures an event to inform InteractionMapper about processed events. + * + * @param {event|PIXI.InteractionEvent} event - The PIXI event to capture. + */ + capture(event) { + Events$1.capturedBy(event.data.originalEvent, this); + } + + /** + * Creates children and instantiates everything. + * + * @private + * @return {Button} A reference to the button for chaining. + */ + setup() { + // Button + //----------------- + let button = new PIXI.Graphics(); + this.button = button; + this.addChild(button); + + // Content + //----------------- + let content = new PIXI.Container(); + this.content = content; + this.addChild(content); + + // Text + //----------------- + if (this.opts.label) { + this.text = new PIXI.Text(this.opts.label, this.opts.textStyle); + } + + // Icon + //----------------- + if (this.opts.icon) { + this.iconInactive = this.loadIcon(this.opts.icon, this.opts.iconColor); + } + + if (this.opts.iconActive) { + this.iconActive = this.loadIcon(this.opts.iconActive, this.opts.iconColorActive); + } + + // interaction + //----------------- + this.button.on('pointerover', e => { + this.capture(e); + TweenLite.to([this.button, this.content], this.theme.fast, { + alpha: 0.83, + overwrite: 'none' + }); + }); + + this.button.on('pointermove', e => { + this.capture(e); + }); + + this.button.on('pointerout', e => { + this.capture(e); + TweenLite.to([this.button, this.content], this.theme.fast, { + alpha: 1, + overwrite: 'none' + }); + }); + + // eslint-disable-next-line no-unused-vars + this.button.on('pointerdown', e => { + //this.capture(e) + this.__start.x = e.data.global.x; + this.__start.y = e.data.global.y; + TweenLite.to([this.button, this.content], this.theme.fast, { + alpha: 0.7, + overwrite: 'none' + }); + }); + + this.button.on('pointerup', e => { + this.capture(e); + + const distance = Points.distance(e.data.global, this.__start); + + if (distance < 5) { + if (this.opts.beforeAction) { + this.opts.beforeAction.call(this, e, this); + } + + if (this.opts.action) { + this.opts.action.call(this, e, this); + } + + TweenLite.to([this.button, this.content], this.theme.fast, { + alpha: 0.83, + overwrite: 'none' + }); + + if (this.opts.type === 'checkbox') { + this.active = !this.active; + } + + if (this.opts.afterAction) { + this.opts.afterAction.call(this, e, this); + } + } + }); + + // disabled + //----------------- + this.disabled = this.opts.disabled; + + // active + //----------------- + this.active = this.opts.active; // calls .layout() + + // tooltip + //----------------- + if (this.opts.tooltip) { + if (typeof this.opts.tooltip === 'string') { + this.tooltip = new Tooltip({ + object: this, + content: this.opts.tooltip + }); + } else { + this.opts.tooltip = Object.assign({}, { object: this }, this.opts.tooltip); + this.tooltip = new Tooltip(this.opts.tooltip); + } + } + + // badge + //----------------- + if (this.opts.badge) { + let opts = Object.assign( + {}, + { + align: 'right', + verticalAlign: 'top', + offsetLeft: 0, + offsetTop: 0 + } + ); + if (typeof this.opts.badge === 'string') { + opts = Object.assign(opts, { content: this.opts.badge }); + } else { + opts = Object.assign(opts, this.opts.badge); + } + + const badge = new Badge(opts); + + switch (opts.align) { + case 'left': + badge.x = this.x - badge.width / 2 + opts.offsetLeft; + break + case 'center': + badge.x = this.x + this.width / 2 - badge.width / 2 + opts.offsetLeft; + break + case 'right': + badge.x = this.x + this.width - badge.width / 2 + opts.offsetLeft; + } + + switch (opts.verticalAlign) { + case 'top': + badge.y = this.y - badge.height / 2 + opts.offsetTop; + break + case 'middle': + badge.y = this.y + this.height / 2 - badge.height / 2 + opts.offsetTop; + break + case 'bottom': + badge.y = this.y + this.height - badge.height / 2 + opts.offsetTop; + } + + this.addChild(badge); + + this.badge = badge; + } + + // set position + //----------------- + this.position.set(this.opts.x, this.opts.y); + + return this + } + + /** + * Should be called to refresh the layout of the button. Can be used after resizing. + * + * @return {Button} A reference to the button for chaining. + */ + layout() { + // Clear content + //----------------- + this.removeChild(this.content); + this.content = new PIXI.Container(); + this.addChild(this.content); + + // Set the icon + //----------------- + let icon = null; + + if (!this.active && this.iconInactive) { + icon = this.iconInactive; + } else if (this.active && this.iconActive) { + icon = this.iconActive; + } + + // Set the text + //----------------- + if (this.text) { + this.text.position.set(0, 0); + } + + // Width and Height + //----------------- + let width = 0; + if (icon && this.text) { + width = icon.width + this.text.width + 3 * this.opts.padding; + } else if (icon) { + width = icon.width + 2 * this.opts.padding; + } else if (this.text) { + width = this.text.width + 2 * this.opts.padding; + } + + if (width < this.opts.minWidth) { + width = this.opts.minWidth; + } + + let height = 0; + if (icon) { + height = icon.height + 2 * this.opts.padding; + } else if (this.text) { + height = this.text.height + 2 * this.opts.padding; + } + + if (height < this.opts.minHeight) { + height = this.opts.minHeight; + } + + this._width = width; + this._height = height; + + // Position icon and text + //----------------- + if (icon && this.text) { + if (this.opts.iconPosition === 'right') { + icon.x = this.text.width + this.opts.padding; + } else { + this.text.x = icon.width + this.opts.padding; + } + this.content.addChild(icon, this.text); + } else if (icon) { + this.content.addChild(icon); + } else if (this.text) { + this.content.addChild(this.text); + } + + this.layoutInnerContent(); + this.layoutContent(); + + this.icon = icon; + + // draw + //----------------- + this.draw(); + + return this + } + + /** + * Calculates the positions of the content children (icon and/or text). + * + * @private + * @return {Button} A reference to the button for chaining. + */ + layoutInnerContent() { + for (let child of this.content.children) { + switch (this.opts.verticalAlign) { + case 'top': + child.y = 0; + break + case 'middle': + child.y = this.content.height / 2 - child.height / 2; + break + case 'bottom': + child.y = this.content.height - child.height; + break + } + } + + return this + } + + /** + * Sets the horizontal and vertical position of the content. + * Uses the option keys "align" and "verticalAlign". + * + * @private + * @return {Button} A reference to the button for chaining. + */ + layoutContent() { + switch (this.opts.align) { + case 'left': + this.content.x = this.opts.padding; + break + case 'center': + this.content.x = (this._width - this.content.width) / 2; + break + case 'right': + this.content.x = this._width - this.opts.padding - this.content.width; + break + } + + switch (this.opts.verticalAlign) { + case 'top': + this.content.y = this.opts.padding; + break + case 'middle': + this.content.y = (this._height - this.content.height) / 2; + break + case 'bottom': + this.content.y = this._height - this.opts.padding - this.content.height; + break + } + + return this + } + + /** + * Draws the canvas. + * + * @private + * @return {Button} A reference to the button for chaining. + */ + draw() { + this.button.clear(); + if (this.active) { + this.button.lineStyle(this.opts.strokeActiveWidth, this.opts.strokeActive, this.opts.strokeActiveAlpha); + this.button.beginFill(this.opts.fillActive, this.opts.fillActiveAlpha); + } else { + this.button.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha); + this.button.beginFill(this.opts.fill, this.opts.fillAlpha); + } + this.button.drawRoundedRect(0, 0, this._width, this._height, this.opts.radius); + this.button.endFill(); + + return this + } + + /** + * Gets or sets the active state. + * + * @member {boolean} + */ + get active() { + return this._active + } + set active(value) { + this._active = value; + + if (this._active) { + if (this.text) { + this.text.style = this.opts.textStyleActive; + } + } else { + if (this.text) { + this.text.style = this.opts.textStyle; + } + } + + this.layout(); + } + + /** + * Gets or sets the disabled state. When disabled, the button cannot be clicked. + * + * @member {boolean} + */ + get disabled() { + return this._disabled + } + set disabled(value) { + this._disabled = value; + + if (this._disabled) { + this.button.interactive = false; + this.button.buttonMode = false; + this.button.alpha = 0.5; + if (this.icon) { + this.icon.alpha = 0.5; + } + if (this.text) { + this.text.alpha = 0.5; + } + } else { + this.button.interactive = true; + this.button.buttonMode = true; + this.button.alpha = 1; + if (this.icon) { + this.icon.alpha = 1; + } + if (this.text) { + this.text.alpha = 1; + } + } + } + + /** + * Shows the button (sets his alpha values to 1). + * + * @return {Button} A reference to the button for chaining. + */ + show() { + this.opts.strokeAlpha = 1; + this.opts.strokeActiveAlpha = 1; + this.opts.fillAlpha = 1; + this.opts.fillActiveAlpha = 1; + + this.layout(); + + return this + } + + /** + * Hides the button (sets his alpha values to 0). + * + * @return {Button} A reference to the button for chaining. + */ + hide() { + this.opts.strokeAlpha = 0; + this.opts.strokeActiveAlpha = 0; + this.opts.fillAlpha = 0; + this.opts.fillActiveAlpha = 0; + + this.layout(); + + return this + } + + /** + * Loads an icon + * + * @private + * @param {string|PIXI.DisplayObject} icon - The icon to load. + * @param {number} color - The color of the icon (if not an PIXI.DisplayObject). + * @return {PIXI.DisplayObject} Return the icon as an PIXI.DisplayObject. + */ + loadIcon(icon, color) { + let displayObject = null; + + if (icon instanceof PIXI.DisplayObject) { + displayObject = icon; + } else { + let size = 17; + if (this.text) { + size = this.text.height; + } else if (this.opts.minHeight) { + size = this.opts.minHeight - 2 * this.opts.padding; + } + + const url = Button.iconIsUrl(icon) ? icon : `../../assets/icons/${icon}.png`; + const iconTexture = PIXI.Texture.fromImage(url, true); + + const sprite = new PIXI.Sprite(iconTexture); + sprite.tint = color; + sprite.width = size; + sprite.height = size; + + displayObject = sprite; + } + + return displayObject + } + + /** + * Tests if an icon string is an url. + * + * @private + * @static + * @param {string} url - The url to test. + * @return {boolean} true if the url is an url to an image. + */ + static iconIsUrl(url) { + return /\.(png|svg|gif|jpg|jpeg|tif|tiff)$/i.test(url) + } + + /** + * Gets or sets the color of the current icon (no matter how the status is). Changing the color, changes + * the tint property of the icon sprite. + * + * @member {number} + */ + get iconColor() { + return this.icon ? this.icon.tint : null + } + set iconColor(value) { + if (this.icon) { + this.icon.tint = value; + } + } + } + + /* globals ThrowPropsPlugin, Strong */ + + /** + * Class that represents a PixiJS ButtonGroup. + * + * @example + * // Create the button group + * const buttonGroup = new ButtonGroup({ + * buttons: [ + * {label: 'Button 1', action: event => console.log(event)}, + * {label: 'Button 2', action: event => console.log(event)}, + * {label: 'Button 3', action: event => console.log(event)} + * ], + * minWidth: 100 + * }) + * + * // Add the button group to a DisplayObject + * app.scene.addChild(buttonGroup) + * + * @class + * @extends PIXI.Graphics + * @see {@link http://pixijs.download/dev/docs/PIXI.Graphics.html|PIXI.Graphics} + * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/buttongroup.html|DocTest} + */ + class ButtonGroup extends PIXI.Container { + /** + * Creates an instance of a ButtonGroup. + * + * @constructor + * @param {object} [opts] - An options object to specify to style and behaviour of the button group. + * @param {number} [opts.id=auto generated] - The id of the button group. + * @param {number} [opts.x=0] - The x position of the button group. Can be also set after creation with buttonGroup.x = 0. + * @param {number} [opts.y=0] - The y position of the button group. Can be also set after creation with buttonGroup.y = 0. + * @param {object[]} [opts.buttons=[]] - An array of the buttons of the button group. One item of the array (one object) + * can have exactly the same properties as an Button object when instantiating a Button. If a property of the button group + * conflicts with a property of a button object, the value from the button object will be used. + * @param {string|Theme=} [opts.theme=dark] - The theme to use for this button group. Possible values are dark, light, red + * or a Theme object. + * @param {number} [opts.minWidth=44] - Button: The minimum width of one button. + * @param {number} [opts.minHeight=44] - Button: The minimum height of one button. + * @param {number} [opts.maxWidth] - The maximum width of the button group. Only used if stacked is true and the orientation is horizontal. + * @param {number} [opts.maxHeight] - The maximum height of the button group. Only used if stacked is true and the orientation is vertical. + * @param {boolean} [opts.stacked=false] - If set to true, the buttons of the button group gets stacked if they are broader or higher than the maximum permitted width or height, depending on orientation. + * @param {PIXI.Application} [opts.app] - The PixiJS Application. Must be set if you want to use the mousewheel to scroll your button group. + * @param {number} [opts.padding=Theme.padding] - Button: The inner spacing (distance from icon and/or label) the the border. + * @param {number} [opts.margin=Theme.margin] - The outer spacing (distance from one button to the previous/next button). + * @param {string} [opts.iconPosition=left] - Button: The position of the icon in relation to the label. Can be left or right. + * @param {number} [opts.iconColor=Theme.iconColor] - Button: The color of the icon (set by the tint property) as a hex value. + * @param {number} [opts.iconColorActive=Theme.iconColorActive] - Button: The color of the icon when activated. + * @param {number} [opts.fill=Theme.fill] - Button: The color of the button background as a hex value. + * @param {number} [opts.fillAlpha=Theme.fillAlpha] - Button: The alpha value of the background. + * @param {number} [opts.fillActive=Theme.fillActive] - Button: The color of the button background when activated. + * @param {number} [opts.fillActiveAlpha=Theme.fillActiveAlpha] - Button: The alpha value of the background when activated. + * @param {number} [opts.stroke=Theme.stroke] - Button: The color of the border as a hex value. + * @param {number} [opts.strokeWidth=Theme.strokeWidth] - Button: The width of the border in pixel. + * @param {number} [opts.strokeAlpha=Theme.strokeAlpha] - Button: The alpha value of the border. + * @param {number} [opts.strokeActive=Theme.strokeActive] - Button: The color of the border when activated. + * @param {number} [opts.strokeActiveWidth=Theme.strokeActiveWidth] - Button: The width of the border in pixel when activated. + * @param {number} [opts.strokeActiveAlpha=Theme.strokeActiveAlpha] - Button: The alpha value of the border when activated. + * @param {object} [opts.textStyle=Theme.textStyle] - Button: A textstyle object for the styling of the label. See PIXI.TextStyle + * for possible options. + * @param {number} [opts.textStyleActive=Theme.textStyleActive] - Button: A textstyle object for the styling of the label when the + * button is activated. See PIXI.TextStyle for possible options. + * @param {string} [opts.style=default] - A shortcut for styling options. Possible values are default, link. + * @param {number} [opts.radius=Theme.radius] - Button: The radius of the four corners of the button (which is a rounded rectangle). + * @param {boolean} [opts.disabled=false] - Is the button group disabled? When disabled, the button group has a lower alpha value + * and cannot be clicked (interactive of every button is set to false). + * @param {string} [opts.type=default] - The type of the button group. Can be default, checkbox or radio. When the type is + * checkbox, the active state is toggled for each button automatically. When the type is radio, only one button can + * be activated at the same time. + * @param {string} [opts.orientation=horizontal] - The orientation of the button group. Can be horizontal or vertical. + * @param {string} [opts.align=center] - Button: The horizontal position of the label and the icon. Possible values are + * left, center and right. Only affects the style when the minWidth is bigger than the width of the icon and label. + * @param {string} [opts.verticalAlign=middle] - Button: The vertical position of the label and the icon. Possible values are + * top, middle and bottom. Only affects the style when the minHeight is bigger than the height of the icon and label. + * @param {boolean} [opts.visible=true] - Is the button group initially visible (property visible)? + */ + constructor(opts = {}) { + super(); + + const theme = Theme.fromString(opts.theme); + this.theme = theme; + + this.opts = Object.assign( + {}, + { + id: PIXI.utils.uid(), + x: 0, + y: 0, + buttons: [], + minWidth: 44, + minHeight: 44, + maxWidth: null, + maxHeight: null, + stacked: false, + app: null, + padding: theme.padding, + margin: theme.margin, + iconPosition: 'left', // left, right + iconColor: theme.iconColor, + iconColorActive: theme.iconColorActive, + fill: theme.fill, + fillAlpha: theme.fillAlpha, + fillActive: theme.fillActive, + fillActiveAlpha: theme.fillActiveAlpha, + stroke: theme.stroke, + strokeWidth: theme.strokeWidth, + strokeAlpha: theme.strokeAlpha, + strokeActive: theme.strokeActive, + strokeActiveWidth: theme.strokeActiveWidth, + strokeActiveAlpha: theme.strokeActiveAlpha, + textStyle: theme.textStyle, + textStyleActive: theme.textStyleActive, + style: 'default', + radius: theme.radius, + disabled: null, + type: 'default', // default, checkbox, radio + orientation: 'horizontal', + align: 'center', // left, center, right + verticalAlign: 'middle', // top, middle, bottom + visible: true + }, + opts + ); + + this.buttons = []; + + this._disabled = null; + this.__dragging = false; + + this.visible = this.opts.visible; + + // setup + //----------------- + this.setup(); + + // layout + //----------------- + this.layout(); + } + + /** + * Creates children and instantiates everything. + * + * @private + * @return {ButtonGroup} A reference to the button group for chaining. + */ + setup() { + // inner container + //-------------------- + const container = new PIXI.Graphics(); + this.addChild(container); + this.container = container; + + // Buttons + //----------------- + let position = 0; + + for (let it of this.opts.buttons) { + delete it.x; + delete it.y; + + if (this.opts.orientation === 'horizontal') { + it.x = position; + } else { + it.y = position; + } + + it.theme = it.theme || this.opts.theme; + it.minWidth = it.minWidth || this.opts.minWidth; + it.minHeight = it.minHeight || this.opts.minHeight; + it.padding = it.padding || this.opts.padding; + it.iconPosition = it.iconPosition || this.opts.iconPosition; + it.iconColor = it.iconColor || this.opts.iconColor; + it.iconColorActive = it.iconColorActive || this.opts.iconColorActive; + it.fill = it.fill || this.opts.fill; + it.fillAlpha = it.fillAlpha || this.opts.fillAlpha; + it.fillActive = it.fillActive || this.opts.fillActive; + it.fillActiveAlpha = it.fillActiveAlpha || this.opts.fillActiveAlpha; + it.stroke = it.stroke || this.opts.stroke; + it.strokeWidth = it.strokeWidth != null ? it.strokeWidth : this.opts.strokeWidth; + it.strokeAlpha = it.strokeAlpha != null ? it.strokeAlpha : this.opts.strokeAlpha; + it.strokeActive = it.strokeActive || this.opts.strokeActive; + it.strokeActiveWidth = it.strokeActiveWidth != null ? it.strokeActiveWidth : this.opts.strokeActiveWidth; + it.strokeActiveAlpha = it.strokeActiveAlpha != null ? it.strokeActiveAlpha : this.opts.strokeActiveAlpha; + it.textStyle = it.textStyle || this.opts.textStyle; + it.textStyleActive = it.textStyleActive || this.opts.textStyleActive; + it.style = it.style || this.opts.style; + it.radius = it.radius != null ? it.radius : this.opts.radius; + if (!it.type) { + switch (this.opts.type) { + case 'checkbox': + it.type = this.opts.type; + break + default: + it.type = 'default'; + break + } + } + //it.type = it.type || this.opts.type || 'default' + it.align = it.align || this.opts.align; + it.verticalAlign = it.verticalAlign || this.opts.verticalAlign; + it.afterAction = (event, button) => { + if (this.opts.type === 'radio' && button.opts.type === 'default') { + this.buttons.forEach(it => { + if (it.opts.type === 'default') { + it.active = false; + } + }); + + if (button.opts.type === 'default') { + button.active = true; + } + } + }; + + if (it.tooltip) { + if (typeof it.tooltip === 'string') { + it.tooltip = { content: it.tooltip, container: this }; + } else { + it.tooltip = Object.assign({}, { container: this }, it.tooltip); + } + } + + let button = new Button(it); + + this.container.addChild(button); + this.buttons.push(button); + + button.__originalPosition = { + x: button.x, + y: button.y + }; + + position += (this.opts.orientation === 'horizontal' ? button.width : button.height) + this.opts.margin; + } + + if (this.opts.orientation === 'vertical') { + const maxWidth = this.getMaxButtonWidth(); + + this.buttons.forEach(it => { + it.opts.minWidth = maxWidth; + it.layout(); + }); + } + + // disabled + //----------------- + if (this.opts.disabled != null) { + this.disabled = this.opts.disabled; + } + + // interaction + //-------------------- + if (this.opts.stacked) { + this.interactive = true; + this.on('pointerdown', this.onStart.bind(this)); + this.on('pointermove', this.onMove.bind(this)); + this.on('pointerup', this.onEnd.bind(this)); + this.on('pointercancel', this.onEnd.bind(this)); + this.on('pointerout', this.onEnd.bind(this)); + this.on('pointerupoutside', this.onEnd.bind(this)); + this.on('scroll', this.onScroll.bind(this)); + + // mousewheel + //-------------------- + if (this.opts.app) { + const app = this.opts.app; + app.view.addEventListener('mousewheel', event => { + const bounds = this.getBounds(); + const x = event.clientX - app.view.getBoundingClientRect().left; + const y = event.clientY - app.view.getBoundingClientRect().top; + if (bounds.contains(x, y)) { + event.preventDefault(); + this.emit('scroll', event); + } + }); + } + + const background = new PIXI.Graphics(); + background.beginFill(0x000000, 0); + background.drawRect(0, 0, this.width, this.height); + background.endFill(); + this.addChildAt(background, 0); + + this.__initWidth = this.container.width; + this.__deltaWidth = this.container.width - this.opts.maxWidth; + } + + return this + } + + /** + * Should be called to refresh the layout of the button group. Can be used after resizing. + * + * @return {ButtonGroup} A reference to the button group for chaining. + */ + layout() { + // set position + //----------------- + this.position.set(this.opts.x, this.opts.y); + + // draw + //----------------- + this.draw(); + + // stacked + //----------------- + if (this.opts.stacked) { + this.stack(); + } + + return this + } + + /** + * Draws the canvas. + * + * @private + * @return {ButtonGroup} A reference to the button group for chaining. + */ + draw() { + if (this.opts.margin === 0) { + this.buttons.forEach(it => it.hide()); + + this.container.clear(); + this.container.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha); + this.container.beginFill(this.opts.fill, this.opts.fillAlpha); + this.container.drawRoundedRect(0, 0, this.width, this.height, this.opts.radius); + + // Draw borders + this.container.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha / 2); + + this.buttons.forEach((it, i) => { + if (i > 0) { + this.container.moveTo(it.x, it.y); + + if (this.opts.orientation === 'horizontal') { + this.container.lineTo(it.x, it.height); + } else { + this.container.lineTo(it.width, it.y); + } + } + }); + + this.container.endFill(); + } + + return this + } + + /** + * Gets or sets the disabled state. When disabled, no button of the button group can be clicked. + * + * @member {boolean} + */ + get disabled() { + return this._disabled + } + + set disabled(value) { + this._disabled = value; + + this.buttons.forEach(it => (it.disabled = value)); + } + + /** + * Searches all buttons of the button group and returns the maximum width of one button. + * + * @private + * @return {number} The maximum with of a button of the button group. + */ + getMaxButtonWidth() { + let widths = this.buttons.map(it => it.width); + + return Math.max(...widths) + } + + /** + * Shows the button group (sets his alpha value to 1). + * + * @return {ButtonGroup} A reference to the button group for chaining. + */ + show() { + this.alpha = 1; + + return this + } + + /** + * Hides the button group (sets his alpha value to 0). + * + * @return {ButtonGroup} A reference to the button group for chaining. + */ + hide() { + this.alpha = 0; + + return this + } + + /** + * + * @private + * @param {*} event + */ + onStart(event) { + this.__dragging = true; + + this.capture(event); + + this.__delta = { + x: this.container.position.x - event.data.global.x, + y: this.container.position.y - event.data.global.y + }; + + TweenLite.killTweensOf(this.container.position, { x: true, y: true }); + if (typeof ThrowPropsPlugin != 'undefined') { + ThrowPropsPlugin.track(this.container.position, 'x,y'); + } + } + + /** + * + * @private + * @param {*} event + */ + onMove(event) { + if (this.__dragging) { + this.capture(event); + + if (this.opts.orientation === 'horizontal') { + this.container.position.x = event.data.global.x + this.__delta.x; + } else { + this.container.position.y = event.data.global.y + this.__delta.y; + } + + if (this.opts.stacked) { + this.stack(); + } + } + } + + /** + * + * @private + * @param {*} event + */ + onEnd(event) { + if (this.__dragging) { + this.__dragging = false; + + this.capture(event); + + if (typeof ThrowPropsPlugin != 'undefined') { + const throwProps = { x: { velocity: 'auto' }, y: { velocity: 'auto' } }; + + if (this.opts.orientation === 'horizontal') { + const distanceToLeft = this.container.x; + const distanceToRight = this.opts.maxWidth - this.container.x - this.__initWidth; + if (distanceToLeft > 0 && distanceToLeft > distanceToRight) { + throwProps.x.end = 0; + } else if (distanceToRight > 0 && distanceToRight > distanceToLeft) { + throwProps.x.end = this.opts.maxWidth - this.__initWidth; + } + } else { + const distanceToTop = this.container.y; + const distanceToBottom = this.opts.maxHeight - this.container.y - this.container.height; + if (distanceToTop > 0 && distanceToTop > distanceToBottom) { + throwProps.y.end = 0; + } else if (distanceToBottom > 0 && distanceToBottom > distanceToTop) { + throwProps.y.end = this.opts.maxHeight - this.container.height; + } + } + + ThrowPropsPlugin.to( + this.container.position, + { + throwProps, + ease: Strong.easeOut, + onUpdate: () => this.stack(), + onComplete: () => ThrowPropsPlugin.untrack(this.container.position) + }, + 0.8, + 0.4 + ); + } + } + } + + /** + * + * @private + * @param {*} event + */ + onScroll(event) { + this.capture(event); + + if (this.opts.orientation === 'horizontal') { + this.container.position.x -= event.deltaX; + if (this.container.position.x > 0) { + this.container.position.x = 0; + } else if (this.container.position.x + this.__initWidth < this.opts.maxWidth) { + this.container.position.x = this.opts.maxWidth - this.__initWidth; + } + } else { + this.container.position.y -= event.deltaY; + if (this.container.position.y > 0) { + this.container.position.y = 0; + } else if (this.container.position.y + this.container.height < this.opts.maxHeight) { + this.container.position.y = this.opts.maxHeight - this.container.height; + } + } + + if (this.opts.stacked) { + this.stack(); + } + } + + /** + * Captures an event to inform InteractionMapper about processed events. + * + * @param {event|PIXI.InteractionEvent} event - The PIXI event to capture. + */ + capture(event) { + const originalEvent = event.data && event.data.originalEvent ? event.data.originalEvent : event; + Events$1.capturedBy(originalEvent, this); + } + + /** + * + */ + stack() { + this.buttons.forEach((it, index) => { + if (it.__originalPosition.x + this.container.x < 0) { + // left border + it.x = -this.container.x; + } else if (it.__originalPosition.x + it.width > Math.abs(this.container.x) + this.opts.maxWidth) { + // right border + it.x = Math.abs(this.container.x) + this.opts.maxWidth - it.width; + } else { + it.x = it.__originalPosition.x; + } + }); + + this.buttons.sort((a, b) => { + const delta = Math.abs(this.container.x) + this.opts.maxWidth / 2; + const distanceA = Math.abs(a.x - delta); + const distanceB = Math.abs(b.x - delta); + if (distanceA > distanceB) { + return -1 + } else if (distanceB > distanceA) { + return 1 + } else { + return 0 + } + }); + + this.buttons.forEach(it => { + const parent = it.parent; + parent.removeChild(it); + parent.addChild(it); + }); + } + } + + /** + * Class that represents a PixiJS InteractivePopup. + * The class is used for various other Popup-like classes + * like Popup, Message... + * + * @class + * @abstract + * @extends AbstractPopup + */ + class InteractivePopup extends AbstractPopup { + /** + * Creates an instance of an InteractivePopup (only for internal use). + * + * @constructor + * @param {object} [opts] - An options object to specify to style and behaviour of the popup. + * @param {boolean} [opts.closeOnPopup=false] - Should the popup be closed when the user clicks on the popup? + * @param {boolean} [opts.closeButton=true] - Should a close button be displayed on the upper right corner? + * @param {object} [opts.button] - A Button object to be display on the lower right corner. + * @param {object} [opts.buttonGroup] - A ButtonGroup object to be displayed on the lower right corner. + */ + constructor(opts = {}) { + opts = Object.assign( + {}, + { + closeOnPopup: false, + closeButton: true, + button: null, + buttonGroup: null + }, + opts + ); + + super(opts); + + this._closeButton = null; + this._buttons = null; + + // padding + this.smallPadding = this.opts.padding / 2; + + // setup + //----------------- + this.setup(); + + // layout + //----------------- + this.layout(); + } + + /** + * Creates the framework and instantiates everything. + * + * @private + * @return {AbstractPopup} A reference to the popup for chaining. + */ + setup() { + super.setup(); + + // interaction + //----------------- + this.on('pointerup', e => { + if (this.opts.closeOnPopup) { + this.hide(); + } else { + e.stopPropagation(); + } + }); + + // closeButton + //----------------- + if (this.opts.closeButton) { + let closeButton = PIXI.Sprite.fromImage('../../assets/icons/close.png', true); + closeButton.width = this.headerStyle.fontSize; + closeButton.height = closeButton.width; + closeButton.tint = this.theme.color2; + // This is needed, because the closeButton belongs to the content. The popup must resize with the closeButton. + if (this._header) { + closeButton.x = this._header.width + this.innerPadding; + } else if (this._content) { + closeButton.x = this._content.width + this.innerPadding; + } + + closeButton.interactive = true; + closeButton.buttonMode = true; + closeButton.on('pointerdown', e => { + this.hide(); + }); + + this._closeButton = closeButton; + this.addChild(closeButton); + + // maxWidth is set and a closeButton should be displayed + //----------------- + if (this.opts.maxWidth) { + const wordWrapWidth = + this.opts.maxWidth - 2 * this.opts.padding - this.smallPadding - this._closeButton.width; + if (this._header) { + this.headerStyle.wordWrapWidth = wordWrapWidth; + } else if (this._content) { + this.textStyle.wordWrapWidth = wordWrapWidth; + } + } + } + + // buttons + //----------------- + if (this.opts.button || this.opts.buttonGroup) { + if (this.opts.button) { + this._buttons = new Button(Object.assign({ textStyle: this.theme.textStyleSmall }, this.opts.button)); + } else { + this._buttons = new ButtonGroup( + Object.assign({ textStyle: this.theme.textStyleSmall }, this.opts.buttonGroup) + ); + } + this.addChild(this._buttons); + + this._buttons.y = this.innerPadding + this.sy; + } + + return this + } + + /** + * Should be called to refresh the layout of the popup. Can be used after resizing. + * + * @return {AbstractPopup} A reference to the popup for chaining. + */ + layout() { + super.layout(); + + // closeButton + //----------------- + if (this.opts.closeButton) { + this._closeButton.x = this.wantedWidth - this.smallPadding - this._closeButton.width; + this._closeButton.y = this.smallPadding; + } + + // buttons + //----------------- + if (this._buttons) { + this._buttons.x = this.wantedWidth - this.opts.padding - this._buttons.width; + this._buttons.y = this.wantedHeight - this.opts.padding - this._buttons.height; + } + + return this + } + + /** + * Calculates the size of the children of the AbstractPopup. + * Cannot use getBounds() because it is not updated when children + * are removed. + * + * @private + * @override + * @returns {object} An JavaScript object width the keys width and height. + */ + getInnerSize() { + let size = super.getInnerSize(); + + if (this._closeButton) { + size.width += this.smallPadding + this._closeButton.width; + } + + if (this._buttons) { + size.width = Math.max(size.width, this._buttons.x + this._buttons.width); + size.height += this.innerPadding + this._buttons.height; + } + + return size + } + } + + /** + * Class that represents a PixiJS Popup. + * + * @example + * // Create the popup + * const popup = new Popup({ + * header: 'Goethe', + * content: 'Man kann die Erfahrung nicht früh genug machen, wie entbehrlich man in der Welt ist.' + * }) + * + * // Add the popup to a DisplayObject + * app.scene.addChild(popup) + * + * @class + * @extends InteractivePopup + * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/popup.html|DocTest} + */ + class Popup extends InteractivePopup { + /** + * Creates an instance of a Popup. + * + * @constructor + * @param {object} [opts] - An options object to specify to style and behaviour of the popup. + * @param {boolean} [opts.closeButton=false] - Should a close button be displayed on the upper right corner? + * @param {number} [opts.minWidth=0] - The minimum width of the popup. + * @param {number} [opts.minHeight=0] - The minimum height of the popup. + */ + constructor(opts = {}) { + opts = Object.assign( + {}, + { + closeButton: false, + minWidth: 0, + minHeight: 0 + }, + opts + ); + + super(opts); + } + } + + /** + * Class that represents a PixiJS Modal. + * + * @example + * // Create the button and the modal when clicked + * const button = new Button({ + * label: 'Show Modal', + * action: e => { + * const modal = new Modal({ + * app: app, + * header: 'This is the header', + * content: 'This is the text.' + * }) + * app.scene.addChild(modal) + * } + * }) + * + * // Add the button to a DisplayObject + * app.scene.addChild(button) + * + * @class + * @extends PIXI.Container + * @extends InteractivePopup + * @see {@link http://pixijs.download/dev/docs/PIXI.Container.html|PIXI.Container} + * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/modal.html|DocTest} + */ + class Modal extends PIXI.Container { + /** + * Creates an instance of a Modal. + * + * @constructor + * @param {object} [opts] - An options object to specify to style and behaviour of the modal. + * @param {number} [opts.id=auto generated] - The id of the modal. + * @param {PIXIApp} [opts.app=window.app] - The app where the modal belongs to. + * @param {number} [opts.backgroundFill=Theme.background] - The color of the background. + * @param {number} [opts.backgroundFillAlpha=0.6] - The opacity of the background. + * @param {boolean} [opts.closeOnBackground=true] - Should the modal be closed when the user clicks the + * background? + * @param {boolean} [opts.visible=true] - Is the modal initially visible (property visible)? + */ + constructor(opts = {}) { + super(); + + const theme = Theme.fromString(opts.theme); + this.theme = theme; + + this.opts = Object.assign( + {}, + { + id: PIXI.utils.uid(), + app: window.app, + backgroundFill: theme.background, + backgroundFillAlpha: 0.6, + closeOnBackground: true, + visible: true + }, + opts + ); + + this.id = this.opts.id; + + this.background = null; + this.popup = null; + + this.alpha = 0; + this.visible = this.opts.visible; + + // setup + //----------------- + this.setup(); + + // layout + //----------------- + this.layout(); + } + + /** + * Creates children and instantiates everything. + * + * @private + * @return {Modal} A reference to the modal for chaining. + */ + setup() { + // interaction + //----------------- + this.interactive = true; + this.on('added', e => { + if (this.visible) { + this.show(); + } + }); + + // background + //----------------- + let background = new PIXI.Graphics(); + this.background = background; + this.addChild(this.background); + + if (this.opts.closeOnBackground) { + background.interactive = true; + background.on('pointerup', e => { + this.hide(); + }); + } + + // popup + //----------------- + const popupOpts = Object.assign({}, this.opts, { + visible: true, + onHidden: () => { + this.hide(); + } + }); + let popup = new InteractivePopup(popupOpts); + this.popup = popup; + this.addChild(popup); + popup.show(); + + return this + } + + /** + * Should be called to refresh the layout of the modal. Can be used after resizing. + * + * @return {Modal} A reference to the modal for chaining. + */ + layout() { + const width = this.opts.app.size.width; + const height = this.opts.app.size.height; + + // background + //----------------- + this.background.clear(); + this.background.beginFill(this.opts.backgroundFill, this.opts.backgroundFillAlpha); + this.background.drawRect(0, 0, width, height); + this.background.endFill(); + + // position + this.popup.x = width / 2 - this.popup.width / 2; + this.popup.y = height / 2 - this.popup.height / 2; + + return this + } + + /** + * Shows the modal (sets his alpha values to 1). + * + * @return {Modal} A reference to the modal for chaining. + */ + show() { + TweenLite.to(this, this.theme.fast, { + alpha: 1, + onStart: () => (this.visible = true) + }); + + return this + } + + /** + * Hides the modal (sets his alpha values to 0). + * + * @return {Modal} A reference to the modal for chaining. + */ + hide() { + TweenLite.to(this, this.theme.fast, { + alpha: 0, + onComplete: () => (this.visible = false) + }); + + return this + } + + /** + * Sets or gets the header. The getter always returns a PIXI.Text object. The setter can receive + * a string or a PIXI.Text object. + * + * @member {string|PIXI.Text} + */ + get header() { + return this.popup.header + } + set header(value) { + this.opts.header = value; + this.background.destroy(); + this.popup.destroy(); + this.setup().layout(); + } + + /** + * Sets or gets the content. The getter always returns an PIXI.DisplayObject. The setter can receive + * a string or a PIXI.DisplayObject. + * + * @member {string|PIXI.DisplayObject} + */ + get content() { + return this.popup.content + } + set content(value) { + this.opts.content = value; + this.background.destroy(); + this.popup.destroy(); + this.setup().layout(); + } + } + + /** + * Class that represents a Message. A message pops up and disappears after a specific amount of time. + * + * @example + * // Create the PixiJS App + * const app = new PIXIApp({ + * view: canvas, + * width: 900, + * height: 250 + * }).setup().run() + * + * // Create a button + * let button = new Button({ + * label: 'Click me', + * action: e => { + * const message = new Message({ + * app: app, + * header: 'Header', + * content: 'Text.' + * }) + * app.scene.addChild(message) + * } + * }) + * + * // Add the button to the scene + * app.scene.addChild(button) + * + * @class + * @extends InteractivePopup + * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/message.html|DocTest} + */ + class Message extends InteractivePopup { + /** + * Creates an instance of a Message. + * + * @constructor + * @param {object} [opts] - An options object to specify to style and behaviour of the message. + * @param {PIXIApp} [opts.app=window.app] - The PIXIApp where this message belongs to. + * @param {boolean} [opts.closeButton=false] - Should a close button be displayed in the upper right corner? + * @param {number} [opts.minWidth=280] - The minimum width of the message box. Automatically expands with the content. + * @param {number} [opts.minHeight=100] - The minimum height of the message box. Automatically expands with the content. + * @param {number} [opts.margin=Theme.margin] - The outer spacing of the message box. + * @param {string} [opts.align=right] - The horizontal position of the message box relative to the app. Possible + * values are left, center, right. + * @param {string} [opts.verticalAlign=top] - The vertical position of the message box relative to the app. Possible + * values are top, middle, bottom. + * @param {number} [opts.duration=5] - The duration in seconds when the message box should disappear. + * @param {boolean} [opts.autoClose=true] - Should the message box be closed automatically? + * @param {number} [opts.closeDuration=Theme.fast] - The duration in seconds of the closing of the message box. + */ + constructor(opts = {}) { + const theme = Theme.fromString(opts.theme); + + opts = Object.assign( + {}, + { + app: window.app, + closeButton: false, + minWidth: 280, + minHeight: 100, + margin: theme.margin, + align: 'right', // left, center, right + verticalAlign: 'top', // top, middle, bottom + duration: 5, + autoClose: true, + closeDuration: theme.fast + }, + opts + ); + + super(opts); + } + + /** + * Relayouts the position of the message box. + * + * @return {Message} Returns the message box for chaining. + */ + layout() { + super.layout(); + + // horizontal + switch (this.opts.align) { + case 'left': + this.x = this.opts.margin; + break + case 'center': + this.x = this.opts.app.size.width / 2 - this.width / 2; + break + case 'right': + this.x = this.opts.app.size.width - this.opts.margin - this.width; + break + } + + // vertical + switch (this.opts.verticalAlign) { + case 'top': + this.y = this.opts.margin; + break + case 'middle': + this.y = this.opts.app.size.height / 2 - this.height / 2; + break + case 'bottom': + this.y = this.opts.app.size.height - this.opts.margin - this.height; + break + } + } + + /** + * Shows the message box. + * + * @private + */ + show() { + super.show(); + + if (this.opts.autoClose) { + window.setTimeout(() => { + this.hide(); + }, this.opts.duration * 1000); + } + } + } + /* global apollo, subscriptions, gql */ /** @@ -4015,10 +4055,7 @@ let dy = 0; let canvas = this.renderer.view; let context = canvas.getContext('webgl'); - if ( - context.drawingBufferWidth < canvas.width || - context.drawingBufferHeight < canvas.height - ) { + if (context.drawingBufferWidth < canvas.width || context.drawingBufferHeight < canvas.height) { extendWidth = context.drawingBufferWidth / canvas.width; extendHeight = context.drawingBufferHeight / canvas.height; //dx = wantedWidth - context.drawingBufferWidth @@ -4130,10 +4167,7 @@ console.log('App is in fullScreen mode or autoResize mode'); const resizeDebounced = debounce(event => this.resize(event), 50); window.addEventListener('resize', resizeDebounced); - document.body.addEventListener( - 'orientationchange', - this.checkOrientation.bind(this) - ); + document.body.addEventListener('orientationchange', this.checkOrientation.bind(this)); } if (monkeyPatchMapping) { console.log('Using monkey patched coordinate mapping'); @@ -4164,18 +4198,12 @@ uri: '/graphql' }); - const wsClient = new subscriptions.SubscriptionClient( - `wss://${location.hostname}/subscriptions`, - { - reconnect: true, - connectionParams: {} - } - ); + const wsClient = new subscriptions.SubscriptionClient(`wss://${location.hostname}/subscriptions`, { + reconnect: true, + connectionParams: {} + }); - const networkInterfaceWithSubscriptions = subscriptions.addGraphQLSubscriptions( - networkInterface, - wsClient - ); + const networkInterfaceWithSubscriptions = subscriptions.addGraphQLSubscriptions(networkInterface, wsClient); this.apolloClient = new apollo.ApolloClient({ networkInterface: networkInterfaceWithSubscriptions @@ -4311,10 +4339,7 @@ * @param {number} [opts.height=window.innerHeight] - The height of the app to resize to. * @return {PIXIApp} - Returns the PIXIApp for chaining. */ - resize( - event, - { width = window.innerWidth, height = window.innerHeight } = {} - ) { + resize(event, { width = window.innerWidth, height = window.innerHeight } = {}) { this.width = width; this.height = height; this.expandRenderer(); @@ -4335,8 +4360,7 @@ monkeyPatchPixiMapping() { if (this.originalMapPositionToPoint === null) { let interactionManager = this.renderer.plugins.interaction; - this.originalMapPositionToPoint = - interactionManager.mapPositionToPoint; + this.originalMapPositionToPoint = interactionManager.mapPositionToPoint; interactionManager.mapPositionToPoint = (point, x, y) => { return this.fixedMapPositionToPoint(point, x, y) }; @@ -4365,8 +4389,7 @@ if ( context !== null && - (context.drawingBufferWidth < canvas.width || - context.drawingBufferHeight < canvas.height) + (context.drawingBufferWidth < canvas.width || context.drawingBufferHeight < canvas.height) ) { extendWidth = context.drawingBufferWidth / canvas.width; extendHeight = context.drawingBufferHeight / canvas.height; @@ -4375,12 +4398,7 @@ } x *= extendWidth; y *= extendHeight; - return this.originalMapPositionToPoint.call( - interactionManager, - local, - x, - y + dy - ) + return this.originalMapPositionToPoint.call(interactionManager, local, x, y + dy) } /** @@ -4431,9 +4449,7 @@ * @return {Modal} Returns the Modal object. */ modal(opts = {}) { - let modal = new Modal( - Object.assign({ theme: this.theme }, opts, { app: this }) - ); + let modal = new Modal(Object.assign({ theme: this.theme }, opts, { app: this })); this.scene.addChild(modal); return modal @@ -4446,9 +4462,7 @@ * @return {Message} Returns the Message object. */ message(opts = {}) { - let message = new Message( - Object.assign({ theme: this.theme }, opts, { app: this }) - ); + let message = new Message(Object.assign({ theme: this.theme }, opts, { app: this })); this.scene.addChild(message); return message @@ -4467,11 +4481,7 @@ * @param {boolean} [opts.progress=false] - Should a progress bar display the loading status? * @return {PIXIApp} The PIXIApp object for chaining. */ - loadSprites( - resources, - loaded = null, - { resolutionDependent = true, progress = false } = {} - ) { + loadSprites(resources, loaded = null, { resolutionDependent = true, progress = false } = {}) { this.loadTextures( resources, textures => { @@ -4504,11 +4514,7 @@ * @param {boolean} [opts.progress=false] - Should a progress bar display the loading status? * @return {PIXIApp} The PIXIApp object for chaining. */ - loadTextures( - resources, - loaded = null, - { resolutionDependent = true, progress = false } = {} - ) { + loadTextures(resources, loaded = null, { resolutionDependent = true, progress = false } = {}) { if (!Array.isArray(resources)) { resources = [resources]; } @@ -4521,16 +4527,10 @@ let resolution = Math.round(this.renderer.resolution); switch (resolution) { case 2: - loader.add( - resource, - resource.replace(/\.([^.]*)$/, '@2x.$1') - ); + loader.add(resource, resource.replace(/\.([^.]*)$/, '@2x.$1')); break case 3: - loader.add( - resource, - resource.replace(/\.([^.]*)$/, '@3x.$1') - ); + loader.add(resource, resource.replace(/\.([^.]*)$/, '@3x.$1')); break default: loader.add(resource); @@ -4695,11 +4695,7 @@ pixiGlobal.x *= resolution; pixiGlobal.y *= resolution; // console.log("app.convertPointFromNodeToPage", pixiGlobal) - return window.convertPointFromNodeToPage( - app.view, - pixiGlobal.x, - pixiGlobal.y - ) + return window.convertPointFromNodeToPage(app.view, pixiGlobal.x, pixiGlobal.y) } } @@ -4832,9 +4828,7 @@ return this.tiltShiftXFilter.shape } set shape(value) { - this.tiltShiftXFilter.shape = this.tiltShiftYFilter.shape = this.normalize( - value - ); + this.tiltShiftXFilter.shape = this.tiltShiftYFilter.shape = this.normalize(value); } /** @@ -4953,12 +4947,7 @@ this.uniforms.circle = [shape.x, shape.y, shape.r]; } else { this.uniforms.shape = 2; - this.uniforms.rectangle = [ - shape.x, - shape.y, - shape.x + shape.width, - shape.y + shape.height - ]; + this.uniforms.rectangle = [shape.x, shape.y, shape.x + shape.width, shape.y + shape.height]; } this.uniforms.blur = blur; this.uniforms.delta = new PIXI.Point(0, 0); @@ -4992,12 +4981,7 @@ return new PIXI.Circle(circle[0], circle[1], circle[2]) } else { const rectangle = this.uniforms.rectangle; - return new PIXI.Rectangle( - rectangle[0], - rectangle[1], - rectangle[2], - rectangle[3] - ) + return new PIXI.Rectangle(rectangle[0], rectangle[1], rectangle[2], rectangle[3]) } } set shape(value) { @@ -5006,12 +4990,7 @@ this.uniforms.circle = [value.x, value.y, value.r]; } else { this.uniforms.shape = 2; - this.uniforms.rectangle = [ - value.x, - value.y, - value.x + value.width, - value.y + value.height - ]; + this.uniforms.rectangle = [value.x, value.y, value.x + value.width, value.y + value.height]; } } } @@ -5141,11 +5120,7 @@ } } - static setup({ - log = console.log, - warn = console.warn, - error = console.error - } = {}) { + static setup({ log = console.log, warn = console.warn, error = console.error } = {}) { logHandlers.log = log; logHandlers.warn = warn; logHandlers.error = error; @@ -5352,10 +5327,10 @@ delta() { let prev = []; let curr = []; - let cm = { x: 0, y: 0}; - let pm = { x: 0, y: 0}; + let cm = { x: 0, y: 0 }; + let pm = { x: 0, y: 0 }; let count = 0; - for(let key of this.current.keys()) { + for (let key of this.current.keys()) { if (this.previous.has(key)) { let p = this.previous.get(key); let c = this.current.get(key); @@ -5374,7 +5349,7 @@ let scaled = 0; let alpha = 0; let zoom = 1; - for(let i=0; i t1 + this.longPressTime; if (tookLong) { @@ -5656,10 +5599,7 @@ this.unregisterTap(key); } } - if ( - this.tapTimestamps.has(key) && - performance.now() > this.tapTimestamps.get(key) + this.tapDuration - ) { + if (this.tapTimestamps.has(key) && performance.now() > this.tapTimestamps.get(key) + this.tapDuration) { //console.log("tap too long") this.unregisterTap(key); } @@ -5684,11 +5624,7 @@ isLongPress(key) { let ended = this.ended.get(key); let start = this.start.get(key); - if ( - start && - ended && - Points.distance(ended, start) < this.tapDistance - ) { + if (start && ended && Points.distance(ended, start) < this.tapDistance) { let t1 = this.timestamps.get(key); let tookLong = performance.now() > t1 + this.longPressTime; if (tookLong) { @@ -5755,9 +5691,7 @@ setupInteraction() { if (this.debug) { - let error = this.targetInterface.implementationError( - this.target.constructor - ); + let error = this.targetInterface.implementationError(this.target.constructor); if (error != null) { throw new Error('Expected IInteractionTarget: ' + error) } @@ -5795,16 +5729,11 @@ element.addEventListener( 'pointermove', e => { - if (this.debug) - console.log('pointermove', e.pointerId, e.pointerType); + if (this.debug) console.log('pointermove', e.pointerId, e.pointerType); - if ( - e.pointerType == 'touch' || - (e.pointerType == 'mouse' && Events$1.isPointerDown(e)) - ) { + if (e.pointerType == 'touch' || (e.pointerType == 'mouse' && Events$1.isPointerDown(e))) { // this.capture(e) && - if (this.debug) - console.log('pointermove captured', e.pointerId); + if (this.debug) console.log('pointermove captured', e.pointerId); this.onMove(e); } }, @@ -5813,8 +5742,7 @@ element.addEventListener( 'pointerup', e => { - if (this.debug) - console.log('pointerup', e.pointerId, e.pointerType); + if (this.debug) console.log('pointerup', e.pointerId, e.pointerType); this.onEnd(e); if (this.capturePointerEvents) { try { @@ -5829,11 +5757,9 @@ element.addEventListener( 'pointercancel', e => { - if (this.debug) - console.log('pointercancel', e.pointerId, e.pointerType); + if (this.debug) console.log('pointercancel', e.pointerId, e.pointerType); this.onEnd(e); - if (this.capturePointerEvents) - element.releasePointerCapture(e.pointerId); + if (this.capturePointerEvents) element.releasePointerCapture(e.pointerId); }, useCapture ); @@ -5842,12 +5768,7 @@ element.addEventListener( 'pointerleave', e => { - if (this.debug) - console.log( - 'pointerleave', - e.pointerId, - e.pointerType - ); + if (this.debug) console.log('pointerleave', e.pointerId, e.pointerType); if (e.target == element) this.onEnd(e); }, useCapture @@ -5858,12 +5779,7 @@ element.addEventListener( 'pointerout', e => { - if (this.debug) - console.log( - 'pointerout', - e.pointerId, - e.pointerType - ); + if (this.debug) console.log('pointerout', e.pointerId, e.pointerType); if (e.target == element) this.onEnd(e); }, useCapture @@ -5874,13 +5790,7 @@ window.addEventListener( 'pointerout', e => { - if (this.debug) - console.log( - 'pointerout', - e.pointerId, - e.pointerType, - e.target - ); + if (this.debug) console.log('pointerout', e.pointerId, e.pointerType, e.target); if (e.target == element) { this.onEnd(e); } @@ -5893,8 +5803,7 @@ element.addEventListener( 'touchstart', e => { - if (this.debug) - console.log('touchstart', this.touchPoints(e)); + if (this.debug) console.log('touchstart', this.touchPoints(e)); if (this.capture(e)) { for (let touch of e.changedTouches) { this.onStart(touch); @@ -5906,8 +5815,7 @@ element.addEventListener( 'touchmove', e => { - if (this.debug) - console.log('touchmove', this.touchPoints(e), e); + if (this.debug) console.log('touchmove', this.touchPoints(e), e); for (let touch of e.changedTouches) { this.onMove(touch); } @@ -5930,12 +5838,7 @@ element.addEventListener( 'touchcancel', e => { - if (this.debug) - console.log( - 'touchcancel', - e.targetTouches.length, - e.changedTouches.length - ); + if (this.debug) console.log('touchcancel', e.targetTouches.length, e.changedTouches.length); for (let touch of e.changedTouches) { this.onEnd(touch); } @@ -5984,9 +5887,7 @@ e => { if (e.target == element) { this.onEnd(e); - console.warn( - "Shouldn't happen: mouseout ends interaction" - ); + console.warn("Shouldn't happen: mouseout ends interaction"); } }, useCapture @@ -6027,16 +5928,8 @@ } setupMouseWheelInteraction() { - this.mouseWheelElement.addEventListener( - 'mousewheel', - this.onMouseWheel.bind(this), - true - ); - this.mouseWheelElement.addEventListener( - 'DOMMouseScroll', - this.onMouseWheel.bind(this), - true - ); + this.mouseWheelElement.addEventListener('mousewheel', this.onMouseWheel.bind(this), true); + this.mouseWheelElement.addEventListener('DOMMouseScroll', this.onMouseWheel.bind(this), true); } onMouseWheel(event) { @@ -6098,10 +5991,7 @@ break } case 'Touch': { - let id = - event.touchType === 'stylus' - ? 'stylus' - : event.identifier.toString(); + let id = event.touchType === 'stylus' ? 'stylus' : event.identifier.toString(); result[id] = this.getPosition(event); break } @@ -6151,10 +6041,7 @@ let point = extracted[key]; let updated = this.interaction.update(key, point); if (updated) { - console.warn( - "new pointer in updateInteraction shouldn't happen", - key - ); + console.warn("new pointer in updateInteraction shouldn't happen", key); this.interactionStarted(event, key, point); } } @@ -6286,11 +6173,7 @@ onEnd(event) { let extracted = this.extractPoint(event, 'changedTouches'); this.endInteraction(event, extracted); - let mapped = this.interaction.mapInteraction( - extracted, - ['ended'], - this.mapPositionToPoint.bind(this) - ); + let mapped = this.interaction.mapInteraction(extracted, ['ended'], this.mapPositionToPoint.bind(this)); for (let [target, interaction] of mapped.entries()) { target.onEnd(event, interaction); } @@ -6324,10 +6207,7 @@ // convert to array types = Array.isArray(types) ? types : types.split(/\s/); - if ( - elements instanceof NodeList || - elements instanceof HTMLCollection - ) { + if (elements instanceof NodeList || elements instanceof HTMLCollection) { elements = Array.from(elements); } elements = Array.isArray(elements) ? elements : [elements]; @@ -6336,9 +6216,7 @@ const type = types[i].toLowerCase(); // list of hammer events - const useHammer = /^(tap|doubletap|press|pan|swipe|pinch|rotate).*$/.test( - type - ); + const useHammer = /^(tap|doubletap|press|pan|swipe|pinch|rotate).*$/.test(type); // if it is a hammer event if (useHammer) { @@ -6353,33 +6231,15 @@ // recognizers if (type.startsWith('pan')) { - hammer - .get('pan') - .set( - Object.assign( - { direction: Hammer.DIRECTION_ALL }, - opts - ) - ); + hammer.get('pan').set(Object.assign({ direction: Hammer.DIRECTION_ALL }, opts)); } else if (type.startsWith('pinch')) { - hammer - .get('pinch') - .set(Object.assign({ enable: true }, opts)); + hammer.get('pinch').set(Object.assign({ enable: true }, opts)); } else if (type.startsWith('press')) { hammer.get('press').set(opts); } else if (type.startsWith('rotate')) { - hammer - .get('rotate') - .set(Object.assign({ enable: true }, opts)); + hammer.get('rotate').set(Object.assign({ enable: true }, opts)); } else if (type.startsWith('swipe')) { - hammer - .get('swipe') - .set( - Object.assign( - { direction: Hammer.DIRECTION_ALL }, - opts - ) - ); + hammer.get('swipe').set(Object.assign({ direction: Hammer.DIRECTION_ALL }, opts)); } else if (type.startsWith('tap')) { hammer.get('tap').set(opts); } @@ -6450,20 +6310,12 @@ */ static get isElectron() { // Renderer process - if ( - typeof window !== 'undefined' && - typeof window.process === 'object' && - window.process.type === 'renderer' - ) { + if (typeof window !== 'undefined' && typeof window.process === 'object' && window.process.type === 'renderer') { return true } // Main process - if ( - typeof process !== 'undefined' && - typeof process.versions === 'object' && - !!process.versions.electron - ) { + if (typeof process !== 'undefined' && typeof process.versions === 'object' && !!process.versions.electron) { return true } @@ -6531,9 +6383,7 @@ class CapabilitiesTests { static testConfirm() { let bool = confirm('Please confirm'); - document.getElementById('demo').innerHTML = bool - ? 'Confirmed' - : 'Not confirmed'; + document.getElementById('demo').innerHTML = bool ? 'Confirmed' : 'Not confirmed'; } static testPrompt() { @@ -6554,9 +6404,7 @@ } static testMultiTouchTable() { - let value = - 'Is the device a multi-touch table? ' + - Capabilities.isMultiTouchTable; + let value = 'Is the device a multi-touch table? ' + Capabilities.isMultiTouchTable; multi_touch_table.innerHTML = value; } @@ -6617,14 +6465,7 @@ class ScatterEvent extends BaseEvent { constructor( target, - { - translate = { x: 0, y: 0 }, - scale = null, - rotate = 0, - about = null, - fast = false, - type = null - } = {} + { translate = { x: 0, y: 0 }, scale = null, rotate = 0, about = null, fast = false, type = null } = {} ) { super('scatterTransformed', { target: target }); this.translate = translate; @@ -6637,13 +6478,7 @@ toString() { return ( - "Event('scatterTransformed', scale: " + - this.scale + - ' about: ' + - this.about.x + - ', ' + - this.about.y + - ')' + "Event('scatterTransformed', scale: " + this.scale + ' about: ' + this.about.x + ', ' + this.about.y + ')' ) } } @@ -6663,13 +6498,7 @@ } toString() { - return ( - 'Event(scatterResized width: ' + - this.width + - 'height: ' + - this.height + - ')' - ) + return 'Event(scatterResized width: ' + this.width + 'height: ' + this.height + ')' } } @@ -6944,6 +6773,13 @@ close() { if (this.onClose) { this.onClose.forEach(callback => callback(this)); + + /** + Removes self from container when it's closed. + */ + if (this.container) { + this.container.remove(this); + } } } @@ -7077,10 +6913,7 @@ _checkAutoClose() { if (this.scaleAutoClose) - if ( - this.scale < - this.minScale + this.scaleCloseThreshold - this.scaleCloseBuffer - ) { + if (this.scale < this.minScale + this.scaleCloseThreshold - this.scaleCloseBuffer) { this.zoom(this.minScale, { animate: 0.2, onComplete: this.close.bind(this) @@ -7135,17 +6968,7 @@ this.move(delta, { animate: animate }); } - zoom( - scale, - { - animate = 0, - about = null, - delay = 0, - x = null, - y = null, - onComplete = null - } = {} - ) { + zoom(scale, { animate = 0, about = null, delay = 0, x = null, y = null, onComplete = null } = {}) { let anchor = about || this.center; if (scale != this.scale) { if (animate > 0) { @@ -7196,15 +7019,9 @@ let origin = this.rotationOrigin; let beta = Points.angle(origin, anchor); let distance = Points.distance(origin, anchor); - let { scale: newScale, zoom: thresholdedZoom } = this.calculateScale( - zoom - ); + let { scale: newScale, zoom: thresholdedZoom } = this.calculateScale(zoom); - let newOrigin = Points.arc( - anchor, - beta + rotate, - distance * thresholdedZoom - ); + let newOrigin = Points.arc(anchor, beta + rotate, distance * thresholdedZoom); let extra = Points.subtract(newOrigin, origin); let offset = Points.subtract(anchor, origin); this._move(offset); @@ -7267,10 +7084,8 @@ } calculateScaleTransparency() { - let transparency = - (this.scale - this.minScale) / this.scaleCloseThreshold; - transparency = - transparency > 1 ? 1 : transparency < 0 ? 0 : transparency; + let transparency = (this.scale - this.minScale) / this.scaleCloseThreshold; + transparency = transparency > 1 ? 1 : transparency < 0 ? 0 : transparency; return transparency } @@ -7328,8 +7143,7 @@ if (this.scaleAutoClose) { if (this.scale <= this.minScale + this.scaleCloseThreshold) { - if (this.scaleAutoCloseTimeout) - clearTimeout(this.scaleAutoCloseTimeout); + if (this.scaleAutoCloseTimeout) clearTimeout(this.scaleAutoCloseTimeout); this.scaleAutoCloseTimeout = setTimeout(() => { this._checkAutoClose(); }, 600); @@ -7870,10 +7684,8 @@ let resizeH = -r * Math.sin(Angle.degree2radian(phiCorrected)); if ( - (this.element.offsetWidth + resizeW) / this.scale > - (this.width * 0.5) / this.scale && - (this.element.offsetHeight + resizeH) / this.scale > - (this.height * 0.3) / this.scale + (this.element.offsetWidth + resizeW) / this.scale > (this.width * 0.5) / this.scale && + (this.element.offsetHeight + resizeH) / this.scale > (this.height * 0.3) / this.scale ) TweenLite.to(this.element, 0, { width: this.element.offsetWidth + resizeW / this.scale, @@ -8034,28 +7846,22 @@ frontLoaded(loader) { return new Promise((resolve, reject) => { - let scatter = new DOMScatter( - this.cardWrapper, - this.domScatterContainer, - { - x: loader.x, - y: loader.y, - startScale: loader.scale, - scale: loader.scale, - maxScale: loader.maxScale, - minScale: loader.minScale, - width: loader.wantedWidth, - height: loader.wantedHeight, - rotation: loader.rotation, - translatable: this.translatable, - scalable: this.scalable, - rotatable: this.rotatable, - overdoScaling: this.overdoScaling, - tapDelegate: this.tapDelegateFactory - ? this.tapDelegateFactory(this.cardWrapper) - : null - } - ); + let scatter = new DOMScatter(this.cardWrapper, this.domScatterContainer, { + x: loader.x, + y: loader.y, + startScale: loader.scale, + scale: loader.scale, + maxScale: loader.maxScale, + minScale: loader.minScale, + width: loader.wantedWidth, + height: loader.wantedHeight, + rotation: loader.rotation, + translatable: this.translatable, + scalable: this.scalable, + rotatable: this.rotatable, + overdoScaling: this.overdoScaling, + tapDelegate: this.tapDelegateFactory ? this.tapDelegateFactory(this.cardWrapper) : null + }); if (this.center) { scatter.centerAt(this.center); @@ -8072,9 +7878,7 @@ //Remove callback if (scatter.onTransform) { - let callbackIdx = scatter.onTransform.indexOf( - removeOnMinScale - ); + let callbackIdx = scatter.onTransform.indexOf(removeOnMinScale); scatter.onTransform.splice(callbackIdx, 1); } } @@ -8348,9 +8152,7 @@ this.flipped = !this.flipped; let targetY = this.flipped ? 180 : 0; - let targetZ = this.flipped - ? this.startAngle + this.targetRotation(this.startAngle) - : this.startAngle; + let targetZ = this.flipped ? this.startAngle + this.targetRotation(this.startAngle) : this.startAngle; let targetScale = this.flipped ? this.wantedScale : this.startScale; let w = this.flipped ? this.wantedWidth : this.startWidth; let h = this.flipped ? this.wantedHeight : this.startHeight; @@ -10480,15 +10282,9 @@ this.scatter = scatter; this.backLoader = backLoader; this.scatterLoader = new ScatterLoader(scatter); - this.domFlip = new DOMFlip( - domScatterContainer, - flipTemplate, - this.scatterLoader, - backLoader, - { - onBack: this.backCardClosed.bind(this) - } - ); + this.domFlip = new DOMFlip(domScatterContainer, flipTemplate, this.scatterLoader, backLoader, { + onBack: this.backCardClosed.bind(this) + }); this.setupInfoButton(); } @@ -10515,11 +10311,7 @@ let center = this.scatter.center; let canvas = app.renderer.view; let domNode = this.domFlip.domScatterContainer.element; - let page = window.convertPointFromNodeToPage( - canvas, - center.x * resolution, - center.y * resolution - ); + let page = window.convertPointFromNodeToPage(canvas, center.x * resolution, center.y * resolution); let local = window.convertPointFromPageToNode(domNode, page.x, page.y); return local } @@ -10599,9 +10391,7 @@ canvas.height = 44 * 4; svgImage.onload = e => { let displayObject = this.scatter.displayObject; - canvas - .getContext('2d') - .drawImage(svgImage, 0, 0, canvas.width, canvas.height); + canvas.getContext('2d').drawImage(svgImage, 0, 0, canvas.width, canvas.height); let texure = new PIXI.Texture(new PIXI.BaseTexture(canvas)); this.infoBtn = new PIXI.Sprite(texure); this.infoBtn.anchor.set(0.5, 0.5); @@ -10751,12 +10541,7 @@ // planes //-------------------- - this.setPlanes( - this.opts.focus, - this.opts.near, - this.opts.far, - this.opts.orthographic - ); + this.setPlanes(this.opts.focus, this.opts.near, this.opts.far, this.opts.orthographic); // flipped //-------------------- @@ -10795,9 +10580,7 @@ // shadow //-------------------- - const shadow = new PIXI.projection.Sprite3d( - PIXI.Texture.fromImage('../../assets/images/shadow.png') - ); + const shadow = new PIXI.projection.Sprite3d(PIXI.Texture.fromImage('../../assets/images/shadow.png')); shadow.renderable = false; shadow.anchor.set(0.5); shadow.scale3d.set(0.98); @@ -10889,21 +10672,11 @@ y: this.opts.useBackTransforms ? toCenter.y : fromCenter.y, anchorX: this.opts.useBackTransforms ? toObject.x : fromObject.x, anchorY: this.opts.useBackTransforms ? toObject.y : fromObject.y, - width: this.opts.useBackTransforms - ? toObject.width * 2 - : fromObject.width * 2, - height: this.opts.useBackTransforms - ? toObject.height * 2 - : fromObject.height * 2, - rotation: this.opts.useBackTransforms - ? toObject.rotation - : fromObject.rotation, - skewX: this.opts.useBackTransforms - ? toObject.skew.x - : fromObject.skew.x, - skewY: this.opts.useBackTransforms - ? toObject.skew.y - : fromObject.skew.y + width: this.opts.useBackTransforms ? toObject.width * 2 : fromObject.width * 2, + height: this.opts.useBackTransforms ? toObject.height * 2 : fromObject.height * 2, + rotation: this.opts.useBackTransforms ? toObject.rotation : fromObject.rotation, + skewX: this.opts.useBackTransforms ? toObject.skew.x : fromObject.skew.x, + skewY: this.opts.useBackTransforms ? toObject.skew.y : fromObject.skew.y }; // set toObject end values @@ -10989,15 +10762,11 @@ // shadow //-------------------- - new TimelineMax() - .to(shadow, half, { alpha: 0.3, ease }) - .to(shadow, half, { alpha: 0.7, ease }); + new TimelineMax().to(shadow, half, { alpha: 0.3, ease }).to(shadow, half, { alpha: 0.7, ease }); // blurfilter //-------------------- - new TimelineMax() - .to(blurFilter, half, { blur: 6, ease }) - .to(blurFilter, half, { blur: 0.2, ease }); + new TimelineMax().to(blurFilter, half, { blur: 6, ease }).to(blurFilter, half, { blur: 0.2, ease }); } /** @@ -11011,8 +10780,7 @@ const shadow = this.objects.shadow; const inner = this.objects.inner; - inner.position3d.z = - -Math.sin(inner.euler.y) * front.texture.baseTexture.width * 2; + inner.position3d.z = -Math.sin(inner.euler.y) * front.texture.baseTexture.width * 2; //this.objects.shadow.euler = this.objects.inner.euler shadow.euler.x = -inner.euler.x; @@ -11079,10 +10847,7 @@ generateTexture(displayObject) { // renderTexture //-------------------- - const renderTexture = PIXI.RenderTexture.create( - displayObject.width, - displayObject.height - ); + const renderTexture = PIXI.RenderTexture.create(displayObject.width, displayObject.height); // save position const transform = [ @@ -11169,12 +10934,8 @@ wordWrapWidth: width - this.padding * 2 }; - this.titleTextStyle = new PIXI.TextStyle( - Object.assign({}, style, titleStyle) - ); - this.textTextStyle = new PIXI.TextStyle( - Object.assign({}, style, textStyle) - ); + this.titleTextStyle = new PIXI.TextStyle(Object.assign({}, style, titleStyle)); + this.textTextStyle = new PIXI.TextStyle(Object.assign({}, style, textStyle)); if (title || text) { this.setup(); @@ -11197,10 +10958,7 @@ if (this.opts.text) { this.textText = new PIXI.Text(this.opts.text, this.textTextStyle); - this.textText.position.set( - this.padding, - this.titleY + this.titleHeight + this.padding - ); + this.textText.position.set(this.padding, this.titleY + this.titleHeight + this.padding); this.addChild(this.textText); } @@ -11414,12 +11172,8 @@ let y = 0; // @container: We need to call the constant values, as the container // gets resized, when a child moves outside the original boundaries. - let w = this.container - ? this.containerDimensions.x - : this.backgroundWidth || this.app.width; - let h = this.container - ? this.containerDimensions.y - : this.backgroundHeight || this.app.height; + let w = this.container ? this.containerDimensions.x : this.backgroundWidth || this.app.width; + let h = this.container ? this.containerDimensions.y : this.backgroundHeight || this.app.height; if (this.app.fullscreen && this.app.monkeyPatchMapping) { let fixed = this.mapPositionToPoint({ x: w, y: 0 }); @@ -11502,14 +11256,8 @@ // if (hit) { // console.log("findHitScatter", displayObject) // } - if ( - hit && - this.hitScatter === null && - typeof displayObject != undefined - ) { - this.hitScatter = displayObject.scatter - ? displayObject.scatter - : null; + if (hit && this.hitScatter === null && typeof displayObject != undefined) { + this.hitScatter = displayObject.scatter ? displayObject.scatter : null; } } @@ -11519,10 +11267,7 @@ let local = new PIXI.Point(); let interactionManager = this.renderer.plugins.interaction; interactionManager.mapPositionToPoint(local, point.x, point.y); - if ( - element instanceof DisplayObjectScatter && - element.displayObject.parent != null - ) { + if (element instanceof DisplayObjectScatter && element.displayObject.parent != null) { return element.displayObject.parent.toLocal(local) } return local @@ -11539,12 +11284,7 @@ this.hitScatter = null; let interactionManager = this.renderer.plugins.interaction; let fakeEvent = this.fakeInteractionEvent(local); - interactionManager.processInteractive( - fakeEvent, - this, - this.findHitScatter.bind(this), - true - ); + interactionManager.processInteractive(fakeEvent, this, this.findHitScatter.bind(this), true); if (this.claimEvents) event.claimedByScatter = this.hitScatter; return this.hitScatter } @@ -11558,8 +11298,7 @@ this.hitScatter = null; let interactionManager = this.renderer.plugins.interaction; let displayObject = interactionManager.hitTest(local, this); - if (displayObject != null && displayObject.scatter != null) - this.hitScatter = displayObject.scatter; + if (displayObject != null && displayObject.scatter != null) this.hitScatter = displayObject.scatter; if (this.claimEvents) event.claimedByScatter = this.hitScatter; return this.hitScatter } @@ -11694,8 +11433,7 @@ get container() { // return this.displayObject.parent let obj = this.displayObject; - while (obj.parent != null && !(obj.parent instanceof ScatterContainer)) - obj = obj.parent; + while (obj.parent != null && !(obj.parent instanceof ScatterContainer)) obj = obj.parent; return obj.parent } @@ -11804,8 +11542,7 @@ mapPositionToContainerPoint(point) { // UO: We need the coordinates related to this scatter in case // of nested scatters - if (this.container != null) - return this.container.mapPositionToPoint(point, this) + if (this.container != null) return this.container.mapPositionToPoint(point, this) return point } @@ -11818,10 +11555,7 @@ if (this.displayObject.parent instanceof ScatterContainer) { let scatterContainer = this.displayObject.parent; scatterContainer.bringToFront(this.displayObject); - } else if ( - this.displayObject.parent != null && - this.displayObject.parent.scatter - ) { + } else if (this.displayObject.parent != null && this.displayObject.parent.scatter) { this.displayObject.parent.scatter.toFront(this.displayObject); } } @@ -11970,21 +11704,9 @@ setupToolbar() { this.toolbar = new PIXI.Graphics(); - this.record = new RecordCommand( - this, - 0xcc0000, - new PIXI.Circle(0, 0, 16) - ); - this.play = new PlayCommand( - this, - 0x0000cc, - new PIXI.Polygon(0, 16, 32, 16 + 16, 0, 16 + 32, 0, 16) - ); - this.stop = new StopCommand( - this, - 0x0000cc, - new PIXI.Rectangle(0, 0, 32, 32) - ); + this.record = new RecordCommand(this, 0xcc0000, new PIXI.Circle(0, 0, 16)); + this.play = new PlayCommand(this, 0x0000cc, new PIXI.Polygon(0, 16, 32, 16 + 16, 0, 16 + 32, 0, 16)); + this.stop = new StopCommand(this, 0x0000cc, new PIXI.Rectangle(0, 0, 32, 32)); this.toolbar.addChild(this.record).position.set(44, 48); this.toolbar.addChild(this.play).position.set(44 + 44, 16); this.toolbar.addChild(this.stop).position.set(44 + 44 + 44 + 16, 32); @@ -12022,11 +11744,7 @@ mapPositionToPoint(point) { let local = new PIXI.Point(); - this.renderer.plugins.interaction.mapPositionToPoint( - local, - point.x, - point.y - ); + this.renderer.plugins.interaction.mapPositionToPoint(local, point.x, point.y); return local } @@ -12205,15 +11923,9 @@ let first = true; let lastPart = ''; for (let part of parts) { - let partMetrics = PIXI.TextMetrics.measureText( - part, - pixiStyle - ); + let partMetrics = PIXI.TextMetrics.measureText(part, pixiStyle); if (x + partMetrics.width + space.width > width) { - newWord += - (first || lastPart.endsWith('-') - ? '\n' - : '-\n') + part; + newWord += (first || lastPart.endsWith('-') ? '\n' : '-\n') + part; x = partMetrics.width; } else { newWord += part; @@ -12264,12 +11976,7 @@ * @param {canvas} * @memberof TextLabel */ - constructor( - text, - style = null, - canvas = null, - { minZoom = 0.1, maxZoom = 10 } = {} - ) { + constructor(text, style = null, canvas = null, { minZoom = 0.1, maxZoom = 10 } = {}) { super(text, style, canvas); this.normFontSize = this.style.fontSize; this.minZoom = minZoom; @@ -12418,21 +12125,11 @@ const truncatedLines = lines.slice(0, maxLines); const lastLine = truncatedLines[truncatedLines.length - 1]; const words = lastLine.split(' '); - const wordMetrics = PIXI.TextMetrics.measureText( - `\u00A0\n...\n${words.join('\n')}`, - pixiStyle - ); - const [ - spaceLength, - dotsLength, - ...wordLengths - ] = wordMetrics.lineWidths; + const wordMetrics = PIXI.TextMetrics.measureText(`\u00A0\n...\n${words.join('\n')}`, pixiStyle); + const [spaceLength, dotsLength, ...wordLengths] = wordMetrics.lineWidths; const { text: newLastLine } = wordLengths.reduce( (data, wordLength, i) => { - if ( - data.length + wordLength + spaceLength >= - wordWrapWidth - ) { + if (data.length + wordLength + spaceLength >= wordWrapWidth) { return { ...data, length: wordWrapWidth } } return { @@ -12633,24 +12330,13 @@ return date.toLocaleDateString('de', format) } - draw( - timeline, - range, - width, - height, - available, - format, - nextFormat, - level, - extraTicks = false - ) { + draw(timeline, range, width, height, available, format, nextFormat, level, extraTicks = false) { let first = null; let last = null; let keyedFormat = format ? format[this.formatKey] : null; let keyedNextFormat = nextFormat ? nextFormat[this.formatKey] : null; let redundant = nextFormat ? this.formatKey in nextFormat : false; - let fullyRedundant = - keyedFormat != null && keyedFormat == keyedNextFormat; + let fullyRedundant = keyedFormat != null && keyedFormat == keyedNextFormat; let y = timeline.getY(); for (let { start, end } of this.iterRanges(range)) { let x = timeline.toX(start); @@ -12675,12 +12361,7 @@ } if (!fullyRedundant) { - timeline.ensureLabel( - key, - text, - { x: xx, y: yy, align }, - FontInfo.small - ); + timeline.ensureLabel(key, text, { x: xx, y: yy, align }, FontInfo.small); } if (extraTicks) timeline.drawTick(x, -level); } @@ -12830,11 +12511,7 @@ } iterStart(start) { - return Dates.create( - start.getFullYear(), - start.getMonth(), - start.getDate() - ) + return Dates.create(start.getFullYear(), start.getMonth(), start.getDate()) } next(date) { @@ -12875,10 +12552,7 @@ let available = amount * size; availables.set(ticks, available); if (available < ticks.minWidth) break - formats.set( - ticks, - available < ticks.minLabelWidth ? null : ticks.format(available) - ); + formats.set(ticks, available < ticks.minLabelWidth ? null : ticks.format(available)); nextFormats.set(previous, formats.get(ticks)); previous = ticks; visible.push(ticks); @@ -12947,16 +12621,7 @@ } class Timeline extends BitmapLabeledGraphics { - constructor( - width, - height, - { - ticks = null, - baseLine = 0.5, - showRange = true, - throwDamping = 0.95 - } = {} - ) { + constructor(width, height, { ticks = null, baseLine = 0.5, showRange = true, throwDamping = 0.95 } = {}) { super(); this.wantedWidth = width; this.wantedHeight = height; @@ -12973,12 +12638,7 @@ this.deltas = []; this.labelDates = []; this.colorRanges = []; - this.rangeColors = new Cycle( - Colors.eminence, - Colors.steelblue, - Colors.ochre, - Colors.turquoise - ); + this.rangeColors = new Cycle(Colors.eminence, Colors.steelblue, Colors.ochre, Colors.turquoise); this.callbacks = []; this.onTapCallbacks = []; this.onDoubleTapCallbacks = []; @@ -12990,14 +12650,7 @@ this.autoScroll = false; this.direction = -1; this.throwDamping = throwDamping; - this.timeticks = - ticks || - new TimeTicks( - new DecadeTicks(), - new YearTicks(), - new MonthTicks(), - new DayTicks() - ); + this.timeticks = ticks || new TimeTicks(new DecadeTicks(), new YearTicks(), new MonthTicks(), new DayTicks()); this.labelPrefix = '__'; } @@ -13154,8 +12807,7 @@ prepareLabels() { for (let key of this.labels.keys()) { - if (!key.startsWith(this.labelPrefix)) - this.labels.get(key).visible = false; + if (!key.startsWith(this.labelPrefix)) this.labels.get(key).visible = false; } } @@ -13656,10 +13308,7 @@ * @readonly */ get contentWidth() { - return ( - this.options.boxWidth - - (this.isScrollbarVertical ? this.options.scrollbarSize : 0) - ) + return this.options.boxWidth - (this.isScrollbarVertical ? this.options.scrollbarSize : 0) } /** @@ -13668,10 +13317,7 @@ * @readonly */ get contentHeight() { - return ( - this.options.boxHeight - - (this.isScrollbarHorizontal ? this.options.scrollbarSize : 0) - ) + return this.options.boxHeight - (this.isScrollbarHorizontal ? this.options.scrollbarSize : 0) } /** @@ -13748,19 +13394,11 @@ this.scrollbar.clear(); let options = {}; options.left = 0; - options.right = - this.scrollWidth + - (this._isScrollbarVertical ? this.options.scrollbarSize : 0); + options.right = this.scrollWidth + (this._isScrollbarVertical ? this.options.scrollbarSize : 0); options.top = 0; - options.bottom = - this.scrollHeight + - (this.isScrollbarHorizontal ? this.options.scrollbarSize : 0); - const width = - this.scrollWidth + - (this.isScrollbarVertical ? this.options.scrollbarSize : 0); - const height = - this.scrollHeight + - (this.isScrollbarHorizontal ? this.options.scrollbarSize : 0); + options.bottom = this.scrollHeight + (this.isScrollbarHorizontal ? this.options.scrollbarSize : 0); + const width = this.scrollWidth + (this.isScrollbarVertical ? this.options.scrollbarSize : 0); + const height = this.scrollHeight + (this.isScrollbarHorizontal ? this.options.scrollbarSize : 0); this.scrollbarTop = (this.content.top / height) * this.boxHeight; this.scrollbarTop = this.scrollbarTop < 0 ? 0 : this.scrollbarTop; this.scrollbarHeight = (this.boxHeight / height) * this.boxHeight; @@ -13777,14 +13415,9 @@ : this.scrollbarWidth; if (this.isScrollbarVertical) { this.scrollbar - .beginFill( - this.options.scrollbarBackground, - this.options.scrollbarBackgroundAlpha - ) + .beginFill(this.options.scrollbarBackground, this.options.scrollbarBackgroundAlpha) .drawRect( - this.boxWidth - - this.scrollbarSize + - this.options.scrollbarOffsetVertical, + this.boxWidth - this.scrollbarSize + this.options.scrollbarOffsetVertical, 0, this.scrollbarSize, this.boxHeight @@ -13793,15 +13426,10 @@ } if (this.isScrollbarHorizontal) { this.scrollbar - .beginFill( - this.options.scrollbarBackground, - this.options.scrollbarBackgroundAlpha - ) + .beginFill(this.options.scrollbarBackground, this.options.scrollbarBackgroundAlpha) .drawRect( 0, - this.boxHeight - - this.scrollbarSize + - this.options.scrollbarOffsetHorizontal, + this.boxHeight - this.scrollbarSize + this.options.scrollbarOffsetHorizontal, this.boxWidth, this.scrollbarSize ) @@ -13809,14 +13437,9 @@ } if (this.isScrollbarVertical) { this.scrollbar - .beginFill( - this.options.scrollbarForeground, - this.options.scrollbarForegroundAlpha - ) + .beginFill(this.options.scrollbarForeground, this.options.scrollbarForegroundAlpha) .drawRect( - this.boxWidth - - this.scrollbarSize + - this.options.scrollbarOffsetVertical, + this.boxWidth - this.scrollbarSize + this.options.scrollbarOffsetVertical, this.scrollbarTop, this.scrollbarSize, this.scrollbarHeight @@ -13825,15 +13448,10 @@ } if (this.isScrollbarHorizontal) { this.scrollbar - .beginFill( - this.options.scrollbarForeground, - this.options.scrollbarForegroundAlpha - ) + .beginFill(this.options.scrollbarForeground, this.options.scrollbarForegroundAlpha) .drawRect( this.scrollbarLeft, - this.boxHeight - - this.scrollbarSize + - this.options.scrollbarOffsetHorizontal, + this.boxHeight - this.scrollbarSize + this.options.scrollbarOffsetHorizontal, this.scrollbarWidth, this.scrollbarSize ) @@ -13907,10 +13525,7 @@ const local = this.toLocal(e.data.global); if (this.isScrollbarHorizontal) { if (local.y > this.boxHeight - this.scrollbarSize) { - if ( - local.x >= this.scrollbarLeft && - local.x <= this.scrollbarLeft + this.scrollbarWidth - ) { + if (local.x >= this.scrollbarLeft && local.x <= this.scrollbarLeft + this.scrollbarWidth) { this.pointerDown = { type: 'horizontal', last: local }; } else { if (local.x > this.scrollbarLeft) { @@ -13929,10 +13544,7 @@ } if (this.isScrollbarVertical) { if (local.x > this.boxWidth - this.scrollbarSize) { - if ( - local.y >= this.scrollbarTop && - local.y <= this.scrollbarTop + this.scrollbarWidth - ) { + if (local.y >= this.scrollbarTop && local.y <= this.scrollbarTop + this.scrollbarWidth) { this.pointerDown = { type: 'vertical', last: local }; } else { if (local.y > this.scrollbarTop) { @@ -13992,26 +13604,15 @@ * @param {number} [options.scrollHeight] set the height of the inside of the scrollbox (leave null to use content.height) */ resize(options) { - this.options.boxWidth = - typeof options.boxWidth !== 'undefined' - ? options.boxWidth - : this.options.boxWidth; - this.options.boxHeight = - typeof options.boxHeight !== 'undefined' - ? options.boxHeight - : this.options.boxHeight; + this.options.boxWidth = typeof options.boxWidth !== 'undefined' ? options.boxWidth : this.options.boxWidth; + this.options.boxHeight = typeof options.boxHeight !== 'undefined' ? options.boxHeight : this.options.boxHeight; if (options.scrollWidth) { this.scrollWidth = options.scrollWidth; } if (options.scrollHeight) { this.scrollHeight = options.scrollHeight; } - this.content.resize( - this.options.boxWidth, - this.options.boxHeight, - this.scrollWidth, - this.scrollHeight - ); + this.content.resize(this.options.boxWidth, this.options.boxHeight, this.scrollWidth, this.scrollHeight); this.update(); } @@ -14263,12 +13864,8 @@ this.on('pointermove', e => { if (this.control.dragging) { - const moveX = this.control.event.data.getLocalPosition( - this.control.parent - ).x; - this._value = this.pixelToValue( - moveX - this.control.delta - this.opts.controlRadius - ); + const moveX = this.control.event.data.getLocalPosition(this.control.parent).x; + this._value = this.pixelToValue(moveX - this.control.delta - this.opts.controlRadius); let x = this.valueToPixel(this._value) + this.opts.controlRadius; this.control.x = x; @@ -14280,16 +13877,8 @@ if (container instanceof Element) { container.addEventListener('pointerup', e => this.onEnd(e), false); - container.addEventListener( - 'pointercancel', - e => this.onEnd(e), - false - ); - container.addEventListener( - 'pointerleave', - e => this.onEnd(e), - false - ); + container.addEventListener('pointercancel', e => this.onEnd(e), false); + container.addEventListener('pointerleave', e => this.onEnd(e), false); container.addEventListener('pointerout', e => this.onEnd(e), false); container.addEventListener('mouseup', e => this.onEnd(e), false); container.addEventListener('mousecancel', e => this.onEnd(e), false); @@ -14350,9 +13939,7 @@ if (this.sliderObj.pointerdowned) { this.sliderObj.pointerdowned = false; const position = e.data.getLocalPosition(this.control.parent); - this.value = this.pixelToValue( - position.x - this.opts.controlRadius - ); + this.value = this.pixelToValue(position.x - this.opts.controlRadius); TweenLite.to(this.control, this.theme.fast, { alpha: 0.83 }); } }); @@ -14412,11 +13999,7 @@ this.sliderObj.clear(); this.sliderObj.beginFill(0xffffff, 0); this.sliderObj.drawRect(0, 0, x + w + cr, cr * 2); - this.sliderObj.lineStyle( - this.opts.strokeWidth, - this.opts.stroke, - this.opts.strokeAlpha - ); + this.sliderObj.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha); this.sliderObj.beginFill(this.opts.fill, this.opts.fillAlpha); this.sliderObj.moveTo(x, y); this.sliderObj.lineTo(x + w, y); @@ -14430,20 +14013,10 @@ // Draw control this.control.clear(); - this.control.lineStyle( - this.opts.controlStrokeWidth, - this.opts.controlStroke, - this.opts.controlStrokeAlpha - ); - this.control.beginFill( - this.opts.controlFill, - this.opts.controlFillAlpha - ); + this.control.lineStyle(this.opts.controlStrokeWidth, this.opts.controlStroke, this.opts.controlStrokeAlpha); + this.control.beginFill(this.opts.controlFill, this.opts.controlFillAlpha); this.control.drawCircle(0, 0, cr - 1); - this.control.beginFill( - this.opts.controlStroke, - this.opts.controlStrokeAlpha - ); + this.control.beginFill(this.opts.controlStroke, this.opts.controlStrokeAlpha); this.control.drawCircle(0, 0, cr / 6); this.control.endFill(); @@ -14481,10 +14054,7 @@ } else if (value > this.opts.max) { value = this.opts.max; } - return ( - (this.opts.width * (value - this.opts.min)) / - (this.opts.max - this.opts.min) - ) + return (this.opts.width * (value - this.opts.min)) / (this.opts.max - this.opts.min) } /** @@ -14500,10 +14070,7 @@ } else if (pixel > this.opts.width) { pixel = this.opts.width; } - return ( - this.opts.min + - ((this.opts.max - this.opts.min) * pixel) / this.opts.width - ) + return this.opts.min + ((this.opts.max - this.opts.min) * pixel) / this.opts.width } /** @@ -14704,10 +14271,7 @@ let identifier = event.data.identifier; if (typeof event.data.originalEvent.changedTouches !== 'undefined') { for (let touch of event.data.originalEvent.changedTouches) { - if ( - touch.identifier === identifier && - touch.touchType === 'stylus' - ) { + if (touch.identifier === identifier && touch.touchType === 'stylus') { this.tiltX = Angle.radian2degree(touch.azimuthAngle); this.tiltY = 90.0 - Angle.radian2degree(touch.altitudeAngle); return true @@ -14727,10 +14291,7 @@ let identifier = event.data.identifier; if (typeof event.data.originalEvent.changedTouches !== 'undefined') { for (let touch of event.data.originalEvent.changedTouches) { - if ( - touch.identifier === identifier && - touch.pointerType === 'touch' - ) { + if (touch.identifier === identifier && touch.pointerType === 'touch') { return true } } @@ -14767,8 +14328,7 @@ this.tiltY += 5; break } - if (this.debug) - console.log('keydown', e.keyCode, this.tiltX, this.tiltY); + if (this.debug) console.log('keydown', e.keyCode, this.tiltX, this.tiltY); }); this.on('pointerdown', e => { @@ -14782,15 +14342,9 @@ }); this.on('pointermove', e => { - if ( - Events$1.isPointerDown(e.data.originalEvent) || - this.isStylusPointer(e) || - this.isStylusTouch(e) - ) { - if (this.debug) - console.log('pointermove', e, this.eventInside(e)); - if (this.eventInside(e) && this.singlePointer()) - this.moveStroke(this.toStroke(e)); + if (Events$1.isPointerDown(e.data.originalEvent) || this.isStylusPointer(e) || this.isStylusTouch(e)) { + if (this.debug) console.log('pointermove', e, this.eventInside(e)); + if (this.eventInside(e) && this.singlePointer()) this.moveStroke(this.toStroke(e)); } }); this.on('pointerup', e => { @@ -14905,11 +14459,7 @@ this.moveTo(start.x, start.y); for (let i = 1; i < stroke.length; i++) { let info = stroke[i]; - this.lineStyle( - this.tiltToLineWidth(info.tiltY), - info.color, - this.colorAlpha - ); + this.lineStyle(this.tiltToLineWidth(info.tiltY), info.color, this.colorAlpha); this.lineTo(info.x, info.y); } this.endFill(); @@ -15167,10 +14717,8 @@ opts ); - this.opts.controlRadius = - this.opts.controlRadius || this.opts.height / 2; - this.opts.controlRadiusActive = - this.opts.controlRadiusActive || this.opts.controlRadius; + this.opts.controlRadius = this.opts.controlRadius || this.opts.height / 2; + this.opts.controlRadiusActive = this.opts.controlRadiusActive || this.opts.controlRadius; // Validation //----------------- @@ -15332,32 +14880,15 @@ draw() { this.switchObj.clear(); if (this.active) { - this.switchObj.lineStyle( - this.opts.strokeActiveWidth, - this.opts.strokeActive, - this.opts.strokeActiveAlpha - ); - this.switchObj.beginFill( - this.opts.fillActive, - this.opts.fillActiveAlpha - ); + this.switchObj.lineStyle(this.opts.strokeActiveWidth, this.opts.strokeActive, this.opts.strokeActiveAlpha); + this.switchObj.beginFill(this.opts.fillActive, this.opts.fillActiveAlpha); } else { - this.switchObj.lineStyle( - this.opts.strokeWidth, - this.opts.stroke, - this.opts.strokeAlpha - ); + this.switchObj.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha); this.switchObj.beginFill(this.opts.fill, this.opts.fillAlpha); } this.switchObj.moveTo(this.radius, 0); this.switchObj.lineTo(this.opts.width - this.radius, 0); - this.switchObj.arcTo( - this.opts.width, - 0, - this.opts.width, - this.radius, - this.radius - ); + this.switchObj.arcTo(this.opts.width, 0, this.opts.width, this.radius, this.radius); this.switchObj.lineTo(this.opts.width, this.radius + 1); // BUGFIX: If not specified, there is a small area without a stroke. this.switchObj.arcTo( this.opts.width, @@ -15379,21 +14910,11 @@ this.opts.controlStrokeActive, this.opts.controlStrokeActiveAlpha ); - this.control.beginFill( - this.opts.controlFillActive, - this.opts.controlFillActiveAlpha - ); + this.control.beginFill(this.opts.controlFillActive, this.opts.controlFillActiveAlpha); this.control.drawCircle(0, 0, this.opts.controlRadiusActive - 1); } else { - this.control.lineStyle( - this.opts.controlStrokeWidth, - this.opts.controlStroke, - this.opts.controlStrokeAlpha - ); - this.control.beginFill( - this.opts.controlFill, - this.opts.controlFillAlpha - ); + this.control.lineStyle(this.opts.controlStrokeWidth, this.opts.controlStroke, this.opts.controlStrokeAlpha); + this.control.beginFill(this.opts.controlFill, this.opts.controlFillAlpha); this.control.drawCircle(0, 0, this.opts.controlRadius - 1); } this.control.endFill(); @@ -15409,24 +14930,11 @@ */ drawAnimated() { this.switchObj.clear(); - this.switchObj.lineStyle( - this.tempAnimated.strokeWidth, - this.tempAnimated.stroke, - this.tempAnimated.strokeAlpha - ); - this.switchObj.beginFill( - this.tempAnimated.fill, - this.tempAnimated.fillAlpha - ); + this.switchObj.lineStyle(this.tempAnimated.strokeWidth, this.tempAnimated.stroke, this.tempAnimated.strokeAlpha); + this.switchObj.beginFill(this.tempAnimated.fill, this.tempAnimated.fillAlpha); this.switchObj.moveTo(this.radius, 0); this.switchObj.lineTo(this.opts.width - this.radius, 0); - this.switchObj.arcTo( - this.opts.width, - 0, - this.opts.width, - this.radius, - this.radius - ); + this.switchObj.arcTo(this.opts.width, 0, this.opts.width, this.radius, this.radius); this.switchObj.lineTo(this.opts.width, this.radius + 1); // BUGFIX: If not specified, there is a small area without a stroke. this.switchObj.arcTo( this.opts.width, @@ -15446,10 +14954,7 @@ this.tempAnimated.controlStroke, this.tempAnimated.controlStrokeAlpha ); - this.control.beginFill( - this.tempAnimated.controlFill, - this.tempAnimated.controlFillAlpha - ); + this.control.beginFill(this.tempAnimated.controlFill, this.tempAnimated.controlFillAlpha); this.control.drawCircle(0, 0, this.tempAnimated.controlRadius - 1); this.control.endFill(); @@ -15652,10 +15157,7 @@ let object = null; if (item.label) { - object = new PIXI.Text( - item.label, - item.textStyle || this.opts.textStyle - ); + object = new PIXI.Text(item.label, item.textStyle || this.opts.textStyle); } else { object = item.content; } @@ -15857,7 +15359,7 @@ } } - /* globals */ + /* globals ThrowPropsPlugin, Strong */ /** * Class that represents a PixiJS List. @@ -15964,9 +15466,7 @@ if (this.opts.app) { const app = this.opts.app; app.view.addEventListener('mousewheel', event => { - const bounds = this.mask - ? this.mask.getBounds() - : this.getBounds(); + const bounds = this.mask ? this.mask.getBounds() : this.getBounds(); const x = event.clientX - app.view.getBoundingClientRect().left; const y = event.clientY - app.view.getBoundingClientRect().top; if (bounds.contains(x, y)) { @@ -16023,14 +15523,10 @@ if (this.opts.orientation === 'vertical') { switch (this.opts.align) { case 'center': - this.__items.forEach( - it => (it.x = margin + this.width / 2 - it.width / 2) - ); + this.__items.forEach(it => (it.x = margin + this.width / 2 - it.width / 2)); break case 'right': - this.__items.forEach( - it => (it.x = margin + this.width - it.width) - ); + this.__items.forEach(it => (it.x = margin + this.width - it.width)); break default: this.__items.forEach(it => (it.x = margin)); @@ -16056,14 +15552,10 @@ this.__items.forEach(it => (it.y = margin)); break case 'bottom': - this.__items.forEach( - it => (it.y = margin + this.height - it.height) - ); + this.__items.forEach(it => (it.y = margin + this.height - it.height)); break default: - this.__items.forEach( - it => (it.y = margin + this.height / 2 - it.height / 2) - ); + this.__items.forEach(it => (it.y = margin + this.height / 2 - it.height / 2)); break } @@ -16197,8 +15689,7 @@ { throwProps, ease: Strong.easeOut, - onComplete: () => - ThrowPropsPlugin.untrack(this.container.position) + onComplete: () => ThrowPropsPlugin.untrack(this.container.position) }, 0.8, 0.4 @@ -16219,20 +15710,14 @@ this.container.position.x -= event.deltaX; if (this.container.position.x > 0) { this.container.position.x = 0; - } else if ( - this.container.position.x + this.innerWidth < - this.opts.width - ) { + } else if (this.container.position.x + this.innerWidth < this.opts.width) { this.container.position.x = this.opts.width - this.innerWidth; } } else { this.container.position.y -= event.deltaY; if (this.container.position.y > 0) { this.container.position.y = 0; - } else if ( - this.container.position.y + this.innerHeight < - this.opts.height - ) { + } else if (this.container.position.y + this.innerHeight < this.opts.height) { this.container.position.y = this.opts.height - this.innerHeight; } } @@ -16244,10 +15729,7 @@ * @param {event|PIXI.InteractionEvent} event - The PIXI event to capture. */ capture(event) { - const originalEvent = - event.data && event.data.originalEvent - ? event.data.originalEvent - : event; + const originalEvent = event.data && event.data.originalEvent ? event.data.originalEvent : event; Events$1.capturedBy(originalEvent, this); } } diff --git a/doc/out/AbstractPopup.html b/doc/out/AbstractPopup.html index 938d746..820f387 100644 --- a/doc/out/AbstractPopup.html +++ b/doc/out/AbstractPopup.html @@ -2912,7 +2912,7 @@ a string, a number or a PIXI.Text object.

- Documentation generated by JSDoc 3.6.3 on Thu Jul 18 2019 12:16:18 GMT+0200 (Mitteleuropäische Sommerzeit) + Documentation generated by JSDoc 3.6.3 on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
diff --git a/doc/out/Badge.html b/doc/out/Badge.html index 1d623cb..256eb6d 100644 --- a/doc/out/Badge.html +++ b/doc/out/Badge.html @@ -2368,7 +2368,7 @@ a string, a number or a PIXI.Text object.

- Documentation generated by JSDoc 3.6.3 on Thu Jul 18 2019 12:16:18 GMT+0200 (Mitteleuropäische Sommerzeit) + Documentation generated by JSDoc 3.6.3 on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
diff --git a/doc/out/BlurFilter.html b/doc/out/BlurFilter.html index 9514f8d..c756b66 100644 --- a/doc/out/BlurFilter.html +++ b/doc/out/BlurFilter.html @@ -1792,7 +1792,7 @@ app.scene.filters = [blurFilter]
- Documentation generated by JSDoc 3.6.3 on Thu Jul 18 2019 12:16:18 GMT+0200 (Mitteleuropäische Sommerzeit) + Documentation generated by JSDoc 3.6.3 on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
diff --git a/doc/out/Button.html b/doc/out/Button.html index 130f6df..be55d43 100644 --- a/doc/out/Button.html +++ b/doc/out/Button.html @@ -3810,7 +3810,7 @@ the tint property of the icon sprite.

- Documentation generated by JSDoc 3.6.3 on Thu Jul 18 2019 12:16:18 GMT+0200 (Mitteleuropäische Sommerzeit) + Documentation generated by JSDoc 3.6.3 on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
diff --git a/doc/out/ButtonGroup.html b/doc/out/ButtonGroup.html index 30aaabf..4d044ba 100644 --- a/doc/out/ButtonGroup.html +++ b/doc/out/ButtonGroup.html @@ -1465,7 +1465,7 @@
- buttongroup.js:77 + buttongroup.js:80
@@ -1811,6 +1811,110 @@ or a Theme object.

+ + + maxWidth + + + + + +number + + + + + + + + + + + + + + + optional + + + + + +

The maximum width of the buttongroup. Only used if stacked is true and the orientation is horizontal.

+ + + + + + + maxHeight + + + + + +number + + + + + + + + + + + + + + + optional + + + + + +

The maximum height of the buttongroup. Only used if stacked is true and the orientation is vertical.

+ + + + + + + stacked + + + + + +boolean + + + + + + + + + false + + + + + + + + optional + + + + + +

If set to true, the buttons of the buttongroup gets stacked if they are broader or higher than the maximum permitted width or height, depending on orientation.

+ + + + padding @@ -2889,7 +2993,7 @@ app.scene.addChild(buttonGroup)
- buttongroup.js:367 + buttongroup.js:370
@@ -2994,7 +3098,7 @@ app.scene.addChild(buttonGroup)
- buttongroup.js:262 + buttongroup.js:265
@@ -3099,7 +3203,7 @@ app.scene.addChild(buttonGroup)
- buttongroup.js:356 + buttongroup.js:359
@@ -3206,7 +3310,7 @@ app.scene.addChild(buttonGroup)
- Documentation generated by JSDoc 3.6.3 on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit) + Documentation generated by JSDoc 3.6.3 on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
diff --git a/doc/out/DeepZoomImage.html b/doc/out/DeepZoomImage.html index 2ac1c23..c5ae944 100644 --- a/doc/out/DeepZoomImage.html +++ b/doc/out/DeepZoomImage.html @@ -5090,7 +5090,7 @@ i.e. after loading a single tile

- Documentation generated by JSDoc 3.6.3 on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit) + Documentation generated by JSDoc 3.6.3 on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
diff --git a/doc/out/DeepZoomInfo.html b/doc/out/DeepZoomInfo.html index fecf0d4..91440e4 100644 --- a/doc/out/DeepZoomInfo.html +++ b/doc/out/DeepZoomInfo.html @@ -2603,7 +2603,7 @@ on completion.

- Documentation generated by JSDoc 3.6.3 on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit) + Documentation generated by JSDoc 3.6.3 on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
diff --git a/doc/out/Flippable.html b/doc/out/Flippable.html index 4b6c486..23f8325 100644 --- a/doc/out/Flippable.html +++ b/doc/out/Flippable.html @@ -2506,7 +2506,7 @@ front.on('click', event => flippable.toggle())
- Documentation generated by JSDoc 3.6.3 on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit) + Documentation generated by JSDoc 3.6.3 on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
diff --git a/doc/out/FontInfo.html b/doc/out/FontInfo.html index d0b9130..89cfd33 100644 --- a/doc/out/FontInfo.html +++ b/doc/out/FontInfo.html @@ -1553,7 +1553,7 @@
- Documentation generated by JSDoc 3.6.3 on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit) + Documentation generated by JSDoc 3.6.3 on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
diff --git a/doc/out/Hypenate.html b/doc/out/Hypenate.html index c018c72..8caa036 100644 --- a/doc/out/Hypenate.html +++ b/doc/out/Hypenate.html @@ -1755,7 +1755,7 @@
- Documentation generated by JSDoc 3.6.3 on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit) + Documentation generated by JSDoc 3.6.3 on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
diff --git a/doc/out/InteractivePopup.html b/doc/out/InteractivePopup.html index 358e7ac..f30ff13 100644 --- a/doc/out/InteractivePopup.html +++ b/doc/out/InteractivePopup.html @@ -2337,7 +2337,7 @@ a string, a number or a PIXI.Text object.

- Documentation generated by JSDoc 3.6.3 on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit) + Documentation generated by JSDoc 3.6.3 on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
diff --git a/doc/out/LabeledGraphics.exports.LabeledGraphics.html b/doc/out/LabeledGraphics.exports.LabeledGraphics.html index e64996c..3da8a63 100644 --- a/doc/out/LabeledGraphics.exports.LabeledGraphics.html +++ b/doc/out/LabeledGraphics.exports.LabeledGraphics.html @@ -1555,7 +1555,7 @@
- Documentation generated by JSDoc 3.6.3 on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit) + Documentation generated by JSDoc 3.6.3 on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
diff --git a/doc/out/LabeledGraphics.html b/doc/out/LabeledGraphics.html index 14e6732..60fe437 100644 --- a/doc/out/LabeledGraphics.html +++ b/doc/out/LabeledGraphics.html @@ -2620,7 +2620,7 @@ than wanted

- Documentation generated by JSDoc 3.6.3 on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit) + Documentation generated by JSDoc 3.6.3 on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
diff --git a/doc/out/List.html b/doc/out/List.html index 2250f6d..b266a23 100644 --- a/doc/out/List.html +++ b/doc/out/List.html @@ -2579,7 +2579,7 @@ app.scene.addChild(list)
- Documentation generated by JSDoc 3.6.3 on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit) + Documentation generated by JSDoc 3.6.3 on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
diff --git a/doc/out/Message.html b/doc/out/Message.html index aea87a6..94dab65 100644 --- a/doc/out/Message.html +++ b/doc/out/Message.html @@ -2435,7 +2435,7 @@ a string, a number or a PIXI.Text object.

- Documentation generated by JSDoc 3.6.3 on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit) + Documentation generated by JSDoc 3.6.3 on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
diff --git a/doc/out/MessageInteractivePopup.html b/doc/out/MessageInteractivePopup.html index 495f1b2..dcfa46c 100644 --- a/doc/out/MessageInteractivePopup.html +++ b/doc/out/MessageInteractivePopup.html @@ -1783,7 +1783,7 @@ like Popup, Message...

- Documentation generated by JSDoc 3.6.3 on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit) + Documentation generated by JSDoc 3.6.3 on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
diff --git a/doc/out/MessageMessageInteractivePopup.html b/doc/out/MessageMessageInteractivePopup.html index 1aaf8e4..e185f98 100644 --- a/doc/out/MessageMessageInteractivePopup.html +++ b/doc/out/MessageMessageInteractivePopup.html @@ -1783,7 +1783,7 @@ like Popup, Message...

- Documentation generated by JSDoc 3.6.3 on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit) + Documentation generated by JSDoc 3.6.3 on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
diff --git a/doc/out/Modal.html b/doc/out/Modal.html index 09b033f..1fde7b1 100644 --- a/doc/out/Modal.html +++ b/doc/out/Modal.html @@ -2336,7 +2336,7 @@ a string or a PIXI.Text object.

- Documentation generated by JSDoc 3.6.3 on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit) + Documentation generated by JSDoc 3.6.3 on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
diff --git a/doc/out/ModalInteractivePopup.html b/doc/out/ModalInteractivePopup.html index fdaf3e1..66912f6 100644 --- a/doc/out/ModalInteractivePopup.html +++ b/doc/out/ModalInteractivePopup.html @@ -1783,7 +1783,7 @@ like Popup, Message...

- Documentation generated by JSDoc 3.6.3 on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit) + Documentation generated by JSDoc 3.6.3 on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
diff --git a/doc/out/ModalModalInteractivePopup.html b/doc/out/ModalModalInteractivePopup.html index 96e34e2..d1240d2 100644 --- a/doc/out/ModalModalInteractivePopup.html +++ b/doc/out/ModalModalInteractivePopup.html @@ -1783,7 +1783,7 @@ like Popup, Message...

- Documentation generated by JSDoc 3.6.3 on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit) + Documentation generated by JSDoc 3.6.3 on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
diff --git a/doc/out/PIXIApp.html b/doc/out/PIXIApp.html index 6888662..493ea4c 100644 --- a/doc/out/PIXIApp.html +++ b/doc/out/PIXIApp.html @@ -5737,7 +5737,7 @@ rejected with an error.
- Documentation generated by JSDoc 3.6.3 on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit) + Documentation generated by JSDoc 3.6.3 on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
diff --git a/doc/out/Popup.html b/doc/out/Popup.html index a7139d1..a45036d 100644 --- a/doc/out/Popup.html +++ b/doc/out/Popup.html @@ -2330,7 +2330,7 @@ a string, a number or a PIXI.Text object.

- Documentation generated by JSDoc 3.6.3 on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit) + Documentation generated by JSDoc 3.6.3 on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
diff --git a/doc/out/PopupInteractivePopup.html b/doc/out/PopupInteractivePopup.html index c32d641..32214d8 100644 --- a/doc/out/PopupInteractivePopup.html +++ b/doc/out/PopupInteractivePopup.html @@ -1783,7 +1783,7 @@ like Popup, Message...

- Documentation generated by JSDoc 3.6.3 on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit) + Documentation generated by JSDoc 3.6.3 on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
diff --git a/doc/out/PopupMenu.html b/doc/out/PopupMenu.html index 95d90a8..46cbfda 100644 --- a/doc/out/PopupMenu.html +++ b/doc/out/PopupMenu.html @@ -2384,7 +2384,7 @@ a string, a number or a PIXI.Text object.

- Documentation generated by JSDoc 3.6.3 on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit) + Documentation generated by JSDoc 3.6.3 on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
diff --git a/doc/out/PopupMenuPopupInteractivePopup.html b/doc/out/PopupMenuPopupInteractivePopup.html index fb28912..6ee94a1 100644 --- a/doc/out/PopupMenuPopupInteractivePopup.html +++ b/doc/out/PopupMenuPopupInteractivePopup.html @@ -1783,7 +1783,7 @@ like Popup, Message...

- Documentation generated by JSDoc 3.6.3 on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit) + Documentation generated by JSDoc 3.6.3 on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
diff --git a/doc/out/PopupMenuPopupMenuPopupInteractivePopup.html b/doc/out/PopupMenuPopupMenuPopupInteractivePopup.html index 34a86bc..1b98cd1 100644 --- a/doc/out/PopupMenuPopupMenuPopupInteractivePopup.html +++ b/doc/out/PopupMenuPopupMenuPopupInteractivePopup.html @@ -1783,7 +1783,7 @@ like Popup, Message...

- Documentation generated by JSDoc 3.6.3 on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit) + Documentation generated by JSDoc 3.6.3 on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
diff --git a/doc/out/PopupMenuPopupMenuPopupPopupInteractivePopup.html b/doc/out/PopupMenuPopupMenuPopupPopupInteractivePopup.html index 04b4996..b004e22 100644 --- a/doc/out/PopupMenuPopupMenuPopupPopupInteractivePopup.html +++ b/doc/out/PopupMenuPopupMenuPopupPopupInteractivePopup.html @@ -1783,7 +1783,7 @@ like Popup, Message...

- Documentation generated by JSDoc 3.6.3 on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit) + Documentation generated by JSDoc 3.6.3 on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
diff --git a/doc/out/PopupMenuPopupPopupInteractivePopup.html b/doc/out/PopupMenuPopupPopupInteractivePopup.html index 9fb5615..ee3893d 100644 --- a/doc/out/PopupMenuPopupPopupInteractivePopup.html +++ b/doc/out/PopupMenuPopupPopupInteractivePopup.html @@ -1783,7 +1783,7 @@ like Popup, Message...

- Documentation generated by JSDoc 3.6.3 on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit) + Documentation generated by JSDoc 3.6.3 on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
diff --git a/doc/out/PopupPopupInteractivePopup.html b/doc/out/PopupPopupInteractivePopup.html index f2535ed..541d817 100644 --- a/doc/out/PopupPopupInteractivePopup.html +++ b/doc/out/PopupPopupInteractivePopup.html @@ -1783,7 +1783,7 @@ like Popup, Message...

- Documentation generated by JSDoc 3.6.3 on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit) + Documentation generated by JSDoc 3.6.3 on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
diff --git a/doc/out/Progress.html b/doc/out/Progress.html index 81b3498..53fb59f 100644 --- a/doc/out/Progress.html +++ b/doc/out/Progress.html @@ -2869,7 +2869,7 @@ app.scene.addChild(progress)
- Documentation generated by JSDoc 3.6.3 on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit) + Documentation generated by JSDoc 3.6.3 on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
diff --git a/doc/out/Scrollview.html b/doc/out/Scrollview.html index 30dd5f4..78ebf74 100644 --- a/doc/out/Scrollview.html +++ b/doc/out/Scrollview.html @@ -1701,7 +1701,7 @@ app.loader
- Documentation generated by JSDoc 3.6.3 on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit) + Documentation generated by JSDoc 3.6.3 on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
diff --git a/doc/out/Slider.html b/doc/out/Slider.html index 0837f2e..d63ae73 100644 --- a/doc/out/Slider.html +++ b/doc/out/Slider.html @@ -2960,7 +2960,7 @@ app.scene.addChild(slider)
- Documentation generated by JSDoc 3.6.3 on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit) + Documentation generated by JSDoc 3.6.3 on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
diff --git a/doc/out/Switch.html b/doc/out/Switch.html index 9e9d798..6a9af41 100644 --- a/doc/out/Switch.html +++ b/doc/out/Switch.html @@ -3390,7 +3390,7 @@ app.scene.addChild(switch1)
- Documentation generated by JSDoc 3.6.3 on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit) + Documentation generated by JSDoc 3.6.3 on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
diff --git a/doc/out/TextLabel.TextLabel.html b/doc/out/TextLabel.TextLabel.html index 9ade891..81c2102 100644 --- a/doc/out/TextLabel.TextLabel.html +++ b/doc/out/TextLabel.TextLabel.html @@ -1684,7 +1684,7 @@
- Documentation generated by JSDoc 3.6.3 on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit) + Documentation generated by JSDoc 3.6.3 on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
diff --git a/doc/out/Theme.html b/doc/out/Theme.html index a144eef..a89dec8 100644 --- a/doc/out/Theme.html +++ b/doc/out/Theme.html @@ -3159,7 +3159,7 @@ const app = new PIXIApp({
- Documentation generated by JSDoc 3.6.3 on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit) + Documentation generated by JSDoc 3.6.3 on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
diff --git a/doc/out/ThemeDark.html b/doc/out/ThemeDark.html index d6780a8..a47446e 100644 --- a/doc/out/ThemeDark.html +++ b/doc/out/ThemeDark.html @@ -1580,7 +1580,7 @@ const app = new PIXIApp({
- Documentation generated by JSDoc 3.6.3 on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit) + Documentation generated by JSDoc 3.6.3 on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
diff --git a/doc/out/ThemeLight.html b/doc/out/ThemeLight.html index 2da33fd..6243a05 100644 --- a/doc/out/ThemeLight.html +++ b/doc/out/ThemeLight.html @@ -1592,7 +1592,7 @@ const app = new PIXIApp({
- Documentation generated by JSDoc 3.6.3 on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit) + Documentation generated by JSDoc 3.6.3 on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
diff --git a/doc/out/ThemeRed.html b/doc/out/ThemeRed.html index c95b6ac..6dd17bb 100644 --- a/doc/out/ThemeRed.html +++ b/doc/out/ThemeRed.html @@ -1592,7 +1592,7 @@ const app = new PIXIApp({
- Documentation generated by JSDoc 3.6.3 on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit) + Documentation generated by JSDoc 3.6.3 on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
diff --git a/doc/out/TileQuadNode.html b/doc/out/TileQuadNode.html index 23880b0..0cf4d32 100644 --- a/doc/out/TileQuadNode.html +++ b/doc/out/TileQuadNode.html @@ -2044,7 +2044,7 @@ an indicator of tiles to free.

- Documentation generated by JSDoc 3.6.3 on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit) + Documentation generated by JSDoc 3.6.3 on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
diff --git a/doc/out/Tooltip.html b/doc/out/Tooltip.html index 7fc26e5..bab9c61 100644 --- a/doc/out/Tooltip.html +++ b/doc/out/Tooltip.html @@ -2506,7 +2506,7 @@ a string, a number or a PIXI.Text object.

- Documentation generated by JSDoc 3.6.3 on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit) + Documentation generated by JSDoc 3.6.3 on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
diff --git a/doc/out/UITest.html b/doc/out/UITest.html index 8a3bb49..81fc6de 100644 --- a/doc/out/UITest.html +++ b/doc/out/UITest.html @@ -4177,7 +4177,7 @@ test.start()
- Documentation generated by JSDoc 3.6.3 on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit) + Documentation generated by JSDoc 3.6.3 on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
diff --git a/doc/out/Volatile.html b/doc/out/Volatile.html index ee09a08..c6ec282 100644 --- a/doc/out/Volatile.html +++ b/doc/out/Volatile.html @@ -2093,7 +2093,7 @@ app.scene.addChild(button)
- Documentation generated by JSDoc 3.6.3 on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit) + Documentation generated by JSDoc 3.6.3 on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
diff --git a/doc/out/global.html b/doc/out/global.html index ce1d837..80927d6 100644 --- a/doc/out/global.html +++ b/doc/out/global.html @@ -3314,7 +3314,7 @@
- Documentation generated by JSDoc 3.6.3 on Thu Jul 18 2019 12:16:18 GMT+0200 (Mitteleuropäische Sommerzeit) + Documentation generated by JSDoc 3.6.3 on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
diff --git a/doc/out/index.html b/doc/out/index.html index 4d36a1e..ea12301 100644 --- a/doc/out/index.html +++ b/doc/out/index.html @@ -1479,7 +1479,7 @@
- Documentation generated by JSDoc 3.6.3 on Thu Jul 18 2019 12:16:18 GMT+0200 (Mitteleuropäische Sommerzeit) + Documentation generated by JSDoc 3.6.3 on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
diff --git a/doc/out/pixi_abstractpopup.js.html b/doc/out/pixi_abstractpopup.js.html index d938b46..1a76339 100644 --- a/doc/out/pixi_abstractpopup.js.html +++ b/doc/out/pixi_abstractpopup.js.html @@ -1825,7 +1825,7 @@ export default class AbstractPopup extends PIXI.Graphics {
- Documentation generated by JSDoc 3.6.3 on Thu Jul 18 2019 12:16:18 GMT+0200 (Mitteleuropäische Sommerzeit) + Documentation generated by JSDoc 3.6.3 on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
diff --git a/doc/out/pixi_app.js.html b/doc/out/pixi_app.js.html index 82b3b27..e389d6f 100644 --- a/doc/out/pixi_app.js.html +++ b/doc/out/pixi_app.js.html @@ -2227,7 +2227,7 @@ class FpsDisplay extends PIXI.Graphics {
- Documentation generated by JSDoc 3.6.3 on Thu Jul 18 2019 12:16:18 GMT+0200 (Mitteleuropäische Sommerzeit) + Documentation generated by JSDoc 3.6.3 on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
diff --git a/doc/out/pixi_badge.js.html b/doc/out/pixi_badge.js.html index bc0f61b..4c0b1aa 100644 --- a/doc/out/pixi_badge.js.html +++ b/doc/out/pixi_badge.js.html @@ -1571,7 +1571,7 @@ export default class Badge extends AbstractPopup {
- Documentation generated by JSDoc 3.6.3 on Thu Jul 18 2019 12:16:18 GMT+0200 (Mitteleuropäische Sommerzeit) + Documentation generated by JSDoc 3.6.3 on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
diff --git a/doc/out/pixi_blurfilter.js.html b/doc/out/pixi_blurfilter.js.html index 3e43189..def5bd9 100644 --- a/doc/out/pixi_blurfilter.js.html +++ b/doc/out/pixi_blurfilter.js.html @@ -1738,7 +1738,7 @@ class TiltShiftYFilter extends TiltShiftAxisFilter {
- Documentation generated by JSDoc 3.6.3 on Thu Jul 18 2019 12:16:18 GMT+0200 (Mitteleuropäische Sommerzeit) + Documentation generated by JSDoc 3.6.3 on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
diff --git a/doc/out/pixi_button.js.html b/doc/out/pixi_button.js.html index b9e3dde..e253390 100644 --- a/doc/out/pixi_button.js.html +++ b/doc/out/pixi_button.js.html @@ -2182,7 +2182,7 @@ export default class Button extends PIXI.Container {
- Documentation generated by JSDoc 3.6.3 on Thu Jul 18 2019 12:16:18 GMT+0200 (Mitteleuropäische Sommerzeit) + Documentation generated by JSDoc 3.6.3 on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
diff --git a/doc/out/pixi_buttongroup.js.html b/doc/out/pixi_buttongroup.js.html index 663cb6f..f2fc08f 100644 --- a/doc/out/pixi_buttongroup.js.html +++ b/doc/out/pixi_buttongroup.js.html @@ -1479,6 +1479,9 @@ export default class ButtonGroup extends PIXI.Graphics { * or a Theme object. * @param {number} [opts.minWidth=44] - Button: The minimum width of one button. * @param {number} [opts.minHeight=44] - Button: The minimum height of one button. + * @param {number} [opts.maxWidth] - The maximum width of the buttongroup. Only used if stacked is true and the orientation is horizontal. + * @param {number} [opts.maxHeight] - The maximum height of the buttongroup. Only used if stacked is true and the orientation is vertical. + * @param {boolean} [opts.stacked=false] - If set to true, the buttons of the buttongroup gets stacked if they are broader or higher than the maximum permitted width or height, depending on orientation. * @param {number} [opts.padding=Theme.padding] - Button: The inner spacing (distance from icon and/or label) the the border. * @param {number} [opts.margin=Theme.margin] - The outer spacing (distance from one button to the previous/next button). * @param {string} [opts.iconPosition=left] - Button: The position of the icon in relation to the label. Can be left or right. @@ -1821,7 +1824,7 @@ export default class ButtonGroup extends PIXI.Graphics {
- Documentation generated by JSDoc 3.6.3 on Thu Jul 18 2019 12:16:18 GMT+0200 (Mitteleuropäische Sommerzeit) + Documentation generated by JSDoc 3.6.3 on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
diff --git a/doc/out/pixi_deepzoom_image.js.html b/doc/out/pixi_deepzoom_image.js.html index 6541224..71af321 100644 --- a/doc/out/pixi_deepzoom_image.js.html +++ b/doc/out/pixi_deepzoom_image.js.html @@ -2545,7 +2545,7 @@ export class DeepZoomImage extends PIXI.Container {
- Documentation generated by JSDoc 3.6.3 on Thu Jul 18 2019 12:16:18 GMT+0200 (Mitteleuropäische Sommerzeit) + Documentation generated by JSDoc 3.6.3 on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
diff --git a/doc/out/pixi_flippable.js.html b/doc/out/pixi_flippable.js.html index 2d66435..1cbc58e 100644 --- a/doc/out/pixi_flippable.js.html +++ b/doc/out/pixi_flippable.js.html @@ -1925,7 +1925,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
- Documentation generated by JSDoc 3.6.3 on Thu Jul 18 2019 12:16:18 GMT+0200 (Mitteleuropäische Sommerzeit) + Documentation generated by JSDoc 3.6.3 on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
diff --git a/doc/out/pixi_labeledgraphics.js.html b/doc/out/pixi_labeledgraphics.js.html index d1be3f5..8b7cec0 100644 --- a/doc/out/pixi_labeledgraphics.js.html +++ b/doc/out/pixi_labeledgraphics.js.html @@ -1870,7 +1870,7 @@ export class BitmapLabeledGraphics extends LabeledGraphics {
- Documentation generated by JSDoc 3.6.3 on Thu Jul 18 2019 12:16:18 GMT+0200 (Mitteleuropäische Sommerzeit) + Documentation generated by JSDoc 3.6.3 on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
diff --git a/doc/out/pixi_list.js.html b/doc/out/pixi_list.js.html index fd54631..02088ee 100644 --- a/doc/out/pixi_list.js.html +++ b/doc/out/pixi_list.js.html @@ -1848,7 +1848,7 @@ export default class List extends PIXI.Container {
- Documentation generated by JSDoc 3.6.3 on Thu Jul 18 2019 12:16:18 GMT+0200 (Mitteleuropäische Sommerzeit) + Documentation generated by JSDoc 3.6.3 on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
diff --git a/doc/out/pixi_message.js.html b/doc/out/pixi_message.js.html index d1093f6..cd9656f 100644 --- a/doc/out/pixi_message.js.html +++ b/doc/out/pixi_message.js.html @@ -1579,7 +1579,7 @@ export default class Message extends InteractivePopup {
- Documentation generated by JSDoc 3.6.3 on Thu Jul 18 2019 12:16:18 GMT+0200 (Mitteleuropäische Sommerzeit) + Documentation generated by JSDoc 3.6.3 on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
diff --git a/doc/out/pixi_modal.js.html b/doc/out/pixi_modal.js.html index 1588b6a..27ff089 100644 --- a/doc/out/pixi_modal.js.html +++ b/doc/out/pixi_modal.js.html @@ -1661,7 +1661,7 @@ export default class Modal extends PIXI.Container {
- Documentation generated by JSDoc 3.6.3 on Thu Jul 18 2019 12:16:18 GMT+0200 (Mitteleuropäische Sommerzeit) + Documentation generated by JSDoc 3.6.3 on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
diff --git a/doc/out/pixi_popup.js.html b/doc/out/pixi_popup.js.html index a140d09..3480ce7 100644 --- a/doc/out/pixi_popup.js.html +++ b/doc/out/pixi_popup.js.html @@ -1688,7 +1688,7 @@ export default class Popup extends InteractivePopup {
- Documentation generated by JSDoc 3.6.3 on Thu Jul 18 2019 12:16:18 GMT+0200 (Mitteleuropäische Sommerzeit) + Documentation generated by JSDoc 3.6.3 on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
diff --git a/doc/out/pixi_popupmenu.js.html b/doc/out/pixi_popupmenu.js.html index 9c5d94b..459e922 100644 --- a/doc/out/pixi_popupmenu.js.html +++ b/doc/out/pixi_popupmenu.js.html @@ -1574,7 +1574,7 @@ export default class PopupMenu extends Popup {
- Documentation generated by JSDoc 3.6.3 on Thu Jul 18 2019 12:16:18 GMT+0200 (Mitteleuropäische Sommerzeit) + Documentation generated by JSDoc 3.6.3 on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
diff --git a/doc/out/pixi_progress.js.html b/doc/out/pixi_progress.js.html index 67d8359..a34a025 100644 --- a/doc/out/pixi_progress.js.html +++ b/doc/out/pixi_progress.js.html @@ -1779,7 +1779,7 @@ export default class Progress extends PIXI.Container {
- Documentation generated by JSDoc 3.6.3 on Thu Jul 18 2019 12:16:18 GMT+0200 (Mitteleuropäische Sommerzeit) + Documentation generated by JSDoc 3.6.3 on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
diff --git a/doc/out/pixi_scrollview.js.html b/doc/out/pixi_scrollview.js.html index b953d5b..9d50649 100644 --- a/doc/out/pixi_scrollview.js.html +++ b/doc/out/pixi_scrollview.js.html @@ -1512,7 +1512,7 @@ export default class Scrollview extends Scrollbox {
- Documentation generated by JSDoc 3.6.3 on Thu Jul 18 2019 12:16:18 GMT+0200 (Mitteleuropäische Sommerzeit) + Documentation generated by JSDoc 3.6.3 on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
diff --git a/doc/out/pixi_slider.js.html b/doc/out/pixi_slider.js.html index a36eaa2..5f250f8 100644 --- a/doc/out/pixi_slider.js.html +++ b/doc/out/pixi_slider.js.html @@ -1951,7 +1951,7 @@ export default class Slider extends PIXI.Container {
- Documentation generated by JSDoc 3.6.3 on Thu Jul 18 2019 12:16:18 GMT+0200 (Mitteleuropäische Sommerzeit) + Documentation generated by JSDoc 3.6.3 on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
diff --git a/doc/out/pixi_switch.js.html b/doc/out/pixi_switch.js.html index 8f0ffe6..1cebd3a 100644 --- a/doc/out/pixi_switch.js.html +++ b/doc/out/pixi_switch.js.html @@ -2016,7 +2016,7 @@ export default class Switch extends PIXI.Container {
- Documentation generated by JSDoc 3.6.3 on Thu Jul 18 2019 12:16:18 GMT+0200 (Mitteleuropäische Sommerzeit) + Documentation generated by JSDoc 3.6.3 on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
diff --git a/doc/out/pixi_theme.js.html b/doc/out/pixi_theme.js.html index 0c6d67a..3cb870e 100644 --- a/doc/out/pixi_theme.js.html +++ b/doc/out/pixi_theme.js.html @@ -1713,7 +1713,7 @@ export class ThemeRed extends Theme {
- Documentation generated by JSDoc 3.6.3 on Thu Jul 18 2019 12:16:18 GMT+0200 (Mitteleuropäische Sommerzeit) + Documentation generated by JSDoc 3.6.3 on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
diff --git a/doc/out/pixi_tooltip.js.html b/doc/out/pixi_tooltip.js.html index b880d59..2ab5d2e 100644 --- a/doc/out/pixi_tooltip.js.html +++ b/doc/out/pixi_tooltip.js.html @@ -1605,7 +1605,7 @@ export default class Tooltip extends AbstractPopup {
- Documentation generated by JSDoc 3.6.3 on Thu Jul 18 2019 12:16:18 GMT+0200 (Mitteleuropäische Sommerzeit) + Documentation generated by JSDoc 3.6.3 on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
diff --git a/doc/out/pixi_volatile.js.html b/doc/out/pixi_volatile.js.html index f8d7566..f5914db 100644 --- a/doc/out/pixi_volatile.js.html +++ b/doc/out/pixi_volatile.js.html @@ -1609,7 +1609,7 @@ export default class Volatile {
- Documentation generated by JSDoc 3.6.3 on Thu Jul 18 2019 12:16:18 GMT+0200 (Mitteleuropäische Sommerzeit) + Documentation generated by JSDoc 3.6.3 on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
diff --git a/doc/out/uitest.js.html b/doc/out/uitest.js.html index 01e3689..96bed1c 100644 --- a/doc/out/uitest.js.html +++ b/doc/out/uitest.js.html @@ -2547,7 +2547,7 @@ class Event {
- Documentation generated by JSDoc 3.6.3 on Thu Jul 18 2019 12:16:18 GMT+0200 (Mitteleuropäische Sommerzeit) + Documentation generated by JSDoc 3.6.3 on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
diff --git a/lib/bootstrap.js b/lib/bootstrap.js index e94bff0..9bcf68a 100644 --- a/lib/bootstrap.js +++ b/lib/bootstrap.js @@ -1,9 +1,6 @@ class Bootstrap extends Object { static get isSafari() { - return ( - /Safari/.test(navigator.userAgent) && - /Apple Computer, Inc/.test(navigator.vendor) - ) + return /Safari/.test(navigator.userAgent) && /Apple Computer, Inc/.test(navigator.vendor) } static get isModernSafari() { @@ -78,11 +75,7 @@ class Bootstrap extends Object { }, null ) - } else if ( - this.isModernSafari || - this.isModernChrome || - this.isModernFirefox - ) { + } else if (this.isModernSafari || this.isModernChrome || this.isModernFirefox) { this.load(src, callback) } else { this.load( @@ -129,8 +122,7 @@ class Bootstrap extends Object { baseURL: baseUrl, map: { 'plugin-babel': baseUrl + '/3rdparty/systemjs/plugin-babel.js', - 'systemjs-babel-build': - baseUrl + '/3rdparty/systemjs/systemjs-babel-browser.js' + 'systemjs-babel-build': baseUrl + '/3rdparty/systemjs/systemjs-babel-browser.js' }, transpiler: 'plugin-babel', meta: { diff --git a/lib/bundle.js b/lib/bundle.js index c64ef03..47c3355 100755 --- a/lib/bundle.js +++ b/lib/bundle.js @@ -2,15 +2,7 @@ import App from './app.js' import Doctest from './doctest.js' import Errors from './errors.js' import Events from './events.js' -import { - DOMFlip, - DOMFlippable, - CardLoader, - PDFLoader, - ImageLoader, - FrameLoader, - HTMLLoader -} from './flippable.js' +import { DOMFlip, DOMFlippable, CardLoader, PDFLoader, ImageLoader, FrameLoader, HTMLLoader } from './flippable.js' import Index from './index.js' import Interface from './interface.js' import Logging from './logging.js' diff --git a/lib/capabilities.js b/lib/capabilities.js index 1317a18..e64c17f 100644 --- a/lib/capabilities.js +++ b/lib/capabilities.js @@ -45,20 +45,12 @@ export class Capabilities { */ static get isElectron() { // Renderer process - if ( - typeof window !== 'undefined' && - typeof window.process === 'object' && - window.process.type === 'renderer' - ) { + if (typeof window !== 'undefined' && typeof window.process === 'object' && window.process.type === 'renderer') { return true } // Main process - if ( - typeof process !== 'undefined' && - typeof process.versions === 'object' && - !!process.versions.electron - ) { + if (typeof process !== 'undefined' && typeof process.versions === 'object' && !!process.versions.electron) { return true } @@ -126,9 +118,7 @@ export class Capabilities { export class CapabilitiesTests { static testConfirm() { let bool = confirm('Please confirm') - document.getElementById('demo').innerHTML = bool - ? 'Confirmed' - : 'Not confirmed' + document.getElementById('demo').innerHTML = bool ? 'Confirmed' : 'Not confirmed' } static testPrompt() { @@ -149,9 +139,7 @@ export class CapabilitiesTests { } static testMultiTouchTable() { - let value = - 'Is the device a multi-touch table? ' + - Capabilities.isMultiTouchTable + let value = 'Is the device a multi-touch table? ' + Capabilities.isMultiTouchTable multi_touch_table.innerHTML = value } diff --git a/lib/card/card.js b/lib/card/card.js index d70b53d..30a7b4c 100644 --- a/lib/card/card.js +++ b/lib/card/card.js @@ -32,8 +32,7 @@ export default class Card { console.log('Setup Card...', modules) context.modules = [] modules.forEach(module => { - if (module.apply(context)) - context.modules.push(module.constructor.name) + if (module.apply(context)) context.modules.push(module.constructor.name) }) } @@ -138,10 +137,7 @@ export default class Card { event.stopPropagation() if (callStack) callStack.call(that, ...args) else { - console.error( - 'Could not call callback function ' + attributeVal, - ...args - ) + console.error('Could not call callback function ' + attributeVal, ...args) } }) } @@ -168,9 +164,7 @@ export default class Card { /<\s*(a|video|img|image|circle)\s(.*?)(xlink:href|href|src)\s*=\s*["'](\..*?)["']\s*(.*?)>/g, function(data) { let path = that._getRelativePath(arguments[4]) - const tag = `<${arguments[1]} ${arguments[2]} ${ - arguments[3] - }="${path}" ${arguments[5]}>` + const tag = `<${arguments[1]} ${arguments[2]} ${arguments[3]}="${path}" ${arguments[5]}>` /* if (that.debug) */ console.log('Adjusted: ', tag) return tag } @@ -328,16 +322,13 @@ export default class Card { //Test if meanwhile another popup was registered... this._getPopup(context) || // Or if an highlight was loaded, if the highlight already was closed. - (highlight !== null && - !this._isHighlightActive(context, highlight)) + (highlight !== null && !this._isHighlightActive(context, highlight)) ) { //.. if so remove the create popup instantly. popup.remove() } else { // Otherwise set the popup regularly. - let popupParagraphs = popup.element.querySelectorAll( - '.popupContent > *' - ) + let popupParagraphs = popup.element.querySelectorAll('.popupContent > *') // Remove a design error of naming two adjacent elements popup. // Todo: fix this properly and remove this code. @@ -388,8 +379,7 @@ export default class Card { * @memberof Card */ static _createPopup(context, position, content, options = {}) { - if (this.debug) - console.log('Create Popup.', context, position, content, options) + if (this.debug) console.log('Create Popup.', context, position, content, options) let popup = new Popup( Object.assign( { @@ -482,9 +472,7 @@ export default class Card { node = event.target } if (local == null) { - let globalClick = event.center - ? event.center - : { x: event.x, y: event.y } + let globalClick = event.center ? event.center : { x: event.x, y: event.y } local = Points.fromPageToNode(context, globalClick) } if (this.debug) console.log('loadPopup', event) @@ -517,17 +505,11 @@ export default class Card { // Extract the body from the Popup site. let parser = new DOMParser() - let popupPage = parser.parseFromString( - xhr.responseText, - 'text/html' - ) + let popupPage = parser.parseFromString(xhr.responseText, 'text/html') //Fix the relative path of loaded images in the popup. popupPage.querySelectorAll('img').forEach(node => { - node.setAttribute( - 'src', - that._getRelativePath(node.getAttribute('src')) - ) + node.setAttribute('src', that._getRelativePath(node.getAttribute('src'))) }) let html = popupPage.body.innerHTML /** @@ -549,18 +531,10 @@ export default class Card { Card._cleanup(context) if (!isSame) { - Card._activateCorrespondingHighlights( - context, - node, - parentArticle - ) + Card._activateCorrespondingHighlights(context, node, parentArticle) let callback = (popup, callback) => { - if (this.debug) - console.log( - 'Close popup (Editable = ' + editable + ').', - popup - ) + if (this.debug) console.log('Close popup (Editable = ' + editable + ').', popup) if (editable) { let isDirty = mainController.askSaveNode() if (isDirty) @@ -596,8 +570,7 @@ export default class Card { } //console.log("onreadystatechange", editable) if (editable) { - if (this.debug) - console.log('pushController', src, popup.insertedNode) + if (this.debug) console.log('pushController', src, popup.insertedNode) mainController.pushController(popup.insertedNode, src) } } @@ -627,10 +600,7 @@ export default class Card { } if (correspondingHighlights.length > 0) { for (let highlight of correspondingHighlights) { - if ( - highlight.parentNode && - highlight.parentNode.nodeName.toLowerCase() == 'g' - ) { + if (highlight.parentNode && highlight.parentNode.nodeName.toLowerCase() == 'g') { Highlight.openHighlight(highlight, { animation: Card.highlightAnimation }) @@ -729,10 +699,7 @@ export default class Card { let matrix = node.getCTM() let point = svgPoint.matrixTransform(matrix) - let global = Points.fromNodeToPage( - node.closest('div'), - point - ) + let global = Points.fromNodeToPage(node.closest('div'), point) let local = Points.fromPageToNode(context, global) let overlay = document.createElement('div') @@ -778,16 +745,12 @@ export default class Card { xhr.onreadystatechange = () => { if (xhr.readyState == 4) { if (xhr.status == 200 || xhr.status == 0) { - let html = this.postProcessResponseText( - xhr.responseText - ) + let html = this.postProcessResponseText(xhr.responseText) let selector = Card.popupHtmlSelector let content = { html: html.body.innerHTML, selector } resolve(content) } else { - reject( - ` Popup request failed (Code: ${xhr.status}): Could not load resource: ${src}` - ) + reject(` Popup request failed (Code: ${xhr.status}): Could not load resource: ${src}`) } } } @@ -802,8 +765,7 @@ export default class Card { let editable = Card.isEditable() if (editable) { - if (node.classList.contains('zoomable-icon')) - this._openZoomable(event) + if (node.classList.contains('zoomable-icon')) this._openZoomable(event) return } this._openZoomable(event) @@ -852,10 +814,7 @@ export default class Card { globalBottomRight = Points.fromNodeToPage(zoomable, globalBottomRight) let globalFigurePos = Points.fromNodeToPage(zoomable, { x: 0, y: 0 }) let localFigurePos = Points.fromPageToNode(wrapper, globalFigurePos) - let relativeBottomRight = Points.fromPageToNode( - zoomable, - globalBottomRight - ) + let relativeBottomRight = Points.fromPageToNode(zoomable, globalBottomRight) let width = relativeBottomRight.x + @@ -969,12 +928,8 @@ export default class Card { }) let zoomedFigStyle = window.getComputedStyle(zoomedFig) - let borderX = - parseFloat(zoomedFigStyle.borderLeftWidth) + - parseFloat(zoomedFigStyle.borderRightWidth) - let borderY = - parseFloat(zoomedFigStyle.borderBottomWidth) + - parseFloat(zoomedFigStyle.borderTopWidth) + let borderX = parseFloat(zoomedFigStyle.borderLeftWidth) + parseFloat(zoomedFigStyle.borderRightWidth) + let borderY = parseFloat(zoomedFigStyle.borderBottomWidth) + parseFloat(zoomedFigStyle.borderTopWidth) const scaleFactor = 2 const transformOrigin = 'bottom right' @@ -1026,14 +981,7 @@ export default class Card { .to(zoomCaption, this.animation.fade, { autoAlpha: 1 }) - } else - this._openZoomableEditorBehaviour( - wrapper, - img, - zoomable, - zoomedFig, - current - ) + } else this._openZoomableEditorBehaviour(wrapper, img, zoomable, zoomedFig, current) } /** @@ -1066,13 +1014,7 @@ export default class Card { return parent.querySelector('.icon') } - static _openZoomableEditorBehaviour( - wrapper, - img, - zoomable, - zoomedFig, - current - ) { + static _openZoomableEditorBehaviour(wrapper, img, zoomable, zoomedFig, current) { let zoomContainer = document.createElement('div') let zoomIcon = zoomable.querySelector('.zoom-icon') zoomContainer.style.position = 'relative' @@ -1166,8 +1108,7 @@ export default class Card { * @memberof Card */ static closeZoomable(context, zoomable, zoomedFig) { - if (this.debug) - console.log('Close Zoomable', context, zoomable, zoomedFig) + if (this.debug) console.log('Close Zoomable', context, zoomable, zoomedFig) if (zoomable) { this._unsetZoomable(context) @@ -1218,13 +1159,7 @@ export default class Card { * @param {*} src - The src of the expanded element * @param {*} callback - A callback that is called when the expanded element is closed */ - static expandIndexCard( - card, - html, - tagName = 'article', - src = null, - callback = null - ) { + static expandIndexCard(card, html, tagName = 'article', src = null, callback = null) { let editable = Card.isEditable() let context = this.getContext(card) @@ -1257,10 +1192,7 @@ export default class Card { let globalPreviewRect = Card._getGlobalRect(card) let globalIndexCardRect = Card._getGlobalRect(indexbox) - let localOrigin = Points.fromPageToNode( - indexbox, - Rect.getPosition(globalPreviewRect) - ) + let localOrigin = Points.fromPageToNode(indexbox, Rect.getPosition(globalPreviewRect)) let scaleX = globalPreviewRect.width / globalIndexCardRect.width let scaleY = globalPreviewRect.height / globalIndexCardRect.height @@ -1331,15 +1263,12 @@ export default class Card { let cardName = strparts[strparts.length - 1] strparts = card.className.split(' ') let cardType = strparts[1] - let msg = - 'Card: ' + cardID + ': openTopic: ' + cardType + ', ' + cardName + let msg = 'Card: ' + cardID + ': openTopic: ' + cardType + ', ' + cardName console.log('Logging:', msg) Logging.log(msg) } - let desiredBorderBottomWidth = parseInt( - window.getComputedStyle(titlebar).borderBottomWidth - ) + let desiredBorderBottomWidth = parseInt(window.getComputedStyle(titlebar).borderBottomWidth) TweenLite.to(clone, Card.animation.articleTransition, { x: -padding, y: -padding, @@ -1360,8 +1289,7 @@ export default class Card { }) // Retain the border at same visual thickness. - titlebar.style.borderBottomWidth = - desiredBorderBottomWidth / transform.scaleY + 'px' + titlebar.style.borderBottomWidth = desiredBorderBottomWidth / transform.scaleY + 'px' } }) @@ -1384,13 +1312,7 @@ export default class Card { let cardName = strparts[strparts.length - 1] strparts = card.className.split(' ') let cardType = strparts[1] - let msg = - 'Card: ' + - cardID + - ': closeTopic: ' + - cardType + - ', ' + - cardName + let msg = 'Card: ' + cardID + ': closeTopic: ' + cardType + ', ' + cardName console.log('Logging:', msg) Logging.log(msg) } @@ -1457,8 +1379,7 @@ export default class Card { }) // Retain the border at same visual thickness. - titlebar.style.borderBottomWidth = - desiredBorderBottomWidth / transform.scaleY + 'px' + titlebar.style.borderBottomWidth = desiredBorderBottomWidth / transform.scaleY + 'px' } }) } @@ -1468,9 +1389,7 @@ export default class Card { if (iconClone == null) { iconClone = clone.querySelector('.cardicon') - console.warn( - "Legacy selector. Change it to 'card-icon' and find a more suitable name." - ) + console.warn("Legacy selector. Change it to 'card-icon' and find a more suitable name.") } if (iconClone.tagName == 'img') { @@ -1478,11 +1397,7 @@ export default class Card { } //console.log("ICON: ", iconClone) iconClone.classList.remove('info') - iconClone.classList.add( - 'close', - 'view-button', - 'transparent-background' - ) + iconClone.classList.add('close', 'view-button', 'transparent-background') // We append the icon clone to the subcard-content. // Then it's always on the content and not on the background @@ -1589,13 +1504,7 @@ export default class Card { // card.insertAdjacentElement('afterbegin', article) // TweenLite.set(article, { autoAlpha: 0 }) - Card.expandIndexCard( - card, - parsedHTML, - 'article', - relativeSource, - saveCallback - ) + Card.expandIndexCard(card, parsedHTML, 'article', relativeSource, saveCallback) } } xhr.onerror = () => { @@ -1632,9 +1541,7 @@ export default class Card { let dom = child.closest('.info-card') if (!dom) { dom = child.querySelector('.wrapper') - console.warn( - "Change the 'wrapper' class to 'info-card' it's more suitable." - ) + console.warn("Change the 'wrapper' class to 'info-card' it's more suitable.") } return dom // (dom == null) ? document.body : dom } @@ -1782,9 +1689,7 @@ export default class Card { if (indexbox != null) { // column != null || let links = Array.from(indexbox.getElementsByTagName('a')) - let globalClick = event.center - ? event.center - : { x: event.x, y: event.y } + let globalClick = event.center ? event.center : { x: event.x, y: event.y } let localClick = Points.fromPageToNode(indexbox, globalClick) let linkRects = links.map(link => { @@ -1819,16 +1724,9 @@ export default class Card { let closestLinkIndex = distances.indexOf(Math.min(...distances)) let closestLink = links[closestLinkIndex] - console.log( - 'finding closest links', - closestLink, - closestLink.getClientRects() - ) + console.log('finding closest links', closestLink, closestLink.getClientRects()) - if ( - distances[closestLinkIndex] < 44 && - closestLink.getAttribute('href') - ) { + if (distances[closestLinkIndex] < 44 && closestLink.getAttribute('href')) { // Adapt context and local position let context = this.getContext(closestLink) let local = Points.fromPageToNode(context, globalClick) diff --git a/lib/card/highlight.js b/lib/card/highlight.js index b80aac9..7accac8 100644 --- a/lib/card/highlight.js +++ b/lib/card/highlight.js @@ -60,10 +60,7 @@ export default class Highlight extends Object { if (circle.classList.length == 0) { circle.removeAttribute('class') } - if ( - circle.hasAttribute('id') && - circle.getAttribute('id').startsWith('@@') - ) { + if (circle.hasAttribute('id') && circle.getAttribute('id').startsWith('@@')) { circle.removeAttribute('id') } circle.removeAttribute('data-svg-origin') @@ -78,10 +75,7 @@ export default class Highlight extends Object { } } - static expand( - obj, - { scale = 2, duration = 3, stroke = 2, onComplete = null } = {} - ) { + static expand(obj, { scale = 2, duration = 3, stroke = 2, onComplete = null } = {}) { if (obj == null) return //console.log("expand") obj.classList.add('zooming') @@ -166,9 +160,7 @@ export default class Highlight extends Object { this.shrink(maskImage, { stroke }) return } - let circles = Array.from(circleGroup.children).filter( - e => e.tagName == 'circle' - ) + let circles = Array.from(circleGroup.children).filter(e => e.tagName == 'circle') for (let c of circles) { //console.log("shrinking all circles") this.shrink(c, { stroke }) @@ -188,10 +180,7 @@ export default class Highlight extends Object { return false } - static openHighlight( - target, - { animation = 0.5, scale = 2, onExpanded = null } = {} - ) { + static openHighlight(target, { animation = 0.5, scale = 2, onExpanded = null } = {}) { if (Highlight._isExpanded(target)) { console.log('Target is already expanded!') return @@ -205,10 +194,7 @@ export default class Highlight extends Object { let image = parent.querySelector(imageId) if (image) { this._bringToFront(image) - } else - console.error( - 'Could not find corresponding image element.' - ) + } else console.error('Could not find corresponding image element.') } else console.log('Element was no parent:', target) } this._bringToFront(target) @@ -253,12 +239,7 @@ export default class Highlight extends Object { if (target && parent) { parent.removeChild(target) parent.appendChild(target) - } else - console.error( - 'Could not bring to front. Either no target or no parent.', - target, - parent - ) + } else console.error('Could not bring to front. Either no target or no parent.', target, parent) } static _getSVGMask(circle, { svgRoot = null, image = null } = {}) { @@ -293,10 +274,7 @@ export default class Highlight extends Object { * @returns * @memberof Highlight */ - static _createSVGMask( - element, - { svgRoot = null, image = null, id = null } = {} - ) { + static _createSVGMask(element, { svgRoot = null, image = null, id = null } = {}) { // We can fetch these values here, but it's more efficient to // simply pass them in, as it's likely they were already retrieved beforehand. if (svgRoot == null) svgRoot = element.closest('svg') diff --git a/lib/card/plugin.js b/lib/card/plugin.js index 9d38249..519245f 100644 --- a/lib/card/plugin.js +++ b/lib/card/plugin.js @@ -48,10 +48,7 @@ export class CardPluginBase { } _getVerificationFunctions(context) { - return [ - this._verifyContext.bind(this, context), - this._verifyRequirements.bind(this, context) - ] + return [this._verifyContext.bind(this, context), this._verifyRequirements.bind(this, context)] } _verifyContext(context) { @@ -139,11 +136,7 @@ CardPlugin.EnlargeableThumbnail = class EnlargeableThumbnail extends CardPluginB constructor( wrapperSelector, overlaySelector = null, - { - zoomAnimationDuration = 0.4, - fadeAnimationDuration = 0.4, - interactionType = 'tap' - } = {} + { zoomAnimationDuration = 0.4, fadeAnimationDuration = 0.4, interactionType = 'tap' } = {} ) { super() this.wrapperSelector = wrapperSelector @@ -160,14 +153,7 @@ CardPlugin.EnlargeableThumbnail = class EnlargeableThumbnail extends CardPluginB _getVerificationFunctions(context) { let arr = super._getVerificationFunctions(context) - let funcs = [ - this._verifyElementsExist.bind( - this, - context, - this.wrapperSelector, - this.overlaySelector - ) - ] + let funcs = [this._verifyElementsExist.bind(this, context, this.wrapperSelector, this.overlaySelector)] return arr.concat(funcs) } @@ -252,9 +238,7 @@ CardPlugin.EnlargeableThumbnail = class EnlargeableThumbnail extends CardPluginB * The minor side should not exceed the height of the context window. */ const maxMinorSize = - context.offsetHeight - - 2 * parseInt(headerStlye.paddingTop) - - 2 * parseInt(headerStlye.marginTop) + context.offsetHeight - 2 * parseInt(headerStlye.paddingTop) - 2 * parseInt(headerStlye.marginTop) const max = { width: context.offsetWidth * maxFillRatio, @@ -284,10 +268,7 @@ CardPlugin.EnlargeableThumbnail = class EnlargeableThumbnail extends CardPluginB // const minorImageSize = getImageSize(minorSide) let ratio = getImageSize(minorSide) / getImageSize(majorSide) - let size = - majorImageSize > max[majorSide.name] - ? max[majorSide.name] - : majorImageSize + let size = majorImageSize > max[majorSide.name] ? max[majorSide.name] : majorImageSize if (size * ratio > maxMinorSize) { size = maxMinorSize / ratio @@ -298,10 +279,7 @@ CardPlugin.EnlargeableThumbnail = class EnlargeableThumbnail extends CardPluginB height: 0 } - let position = Points.fromPageToNode( - context, - Points.fromNodeToPage(source, { x: 0, y: 0 }) - ) + let position = Points.fromPageToNode(context, Points.fromNodeToPage(source, { x: 0, y: 0 })) let targetOffset = { x: 0, @@ -312,13 +290,9 @@ CardPlugin.EnlargeableThumbnail = class EnlargeableThumbnail extends CardPluginB targetDimensions[minorSide.name] = size * ratio targetOffset[majorSide.axis] = - (context['offset' + capitalize(majorSide.name)] - - targetDimensions[majorSide.name]) / - 2 + (context['offset' + capitalize(majorSide.name)] - targetDimensions[majorSide.name]) / 2 targetOffset[minorSide.axis] = - (context['offset' + capitalize(minorSide.name)] - - targetDimensions[minorSide.name]) / - 2 + (context['offset' + capitalize(minorSide.name)] - targetDimensions[minorSide.name]) / 2 overlay.appendChild(imageWrapper) @@ -358,18 +332,14 @@ CardPlugin.EnlargeableThumbnail = class EnlargeableThumbnail extends CardPluginB } getBorderHeight(style) { - const borderWidth = - parseInt(style.borderTopWidth) + parseInt(style.borderBottomWidth) - const padding = - parseInt(style.paddingTop) + parseInt(style.paddingBottom) + const borderWidth = parseInt(style.borderTopWidth) + parseInt(style.borderBottomWidth) + const padding = parseInt(style.paddingTop) + parseInt(style.paddingBottom) return parseInt(style.width) + borderWidth + padding } getBorderWidth(style) { - const borderWidth = - parseInt(style.borderLeftWidth) + parseInt(style.borderRightWidth) - const padding = - parseInt(style.paddingLeft) + parseInt(style.paddingRight) + const borderWidth = parseInt(style.borderLeftWidth) + parseInt(style.borderRightWidth) + const padding = parseInt(style.paddingLeft) + parseInt(style.paddingRight) return parseInt(style.width) + borderWidth + padding } @@ -404,16 +374,12 @@ CardPlugin.Ui = class UiPlugin extends CardPluginBase { _doesParentExist(context, parent) { if (parent == null) return true let valid = context.querySelector(parent) != null - if (!valid) - console.error('Could not find parent on context.', context, parent) + if (!valid) console.error('Could not find parent on context.', context, parent) return valid } append(context) { - parent = - this.parent == null - ? context - : context.querySelector(this.parent).appendChild(container) + parent = this.parent == null ? context : context.querySelector(this.parent).appendChild(container) let container = document.createElement('div') container.className = this.className parent.appendChild(container) @@ -513,15 +479,8 @@ CardPlugin.Speech = class SpeechPlugin extends CardPluginBase { utterance.onboundary = () => { console.log('onboundary', node.innerText) - if ( - this.currentText.substring(0, 5) != - node.innerText.substring(0, 5) - ) { - console.log( - 'text for speech synth changed!', - this.currentText, - node.innerText - ) + if (this.currentText.substring(0, 5) != node.innerText.substring(0, 5)) { + console.log('text for speech synth changed!', this.currentText, node.innerText) this._stop() } } diff --git a/lib/card/scatter.js b/lib/card/scatter.js index ffd4ac2..f3df28f 100644 --- a/lib/card/scatter.js +++ b/lib/card/scatter.js @@ -63,11 +63,7 @@ export default class ScatterCard extends Card { * @returns * @memberof Card */ - static createCardScatter( - html, - scatterContainer, - { basePath = './', modules = [] } = {} - ) { + static createCardScatter(html, scatterContainer, { basePath = './', modules = [] } = {}) { let element = document.createElement('div') scatterContainer.element.appendChild(element) @@ -94,11 +90,7 @@ export default class ScatterCard extends Card { * @returns * @memberof CardScatter */ - static loadAndCreateScatterCard( - scatterContainer, - item, - { basePath = '../', modules = [], onClose = null } = {} - ) { + static loadAndCreateScatterCard(scatterContainer, item, { basePath = '../', modules = [], onClose = null } = {}) { console.log(basePath) return new Promise((resolve, reject) => { let url = basePath + '/' + item + '/index.html' @@ -106,14 +98,10 @@ export default class ScatterCard extends Card { this.loadHTML(url) .then(html => { console.log('Received', html) - let element = this.createCardScatter( - html, - scatterContainer, - { - basePath, - modules - } - ) + let element = this.createCardScatter(html, scatterContainer, { + basePath, + modules + }) if (onClose) this.addOnCloseListener(element, onClose) resolve(element) }) diff --git a/lib/card/wrapper.js b/lib/card/wrapper.js index 77fc35f..e40fd71 100644 --- a/lib/card/wrapper.js +++ b/lib/card/wrapper.js @@ -5,10 +5,7 @@ import Events from '../events.js' import { Points } from '../utils.js' export default class CardWrapper extends Object { - constructor( - domNode, - { triggerSVGClicks = true, allowClickDistance = 44 } = {} - ) { + constructor(domNode, { triggerSVGClicks = true, allowClickDistance = 44 } = {}) { super() this.domNode = domNode this.triggerSVGClicks = triggerSVGClicks @@ -57,7 +54,7 @@ export default class CardWrapper extends Object { isClickable(node) { if (node == null) return false - // console.log("isClickable", node, this.isClickPrevented(node)) + // console.log("isClickable", node, this.isClickPrevented(node)) if (this.isClickPrevented(node)) { return false } @@ -99,9 +96,7 @@ export default class CardWrapper extends Object { nearestActive(event) { let element = this.domNode let activeNodes = this.activeNodes() - let globalClick = event.center - ? event.center - : { x: event.x, y: event.y } + let globalClick = event.center ? event.center : { x: event.x, y: event.y } let localClick = Points.fromPageToNode(element, globalClick) let clickRects = activeNodes.map(link => { @@ -154,7 +149,7 @@ export default class CardWrapper extends Object { } nodeTapped(node, event) { - console.log("nodeTapped", node, this.isClickable(node)) + console.log('nodeTapped', node, this.isClickable(node)) if (this.isClickable(node)) { this.simulateClick(node, event) return true @@ -165,7 +160,7 @@ export default class CardWrapper extends Object { return true } for (let [selector, handler] of this.tapHandler.entries()) { - console.log("nodeTapped", selector) + console.log('nodeTapped', selector) for (let obj of this.domNode.querySelectorAll(selector)) { if (node == obj) { handler(event, node) @@ -177,10 +172,9 @@ export default class CardWrapper extends Object { } tap(event, calledBy = 'unknown') { - if (event.isTrusted) { let node = this.nearestActive(event) - console.log("tap", node) + console.log('tap', node) this.nodeTapped(node, event) /* let node = document.elementFromPoint(event.clientX, event.clientY) diff --git a/lib/doctest.js b/lib/doctest.js index a51eda9..679eb19 100755 --- a/lib/doctest.js +++ b/lib/doctest.js @@ -30,32 +30,21 @@ export default class Doctest { static expect(expr, value) { if (this.pprint(expr) != this.pprint(value)) { //throw new Error("got `" + expr + "` but expected `" + value + "`.") - throw new Error( - 'got `' + - this.pprint(expr) + - '` but expected `' + - this.pprint(value) + - '`.' - ) + throw new Error('got `' + this.pprint(expr) + '` but expected `' + this.pprint(value) + '`.') } } static expectError(error, message) { let index = error.toString().indexOf(message) if (index < 0) { - throw new Error( - 'got `' + message + '` but expected `' + error + '`.' - ) + throw new Error('got `' + message + '` but expected `' + error + '`.') } } static expectLog(...messages) { // if (!docTestLogMessages.equals(messages)) { docTestLogMessages.forEach((msg, i) => { - if (msg != messages[i]) - throw new Error( - 'Unexpected log message: `' + messages[i] + '`.' - ) + if (msg != messages[i]) throw new Error('Unexpected log message: `' + messages[i] + '`.') }) // throw new Error('Uups') //} @@ -104,10 +93,7 @@ export default class Doctest { let lines = text.value.split('\n') let better = [] for (let line of lines) { - if ( - replaceExpect && - line.trim().startsWith('Doctest.expect(') - ) { + if (replaceExpect && line.trim().startsWith('Doctest.expect(')) { line = line.replace(/Doctest\.expect\(/, '>>> ').trim() if (line.endsWith(')') || line.endsWith(',')) { line = line.slice(0, -1) diff --git a/lib/events.js b/lib/events.js index 201aa5c..21af172 100755 --- a/lib/events.js +++ b/lib/events.js @@ -38,8 +38,7 @@ export default class Events { // be this is a bug or a security feature. Workaround: we introduce // a mouseDownSubstitute attribute that can be assigned to cloned // events after instantiation. - if (Reflect.has(event, 'mouseDownSubstitute')) - return event.mouseDownSubstitute + if (Reflect.has(event, 'mouseDownSubstitute')) return event.mouseDownSubstitute return event.buttons || event.which } @@ -74,15 +73,7 @@ export default class Events { for (let i = 0; i < targets.length; i++) { let t = targets[i] let touchTarget = document.elementFromPoint(t.pageX, t.pageY) - let touch = new Touch( - undefined, - touchTarget, - t.identifier, - t.pageX, - t.pageY, - t.screenX, - t.screenY - ) + let touch = new Touch(undefined, touchTarget, t.identifier, t.pageX, t.pageY, t.screenX, t.screenY) touches.push(touch) } return new TouchList(...touches) @@ -166,8 +157,7 @@ export default class Events { let result = event.type let selector = this.selector(event.target) result += ' selector: ' + selector - if (event.target != document.querySelector(selector)) - console.log('Cannot resolve', selector) + if (event.target != document.querySelector(selector)) console.log('Cannot resolve', selector) let keys = ['layerX', 'layerY', 'pageX', 'pageY', 'clientX', 'clientY'] for (let key of keys) { try { diff --git a/lib/flippable.js b/lib/flippable.js index 9f867c3..8c57e12 100644 --- a/lib/flippable.js +++ b/lib/flippable.js @@ -258,28 +258,22 @@ export class DOMFlip { frontLoaded(loader) { return new Promise((resolve, reject) => { - let scatter = new DOMScatter( - this.cardWrapper, - this.domScatterContainer, - { - x: loader.x, - y: loader.y, - startScale: loader.scale, - scale: loader.scale, - maxScale: loader.maxScale, - minScale: loader.minScale, - width: loader.wantedWidth, - height: loader.wantedHeight, - rotation: loader.rotation, - translatable: this.translatable, - scalable: this.scalable, - rotatable: this.rotatable, - overdoScaling: this.overdoScaling, - tapDelegate: this.tapDelegateFactory - ? this.tapDelegateFactory(this.cardWrapper) - : null - } - ) + let scatter = new DOMScatter(this.cardWrapper, this.domScatterContainer, { + x: loader.x, + y: loader.y, + startScale: loader.scale, + scale: loader.scale, + maxScale: loader.maxScale, + minScale: loader.minScale, + width: loader.wantedWidth, + height: loader.wantedHeight, + rotation: loader.rotation, + translatable: this.translatable, + scalable: this.scalable, + rotatable: this.rotatable, + overdoScaling: this.overdoScaling, + tapDelegate: this.tapDelegateFactory ? this.tapDelegateFactory(this.cardWrapper) : null + }) if (this.center) { scatter.centerAt(this.center) @@ -296,9 +290,7 @@ export class DOMFlip { //Remove callback if (scatter.onTransform) { - let callbackIdx = scatter.onTransform.indexOf( - removeOnMinScale - ) + let callbackIdx = scatter.onTransform.indexOf(removeOnMinScale) scatter.onTransform.splice(callbackIdx, 1) } } @@ -572,9 +564,7 @@ export class DOMFlippable { this.flipped = !this.flipped let targetY = this.flipped ? 180 : 0 - let targetZ = this.flipped - ? this.startAngle + this.targetRotation(this.startAngle) - : this.startAngle + let targetZ = this.flipped ? this.startAngle + this.targetRotation(this.startAngle) : this.startAngle let targetScale = this.flipped ? this.wantedScale : this.startScale let w = this.flipped ? this.wantedWidth : this.startWidth let h = this.flipped ? this.wantedHeight : this.startHeight diff --git a/lib/frames.js b/lib/frames.js index 8baf519..56893a7 100755 --- a/lib/frames.js +++ b/lib/frames.js @@ -59,15 +59,7 @@ export class FrameTarget { let point = pointMap.get(key) let p = Points.fromPageToNode(this.frame, point) let touchTarget = doc.elementFromPoint(p.x, p.y) - let touch = new Touch( - undefined, - touchTarget, - key, - p.x, - p.y, - p.x, - p.y - ) + let touch = new Touch(undefined, touchTarget, key, p.x, p.y, p.x, p.y) touches.push(touch) } return new TouchList(...touches) @@ -102,12 +94,7 @@ export class FrameTarget { this.target.dispatchEvent(touchEvent) } - simulateTouchEventSafari( - type, - point, - pointMap, - touchEventKey = 'targetTouches' - ) { + simulateTouchEventSafari(type, point, pointMap, touchEventKey = 'targetTouches') { let p = Points.fromPageToNode(this.frame, point) let data = { view: this.frame.contentWindow, @@ -131,9 +118,7 @@ export class FrameTarget { } isMouseLikeEvent(event) { - return ( - event.type.startsWith('mouse') || event.type.startsWith('pointer') - ) + return event.type.startsWith('mouse') || event.type.startsWith('pointer') } onStart(event, interaction) { @@ -142,11 +127,7 @@ export class FrameTarget { if (this.isMouseLikeEvent(event)) { this.simulateMouseEvent('mousedown', point) } else { - this.simulateTouchEvent( - 'touchstart', - point, - interaction.current - ) + this.simulateTouchEvent('touchstart', point, interaction.current) return } } @@ -170,12 +151,7 @@ export class FrameTarget { if (this.isMouseLikeEvent(event)) { this.simulateMouseEvent('mouseend', point) } else { - this.simulateTouchEvent( - 'touchend', - point, - interaction.ended, - 'changedTouches' - ) + this.simulateTouchEvent('touchend', point, interaction.ended, 'changedTouches') return } } diff --git a/lib/interaction.js b/lib/interaction.js index 5414545..7a4d9fc 100755 --- a/lib/interaction.js +++ b/lib/interaction.js @@ -205,10 +205,10 @@ export class InteractionPoints { delta() { let prev = [] let curr = [] - let cm = { x: 0, y: 0} - let pm = { x: 0, y: 0} + let cm = { x: 0, y: 0 } + let pm = { x: 0, y: 0 } let count = 0 - for(let key of this.current.keys()) { + for (let key of this.current.keys()) { if (this.previous.has(key)) { let p = this.previous.get(key) let c = this.current.get(key) @@ -227,7 +227,7 @@ export class InteractionPoints { let scaled = 0 let alpha = 0 let zoom = 1 - for(let i=0; i t1 + this.longPressTime if (tookLong) { @@ -509,10 +477,7 @@ export class Interaction extends InteractionPoints { this.unregisterTap(key) } } - if ( - this.tapTimestamps.has(key) && - performance.now() > this.tapTimestamps.get(key) + this.tapDuration - ) { + if (this.tapTimestamps.has(key) && performance.now() > this.tapTimestamps.get(key) + this.tapDuration) { //console.log("tap too long") this.unregisterTap(key) } @@ -537,11 +502,7 @@ export class Interaction extends InteractionPoints { isLongPress(key) { let ended = this.ended.get(key) let start = this.start.get(key) - if ( - start && - ended && - Points.distance(ended, start) < this.tapDistance - ) { + if (start && ended && Points.distance(ended, start) < this.tapDistance) { let t1 = this.timestamps.get(key) let tookLong = performance.now() > t1 + this.longPressTime if (tookLong) { @@ -608,9 +569,7 @@ export class InteractionDelegate { setupInteraction() { if (this.debug) { - let error = this.targetInterface.implementationError( - this.target.constructor - ) + let error = this.targetInterface.implementationError(this.target.constructor) if (error != null) { throw new Error('Expected IInteractionTarget: ' + error) } @@ -648,16 +607,11 @@ export class InteractionDelegate { element.addEventListener( 'pointermove', e => { - if (this.debug) - console.log('pointermove', e.pointerId, e.pointerType) + if (this.debug) console.log('pointermove', e.pointerId, e.pointerType) - if ( - e.pointerType == 'touch' || - (e.pointerType == 'mouse' && Events.isPointerDown(e)) - ) { + if (e.pointerType == 'touch' || (e.pointerType == 'mouse' && Events.isPointerDown(e))) { // this.capture(e) && - if (this.debug) - console.log('pointermove captured', e.pointerId) + if (this.debug) console.log('pointermove captured', e.pointerId) this.onMove(e) } }, @@ -666,8 +620,7 @@ export class InteractionDelegate { element.addEventListener( 'pointerup', e => { - if (this.debug) - console.log('pointerup', e.pointerId, e.pointerType) + if (this.debug) console.log('pointerup', e.pointerId, e.pointerType) this.onEnd(e) if (this.capturePointerEvents) { try { @@ -682,11 +635,9 @@ export class InteractionDelegate { element.addEventListener( 'pointercancel', e => { - if (this.debug) - console.log('pointercancel', e.pointerId, e.pointerType) + if (this.debug) console.log('pointercancel', e.pointerId, e.pointerType) this.onEnd(e) - if (this.capturePointerEvents) - element.releasePointerCapture(e.pointerId) + if (this.capturePointerEvents) element.releasePointerCapture(e.pointerId) }, useCapture ) @@ -695,12 +646,7 @@ export class InteractionDelegate { element.addEventListener( 'pointerleave', e => { - if (this.debug) - console.log( - 'pointerleave', - e.pointerId, - e.pointerType - ) + if (this.debug) console.log('pointerleave', e.pointerId, e.pointerType) if (e.target == element) this.onEnd(e) }, useCapture @@ -711,12 +657,7 @@ export class InteractionDelegate { element.addEventListener( 'pointerout', e => { - if (this.debug) - console.log( - 'pointerout', - e.pointerId, - e.pointerType - ) + if (this.debug) console.log('pointerout', e.pointerId, e.pointerType) if (e.target == element) this.onEnd(e) }, useCapture @@ -727,13 +668,7 @@ export class InteractionDelegate { window.addEventListener( 'pointerout', e => { - if (this.debug) - console.log( - 'pointerout', - e.pointerId, - e.pointerType, - e.target - ) + if (this.debug) console.log('pointerout', e.pointerId, e.pointerType, e.target) if (e.target == element) { this.onEnd(e) } @@ -746,8 +681,7 @@ export class InteractionDelegate { element.addEventListener( 'touchstart', e => { - if (this.debug) - console.log('touchstart', this.touchPoints(e)) + if (this.debug) console.log('touchstart', this.touchPoints(e)) if (this.capture(e)) { for (let touch of e.changedTouches) { this.onStart(touch) @@ -759,8 +693,7 @@ export class InteractionDelegate { element.addEventListener( 'touchmove', e => { - if (this.debug) - console.log('touchmove', this.touchPoints(e), e) + if (this.debug) console.log('touchmove', this.touchPoints(e), e) for (let touch of e.changedTouches) { this.onMove(touch) } @@ -783,12 +716,7 @@ export class InteractionDelegate { element.addEventListener( 'touchcancel', e => { - if (this.debug) - console.log( - 'touchcancel', - e.targetTouches.length, - e.changedTouches.length - ) + if (this.debug) console.log('touchcancel', e.targetTouches.length, e.changedTouches.length) for (let touch of e.changedTouches) { this.onEnd(touch) } @@ -837,9 +765,7 @@ export class InteractionDelegate { e => { if (e.target == element) { this.onEnd(e) - console.warn( - "Shouldn't happen: mouseout ends interaction" - ) + console.warn("Shouldn't happen: mouseout ends interaction") } }, useCapture @@ -880,16 +806,8 @@ export class InteractionDelegate { } setupMouseWheelInteraction() { - this.mouseWheelElement.addEventListener( - 'mousewheel', - this.onMouseWheel.bind(this), - true - ) - this.mouseWheelElement.addEventListener( - 'DOMMouseScroll', - this.onMouseWheel.bind(this), - true - ) + this.mouseWheelElement.addEventListener('mousewheel', this.onMouseWheel.bind(this), true) + this.mouseWheelElement.addEventListener('DOMMouseScroll', this.onMouseWheel.bind(this), true) } onMouseWheel(event) { @@ -953,10 +871,7 @@ export class InteractionDelegate { break } case 'Touch': { - let id = - event.touchType === 'stylus' - ? 'stylus' - : event.identifier.toString() + let id = event.touchType === 'stylus' ? 'stylus' : event.identifier.toString() result[id] = this.getPosition(event) break } @@ -1006,10 +921,7 @@ export class InteractionDelegate { let point = extracted[key] let updated = this.interaction.update(key, point) if (updated) { - console.warn( - "new pointer in updateInteraction shouldn't happen", - key - ) + console.warn("new pointer in updateInteraction shouldn't happen", key) this.interactionStarted(event, key, point) } } @@ -1143,11 +1055,7 @@ export class InteractionMapper extends InteractionDelegate { onEnd(event) { let extracted = this.extractPoint(event, 'changedTouches') this.endInteraction(event, extracted) - let mapped = this.interaction.mapInteraction( - extracted, - ['ended'], - this.mapPositionToPoint.bind(this) - ) + let mapped = this.interaction.mapInteraction(extracted, ['ended'], this.mapPositionToPoint.bind(this)) for (let [target, interaction] of mapped.entries()) { target.onEnd(event, interaction) } @@ -1181,10 +1089,7 @@ export class InteractionMapper extends InteractionDelegate { // convert to array types = Array.isArray(types) ? types : types.split(/\s/) - if ( - elements instanceof NodeList || - elements instanceof HTMLCollection - ) { + if (elements instanceof NodeList || elements instanceof HTMLCollection) { elements = Array.from(elements) } elements = Array.isArray(elements) ? elements : [elements] @@ -1193,9 +1098,7 @@ export class InteractionMapper extends InteractionDelegate { const type = types[i].toLowerCase() // list of hammer events - const useHammer = /^(tap|doubletap|press|pan|swipe|pinch|rotate).*$/.test( - type - ) + const useHammer = /^(tap|doubletap|press|pan|swipe|pinch|rotate).*$/.test(type) // if it is a hammer event if (useHammer) { @@ -1210,33 +1113,15 @@ export class InteractionMapper extends InteractionDelegate { // recognizers if (type.startsWith('pan')) { - hammer - .get('pan') - .set( - Object.assign( - { direction: Hammer.DIRECTION_ALL }, - opts - ) - ) + hammer.get('pan').set(Object.assign({ direction: Hammer.DIRECTION_ALL }, opts)) } else if (type.startsWith('pinch')) { - hammer - .get('pinch') - .set(Object.assign({ enable: true }, opts)) + hammer.get('pinch').set(Object.assign({ enable: true }, opts)) } else if (type.startsWith('press')) { hammer.get('press').set(opts) } else if (type.startsWith('rotate')) { - hammer - .get('rotate') - .set(Object.assign({ enable: true }, opts)) + hammer.get('rotate').set(Object.assign({ enable: true }, opts)) } else if (type.startsWith('swipe')) { - hammer - .get('swipe') - .set( - Object.assign( - { direction: Hammer.DIRECTION_ALL }, - opts - ) - ) + hammer.get('swipe').set(Object.assign({ direction: Hammer.DIRECTION_ALL }, opts)) } else if (type.startsWith('tap')) { hammer.get('tap').set(opts) } diff --git a/lib/logging.js b/lib/logging.js index 9830414..60c72c8 100644 --- a/lib/logging.js +++ b/lib/logging.js @@ -59,11 +59,7 @@ export default class Logging { } } - static setup({ - log = console.log, - warn = console.warn, - error = console.error - } = {}) { + static setup({ log = console.log, warn = console.warn, error = console.error } = {}) { logHandlers.log = log logHandlers.warn = warn logHandlers.error = error diff --git a/lib/pixi/abstractpopup.js b/lib/pixi/abstractpopup.js index c239659..990ce84 100644 --- a/lib/pixi/abstractpopup.js +++ b/lib/pixi/abstractpopup.js @@ -83,12 +83,10 @@ export default class AbstractPopup extends PIXI.Graphics { if (this.opts.maxWidth) { this.headerStyle.wordWrap = true - this.headerStyle.wordWrapWidth = - this.opts.maxWidth - 2 * this.opts.padding + this.headerStyle.wordWrapWidth = this.opts.maxWidth - 2 * this.opts.padding this.textStyle.wordWrap = true - this.textStyle.wordWrapWidth = - this.opts.maxWidth - 2 * this.opts.padding + this.textStyle.wordWrapWidth = this.opts.maxWidth - 2 * this.opts.padding } this.alpha = 0 @@ -131,10 +129,7 @@ export default class AbstractPopup extends PIXI.Graphics { if (this.opts.header instanceof PIXI.Text) { header = this.opts.header } else if (typeof this.opts.header === 'number') { - header = new PIXI.Text( - this.opts.header.toString(), - this.headerStyle - ) + header = new PIXI.Text(this.opts.header.toString(), this.headerStyle) } else { header = new PIXI.Text(this.opts.header, this.headerStyle) } @@ -161,10 +156,7 @@ export default class AbstractPopup extends PIXI.Graphics { if (typeof this.opts.content === 'string') { content = new PIXI.Text(this.opts.content, this.textStyle) } else if (typeof this.opts.content === 'number') { - content = new PIXI.Text( - this.opts.content.toString(), - this.textStyle - ) + content = new PIXI.Text(this.opts.content.toString(), this.textStyle) } else { content = this.opts.content } @@ -235,31 +227,16 @@ export default class AbstractPopup extends PIXI.Graphics { * @return {AbstractPopup} A reference to the popup for chaining. */ draw() { - const square = - Math.round(this.wantedWidth) === Math.round(this.wantedHeight) + const square = Math.round(this.wantedWidth) === Math.round(this.wantedHeight) const diameter = Math.round(this.opts.radius * 2) this.clear() - this.lineStyle( - this.opts.strokeWidth, - this.opts.stroke, - this.opts.strokeAlpha - ) + this.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha) this.beginFill(this.opts.fill, this.opts.fillAlpha) if (square && diameter === this.wantedWidth) { - this.drawCircle( - this.wantedWidth / 2, - this.wantedHeight / 2, - this.opts.radius - ) + this.drawCircle(this.wantedWidth / 2, this.wantedHeight / 2, this.opts.radius) } else { - this.drawRoundedRect( - 0, - 0, - this.wantedWidth, - this.wantedHeight, - this.opts.radius - ) + this.drawRoundedRect(0, 0, this.wantedWidth, this.wantedHeight, this.opts.radius) } this.endFill() diff --git a/lib/pixi/app.js b/lib/pixi/app.js index d20ce7b..263f578 100644 --- a/lib/pixi/app.js +++ b/lib/pixi/app.js @@ -28,10 +28,7 @@ class FullscreenInteractionManager extends PIXI.interaction.InteractionManager { let dy = 0 let canvas = this.renderer.view let context = canvas.getContext('webgl') - if ( - context.drawingBufferWidth < canvas.width || - context.drawingBufferHeight < canvas.height - ) { + if (context.drawingBufferWidth < canvas.width || context.drawingBufferHeight < canvas.height) { extendWidth = context.drawingBufferWidth / canvas.width extendHeight = context.drawingBufferHeight / canvas.height //dx = wantedWidth - context.drawingBufferWidth @@ -143,10 +140,7 @@ export default class PIXIApp extends PIXI.Application { console.log('App is in fullScreen mode or autoResize mode') const resizeDebounced = debounce(event => this.resize(event), 50) window.addEventListener('resize', resizeDebounced) - document.body.addEventListener( - 'orientationchange', - this.checkOrientation.bind(this) - ) + document.body.addEventListener('orientationchange', this.checkOrientation.bind(this)) } if (monkeyPatchMapping) { console.log('Using monkey patched coordinate mapping') @@ -177,18 +171,12 @@ export default class PIXIApp extends PIXI.Application { uri: '/graphql' }) - const wsClient = new subscriptions.SubscriptionClient( - `wss://${location.hostname}/subscriptions`, - { - reconnect: true, - connectionParams: {} - } - ) + const wsClient = new subscriptions.SubscriptionClient(`wss://${location.hostname}/subscriptions`, { + reconnect: true, + connectionParams: {} + }) - const networkInterfaceWithSubscriptions = subscriptions.addGraphQLSubscriptions( - networkInterface, - wsClient - ) + const networkInterfaceWithSubscriptions = subscriptions.addGraphQLSubscriptions(networkInterface, wsClient) this.apolloClient = new apollo.ApolloClient({ networkInterface: networkInterfaceWithSubscriptions @@ -324,10 +312,7 @@ export default class PIXIApp extends PIXI.Application { * @param {number} [opts.height=window.innerHeight] - The height of the app to resize to. * @return {PIXIApp} - Returns the PIXIApp for chaining. */ - resize( - event, - { width = window.innerWidth, height = window.innerHeight } = {} - ) { + resize(event, { width = window.innerWidth, height = window.innerHeight } = {}) { this.width = width this.height = height this.expandRenderer() @@ -348,8 +333,7 @@ export default class PIXIApp extends PIXI.Application { monkeyPatchPixiMapping() { if (this.originalMapPositionToPoint === null) { let interactionManager = this.renderer.plugins.interaction - this.originalMapPositionToPoint = - interactionManager.mapPositionToPoint + this.originalMapPositionToPoint = interactionManager.mapPositionToPoint interactionManager.mapPositionToPoint = (point, x, y) => { return this.fixedMapPositionToPoint(point, x, y) } @@ -378,8 +362,7 @@ export default class PIXIApp extends PIXI.Application { if ( context !== null && - (context.drawingBufferWidth < canvas.width || - context.drawingBufferHeight < canvas.height) + (context.drawingBufferWidth < canvas.width || context.drawingBufferHeight < canvas.height) ) { extendWidth = context.drawingBufferWidth / canvas.width extendHeight = context.drawingBufferHeight / canvas.height @@ -388,12 +371,7 @@ export default class PIXIApp extends PIXI.Application { } x *= extendWidth y *= extendHeight - return this.originalMapPositionToPoint.call( - interactionManager, - local, - x, - y + dy - ) + return this.originalMapPositionToPoint.call(interactionManager, local, x, y + dy) } /** @@ -444,9 +422,7 @@ export default class PIXIApp extends PIXI.Application { * @return {Modal} Returns the Modal object. */ modal(opts = {}) { - let modal = new Modal( - Object.assign({ theme: this.theme }, opts, { app: this }) - ) + let modal = new Modal(Object.assign({ theme: this.theme }, opts, { app: this })) this.scene.addChild(modal) return modal @@ -459,9 +435,7 @@ export default class PIXIApp extends PIXI.Application { * @return {Message} Returns the Message object. */ message(opts = {}) { - let message = new Message( - Object.assign({ theme: this.theme }, opts, { app: this }) - ) + let message = new Message(Object.assign({ theme: this.theme }, opts, { app: this })) this.scene.addChild(message) return message @@ -480,11 +454,7 @@ export default class PIXIApp extends PIXI.Application { * @param {boolean} [opts.progress=false] - Should a progress bar display the loading status? * @return {PIXIApp} The PIXIApp object for chaining. */ - loadSprites( - resources, - loaded = null, - { resolutionDependent = true, progress = false } = {} - ) { + loadSprites(resources, loaded = null, { resolutionDependent = true, progress = false } = {}) { this.loadTextures( resources, textures => { @@ -517,11 +487,7 @@ export default class PIXIApp extends PIXI.Application { * @param {boolean} [opts.progress=false] - Should a progress bar display the loading status? * @return {PIXIApp} The PIXIApp object for chaining. */ - loadTextures( - resources, - loaded = null, - { resolutionDependent = true, progress = false } = {} - ) { + loadTextures(resources, loaded = null, { resolutionDependent = true, progress = false } = {}) { if (!Array.isArray(resources)) { resources = [resources] } @@ -534,16 +500,10 @@ export default class PIXIApp extends PIXI.Application { let resolution = Math.round(this.renderer.resolution) switch (resolution) { case 2: - loader.add( - resource, - resource.replace(/\.([^.]*)$/, '@2x.$1') - ) + loader.add(resource, resource.replace(/\.([^.]*)$/, '@2x.$1')) break case 3: - loader.add( - resource, - resource.replace(/\.([^.]*)$/, '@3x.$1') - ) + loader.add(resource, resource.replace(/\.([^.]*)$/, '@3x.$1')) break default: loader.add(resource) @@ -708,11 +668,7 @@ export default class PIXIApp extends PIXI.Application { pixiGlobal.x *= resolution pixiGlobal.y *= resolution // console.log("app.convertPointFromNodeToPage", pixiGlobal) - return window.convertPointFromNodeToPage( - app.view, - pixiGlobal.x, - pixiGlobal.y - ) + return window.convertPointFromNodeToPage(app.view, pixiGlobal.x, pixiGlobal.y) } } diff --git a/lib/pixi/badge.js b/lib/pixi/badge.js index 99dd20d..b2acd99 100644 --- a/lib/pixi/badge.js +++ b/lib/pixi/badge.js @@ -87,11 +87,7 @@ export default class Badge extends AbstractPopup { content: this.opts.tooltip }) } else { - this.opts.tooltip = Object.assign( - {}, - { object: this }, - this.opts.tooltip - ) + this.opts.tooltip = Object.assign({}, { object: this }, this.opts.tooltip) this.tooltip = new Tooltip(this.opts.tooltip) } } @@ -108,12 +104,8 @@ export default class Badge extends AbstractPopup { layout() { super.layout() - this.content.x = - this.width / 2 - this.content.width / 2 - this.opts.strokeWidth / 2 - this.content.y = - this.height / 2 - - this.content.height / 2 - - this.opts.strokeWidth / 2 + this.content.x = this.width / 2 - this.content.width / 2 - this.opts.strokeWidth / 2 + this.content.y = this.height / 2 - this.content.height / 2 - this.opts.strokeWidth / 2 return this } diff --git a/lib/pixi/blurfilter.js b/lib/pixi/blurfilter.js index 0c11e74..8b55299 100644 --- a/lib/pixi/blurfilter.js +++ b/lib/pixi/blurfilter.js @@ -68,9 +68,7 @@ export default class BlurFilter extends PIXI.Filter { return this.tiltShiftXFilter.shape } set shape(value) { - this.tiltShiftXFilter.shape = this.tiltShiftYFilter.shape = this.normalize( - value - ) + this.tiltShiftXFilter.shape = this.tiltShiftYFilter.shape = this.normalize(value) } /** @@ -189,12 +187,7 @@ class TiltShiftAxisFilter extends PIXI.Filter { this.uniforms.circle = [shape.x, shape.y, shape.r] } else { this.uniforms.shape = 2 - this.uniforms.rectangle = [ - shape.x, - shape.y, - shape.x + shape.width, - shape.y + shape.height - ] + this.uniforms.rectangle = [shape.x, shape.y, shape.x + shape.width, shape.y + shape.height] } this.uniforms.blur = blur this.uniforms.delta = new PIXI.Point(0, 0) @@ -228,12 +221,7 @@ class TiltShiftAxisFilter extends PIXI.Filter { return new PIXI.Circle(circle[0], circle[1], circle[2]) } else { const rectangle = this.uniforms.rectangle - return new PIXI.Rectangle( - rectangle[0], - rectangle[1], - rectangle[2], - rectangle[3] - ) + return new PIXI.Rectangle(rectangle[0], rectangle[1], rectangle[2], rectangle[3]) } } set shape(value) { @@ -242,12 +230,7 @@ class TiltShiftAxisFilter extends PIXI.Filter { this.uniforms.circle = [value.x, value.y, value.r] } else { this.uniforms.shape = 2 - this.uniforms.rectangle = [ - value.x, - value.y, - value.x + value.width, - value.y + value.height - ] + this.uniforms.rectangle = [value.x, value.y, value.x + value.width, value.y + value.height] } } } diff --git a/lib/pixi/button.js b/lib/pixi/button.js index 9762080..f56a851 100644 --- a/lib/pixi/button.js +++ b/lib/pixi/button.js @@ -1,8 +1,9 @@ -/* global PIXI TweenLite */ +/* global */ import Theme from './theme.js' import Tooltip from './tooltip.js' import Badge from './badge.js' import Events from '../events.js' +import { Points } from '../utils.js' /** * Callback for the button action. @@ -156,15 +157,9 @@ export default class Button extends PIXI.Container { this.id = this.opts.id - if ( - typeof this.opts.icon === 'undefined' && - typeof this.opts.iconActive !== 'undefined' - ) { + if (typeof this.opts.icon === 'undefined' && typeof this.opts.iconActive !== 'undefined') { this.opts.icon = this.opts.iconActive - } else if ( - typeof this.opts.icon !== 'undefined' && - typeof this.opts.iconActive === 'undefined' - ) { + } else if (typeof this.opts.icon !== 'undefined' && typeof this.opts.iconActive === 'undefined') { this.opts.iconActive = this.opts.icon } @@ -180,6 +175,8 @@ export default class Button extends PIXI.Container { this._active = null this._disabled = null + this.__start = { x: null, y: null } + this.iconInactive = null this.iconActive = null this.text = null @@ -234,17 +231,11 @@ export default class Button extends PIXI.Container { // Icon //----------------- if (this.opts.icon) { - this.iconInactive = this.loadIcon( - this.opts.icon, - this.opts.iconColor - ) + this.iconInactive = this.loadIcon(this.opts.icon, this.opts.iconColor) } if (this.opts.iconActive) { - this.iconActive = this.loadIcon( - this.opts.iconActive, - this.opts.iconColorActive - ) + this.iconActive = this.loadIcon(this.opts.iconActive, this.opts.iconColorActive) } // interaction @@ -272,6 +263,8 @@ export default class Button extends PIXI.Container { // eslint-disable-next-line no-unused-vars this.button.on('pointerdown', e => { //this.capture(e) + this.__start.x = e.data.global.x + this.__start.y = e.data.global.y TweenLite.to([this.button, this.content], this.theme.fast, { alpha: 0.7, overwrite: 'none' @@ -280,25 +273,30 @@ export default class Button extends PIXI.Container { this.button.on('pointerup', e => { this.capture(e) - if (this.opts.beforeAction) { - this.opts.beforeAction.call(this, e, this) - } - if (this.opts.action) { - this.opts.action.call(this, e, this) - } + const distance = Points.distance(e.data.global, this.__start) - TweenLite.to([this.button, this.content], this.theme.fast, { - alpha: 0.83, - overwrite: 'none' - }) + if (distance < 5) { + if (this.opts.beforeAction) { + this.opts.beforeAction.call(this, e, this) + } - if (this.opts.type === 'checkbox') { - this.active = !this.active - } + if (this.opts.action) { + this.opts.action.call(this, e, this) + } - if (this.opts.afterAction) { - this.opts.afterAction.call(this, e, this) + TweenLite.to([this.button, this.content], this.theme.fast, { + alpha: 0.83, + overwrite: 'none' + }) + + if (this.opts.type === 'checkbox') { + this.active = !this.active + } + + if (this.opts.afterAction) { + this.opts.afterAction.call(this, e, this) + } } }) @@ -319,11 +317,7 @@ export default class Button extends PIXI.Container { content: this.opts.tooltip }) } else { - this.opts.tooltip = Object.assign( - {}, - { object: this }, - this.opts.tooltip - ) + this.opts.tooltip = Object.assign({}, { object: this }, this.opts.tooltip) this.tooltip = new Tooltip(this.opts.tooltip) } } @@ -353,15 +347,10 @@ export default class Button extends PIXI.Container { badge.x = this.x - badge.width / 2 + opts.offsetLeft break case 'center': - badge.x = - this.x + - this.width / 2 - - badge.width / 2 + - opts.offsetLeft + badge.x = this.x + this.width / 2 - badge.width / 2 + opts.offsetLeft break case 'right': - badge.x = - this.x + this.width - badge.width / 2 + opts.offsetLeft + badge.x = this.x + this.width - badge.width / 2 + opts.offsetLeft } switch (opts.verticalAlign) { @@ -369,15 +358,10 @@ export default class Button extends PIXI.Container { badge.y = this.y - badge.height / 2 + opts.offsetTop break case 'middle': - badge.y = - this.y + - this.height / 2 - - badge.height / 2 + - opts.offsetTop + badge.y = this.y + this.height / 2 - badge.height / 2 + opts.offsetTop break case 'bottom': - badge.y = - this.y + this.height - badge.height / 2 + opts.offsetTop + badge.y = this.y + this.height - badge.height / 2 + opts.offsetTop } this.addChild(badge) @@ -516,8 +500,7 @@ export default class Button extends PIXI.Container { this.content.x = (this._width - this.content.width) / 2 break case 'right': - this.content.x = - this._width - this.opts.padding - this.content.width + this.content.x = this._width - this.opts.padding - this.content.width break } @@ -529,8 +512,7 @@ export default class Button extends PIXI.Container { this.content.y = (this._height - this.content.height) / 2 break case 'bottom': - this.content.y = - this._height - this.opts.padding - this.content.height + this.content.y = this._height - this.opts.padding - this.content.height break } @@ -546,30 +528,13 @@ export default class Button extends PIXI.Container { draw() { this.button.clear() if (this.active) { - this.button.lineStyle( - this.opts.strokeActiveWidth, - this.opts.strokeActive, - this.opts.strokeActiveAlpha - ) - this.button.beginFill( - this.opts.fillActive, - this.opts.fillActiveAlpha - ) + this.button.lineStyle(this.opts.strokeActiveWidth, this.opts.strokeActive, this.opts.strokeActiveAlpha) + this.button.beginFill(this.opts.fillActive, this.opts.fillActiveAlpha) } else { - this.button.lineStyle( - this.opts.strokeWidth, - this.opts.stroke, - this.opts.strokeAlpha - ) + this.button.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha) this.button.beginFill(this.opts.fill, this.opts.fillAlpha) } - this.button.drawRoundedRect( - 0, - 0, - this._width, - this._height, - this.opts.radius - ) + this.button.drawRoundedRect(0, 0, this._width, this._height, this.opts.radius) this.button.endFill() return this @@ -686,9 +651,7 @@ export default class Button extends PIXI.Container { size = this.opts.minHeight - 2 * this.opts.padding } - const url = Button.iconIsUrl(icon) - ? icon - : `../../assets/icons/${icon}.png` + const url = Button.iconIsUrl(icon) ? icon : `../../assets/icons/${icon}.png` const iconTexture = PIXI.Texture.fromImage(url, true) const sprite = new PIXI.Sprite(iconTexture) diff --git a/lib/pixi/buttongroup.html b/lib/pixi/buttongroup.html index b22a7f6..2bce155 100644 --- a/lib/pixi/buttongroup.html +++ b/lib/pixi/buttongroup.html @@ -10,6 +10,7 @@ + @@ -29,10 +30,10 @@ const app = new PIXIApp({ view: canvas, width: 1000, - height: 1000 + height: 1400 }).setup().run() -let buttonGroup1 = new ButtonGroup({ +const buttonGroup1 = new ButtonGroup({ x: 10, y: 10, buttons: [ @@ -43,7 +44,7 @@ let buttonGroup1 = new ButtonGroup({ ] }) -let buttonGroup2 = new ButtonGroup({ +const buttonGroup2 = new ButtonGroup({ x: 260, y: 10, buttons: [ @@ -60,7 +61,7 @@ let buttonGroup2 = new ButtonGroup({ strokeWidth: 3 }) -let buttonGroup3 = new ButtonGroup({ +const buttonGroup3 = new ButtonGroup({ x: 610, y: 10, buttons: [ @@ -74,7 +75,7 @@ let buttonGroup3 = new ButtonGroup({ strokeWidth: 1 }) -let buttonGroup4 = new ButtonGroup({ +const buttonGroup4 = new ButtonGroup({ x: 10, y: 90, buttons: [ @@ -93,7 +94,7 @@ let buttonGroup4 = new ButtonGroup({ strokeWidth: 1 }) -let buttonGroup5 = new ButtonGroup({ +const buttonGroup5 = new ButtonGroup({ x: 10, y: 180, buttons: [ @@ -106,7 +107,7 @@ let buttonGroup5 = new ButtonGroup({ type: 'checkbox' }) -let buttonGroup6 = new ButtonGroup({ +const buttonGroup6 = new ButtonGroup({ x: 450, y: 180, buttons: [ @@ -119,7 +120,7 @@ let buttonGroup6 = new ButtonGroup({ type: 'radio' }) -let buttonGroup7 = new ButtonGroup({ +const buttonGroup7 = new ButtonGroup({ x: 10, y: 250, theme: 'light', @@ -134,7 +135,7 @@ let buttonGroup7 = new ButtonGroup({ style: 'link' }) -let buttonGroup8 = new ButtonGroup({ +const buttonGroup8 = new ButtonGroup({ x: 610, y: 250, buttons: [ @@ -147,7 +148,7 @@ let buttonGroup8 = new ButtonGroup({ margin: 0 }) -let buttonGroup9 = new ButtonGroup({ +const buttonGroup9 = new ButtonGroup({ x: 10, y: 320, buttons: [ @@ -160,7 +161,7 @@ let buttonGroup9 = new ButtonGroup({ minWidth: 70 }) -let buttonGroup10 = new ButtonGroup({ +const buttonGroup10 = new ButtonGroup({ x: 100, y: 320, buttons: [ @@ -176,7 +177,7 @@ let buttonGroup10 = new ButtonGroup({ margin: 0 }) -let buttonGroup11 = new ButtonGroup({ +const buttonGroup11 = new ButtonGroup({ x: 250, y: 320, buttons: [ @@ -197,7 +198,7 @@ let buttonGroup11 = new ButtonGroup({ type: 'checkbox' }) -let buttonGroup12 = new ButtonGroup({ +const buttonGroup12 = new ButtonGroup({ x: 400, y: 320, buttons: [ @@ -212,7 +213,7 @@ let buttonGroup12 = new ButtonGroup({ type: 'radio' }) -let buttonGroup13 = new ButtonGroup({ +const buttonGroup13 = new ButtonGroup({ x: 520, y: 320, buttons: [ @@ -231,10 +232,49 @@ let buttonGroup13 = new ButtonGroup({ minHeight: 100 }) +const buttonGroup14 = new ButtonGroup({ + x: 10, + y: 960, + buttons: [ + {label: 'Stacked button 1', action: event => console.log('clicked 1')}, + {label: 'Stacked button 2', action: event => console.log('clicked 2')}, + {label: 'Stacked button 3', action: event => console.log('clicked 3')}, + {label: 'Stacked button 4', action: event => console.log('clicked 4')}, + {label: 'Stacked button 5', action: event => console.log('clicked 5')}, + {label: 'Stacked button 6', action: event => console.log('clicked 6')}, + {label: 'Stacked button 7', action: event => console.log('clicked 7')}, + {label: 'Stacked button 8', action: event => console.log('clicked 8')} + ], + stacked: true, + maxWidth: 620, + app +}) + +const buttonGroup15 = new ButtonGroup({ + x: 10, + y: 1040, + buttons: [ + {icon: 'battery_charging_20', type: 'checkbox', iconColorActive: 0xd43e36}, + {icon: 'battery_charging_30', type: 'checkbox', iconColorActive: 0xf99927}, + {icon: 'battery_charging_50', type: 'checkbox', iconColorActive: 0xefc201}, + {icon: 'battery_charging_60', type: 'checkbox', iconColorActive: 0x839b00}, + {icon: 'battery_charging_80', type: 'checkbox', iconColorActive: 0x4ba8af}, + {icon: 'battery_charging_90', type: 'checkbox', iconColorActive: 0x5386bc}, + {icon: 'battery_charging_full', type: 'checkbox', iconColorActive: 0x9c71b7} + ], + orientation: 'vertical', + margin: 0, + stacked: true, + maxHeight: 200, + app +}) + app.scene.addChild(buttonGroup1, buttonGroup2, buttonGroup3) app.scene.addChild(buttonGroup4) app.scene.addChild(buttonGroup5, buttonGroup6) app.scene.addChild(buttonGroup7, buttonGroup8) app.scene.addChild(buttonGroup9, buttonGroup10, buttonGroup11, buttonGroup12, buttonGroup13) +app.scene.addChild(buttonGroup14, buttonGroup15) + diff --git a/lib/pixi/buttongroup.js b/lib/pixi/buttongroup.js index d0e20f8..c2419bc 100644 --- a/lib/pixi/buttongroup.js +++ b/lib/pixi/buttongroup.js @@ -1,5 +1,8 @@ +/* globals ThrowPropsPlugin, Strong */ + import Theme from './theme.js' import Button from './button.js' +import Events from '../events.js' /** * Class that represents a PixiJS ButtonGroup. @@ -23,7 +26,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. * @@ -39,6 +42,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. Only used if stacked is true and the orientation is horizontal. + * @param {number} [opts.maxHeight] - The maximum height of the button group. Only used if stacked is true and the orientation is vertical. + * @param {boolean} [opts.stacked=false] - If set to true, the buttons of the button group gets stacked if they are broader or higher than the maximum permitted width or height, depending on orientation. + * @param {PIXI.Application} [opts.app] - The PixiJS Application. Must be set if you want to use the mousewheel to scroll your button group. * @param {number} [opts.padding=Theme.padding] - Button: The inner spacing (distance from icon and/or label) the the border. * @param {number} [opts.margin=Theme.margin] - The outer spacing (distance from one button to the previous/next button). * @param {string} [opts.iconPosition=left] - Button: The position of the icon in relation to the label. Can be left or right. @@ -87,6 +94,10 @@ export default class ButtonGroup extends PIXI.Graphics { buttons: [], minWidth: 44, minHeight: 44, + maxWidth: null, + maxHeight: null, + stacked: false, + app: null, padding: theme.padding, margin: theme.margin, iconPosition: 'left', // left, right @@ -119,6 +130,7 @@ export default class ButtonGroup extends PIXI.Graphics { this.buttons = [] this._disabled = null + this.__dragging = false this.visible = this.opts.visible @@ -138,6 +150,12 @@ 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 @@ -164,19 +182,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 @@ -195,10 +205,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 @@ -215,23 +222,21 @@ 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 } if (this.opts.orientation === 'vertical') { @@ -249,6 +254,43 @@ export default class ButtonGroup extends PIXI.Graphics { this.disabled = this.opts.disabled } + // interaction + //-------------------- + if (this.opts.stacked) { + this.interactive = true + this.on('pointerdown', this.onStart.bind(this)) + this.on('pointermove', this.onMove.bind(this)) + this.on('pointerup', this.onEnd.bind(this)) + this.on('pointercancel', this.onEnd.bind(this)) + this.on('pointerout', this.onEnd.bind(this)) + this.on('pointerupoutside', this.onEnd.bind(this)) + this.on('scroll', this.onScroll.bind(this)) + + // mousewheel + //-------------------- + if (this.opts.app) { + const app = this.opts.app + app.view.addEventListener('mousewheel', event => { + const bounds = this.getBounds() + const x = event.clientX - app.view.getBoundingClientRect().left + const y = event.clientY - app.view.getBoundingClientRect().top + if (bounds.contains(x, y)) { + event.preventDefault() + this.emit('scroll', event) + } + }) + } + + const background = new PIXI.Graphics() + background.beginFill(0x000000, 0) + background.drawRect(0, 0, this.width, this.height) + background.endFill() + this.addChildAt(background, 0) + + this.__initWidth = this.container.width + this.__deltaWidth = this.container.width - this.opts.maxWidth + } + return this } @@ -266,6 +308,12 @@ export default class ButtonGroup extends PIXI.Graphics { //----------------- this.draw() + // stacked + //----------------- + if (this.opts.stacked) { + this.stack() + } + return this } @@ -279,41 +327,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 @@ -367,4 +401,168 @@ export default class ButtonGroup extends PIXI.Graphics { return this } + + /** + * + * @private + * @param {*} event + */ + onStart(event) { + this.__dragging = true + + this.capture(event) + + this.__delta = { + x: this.container.position.x - event.data.global.x, + y: this.container.position.y - event.data.global.y + } + + TweenLite.killTweensOf(this.container.position, { x: true, y: true }) + if (typeof ThrowPropsPlugin != 'undefined') { + ThrowPropsPlugin.track(this.container.position, 'x,y') + } + } + + /** + * + * @private + * @param {*} event + */ + onMove(event) { + if (this.__dragging) { + this.capture(event) + + if (this.opts.orientation === 'horizontal') { + this.container.position.x = event.data.global.x + this.__delta.x + } else { + this.container.position.y = event.data.global.y + this.__delta.y + } + + if (this.opts.stacked) { + this.stack() + } + } + } + + /** + * + * @private + * @param {*} event + */ + onEnd(event) { + if (this.__dragging) { + this.__dragging = false + + this.capture(event) + + if (typeof ThrowPropsPlugin != 'undefined') { + const throwProps = { x: { velocity: 'auto' }, y: { velocity: 'auto' } } + + if (this.opts.orientation === 'horizontal') { + const distanceToLeft = this.container.x + const distanceToRight = this.opts.maxWidth - this.container.x - this.__initWidth + if (distanceToLeft > 0 && distanceToLeft > distanceToRight) { + throwProps.x.end = 0 + } else if (distanceToRight > 0 && distanceToRight > distanceToLeft) { + throwProps.x.end = this.opts.maxWidth - this.__initWidth + } + } else { + const distanceToTop = this.container.y + const distanceToBottom = this.opts.maxHeight - this.container.y - this.container.height + if (distanceToTop > 0 && distanceToTop > distanceToBottom) { + throwProps.y.end = 0 + } else if (distanceToBottom > 0 && distanceToBottom > distanceToTop) { + throwProps.y.end = this.opts.maxHeight - this.container.height + } + } + + ThrowPropsPlugin.to( + this.container.position, + { + throwProps, + ease: Strong.easeOut, + onUpdate: () => this.stack(), + onComplete: () => ThrowPropsPlugin.untrack(this.container.position) + }, + 0.8, + 0.4 + ) + } + } + } + + /** + * + * @private + * @param {*} event + */ + onScroll(event) { + this.capture(event) + + if (this.opts.orientation === 'horizontal') { + this.container.position.x -= event.deltaX + if (this.container.position.x > 0) { + this.container.position.x = 0 + } else if (this.container.position.x + this.__initWidth < this.opts.maxWidth) { + this.container.position.x = this.opts.maxWidth - this.__initWidth + } + } else { + this.container.position.y -= event.deltaY + if (this.container.position.y > 0) { + this.container.position.y = 0 + } else if (this.container.position.y + this.container.height < this.opts.maxHeight) { + this.container.position.y = this.opts.maxHeight - this.container.height + } + } + + if (this.opts.stacked) { + this.stack() + } + } + + /** + * Captures an event to inform InteractionMapper about processed events. + * + * @param {event|PIXI.InteractionEvent} event - The PIXI event to capture. + */ + capture(event) { + const originalEvent = event.data && event.data.originalEvent ? event.data.originalEvent : event + Events.capturedBy(originalEvent, this) + } + + /** + * + */ + stack() { + this.buttons.forEach((it, index) => { + if (it.__originalPosition.x + this.container.x < 0) { + // left border + it.x = -this.container.x + } else if (it.__originalPosition.x + it.width > Math.abs(this.container.x) + this.opts.maxWidth) { + // right border + it.x = Math.abs(this.container.x) + this.opts.maxWidth - it.width + } else { + it.x = it.__originalPosition.x + } + }) + + this.buttons.sort((a, b) => { + const delta = Math.abs(this.container.x) + this.opts.maxWidth / 2 + const distanceA = Math.abs(a.x - delta) + const distanceB = Math.abs(b.x - delta) + if (distanceA > distanceB) { + return -1 + } else if (distanceB > distanceA) { + return 1 + } else { + return 0 + } + }) + + this.buttons.forEach(it => { + const parent = it.parent + parent.removeChild(it) + parent.addChild(it) + }) + } } diff --git a/lib/pixi/flipeffect.js b/lib/pixi/flipeffect.js index 78b659e..0f8854e 100644 --- a/lib/pixi/flipeffect.js +++ b/lib/pixi/flipeffect.js @@ -112,15 +112,9 @@ export default class FlipEffect { 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() } @@ -147,11 +141,7 @@ export default class FlipEffect { 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 } @@ -231,9 +221,7 @@ export default class FlipEffect { 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) diff --git a/lib/pixi/flippable.js b/lib/pixi/flippable.js index fc450f0..0da01a4 100644 --- a/lib/pixi/flippable.js +++ b/lib/pixi/flippable.js @@ -93,12 +93,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 //-------------------- @@ -137,9 +132,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) @@ -231,21 +224,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 @@ -331,15 +314,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 }) } /** @@ -353,8 +332,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 @@ -421,10 +399,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 = [ diff --git a/lib/pixi/labeledgraphics.js b/lib/pixi/labeledgraphics.js index 8657b83..03c97c7 100644 --- a/lib/pixi/labeledgraphics.js +++ b/lib/pixi/labeledgraphics.js @@ -77,15 +77,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 @@ -136,12 +130,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 @@ -290,21 +279,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 { diff --git a/lib/pixi/list.js b/lib/pixi/list.js index a190299..20f2f5c 100644 --- a/lib/pixi/list.js +++ b/lib/pixi/list.js @@ -1,4 +1,4 @@ -/* globals */ +/* globals ThrowPropsPlugin, Strong */ /* Imports */ import Events from '../events.js' @@ -108,9 +108,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)) { @@ -167,14 +165,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)) @@ -200,14 +194,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 } @@ -341,8 +331,7 @@ export default class List extends PIXI.Container { { throwProps, ease: Strong.easeOut, - onComplete: () => - ThrowPropsPlugin.untrack(this.container.position) + onComplete: () => ThrowPropsPlugin.untrack(this.container.position) }, 0.8, 0.4 @@ -363,20 +352,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 } } @@ -388,10 +371,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) } } diff --git a/lib/pixi/message.js b/lib/pixi/message.js index bef9305..f9f5ba2 100644 --- a/lib/pixi/message.js +++ b/lib/pixi/message.js @@ -91,8 +91,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 } @@ -105,8 +104,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 } } diff --git a/lib/pixi/modal.js b/lib/pixi/modal.js index cb3a1e5..563f7b3 100644 --- a/lib/pixi/modal.js +++ b/lib/pixi/modal.js @@ -134,10 +134,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() diff --git a/lib/pixi/popover.js b/lib/pixi/popover.js index 58f8f04..74f1c9b 100644 --- a/lib/pixi/popover.js +++ b/lib/pixi/popover.js @@ -36,12 +36,8 @@ export default class Popover extends PIXI.Graphics { 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() @@ -64,10 +60,7 @@ export default class Popover extends PIXI.Graphics { 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) } diff --git a/lib/pixi/popup.js b/lib/pixi/popup.js index 497d4e5..807193e 100644 --- a/lib/pixi/popup.js +++ b/lib/pixi/popup.js @@ -73,10 +73,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 @@ -100,10 +97,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) { @@ -116,18 +110,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) @@ -149,18 +135,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 @@ -183,10 +166,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 } diff --git a/lib/pixi/popupmenu.js b/lib/pixi/popupmenu.js index 2b4ba9e..f08811a 100644 --- a/lib/pixi/popupmenu.js +++ b/lib/pixi/popupmenu.js @@ -74,10 +74,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 } diff --git a/lib/pixi/progress.js b/lib/pixi/progress.js index faa6095..c3d7a5e 100644 --- a/lib/pixi/progress.js +++ b/lib/pixi/progress.js @@ -154,10 +154,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() } @@ -201,20 +198,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) } @@ -238,24 +225,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) } diff --git a/lib/pixi/scatter.js b/lib/pixi/scatter.js index f5de08e..9b43d03 100755 --- a/lib/pixi/scatter.js +++ b/lib/pixi/scatter.js @@ -79,12 +79,8 @@ export class ScatterContainer extends PIXI.Graphics { 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 }) @@ -167,14 +163,8 @@ export class ScatterContainer extends PIXI.Graphics { // 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 } } @@ -184,10 +174,7 @@ export class ScatterContainer extends PIXI.Graphics { 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 @@ -204,12 +191,7 @@ export class ScatterContainer extends PIXI.Graphics { 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 } @@ -223,8 +205,7 @@ export class ScatterContainer extends PIXI.Graphics { 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 } @@ -359,8 +340,7 @@ export class DisplayObjectScatter extends AbstractScatter { 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 } @@ -469,8 +449,7 @@ export class DisplayObjectScatter extends AbstractScatter { 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 } @@ -483,10 +462,7 @@ export class DisplayObjectScatter extends AbstractScatter { 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) } } diff --git a/lib/pixi/scrollbox.js b/lib/pixi/scrollbox.js index 397c4f3..39c1116 100644 --- a/lib/pixi/scrollbox.js +++ b/lib/pixi/scrollbox.js @@ -238,10 +238,7 @@ export default class Scrollbox extends PIXI.Container { * @readonly */ get contentWidth() { - return ( - this.options.boxWidth - - (this.isScrollbarVertical ? this.options.scrollbarSize : 0) - ) + return this.options.boxWidth - (this.isScrollbarVertical ? this.options.scrollbarSize : 0) } /** @@ -250,10 +247,7 @@ export default class Scrollbox extends PIXI.Container { * @readonly */ get contentHeight() { - return ( - this.options.boxHeight - - (this.isScrollbarHorizontal ? this.options.scrollbarSize : 0) - ) + return this.options.boxHeight - (this.isScrollbarHorizontal ? this.options.scrollbarSize : 0) } /** @@ -330,19 +324,11 @@ export default class Scrollbox extends PIXI.Container { 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 @@ -359,14 +345,9 @@ export default class Scrollbox extends PIXI.Container { : 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 @@ -375,15 +356,10 @@ export default class Scrollbox extends PIXI.Container { } 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 ) @@ -391,14 +367,9 @@ export default class Scrollbox extends PIXI.Container { } 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 @@ -407,15 +378,10 @@ export default class Scrollbox extends PIXI.Container { } 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 ) @@ -489,10 +455,7 @@ export default class Scrollbox extends PIXI.Container { 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) { @@ -511,10 +474,7 @@ export default class Scrollbox extends PIXI.Container { } 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) { @@ -574,26 +534,15 @@ export default class Scrollbox extends PIXI.Container { * @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() } diff --git a/lib/pixi/slider.js b/lib/pixi/slider.js index de2841b..ec7db9b 100644 --- a/lib/pixi/slider.js +++ b/lib/pixi/slider.js @@ -176,12 +176,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 @@ -193,16 +189,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) @@ -263,9 +251,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 }) } }) @@ -325,11 +311,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) @@ -343,20 +325,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() @@ -394,10 +366,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) } /** @@ -413,10 +382,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 } /** diff --git a/lib/pixi/stylus.js b/lib/pixi/stylus.js index 3307155..7a5c118 100755 --- a/lib/pixi/stylus.js +++ b/lib/pixi/stylus.js @@ -119,10 +119,7 @@ export default class Stylus extends PIXI.Graphics { 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 @@ -142,10 +139,7 @@ export default class Stylus extends PIXI.Graphics { 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 } } @@ -182,8 +176,7 @@ export default class Stylus extends PIXI.Graphics { 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 => { @@ -197,15 +190,9 @@ export default class Stylus extends PIXI.Graphics { }) this.on('pointermove', e => { - if ( - Events.isPointerDown(e.data.originalEvent) || - this.isStylusPointer(e) || - this.isStylusTouch(e) - ) { - if (this.debug) - console.log('pointermove', e, this.eventInside(e)) - if (this.eventInside(e) && this.singlePointer()) - this.moveStroke(this.toStroke(e)) + if (Events.isPointerDown(e.data.originalEvent) || this.isStylusPointer(e) || this.isStylusTouch(e)) { + if (this.debug) console.log('pointermove', e, this.eventInside(e)) + if (this.eventInside(e) && this.singlePointer()) this.moveStroke(this.toStroke(e)) } }) this.on('pointerup', e => { @@ -320,11 +307,7 @@ export default class Stylus extends PIXI.Graphics { 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() diff --git a/lib/pixi/switch.js b/lib/pixi/switch.js index fcb3ecf..f61adc5 100644 --- a/lib/pixi/switch.js +++ b/lib/pixi/switch.js @@ -152,10 +152,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 //----------------- @@ -317,32 +315,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, @@ -364,21 +345,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() @@ -394,24 +365,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, @@ -431,10 +389,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() diff --git a/lib/pixi/test.js b/lib/pixi/test.js index 92198e8..1a2e52a 100755 --- a/lib/pixi/test.js +++ b/lib/pixi/test.js @@ -131,21 +131,9 @@ export class RecorderTools extends PIXI.Container { 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) @@ -183,11 +171,7 @@ export class RecorderTools extends PIXI.Container { 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 } diff --git a/lib/pixi/theme.js b/lib/pixi/theme.js index 313e3c0..5507fcf 100644 --- a/lib/pixi/theme.js +++ b/lib/pixi/theme.js @@ -80,8 +80,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 diff --git a/lib/pixi/timeline.js b/lib/pixi/timeline.js index 5f9f854..209481d 100644 --- a/lib/pixi/timeline.js +++ b/lib/pixi/timeline.js @@ -89,24 +89,13 @@ export class Ticks { 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) @@ -131,12 +120,7 @@ export class Ticks { } 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) } @@ -286,11 +270,7 @@ export class DayTicks extends Ticks { } iterStart(start) { - return Dates.create( - start.getFullYear(), - start.getMonth(), - start.getDate() - ) + return Dates.create(start.getFullYear(), start.getMonth(), start.getDate()) } next(date) { @@ -331,22 +311,11 @@ export class HourTicks extends Ticks { } dateKey(date) { - return ( - this.key + - date.getFullYear() + - date.getMonth() + - date.getDate() + - date.getHours() - ) + return this.key + date.getFullYear() + date.getMonth() + date.getDate() + date.getHours() } iterStart(start) { - return Dates.create( - start.getFullYear(), - start.getMonth(), - start.getDate(), - start.getHours() - ) + return Dates.create(start.getFullYear(), start.getMonth(), start.getDate(), start.getHours()) } next(date) { @@ -388,14 +357,7 @@ export class MinuteTicks extends Ticks { } dateKey(date) { - return ( - this.key + - date.getFullYear() + - date.getMonth() + - date.getDate() + - date.getHours() + - date.getMinutes() - ) + return this.key + date.getFullYear() + date.getMonth() + date.getDate() + date.getHours() + date.getMinutes() } iterStart(start) { @@ -450,10 +412,7 @@ export class TimeTicks { 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) @@ -522,16 +481,7 @@ export class ColorRanges { } export default 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 @@ -548,12 +498,7 @@ export default class Timeline extends BitmapLabeledGraphics { 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 = [] @@ -565,14 +510,7 @@ export default class Timeline extends BitmapLabeledGraphics { 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 = '__' } @@ -729,8 +667,7 @@ export default class Timeline extends BitmapLabeledGraphics { 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 } } diff --git a/lib/popup.js b/lib/popup.js index b80f04e..e9fcdf3 100644 --- a/lib/popup.js +++ b/lib/popup.js @@ -147,8 +147,7 @@ export default class Popup extends Poppable { 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 @@ -250,10 +249,7 @@ export default class Popup extends Poppable { 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 => { @@ -365,8 +361,7 @@ export default class Popup extends Poppable { 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 => { @@ -416,8 +411,7 @@ export default class Popup extends Poppable { 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) } @@ -572,36 +566,30 @@ export default class Popup extends Poppable { //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 @@ -747,8 +735,7 @@ export default class Popup extends Poppable { 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 @@ -776,8 +763,7 @@ export default class Popup extends Poppable { 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 @@ -814,16 +800,13 @@ export default class Popup extends Poppable { 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' @@ -880,8 +863,7 @@ export default class Popup extends Poppable { onMove = null } = {} ) { - let notchPosition = - switchPos && point.y < 50 ? 'topCenter' : 'bottomCenter' + let notchPosition = switchPos && point.y < 50 ? 'topCenter' : 'bottomCenter' let popup = new Popup({ parent, context, diff --git a/lib/popupmenu.js b/lib/popupmenu.js index 9c1f76f..0117b9a 100644 --- a/lib/popupmenu.js +++ b/lib/popupmenu.js @@ -195,8 +195,7 @@ export default class PopupMenu extends Popup { 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, @@ -219,21 +218,9 @@ export default class PopupMenu extends Popup { 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) } } @@ -248,18 +235,9 @@ export default class PopupMenu extends Popup { 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) } } } diff --git a/lib/scatter.js b/lib/scatter.js index 5357de1..1123cc3 100644 --- a/lib/scatter.js +++ b/lib/scatter.js @@ -45,14 +45,7 @@ const END = 'onEnd' export class ScatterEvent extends BaseEvent { constructor( target, - { - translate = { x: 0, y: 0 }, - scale = null, - rotate = 0, - about = null, - fast = false, - type = null - } = {} + { translate = { x: 0, y: 0 }, scale = null, rotate = 0, about = null, fast = false, type = null } = {} ) { super('scatterTransformed', { target: target }) this.translate = translate @@ -65,13 +58,7 @@ export class ScatterEvent extends BaseEvent { 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 + ')' ) } } @@ -91,13 +78,7 @@ export class ResizeEvent extends BaseEvent { } toString() { - return ( - 'Event(scatterResized width: ' + - this.width + - 'height: ' + - this.height + - ')' - ) + return 'Event(scatterResized width: ' + this.width + 'height: ' + this.height + ')' } } @@ -376,7 +357,7 @@ export class AbstractScatter extends Throwable { /** Removes self from container when it's closed. */ - if(this.container){ + if (this.container) { this.container.remove(this) } } @@ -512,10 +493,7 @@ export class AbstractScatter extends Throwable { _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) @@ -570,17 +548,7 @@ export class AbstractScatter extends Throwable { 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) { @@ -631,15 +599,9 @@ export class AbstractScatter extends Throwable { 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) @@ -702,10 +664,8 @@ export class AbstractScatter extends Throwable { } 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 } @@ -763,8 +723,7 @@ export class AbstractScatter extends Throwable { 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) @@ -927,13 +886,7 @@ export class DOMScatterContainer { */ 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 @@ -944,11 +897,7 @@ export class DOMScatterContainer { movement of scatter objects, the touchmove event has to be bound again. */ if (Capabilities.isSafari) { - document.addEventListener( - 'touchmove', - event => this.preventPinch(event), - false - ) + document.addEventListener('touchmove', event => this.preventPinch(event), false) stopEvents = false } else { stopEvents = true @@ -984,14 +933,7 @@ export class DOMScatterContainer { 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() } @@ -1007,18 +949,16 @@ export class DOMScatterContainer { } } - /** * Removes an element from the scatter. * * @param {Scatter} scatter - Element to remove. * @memberof DOMScatterContainer */ - remove(scatter){ + remove(scatter) { this.scatter.delete(scatter.element) } - /** * Adds an element to the ScatterContainer. * @@ -1065,10 +1005,7 @@ export class DOMScatterContainer { ***/ 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 @@ -1499,10 +1436,8 @@ export class DOMScatter extends AbstractScatter { 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, diff --git a/lib/uitest.js b/lib/uitest.js index 573d0dd..7b99640 100644 --- a/lib/uitest.js +++ b/lib/uitest.js @@ -194,9 +194,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 //-------------------- @@ -234,14 +232,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 @@ -253,14 +245,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 @@ -355,14 +341,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 @@ -374,14 +354,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 @@ -393,14 +367,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 @@ -551,66 +519,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) } } @@ -728,9 +669,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) { @@ -805,12 +744,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 } @@ -866,9 +801,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 } @@ -1004,16 +937,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 = { @@ -1072,25 +998,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)) } } } diff --git a/lib/utils.js b/lib/utils.js index da184a6..46f51dc 100755 --- a/lib/utils.js +++ b/lib/utils.js @@ -1,4 +1,4 @@ -/* globals WebKitPoint */ +/* globals */ /** Tests whether an object is empty * @param {Object} obj - the object to be tested @@ -60,11 +60,9 @@ export function sample(population, k) { set and it doesn't suffer from frequent reselections. */ - if (!Array.isArray(population)) - throw new TypeError('Population must be an array.') + if (!Array.isArray(population)) throw new TypeError('Population must be an array.') let n = population.length - if (k < 0 || k > n) - throw new RangeError('Sample larger than population or is negative') + if (k < 0 || k > n) throw new RangeError('Sample larger than population or is negative') let result = new Array(k) let setsize = 21 // size of a small set minus size of an empty list @@ -143,9 +141,7 @@ export class Dates { } 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) { @@ -165,11 +161,7 @@ export class Dates { } 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) { @@ -672,15 +664,9 @@ export class Polygon { */ 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 @@ -737,10 +723,7 @@ export class Polygon { 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 } @@ -774,12 +757,8 @@ export class Polygon { 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 @@ -803,8 +782,7 @@ export class Polygon { 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 @@ -831,12 +809,8 @@ export class Polygon { 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 @@ -860,8 +834,7 @@ export class Polygon { 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 @@ -918,12 +891,7 @@ export class Rect { * @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 } /** @@ -1003,8 +971,7 @@ export class LowPassFilter { * @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 diff --git a/package-lock.json b/package-lock.json index b5cbbb0..f518d77 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1979,9 +1979,9 @@ } }, "eslint": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/eslint/-/eslint-6.0.1.tgz", - "integrity": "sha512-DyQRaMmORQ+JsWShYsSg4OPTjY56u1nCjAmICrE8vLWqyLKxhFXOthwMj1SA8xwfrv0CofLNVnqbfyhwCkaO0w==", + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/eslint/-/eslint-6.1.0.tgz", + "integrity": "sha512-QhrbdRD7ofuV09IuE2ySWBz0FyXCq0rriLTZXZqaWSI79CVtHVRdkFuFTViiqzZhkCgfOh9USpriuGN2gIpZDQ==", "dev": true, "requires": { "@babel/code-frame": "^7.0.0", @@ -1990,7 +1990,7 @@ "cross-spawn": "^6.0.5", "debug": "^4.0.1", "doctrine": "^3.0.0", - "eslint-scope": "^4.0.3", + "eslint-scope": "^5.0.0", "eslint-utils": "^1.3.1", "eslint-visitor-keys": "^1.0.0", "espree": "^6.0.0", @@ -1998,34 +1998,35 @@ "esutils": "^2.0.2", "file-entry-cache": "^5.0.1", "functional-red-black-tree": "^1.0.1", - "glob-parent": "^3.1.0", + "glob-parent": "^5.0.0", "globals": "^11.7.0", "ignore": "^4.0.6", "import-fresh": "^3.0.0", "imurmurhash": "^0.1.4", - "inquirer": "^6.2.2", + "inquirer": "^6.4.1", "is-glob": "^4.0.0", "js-yaml": "^3.13.1", "json-stable-stringify-without-jsonify": "^1.0.1", "levn": "^0.3.0", - "lodash": "^4.17.11", + "lodash": "^4.17.14", "minimatch": "^3.0.4", "mkdirp": "^0.5.1", "natural-compare": "^1.4.0", "optionator": "^0.8.2", "progress": "^2.0.0", "regexpp": "^2.0.1", - "semver": "^5.5.1", - "strip-ansi": "^4.0.0", - "strip-json-comments": "^2.0.1", + "semver": "^6.1.2", + "strip-ansi": "^5.2.0", + "strip-json-comments": "^3.0.1", "table": "^5.2.3", - "text-table": "^0.2.0" + "text-table": "^0.2.0", + "v8-compile-cache": "^2.0.3" }, "dependencies": { "ansi-regex": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz", - "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=", + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz", + "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==", "dev": true }, "debug": { @@ -2043,20 +2044,41 @@ "integrity": "sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs=", "dev": true }, + "glob-parent": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.0.0.tgz", + "integrity": "sha512-Z2RwiujPRGluePM6j699ktJYxmPpJKCfpGA13jz2hmFZC7gKetzrWvg5KN3+OsIFmydGyZ1AVwERCq1w/ZZwRg==", + "dev": true, + "requires": { + "is-glob": "^4.0.1" + } + }, "ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", "dev": true }, + "semver": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", + "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", + "dev": true + }, "strip-ansi": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz", - "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=", + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz", + "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==", "dev": true, "requires": { - "ansi-regex": "^3.0.0" + "ansi-regex": "^4.1.0" } + }, + "strip-json-comments": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.0.1.tgz", + "integrity": "sha512-VTyMAUfdm047mwKl+u79WIdrZxtFtn+nBxHeb844XBQ9uMNTuTHdx2hc5RiAJYqwTj3wc/xe5HLSdJSkJ+WfZw==", + "dev": true } } }, @@ -2079,9 +2101,9 @@ } }, "eslint-scope": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-4.0.3.tgz", - "integrity": "sha512-p7VutNr1O/QrxysMo3E45FjYDTeXBy0iTltPFNSqKAIfjDSXC+4dj+qfyuD8bfAXrW/y6lW3O76VaYNPKfpKrg==", + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.0.0.tgz", + "integrity": "sha512-oYrhJW7S0bxAFDvWqzvMPRm6pcgcnWc4QnofCAqRTRfQC0JcwenzGglTtsLyIuuWFfkqDG9vz67cnttSd53djw==", "dev": true, "requires": { "esrecurse": "^4.1.0", @@ -2123,9 +2145,9 @@ }, "dependencies": { "acorn": { - "version": "6.2.0", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.2.0.tgz", - "integrity": "sha512-8oe72N3WPMjA+2zVG71Ia0nXZ8DpQH+QyyHO+p06jT8eg8FGG3FbcUIi8KziHlAfheJQZeoqbvq1mQSQHXKYLw==", + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.2.1.tgz", + "integrity": "sha512-JD0xT5FCRDNyjDda3Lrg/IxFscp9q4tiYtxE1/nOzlKCk7hIRuYjhq1kCNkbPjMRMZuFq20HNQn1I9k8Oj0E+Q==", "dev": true } } @@ -5954,11 +5976,11 @@ "dev": true }, "propagating-hammerjs": { - "version": "1.4.6", - "resolved": "https://registry.npmjs.org/propagating-hammerjs/-/propagating-hammerjs-1.4.6.tgz", - "integrity": "sha1-/tAOmwB2f/1C0U9bUxvEk+tnLjc=", + "version": "1.4.7", + "resolved": "https://registry.npmjs.org/propagating-hammerjs/-/propagating-hammerjs-1.4.7.tgz", + "integrity": "sha512-oW9Wd+W2Tp5uOz6Fh4mEU7p+FoyU85smLH/mPga83Loh0pHa6AH4ZHGywvwMk3TWP31l7iUsvJyW265p4Ipwrg==", "requires": { - "hammerjs": "^2.0.6" + "hammerjs": "^2.0.8" } }, "proxy-from-env": { @@ -6001,9 +6023,9 @@ "dev": true }, "puppeteer": { - "version": "1.18.1", - "resolved": "https://registry.npmjs.org/puppeteer/-/puppeteer-1.18.1.tgz", - "integrity": "sha512-luUy0HPSuWPsPZ1wAp6NinE0zgetWtudf5zwZ6dHjMWfYpTQcmKveFRox7VBNhQ98OjNA9PQ9PzQyX8k/KrxTg==", + "version": "1.19.0", + "resolved": "https://registry.npmjs.org/puppeteer/-/puppeteer-1.19.0.tgz", + "integrity": "sha512-2S6E6ygpoqcECaagDbBopoSOPDv0pAZvTbnBgUY+6hq0/XDFDOLEMNlHF/SKJlzcaZ9ckiKjKDuueWI3FN/WXw==", "dev": true, "requires": { "debug": "^4.1.0", @@ -7743,6 +7765,12 @@ "integrity": "sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA==", "dev": true }, + "v8-compile-cache": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.0.3.tgz", + "integrity": "sha512-CNmdbwQMBjwr9Gsmohvm0pbL954tJrNzf6gWL3K+QMQf00PF7ERGrEiLgjuU3mKreLC2MeGhUsNV9ybTbLgd3w==", + "dev": true + }, "v8flags": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/v8flags/-/v8flags-3.1.3.tgz", diff --git a/package.json b/package.json index ba90bcb..ece34d8 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,7 @@ "license": "LGPL-3.0-or-later", "devDependencies": { "@pixi/jsdoc-template": "^2.4.2", - "eslint": "^6.0.1", + "eslint": "^6.1.0", "eslint-config-prettier": "^6.0.0", "eslint-plugin-prettier": "^3.1.0", "fs-extra": "^8.0.1", @@ -34,7 +34,7 @@ "gulp-uglify": "^3.0.2", "htmlhint": "^0.11.0", "prettier": "^1.18.2", - "puppeteer": "^1.18.1", + "puppeteer": "^1.19.0", "stylelint": "^10.1.0", "stylelint-config-standard": "^18.3.0" }, @@ -47,6 +47,6 @@ "pixi-particles": "^4.1.1", "pixi-projection": "^0.2.8", "pixi.js": "^4.8.8", - "propagating-hammerjs": "^1.4.6" + "propagating-hammerjs": "^1.4.7" } }