@quinninc/pixi-transformer 0.0.6 → 0.0.7

package/README.md

@@ -1,61 +1,63 @@
-# Free Transform Tool for PIXI.js
-
-Works with pixi.js v8 and above.
-
-![preview](https://cdn.quinn.live/transformer-image.png)
-
-### ✨ Features
-
-- 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.
-- 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.
-
-## Installation
-
-```bash
-npm install @quinninc/pixi-transformer
-```
-
-## Usage
-
-```tsx
-const root = new Container();
-app.stage.addChild(root);
-
-// create tool and add to stage
-const selectTool = new FreeTransformTool();
-selectTool.label = "transform-tool";
-root.addChild(selectTool);
-
-const obj = new Sprite({
-  texture: Texture.from("lenna"),
-  label: "lenna",
-  eventMode: "static",
-});
-
-root.addChild(obj);
-
-obj.on("pointertap", (ev) => {
-  console.log("select - ", ev.currentTarget.label);
-  selectTool.select(ev.currentTarget);
-});
-```
-
-## API
-
-### `FreeTransformTool` (class)
-
-**Constructor Parameter Object:**
-
-- `lineColor` - border line color. default - `0x66cfff`
-- `handleColor` - (`number`) - handles' fill color. default - `0xffffff`
-- `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)
-
-**returns:** `PIXI.Container` (the select tool)
+# Free Transform Tool for PIXI.js
+
+Works with pixi.js v8 and above.
+
+![preview](https://cdn.quinn.live/transformer-image.png)
+
+### ✨ Features
+
+- Translate - Drag to move anywhere
+- Scale - Scale on X, Y or both axis'
+- Rotate - drag to rotate
+- 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.
+
+## Installation
+
+```bash
+npm install @quinninc/pixi-transformer
+```
+
+## Usage
+
+```tsx
+const root = new Container();
+app.stage.addChild(root);
+
+// create tool and add to stage
+const selectTool = new FreeTransformTool();
+selectTool.label = "transform-tool";
+root.addChild(selectTool);
+
+const obj = new Sprite({
+  texture: Texture.from("lenna"),
+  label: "lenna",
+  eventMode: "static",
+});
+
+root.addChild(obj);
+
+obj.on("pointertap", (ev) => {
+  console.log("select - ", ev.currentTarget.label);
+  selectTool.select(ev.currentTarget);
+});
+```
+
+## API
+
+### `FreeTransformTool` (class)
+
+**Constructor Parameter Object:**
+
+- `lineColor` - border line color. default - `0x66cfff`
+- `handleColor` - (`number`) - handles' fill color. default - `0xffffff`
+- `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

@@ -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;

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,6 +39,8 @@ 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;
@@ -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;

package/package.json

@@ -1,41 +1,41 @@
-{
-  "name": "@quinninc/pixi-transformer",
-  "private": false,
-  "version": "0.0.6",
-  "repository": {
-    "url": "https://github.com/Quinn-Care-Private-Limited/pixi-transformer"
-  },
-  "type": "module",
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "files": [
-    "dist",
-    "package.json",
-    "README.md"
-  ],
-  "keywords": [
-    "pixi.js",
-    "transformer",
-    "pixi.js v8"
-  ],
-  "author": {
-    "name": "Rohit Kaushal",
-    "url": "https://github.com/RohitKaushal7"
-  },
-  "license": "MIT",
-  "scripts": {
-    "dev": "tsc -w",
-    "build": "tsc",
-    "deploy": "npm run build && npm version patch && npm publish --access public"
-  },
-  "devDependencies": {
-    "typescript": "^5.2.2",
-    "vite": "^5.3.1",
-    "pixi.js": "^8.2.1"
-  },
-  "dependencies": {},
-  "peerDependencies": {
-    "pixi.js": "^8.2.1"
-  }
-}
+{
+  "name": "@quinninc/pixi-transformer",
+  "private": false,
+  "version": "0.0.7",
+  "repository": {
+    "url": "https://github.com/Quinn-Care-Private-Limited/pixi-transformer"
+  },
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "package.json",
+    "README.md"
+  ],
+  "keywords": [
+    "pixi.js",
+    "transformer",
+    "pixi.js v8"
+  ],
+  "author": {
+    "name": "Rohit Kaushal",
+    "url": "https://github.com/RohitKaushal7"
+  },
+  "license": "MIT",
+  "scripts": {
+    "dev": "tsc -w",
+    "build": "tsc",
+    "deploy": "npm run build && npm version patch && npm publish --access public"
+  },
+  "devDependencies": {
+    "typescript": "^5.2.2",
+    "vite": "^5.3.1",
+    "pixi.js": "^8.2.1"
+  },
+  "dependencies": {},
+  "peerDependencies": {
+    "pixi.js": "^8.2.1"
+  }
+}

