Merge branch 'master' of gitea.iwm-tuebingen.de:IWMBrowser/iwmlib

dist/iwmlib.pixi.js

@@ -8323,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;
@@ -8417,10 +8419,11 @@
             this.tileScale = scale;
             this.fadeInTime = fadeInTime;
             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.interactive = false;
             this._highlight = null;
 
@@ -9043,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
@@ -9054,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;

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

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

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')
     }
 }
 

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)
+        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.interactive = false
         this._highlight = null
 

lib/pixi/deepzoom/worker/module.html

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

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)

lib/pixi/deepzoom/worker/script.html

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