@quinninc/pixi-transformer 0.1.2 → 0.1.3

package/dist/Transformer.d.ts

@@ -19,7 +19,6 @@ export declare class Transformer extends Pixi.Container {
     private target;
     private movedThreshold;
     private updateCallbacks;
-    private onMoveEndCallback?;
     private handleOpacity;
     private controlsSize;
     private controlsDimOpacity;
@@ -61,7 +60,7 @@ export declare class Transformer extends Pixi.Container {
      *
      * selectTool.unselect();
      */
-    constructor({ id, lineColor, handleColor, controlsSize, debug, generateAnchorMark, snapKeys, pivotKeys, onMoveEnd, }?: {
+    constructor({ id, lineColor, handleColor, controlsSize, debug, generateAnchorMark, snapKeys, pivotKeys, }?: {
         id?: string;
         lineColor?: string | number;
         handleColor?: string | number;
@@ -70,7 +69,6 @@ export declare class Transformer extends Pixi.Container {
         generateAnchorMark?: false | ((graphic: Pixi.Graphics) => void);
         snapKeys?: string[];
         pivotKeys?: string[];
-        onMoveEnd?: () => void;
     });
     private addToolTip;
     private handleHandleEvents;

package/dist/Transformer.js

@@ -28,7 +28,7 @@ export class Transformer extends Pixi.Container {
      *
      * selectTool.unselect();
      */
-    constructor({ id = "transformer", lineColor = 0x66cfff, handleColor = 0xffffff, controlsSize = 10, debug = false, generateAnchorMark, snapKeys = ["ShiftLeft"], pivotKeys = ["AltLeft"], onMoveEnd, } = {}) {
+    constructor({ id = "transformer", lineColor = 0x66cfff, handleColor = 0xffffff, controlsSize = 10, debug = false, generateAnchorMark, snapKeys = ["ShiftLeft"], pivotKeys = ["AltLeft"], } = {}) {
         super();
         // target Pixi.Container
         this.target = null;
@@ -65,7 +65,6 @@ export class Transformer extends Pixi.Container {
             this.generateAnchorMark = generateAnchorMark;
         else if (generateAnchorMark === false)
             this.generateAnchorMark = () => { };
-        this.onMoveEndCallback = onMoveEnd;
         this.zIndex = 1e7;
         // Pixi.Container Properties
         this.visible = false;
@@ -144,24 +143,11 @@ export class Transformer extends Pixi.Container {
         this.moveHandle.hitArea = new Pixi.Rectangle(0, 0, this.controlsSize, this.controlsSize);
         this.addChild(this.moveHandle);
         function changeAnchorPoint(ev) {
-            // console.log("TAPP this, that - ", this, that);
             if (!that.pivotKey)
                 return;
             if (!that.target)
                 return;
             const eventPoint = that.convertToLocal(ev.global);
-            // console.log("Prev anchor - ", that._anchor);
-            // console.log("ev.position - ", eventPoint.x, eventPoint.y);
-            // console.log(
-            //   "that.target.position - ",
-            //   that.target.position.x,
-            //   that.target.position.y,
-            // );
-            // console.log(
-            //   "that.target.pivot - ",
-            //   that.target.pivot.x,
-            //   that.target.pivot.y,
-            // );
             let dx, dy;
             // calc new pivot point
             // step 1 - translate to origin
@@ -177,11 +163,9 @@ export class Transformer extends Pixi.Container {
                 dim: { width: that.target.width, height: that.target.height },
                 anchor: that._anchor,
             });
-            // console.log("UP SNAPPING - ", sp, pSnapped);
             // step 3 - scale by 1/scale
             rdx = pSnapped.x / that.target.scale.x;
             rdy = pSnapped.y / that.target.scale.y;
-            // console.log("3 - dx, dy - ", dx, dy);
             // step 4 - translate to new pivot
             const x = that.target.pivot.x + rdx;
             const y = that.target.pivot.y + rdy;
@@ -195,7 +179,6 @@ export class Transformer extends Pixi.Container {
             that.target.position.set(posX, posY);
         }
         function onMoveHandleDown(downEvent) {
-            // console.log("onMoveHandleDown this, that - ", this, that);
             if (!that.target)
                 return;
             // Store target's starting position for move calculation
@@ -213,7 +196,6 @@ export class Transformer extends Pixi.Container {
             this.on("globalpointermove", onMoveHandleMove);
         }
         function onMoveHandleMove(moveEvent) {
-            // console.log("onMoveHandleMove this, that - ", this, that);
             if (!this.dragging || !that.target)
                 return;
             const eventPoint = that.convertToLocal(moveEvent.global);
@@ -230,7 +212,6 @@ export class Transformer extends Pixi.Container {
                     },
                     anchor: that._anchor,
                 });
-                // console.log("MOVE SNAPPING - ", p, snappedPoint);
                 that.anchorMark.position.set(snappedPoint.x / that.target.scale.x, snappedPoint.y / that.target.scale.y);
                 return;
             }
@@ -243,37 +224,25 @@ export class Transformer extends Pixi.Container {
             moveEvent.stopPropagation();
         }
         function onMoveHandleUp(upEvent) {
-            // console.log("onMoveHandleUp this, that - ", this, that);
-            const wasDragging = this.dragging; // Capture state before resetting
+            const wasDragging = this.dragging;
             // Reset state for this handle instance first
             this.off("globalpointermove", onMoveHandleMove);
-            this.dragging = false; // Reset handle-specific dragging flag
-            // that.dragging = false; // Reset global dragging flag (might be reset by handleHandleEvents too)
+            this.dragging = false;
             if (this.draggingPivot) {
                 changeAnchorPoint(upEvent);
                 that.anchorMark.position.set(0, 0);
                 this.draggingPivot = false;
-                // Maybe call update here if pivot change needs immediate visual update?
-                // that.update();
             }
-            // --- Trigger onMoveEnd Callback ---
+            // --- Emit Move End Event ---
             const scale = Math.min(that.scale.x, that.scale.y) || 1;
-            console.log("this.dragDistance - ", this.dragDistance);
-            console.log("that.movedThreshold / scale - ", that.movedThreshold / scale);
             if (wasDragging &&
                 this.dragDistance > that.movedThreshold / scale &&
-                that.target &&
-                that.onMoveEndCallback) {
-                console.log("Move ended, calling onMoveEndCallback (no args)");
-                that.onMoveEndCallback();
+                that.target) {
+                that.emit("pixi-transformer-moveend");
             }
-            // --- End Trigger ---
+            // --- End Emit ---
             this.dragDistance = 0;
-            // Note: The generic onHandleUp from handleHandleEvents will also fire
-            // and call updateCallbacks. Ensure order is okay or adjust if needed.
-            // If the generic one shouldn't fire its updateCallbacks for this handle,
-            // you might need to structure handleHandleEvents differently.
-            upEvent.stopPropagation(); // Prevent event bubbling further if needed
+            upEvent.stopPropagation();
         }
         // ------------</ MoveTool>---------------
         // ------------<ScaleXYTool>---------------
@@ -289,14 +258,12 @@ export class Transformer extends Pixi.Container {
                 .on("pointerup", onScaleXYToolUp);
         }
         function onScaleXYToolDown(downEvent) {
-            // console.log("onScaleToolDown this, that - ", this, that);
             if (!that.target)
                 return;
             this.targetResolutionStart = that.target.resolution;
             this.on("globalpointermove", onScaleXYToolMove);
         }
         function onScaleXYToolMove(moveEvent) {
-            // console.log("onScaleToolMove this, that - ", this, that);
             if (!this.dragging || !that.target)
                 return;
             const eventPoint = that.convertToLocal(moveEvent.global);
@@ -309,7 +276,6 @@ export class Transformer extends Pixi.Container {
             that.update();
         }
         function onScaleXYToolUp() {
-            // console.log("onScaleToolUp this, that - ", this, that);
             if (that.target) {
                 that.target.resolution =
                     this.targetResolutionStart * this.rescaleFactor;
@@ -325,18 +291,15 @@ export class Transformer extends Pixi.Container {
                 .on("pointerupoutside", onScaleYToolUp);
         }
         function onScaleYToolDown(downEvent) {
-            // console.log("onVScaleToolDown this, that - ", this, that);
             if (!that.target)
                 return;
             this.on("globalpointermove", onScaleYToolMove);
         }
         function onScaleYToolMove(moveEvent) {
-            // console.log("onVScaleToolMove this - ", this);
             if (!this.dragging || !that.target)
                 return;
             const eventPoint = that.convertToLocal(moveEvent.global);
             const referencePoint = that.target.position.clone();
-            // referencePoint.x = that.target.position.x + that.target.width / 2;
             const distStart = calcDistance(this.eventStartPos, referencePoint);
             const distEnd = calcDistance(eventPoint, referencePoint);
             const direction = getDirection(referencePoint, this.eventStartPos, eventPoint);
@@ -345,7 +308,6 @@ export class Transformer extends Pixi.Container {
             that.update();
         }
         function onScaleYToolUp(upEvent) {
-            // console.log("onVScaleToolUp this, that - ", this, that);
             this.off("globalpointermove", onScaleYToolMove);
         }
         // ------------</ ScaleYTool>---------------
@@ -358,18 +320,15 @@ export class Transformer extends Pixi.Container {
         }
         this.addChild(this.scaleRHandle);
         function onScaleXToolDown(downEvent) {
-            // console.log("onHScaleToolDown this, that - ", this, that);
             if (!that.target)
                 return;
             this.on("globalpointermove", onScaleXToolMove);
         }
         function onScaleXToolMove(moveEvent) {
-            // console.log("onHScaleToolMove this - ", this);
             if (!this.dragging || !that.target)
                 return;
             const eventPoint = that.convertToLocal(moveEvent.global);
             const referencePoint = that.target.position.clone();
-            // referencePoint.y = that.target.position.y + that.target.height / 2;
             const distStart = calcDistance(this.eventStartPos, referencePoint);
             const distEnd = calcDistance(eventPoint, referencePoint);
             const direction = getDirection(referencePoint, this.eventStartPos, eventPoint);
@@ -378,7 +337,6 @@ export class Transformer extends Pixi.Container {
             that.update();
         }
         function onScaleXToolUp(upEvent) {
-            // console.log("onHScaleToolUp this, that - ", this, that);
             this.off("globalpointermove", onScaleXToolMove);
         }
         // ------------</ ScaleXTool>---------------
@@ -388,13 +346,11 @@ export class Transformer extends Pixi.Container {
             .on("pointerup", onRotateToolUp)
             .on("pointerupoutside", onRotateToolUp);
         function onRotateToolDown(downEvent) {
-            // console.log("onRotateToolDown this, that - ", this, that);
             if (!that.target)
                 return;
             this.on("globalpointermove", onRotateToolMove);
         }
         function onRotateToolMove(moveEvent) {
-            // console.log("onRotateToolMove this, that - ", this, that);
             if (!this.dragging || !that.target)
                 return;
             const eventPoint = that.convertToLocal(moveEvent.global);
@@ -425,7 +381,6 @@ export class Transformer extends Pixi.Container {
             that.update();
         }
         function onRotateToolUp(upEvent) {
-            // console.log("onRotateToolUp this, that - ", this, that);
             this.off("globalpointermove", onRotateToolMove);
         }
         // ------------</ RotateTool>---------------
@@ -449,9 +404,7 @@ export class Transformer extends Pixi.Container {
         });
     }
     handleHandleEvents(handle, that) {
-        // console.log("handleHandleEvents this, handle - ", this, handle.label);
         function onHandleDown(e) {
-            // console.log("onHandleDown this - ", this);
             that.dragging = true;
             handle.dragging = true;
             handle.eventStartPos = that.convertToLocal(e.global.clone());
@@ -464,7 +417,6 @@ export class Transformer extends Pixi.Container {
             }
         }
         function onHandleMove(e) {
-            // console.log("onHandleMove this - ", this);
             const eventPoint = that.convertToLocal(e.global.clone());
             if (that.debug) {
                 that.createHandleIndicatorTo(that.toPoint, eventPoint.x, eventPoint.y);
@@ -472,7 +424,6 @@ export class Transformer extends Pixi.Container {
             }
         }
         function onHandleUp() {
-            // console.log("onHandleUp this - ", this);
             that.update();
             handle.off("globalpointermove", onHandleMove);
             if (that.debug) {
@@ -552,25 +503,19 @@ export class Transformer extends Pixi.Container {
         if (this.target) {
             this.unselect();
         }
-        // console.log("select this - ", this);
         this.target = target;
         let _anchor;
         if (this.target.pivot) {
-            // console.log("target has pivot", this.target.pivot);
-            // when you set a width of 100 on a sprites with image with actual width of 500, the sprite container is scaled down to 0.2 by default
             _anchor = new Pixi.Point(this.target.pivot.x / Math.abs(this.target.width / this.target.scale.x), this.target.pivot.y /
                 Math.abs(this.target.height / this.target.scale.y));
         }
         else {
-            // console.log("no-pivot|no-anchor", this.target.pivot);
             _anchor = new Pixi.Point(0.5, 0.5);
         }
         this._anchor = _anchor;
         if (this.parent !== this.target.parent) {
-            // console.log("Different parent - switching transformer location position");
             this.target.parent.addChild(this);
         }
-        // console.log("Anchor - ", _anchor);
         this.update();
         this.visible = true;
     }
@@ -586,7 +531,6 @@ export class Transformer extends Pixi.Container {
     }
     update() {
         if (!this.target) {
-            // console.log("no target, returning...");
             return;
         }
         // copy object translation/transformation
@@ -600,14 +544,12 @@ export class Transformer extends Pixi.Container {
         this.rotation = this.target.rotation;
         let _anchor;
         if (this.target.pivot) {
-            // console.log("target has pivot", this.target.pivot);
             _anchor = new Pixi.Point(this.target.pivot.x / Math.abs(this.target.width / this.scale.x), this.target.pivot.y / Math.abs(this.target.height / this.scale.y));
         }
         else {
             _anchor = this._anchor || new Pixi.Point(0.5, 0.5);
         }
         this._anchor = _anchor;
-        // console.log("Anchor - ", _anchor);
         this.left = -bounds.width * _anchor.x;
         this.top = -bounds.height * _anchor.y;
         this.bottom = bounds.height * (1 - _anchor.y);
@@ -615,7 +557,6 @@ export class Transformer extends Pixi.Container {
         // anchor mark
         this.generateAnchorMark?.(this.anchorMark);
         this.deScale(this.anchorMark);
-        // this.anchorMark!.rotation = -this.rotation;
         const rotationHandlePos = {
             x: (this.left + this.right) / 2,
             y: this.top - 80 / Math.abs(this.scale.y),

package/package.json

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