package/dist/FreeTransformTool.d.ts

@@ -1,74 +0,0 @@
-import { Container, Graphics, Sprite } from "pixi.js";
-export declare class FreeTransformTool extends Container {
-    private debug;
-    private moveHandle;
-    private rotateHandle;
-    private scaleTHandle;
-    private scaleRHandle;
-    private scaleBHandle;
-    private scaleLHandle;
-    private scaleTLHandle;
-    private scaleTRHandle;
-    private scaleBRHandle;
-    private scaleBLHandle;
-    private border;
-    private anchorMark;
-    private fromPoint;
-    private toPoint;
-    private target;
-    private movedThreshold;
-    private handleOpacity;
-    private controlsSize;
-    private controlsDimOpacity;
-    private controlsStrokeThickness;
-    private lineColor;
-    private handleColor;
-    private left;
-    private top;
-    private bottom;
-    private right;
-    private dragging;
-    /**
-     *
-     * @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.generateAnchorMark - a function to generate your custom anchor mark
-     *
-     * @example
-     * const selectTool = new FreeTransformTool({
-     *   lineColor: 0x66cfff,
-     *   handleColor: 0xffffff,
-     *   controlsSize: 10,
-     *   debug: false,
-     *   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.
-     * });
-     *
-     * root.addChild(selectTool); // by default the tool has a z-index of 1e7 (10000000). you can change it according to your requirement
-     *
-     * selectTool.select(obj);
-     *
-     * selectTool.unselect();
-     */
-    constructor({ lineColor, handleColor, controlsSize, debug, generateAnchorMark, }?: {
-        lineColor?: string | number;
-        handleColor?: string | number;
-        controlsSize?: number;
-        debug?: boolean;
-        generateAnchorMark?: false | ((graphic: Graphics) => void);
-    });
-    private addToolTip;
-    private handleHandleEvents;
-    private createHandle;
-    private createHandleIndicatorTo;
-    private deScale;
-    select(target: Container): void;
-    unselect(): void;
-    update(): void;
-    setTitle(title: string): void;
-    setCursor(cursor: string): void;
-    private generateAnchorMark;
-    get _target(): Container<import("pixi.js").ContainerChild> | Sprite | null;
-    cleanup(): void;
-}

package/dist/FreeTransformTool.js

