diff --git a/package-lock.json b/package-lock.json
index d75ac38eb51e08916ceefef5a76d2a847477bd17..de8a3c5ff2e138c86010df9952288e018a47dd67 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 8366bd7260565a76262958f50933dfcb88dd91e6..377153a344557805c24aa2ad6b5454d0cda87f2e 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 c23a515811f723b912348d7b6b467e8f669f103a..eb0a2d4f5e48d1ad171b5a4cb0d62e8620ef1ef7 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 ccfc2822ba2bb271e14fc521386e024659ecab18..00e23a82edbb7bf7a6b63f26345f7bfe3b29b114 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 de58cce2221a80e18e37408a4b8b0d8ca74fe75e..b18a8c34b15aee0de4dda9301a6a5b3d099733cf 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>