@quinninc/pixi-transformer 0.0.2 → 0.0.3

package/README.md

@@ -1,65 +1,61 @@
-# Free Transform Tool for PIXI.js
-
-Works with pixi.js v8 and above.
-
-![preview](example/public/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
-- 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
-
-<!-- INSERT GENERATED DOCS START -->
-
-### `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)
-
-<!-- INSERT GENERATED DOCS END -->
+# 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

@@ -1,6 +1,7 @@
-import { Container, Graphics, Sprite } from "pixi.js";
-export declare class FreeTransformTool extends Container {
+import { Pixi } from "./pixi";
+export declare class Transformer extends Pixi.Container {
     private debug;
+    private id;
     private moveHandle;
     private rotateHandle;
     private scaleTHandle;
@@ -27,6 +28,7 @@ export declare class FreeTransformTool extends Container {
     private top;
     private bottom;
     private right;
+    private _anchor;
     private dragging;
     /**
      *
@@ -51,24 +53,26 @@ export declare class FreeTransformTool extends Container {
      *
      * selectTool.unselect();
      */
-    constructor({ lineColor, handleColor, controlsSize, debug, generateAnchorMark, }?: {
+    constructor({ id, lineColor, handleColor, controlsSize, debug, generateAnchorMark, }?: {
+        id?: string;
         lineColor?: string | number;
         handleColor?: string | number;
         controlsSize?: number;
         debug?: boolean;
-        generateAnchorMark?: false | ((graphic: Graphics) => void);
+        generateAnchorMark?: false | ((graphic: Pixi.Graphics) => void);
     });
     private addToolTip;
     private handleHandleEvents;
     private createHandle;
     private createHandleIndicatorTo;
     private deScale;
-    select(target: Container): void;
+    select(target: Pixi.Container): void;
+    onUpdate: () => void;
     unselect(): void;
     update(): void;
     setTitle(title: string): void;
     setCursor(cursor: string): void;
     private generateAnchorMark;
-    get _target(): Container<import("pixi.js").ContainerChild> | Sprite | null;
+    get _target(): Pixi.Container<Pixi.ContainerChild> | Pixi.Sprite | null;
     cleanup(): void;
 }

package/dist/FreeTransformTool.js

@@ -1,6 +1,6 @@
-import { Container, Graphics, Point, Rectangle, } from "pixi.js";
-import { calcAngleRadians, calcDistance, getDirection, rotatePoint, } from "./vector";
-export class FreeTransformTool extends Container {
+import { Pixi } from "./pixi";
+import { calcAngleRadians, calcDistance, getDirection, rotatePoint, snapToEdgesAndCorners, } from "./vector";
+export class Transformer extends Pixi.Container {
     /**
      *
      * @param p.lineColor - border line color
@@ -24,17 +24,20 @@ export class FreeTransformTool extends Container {
      *
      * selectTool.unselect();
      */
-    constructor({ lineColor = 0x66cfff, handleColor = 0xffffff, controlsSize = 10, debug = false, generateAnchorMark, } = {}) {
+    constructor({ id = "transformer", lineColor = 0x66cfff, handleColor = 0xffffff, controlsSize = 10, debug = false, generateAnchorMark, } = {}) {
         super();
-        // target container
+        // target Pixi.Container
         this.target = null;
         // position state
         this.left = 0;
         this.top = 0;
         this.bottom = 0;
         this.right = 0;
+        this._anchor = new Pixi.Point(0, 0);
         this.dragging = false;
+        this.onUpdate = () => { };
         const that = this;
+        this.id = id;
         this.debug = debug;
         this.lineColor = lineColor;
         this.handleColor = handleColor;
@@ -48,21 +51,24 @@ export class FreeTransformTool extends Container {
         else if (generateAnchorMark === false)
             this.generateAnchorMark = () => { };
         this.zIndex = 1e7;
-        // Container Properties
+        // Pixi.Container Properties
         this.visible = false;
         // create border
-        this.border = new Graphics({ label: "Border" });
+        this.border = new Pixi.Graphics({ label: "Border" });
         this.addChild(this.border);
         // Anchor mark
-        this.anchorMark = new Graphics({ label: "AnchorMark" });
+        this.anchorMark = new Pixi.Graphics({
+            label: "AnchorMark",
+            eventMode: "none",
+        });
         this.anchorMark.alpha = this.handleOpacity;
         this.addChild(this.anchorMark);
         // debug indicators
-        this.fromPoint = new Graphics({
+        this.fromPoint = new Pixi.Graphics({
             label: "fromPoint",
             alpha: this.handleOpacity * 0.75,
         });
-        this.toPoint = new Graphics({
+        this.toPoint = new Pixi.Graphics({
             label: "toPoint",
             alpha: this.handleOpacity * 0.75,
         });
@@ -108,20 +114,65 @@ export class FreeTransformTool extends Container {
         });
         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.moveHandle = new Pixi.Graphics({ label: this.id });
+        this.moveHandle.eventMode = "dynamic";
         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.moveHandle.hitArea = new Pixi.Rectangle(0, 0, this.controlsSize, this.controlsSize);
         this.addChild(this.moveHandle);
+        function changeAnchorPoint(ev) {
+            // console.log("TAPP this, that - ", this, that);
+            if (!ev.ctrlKey)
+                return;
+            if (!that.target)
+                return;
+            console.log("Prev anchor - ", that._anchor);
+            console.log("ev.position - ", ev.global.x, ev.global.y);
+            console.log("that.target.position - ", that.target.position.x, that.target.position.y);
+            console.log("that.target.pivot - ", that.target.pivot.x, that.target.pivot.y);
+            let dx, dy;
+            // calc new pivot point
+            // step 1 - translate to origin
+            dx = ev.global.x - that.target.position.x;
+            dy = ev.global.y - that.target.position.y;
+            // step 2 - rotate by -angle
+            const rp = rotatePoint({ x: dx, y: dy }, { x: 0, y: 0 }, -that.target.rotation);
+            let rdx = rp.x;
+            let rdy = rp.y;
+            const sp = { x: rdx, y: rdy };
+            const pSnapped = snapToEdgesAndCorners({
+                point: sp,
+                dim: { width: that.target.width, height: that.target.height },
+                anchor: that._anchor,
+            });
+            // console.log("UP SNAPPING - ", sp, pSnapped);
+            // step 3 - scale by 1/scale
+            rdx = pSnapped.x / that.target.scale.x;
+            rdy = pSnapped.y / that.target.scale.y;
+            // console.log("3 - dx, dy - ", dx, dy);
+            // step 4 - translate to new pivot
+            const x = that.target.pivot.x + rdx;
+            const y = that.target.pivot.y + rdy;
+            // calc new position
+            const rrp = rotatePoint({ x: rdx, y: rdy }, { x: 0, y: 0 }, that.target.rotation);
+            rrp.x = rrp.x * that.target.scale.x + that.target.position.x;
+            rrp.y = rrp.y * that.target.scale.y + that.target.position.y;
+            const posX = rrp.x;
+            const posY = rrp.y;
+            that.target.pivot.set(x, y);
+            that.target.position.set(posX, posY);
+        }
         function onMoveHandleDown(downEvent) {
             // console.log("onMoveHandleDown this, that - ", this, that);
             if (!that.target)
                 return;
+            if (downEvent.ctrlKey) {
+                this.draggingPivot = true;
+            }
             // data
             this.targetStartPos = that.target.position.clone();
             this.dragDistance = 0;
@@ -131,7 +182,24 @@ export class FreeTransformTool extends Container {
             // 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);
+            if (this.draggingPivot) {
+                // changing pivot point
+                let x = moveEvent.global.x - that.target.x;
+                let y = moveEvent.global.y - that.target.y;
+                const p = rotatePoint({ x, y }, { x: 0, y: 0 }, -that.target.rotation);
+                const snappedPoint = snapToEdgesAndCorners({
+                    point: p,
+                    dim: {
+                        width: that.target.width,
+                        height: that.target.height,
+                    },
+                    anchor: that._anchor,
+                });
+                // console.log("MOVE SNAPPING - ", p, snappedPoint);
+                that.anchorMark.position.set(snappedPoint.x / that.target.scale.x, snappedPoint.y / that.target.scale.y);
+                return;
+            }
+            const moveDelta = new Pixi.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);
@@ -141,12 +209,11 @@ export class FreeTransformTool extends Container {
         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();
+            if (this.draggingPivot) {
+                changeAnchorPoint(upEvent);
+                that.anchorMark.position.set(0, 0);
             }
+            this.draggingPivot = false;
             this.off("globalpointermove", onMoveHandleMove);
         }
         // ------------</ MoveTool>---------------
@@ -175,7 +242,7 @@ export class FreeTransformTool extends Container {
                 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));
+            const direction = getDirection(new Pixi.Point(that.position.x, that.position.y), new Pixi.Point(this.eventStartGlobalPos.x, this.eventStartGlobalPos.y), new Pixi.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;
@@ -357,9 +424,9 @@ export class FreeTransformTool extends Container {
             .on("pointerupoutside", onHandleUp);
     }
     createHandle({ cursor, name, shape = "square", }) {
-        const handle = new Graphics();
-        handle.label = name;
-        handle.interactive = true;
+        const handle = new Pixi.Graphics();
+        handle.label = this.id;
+        handle.eventMode = "dynamic";
         handle.alpha = this.handleOpacity;
         this.addToolTip(handle, name, cursor);
         if (shape === "circle") {
@@ -377,8 +444,8 @@ export class FreeTransformTool extends Container {
     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 p1 = new Pixi.Point(x, y);
+        const origin = new Pixi.Point(0, 0);
         const p = rotatePoint(p1, origin, -this.rotation);
         x = p.x;
         y = p.y;
@@ -401,35 +468,62 @@ export class FreeTransformTool extends Container {
             this.unselect();
             return;
         }
-        // copy object translation/transformation
+        // console.log("select this - ", this);
         this.target = target;
-        const bounds = target.getLocalBounds();
+        let _anchor;
+        if (this.target.pivot) {
+            // console.log("target has pivot", this.target.pivot);
+            // when you set a width of 100 on a sprites with image with actual width of 500, the sprite container is scaled down to 0.2 by default
+            _anchor = new Pixi.Point(this.target.pivot.x / Math.abs(this.target.width / this.target.scale.x), this.target.pivot.y /
+                Math.abs(this.target.height / this.target.scale.y));
+        }
+        else {
+            // console.log("no-pivot|no-anchor", this.target.pivot);
+            _anchor = new Pixi.Point(0.5, 0.5);
+        }
+        this._anchor = _anchor;
+        console.log("Anchor - ", _anchor);
+        this.update();
+        this.visible = true;
+    }
+    unselect() {
+        this.target = null;
+        this.visible = false;
+        this.onUpdate();
+    }
+    update() {
+        if (!this.target) {
+            console.log("no target, returning...");
+            return;
+        }
+        this.onUpdate();
+        // copy object translation/transformation
+        const bounds = this.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);
+        this.scale.x = this.target.scale.x;
+        this.scale.y = this.target.scale.y;
+        this.x = this.target.x;
+        this.y = this.target.y;
+        this.rotation = this.target.rotation;
+        let _anchor;
+        if (this.target.pivot) {
+            // console.log("target has pivot", this.target.pivot);
+            _anchor = new Pixi.Point(this.target.pivot.x / Math.abs(this.target.width / this.scale.x), this.target.pivot.y / Math.abs(this.target.height / this.scale.y));
         }
         else {
-            anchor = new Point(0.5, 0.5);
+            _anchor = this._anchor || new Pixi.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);
+        this._anchor = _anchor;
+        // console.log("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;
+        // this.anchorMark!.rotation = -this.rotation;
         const rotationHandlePos = {
             x: (this.left + this.right) / 2,
             y: this.top - 80 / Math.abs(this.scale.y),
@@ -460,7 +554,21 @@ export class FreeTransformTool extends Container {
             color: this.lineColor,
         });
         // draw move hit area
-        this.moveHandle.hitArea = new Rectangle(this.left, this.top, bounds.width, bounds.height);
+        let anchorRectPoints = [];
+        const isAnchorOutside = this._anchor.x < 0 ||
+            this._anchor.y < 0 ||
+            this._anchor.x > 1 ||
+            this._anchor.y > 1;
+        if (isAnchorOutside) {
+            anchorRectPoints = [
+                new Pixi.Point(-this.controlsSize, -this.controlsSize),
+                new Pixi.Point(-this.controlsSize, this.controlsSize),
+                new Pixi.Point(this.controlsSize, this.controlsSize),
+                new Pixi.Point(this.controlsSize, -this.controlsSize),
+                new Pixi.Point(-this.controlsSize, -this.controlsSize),
+            ];
+        }
+        this.moveHandle.hitArea = new Pixi.Polygon(new Pixi.Point(this.left, this.top), new Pixi.Point(this.right, this.top), new Pixi.Point(this.right, this.bottom), new Pixi.Point(this.left, this.bottom), new Pixi.Point(this.left, this.top), ...anchorRectPoints);
         this.scaleTLHandle.position.set(this.left, this.top);
         this.scaleTRHandle.position.set(this.right, this.top);
         this.scaleBRHandle.position.set(this.right, this.bottom);
@@ -485,17 +593,6 @@ export class FreeTransformTool extends Container {
         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 || "";
@@ -526,11 +623,12 @@ export class FreeTransformTool extends Container {
         }
     }
     generateAnchorMark(graphic) {
-        const anchorInnerRadius = this.controlsSize * 0.125;
-        const anchorOuterRadius = this.controlsSize * 0.625;
+        const scale = 2;
+        const anchorInnerRadius = this.controlsSize * 0.125 * scale;
+        const anchorOuterRadius = this.controlsSize * 0.625 * scale;
         graphic
             .clear()
-            .circle(0, 0, this.controlsSize * 0.375)
+            .circle(0, 0, this.controlsSize * 0.375 * scale)
             .moveTo(0, anchorInnerRadius)
             .lineTo(0, anchorOuterRadius)
             .moveTo(-anchorInnerRadius, 0)

package/dist/index.d.ts

@@ -1,2 +1,2 @@
-export { FreeTransformTool } from "./FreeTransformTool";
+export { Transformer } from "./FreeTransformTool";
 export declare function hello(): void;

package/dist/index.js

@@ -1,4 +1,4 @@
-export { FreeTransformTool } from "./FreeTransformTool";
+export { Transformer } from "./FreeTransformTool";
 export function hello() {
     console.log("🧩 Hello, from @quinninc/pixi-transformer!");
 }

package/dist/pixi.d.ts

@@ -0,0 +1,2 @@
+import * as Pixi from "pixi.js";
+export { Pixi };

package/dist/pixi.js

@@ -0,0 +1,2 @@
+import * as Pixi from "pixi.js";
+export { Pixi };

package/dist/vector.d.ts

@@ -1,4 +1,7 @@
-import { Point } from "pixi.js";
+type Point = {
+    x: number;
+    y: number;
+};
 /**
  *
  * @param origin source from where distance will be calculated
@@ -21,3 +24,19 @@ export declare function rotatePoint(point: Point, origin: Point, rotation: numbe
 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;
+/**
+ *
+ * @param p point to snap to edges and corners
+ * @param snapDistance max distance from edges and corners to trigger snap
+ * @param param2 bounds of the rectangle (0,0), (0,width), (width,height), (0, height)
+ */
+export declare function snapToEdgesAndCorners({ point, anchor, dim: { width, height }, snapDistance, }: {
+    point: Point;
+    snapDistance?: number;
+    dim: {
+        width: number;
+        height: number;
+    };
+    anchor: Point;
+}): Point;
+export {};

package/dist/vector.js

@@ -1,4 +1,3 @@
-import { Point } from "pixi.js";
 /**
  *
  * @param origin source from where distance will be calculated
@@ -7,8 +6,8 @@ import { Point } from "pixi.js";
  * @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 v1 = { x: p1.x - origin.x, y: p1.y - origin.y };
+    const v2 = { x: p2.x - origin.x, y: p2.y - origin.y };
     const dot = v1.x * v2.x + v1.y * v2.y;
     return dot >= 0 ? 1 : -1;
 }
@@ -27,9 +26,9 @@ export function rotatePoint(point, origin, 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);
+    const x = rotatedX + origin.x;
+    const y = rotatedY + origin.y;
+    return { x, y };
 }
 /**
  * Calculate the euclidean distance between two points.
@@ -43,3 +42,41 @@ export function calcAngleDegrees(x, y) {
 export function calcAngleRadians(x, y) {
     return Math.atan2(y, x);
 }
+/**
+ *
+ * @param p point to snap to edges and corners
+ * @param snapDistance max distance from edges and corners to trigger snap
+ * @param param2 bounds of the rectangle (0,0), (0,width), (width,height), (0, height)
+ */
+export function snapToEdgesAndCorners({ point, anchor, dim: { width, height }, snapDistance = 10, }) {
+    const top = -height * anchor.y;
+    const bottom = height + top;
+    const left = -width * anchor.x;
+    const right = width + left;
+    // console.log(top, left, bottom, right);
+    // console.log(point);
+    const snapPoints = [
+        // corners
+        { x: left, y: top }, // top-left
+        { x: right, y: top }, // top-right
+        { x: right, y: bottom }, // bottom-right
+        { x: left, y: bottom }, // bottom-left
+        // center
+        { x: (left + right) / 2, y: (top + bottom) / 2 }, // center
+        // edges
+        { x: (left + right) / 2, y: top }, // top-edge
+        { x: (left + right) / 2, y: bottom }, // bottom-edge
+        { x: left, y: (top + bottom) / 2 }, // left-edge
+        { x: right, y: (top + bottom) / 2 }, // right-edge
+    ];
+    let minDistance = Number.MAX_VALUE;
+    let snappedPoint = point;
+    for (const snapPoint of snapPoints) {
+        const distance = calcDistance(point, snapPoint);
+        if (distance < snapDistance && distance < minDistance) {
+            minDistance = distance;
+            snappedPoint = snapPoint;
+        }
+    }
+    return snappedPoint;
+}

package/package.json

@@ -1,33 +1,36 @@
-{
-  "name": "@quinninc/pixi-transformer",
-  "private": false,
-  "version": "0.0.2",
-  "type": "module",
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "files": [
-    "dist",
-    "package.json",
-    "README.md"
-  ],
-  "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.3",
+  "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"
+  ],
+  "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"
+  }
+}