@quinninc/pixi-transformer 0.0.3 → 0.0.5

package/dist/{FreeTransformTool.d.ts → Transformer.d.ts}

@@ -67,12 +67,13 @@ export declare class Transformer extends Pixi.Container {
     private createHandleIndicatorTo;
     private deScale;
     select(target: Pixi.Container): void;
-    onUpdate: () => void;
     unselect(): void;
+    onUpdate: () => void;
     update(): void;
     setTitle(title: string): void;
     setCursor(cursor: string): void;
     private generateAnchorMark;
     get _target(): Pixi.Container<Pixi.ContainerChild> | Pixi.Sprite | null;
     cleanup(): void;
+    private convertToLocal;
 }

package/dist/{FreeTransformTool.js → Transformer.js}

@@ -1,5 +1,5 @@
 import { Pixi } from "./pixi";
-import { calcAngleRadians, calcDistance, getDirection, rotatePoint, snapToEdgesAndCorners, } from "./vector";
+import { calcAngleRadians, calcDistance, getDirection, rotatePoint, snapToEdgesAndCorners, } from "./graphics";
 export class Transformer extends Pixi.Container {
     /**
      *
@@ -126,19 +126,20 @@ export class Transformer extends Pixi.Container {
         this.addChild(this.moveHandle);
         function changeAnchorPoint(ev) {
             // console.log("TAPP this, that - ", this, that);
-            if (!ev.ctrlKey)
+            if (!ev.ctrlKey && !ev.metaKey)
                 return;
             if (!that.target)
                 return;
+            const eventPoint = that.convertToLocal(ev.global);
             console.log("Prev anchor - ", that._anchor);
-            console.log("ev.position - ", ev.global.x, ev.global.y);
+            console.log("ev.position - ", eventPoint.x, eventPoint.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;
+            dx = eventPoint.x - that.target.position.x;
+            dy = eventPoint.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;
@@ -170,7 +171,7 @@ export class Transformer extends Pixi.Container {
             // console.log("onMoveHandleDown this, that - ", this, that);
             if (!that.target)
                 return;
-            if (downEvent.ctrlKey) {
+            if (downEvent.ctrlKey || downEvent.metaKey) {
                 this.draggingPivot = true;
             }
             // data
@@ -182,10 +183,11 @@ export class Transformer extends Pixi.Container {
             // console.log("onMoveHandleMove this, that - ", this, that);
             if (!this.dragging || !that.target)
                 return;
+            const eventPoint = that.convertToLocal(moveEvent.global);
             if (this.draggingPivot) {
                 // changing pivot point
-                let x = moveEvent.global.x - that.target.x;
-                let y = moveEvent.global.y - that.target.y;
+                let x = eventPoint.x - that.target.x;
+                let y = eventPoint.y - that.target.y;
                 const p = rotatePoint({ x, y }, { x: 0, y: 0 }, -that.target.rotation);
                 const snappedPoint = snapToEdgesAndCorners({
                     point: p,
@@ -199,10 +201,10 @@ export class Transformer extends Pixi.Container {
                 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);
+            const moveDelta = new Pixi.Point(eventPoint.x - this.eventStartPos.x, eventPoint.y - this.eventStartPos.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);
+            this.dragDistance = calcDistance(eventPoint, this.eventStartPos);
             that.update();
             moveEvent.stopPropagation();
         }
@@ -240,9 +242,10 @@ export class Transformer extends Pixi.Container {
             // 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 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));
+            const eventPoint = that.convertToLocal(moveEvent.global);
+            const distStart = calcDistance(this.eventStartPos, that.target.position);
+            const distEnd = calcDistance(eventPoint, that.target.position);
+            const direction = getDirection(that.position, this.eventStartPos, eventPoint);
             this.rescaleFactor = (distEnd / distStart) * direction;
             that.target.scale.x = this.targetStartScale.x * this.rescaleFactor;
             that.target.scale.y = this.targetStartScale.y * this.rescaleFactor;
@@ -274,11 +277,12 @@ export class Transformer extends Pixi.Container {
             // console.log("onVScaleToolMove this - ", this);
             if (!this.dragging || !that.target)
                 return;
+            const eventPoint = that.convertToLocal(moveEvent.global);
             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);
+            const distStart = calcDistance(this.eventStartPos, referencePoint);
+            const distEnd = calcDistance(eventPoint, referencePoint);
+            const direction = getDirection(referencePoint, this.eventStartPos, eventPoint);
             this.rescaleFactor = (distEnd / distStart) * direction;
             that.target.scale.y = this.targetStartScale.y * this.rescaleFactor;
             that.update();
@@ -306,11 +310,12 @@ export class Transformer extends Pixi.Container {
             // console.log("onHScaleToolMove this - ", this);
             if (!this.dragging || !that.target)
                 return;
+            const eventPoint = that.convertToLocal(moveEvent.global);
             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 distStart = calcDistance(this.eventStartPos, referencePoint);
+            const distEnd = calcDistance(eventPoint, referencePoint);
+            const direction = getDirection(referencePoint, this.eventStartPos, eventPoint);
             const rescaleFactor = (distEnd / distStart) * direction;
             that.target.scale.x = this.targetStartScale.x * rescaleFactor;
             that.update();
@@ -335,20 +340,21 @@ export class Transformer extends Pixi.Container {
             // console.log("onRotateToolMove this, that - ", this, that);
             if (!this.dragging || !that.target)
                 return;
+            const eventPoint = that.convertToLocal(moveEvent.global);
             // 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,
+                x: this.eventStartPos.x - that.target.x,
+                y: this.eventStartPos.y - that.target.y,
             };
             const relativeEndPoint = {
-                x: moveEvent.global.x - that.target.x,
-                y: moveEvent.global.y - that.target.y,
+                x: eventPoint.x - that.target.x,
+                y: eventPoint.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) {
+            if (moveEvent.ctrlKey || moveEvent.metaKey) {
                 const snapAngle = 45;
                 let finalAngle = (finalRotation * 180) / Math.PI;
                 const proximity = Math.min(Math.abs(finalAngle % snapAngle), snapAngle - Math.abs(finalAngle % snapAngle));
@@ -391,19 +397,20 @@ export class Transformer extends Pixi.Container {
             // console.log("onHandleDown this - ", this);
             that.dragging = true;
             handle.dragging = true;
-            handle.eventStartGlobalPos = e.global.clone();
+            handle.eventStartPos = that.convertToLocal(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);
+                that.createHandleIndicatorTo(that.fromPoint, handle.eventStartPos.x, handle.eventStartPos.y);
             }
         }
         function onHandleMove(e) {
             // console.log("onHandleMove this - ", this);
+            const eventPoint = that.convertToLocal(e.global.clone());
             if (that.debug) {
-                that.createHandleIndicatorTo(that.toPoint, e.globalX, e.globalY);
+                that.createHandleIndicatorTo(that.toPoint, eventPoint.x, eventPoint.y);
                 that.deScale(that.fromPoint);
             }
         }
@@ -482,7 +489,11 @@ export class Transformer extends Pixi.Container {
             _anchor = new Pixi.Point(0.5, 0.5);
         }
         this._anchor = _anchor;
-        console.log("Anchor - ", _anchor);
+        if (this.parent !== this.target.parent) {
+            // console.log("Different parent - switching transformer location position");
+            this.target.parent.addChild(this);
+        }
+        // console.log("Anchor - ", _anchor);
         this.update();
         this.visible = true;
     }
@@ -644,4 +655,11 @@ export class Transformer extends Pixi.Container {
         return this.target;
     }
     cleanup() { }
+    convertToLocal(point) {
+        if (this.target) {
+            const p = this.target.parent.toLocal(point);
+            return p;
+        }
+        return point;
+    }
 }

package/dist/{vector.d.ts → graphics.d.ts}

@@ -2,6 +2,7 @@ type Point = {
     x: number;
     y: number;
 };
+import { Pixi } from "./pixi";
 /**
  *
  * @param origin source from where distance will be calculated
@@ -39,4 +40,13 @@ export declare function snapToEdgesAndCorners({ point, anchor, dim: { width, hei
     };
     anchor: Point;
 }): Point;
+export declare function applyTransform(container: Pixi.Container, matrix: Pixi.Matrix): void;
+export declare function parseTransformationMatrix(matrix: Pixi.Matrix): {
+    tx: number;
+    ty: number;
+    scaleX: number;
+    scaleY: number;
+    rotation: number;
+};
+export declare function getChildTransformRelativeToParent(child: Pixi.Container, parent: Pixi.Container): Pixi.Matrix;
 export {};

package/dist/{vector.js → graphics.js}

@@ -1,3 +1,4 @@
+import { Pixi } from "./pixi";
 /**
  *
  * @param origin source from where distance will be calculated
@@ -80,3 +81,35 @@ export function snapToEdgesAndCorners({ point, anchor, dim: { width, height }, s
     }
     return snappedPoint;
 }
+export function applyTransform(container, matrix) {
+    // Extract translation
+    const { tx, ty, scaleX, scaleY, rotation } = parseTransformationMatrix(matrix);
+    3;
+    // Apply the extracted transformations to the container
+    container.position.set(tx, ty);
+    container.scale.set(scaleX, scaleY);
+    container.rotation = rotation;
+}
+export function parseTransformationMatrix(matrix) {
+    const tx = matrix.tx;
+    const ty = matrix.ty;
+    // Extract scale
+    const scaleX = Math.sqrt(matrix.a * matrix.a + matrix.b * matrix.b);
+    const scaleY = Math.sqrt(matrix.c * matrix.c + matrix.d * matrix.d);
+    // Extract rotation (in radians)
+    const rotation = Math.atan2(matrix.b, matrix.a);
+    return { tx, ty, scaleX, scaleY, rotation };
+}
+export function getChildTransformRelativeToParent(child, parent) {
+    // Get the worldTransform of the parent and child
+    const parentWorldTransform = parent.worldTransform;
+    const childWorldTransform = child.worldTransform;
+    // Invert the parent's worldTransform
+    const inverseParentWorldTransform = new Pixi.Matrix();
+    parentWorldTransform.copyTo(inverseParentWorldTransform).invert();
+    // Multiply the child's worldTransform by the inverse of the parent's worldTransform
+    const relativeTransform = new Pixi.Matrix();
+    childWorldTransform.copyTo(relativeTransform);
+    relativeTransform.append(inverseParentWorldTransform);
+    return relativeTransform;
+}

package/dist/index.d.ts

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

package/dist/index.js

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@quinninc/pixi-transformer",
   "private": false,
-  "version": "0.0.3",
+  "version": "0.0.5",
   "repository": {
     "url": "https://github.com/Quinn-Care-Private-Limited/pixi-transformer"
   },
@@ -14,6 +14,11 @@
     "package.json",
     "README.md"
   ],
+  "keywords": [
+    "pixi.js",
+    "transformer",
+    "pixi.js v8"
+  ],
   "author": {
     "name": "Rohit Kaushal",
     "url": "https://github.com/RohitKaushal7"