@quinninc/pixi-transformer 0.0.1 → 0.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +65 -65
- package/package.json +9 -5
package/README.md
CHANGED
|
@@ -1,65 +1,65 @@
|
|
|
1
|
-
# Free Transform Tool for PIXI.js
|
|
2
|
-
|
|
3
|
-
Works with pixi.js v8 and above.
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
### ✨ Features
|
|
8
|
-
|
|
9
|
-
- Translate - Drag to move anywhere
|
|
10
|
-
- Scale - Scale on X, Y or both axis'
|
|
11
|
-
- Rotate - drag to rotate
|
|
12
|
-
- Anchor point - update anchor point of transforms
|
|
13
|
-
- Snapping - hold ctrl to snap rotation at 45degrees, snap anchor point to edges and corners.
|
|
14
|
-
- Theming - custom border color, control size and color, and anchor point graphic
|
|
15
|
-
|
|
16
|
-
> Note - all transformations are applied wrt the pivot point, update pivot point to achieve the desired result.
|
|
17
|
-
|
|
18
|
-
## Installation
|
|
19
|
-
|
|
20
|
-
```bash
|
|
21
|
-
npm install @quinninc/pixi-transformer
|
|
22
|
-
```
|
|
23
|
-
|
|
24
|
-
## Usage
|
|
25
|
-
|
|
26
|
-
```tsx
|
|
27
|
-
const root = new Container();
|
|
28
|
-
app.stage.addChild(root);
|
|
29
|
-
|
|
30
|
-
// create tool and add to stage
|
|
31
|
-
const selectTool = new FreeTransformTool();
|
|
32
|
-
selectTool.label = "transform-tool";
|
|
33
|
-
root.addChild(selectTool);
|
|
34
|
-
|
|
35
|
-
const obj = new Sprite({
|
|
36
|
-
texture: Texture.from("lenna"),
|
|
37
|
-
label: "lenna",
|
|
38
|
-
eventMode: "static",
|
|
39
|
-
});
|
|
40
|
-
|
|
41
|
-
root.addChild(obj);
|
|
42
|
-
|
|
43
|
-
obj.on("pointertap", (ev) => {
|
|
44
|
-
console.log("select - ", ev.currentTarget.label);
|
|
45
|
-
selectTool.select(ev.currentTarget);
|
|
46
|
-
});
|
|
47
|
-
```
|
|
48
|
-
|
|
49
|
-
## API
|
|
50
|
-
|
|
51
|
-
<!-- INSERT GENERATED DOCS START -->
|
|
52
|
-
|
|
53
|
-
### `FreeTransformTool` (class)
|
|
54
|
-
|
|
55
|
-
**Constructor Parameter Object:**
|
|
56
|
-
|
|
57
|
-
- `lineColor` - border line color. default - `0x66cfff`
|
|
58
|
-
- `handleColor` - (`number`) - handles' fill color. default - `0xffffff`
|
|
59
|
-
- `controlsSize` - (`number`) - handles' size in pixels. default - `10`
|
|
60
|
-
- `debug` - (`boolean`) - show scaling distance debug lines. default - `false`
|
|
61
|
-
- `generateAnchorMark` - a function to generate your custom anchor mark. default - `undefined` (uses default anchor mark)
|
|
62
|
-
|
|
63
|
-
**returns:** `PIXI.Container` (the select tool)
|
|
64
|
-
|
|
65
|
-
<!-- INSERT GENERATED DOCS END -->
|
|
1
|
+
# Free Transform Tool for PIXI.js
|
|
2
|
+
|
|
3
|
+
Works with pixi.js v8 and above.
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
### ✨ Features
|
|
8
|
+
|
|
9
|
+
- Translate - Drag to move anywhere
|
|
10
|
+
- Scale - Scale on X, Y or both axis'
|
|
11
|
+
- Rotate - drag to rotate
|
|
12
|
+
- Anchor point - update anchor point of transforms
|
|
13
|
+
- Snapping - hold ctrl to snap rotation at 45degrees, snap anchor point to edges and corners.
|
|
14
|
+
- Theming - custom border color, control size and color, and anchor point graphic
|
|
15
|
+
|
|
16
|
+
> Note - all transformations are applied wrt the pivot point, update pivot point to achieve the desired result.
|
|
17
|
+
|
|
18
|
+
## Installation
|
|
19
|
+
|
|
20
|
+
```bash
|
|
21
|
+
npm install @quinninc/pixi-transformer
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
## Usage
|
|
25
|
+
|
|
26
|
+
```tsx
|
|
27
|
+
const root = new Container();
|
|
28
|
+
app.stage.addChild(root);
|
|
29
|
+
|
|
30
|
+
// create tool and add to stage
|
|
31
|
+
const selectTool = new FreeTransformTool();
|
|
32
|
+
selectTool.label = "transform-tool";
|
|
33
|
+
root.addChild(selectTool);
|
|
34
|
+
|
|
35
|
+
const obj = new Sprite({
|
|
36
|
+
texture: Texture.from("lenna"),
|
|
37
|
+
label: "lenna",
|
|
38
|
+
eventMode: "static",
|
|
39
|
+
});
|
|
40
|
+
|
|
41
|
+
root.addChild(obj);
|
|
42
|
+
|
|
43
|
+
obj.on("pointertap", (ev) => {
|
|
44
|
+
console.log("select - ", ev.currentTarget.label);
|
|
45
|
+
selectTool.select(ev.currentTarget);
|
|
46
|
+
});
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
## API
|
|
50
|
+
|
|
51
|
+
<!-- INSERT GENERATED DOCS START -->
|
|
52
|
+
|
|
53
|
+
### `FreeTransformTool` (class)
|
|
54
|
+
|
|
55
|
+
**Constructor Parameter Object:**
|
|
56
|
+
|
|
57
|
+
- `lineColor` - border line color. default - `0x66cfff`
|
|
58
|
+
- `handleColor` - (`number`) - handles' fill color. default - `0xffffff`
|
|
59
|
+
- `controlsSize` - (`number`) - handles' size in pixels. default - `10`
|
|
60
|
+
- `debug` - (`boolean`) - show scaling distance debug lines. default - `false`
|
|
61
|
+
- `generateAnchorMark` - a function to generate your custom anchor mark. default - `undefined` (uses default anchor mark)
|
|
62
|
+
|
|
63
|
+
**returns:** `PIXI.Container` (the select tool)
|
|
64
|
+
|
|
65
|
+
<!-- INSERT GENERATED DOCS END -->
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@quinninc/pixi-transformer",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "0.0.
|
|
4
|
+
"version": "0.0.2",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
7
7
|
"module": "dist/index.js",
|
|
@@ -15,15 +15,19 @@
|
|
|
15
15
|
"name": "Rohit Kaushal",
|
|
16
16
|
"url": "https://github.com/RohitKaushal7"
|
|
17
17
|
},
|
|
18
|
+
"license": "MIT",
|
|
18
19
|
"scripts": {
|
|
19
20
|
"dev": "tsc -w",
|
|
20
|
-
"build": "tsc"
|
|
21
|
+
"build": "tsc",
|
|
22
|
+
"deploy": "npm run build && npm version patch && npm publish --access public"
|
|
21
23
|
},
|
|
22
24
|
"devDependencies": {
|
|
23
25
|
"typescript": "^5.2.2",
|
|
24
|
-
"vite": "^5.3.1"
|
|
26
|
+
"vite": "^5.3.1",
|
|
27
|
+
"pixi.js": "^8.2.1"
|
|
25
28
|
},
|
|
26
|
-
"dependencies": {
|
|
27
|
-
|
|
29
|
+
"dependencies": {},
|
|
30
|
+
"peerDependencies": {
|
|
31
|
+
"pixi.js": "^8.2.1"
|
|
28
32
|
}
|
|
29
33
|
}
|