IWMBrowser/iwmlib
IWMBrowser/iwmlib
4
0
Fork 0
Code Issues 6 Pull Requests Releases Wiki Activity

Fixed worker path problems.

Browse Source
This commit is contained in:
Sebastian Kupke 2019-07-04 09:17:43 +02:00
parent da212ac188
commit 4e9dd2fa02
8 changed files with 260 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

122
dist/iwmlib.pixi.js vendored
View File

@ -1402,6 +1402,8 @@
Events$1.simulated = []; Events$1.simulated = [];
Events$1.simulationRunning = false; Events$1.simulationRunning = false;
/* global PIXI TweenLite */
/** /**
* Callback for the button action. * Callback for the button action.
* *
@ -1559,7 +1561,7 @@
} }
if (this.opts.style === 'link') { 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; this._active = null;
@ -1631,7 +1633,7 @@
//----------------- //-----------------
this.button.on('pointerover', e => { this.button.on('pointerover', e => {
this.capture(e); this.capture(e);
TweenLite.to([this.button, this.content], this.theme.fast, {alpha: .83, overwrite: 'none'}); TweenLite.to([this.button, this.content], this.theme.fast, { alpha: .83, overwrite: 'none' });
}); });
this.button.on('pointermove', e => { this.button.on('pointermove', e => {
@ -1640,12 +1642,13 @@
this.button.on('pointerout', e => { this.button.on('pointerout', e => {
this.capture(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.button.on('pointerdown', e => {
//this.capture(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 => { this.button.on('pointerup', e => {
@ -1658,7 +1661,7 @@
this.opts.action.call(this, e, this); 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') { if (this.opts.type === 'checkbox') {
this.active = !this.active; this.active = !this.active;
@ -1681,9 +1684,9 @@
//----------------- //-----------------
if (this.opts.tooltip) { if (this.opts.tooltip) {
if (typeof this.opts.tooltip === 'string') { 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 { } 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); this.tooltip = new Tooltip(this.opts.tooltip);
} }
} }
@ -1698,7 +1701,7 @@
offsetTop: 0 offsetTop: 0
}); });
if (typeof this.opts.badge === 'string') { if (typeof this.opts.badge === 'string') {
opts = Object.assign(opts, {content: this.opts.badge}); opts = Object.assign(opts, { content: this.opts.badge });
} else { } else {
opts = Object.assign(opts, this.opts.badge); opts = Object.assign(opts, this.opts.badge);
} }
@ -1706,25 +1709,25 @@
const badge = new Badge(opts); const badge = new Badge(opts);
switch (opts.align) { switch (opts.align) {
case 'left': case 'left':
badge.x = this.x - badge.width / 2 + opts.offsetLeft; badge.x = this.x - badge.width / 2 + opts.offsetLeft;
break break
case 'center': 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 break
case 'right': 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) { switch (opts.verticalAlign) {
case 'top': case 'top':
badge.y = this.y - badge.height / 2 + opts.offsetTop; badge.y = this.y - badge.height / 2 + opts.offsetTop;
break break
case 'middle': 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 break
case 'bottom': 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); this.addChild(badge);
@ -1834,15 +1837,15 @@
for (let child of this.content.children) { for (let child of this.content.children) {
switch (this.opts.verticalAlign) { switch (this.opts.verticalAlign) {
case 'top': case 'top':
child.y = 0; child.y = 0;
break break
case 'middle': case 'middle':
child.y = this.content.height / 2 - child.height / 2; child.y = this.content.height / 2 - child.height / 2;
break break
case 'bottom': case 'bottom':
child.y = this.content.height - child.height; child.y = this.content.height - child.height;
break break
} }
} }
@ -1859,27 +1862,27 @@
layoutContent() { layoutContent() {
switch (this.opts.align) { switch (this.opts.align) {
case 'left': case 'left':
this.content.x = this.opts.padding; this.content.x = this.opts.padding;
break break
case 'center': case 'center':
this.content.x = ((this._width - this.content.width) / 2); this.content.x = ((this._width - this.content.width) / 2);
break break
case 'right': 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 break
} }
switch (this.opts.verticalAlign) { switch (this.opts.verticalAlign) {
case 'top': case 'top':
this.content.y = this.opts.padding; this.content.y = this.opts.padding;
break break
case 'middle': case 'middle':
this.content.y = (this._height - this.content.height) / 2; this.content.y = (this._height - this.content.height) / 2;
break break
case 'bottom': 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 break
} }
return this return this
@ -8320,9 +8323,11 @@
**/ **/
class WorkerTileLoader extends TileLoader { class WorkerTileLoader extends TileLoader {
constructor(tiles) { constructor(tiles, workerPath) {
super(tiles); super(tiles);
let worker = this.worker = new Worker("../../lib/pixi/deepzoom/tileloader.js");
let worker = this.worker = new Worker(workerPath);
worker.onmessage = (event) => { worker.onmessage = (event) => {
if (event.data.success) { if (event.data.success) {
let { url, col, row, buffer } = event.data; let { url, col, row, buffer } = event.data;
@ -8414,10 +8419,11 @@
this.tileScale = scale; this.tileScale = scale;
this.fadeInTime = fadeInTime; this.fadeInTime = fadeInTime;
this.keep = false; this.keep = false;
if (this.view.preferWorker && view.info.compression.length > 0) if (this.view.useWorker && view.info.compression && view.info.compression.length > 0) {
this.loader = new WorkerTileLoader(this); this.loader = new WorkerTileLoader(this, this.view.useWorker);
else } else {
this.loader = new PIXITileLoader(this, view.info.compression); this.loader = new PIXITileLoader(this, view.info.compression);
}
this.interactive = false; this.interactive = false;
this._highlight = null; this._highlight = null;
@ -9040,7 +9046,7 @@
world = null, // Defines the world bounds the images lives in world = null, // Defines the world bounds the images lives in
highResolution = true, highResolution = true,
autoLoadTiles = true, autoLoadTiles = true,
preferWorker = false, useWorker = '',
minimumLevel = 0, minimumLevel = 0,
alpha = 1, alpha = 1,
app = window.app app = window.app
@ -9051,7 +9057,7 @@
this.debug = debug; this.debug = debug;
this.shadow = shadow; this.shadow = shadow;
this.world = world; this.world = world;
this.preferWorker = preferWorker; this.useWorker = useWorker;
this.resolution = highResolution this.resolution = highResolution
? Math.round(window.devicePixelRatio) ? Math.round(window.devicePixelRatio)
: 1; : 1;

4
lib/pixi/deepzoom/image.js
View File

@ -344,7 +344,7 @@ export class DeepZoomImage extends PIXI.Container {
world = null, // Defines the world bounds the images lives in world = null, // Defines the world bounds the images lives in
highResolution = true, highResolution = true,
autoLoadTiles = true, autoLoadTiles = true,
preferWorker = false, useWorker = '',
minimumLevel = 0, minimumLevel = 0,
alpha = 1, alpha = 1,
app = window.app app = window.app
@ -355,7 +355,7 @@ export class DeepZoomImage extends PIXI.Container {
this.debug = debug this.debug = debug
this.shadow = shadow this.shadow = shadow
this.world = world this.world = world
this.preferWorker = preferWorker this.useWorker = useWorker
this.resolution = highResolution this.resolution = highResolution
? Math.round(window.devicePixelRatio) ? Math.round(window.devicePixelRatio)
: 1 : 1

6
lib/pixi/deepzoom/loader.js
View File

@ -327,9 +327,11 @@ export class RequestTileLoader extends TileLoader {
**/ **/
export class WorkerTileLoader extends TileLoader { export class WorkerTileLoader extends TileLoader {
constructor(tiles) { constructor(tiles, workerPath) {
super(tiles) super(tiles)
let worker = this.worker = new Worker("../../lib/pixi/deepzoom/tileloader.js")
let worker = this.worker = new Worker(workerPath)
worker.onmessage = (event) => { worker.onmessage = (event) => {
if (event.data.success) { if (event.data.success) {
let { url, col, row, buffer } = event.data let { url, col, row, buffer } = event.data

4
lib/pixi/deepzoom/tileloader.js
View File

@ -9,7 +9,7 @@ function load() {
let tile = loadQueue.shift() let tile = loadQueue.shift()
let [col, row, url] = tile let [col, row, url] = tile
let xhr = new XMLHttpRequest() let xhr = new XMLHttpRequest()
xhr.responseType = "arraybuffer" xhr.responseType = 'arraybuffer'
xhr.onload = (event) => { xhr.onload = (event) => {
pendingRequests.delete(url) pendingRequests.delete(url)
let buffer = xhr.response let buffer = xhr.response
@ -27,7 +27,7 @@ function load() {
if (loadQueue.length>0) if (loadQueue.length>0)
setTimeout(load, 1000/120) setTimeout(load, 1000/120)
else { else {
if (debug) console.log("Ready") if (debug) console.log('Ready')
} }
} }

7
lib/pixi/deepzoom/tiles.js
View File

@ -48,10 +48,11 @@ export class Tiles extends PIXI.Container {
this.tileScale = scale this.tileScale = scale
this.fadeInTime = fadeInTime this.fadeInTime = fadeInTime
this.keep = false this.keep = false
if (this.view.preferWorker && view.info.compression.length > 0) if (this.view.useWorker && view.info.compression && view.info.compression.length > 0) {
this.loader = new WorkerTileLoader(this) this.loader = new WorkerTileLoader(this, this.view.useWorker)
else } else {
this.loader = new PIXITileLoader(this, view.info.compression) this.loader = new PIXITileLoader(this, view.info.compression)
}
this.interactive = false this.interactive = false
this._highlight = null this._highlight = null

39
lib/pixi/deepzoom/worker/module.html Normal file
View File

@ -0,0 +1,39 @@
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>DeepZoomImage Worker Doctests</title>
<link rel="stylesheet" href="../../../3rdparty/highlight/styles/default.css">
<link rel="stylesheet" href="../../../../css/doctest.css">
<script src="../../../3rdparty/highlight/highlight.pack.js"></script>
<script src="../../../../dist/iwmlib.3rdparty.js"></script>
<script src="../../../bootstrap.js"></script>
<style>
#app {
display: table;
margin: 0 auto;
}
#app > * {
margin-bottom: 5px;
}
</style>
</head>
<body>
<h1>DeepZoomImage with tiles loaded by a worker...</h1>
<p>...from inside a module.</p>
<br />
<div id="div1"></div>
<script class="doctest">
Bootstrap.import("./module.js")
</script>
</body>
</html>

54
lib/pixi/deepzoom/worker/module.js Normal file
View File

@ -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)

91
lib/pixi/deepzoom/worker/script.html Normal file
View File

@ -0,0 +1,91 @@
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>DeepZoomImage Worker Doctests</title>
<link rel="stylesheet" href="../../../3rdparty/highlight/styles/default.css">
<link rel="stylesheet" href="../../../../css/doctest.css">
<script src="../../../3rdparty/highlight/highlight.pack.js"></script>
<script src="../../../../dist/iwmlib.3rdparty.js"></script>
<script src="../../../../dist/iwmlib.js"></script>
<script src="../../../../dist/iwmlib.pixi.js"></script>
<style>
#app {
display: table;
margin: 0 auto;
}
#app > * {
margin-bottom: 5px;
}
</style>
</head>
<body onload="Doctest.run()">
<h1>DeepZoomImage with tiles loaded by a worker...</h1>
<p>...using the dist variants.</p>
<br />
<div id="div1"></div>
<script class="doctest">
// 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)
</script>
</body>
</html>