@quinninc/pixi-transformer 0.1.3 → 0.1.6

package/dist/Transformer.d.ts

@@ -21,6 +21,7 @@ export declare class Transformer extends Pixi.Container {
     private updateCallbacks;
     private handleOpacity;
     private controlsSize;
+    private handleHitAreaScale;
     private controlsDimOpacity;
     private controlsStrokeThickness;
     private lineColor;
@@ -38,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']
@@ -60,11 +62,12 @@ export declare class Transformer extends Pixi.Container {
      *
      * selectTool.unselect();
      */
-    constructor({ id, lineColor, handleColor, controlsSize, debug, generateAnchorMark, snapKeys, pivotKeys, }?: {
+    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[];

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"], } = {}) {
+    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;
@@ -91,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>---------------
@@ -455,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;
     }

package/package.json

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