From 4e9dd2fa021a9e0c966092e54fab80bfc3c22022 Mon Sep 17 00:00:00 2001 From: Sebastian Kupke Date: Thu, 4 Jul 2019 09:17:43 +0200 Subject: [PATCH] Fixed worker path problems. --- dist/iwmlib.pixi.js | 122 ++++++++++++++------------- lib/pixi/deepzoom/image.js | 4 +- lib/pixi/deepzoom/loader.js | 6 +- lib/pixi/deepzoom/tileloader.js | 4 +- lib/pixi/deepzoom/tiles.js | 7 +- lib/pixi/deepzoom/worker/module.html | 39 +++++++++ lib/pixi/deepzoom/worker/module.js | 54 ++++++++++++ lib/pixi/deepzoom/worker/script.html | 91 ++++++++++++++++++++ 8 files changed, 260 insertions(+), 67 deletions(-) create mode 100644 lib/pixi/deepzoom/worker/module.html create mode 100644 lib/pixi/deepzoom/worker/module.js create mode 100644 lib/pixi/deepzoom/worker/script.html diff --git a/dist/iwmlib.pixi.js b/dist/iwmlib.pixi.js index d208ec2..2e575a7 100644 --- a/dist/iwmlib.pixi.js +++ b/dist/iwmlib.pixi.js @@ -1402,6 +1402,8 @@ Events$1.simulated = []; Events$1.simulationRunning = false; + /* global PIXI TweenLite */ + /** * Callback for the button action. * @@ -1559,7 +1561,7 @@ } if (this.opts.style === 'link') { - Object.assign(this.opts, {strokeAlpha: 0, strokeActiveAlpha: 0, fillAlpha: 0, fillActiveAlpha: 0}); + Object.assign(this.opts, { strokeAlpha: 0, strokeActiveAlpha: 0, fillAlpha: 0, fillActiveAlpha: 0 }); } this._active = null; @@ -1631,7 +1633,7 @@ //----------------- this.button.on('pointerover', e => { this.capture(e); - TweenLite.to([this.button, this.content], this.theme.fast, {alpha: .83, overwrite: 'none'}); + TweenLite.to([this.button, this.content], this.theme.fast, { alpha: .83, overwrite: 'none' }); }); this.button.on('pointermove', e => { @@ -1640,12 +1642,13 @@ this.button.on('pointerout', e => { this.capture(e); - TweenLite.to([this.button, this.content], this.theme.fast, {alpha: 1, overwrite: 'none'}); + 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: .7, overwrite: 'none'}); + TweenLite.to([this.button, this.content], this.theme.fast, { alpha: .7, overwrite: 'none' }); }); this.button.on('pointerup', e => { @@ -1658,7 +1661,7 @@ this.opts.action.call(this, e, this); } - TweenLite.to([this.button, this.content], this.theme.fast, {alpha: .83, overwrite: 'none'}); + TweenLite.to([this.button, this.content], this.theme.fast, { alpha: .83, overwrite: 'none' }); if (this.opts.type === 'checkbox') { this.active = !this.active; @@ -1681,9 +1684,9 @@ //----------------- if (this.opts.tooltip) { if (typeof this.opts.tooltip === 'string') { - this.tooltip = new Tooltip({object: this, content: this.opts.tooltip}); + this.tooltip = new Tooltip({ object: this, 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); } } @@ -1698,7 +1701,7 @@ offsetTop: 0 }); if (typeof this.opts.badge === 'string') { - opts = Object.assign(opts, {content: this.opts.badge}); + opts = Object.assign(opts, { content: this.opts.badge }); } else { opts = Object.assign(opts, this.opts.badge); } @@ -1706,25 +1709,25 @@ 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; + 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; + 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); @@ -1834,15 +1837,15 @@ 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 + 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 } } @@ -1859,27 +1862,27 @@ 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 + 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 + 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 @@ -8320,9 +8323,11 @@ **/ class WorkerTileLoader extends TileLoader { - constructor(tiles) { + constructor(tiles, workerPath) { super(tiles); - let worker = this.worker = new Worker("../../lib/pixi/deepzoom/tileloader.js"); + + let worker = this.worker = new Worker(workerPath); + worker.onmessage = (event) => { if (event.data.success) { let { url, col, row, buffer } = event.data; @@ -8414,10 +8419,11 @@ this.tileScale = scale; this.fadeInTime = fadeInTime; this.keep = false; - if (this.view.preferWorker && view.info.compression.length > 0) - this.loader = new WorkerTileLoader(this); - else + if (this.view.useWorker && view.info.compression && view.info.compression.length > 0) { + this.loader = new WorkerTileLoader(this, this.view.useWorker); + } else { this.loader = new PIXITileLoader(this, view.info.compression); + } this.interactive = false; this._highlight = null; @@ -9040,7 +9046,7 @@ world = null, // Defines the world bounds the images lives in highResolution = true, autoLoadTiles = true, - preferWorker = false, + useWorker = '', minimumLevel = 0, alpha = 1, app = window.app @@ -9051,7 +9057,7 @@ this.debug = debug; this.shadow = shadow; this.world = world; - this.preferWorker = preferWorker; + this.useWorker = useWorker; this.resolution = highResolution ? Math.round(window.devicePixelRatio) : 1; diff --git a/lib/pixi/deepzoom/image.js b/lib/pixi/deepzoom/image.js index 01aab0e..a15b576 100755 --- a/lib/pixi/deepzoom/image.js +++ b/lib/pixi/deepzoom/image.js @@ -344,7 +344,7 @@ export class DeepZoomImage extends PIXI.Container { world = null, // Defines the world bounds the images lives in highResolution = true, autoLoadTiles = true, - preferWorker = false, + useWorker = '', minimumLevel = 0, alpha = 1, app = window.app @@ -355,7 +355,7 @@ export class DeepZoomImage extends PIXI.Container { this.debug = debug this.shadow = shadow this.world = world - this.preferWorker = preferWorker + this.useWorker = useWorker this.resolution = highResolution ? Math.round(window.devicePixelRatio) : 1 diff --git a/lib/pixi/deepzoom/loader.js b/lib/pixi/deepzoom/loader.js index 06dcaf2..81a5878 100644 --- a/lib/pixi/deepzoom/loader.js +++ b/lib/pixi/deepzoom/loader.js @@ -327,9 +327,11 @@ export class RequestTileLoader extends TileLoader { **/ export class WorkerTileLoader extends TileLoader { - constructor(tiles) { + constructor(tiles, workerPath) { super(tiles) - let worker = this.worker = new Worker("../../lib/pixi/deepzoom/tileloader.js") + + let worker = this.worker = new Worker(workerPath) + worker.onmessage = (event) => { if (event.data.success) { let { url, col, row, buffer } = event.data diff --git a/lib/pixi/deepzoom/tileloader.js b/lib/pixi/deepzoom/tileloader.js index 3a382e3..88215b1 100644 --- a/lib/pixi/deepzoom/tileloader.js +++ b/lib/pixi/deepzoom/tileloader.js @@ -9,7 +9,7 @@ function load() { let tile = loadQueue.shift() let [col, row, url] = tile let xhr = new XMLHttpRequest() - xhr.responseType = "arraybuffer" + xhr.responseType = 'arraybuffer' xhr.onload = (event) => { pendingRequests.delete(url) let buffer = xhr.response @@ -27,7 +27,7 @@ function load() { if (loadQueue.length>0) setTimeout(load, 1000/120) else { - if (debug) console.log("Ready") + if (debug) console.log('Ready') } } diff --git a/lib/pixi/deepzoom/tiles.js b/lib/pixi/deepzoom/tiles.js index 834e362..c0bab2f 100644 --- a/lib/pixi/deepzoom/tiles.js +++ b/lib/pixi/deepzoom/tiles.js @@ -48,10 +48,11 @@ export class Tiles extends PIXI.Container { this.tileScale = scale this.fadeInTime = fadeInTime this.keep = false - if (this.view.preferWorker && view.info.compression.length > 0) - this.loader = new WorkerTileLoader(this) - else + if (this.view.useWorker && view.info.compression && view.info.compression.length > 0) { + this.loader = new WorkerTileLoader(this, this.view.useWorker) + } else { this.loader = new PIXITileLoader(this, view.info.compression) + } this.interactive = false this._highlight = null diff --git a/lib/pixi/deepzoom/worker/module.html b/lib/pixi/deepzoom/worker/module.html new file mode 100644 index 0000000..d38f81c --- /dev/null +++ b/lib/pixi/deepzoom/worker/module.html @@ -0,0 +1,39 @@ + + + + + + + DeepZoomImage Worker Doctests + + + + + + + + + + + + + +

DeepZoomImage with tiles loaded by a worker...

+

...from inside a module.

+
+
+ + + + diff --git a/lib/pixi/deepzoom/worker/module.js b/lib/pixi/deepzoom/worker/module.js new file mode 100644 index 0000000..1d0e998 --- /dev/null +++ b/lib/pixi/deepzoom/worker/module.js @@ -0,0 +1,54 @@ +import PIXIApp from '../../app.js' +import {DeepZoomInfo, DeepZoomImage} from '../image.js' +import {ScatterContainer, DisplayObjectScatter} from '../../scatter.js' + +// deepZoom +//-------------------- +const deepZoomInfo = new DeepZoomInfo({ + compression: ["dds"], + clip: { + minLevel: 12, + maxLevel: 20, + startCol: 275215, + startRow: 181050, + bounds: { + min: [48.458353, 8.96484374976547], + max: [48.5747899110263, 9.14062499976523] + } + }, + tileSize: 512, + format: "png", + overlap: 0, + type: "map", + height: 131072, + width: 131072, + path: "../../../../Tuesch/var/luftbild/2018", + urlTileTemplate: "{path}/{level}/{row}/{column}.{format}" +}) + +// app +//-------------------- +const app = new PIXIApp({ + width: 800, + height: 500 +}).setup().run() + +div1.appendChild(app.view) + +// create the ScatterContainer +//-------------------- +const scatterContainer = new ScatterContainer(app.renderer, {showBounds: true, app: app}) +app.scene.addChild(scatterContainer) + +// Create the DeepZoomImage +//-------------------- +const deepZoomImage = new DeepZoomImage(deepZoomInfo, {app, world: scatterContainer, useWorker: '../tileloader.js'}) +deepZoomImage.scatter = new DisplayObjectScatter(deepZoomImage, app.renderer, { + minScale: 0, + maxScale: 50, + onTransform: event => { + deepZoomImage.transformed(event) + } +}) + +scatterContainer.addChild(deepZoomImage) \ No newline at end of file diff --git a/lib/pixi/deepzoom/worker/script.html b/lib/pixi/deepzoom/worker/script.html new file mode 100644 index 0000000..d2b0fe6 --- /dev/null +++ b/lib/pixi/deepzoom/worker/script.html @@ -0,0 +1,91 @@ + + + + + + + DeepZoomImage Worker Doctests + + + + + + + + + + + + + + +

DeepZoomImage with tiles loaded by a worker...

+

...using the dist variants.

+
+
+ + + +