@quinninc/pixi-transformer 0.0.7 → 0.0.9

package/dist/Transformer.d.ts

@@ -18,6 +18,7 @@ export declare class Transformer extends Pixi.Container {
     private toPoint;
     private target;
     private movedThreshold;
+    private updateCallbacks;
     private handleOpacity;
     private controlsSize;
     private controlsDimOpacity;
@@ -77,7 +78,7 @@ export declare class Transformer extends Pixi.Container {
     private deScale;
     select(target: Pixi.Container): void;
     unselect(): void;
-    onUpdate: () => void;
+    onUpdate: (cb: (t?: Transformer) => void) => () => void;
     update(): void;
     setTitle(title: string): void;
     setCursor(cursor: string): void;

package/dist/Transformer.js

@@ -32,6 +32,7 @@ export class Transformer extends Pixi.Container {
         super();
         // target Pixi.Container
         this.target = null;
+        this.updateCallbacks = [];
         // position state
         this.left = 0;
         this.top = 0;
@@ -41,7 +42,15 @@ export class Transformer extends Pixi.Container {
         this.dragging = false;
         this.snapKey = false;
         this.pivotKey = false;
-        this.onUpdate = () => { };
+        this.onUpdate = (cb) => {
+            this.updateCallbacks.push(cb);
+            return () => {
+                const index = this.updateCallbacks.indexOf(cb);
+                if (index > -1) {
+                    this.updateCallbacks.splice(index, 1);
+                }
+            };
+        };
         const that = this;
         this._id = id;
         this.debug = debug;
@@ -449,6 +458,12 @@ export class Transformer extends Pixi.Container {
                     keyCodes.includes(e.code) && (that[property] = false);
                     keyCodes.includes(e.key) && (that[property] = false);
                 }));
+        window.addEventListener("blur", () => {
+            that[property] = false;
+        });
+        window.addEventListener("focus", () => {
+            that[property] = false;
+        });
     }
     createHandle({ cursor, name, shape = "square", }) {
         const handle = new Pixi.Graphics();
@@ -495,6 +510,9 @@ export class Transformer extends Pixi.Container {
             this.unselect();
             return;
         }
+        if (this.target) {
+            this.unselect();
+        }
         // console.log("select this - ", this);
         this.target = target;
         let _anchor;
@@ -520,14 +538,18 @@ export class Transformer extends Pixi.Container {
     unselect() {
         this.target = null;
         this.visible = false;
-        this.onUpdate();
+        this.pivotKey = false;
+        this.snapKey = false;
+        this.dragging = false;
+        for (const cb of this.updateCallbacks) {
+            cb(this);
+        }
     }
     update() {
         if (!this.target) {
             console.log("no target, returning...");
             return;
         }
-        this.onUpdate();
         // copy object translation/transformation
         const bounds = this.target.getLocalBounds();
         this.width = bounds.width;
@@ -624,6 +646,9 @@ export class Transformer extends Pixi.Container {
         allHandles.forEach((handle) => {
             this.deScale(handle);
         });
+        for (const cb of this.updateCallbacks) {
+            cb(this);
+        }
     }
     setTitle(title) {
         title = title || "";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@quinninc/pixi-transformer",
   "private": false,
-  "version": "0.0.7",
+  "version": "0.0.9",
   "repository": {
     "url": "https://github.com/Quinn-Care-Private-Limited/pixi-transformer"
   },