@quinninc/pixi-transformer 0.1.0 → 0.1.2

package/README.md

@@ -1,63 +1,63 @@
-# Free Transform Tool for PIXI.js
-
-Works with pixi.js v8 and above.
-
-![preview](https://cdn.quinn.live/transformer-image.png)
-
-### ✨ Features
-
-- Translate - Drag to move anywhere
-- Scale - Scale on X, Y or both axis'
-- Rotate - drag to rotate
-- Anchor point - update anchor point of transforms (AltLeft + Click or Drag)
-- Snapping - snap rotation at 45degrees, snap anchor point to edges and corners (hold ShiftLeft).
-- Theming - custom border color, control size and color, and anchor point graphic
-
-> Note - all transformations are applied wrt the pivot point, update pivot point to achieve the desired result.
-
-## Installation
-
-```bash
-npm install @quinninc/pixi-transformer
-```
-
-## Usage
-
-```tsx
-const root = new Container();
-app.stage.addChild(root);
-
-// create tool and add to stage
-const selectTool = new FreeTransformTool();
-selectTool.label = "transform-tool";
-root.addChild(selectTool);
-
-const obj = new Sprite({
-  texture: Texture.from("lenna"),
-  label: "lenna",
-  eventMode: "static",
-});
-
-root.addChild(obj);
-
-obj.on("pointertap", (ev) => {
-  console.log("select - ", ev.currentTarget.label);
-  selectTool.select(ev.currentTarget);
-});
-```
-
-## API
-
-### `FreeTransformTool` (class)
-
-**Constructor Parameter Object:**
-
-- `lineColor` - border line color. default - `0x66cfff`
-- `handleColor` - (`number`) - handles' fill color. default - `0xffffff`
-- `controlsSize` - (`number`) - handles' size in pixels. default - `10`
-- `debug` - (`boolean`) - show scaling distance debug lines. default - `false`
-- `generateAnchorMark` - a function to generate your custom anchor mark. default - `undefined` (uses default anchor mark)
-- `pivotKeys` - (`string[]`) - keys to hold to change pivot point. default - `['AltLeft']` - [List of KeyCodes](https://www.freecodecamp.org/news/javascript-keycode-list-keypress-event-key-codes#a-full-list-of-key-event-values)
-- `snapKeys` - (`string[]`) - keys to hold to snap to grid. default - `['ShiftLeft']`
-
-**returns:** `PIXI.Container` (the select tool)
+# Free Transform Tool for PIXI.js
+
+Works with pixi.js v8 and above.
+
+![preview](https://cdn.quinn.live/transformer-image.png)
+
+### ✨ Features
+
+- Translate - Drag to move anywhere
+- Scale - Scale on X, Y or both axis'
+- Rotate - drag to rotate
+- Anchor point - update anchor point of transforms (AltLeft + Click or Drag)
+- Snapping - snap rotation at 45degrees, snap anchor point to edges and corners (hold ShiftLeft).
+- Theming - custom border color, control size and color, and anchor point graphic
+
+> Note - all transformations are applied wrt the pivot point, update pivot point to achieve the desired result.
+
+## Installation
+
+```bash
+npm install @quinninc/pixi-transformer
+```
+
+## Usage
+
+```tsx
+const root = new Container();
+app.stage.addChild(root);
+
+// create tool and add to stage
+const selectTool = new FreeTransformTool();
+selectTool.label = "transform-tool";
+root.addChild(selectTool);
+
+const obj = new Sprite({
+  texture: Texture.from("lenna"),
+  label: "lenna",
+  eventMode: "static",
+});
+
+root.addChild(obj);
+
+obj.on("pointertap", (ev) => {
+  console.log("select - ", ev.currentTarget.label);
+  selectTool.select(ev.currentTarget);
+});
+```
+
+## API
+
+### `FreeTransformTool` (class)
+
+**Constructor Parameter Object:**
+
+- `lineColor` - border line color. default - `0x66cfff`
+- `handleColor` - (`number`) - handles' fill color. default - `0xffffff`
+- `controlsSize` - (`number`) - handles' size in pixels. default - `10`
+- `debug` - (`boolean`) - show scaling distance debug lines. default - `false`
+- `generateAnchorMark` - a function to generate your custom anchor mark. default - `undefined` (uses default anchor mark)
+- `pivotKeys` - (`string[]`) - keys to hold to change pivot point. default - `['AltLeft']` - [List of KeyCodes](https://www.freecodecamp.org/news/javascript-keycode-list-keypress-event-key-codes#a-full-list-of-key-event-values)
+- `snapKeys` - (`string[]`) - keys to hold to snap to grid. default - `['ShiftLeft']`
+
+**returns:** `PIXI.Container` (the select tool)

package/dist/Transformer.d.ts

@@ -19,6 +19,7 @@ export declare class Transformer extends Pixi.Container {
     private target;
     private movedThreshold;
     private updateCallbacks;
+    private onMoveEndCallback?;
     private handleOpacity;
     private controlsSize;
     private controlsDimOpacity;
@@ -60,7 +61,7 @@ export declare class Transformer extends Pixi.Container {
      *
      * selectTool.unselect();
      */
-    constructor({ id, lineColor, handleColor, controlsSize, debug, generateAnchorMark, snapKeys, pivotKeys, }?: {
+    constructor({ id, lineColor, handleColor, controlsSize, debug, generateAnchorMark, snapKeys, pivotKeys, onMoveEnd, }?: {
         id?: string;
         lineColor?: string | number;
         handleColor?: string | number;
@@ -69,6 +70,7 @@ export declare class Transformer extends Pixi.Container {
         generateAnchorMark?: false | ((graphic: Pixi.Graphics) => void);
         snapKeys?: string[];
         pivotKeys?: string[];
+        onMoveEnd?: () => void;
     });
     private addToolTip;
     private handleHandleEvents;

package/dist/Transformer.js

@@ -28,7 +28,7 @@ export class Transformer extends Pixi.Container {
      *
      * selectTool.unselect();
      */
-    constructor({ id = "transformer", lineColor = 0x66cfff, handleColor = 0xffffff, controlsSize = 10, debug = false, generateAnchorMark, snapKeys = ["ShiftLeft"], pivotKeys = ["AltLeft"], } = {}) {
+    constructor({ id = "transformer", lineColor = 0x66cfff, handleColor = 0xffffff, controlsSize = 10, debug = false, generateAnchorMark, snapKeys = ["ShiftLeft"], pivotKeys = ["AltLeft"], onMoveEnd, } = {}) {
         super();
         // target Pixi.Container
         this.target = null;
@@ -65,6 +65,7 @@ export class Transformer extends Pixi.Container {
             this.generateAnchorMark = generateAnchorMark;
         else if (generateAnchorMark === false)
             this.generateAnchorMark = () => { };
+        this.onMoveEndCallback = onMoveEnd;
         this.zIndex = 1e7;
         // Pixi.Container Properties
         this.visible = false;
@@ -197,12 +198,18 @@ export class Transformer extends Pixi.Container {
             // console.log("onMoveHandleDown this, that - ", this, that);
             if (!that.target)
                 return;
+            // Store target's starting position for move calculation
+            this.targetStartPos = that.target.position.clone();
+            // Store event's starting position relative to the transformer
+            this.eventStartPos = that.convertToLocal(downEvent.global.clone());
+            // Reset drag distance counter
+            this.dragDistance = 0;
+            // Set dragging flag (might be redundant if handleHandleEvents also sets it, but safe)
+            that.dragging = true;
+            this.dragging = true; // Flag specific to this handle instance
             if (that.pivotKey) {
                 this.draggingPivot = true;
             }
-            // data
-            this.targetStartPos = that.target.position.clone();
-            this.dragDistance = 0;
             this.on("globalpointermove", onMoveHandleMove);
         }
         function onMoveHandleMove(moveEvent) {
@@ -230,19 +237,43 @@ export class Transformer extends Pixi.Container {
             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;
+            // Calculate distance moved from the start point
             this.dragDistance = calcDistance(eventPoint, this.eventStartPos);
-            that.update();
+            that.update(); // Update transformer visuals during move
             moveEvent.stopPropagation();
         }
         function onMoveHandleUp(upEvent) {
             // console.log("onMoveHandleUp this, that - ", this, that);
-            upEvent.stopPropagation();
+            const wasDragging = this.dragging; // Capture state before resetting
+            // Reset state for this handle instance first
+            this.off("globalpointermove", onMoveHandleMove);
+            this.dragging = false; // Reset handle-specific dragging flag
+            // that.dragging = false; // Reset global dragging flag (might be reset by handleHandleEvents too)
             if (this.draggingPivot) {
                 changeAnchorPoint(upEvent);
                 that.anchorMark.position.set(0, 0);
+                this.draggingPivot = false;
+                // Maybe call update here if pivot change needs immediate visual update?
+                // that.update();
             }
-            this.draggingPivot = false;
-            this.off("globalpointermove", onMoveHandleMove);
+            // --- Trigger onMoveEnd Callback ---
+            const scale = Math.min(that.scale.x, that.scale.y) || 1;
+            console.log("this.dragDistance - ", this.dragDistance);
+            console.log("that.movedThreshold / scale - ", that.movedThreshold / scale);
+            if (wasDragging &&
+                this.dragDistance > that.movedThreshold / scale &&
+                that.target &&
+                that.onMoveEndCallback) {
+                console.log("Move ended, calling onMoveEndCallback (no args)");
+                that.onMoveEndCallback();
+            }
+            // --- End Trigger ---
+            this.dragDistance = 0;
+            // Note: The generic onHandleUp from handleHandleEvents will also fire
+            // and call updateCallbacks. Ensure order is okay or adjust if needed.
+            // If the generic one shouldn't fire its updateCallbacks for this handle,
+            // you might need to structure handleHandleEvents differently.
+            upEvent.stopPropagation(); // Prevent event bubbling further if needed
         }
         // ------------</ MoveTool>---------------
         // ------------<ScaleXYTool>---------------

package/package.json

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