@@ -1,549 +0,0 @@
-import { Container, Graphics, Point, Rectangle, } from "pixi.js";
-import { calcAngleRadians, calcDistance, getDirection, rotatePoint, } from "./vector";
-export class FreeTransformTool extends Container {
-    /**
-     *
-     * @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.generateAnchorMark - a function to generate your custom anchor mark
-     *
-     * @example
-     * const selectTool = new FreeTransformTool({
-     *   lineColor: 0x66cfff,
-     *   handleColor: 0xffffff,
-     *   controlsSize: 10,
-     *   debug: false,
-     *   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.
-     * });
-     *
-     * root.addChild(selectTool); // by default the tool has a z-index of 1e7 (10000000). you can change it according to your requirement
-     *
-     * selectTool.select(obj);
-     *
-     * selectTool.unselect();
-     */
-    constructor({ lineColor = 0x66cfff, handleColor = 0xffffff, controlsSize = 10, debug = false, generateAnchorMark, } = {}) {
-        super();
-        // target container
-        this.target = null;
-        // position state
-        this.left = 0;
-        this.top = 0;
-        this.bottom = 0;
-        this.right = 0;
-        this.dragging = false;
-        const that = this;
-        this.debug = debug;
-        this.lineColor = lineColor;
-        this.handleColor = handleColor;
-        this.handleOpacity = 1;
-        this.controlsSize = controlsSize;
-        this.controlsDimOpacity = 1;
-        this.controlsStrokeThickness = 2;
-        this.movedThreshold = 10;
-        if (typeof generateAnchorMark == "function")
-            this.generateAnchorMark = generateAnchorMark;
-        else if (generateAnchorMark === false)
-            this.generateAnchorMark = () => { };
-        this.zIndex = 1e7;
-        // Container Properties
-        this.visible = false;
-        // create border
-        this.border = new Graphics({ label: "Border" });
-        this.addChild(this.border);
-        // Anchor mark
-        this.anchorMark = new Graphics({ label: "AnchorMark" });
-        this.anchorMark.alpha = this.handleOpacity;
-        this.addChild(this.anchorMark);
-        // debug indicators
-        this.fromPoint = new Graphics({
-            label: "fromPoint",
-            alpha: this.handleOpacity * 0.75,
-        });
-        this.toPoint = new Graphics({
-            label: "toPoint",
-            alpha: this.handleOpacity * 0.75,
-        });
-        this.addChild(this.fromPoint, this.toPoint);
-        // scaling handles
-        this.scaleTHandle = this.createHandle({
-            name: "scaleTHandle",
-            cursor: "n-resize",
-        });
-        this.scaleRHandle = this.createHandle({
-            name: "scaleRHandle",
-            cursor: "w-resize",
-        });
-        this.scaleBHandle = this.createHandle({
-            name: "scaleBHandle",
-            cursor: "s-resize",
-        });
-        this.scaleLHandle = this.createHandle({
-            name: "scaleLHandle",
-            cursor: "e-resize",
-        });
-        this.scaleTLHandle = this.createHandle({
-            name: "scaleTLHandle",
-            cursor: "nw-resize",
-        });
-        this.scaleTRHandle = this.createHandle({
-            name: "scaleTRHandle",
-            cursor: "ne-resize",
-        });
-        this.scaleBRHandle = this.createHandle({
-            name: "scaleBRHandle",
-            cursor: "se-resize",
-        });
-        this.scaleBLHandle = this.createHandle({
-            name: "scaleBLHandle",
-            cursor: "sw-resize",
-        });
-        // rotation handle
-        this.rotateHandle = this.createHandle({
-            name: "Rotate",
-            cursor: "pointer",
-            shape: "circle",
-        });
-        this.addChild(this.scaleTHandle, this.scaleRHandle, this.scaleBHandle, this.scaleLHandle, this.scaleTLHandle, this.scaleTRHandle, this.scaleBRHandle, this.scaleBLHandle, this.rotateHandle);
-        // ------------<MoveTool>---------------
-        this.moveHandle = new Graphics({ label: "moveHandle" });
-        this.moveHandle.interactive = true;
-        this.addToolTip(this.moveHandle, "Move", "move");
-        this.moveHandle
-            .on("pointerdown", onMoveHandleDown)
-            .on("pointerup", onMoveHandleUp)
-            .on("pointerupoutside", onMoveHandleUp);
-        this.handleHandleEvents(this.moveHandle, this);
-        this.moveHandle.hitArea = new Rectangle(0, 0, this.controlsSize, this.controlsSize);
-        this.addChild(this.moveHandle);
-        function onMoveHandleDown(downEvent) {
-            // console.log("onMoveHandleDown this, that - ", this, that);
-            if (!that.target)
-                return;
-            // data
-            this.targetStartPos = that.target.position.clone();
-            this.dragDistance = 0;
-            this.on("globalpointermove", onMoveHandleMove);
-        }
-        function onMoveHandleMove(moveEvent) {
-            // console.log("onMoveHandleMove this, that - ", this, that);
-            if (!this.dragging || !that.target)
-                return;
-            const moveDelta = new Point(moveEvent.global.x - this.eventStartGlobalPos.x, moveEvent.global.y - this.eventStartGlobalPos.y);
-            that.target.position.x = this.targetStartPos.x + moveDelta.x;
-            that.target.position.y = this.targetStartPos.y + moveDelta.y;
-            this.dragDistance = calcDistance(moveEvent.global, this.eventStartGlobalPos);
-            that.update();
-            moveEvent.stopPropagation();
-        }
-        function onMoveHandleUp(upEvent) {
-            // console.log("onMoveHandleUp this, that - ", this, that);
-            upEvent.stopPropagation();
-            // only deselect if there was very little movement on click
-            // which helps on mobile devices, where it's difficult to
-            // tap without dragging slightly
-            if (!this.dragDistance || this.dragDistance < that.movedThreshold) {
-                that.unselect();
-            }
-            this.off("globalpointermove", onMoveHandleMove);
-        }
-        // ------------</ MoveTool>---------------
-        // ------------<ScaleXYTool>---------------
-        for (const handle of [
-            this.scaleBRHandle,
-            this.scaleTRHandle,
-            this.scaleBLHandle,
-            this.scaleTLHandle,
-        ]) {
-            handle
-                .on("pointerdown", onScaleXYToolDown)
-                .on("pointerupoutside", onScaleXYToolUp)
-                .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 distStart = calcDistance(this.eventStartGlobalPos, that.target.position);
-            const distEnd = calcDistance(moveEvent.global, that.target.position);
-            const direction = getDirection(new Point(that.position.x, that.position.y), new Point(this.eventStartGlobalPos.x, this.eventStartGlobalPos.y), new Point(moveEvent.global.x, moveEvent.global.y));
-            this.rescaleFactor = (distEnd / distStart) * direction;
-            that.target.scale.x = this.targetStartScale.x * this.rescaleFactor;
-            that.target.scale.y = this.targetStartScale.y * this.rescaleFactor;
-            that.update();
-        }
-        function onScaleXYToolUp() {
-            // console.log("onScaleToolUp this, that - ", this, that);
-            if (that.target) {
-                that.target.resolution =
-                    this.targetResolutionStart * this.rescaleFactor;
-            }
-            this.off("globalpointermove", onScaleXYToolMove);
-        }
-        // ------------</ ScaleXYTool>---------------
-        // ------------<ScaleYTool>---------------
-        for (const handle of [this.scaleTHandle, this.scaleBHandle]) {
-            handle
-                .on("pointerdown", onScaleYToolDown)
-                .on("pointerup", onScaleYToolUp)
-                .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 referencePoint = that.target.position.clone();
-            // referencePoint.x = that.target.position.x + that.target.width / 2;
-            const distStart = calcDistance(this.eventStartGlobalPos, referencePoint);
-            const distEnd = calcDistance(moveEvent.global, referencePoint);
-            const direction = getDirection(referencePoint, this.eventStartGlobalPos, moveEvent.global);
-            this.rescaleFactor = (distEnd / distStart) * direction;
-            that.target.scale.y = this.targetStartScale.y * this.rescaleFactor;
-            that.update();
-        }
-        function onScaleYToolUp(upEvent) {
-            // console.log("onVScaleToolUp this, that - ", this, that);
-            this.off("globalpointermove", onScaleYToolMove);
-        }
-        // ------------</ ScaleYTool>---------------
-        // ------------<ScaleXTool>---------------
-        for (const handle of [this.scaleRHandle, this.scaleLHandle]) {
-            handle
-                .on("pointerdown", onScaleXToolDown)
-                .on("pointerup", onScaleXToolUp)
-                .on("pointerupoutside", onScaleXToolUp);
-        }
-        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 referencePoint = that.target.position.clone();
-            // referencePoint.y = that.target.position.y + that.target.height / 2;
-            const distStart = calcDistance(this.eventStartGlobalPos, referencePoint);
-            const distEnd = calcDistance(moveEvent.global, referencePoint);
-            const direction = getDirection(referencePoint, this.eventStartGlobalPos, moveEvent.global);
-            const rescaleFactor = (distEnd / distStart) * direction;
-            that.target.scale.x = this.targetStartScale.x * rescaleFactor;
-            that.update();
-        }
-        function onScaleXToolUp(upEvent) {
-            // console.log("onHScaleToolUp this, that - ", this, that);
-            this.off("globalpointermove", onScaleXToolMove);
-        }
-        // ------------</ ScaleXTool>---------------
-        // ------------<RotateTool>---------------
-        this.rotateHandle
-            .on("pointerdown", onRotateToolDown)
-            .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;
-            // the drag point is relative to the display object x,y position on the stage (it's registration point)
-            const relativeStartPoint = {
-                x: this.eventStartGlobalPos.x - that.target.x,
-                y: this.eventStartGlobalPos.y - that.target.y,
-            };
-            const relativeEndPoint = {
-                x: moveEvent.global.x - that.target.x,
-                y: moveEvent.global.y - that.target.y,
-            };
-            const startAngle = calcAngleRadians(relativeStartPoint.x, relativeStartPoint.y);
-            const endAngle = calcAngleRadians(relativeEndPoint.x, relativeEndPoint.y);
-            const deltaAngle = endAngle - startAngle;
-            let finalRotation = this.targetStartRotation + deltaAngle;
-            if (moveEvent.ctrlKey) {
-                const snapAngle = 45;
-                let finalAngle = (finalRotation * 180) / Math.PI;
-                const proximity = Math.min(Math.abs(finalAngle % snapAngle), snapAngle - Math.abs(finalAngle % snapAngle));
-                const snapProximity = 6;
-                if (proximity < snapProximity) {
-                    finalAngle = Math.round(finalAngle / snapAngle) * snapAngle;
-                    finalRotation = (finalAngle * Math.PI) / 180;
-                }
-            }
-            that.target.rotation = finalRotation;
-            that.update();
-        }
-        function onRotateToolUp(upEvent) {
-            // console.log("onRotateToolUp this, that - ", this, that);
-            this.off("globalpointermove", onRotateToolMove);
-        }
-        // ------------</ RotateTool>---------------
-    }
-    addToolTip(shape, name, cursor) {
-        shape.on("pointerover", () => {
-            if (!this.dragging) {
-                this.setTitle(name);
-                this.setCursor(cursor);
-            }
-        });
-        shape.on("pointerout", () => {
-            if (!this.dragging) {
-                this.setTitle("");
-                this.setCursor("default");
-            }
-        });
-        shape.on("pointerupoutside", () => {
-            this.setTitle("");
-            this.setCursor("default");
-        });
-    }
-    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.eventStartGlobalPos = e.global.clone();
-            handle.targetStartScale = that.target.scale.clone();
-            handle.targetStartRotation = that.target.rotation;
-            handle.on("globalpointermove", onHandleMove);
-            // graphic - fromPoint
-            if (that.debug) {
-                that.createHandleIndicatorTo(that.fromPoint, handle.eventStartGlobalPos.x, handle.eventStartGlobalPos.y);
-            }
-        }
-        function onHandleMove(e) {
-            // console.log("onHandleMove this - ", this);
-            if (that.debug) {
-                that.createHandleIndicatorTo(that.toPoint, e.globalX, e.globalY);
-                that.deScale(that.fromPoint);
-            }
-        }
-        function onHandleUp() {
-            // console.log("onHandleUp this - ", this);
-            that.update();
-            handle.off("globalpointermove", onHandleMove);
-            if (that.debug) {
-                that.fromPoint.clear();
-                that.toPoint.clear();
-            }
-            handle.dragging = false;
-            that.dragging = false;
-        }
-        handle
-            .on("pointerdown", onHandleDown)
-            .on("pointerup", onHandleUp)
-            .on("pointerupoutside", onHandleUp);
-    }
-    createHandle({ cursor, name, shape = "square", }) {
-        const handle = new Graphics();
-        handle.label = name;
-        handle.interactive = true;
-        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);
-        }
-        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);
-        this.handleHandleEvents(handle, this);
-        return handle;
-    }
-    createHandleIndicatorTo(handle, x, y) {
-        x = x - this.position.x;
-        y = y - this.position.y;
-        const p1 = new Point(x, y);
-        const origin = new Point(0, 0);
-        const p = rotatePoint(p1, origin, -this.rotation);
-        x = p.x;
-        y = p.y;
-        const size = this.controlsSize * 1.25;
-        handle
-            .clear()
-            .moveTo(0, 0)
-            .lineTo(x, y)
-            .stroke({ width: 5, color: 0xffffff })
-            .rect(x - size / 2, y - size / 2, size, size)
-            .fill(0xffffff);
-        this.deScale(handle);
-    }
-    deScale(target) {
-        target.scale.set(1 / this.scale.x, 1 / this.scale.y);
-    }
-    // public methods:
-    select(target) {
-        if (!target) {
-            this.unselect();
-            return;
-        }
-        // copy object translation/transformation
-        this.target = target;
-        const bounds = target.getLocalBounds();
-        this.width = bounds.width;
-        this.height = bounds.height;
-        this.scale.x = target.scale.x;
-        this.scale.y = target.scale.y;
-        this.x = target.x;
-        this.y = target.y;
-        this.rotation = target.rotation;
-        let anchor;
-        if (target.anchor) {
-            anchor = target.anchor;
-        }
-        else if (target.pivot) {
-            anchor = new Point(target.pivot.x / target.width, target.pivot.y / target.height);
-        }
-        else {
-            anchor = new Point(0.5, 0.5);
-        }
-        target.anchor = anchor;
-        this.left = -bounds.width * anchor.x;
-        this.top = -bounds.height * anchor.y;
-        this.bottom = bounds.height * (1 - anchor.y);
-        this.right = bounds.width * (1 - anchor.x);
-        // 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),
-        };
-        // borders
-        this.border
-            .clear()
-            .moveTo(this.left, this.top)
-            .lineTo(this.right, this.top)
-            .moveTo(this.left, this.bottom)
-            .lineTo(this.right, this.bottom)
-            .stroke({
-            width: this.controlsStrokeThickness / this.scale.y,
-            color: this.lineColor,
-        })
-            .moveTo(this.left, this.top)
-            .lineTo(this.left, this.bottom)
-            .moveTo(this.right, this.top)
-            .lineTo(this.right, this.bottom)
-            .stroke({
-            width: this.controlsStrokeThickness / this.scale.x,
-            color: this.lineColor,
-        })
-            .moveTo(rotationHandlePos.x, this.top)
-            .lineTo(rotationHandlePos.x, rotationHandlePos.y)
-            .stroke({
-            width: this.controlsStrokeThickness / this.scale.x,
-            color: this.lineColor,
-        });
-        // draw move hit area
-        this.moveHandle.hitArea = new Rectangle(this.left, this.top, bounds.width, bounds.height);
-        this.scaleTLHandle.position.set(this.left, this.top);
-        this.scaleTRHandle.position.set(this.right, this.top);
-        this.scaleBRHandle.position.set(this.right, this.bottom);
-        this.scaleBLHandle.position.set(this.left, this.bottom);
-        this.scaleTHandle.position.set(this.left + bounds.width / 2, this.top);
-        this.scaleRHandle.position.set(this.right, this.top + bounds.height / 2);
-        this.scaleBHandle.position.set(this.left + bounds.width / 2, this.bottom);
-        this.scaleLHandle.position.set(this.left, this.top + bounds.height / 2);
-        this.rotateHandle.position.set(rotationHandlePos.x, rotationHandlePos.y);
-        const allHandles = [
-            this.scaleTLHandle,
-            this.scaleTRHandle,
-            this.scaleBRHandle,
-            this.scaleBLHandle,
-            this.scaleTHandle,
-            this.scaleRHandle,
-            this.scaleBHandle,
-            this.scaleLHandle,
-            this.rotateHandle,
-        ];
-        // descale all handles
-        allHandles.forEach((handle) => {
-            this.deScale(handle);
-        });
-        this.visible = true;
-        // console.log("select this - ", this);
-    }
-    unselect() {
-        this.target = null;
-        this.visible = false;
-    }
-    update() {
-        if (this.target) {
-            this.select(this.target);
-        }
-    }
-    setTitle(title) {
-        title = title || "";
-        this.accessibleTitle = title;
-    }
-    setCursor(cursor) {
-        const cursors = [
-            "e-resize",
-            "se-resize",
-            "s-resize",
-            "sw-resize",
-            "w-resize",
-            "nw-resize",
-            "n-resize",
-            "ne-resize",
-        ];
-        const index = cursors.indexOf(cursor);
-        if (index >= 0) {
-            const angle = 45;
-            let rotation = this.target.angle;
-            rotation = rotation + angle / 2;
-            let newIndex = index + Math.floor(rotation / angle);
-            newIndex = newIndex % cursors.length;
-            document.body.style.cursor = cursors[newIndex];
-        }
-        else {
-            document.body.style.cursor = cursor;
-        }
-    }
-    generateAnchorMark(graphic) {
-        const anchorInnerRadius = this.controlsSize * 0.125;
-        const anchorOuterRadius = this.controlsSize * 0.625;
-        graphic
-            .clear()
-            .circle(0, 0, this.controlsSize * 0.375)
-            .moveTo(0, anchorInnerRadius)
-            .lineTo(0, anchorOuterRadius)
-            .moveTo(-anchorInnerRadius, 0)
-            .lineTo(-anchorOuterRadius, 0)
-            .moveTo(0, -anchorInnerRadius)
-            .lineTo(0, -anchorOuterRadius)
-            .moveTo(anchorInnerRadius, 0)
-            .lineTo(anchorOuterRadius, 0)
-            .fill(0xff0000)
-            .stroke(0x111111);
-    }
-    get _target() {
-        return this.target;
-    }
-    cleanup() { }
-}

