@quinninc/pixi-transformer 0.1.6 → 0.1.8

package/dist/Transformer.d.ts

@@ -22,6 +22,7 @@ export declare class Transformer extends Pixi.Container {
     private handleOpacity;
     private controlsSize;
     private handleHitAreaScale;
+    private handleHitRadius;
     private controlsDimOpacity;
     private controlsStrokeThickness;
     private lineColor;
@@ -40,6 +41,7 @@ export declare class Transformer extends Pixi.Container {
      * @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.handleHitRadius - hit area radius in screen pixels around each handle
      * @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']
@@ -62,12 +64,13 @@ export declare class Transformer extends Pixi.Container {
      *
      * selectTool.unselect();
      */
-    constructor({ id, lineColor, handleColor, controlsSize, handleHitAreaScale, debug, generateAnchorMark, snapKeys, pivotKeys, }?: {
+    constructor({ id, lineColor, handleColor, controlsSize, handleHitAreaScale, handleHitRadius, debug, generateAnchorMark, snapKeys, pivotKeys, }?: {
         id?: string;
         lineColor?: string | number;
         handleColor?: string | number;
         controlsSize?: number;
         handleHitAreaScale?: number;
+        handleHitRadius?: number;
         debug?: boolean;
         generateAnchorMark?: false | ((graphic: Pixi.Graphics) => void);
         snapKeys?: string[];
@@ -79,6 +82,7 @@ export declare class Transformer extends Pixi.Container {
     private createHandle;
     private createHandleIndicatorTo;
     private deScale;
+    private updateHandleHitArea;
     select(target: Pixi.Container): void;
     unselect(): void;
     onUpdate: (cb: (t?: Transformer) => void) => () => void;

package/dist/Transformer.js

@@ -7,6 +7,7 @@ export class Transformer extends Pixi.Container {
      * @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.handleHitRadius - hit area radius in screen pixels around each handle
      * @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']
@@ -29,7 +30,7 @@ export class Transformer extends Pixi.Container {
      *
      * selectTool.unselect();
      */
-    constructor({ id = "transformer", lineColor = 0x66cfff, handleColor = 0xffffff, controlsSize = 10, handleHitAreaScale = 2, debug = false, generateAnchorMark, snapKeys = ["ShiftLeft"], pivotKeys = ["AltLeft"], } = {}) {
+    constructor({ id = "transformer", lineColor = 0x66cfff, handleColor = 0xffffff, controlsSize = 10, handleHitAreaScale = 2, handleHitRadius = 50, debug = false, generateAnchorMark, snapKeys = ["ShiftLeft"], pivotKeys = ["AltLeft"], } = {}) {
         super();
         // target Pixi.Container
         this.target = null;
@@ -60,6 +61,7 @@ export class Transformer extends Pixi.Container {
         this.handleOpacity = 1;
         this.controlsSize = controlsSize;
         this.handleHitAreaScale = handleHitAreaScale;
+        this.handleHitRadius = handleHitRadius;
         this.controlsDimOpacity = 1;
         this.controlsStrokeThickness = 2;
         this.movedThreshold = 10;
@@ -93,9 +95,10 @@ 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 edgeLong = Math.round(this.controlsSize * 1.8);
+        const edgeShort = Math.round(this.controlsSize * 0.5);
         const edgeRadius = Math.max(6, Math.round(edgeShort / 2));
+        const cornerSize = Math.round(this.controlsSize * 1.4);
         // scaling handles
         this.scaleTHandle = this.createHandle({
             name: "scaleTHandle",
@@ -129,29 +132,47 @@ export class Transformer extends Pixi.Container {
             name: "scaleTLHandle",
             cursor: "nw-resize",
             shape: "circle",
+            width: cornerSize,
+            height: cornerSize,
+            fillColor: this.lineColor,
+            strokeColor: 0xffffff,
         });
         this.scaleTRHandle = this.createHandle({
             name: "scaleTRHandle",
             cursor: "ne-resize",
             shape: "circle",
+            width: cornerSize,
+            height: cornerSize,
+            fillColor: this.lineColor,
+            strokeColor: 0xffffff,
         });
         this.scaleBRHandle = this.createHandle({
             name: "scaleBRHandle",
             cursor: "se-resize",
             shape: "circle",
+            width: cornerSize,
+            height: cornerSize,
+            fillColor: this.lineColor,
+            strokeColor: 0xffffff,
         });
         this.scaleBLHandle = this.createHandle({
             name: "scaleBLHandle",
             cursor: "sw-resize",
             shape: "circle",
+            width: cornerSize,
+            height: cornerSize,
+            fillColor: this.lineColor,
+            strokeColor: 0xffffff,
         });
         // 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),
+            width: Math.round(this.controlsSize * 0.8),
+            height: Math.round(this.controlsSize * 0.8),
+            fillColor: 0xffffff,
+            strokeColor: this.lineColor,
         });
         this.addChild(this.scaleTHandle, this.scaleRHandle, this.scaleBHandle, this.scaleLHandle, this.scaleTLHandle, this.scaleTRHandle, this.scaleBRHandle, this.scaleBLHandle, this.rotateHandle);
         // ------------<MoveTool>---------------
@@ -165,6 +186,7 @@ export class Transformer extends Pixi.Container {
         this.handleHandleEvents(this.moveHandle, this);
         this.moveHandle.hitArea = new Pixi.Rectangle(0, 0, this.controlsSize, this.controlsSize);
         this.addChild(this.moveHandle);
+        this.setChildIndex(this.moveHandle, 0);
         function changeAnchorPoint(ev) {
             if (!that.pivotKey)
                 return;
@@ -478,7 +500,7 @@ export class Transformer extends Pixi.Container {
             that[property] = false;
         });
     }
-    createHandle({ cursor, name, shape = "square", width, height, radius, }) {
+    createHandle({ cursor, name, shape = "square", width, height, radius, fillColor, strokeColor, }) {
         const w = width ?? this.controlsSize;
         const h = height ?? this.controlsSize;
         const r = radius ?? Math.max(4, Math.round(Math.min(w, h) * 0.22));
@@ -495,17 +517,14 @@ export class Transformer extends Pixi.Container {
             handle.roundRect(0, 0, w, h, r);
         }
         handle
-            .stroke({ width: this.controlsStrokeThickness, color: this.lineColor })
-            .fill(this.handleColor);
+            .stroke({
+            width: this.controlsStrokeThickness,
+            color: strokeColor ?? this.lineColor,
+        })
+            .fill(fillColor ?? this.handleColor);
         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);
-        }
+        handle._handleSize = { w, h, shape };
+        this.updateHandleHitArea(handle);
         this.handleHandleEvents(handle, this);
         return handle;
     }
@@ -530,6 +549,13 @@ export class Transformer extends Pixi.Container {
     deScale(target) {
         target.scale.set(1 / this.scale.x, 1 / this.scale.y);
     }
+    updateHandleHitArea(handle) {
+        const meta = handle._handleSize;
+        if (!meta)
+            return;
+        const radius = this.handleHitRadius * Math.max(this.scale.x, this.scale.y);
+        handle.hitArea = new Pixi.Circle(0, 0, radius);
+    }
     // public methods:
     select(target) {
         if (!target) {
@@ -661,6 +687,7 @@ export class Transformer extends Pixi.Container {
         // descale all handles
         allHandles.forEach((handle) => {
             this.deScale(handle);
+            this.updateHandleHitArea(handle);
         });
         for (const cb of this.updateCallbacks) {
             cb(this);

package/package.json

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