@quinninc/pixi-transformer 0.0.4 → 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

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

package/dist/FreeTransformTool.js

@@ -1,6 +1,6 @@
-import { Pixi } from "./pixi";
-import { calcAngleRadians, calcDistance, getDirection, rotatePoint, snapToEdgesAndCorners, } from "./vector";
-export class Transformer extends Pixi.Container {
+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
@@ -24,20 +24,17 @@ export class Transformer extends Pixi.Container {
      *
      * selectTool.unselect();
      */
-    constructor({ id = "transformer", lineColor = 0x66cfff, handleColor = 0xffffff, controlsSize = 10, debug = false, generateAnchorMark, } = {}) {
+    constructor({ lineColor = 0x66cfff, handleColor = 0xffffff, controlsSize = 10, debug = false, generateAnchorMark, } = {}) {
         super();
-        // target Pixi.Container
+        // target 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;
@@ -51,24 +48,21 @@ export class Transformer extends Pixi.Container {
         else if (generateAnchorMark === false)
             this.generateAnchorMark = () => { };
         this.zIndex = 1e7;
-        // Pixi.Container Properties
+        // Container Properties
         this.visible = false;
         // create border
-        this.border = new Pixi.Graphics({ label: "Border" });
+        this.border = new Graphics({ label: "Border" });
         this.addChild(this.border);
         // Anchor mark
-        this.anchorMark = new Pixi.Graphics({
-            label: "AnchorMark",
-            eventMode: "none",
-        });
+        this.anchorMark = new Graphics({ label: "AnchorMark" });
         this.anchorMark.alpha = this.handleOpacity;
         this.addChild(this.anchorMark);
         // debug indicators
-        this.fromPoint = new Pixi.Graphics({
+        this.fromPoint = new Graphics({
             label: "fromPoint",
             alpha: this.handleOpacity * 0.75,
         });
-        this.toPoint = new Pixi.Graphics({
+        this.toPoint = new Graphics({
             label: "toPoint",
             alpha: this.handleOpacity * 0.75,
         });
@@ -114,65 +108,20 @@ export class Transformer extends Pixi.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 Pixi.Graphics({ label: this.id });
-        this.moveHandle.eventMode = "dynamic";
+        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 Pixi.Rectangle(0, 0, this.controlsSize, this.controlsSize);
+        this.moveHandle.hitArea = new Rectangle(0, 0, this.controlsSize, this.controlsSize);
         this.addChild(this.moveHandle);
-        function changeAnchorPoint(ev) {
-            // console.log("TAPP this, that - ", this, that);
-            if (!ev.ctrlKey && !ev.metaKey)
-                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 || downEvent.metaKey) {
-                this.draggingPivot = true;
-            }
             // data
             this.targetStartPos = that.target.position.clone();
             this.dragDistance = 0;
@@ -182,24 +131,7 @@ export class Transformer extends Pixi.Container {
             // console.log("onMoveHandleMove this, that - ", this, that);
             if (!this.dragging || !that.target)
                 return;
-            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);
+            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);
@@ -209,11 +141,12 @@ export class Transformer extends Pixi.Container {
         function onMoveHandleUp(upEvent) {
             // console.log("onMoveHandleUp this, that - ", this, that);
             upEvent.stopPropagation();
-            if (this.draggingPivot) {
-                changeAnchorPoint(upEvent);
-                that.anchorMark.position.set(0, 0);
+            // 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.draggingPivot = false;
             this.off("globalpointermove", onMoveHandleMove);
         }
         // ------------</ MoveTool>---------------
@@ -242,7 +175,7 @@ export class Transformer extends Pixi.Container {
                 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 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;
@@ -348,7 +281,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 (moveEvent.ctrlKey) {
                 const snapAngle = 45;
                 let finalAngle = (finalRotation * 180) / Math.PI;
                 const proximity = Math.min(Math.abs(finalAngle % snapAngle), snapAngle - Math.abs(finalAngle % snapAngle));
@@ -424,9 +357,9 @@ export class Transformer extends Pixi.Container {
             .on("pointerupoutside", onHandleUp);
     }
     createHandle({ cursor, name, shape = "square", }) {
-        const handle = new Pixi.Graphics();
-        handle.label = this.id;
-        handle.eventMode = "dynamic";
+        const handle = new Graphics();
+        handle.label = name;
+        handle.interactive = true;
         handle.alpha = this.handleOpacity;
         this.addToolTip(handle, name, cursor);
         if (shape === "circle") {
@@ -444,8 +377,8 @@ export class Transformer extends Pixi.Container {
     createHandleIndicatorTo(handle, x, y) {
         x = x - this.position.x;
         y = y - this.position.y;
-        const p1 = new Pixi.Point(x, y);
-        const origin = new Pixi.Point(0, 0);
+        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;
@@ -468,62 +401,35 @@ export class Transformer extends Pixi.Container {
             this.unselect();
             return;
         }
-        // console.log("select this - ", this);
-        this.target = target;
-        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.target = target;
+        const bounds = target.getLocalBounds();
         this.width = bounds.width;
         this.height = bounds.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));
+        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 = this._anchor || new Pixi.Point(0.5, 0.5);
+            anchor = new Point(0.5, 0.5);
         }
-        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);
+        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;
+        this.anchorMark.rotation = -this.rotation;
         const rotationHandlePos = {
             x: (this.left + this.right) / 2,
             y: this.top - 80 / Math.abs(this.scale.y),
@@ -554,21 +460,7 @@ export class Transformer extends Pixi.Container {
             color: this.lineColor,
         });
         // draw move hit area
-        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.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);
@@ -593,6 +485,17 @@ export class Transformer extends Pixi.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 || "";
@@ -623,12 +526,11 @@ export class Transformer extends Pixi.Container {
         }
     }
     generateAnchorMark(graphic) {
-        const scale = 2;
-        const anchorInnerRadius = this.controlsSize * 0.125 * scale;
-        const anchorOuterRadius = this.controlsSize * 0.625 * scale;
+        const anchorInnerRadius = this.controlsSize * 0.125;
+        const anchorOuterRadius = this.controlsSize * 0.625;
         graphic
             .clear()
-            .circle(0, 0, this.controlsSize * 0.375 * scale)
+            .circle(0, 0, this.controlsSize * 0.375)
             .moveTo(0, anchorInnerRadius)
             .lineTo(0, anchorOuterRadius)
             .moveTo(-anchorInnerRadius, 0)

package/dist/Transformer.d.ts

@@ -0,0 +1,80 @@
+import { Pixi } from "./pixi";
+export declare class Transformer extends Pixi.Container {
+    private debug;
+    private _id;
+    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 _anchor;
+    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({ id, lineColor, handleColor, controlsSize, debug, generateAnchorMark, }?: {
+        id?: string;
+        lineColor?: string | number;
+        handleColor?: string | number;
+        controlsSize?: number;
+        debug?: boolean;
+        generateAnchorMark?: false | ((graphic: Pixi.Graphics) => void);
+    });
+    private addToolTip;
+    private handleHandleEvents;
+    private createHandle;
+    private createHandleIndicatorTo;
+    private deScale;
+    select(target: Pixi.Container): 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;
+    get id(): string;
+    cleanup(): void;
+    private convertToLocal;
+}