package/dist/vector.d.ts

@@ -1,23 +0,0 @@
-import { Point } from "pixi.js";
-/**
- *
- * @param origin source from where distance will be calculated
- * @param p1 point 1 - positive direction is towards this point
- * @param p2 point 2
- * @returns 1 for same direction, -1 if the angle is more than 90 degrees
- */
-export declare function getDirection(origin: Point, p1: Point, p2: Point): -1 | 1;
-/**
- *
- * @param point point to rotate
- * @param origin origin point
- * @param rotation angle in radians
- * @returns rotated point
- */
-export declare function rotatePoint(point: Point, origin: Point, rotation: number): Point;
-/**
- * Calculate the euclidean distance between two points.
- */
-export declare function calcDistance(p1: Point, p2: Point): number;
-export declare function calcAngleDegrees(x: number, y: number): number;
-export declare function calcAngleRadians(x: number, y: number): number;

package/dist/vector.js

@@ -1,45 +0,0 @@
-import { Point } from "pixi.js";
-/**
- *
- * @param origin source from where distance will be calculated
- * @param p1 point 1 - positive direction is towards this point
- * @param p2 point 2
- * @returns 1 for same direction, -1 if the angle is more than 90 degrees
- */
-export function getDirection(origin, p1, p2) {
-    const v1 = new Point(p1.x - origin.x, p1.y - origin.y);
-    const v2 = new Point(p2.x - origin.x, p2.y - origin.y);
-    const dot = v1.x * v2.x + v1.y * v2.y;
-    return dot >= 0 ? 1 : -1;
-}
-/**
- *
- * @param point point to rotate
- * @param origin origin point
- * @param rotation angle in radians
- * @returns rotated point
- */
-export function rotatePoint(point, origin, rotation) {
-    // Translate point to origin
-    const translatedX = point.x - origin.x;
-    const translatedY = point.y - origin.y;
-    // Apply rotation
-    const rotatedX = translatedX * Math.cos(rotation) - translatedY * Math.sin(rotation);
-    const rotatedY = translatedX * Math.sin(rotation) + translatedY * Math.cos(rotation);
-    // Translate point back
-    const finalX = rotatedX + origin.x;
-    const finalY = rotatedY + origin.y;
-    return new Point(finalX, finalY);
-}
-/**
- * Calculate the euclidean distance between two points.
- */
-export function calcDistance(p1, p2) {
-    return Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2));
-}
-export function calcAngleDegrees(x, y) {
-    return (calcAngleRadians(x, y) * 180) / Math.PI;
-}
-export function calcAngleRadians(x, y) {
-    return Math.atan2(y, x);
-}