From 1a1608d0e60b11fea49a04add7f52a759fc8e014 Mon Sep 17 00:00:00 2001
From: Andrea Gottsponer <ago@attr.ch>
Date: Mon, 16 Dec 2019 17:28:40 +0100
Subject: [PATCH] 1.0.11
---
package-lock.json | 2 +-
package.json | 2 +-
src/app/index.ts | 29 +++++++++--
src/lib/elements/images/MedsurfTileSprite.ts | 52 ++++++++++++++++++--
src/public/index.html | 1 +
5 files changed, 75 insertions(+), 11 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index d75ac38e..de8a3c5f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
{
"name": "medsurf-draw",
- "version": "1.0.10",
+ "version": "1.0.11",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
diff --git a/package.json b/package.json
index 8366bd72..377153a3 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "medsurf-draw",
- "version": "1.0.10",
+ "version": "1.0.11",
"description": "Draw annotations on jpg/zoomify images, based on PIXI.js",
"keywords": [
"draw",
diff --git a/src/app/index.ts b/src/app/index.ts
index c23a5158..eb0a2d4f 100644
--- a/src/app/index.ts
+++ b/src/app/index.ts
@@ -20,6 +20,7 @@ const buttonDefault = document.getElementById("button_default") as HTMLButtonEle
const buttonMarker = document.getElementById("button_marker") as HTMLButtonElement;
const buttonSelftest = document.getElementById("button_selftest") as HTMLButtonElement;
const buttonAuthor = document.getElementById("button_author") as HTMLButtonElement;
+const buttonChange = document.getElementById("button_change") as HTMLButtonElement;
// TODO CANVASRENDERER has gaps between Tiles
// https://www.html5gamedevs.com/topic/27366-gaps-between-sprite-tiles-when-scaling-the-stage/
@@ -232,18 +233,38 @@ PIXI.Renderer.registerPlugin('bla', bla);
// IMAGES
// BaseSprite
- // const image = new MedsurfSprite(app.renderer, canvas, PIXI.Texture.from("https://api.medsurf.stage.iml.unibe.ch/v1/file/slides/3893/image/1500x1514_80_eaaa24fd-e69e-491e-b576-fccab29c85a2.jpg"));
- // const image = new MedsurfSprite(app.renderer, canvas, PIXI.Texture.from("http://localhost:3000/v1/file/slide/2701,2701/image/1800x1800_80.jpeg"));
+ // let image = new MedsurfSprite(app.renderer, canvas, PIXI.Texture.from("https://api.medsurf.stage.iml.unibe.ch/v1/file/slides/3893/image/1500x1514_80_eaaa24fd-e69e-491e-b576-fccab29c85a2.jpg"));
+ // let image = new MedsurfSprite(app.renderer, canvas, PIXI.Texture.from("http://localhost:3000/v1/file/slide/2701,2701/image/1800x1800_80.jpeg"));
// Tile BaseSprite
- const image = new MedsurfTileSprite(app.renderer, canvas, 5800, "https://api.medsurf.stage.iml.unibe.ch:443/v1/file/slide/5800/image/", 29512, 20512);
+ let image = new MedsurfTileSprite(app.renderer, canvas, 5800, "https://api.medsurf.stage.iml.unibe.ch:443/v1/file/slide/5800/image/", 29512, 20512);
// Video
// const image = new MedsurfSprite(app.renderer, canvas, PIXI.Texture.from("./assets/juldem.mp4"));
app.stage.addChild(image);
- const navigator = new ImageNavigatorElement(app.renderer, canvas, image);
+ let navigator = new ImageNavigatorElement(app.renderer, canvas, image);
app.stage.addChild(navigator);
+ buttonChange.addEventListener("click", () => {
+ /*
+ // @ts-ignore
+ app.stage.removeChild(navigator);
+ // @ts-ignore
+ navigator.destroy();
+ */
+
+ app.stage.removeChild(image);
+ image.destroy();
+
+ setTimeout(() => {
+ image = new MedsurfTileSprite(app.renderer, canvas, 5802, "https://api.medsurf.stage.iml.unibe.ch:443/v1/file/slide/5802/image/", 19992, 15832);
+ app.stage.addChild(image);
+
+ let navigator = new ImageNavigatorElement(app.renderer, canvas, image);
+ app.stage.addChild(navigator);
+ }, 50);
+ });
+
// ELEMENTS
// Arrow
const point1 = new PositionPoint(600, 400);
diff --git a/src/lib/elements/images/MedsurfTileSprite.ts b/src/lib/elements/images/MedsurfTileSprite.ts
index ccfc2822..00e23a82 100644
--- a/src/lib/elements/images/MedsurfTileSprite.ts
+++ b/src/lib/elements/images/MedsurfTileSprite.ts
@@ -15,11 +15,14 @@ export class Point {
* Medsurf tile sprite
* Zoom And Pan: https://github.com/anvaka/ngraph/tree/master/examples/pixi.js/03%20-%20Zoom%20And%20Pan
* ZoomifyImage: https://github.com/foobarable/openseadragon/blob/master/src/zoomifytilesource.js
+ * TODO loading not working when image changed -> how to stop the current loading stuff
*/
export class MedsurfTileSprite extends MedsurfSprite {
/**
* Members
*/
+ protected _deleted: boolean;
+
// TODO use this for better performance public renderer: PIXI.Renderer;
// TODO for better performance public texture: PIXI.RenderTexture;
protected _canvas: HTMLCanvasElement;
@@ -55,6 +58,8 @@ export class MedsurfTileSprite extends MedsurfSprite {
public constructor(renderer: PIXI.Renderer | PIXI.CanvasRenderer, canvas: HTMLCanvasElement, slideId: number, tilesUrl: string, imgWidth: number, imgHeight: number, tileSize: number = 256) {
super(renderer, canvas, PIXI.Texture.EMPTY);
+ this._deleted = false;
+
// TODO use this for better performance this.renderer = renderer;
this._canvas = canvas;
@@ -71,9 +76,8 @@ export class MedsurfTileSprite extends MedsurfSprite {
// Init
this._loader = PIXI.Loader.shared;
- this._loader.onLoad.add((loader: PIXI.Loader, resource: PIXI.LoaderResource) => {
- this._drawTexture(resource);
- });
+ this._loader.concurrency = 20;
+ this._loader.onLoad.add(this._onLoad.bind(this));
this._container = new PIXI.Container();
this.addChild(this._container); // TODO remove and use RenderTexture for better performance
@@ -90,12 +94,41 @@ export class MedsurfTileSprite extends MedsurfSprite {
}
public cleanUp() {
+ this._loader.progress = 0;
+ this._loader.loading = false;
+
+ /* TODO check this
+ // @ts-ignore
+ this._loader._queue.reset();
+ // @ts-ignore
+ this._loader._queue.pause();
+ */
+
+ for (const k in this._loader.resources) {
+ const res = this._loader.resources[k];
+
+ if (!res || !res.name.startsWith(this._slideId + "-")) {
+ continue;
+ }
+
+ // @ts-ignore
+ if (res._onCompleteBinding) {
+ // @ts-ignore
+ res._onCompleteBinding.detach();
+ }
+
+ if (res.isLoading) {
+ res.abort();
+ }
+ }
+
this.off("onMove", this._onMoveTile, this);
this.off("endMove", this._endMoveTile, this);
this.off("onZoom", this._onZoomTile, this);
}
public destroy(options?: { children?: boolean; texture?: boolean; baseTexture?: boolean }): void {
+ this._deleted = true;
this.cleanUp();
super.destroy(options);
}
@@ -155,6 +188,13 @@ export class MedsurfTileSprite extends MedsurfSprite {
});
}
+ protected _onLoad(loader: PIXI.Loader, resource: PIXI.LoaderResource): void {
+ if (this._deleted) {
+ return;
+ }
+ this._drawTexture(resource);
+ }
+
//<editor-fold desc="Deep Zoom">
/**
* Init texture
@@ -238,8 +278,10 @@ export class MedsurfTileSprite extends MedsurfSprite {
}
}
- this._loader.load();
- this._loader.loading = false;
+ if (!this._deleted) {
+ this._loader.load();
+ this._loader.loading = false;
+ }
}
/**
diff --git a/src/public/index.html b/src/public/index.html
index de58cce2..b18a8c34 100644
--- a/src/public/index.html
+++ b/src/public/index.html
@@ -263,6 +263,7 @@
<button id="button_marker">Marker</button>
<button id="button_selftest">Selftest</button>
<button id="button_author">Author</button>
+ <button id="button_change">Change Image</button>
<!--
<div id="mouse" style="display: block;"><i class="fas fa-mouse-pointer" style="padding-left: 7px; padding-top: 6px;"></i></div>
<div id="select2" style="display: block;"><i class="fas fa-expand"></i></div>
--
GitLab