@quinninc/pixi-transformer 0.0.5 → 0.0.7

package/README.md

@@ -9,8 +9,8 @@ Works with pixi.js v8 and above.
 - Translate - Drag to move anywhere
 - Scale - Scale on X, Y or both axis'
 - Rotate - drag to rotate
-- Anchor point - update anchor point of transforms (Ctrl + Click)
-- Snapping - hold ctrl to snap rotation at 45degrees, snap anchor point to edges and corners.
+- Anchor point - update anchor point of transforms (AltLeft + Click or Drag)
+- Snapping - snap rotation at 45degrees, snap anchor point to edges and corners (hold ShiftLeft).
 - Theming - custom border color, control size and color, and anchor point graphic
 
 > Note - all transformations are applied wrt the pivot point, update pivot point to achieve the desired result.
@@ -57,5 +57,7 @@ obj.on("pointertap", (ev) => {
 - `controlsSize` - (`number`) - handles' size in pixels. default - `10`
 - `debug` - (`boolean`) - show scaling distance debug lines. default - `false`
 - `generateAnchorMark` - a function to generate your custom anchor mark. default - `undefined` (uses default anchor mark)
+- `pivotKeys` - (`string[]`) - keys to hold to change pivot point. default - `['AltLeft']` - [List of KeyCodes](https://www.freecodecamp.org/news/javascript-keycode-list-keypress-event-key-codes#a-full-list-of-key-event-values)
+- `snapKeys` - (`string[]`) - keys to hold to snap to grid. default - `['ShiftLeft']`
 
 **returns:** `PIXI.Container` (the select tool)

package/dist/Transformer.d.ts

@@ -1,7 +1,7 @@
 import { Pixi } from "./pixi";
 export declare class Transformer extends Pixi.Container {
     private debug;
-    private id;
+    private _id;
     private moveHandle;
     private rotateHandle;
     private scaleTHandle;
@@ -30,12 +30,16 @@ export declare class Transformer extends Pixi.Container {
     private right;
     private _anchor;
     private dragging;
+    private snapKey;
+    private pivotKey;
     /**
      *
      * @param p.lineColor - border line color
      * @param p.handleColor - handles' fill color
      * @param p.controlsSize - handles' size in pixels
      * @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']
      * @param p.generateAnchorMark - a function to generate your custom anchor mark
      *
      * @example
@@ -44,6 +48,8 @@ export declare class Transformer extends Pixi.Container {
      *   handleColor: 0xffffff,
      *   controlsSize: 10,
      *   debug: false,
+     *   snapKeys: ['ShiftLeft'],
+     *   pivotKeys: ['AltLeft'],
      *   generateAnchorMark: (g) => g.clear().circle(0,0,10).fill(0xff0000); // please use clear() to clear the geometry first every time. leave undefined for default anchor mark. set false to disable.
      * });
      *
@@ -53,16 +59,19 @@ export declare class Transformer extends Pixi.Container {
      *
      * selectTool.unselect();
      */
-    constructor({ id, lineColor, handleColor, controlsSize, debug, generateAnchorMark, }?: {
+    constructor({ id, lineColor, handleColor, controlsSize, debug, generateAnchorMark, snapKeys, pivotKeys, }?: {
         id?: string;
         lineColor?: string | number;
         handleColor?: string | number;
         controlsSize?: number;
         debug?: boolean;
         generateAnchorMark?: false | ((graphic: Pixi.Graphics) => void);
+        snapKeys?: string[];
+        pivotKeys?: string[];
     });
     private addToolTip;
     private handleHandleEvents;
+    private handleKeyPresses;
     private createHandle;
     private createHandleIndicatorTo;
     private deScale;
@@ -74,6 +83,7 @@ export declare class Transformer extends Pixi.Container {
     setCursor(cursor: string): void;
     private generateAnchorMark;
     get _target(): Pixi.Container<Pixi.ContainerChild> | Pixi.Sprite | null;
+    get id(): string;
     cleanup(): void;
     private convertToLocal;
 }

package/dist/Transformer.js

@@ -7,6 +7,8 @@ export class Transformer extends Pixi.Container {
      * @param p.handleColor - handles' fill color
      * @param p.controlsSize - handles' size in pixels
      * @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']
      * @param p.generateAnchorMark - a function to generate your custom anchor mark
      *
      * @example
@@ -15,6 +17,8 @@ export class Transformer extends Pixi.Container {
      *   handleColor: 0xffffff,
      *   controlsSize: 10,
      *   debug: false,
+     *   snapKeys: ['ShiftLeft'],
+     *   pivotKeys: ['AltLeft'],
      *   generateAnchorMark: (g) => g.clear().circle(0,0,10).fill(0xff0000); // please use clear() to clear the geometry first every time. leave undefined for default anchor mark. set false to disable.
      * });
      *
@@ -24,7 +28,7 @@ export class Transformer extends Pixi.Container {
      *
      * selectTool.unselect();
      */
-    constructor({ id = "transformer", lineColor = 0x66cfff, handleColor = 0xffffff, controlsSize = 10, debug = false, generateAnchorMark, } = {}) {
+    constructor({ id = "transformer", lineColor = 0x66cfff, handleColor = 0xffffff, controlsSize = 10, debug = false, generateAnchorMark, snapKeys = ["ShiftLeft"], pivotKeys = ["AltLeft"], } = {}) {
         super();
         // target Pixi.Container
         this.target = null;
@@ -35,9 +39,11 @@ export class Transformer extends Pixi.Container {
         this.right = 0;
         this._anchor = new Pixi.Point(0, 0);
         this.dragging = false;
+        this.snapKey = false;
+        this.pivotKey = false;
         this.onUpdate = () => { };
         const that = this;
-        this.id = id;
+        this._id = id;
         this.debug = debug;
         this.lineColor = lineColor;
         this.handleColor = handleColor;
@@ -53,6 +59,9 @@ export class Transformer extends Pixi.Container {
         this.zIndex = 1e7;
         // Pixi.Container Properties
         this.visible = false;
+        // keyPress states
+        this.handleKeyPresses("snapKey", snapKeys, that);
+        this.handleKeyPresses("pivotKey", pivotKeys, that);
         // create border
         this.border = new Pixi.Graphics({ label: "Border" });
         this.addChild(this.border);
@@ -126,7 +135,7 @@ export class Transformer extends Pixi.Container {
         this.addChild(this.moveHandle);
         function changeAnchorPoint(ev) {
             // console.log("TAPP this, that - ", this, that);
-            if (!ev.ctrlKey && !ev.metaKey)
+            if (!that.pivotKey)
                 return;
             if (!that.target)
                 return;
@@ -171,7 +180,7 @@ export class Transformer extends Pixi.Container {
             // console.log("onMoveHandleDown this, that - ", this, that);
             if (!that.target)
                 return;
-            if (downEvent.ctrlKey || downEvent.metaKey) {
+            if (that.pivotKey) {
                 this.draggingPivot = true;
             }
             // data
@@ -354,7 +363,7 @@ export class Transformer extends Pixi.Container {
             const endAngle = calcAngleRadians(relativeEndPoint.x, relativeEndPoint.y);
             const deltaAngle = endAngle - startAngle;
             let finalRotation = this.targetStartRotation + deltaAngle;
-            if (moveEvent.ctrlKey || moveEvent.metaKey) {
+            if (that.snapKey) {
                 const snapAngle = 45;
                 let finalAngle = (finalRotation * 180) / Math.PI;
                 const proximity = Math.min(Math.abs(finalAngle % snapAngle), snapAngle - Math.abs(finalAngle % snapAngle));
@@ -430,6 +439,17 @@ export class Transformer extends Pixi.Container {
             .on("pointerup", onHandleUp)
             .on("pointerupoutside", onHandleUp);
     }
+    handleKeyPresses(property, keyCodes, that) {
+        typeof window > "u" ||
+            (window.addEventListener("keydown", (e) => {
+                keyCodes.includes(e.code) && (that[property] = true);
+                keyCodes.includes(e.key) && (that[property] = true);
+            }),
+                window.addEventListener("keyup", (e) => {
+                    keyCodes.includes(e.code) && (that[property] = false);
+                    keyCodes.includes(e.key) && (that[property] = false);
+                }));
+    }
     createHandle({ cursor, name, shape = "square", }) {
         const handle = new Pixi.Graphics();
         handle.label = this.id;
@@ -654,6 +674,9 @@ export class Transformer extends Pixi.Container {
     get _target() {
         return this.target;
     }
+    get id() {
+        return this._id;
+    }
     cleanup() { }
     convertToLocal(point) {
         if (this.target) {

package/package.json

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