pixi-solid 0.0.23 → 0.0.25
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 +4 -73
- package/dist/renderer.js +14 -13
- package/dist/renderer.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -7,13 +7,15 @@ A custom renderer for [PixiJS](https://pixijs.com/) that lets you build your sce
|
|
|
7
7
|
|
|
8
8
|
- 💙 Lightweight and flexible SolidJS library for creating PixiJS applications.
|
|
9
9
|
- 🎁 Provides a set of custom SolidJS components that create PixiJS objects instead of HTML elements.
|
|
10
|
-
-
|
|
11
|
-
-
|
|
10
|
+
- 💪 Supports all PixiJS features.
|
|
11
|
+
- 🥳 The convenience and speed of SolidJS stores and signals to manage state.
|
|
12
12
|
- ✨ All events emitted by PixiJS objects are supported.
|
|
13
13
|
- 😎 No limitations. Break out of SolidJS any time and interact directly with PixiJS.
|
|
14
14
|
- 💫 Useful helper utilities included.
|
|
15
15
|
- 🤩 Full Typescript support for type safety and auto completion.
|
|
16
16
|
|
|
17
|
+
Take a look at the [docs site 🧑💻](https://lukecarlthompson.github.io/pixi-solid/) for more information.
|
|
18
|
+
|
|
17
19
|
---
|
|
18
20
|
|
|
19
21
|
### Install
|
|
@@ -53,77 +55,6 @@ Peer dependencies of
|
|
|
53
55
|
|
|
54
56
|
---
|
|
55
57
|
|
|
56
|
-
### Basic Usage
|
|
57
|
-
|
|
58
|
-
Here's a simple example to get you started. This will render a "Hello World" text on the screen that follows your mouse.
|
|
59
|
-
|
|
60
|
-
```jsx
|
|
61
|
-
import { render } from "solid-js/web";
|
|
62
|
-
import { PixiApplication, PixiStage, getPixiApp } from "pixi-solid";
|
|
63
|
-
import { Text, FederatedPointerEvent } from "pixi.js";
|
|
64
|
-
import { createSignal, onMount } from "solid-js";
|
|
65
|
-
|
|
66
|
-
const FollowText = () => {
|
|
67
|
-
const [position, setPosition] = createSignal({ x: 0, y: 0 });
|
|
68
|
-
|
|
69
|
-
const handlePointerMove = (e: FederatedPointerEvent) => {
|
|
70
|
-
setPosition({ x: e.global.x, y: e.global.y });
|
|
71
|
-
};
|
|
72
|
-
|
|
73
|
-
return (
|
|
74
|
-
<Text
|
|
75
|
-
text="Hello World"
|
|
76
|
-
onglobalpointermove={handlePointerMove}
|
|
77
|
-
anchor={{ x: 0.5, y: 0.5 }}
|
|
78
|
-
x={position().x}
|
|
79
|
-
y={position().y}
|
|
80
|
-
style={{ fill: "white", fontSize: 24 }}
|
|
81
|
-
/>
|
|
82
|
-
);
|
|
83
|
-
};
|
|
84
|
-
|
|
85
|
-
const App = () => (
|
|
86
|
-
<div style={{ width: "100vw", height: "100vh", display: "flex", "flex-direction": "column" }}>
|
|
87
|
-
<PixiApplication background={"#1099bb"}>
|
|
88
|
-
<PixiCanvas>
|
|
89
|
-
<PixiStage eventMode={"static"}>
|
|
90
|
-
<FollowText />
|
|
91
|
-
</PixiStage>
|
|
92
|
-
</PixiCanvas>
|
|
93
|
-
</PixiApplication>
|
|
94
|
-
</div>
|
|
95
|
-
);
|
|
96
|
-
|
|
97
|
-
render(() => <App />, document.getElementById("root"));
|
|
98
|
-
```
|
|
99
|
-
|
|
100
|
-
## Core Components & Hooks
|
|
101
|
-
|
|
102
|
-
### `<PixiApplication>`
|
|
103
|
-
|
|
104
|
-
This component creates the main PixiJS `Application` instance and provides it to all child components via context. Any options passed to it are forwarded to the `Application` constructor.
|
|
105
|
-
|
|
106
|
-
### `<PixiCanvas>`
|
|
107
|
-
|
|
108
|
-
This component creates a `div` and mounts the PixiJS canvas into it. It automatically handles resizing the canvas to fit the container. Your scene components should be placed as children of `<PixiCanvas>`.
|
|
109
|
-
|
|
110
|
-
### `<PixiStage>`
|
|
111
|
-
|
|
112
|
-
This component gives us a reference to the Pixi stage which is the top level container of your scene. It is useful for listening to global events.
|
|
113
|
-
|
|
114
|
-
### `getPixiApp()`
|
|
115
|
-
|
|
116
|
-
A hook to get access to the PixiJS `Application` instance.
|
|
117
|
-
|
|
118
|
-
### `getTicker()`
|
|
119
|
-
|
|
120
|
-
A hook to get access to the Pixi ticker instance.
|
|
121
|
-
|
|
122
|
-
### `onTick()`
|
|
123
|
-
|
|
124
|
-
A hook to auto subscribe and unsubscribe to the ticker in sync with the components lifecycle.
|
|
125
|
-
Any function passed in here will be called every frame whilst the component is mounted.
|
|
126
|
-
|
|
127
58
|
## Contributing
|
|
128
59
|
|
|
129
60
|
Contributions are welcome! This project is still in its early stages, so feel free to open an issue to report a bug, suggest a feature, or submit a pull request.
|
package/dist/renderer.js
CHANGED
|
@@ -27,6 +27,10 @@ const {
|
|
|
27
27
|
textNode.text = value;
|
|
28
28
|
},
|
|
29
29
|
setProperty(node, name, value, prev) {
|
|
30
|
+
if (name in node) {
|
|
31
|
+
node[name] = value;
|
|
32
|
+
return;
|
|
33
|
+
}
|
|
30
34
|
if (PIXI_EVENT_HANDLER_NAME_SET.has(name)) {
|
|
31
35
|
const eventName = name.slice(2);
|
|
32
36
|
if (prev) {
|
|
@@ -35,33 +39,30 @@ const {
|
|
|
35
39
|
node.addEventListener(eventName, value);
|
|
36
40
|
return;
|
|
37
41
|
}
|
|
38
|
-
if (name in node) {
|
|
39
|
-
node[name] = value;
|
|
40
|
-
return;
|
|
41
|
-
}
|
|
42
42
|
},
|
|
43
|
-
insertNode(
|
|
44
|
-
if ("attach" in
|
|
45
|
-
|
|
43
|
+
insertNode(parent2, node, anchor) {
|
|
44
|
+
if ("attach" in parent2 && typeof parent2.attach === "function") {
|
|
45
|
+
parent2.attach(node);
|
|
46
46
|
return;
|
|
47
47
|
}
|
|
48
|
-
if (!("addChildAt" in
|
|
48
|
+
if (!("addChildAt" in parent2) || !("addChild" in parent2) || typeof parent2.addChild !== "function") {
|
|
49
49
|
throw new Error("Parent does not support children.");
|
|
50
50
|
}
|
|
51
51
|
if (anchor) {
|
|
52
|
-
|
|
52
|
+
parent2.addChildAt(node, parent2.children.indexOf(anchor));
|
|
53
53
|
} else {
|
|
54
|
-
|
|
54
|
+
parent2.addChild(node);
|
|
55
55
|
}
|
|
56
56
|
},
|
|
57
57
|
isTextNode(node) {
|
|
58
58
|
return node instanceof Text;
|
|
59
59
|
},
|
|
60
60
|
removeNode(_, node) {
|
|
61
|
+
if ("detach" in parent && typeof parent.detach === "function") {
|
|
62
|
+
parent.detach(node);
|
|
63
|
+
return;
|
|
64
|
+
}
|
|
61
65
|
node.removeFromParent();
|
|
62
|
-
node.destroy({
|
|
63
|
-
children: true
|
|
64
|
-
});
|
|
65
66
|
},
|
|
66
67
|
getParentNode(node) {
|
|
67
68
|
return node?.parent ?? void 0;
|
package/dist/renderer.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"renderer.js","sources":["../src/renderer.tsx"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport { Text as PixiText } from \"pixi.js\";\nimport { createRenderer } from \"solid-js/universal\";\nimport type { PIXI_EVENT_NAMES, PixiEventHandlerMap } from \"./pixi-events\";\nimport { PIXI_EVENT_HANDLER_NAME_SET } from \"./pixi-events\";\n\nexport const {\n effect,\n memo,\n createComponent,\n createElement,\n createTextNode,\n insertNode,\n insert,\n setProp,\n mergeProps,\n use,\n render,\n spread,\n} = createRenderer<Pixi.Container>({\n createElement(name: string) {\n // This function is for lowercase string tags like `<container />`.\n // To support tree-shaking, we require users to import components\n // directly and use them with an uppercase name like `<Container />`,\n // which does not call this function.\n throw new Error(\n `Cannot create element \"${name}\". Please import components directly from 'pixi-solid' and use them with a capital letter.`\n );\n },\n createTextNode(value) {\n return new PixiText({ text: value });\n },\n replaceText(textNode: PixiText, value) {\n textNode.text = value;\n },\n setProperty(node, name, value, prev) {\n // Check for event listeners and handle them appropriately.\n if (PIXI_EVENT_HANDLER_NAME_SET.has(name as keyof PixiEventHandlerMap)) {\n // Remove the 'on' prefix to get the actual event name.\n const eventName = name.slice(2) as (typeof PIXI_EVENT_NAMES)[number];\n\n if (prev) {\n node.removeEventListener(eventName, prev as any);\n }\n node.addEventListener(eventName, value as any);\n return;\n }\n
|
|
1
|
+
{"version":3,"file":"renderer.js","sources":["../src/renderer.tsx"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport { Text as PixiText } from \"pixi.js\";\nimport { createRenderer } from \"solid-js/universal\";\nimport type { PIXI_EVENT_NAMES, PixiEventHandlerMap } from \"./pixi-events\";\nimport { PIXI_EVENT_HANDLER_NAME_SET } from \"./pixi-events\";\n\nexport const {\n effect,\n memo,\n createComponent,\n createElement,\n createTextNode,\n insertNode,\n insert,\n setProp,\n mergeProps,\n use,\n render,\n spread,\n} = createRenderer<Pixi.Container>({\n createElement(name: string) {\n // This function is for lowercase string tags like `<container />`.\n // To support tree-shaking, we require users to import components\n // directly and use them with an uppercase name like `<Container />`,\n // which does not call this function.\n throw new Error(\n `Cannot create element \"${name}\". Please import components directly from 'pixi-solid' and use them with a capital letter.`\n );\n },\n createTextNode(value) {\n return new PixiText({ text: value });\n },\n replaceText(textNode: PixiText, value) {\n textNode.text = value;\n },\n setProperty(node, name, value, prev) {\n if (name in node) {\n (node as any)[name] = value;\n return;\n }\n\n // Check for event listeners and handle them appropriately.\n if (PIXI_EVENT_HANDLER_NAME_SET.has(name as keyof PixiEventHandlerMap)) {\n // Remove the 'on' prefix to get the actual event name.\n const eventName = name.slice(2) as (typeof PIXI_EVENT_NAMES)[number];\n\n if (prev) {\n node.removeEventListener(eventName, prev as any);\n }\n node.addEventListener(eventName, value as any);\n return;\n }\n },\n insertNode(parent, node, anchor) {\n // RenderLayer uses `attach` instead of `addChild`.\n if (\"attach\" in parent && typeof parent.attach === \"function\") {\n parent.attach(node);\n // Note: `attach` does not support anchoring, so we ignore the anchor.\n return;\n }\n\n if (!(\"addChildAt\" in parent) || !(\"addChild\" in parent) || typeof parent.addChild !== \"function\") {\n throw new Error(\"Parent does not support children.\");\n }\n\n if (anchor) {\n parent.addChildAt(node, parent.children.indexOf(anchor));\n } else {\n parent.addChild(node);\n }\n },\n isTextNode(node) {\n return node instanceof PixiText;\n },\n removeNode(_, node) {\n // RenderLayer uses `detach` instead of `removeChild`.\n if (\"detach\" in parent && typeof parent.detach === \"function\") {\n parent.detach(node);\n return;\n }\n\n node.removeFromParent();\n // TODO: Do we need to destroy nodes? When can we do it?\n // node.destroy({ children: true });\n },\n getParentNode(node) {\n return node?.parent ?? undefined;\n },\n getFirstChild(node) {\n return node.children?.[0];\n },\n getNextSibling(node) {\n if (!node.parent) return undefined;\n const index = node.parent.children.indexOf(node);\n // Return the next child if it exists, otherwise undefined.\n return index > -1 ? node.parent.children[index + 1] : undefined;\n },\n});\n"],"names":["effect","memo","createComponent","createElement","createTextNode","insertNode","insert","setProp","mergeProps","use","render","spread","createRenderer","name","Error","value","PixiText","text","replaceText","textNode","setProperty","node","prev","PIXI_EVENT_HANDLER_NAME_SET","has","eventName","slice","removeEventListener","addEventListener","parent","anchor","attach","addChild","addChildAt","children","indexOf","isTextNode","removeNode","_","detach","removeFromParent","getParentNode","undefined","getFirstChild","getNextSibling","index"],"mappings":";;;AAMO,MAAM;AAAA,EACXA;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AACF,IAAIC,eAA+B;AAAA,EACjCT,cAAcU,MAAc;AAK1B,UAAM,IAAIC,MACR,0BAA0BD,IAAI,4FAChC;AAAA,EACF;AAAA,EACAT,eAAeW,OAAO;AACpB,WAAO,IAAIC,KAAS;AAAA,MAAEC,MAAMF;AAAAA,IAAAA,CAAO;AAAA,EACrC;AAAA,EACAG,YAAYC,UAAoBJ,OAAO;AACrCI,aAASF,OAAOF;AAAAA,EAClB;AAAA,EACAK,YAAYC,MAAMR,MAAME,OAAOO,MAAM;AACnC,QAAIT,QAAQQ,MAAM;AACfA,WAAaR,IAAI,IAAIE;AACtB;AAAA,IACF;AAGA,QAAIQ,4BAA4BC,IAAIX,IAAiC,GAAG;AAEtE,YAAMY,YAAYZ,KAAKa,MAAM,CAAC;AAE9B,UAAIJ,MAAM;AACRD,aAAKM,oBAAoBF,WAAWH,IAAW;AAAA,MACjD;AACAD,WAAKO,iBAAiBH,WAAWV,KAAY;AAC7C;AAAA,IACF;AAAA,EACF;AAAA,EACAV,WAAWwB,SAAQR,MAAMS,QAAQ;AAE/B,QAAI,YAAYD,WAAU,OAAOA,QAAOE,WAAW,YAAY;AAC7DF,cAAOE,OAAOV,IAAI;AAElB;AAAA,IACF;AAEA,QAAI,EAAE,gBAAgBQ,YAAW,EAAE,cAAcA,YAAW,OAAOA,QAAOG,aAAa,YAAY;AACjG,YAAM,IAAIlB,MAAM,mCAAmC;AAAA,IACrD;AAEA,QAAIgB,QAAQ;AACVD,cAAOI,WAAWZ,MAAMQ,QAAOK,SAASC,QAAQL,MAAM,CAAC;AAAA,IACzD,OAAO;AACLD,cAAOG,SAASX,IAAI;AAAA,IACtB;AAAA,EACF;AAAA,EACAe,WAAWf,MAAM;AACf,WAAOA,gBAAgBL;AAAAA,EACzB;AAAA,EACAqB,WAAWC,GAAGjB,MAAM;AAElB,QAAI,YAAYQ,UAAU,OAAOA,OAAOU,WAAW,YAAY;AAC7DV,aAAOU,OAAOlB,IAAI;AAClB;AAAA,IACF;AAEAA,SAAKmB,iBAAAA;AAAAA,EAGP;AAAA,EACAC,cAAcpB,MAAM;AAClB,WAAOA,MAAMQ,UAAUa;AAAAA,EACzB;AAAA,EACAC,cAActB,MAAM;AAClB,WAAOA,KAAKa,WAAW,CAAC;AAAA,EAC1B;AAAA,EACAU,eAAevB,MAAM;AACnB,QAAI,CAACA,KAAKQ,OAAQ,QAAOa;AACzB,UAAMG,QAAQxB,KAAKQ,OAAOK,SAASC,QAAQd,IAAI;AAE/C,WAAOwB,QAAQ,KAAKxB,KAAKQ,OAAOK,SAASW,QAAQ,CAAC,IAAIH;AAAAA,EACxD;AACF,CAAC;"}
|