- fix image pan for hole scene

package.json

 {
   "name": "medsurf-draw",
-  "version": "1.0.217",
+  "version": "1.0.221",
   "description": "Draw annotations on jpg/zoomify images, based on PIXI.js",
   "keywords": [
     "draw",

src/app/index.ts

@@ -1088,6 +1088,7 @@ ready(() => {
                     fontVariant: "normal",
                     fontWeight: "900"
                 });
+                cursor.name = "cursor";
                 cursor.visible = false;
                 app.stage.addChild(cursor);
 

src/lib/elements/images/Image.ts

@@ -183,7 +183,9 @@ export class Image extends BaseContainer<ImageModel> {
         this.contextInteraction.on("endRight", this.endRight, this);
         // -- Move interaction
         this.moveInteraction = new MedsurfDraw.MoveInteraction(this, true);
+        this.moveInteraction.on("startMove", this.startMove, this);
         this.moveInteraction.on("onMove", this.onMove, this);
+        this.moveInteraction.on("endMove", this.endMove, this);
         // -- Zoom interaction
         this.zoomInteraction = new MedsurfDraw.ZoomInteraction(this);
         this.zoomInteraction.on("onZoom", this.onZoom, this);
@@ -204,9 +206,10 @@ export class Image extends BaseContainer<ImageModel> {
             // -- Resize
             parent.on("resize", this.onResize, this);
             // -- Move
-            this.on("mousedown", this.moveInteraction.startMove, this.moveInteraction);
-            this.on("pointermove", this.moveInteraction.onMove, this.moveInteraction);
-            this.on("mouseup", this.moveInteraction.endMove, this.moveInteraction);
+            parent.interactive = true;
+            parent.on("mousedown", this.moveInteraction.startMove, this.moveInteraction);
+            parent.on("pointermove", this.moveInteraction.onMove, this.moveInteraction);
+            parent.on("mouseup", this.moveInteraction.endMove, this.moveInteraction);
             // -- Debounce
             this.on("debouncedUnselectLayerGroup", this._debounceUndelectLayerGroupMethod);
             this.on("debouncedUnselectGrouping", this._debounceUndelectGroupingMethod);
@@ -219,9 +222,10 @@ export class Image extends BaseContainer<ImageModel> {
             // -- Resize
             parent.off("resize", this.onResize, this);
             // -- Move
-            this.off("mousedown", this.moveInteraction.startMove, this.moveInteraction);
-            this.off("pointermove", this.moveInteraction.onMove, this.moveInteraction);
-            this.off("mouseup", this.moveInteraction.endMove, this.moveInteraction);
+            parent.interactive = false;
+            parent.off("mousedown", this.moveInteraction.startMove, this.moveInteraction);
+            parent.off("pointermove", this.moveInteraction.onMove, this.moveInteraction);
+            parent.off("mouseup", this.moveInteraction.endMove, this.moveInteraction);
             // -- Debounce
             this.off("debouncedUnselectLayerGroup", this._debounceUndelectLayerGroupMethod);
             this.off("debouncedUnselectGrouping", this._debounceUndelectGroupingMethod);
@@ -905,6 +909,10 @@ export class Image extends BaseContainer<ImageModel> {
             (this.canvas.height - this.dimensions.height * this._scaleY) / 2
         );
 
+        // Emit
+        debounce(this.emit.bind(this, "imageZoom"), 50)();
+
+        // Promise
         return Promise.resolve();
     }
 
@@ -1015,11 +1023,6 @@ export class Image extends BaseContainer<ImageModel> {
         // -- Context
         this.on("rightup", this.contextInteraction.endRight, this.contextInteraction);
         //</editor-fold>
-
-        //<editor-fold desc="Interactions">
-        // -- Move interaction
-        this.moveInteraction.on("endMove", this.endMove, this);
-        //</editor-fold>
     }
 
     /**
@@ -1034,11 +1037,6 @@ export class Image extends BaseContainer<ImageModel> {
         // -- Context
         this.off("rightup", this.contextInteraction.endRight, this.contextInteraction);
         //</editor-fold>
-
-        //<editor-fold desc="Interactions">
-        // -- Move interaction
-        this.moveInteraction.off("endMove", this.endMove, this);
-        //</editor-fold>
     }
 
     /**
@@ -2230,11 +2228,21 @@ export class Image extends BaseContainer<ImageModel> {
         debounce(this.emit.bind(this, "onResize"), 50)();
         // TODO remove
 
+        // Promise
         return Promise.resolve();
     }
     //</editor-fold>
 
     //<editor-fold desc="Move">
+    public startMove(event: PIXI.InteractionEvent): void {
+        event.stopPropagation();
+
+        // Cursor fix for stage
+        this.parent.cursor = "move";
+        this.renderer.plugins.interaction.cursorStyles.default = "none";
+        this.renderer.plugins.interaction.setCursorMode("move");
+    }
+
     /**
      * On Move
      * @param event
@@ -2300,6 +2308,17 @@ export class Image extends BaseContainer<ImageModel> {
      */
     public endMove(event: PIXI.InteractionEvent): void {
         event.stopPropagation();
+
+        // Cursor fix for stage
+        this.parent.cursor = "default";
+        this.renderer.plugins.interaction.cursorStyles.default = (mode: any) => {
+            const cursor = this.parent.getChildByName('cursor') as PIXI.Text;
+            cursor.text = "\uf245";
+            cursor.anchor.set(0, 0);
+            cursor.rotation = 0;
+        };
+        this.renderer.plugins.interaction.setCursorMode("default");
+
         if (!this._moveLock) {
             // Reset selection
             this.controlSetDefaultMode(event);