@quinninc/pixi-transformer 0.0.5 → 0.0.6

package/README.md

@@ -1,61 +1,61 @@
-# 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 (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)

package/dist/FreeTransformTool.d.ts

@@ -0,0 +1,74 @@
+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

@@ -0,0 +1,549 @@
+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/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;
@@ -74,6 +74,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

@@ -37,7 +37,7 @@ export class Transformer extends Pixi.Container {
         this.dragging = false;
         this.onUpdate = () => { };
         const that = this;
-        this.id = id;
+        this._id = id;
         this.debug = debug;
         this.lineColor = lineColor;
         this.handleColor = handleColor;
@@ -654,6 +654,9 @@ export class Transformer extends Pixi.Container {
     get _target() {
         return this.target;
     }
+    get id() {
+        return this._id;
+    }
     cleanup() { }
     convertToLocal(point) {
         if (this.target) {

package/dist/vector.d.ts

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,45 @@
+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);
+}

package/package.json

@@ -1,41 +1,41 @@
-{
-  "name": "@quinninc/pixi-transformer",
-  "private": false,
-  "version": "0.0.5",
-  "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.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"
+  }
+}