@quinninc/pixi-transformer 0.1.2 → 0.1.6

package/dist/Transformer.d.ts

@@ -19,9 +19,9 @@ export declare class Transformer extends Pixi.Container {
     private target;
     private movedThreshold;
     private updateCallbacks;
-    private onMoveEndCallback?;
     private handleOpacity;
     private controlsSize;
+    private handleHitAreaScale;
     private controlsDimOpacity;
     private controlsStrokeThickness;
     private lineColor;
@@ -39,6 +39,7 @@ export declare class Transformer extends Pixi.Container {
      * @param p.lineColor - border line color
      * @param p.handleColor - handles' fill color
      * @param p.controlsSize - handles' size in pixels
+     * @param p.handleHitAreaScale - scale factor for handle hit area (e.g. 2 = double size)
      * @param p.debug - show scaling distance debug lines
      * @param p.snapKeys - key to hold to enable snapping rotation to 45 degrees // default ['ShiftLeft']
      * @param p.pivotKeys - key to hold to move the pivot point of transformation // default ['AltLeft']
@@ -61,16 +62,16 @@ export declare class Transformer extends Pixi.Container {
      *
      * selectTool.unselect();
      */
-    constructor({ id, lineColor, handleColor, controlsSize, debug, generateAnchorMark, snapKeys, pivotKeys, onMoveEnd, }?: {
+    constructor({ id, lineColor, handleColor, controlsSize, handleHitAreaScale, debug, generateAnchorMark, snapKeys, pivotKeys, }?: {
         id?: string;
         lineColor?: string | number;
         handleColor?: string | number;
         controlsSize?: number;
+        handleHitAreaScale?: number;
         debug?: boolean;
         generateAnchorMark?: false | ((graphic: Pixi.Graphics) => void);
         snapKeys?: string[];
         pivotKeys?: string[];
-        onMoveEnd?: () => void;
     });
     private addToolTip;
     private handleHandleEvents;

package/dist/Transformer.js

@@ -6,6 +6,7 @@ export class Transformer extends Pixi.Container {
      * @param p.lineColor - border line color
      * @param p.handleColor - handles' fill color
      * @param p.controlsSize - handles' size in pixels
+     * @param p.handleHitAreaScale - scale factor for handle hit area (e.g. 2 = double size)
      * @param p.debug - show scaling distance debug lines
      * @param p.snapKeys - key to hold to enable snapping rotation to 45 degrees // default ['ShiftLeft']
      * @param p.pivotKeys - key to hold to move the pivot point of transformation // default ['AltLeft']
@@ -28,7 +29,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, handleHitAreaScale = 2, debug = false, generateAnchorMark, snapKeys = ["ShiftLeft"], pivotKeys = ["AltLeft"], } = {}) {
         super();
         // target Pixi.Container
         this.target = null;
@@ -58,6 +59,7 @@ export class Transformer extends Pixi.Container {
         this.handleColor = handleColor;
         this.handleOpacity = 1;
         this.controlsSize = controlsSize;
+        this.handleHitAreaScale = handleHitAreaScale;
         this.controlsDimOpacity = 1;
         this.controlsStrokeThickness = 2;
         this.movedThreshold = 10;
@@ -65,7 +67,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;
@@ -92,44 +93,65 @@ export class Transformer extends Pixi.Container {
             alpha: this.handleOpacity * 0.75,
         });
         this.addChild(this.fromPoint, this.toPoint);
+        const edgeLong = Math.round(this.controlsSize * 1.6);
+        const edgeShort = Math.round(this.controlsSize * 0.7);
+        const edgeRadius = Math.max(6, Math.round(edgeShort / 2));
         // scaling handles
         this.scaleTHandle = this.createHandle({
             name: "scaleTHandle",
             cursor: "n-resize",
+            width: edgeLong,
+            height: edgeShort,
+            radius: edgeRadius,
         });
         this.scaleRHandle = this.createHandle({
             name: "scaleRHandle",
             cursor: "w-resize",
+            width: edgeShort,
+            height: edgeLong,
+            radius: edgeRadius,
         });
         this.scaleBHandle = this.createHandle({
             name: "scaleBHandle",
             cursor: "s-resize",
+            width: edgeLong,
+            height: edgeShort,
+            radius: edgeRadius,
         });
         this.scaleLHandle = this.createHandle({
             name: "scaleLHandle",
             cursor: "e-resize",
+            width: edgeShort,
+            height: edgeLong,
+            radius: edgeRadius,
         });
         this.scaleTLHandle = this.createHandle({
             name: "scaleTLHandle",
             cursor: "nw-resize",
+            shape: "circle",
         });
         this.scaleTRHandle = this.createHandle({
             name: "scaleTRHandle",
             cursor: "ne-resize",
+            shape: "circle",
         });
         this.scaleBRHandle = this.createHandle({
             name: "scaleBRHandle",
             cursor: "se-resize",
+            shape: "circle",
         });
         this.scaleBLHandle = this.createHandle({
             name: "scaleBLHandle",
             cursor: "sw-resize",
+            shape: "circle",
         });
         // rotation handle
         this.rotateHandle = this.createHandle({
             name: "Rotate",
             cursor: "pointer",
             shape: "circle",
+            width: Math.round(this.controlsSize * 0.9),
+            height: Math.round(this.controlsSize * 0.9),
         });
         this.addChild(this.scaleTHandle, this.scaleRHandle, this.scaleBHandle, this.scaleLHandle, this.scaleTLHandle, this.scaleTRHandle, this.scaleBRHandle, this.scaleBLHandle, this.rotateHandle);
         // ------------<MoveTool>---------------
@@ -144,24 +166,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 +186,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 +202,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 +219,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 +235,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 +247,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 +281,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 +299,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 +314,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 +331,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 +343,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 +360,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 +369,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 +404,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 +427,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 +440,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 +447,6 @@ export class Transformer extends Pixi.Container {
             }
         }
         function onHandleUp() {
-            // console.log("onHandleUp this - ", this);
             that.update();
             handle.off("globalpointermove", onHandleMove);
             if (that.debug) {
@@ -504,21 +478,34 @@ export class Transformer extends Pixi.Container {
             that[property] = false;
         });
     }
-    createHandle({ cursor, name, shape = "square", }) {
+    createHandle({ cursor, name, shape = "square", width, height, radius, }) {
+        const w = width ?? this.controlsSize;
+        const h = height ?? this.controlsSize;
+        const r = radius ?? Math.max(4, Math.round(Math.min(w, h) * 0.22));
         const handle = new Pixi.Graphics();
         handle.label = this.id;
         handle.eventMode = "dynamic";
         handle.alpha = this.handleOpacity;
         this.addToolTip(handle, name, cursor);
         if (shape === "circle") {
-            handle.ellipse(this.controlsSize / 2, this.controlsSize / 2, this.controlsSize / 2, this.controlsSize / 2);
+            const radius = Math.min(w, h) / 2;
+            handle.ellipse(w / 2, h / 2, radius, radius);
+        }
+        else {
+            handle.roundRect(0, 0, w, h, r);
         }
-        else
-            handle.rect(0, 0, this.controlsSize, this.controlsSize);
         handle
             .stroke({ width: this.controlsStrokeThickness, color: this.lineColor })
             .fill(this.handleColor);
-        handle.pivot.set(this.controlsSize / 2, this.controlsSize / 2);
+        handle.pivot.set(w / 2, h / 2);
+        const hitW = w * this.handleHitAreaScale;
+        const hitH = h * this.handleHitAreaScale;
+        if (shape === "circle") {
+            handle.hitArea = new Pixi.Circle(0, 0, Math.max(hitW, hitH) / 2);
+        }
+        else {
+            handle.hitArea = new Pixi.Rectangle(-hitW / 2, -hitH / 2, hitW, hitH);
+        }
         this.handleHandleEvents(handle, this);
         return handle;
     }
@@ -552,25 +539,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 +567,6 @@ export class Transformer extends Pixi.Container {
     }
     update() {
         if (!this.target) {
-            // console.log("no target, returning...");
             return;
         }
         // copy object translation/transformation
@@ -600,14 +580,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 +593,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.6",
   "repository": {
     "url": "https://github.com/Quinn-Care-Private-Limited/pixi-transformer"
   },