pixi-solid 0.0.10 → 0.0.13
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/dist/index.js +35 -9
- package/dist/index.js.map +1 -0
- package/dist/pixi-application.js +42 -68
- package/dist/pixi-application.js.map +1 -1
- package/dist/pixi-canvas.js +34 -63
- package/dist/pixi-canvas.js.map +1 -1
- package/dist/pixi-components.js +48 -117
- package/dist/pixi-components.js.map +1 -1
- package/dist/pixi-events.js +73 -72
- package/dist/pixi-events.js.map +1 -1
- package/dist/pixi-stage.js +10 -27
- package/dist/pixi-stage.js.map +1 -1
- package/dist/renderer.js +82 -58
- package/dist/renderer.js.map +1 -1
- package/dist/types/index.d.ts +1 -1
- package/dist/types/pixi-application.d.ts +1 -1
- package/dist/types/pixi-components.d.ts +4 -1
- package/dist/types/pixi-events.d.ts +2 -2
- package/dist/types/use-ticker.d.ts +0 -3
- package/dist/types/utils/index.d.ts +2 -0
- package/dist/types/utils/object-fit.d.ts +12 -0
- package/dist/use-resize.js +13 -26
- package/dist/use-resize.js.map +1 -1
- package/dist/use-ticker.js +14 -43
- package/dist/use-ticker.js.map +1 -1
- package/dist/utils/index.js +5 -0
- package/dist/utils/index.js.map +1 -0
- package/dist/utils/object-fit.js +37 -0
- package/dist/utils/object-fit.js.map +1 -0
- package/package.json +5 -1
package/dist/pixi-events.js
CHANGED
|
@@ -1,72 +1,73 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
1
|
+
const t = [
|
|
2
|
+
"click",
|
|
3
|
+
"mousedown",
|
|
4
|
+
"mouseenter",
|
|
5
|
+
"mouseleave",
|
|
6
|
+
"mousemove",
|
|
7
|
+
"mouseout",
|
|
8
|
+
"mouseover",
|
|
9
|
+
"mouseup",
|
|
10
|
+
"mouseupoutside",
|
|
11
|
+
"pointercancel",
|
|
12
|
+
"pointerdown",
|
|
13
|
+
"pointerenter",
|
|
14
|
+
"pointerleave",
|
|
15
|
+
"pointermove",
|
|
16
|
+
"pointerout",
|
|
17
|
+
"pointerover",
|
|
18
|
+
"pointertap",
|
|
19
|
+
"pointerup",
|
|
20
|
+
"pointerupoutside",
|
|
21
|
+
"rightclick",
|
|
22
|
+
"rightdown",
|
|
23
|
+
"rightup",
|
|
24
|
+
"rightupoutside",
|
|
25
|
+
"tap",
|
|
26
|
+
"touchcancel",
|
|
27
|
+
"touchend",
|
|
28
|
+
"touchendoutside",
|
|
29
|
+
"touchmove",
|
|
30
|
+
"touchstart",
|
|
31
|
+
"wheel",
|
|
32
|
+
"globalmousemove",
|
|
33
|
+
"globalpointermove",
|
|
34
|
+
"globaltouchmove",
|
|
35
|
+
"clickcapture",
|
|
36
|
+
"mousedowncapture",
|
|
37
|
+
"mouseentercapture",
|
|
38
|
+
"mouseleavecapture",
|
|
39
|
+
"mousemovecapture",
|
|
40
|
+
"mouseoutcapture",
|
|
41
|
+
"mouseovercapture",
|
|
42
|
+
"mouseupcapture",
|
|
43
|
+
"mouseupoutsidecapture",
|
|
44
|
+
"pointercancelcapture",
|
|
45
|
+
"pointerdowncapture",
|
|
46
|
+
"pointerentercapture",
|
|
47
|
+
"pointerleavecapture",
|
|
48
|
+
"pointermovecapture",
|
|
49
|
+
"pointeroutcapture",
|
|
50
|
+
"pointerovercapture",
|
|
51
|
+
"pointertapcapture",
|
|
52
|
+
"pointerupcapture",
|
|
53
|
+
"pointerupoutsidecapture",
|
|
54
|
+
"rightclickcapture",
|
|
55
|
+
"rightdowncapture",
|
|
56
|
+
"rightupcapture",
|
|
57
|
+
"rightupoutsidecapture",
|
|
58
|
+
"tapcapture",
|
|
59
|
+
"touchcancelcapture",
|
|
60
|
+
"touchendcapture",
|
|
61
|
+
"touchendoutsidecapture",
|
|
62
|
+
"touchmovecapture",
|
|
63
|
+
"touchstartcapture",
|
|
64
|
+
"wheelcapture"
|
|
65
|
+
], o = t.map(
|
|
66
|
+
(e) => `on${e}`
|
|
67
|
+
), u = new Set(o);
|
|
68
|
+
export {
|
|
69
|
+
u as PIXI_EVENT_HANDLER_NAME_SET,
|
|
70
|
+
t as PIXI_EVENT_NAMES,
|
|
71
|
+
o as PIXI_SOLID_EVENT_HANDLER_NAMES
|
|
72
|
+
};
|
|
73
|
+
//# sourceMappingURL=pixi-events.js.map
|
package/dist/pixi-events.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pixi-events.js","
|
|
1
|
+
{"version":3,"file":"pixi-events.js","sources":["../src/pixi-events.ts"],"sourcesContent":["import type { FederatedEventEmitterTypes } from \"pixi.js\";\n\nexport const PIXI_EVENT_NAMES: (keyof FederatedEventEmitterTypes)[] = [\n \"click\",\n \"mousedown\",\n \"mouseenter\",\n \"mouseleave\",\n \"mousemove\",\n \"mouseout\",\n \"mouseover\",\n \"mouseup\",\n \"mouseupoutside\",\n \"pointercancel\",\n \"pointerdown\",\n \"pointerenter\",\n \"pointerleave\",\n \"pointermove\",\n \"pointerout\",\n \"pointerover\",\n \"pointertap\",\n \"pointerup\",\n \"pointerupoutside\",\n \"rightclick\",\n \"rightdown\",\n \"rightup\",\n \"rightupoutside\",\n \"tap\",\n \"touchcancel\",\n \"touchend\",\n \"touchendoutside\",\n \"touchmove\",\n \"touchstart\",\n \"wheel\",\n \"globalmousemove\",\n \"globalpointermove\",\n \"globaltouchmove\",\n \"clickcapture\",\n \"mousedowncapture\",\n \"mouseentercapture\",\n \"mouseleavecapture\",\n \"mousemovecapture\",\n \"mouseoutcapture\",\n \"mouseovercapture\",\n \"mouseupcapture\",\n \"mouseupoutsidecapture\",\n \"pointercancelcapture\",\n \"pointerdowncapture\",\n \"pointerentercapture\",\n \"pointerleavecapture\",\n \"pointermovecapture\",\n \"pointeroutcapture\",\n \"pointerovercapture\",\n \"pointertapcapture\",\n \"pointerupcapture\",\n \"pointerupoutsidecapture\",\n \"rightclickcapture\",\n \"rightdowncapture\",\n \"rightupcapture\",\n \"rightupoutsidecapture\",\n \"tapcapture\",\n \"touchcancelcapture\",\n \"touchendcapture\",\n \"touchendoutsidecapture\",\n \"touchmovecapture\",\n \"touchstartcapture\",\n \"wheelcapture\",\n] as const;\n\nexport const PIXI_SOLID_EVENT_HANDLER_NAMES = PIXI_EVENT_NAMES.map(\n (eventName) => `on${eventName}` as const,\n);\n\nexport type PixiEventHandlerMap = {\n [K in (typeof PIXI_EVENT_NAMES)[number] as `on${K}`]?:\n | null\n | ((...args: FederatedEventEmitterTypes[K]) => void);\n};\n\nexport const PIXI_EVENT_HANDLER_NAME_SET: Readonly<\n Set<(typeof PIXI_SOLID_EVENT_HANDLER_NAMES)[number]>\n> = new Set(PIXI_SOLID_EVENT_HANDLER_NAMES);\n\n/**\n * This is a type-safe check that ensures `PIXI_EVENT_NAMES` includes every key from Pixi's `AllFederatedEventMap` type.\n * It will cause a build error if any event names are missing.\n */\ntype MissingKeys = Exclude<keyof FederatedEventEmitterTypes, (typeof PIXI_EVENT_NAMES)[number]>;\ntype AllEventsAreHandled = MissingKeys extends never\n ? true\n : `Error: Missing event keys: ${MissingKeys}`;\nconst allEventsAreHandled: AllEventsAreHandled = true;\nvoid allEventsAreHandled;\n"],"names":["PIXI_EVENT_NAMES","PIXI_SOLID_EVENT_HANDLER_NAMES","eventName","PIXI_EVENT_HANDLER_NAME_SET"],"mappings":"AAEO,MAAMA,IAAyD;AAAA,EACpE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAEaC,IAAiCD,EAAiB;AAAA,EAC7D,CAACE,MAAc,KAAKA,CAAS;AAC/B,GAQaC,IAET,IAAI,IAAIF,CAA8B;"}
|
package/dist/pixi-stage.js
CHANGED
|
@@ -1,28 +1,11 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
* PixiStage
|
|
8
|
-
*
|
|
9
|
-
* The root container for rendering Pixi display objects. This component
|
|
10
|
-
* uses the application stage (`pixiApp.stage`) as the mount point and
|
|
11
|
-
* applies props and event handlers to it.
|
|
12
|
-
*
|
|
13
|
-
* Props:
|
|
14
|
-
* - `ref` (optional): receives the stage container reference.
|
|
15
|
-
* - Event handler props (e.g. `onpointerdown`) are forwarded to the stage.
|
|
16
|
-
* - Any other container options supported by Pixi may be passed.
|
|
17
|
-
*
|
|
18
|
-
* Children passed to `PixiStage` are inserted into the application stage.
|
|
19
|
-
*/
|
|
20
|
-
const PixiStage = (props) => {
|
|
21
|
-
const pixiApp = usePixiApp();
|
|
22
|
-
applyProps(pixiApp.stage, props);
|
|
23
|
-
return memo(() => pixiApp.stage);
|
|
1
|
+
import { memo as r } from "solid-js/web";
|
|
2
|
+
import { usePixiApp as t } from "./pixi-application.js";
|
|
3
|
+
import { applyProps as i } from "./pixi-components.js";
|
|
4
|
+
const a = (o) => {
|
|
5
|
+
const p = t();
|
|
6
|
+
return i(p.stage, o), r(() => p.stage);
|
|
24
7
|
};
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
//# sourceMappingURL=pixi-stage.js.map
|
|
8
|
+
export {
|
|
9
|
+
a as PixiStage
|
|
10
|
+
};
|
|
11
|
+
//# sourceMappingURL=pixi-stage.js.map
|
package/dist/pixi-stage.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pixi-stage.js","
|
|
1
|
+
{"version":3,"file":"pixi-stage.js","sources":["../src/pixi-stage.tsx"],"sourcesContent":["import type { Container, ContainerOptions } from \"pixi.js\";\nimport type { JSX, Ref } from \"solid-js\";\nimport { usePixiApp } from \"./pixi-application\";\nimport { applyProps } from \"./pixi-components\";\nimport type { PixiEventHandlerMap } from \"./pixi-events\";\n\nexport type PixiStageProps = PixiEventHandlerMap &\n Omit<ContainerOptions, \"children\"> & {\n ref?: Ref<Container>;\n children?: JSX.Element;\n };\n\n/**\n * PixiStage\n *\n * The root container for rendering Pixi display objects. This component\n * uses the application stage (`pixiApp.stage`) as the mount point and\n * applies props and event handlers to it.\n *\n * Props:\n * - `ref` (optional): receives the stage container reference.\n * - Event handler props (e.g. `onpointerdown`) are forwarded to the stage.\n * - Any other container options supported by Pixi may be passed.\n *\n * Children passed to `PixiStage` are inserted into the application stage.\n */\nexport const PixiStage = (props: PixiStageProps): JSX.Element => {\n const pixiApp = usePixiApp();\n\n applyProps(pixiApp.stage, props);\n\n return <>{pixiApp.stage}</>;\n};\n"],"names":["PixiStage","props","pixiApp","usePixiApp","applyProps","stage","_$memo"],"mappings":";;;AA0BO,MAAMA,IAAYA,CAACC,MAAuC;AAC/D,QAAMC,IAAUC,EAAAA;AAEhBC,SAAAA,EAAWF,EAAQG,OAAOJ,CAAK,GAE/BK,EAAA,MAAUJ,EAAQG,KAAK;AACzB;"}
|
package/dist/renderer.js
CHANGED
|
@@ -1,59 +1,83 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
1
|
+
import { Text as o } from "pixi.js";
|
|
2
|
+
import { createRenderer as d } from "solid-js/universal";
|
|
3
|
+
import { PIXI_EVENT_HANDLER_NAME_SET as c } from "./pixi-events.js";
|
|
4
|
+
const {
|
|
5
|
+
effect: f,
|
|
6
|
+
memo: h,
|
|
7
|
+
createComponent: m,
|
|
8
|
+
createElement: u,
|
|
9
|
+
createTextNode: p,
|
|
10
|
+
insertNode: x,
|
|
11
|
+
insert: N,
|
|
12
|
+
setProp: E,
|
|
13
|
+
mergeProps: C,
|
|
14
|
+
use: P,
|
|
15
|
+
render: v,
|
|
16
|
+
spread: T
|
|
17
|
+
} = d({
|
|
18
|
+
createElement(e) {
|
|
19
|
+
throw new Error(`Cannot create element "${e}". Please import components directly from 'pixi-solid' and use them with a capital letter.`);
|
|
20
|
+
},
|
|
21
|
+
createTextNode(e) {
|
|
22
|
+
return new o({
|
|
23
|
+
text: e
|
|
24
|
+
});
|
|
25
|
+
},
|
|
26
|
+
replaceText(e, t) {
|
|
27
|
+
e.text = t;
|
|
28
|
+
},
|
|
29
|
+
setProperty(e, t, r, i) {
|
|
30
|
+
if (c.has(t)) {
|
|
31
|
+
const n = t.slice(2);
|
|
32
|
+
i && e.removeEventListener(n, i), e.addEventListener(n, r);
|
|
33
|
+
return;
|
|
34
|
+
}
|
|
35
|
+
if (t in e) {
|
|
36
|
+
e[t] = r;
|
|
37
|
+
return;
|
|
38
|
+
}
|
|
39
|
+
},
|
|
40
|
+
insertNode(e, t, r) {
|
|
41
|
+
if ("attach" in e && typeof e.attach == "function") {
|
|
42
|
+
e.attach(t);
|
|
43
|
+
return;
|
|
44
|
+
}
|
|
45
|
+
if (!("addChildAt" in e) || !("addChild" in e) || typeof e.addChild != "function")
|
|
46
|
+
throw new Error("Parent does not support children.");
|
|
47
|
+
r ? e.addChildAt(t, e.children.indexOf(r)) : e.addChild(t);
|
|
48
|
+
},
|
|
49
|
+
isTextNode(e) {
|
|
50
|
+
return e instanceof o;
|
|
51
|
+
},
|
|
52
|
+
removeNode(e, t) {
|
|
53
|
+
t.removeFromParent(), t.destroy({
|
|
54
|
+
children: !0
|
|
55
|
+
});
|
|
56
|
+
},
|
|
57
|
+
getParentNode(e) {
|
|
58
|
+
return e?.parent ?? void 0;
|
|
59
|
+
},
|
|
60
|
+
getFirstChild(e) {
|
|
61
|
+
return e.children?.[0];
|
|
62
|
+
},
|
|
63
|
+
getNextSibling(e) {
|
|
64
|
+
if (!e.parent) return;
|
|
65
|
+
const t = e.parent.children.indexOf(e);
|
|
66
|
+
return t > -1 ? e.parent.children[t + 1] : void 0;
|
|
67
|
+
}
|
|
55
68
|
});
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
69
|
+
export {
|
|
70
|
+
m as createComponent,
|
|
71
|
+
u as createElement,
|
|
72
|
+
p as createTextNode,
|
|
73
|
+
f as effect,
|
|
74
|
+
N as insert,
|
|
75
|
+
x as insertNode,
|
|
76
|
+
h as memo,
|
|
77
|
+
C as mergeProps,
|
|
78
|
+
v as render,
|
|
79
|
+
E as setProp,
|
|
80
|
+
T as spread,
|
|
81
|
+
P as use
|
|
82
|
+
};
|
|
83
|
+
//# sourceMappingURL=renderer.js.map
|
package/dist/renderer.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"renderer.js","
|
|
1
|
+
{"version":3,"file":"renderer.js","sources":["../src/renderer.tsx"],"sourcesContent":["import type { Container as PixiContainer } 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<PixiContainer>({\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\n if (name in node) {\n (node as any)[name] = value;\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 (\n !(\"addChildAt\" in parent) ||\n !(\"addChild\" in parent) ||\n typeof parent.addChild !== \"function\"\n ) {\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 node.removeFromParent();\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","_","removeFromParent","destroy","getParentNode","undefined","getFirstChild","getNextSibling","index"],"mappings":";;;AAMO,MAAM;AAAA,EACXA,QAAAA;AAAAA,EACAC,MAAAA;AAAAA,EACAC,iBAAAA;AAAAA,EACAC,eAAAA;AAAAA,EACAC,gBAAAA;AAAAA,EACAC,YAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,YAAAA;AAAAA,EACAC,KAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,QAAAA;AACF,IAAIC,EAA8B;AAAA,EAChCT,cAAcU,GAAc;AAK1B,UAAM,IAAIC,MACR,0BAA0BD,CAAI,4FAChC;AAAA,EACF;AAAA,EACAT,eAAeW,GAAO;AACpB,WAAO,IAAIC,EAAS;AAAA,MAAEC,MAAMF;AAAAA,IAAAA,CAAO;AAAA,EACrC;AAAA,EACAG,YAAYC,GAAoBJ,GAAO;AACrCI,IAAAA,EAASF,OAAOF;AAAAA,EAClB;AAAA,EACAK,YAAYC,GAAMR,GAAME,GAAOO,GAAM;AAEnC,QAAIC,EAA4BC,IAAIX,CAAiC,GAAG;AAEtE,YAAMY,IAAYZ,EAAKa,MAAM,CAAC;AAE9B,MAAIJ,KACFD,EAAKM,oBAAoBF,GAAWH,CAAW,GAEjDD,EAAKO,iBAAiBH,GAAWV,CAAY;AAC7C;AAAA,IACF;AAEA,QAAIF,KAAQQ,GAAM;AACfA,MAAAA,EAAaR,CAAI,IAAIE;AACtB;AAAA,IACF;AAAA,EACF;AAAA,EACAV,WAAWwB,GAAQR,GAAMS,GAAQ;AAE/B,QAAI,YAAYD,KAAU,OAAOA,EAAOE,UAAW,YAAY;AAC7DF,MAAAA,EAAOE,OAAOV,CAAI;AAElB;AAAA,IACF;AAEA,QACE,EAAE,gBAAgBQ,MAClB,EAAE,cAAcA,MAChB,OAAOA,EAAOG,YAAa;AAE3B,YAAM,IAAIlB,MAAM,mCAAmC;AAGrD,IAAIgB,IACFD,EAAOI,WAAWZ,GAAMQ,EAAOK,SAASC,QAAQL,CAAM,CAAC,IAEvDD,EAAOG,SAASX,CAAI;AAAA,EAExB;AAAA,EACAe,WAAWf,GAAM;AACf,WAAOA,aAAgBL;AAAAA,EACzB;AAAA,EACAqB,WAAWC,GAAGjB,GAAM;AAClBA,IAAAA,EAAKkB,iBAAAA,GACLlB,EAAKmB,QAAQ;AAAA,MAAEN,UAAU;AAAA,IAAA,CAAM;AAAA,EACjC;AAAA,EACAO,cAAcpB,GAAM;AAClB,WAAOA,GAAMQ,UAAUa;AAAAA,EACzB;AAAA,EACAC,cAActB,GAAM;AAClB,WAAOA,EAAKa,WAAW,CAAC;AAAA,EAC1B;AAAA,EACAU,eAAevB,GAAM;AACnB,QAAI,CAACA,EAAKQ,OAAQ;AAClB,UAAMgB,IAAQxB,EAAKQ,OAAOK,SAASC,QAAQd,CAAI;AAE/C,WAAOwB,IAAQ,KAAKxB,EAAKQ,OAAOK,SAASW,IAAQ,CAAC,IAAIH;AAAAA,EACxD;AACF,CAAC;"}
|
package/dist/types/index.d.ts
CHANGED
|
@@ -4,7 +4,7 @@ export { PixiCanvas } from "./pixi-canvas";
|
|
|
4
4
|
export type { ContainerProps, LeafProps } from "./pixi-components";
|
|
5
5
|
export { AnimatedSprite, BitmapText, Container, Graphics, HTMLText, MeshPlane, MeshRope, MeshSimple, NineSliceSprite, ParticleContainer, PerspectiveMesh, RenderContainer, RenderLayer, Sprite, Text, TilingSprite, } from "./pixi-components";
|
|
6
6
|
export type { PixiEventHandlerMap } from "./pixi-events";
|
|
7
|
-
export { PIXI_EVENT_NAMES } from "./pixi-events";
|
|
7
|
+
export { PIXI_EVENT_NAMES, PIXI_SOLID_EVENT_HANDLER_NAMES } from "./pixi-events";
|
|
8
8
|
export type { PixiStageProps } from "./pixi-stage";
|
|
9
9
|
export { PixiStage } from "./pixi-stage";
|
|
10
10
|
export { useResize } from "./use-resize";
|
|
@@ -14,7 +14,7 @@ export declare const usePixiApp: () => Application<import("pixi.js").Renderer>;
|
|
|
14
14
|
* to allow passing configuration directly to the Pixi.js Application constructor,
|
|
15
15
|
* but omits properties that are handled by the component itself.
|
|
16
16
|
*/
|
|
17
|
-
export type PixiApplicationProps = Partial<Omit<ApplicationOptions, "children" | "resizeTo"
|
|
17
|
+
export type PixiApplicationProps = Partial<Omit<ApplicationOptions, "children" | "resizeTo">> & {
|
|
18
18
|
ref?: Ref<Application>;
|
|
19
19
|
children?: JSX.Element;
|
|
20
20
|
};
|
|
@@ -20,8 +20,11 @@ export declare const SOLID_PROP_KEYS: readonly ["ref", "as", "children"];
|
|
|
20
20
|
*
|
|
21
21
|
* @param instance The Pixi instance we want to apply props to.
|
|
22
22
|
* @param props The props object.
|
|
23
|
+
* @param defer Defers the createRenderEffect so the props aren't set on the first run.
|
|
24
|
+
* This is useful because setting initialisation props can have unintended side effects.
|
|
25
|
+
* Notibly in AnimatedSprite, if we set the textures roperty after instantiation it will stop the instance from playing.
|
|
23
26
|
*/
|
|
24
|
-
export declare const applyProps: <InstanceType extends PixiContainer, OptionsType extends ContainerProps<InstanceType>>(instance: InstanceType, props: OptionsType) => void;
|
|
27
|
+
export declare const applyProps: <InstanceType extends PixiContainer, OptionsType extends ContainerProps<InstanceType>>(instance: InstanceType, props: OptionsType, defer?: boolean) => void;
|
|
25
28
|
/**
|
|
26
29
|
* A SolidJS component that renders a `PIXI.AnimatedSprite`.
|
|
27
30
|
*/
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { FederatedEventEmitterTypes } from "pixi.js";
|
|
2
2
|
export declare const PIXI_EVENT_NAMES: (keyof FederatedEventEmitterTypes)[];
|
|
3
|
-
export declare const
|
|
3
|
+
export declare const PIXI_SOLID_EVENT_HANDLER_NAMES: ("onclick" | "onmousedown" | "onmouseenter" | "onmouseleave" | "onmousemove" | "onmouseout" | "onmouseover" | "onmouseup" | "onmouseupoutside" | "onpointercancel" | "onpointerdown" | "onpointerenter" | "onpointerleave" | "onpointermove" | "onpointerout" | "onpointerover" | "onpointertap" | "onpointerup" | "onpointerupoutside" | "onrightclick" | "onrightdown" | "onrightup" | "onrightupoutside" | "ontap" | "ontouchcancel" | "ontouchend" | "ontouchendoutside" | "ontouchmove" | "ontouchstart" | "onwheel" | "onglobalmousemove" | "onglobalpointermove" | "onglobaltouchmove" | "onclickcapture" | "onmousedowncapture" | "onmouseentercapture" | "onmouseleavecapture" | "onmousemovecapture" | "onmouseoutcapture" | "onmouseovercapture" | "onmouseupcapture" | "onmouseupoutsidecapture" | "onpointercancelcapture" | "onpointerdowncapture" | "onpointerentercapture" | "onpointerleavecapture" | "onpointermovecapture" | "onpointeroutcapture" | "onpointerovercapture" | "onpointertapcapture" | "onpointerupcapture" | "onpointerupoutsidecapture" | "onrightclickcapture" | "onrightdowncapture" | "onrightupcapture" | "onrightupoutsidecapture" | "ontapcapture" | "ontouchcancelcapture" | "ontouchendcapture" | "ontouchendoutsidecapture" | "ontouchmovecapture" | "ontouchstartcapture" | "onwheelcapture")[];
|
|
4
4
|
export type PixiEventHandlerMap = {
|
|
5
5
|
[K in (typeof PIXI_EVENT_NAMES)[number] as `on${K}`]?: null | ((...args: FederatedEventEmitterTypes[K]) => void);
|
|
6
6
|
};
|
|
7
|
-
export declare const PIXI_EVENT_HANDLER_NAME_SET: Readonly<Set<(typeof
|
|
7
|
+
export declare const PIXI_EVENT_HANDLER_NAME_SET: Readonly<Set<(typeof PIXI_SOLID_EVENT_HANDLER_NAMES)[number]>>;
|
|
@@ -24,8 +24,5 @@ export declare const useTicker: () => Ticker;
|
|
|
24
24
|
* @param tickerCallback - The function to call on each ticker update. It receives
|
|
25
25
|
* the `PIXI.Ticker` instance as its argument.
|
|
26
26
|
*
|
|
27
|
-
* **Example**
|
|
28
|
-
* @example {@link ./examples/useTick.example.tsx}
|
|
29
|
-
* {@includeCode ./examples/useTick.example.tsx}
|
|
30
27
|
*/
|
|
31
28
|
export declare const useTick: (tickerCallback: TickerCallback<Ticker>) => void;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import type * as Pixi from "pixi.js";
|
|
2
|
+
export type ObjectFitMode = "cover" | "contain" | "fill" | "scale-down";
|
|
3
|
+
/**
|
|
4
|
+
* Scale an object to fit within the given bounds according to the specified fit mode.
|
|
5
|
+
* @param object The object to be scaled.
|
|
6
|
+
* @param bounds The bounds it should fit within.
|
|
7
|
+
* @param fitMode The object fit mode to apply.
|
|
8
|
+
*/
|
|
9
|
+
export declare const objectFit: (object: Pixi.Container, bounds: {
|
|
10
|
+
width: number;
|
|
11
|
+
height: number;
|
|
12
|
+
}, fitMode: ObjectFitMode) => void;
|
package/dist/use-resize.js
CHANGED
|
@@ -1,27 +1,14 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
* Because we listen for the renderer's "resize" event, this hook will work correctly whether the window is resized or just the DOM element the PixiCanvas is inside changes size.
|
|
11
|
-
*/
|
|
12
|
-
const useResize = (resizeCallback) => {
|
|
13
|
-
const app = usePixiApp();
|
|
14
|
-
app.renderer.screen.fit;
|
|
15
|
-
const handleResize = () => {
|
|
16
|
-
resizeCallback(app.renderer.screen);
|
|
17
|
-
};
|
|
18
|
-
handleResize();
|
|
19
|
-
app.renderer.addListener("resize", handleResize);
|
|
20
|
-
onCleanup(() => {
|
|
21
|
-
app.renderer.removeListener("resize", handleResize);
|
|
22
|
-
});
|
|
1
|
+
import { onCleanup as s } from "solid-js";
|
|
2
|
+
import { usePixiApp as i } from "./pixi-application.js";
|
|
3
|
+
const t = (n) => {
|
|
4
|
+
const e = i(), r = () => {
|
|
5
|
+
n(e.renderer.screen);
|
|
6
|
+
};
|
|
7
|
+
r(), e.renderer.addListener("resize", r), s(() => {
|
|
8
|
+
e.renderer.removeListener("resize", r);
|
|
9
|
+
});
|
|
23
10
|
};
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
//# sourceMappingURL=use-resize.js.map
|
|
11
|
+
export {
|
|
12
|
+
t as useResize
|
|
13
|
+
};
|
|
14
|
+
//# sourceMappingURL=use-resize.js.map
|
package/dist/use-resize.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-resize.js","
|
|
1
|
+
{"version":3,"file":"use-resize.js","sources":["../src/use-resize.ts"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport { onCleanup } from \"solid-js\";\nimport { usePixiApp } from \"./pixi-application\";\n\n/**\n * A SolidJS hook that runs a callback function whenever the PixiJS renderer is resized.\n *\n * @param resizeCallback A callback function that receives the updated screen dimensions as a `Pixi.Rectangle` object. This function will be called immediately upon hook initialization and then on every subsequent resize event.\n *\n * Because we listen for the renderer's \"resize\" event, this hook will work correctly whether the window is resized or just the DOM element the PixiCanvas is inside changes size.\n */\nexport const useResize = (resizeCallback: (screen: Pixi.Rectangle) => void): void => {\n const app = usePixiApp();\n\n const handleResize = () => {\n resizeCallback(app.renderer.screen);\n };\n\n handleResize();\n\n app.renderer.addListener(\"resize\", handleResize);\n\n onCleanup(() => {\n app.renderer.removeListener(\"resize\", handleResize);\n });\n};\n"],"names":["useResize","resizeCallback","app","usePixiApp","handleResize","onCleanup"],"mappings":";;AAWO,MAAMA,IAAY,CAACC,MAA2D;AACnF,QAAMC,IAAMC,EAAA,GAENC,IAAe,MAAM;AACzB,IAAAH,EAAeC,EAAI,SAAS,MAAM;AAAA,EACpC;AAEA,EAAAE,EAAA,GAEAF,EAAI,SAAS,YAAY,UAAUE,CAAY,GAE/CC,EAAU,MAAM;AACd,IAAAH,EAAI,SAAS,eAAe,UAAUE,CAAY;AAAA,EACpD,CAAC;AACH;"}
|
package/dist/use-ticker.js
CHANGED
|
@@ -1,44 +1,15 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
*
|
|
11
|
-
* @returns The PIXI.Ticker instance from the application context.
|
|
12
|
-
* @throws Will throw an error if used outside of a `PixiApplication` context provider.
|
|
13
|
-
*
|
|
14
|
-
* **Example**
|
|
15
|
-
* {@includeCode ./examples/useTicker.example.tsx}
|
|
16
|
-
*/
|
|
17
|
-
const useTicker = () => usePixiApp().ticker;
|
|
18
|
-
/**
|
|
19
|
-
* useTick
|
|
20
|
-
*
|
|
21
|
-
* A custom SolidJS hook that registers a callback function to be executed on every frame
|
|
22
|
-
* of the PIXI.Application's ticker. The callback is automatically removed when the
|
|
23
|
-
* component or hook's owning computation is cleaned up.
|
|
24
|
-
*
|
|
25
|
-
* This hook must be called from a component that is a descendant of `PixiApplication`.
|
|
26
|
-
*
|
|
27
|
-
* @param tickerCallback - The function to call on each ticker update. It receives
|
|
28
|
-
* the `PIXI.Ticker` instance as its argument.
|
|
29
|
-
*
|
|
30
|
-
* **Example**
|
|
31
|
-
* @example {@link ./examples/useTick.example.tsx}
|
|
32
|
-
* {@includeCode ./examples/useTick.example.tsx}
|
|
33
|
-
*/
|
|
34
|
-
const useTick = (tickerCallback) => {
|
|
35
|
-
const { ticker } = usePixiApp();
|
|
36
|
-
ticker.add(tickerCallback);
|
|
37
|
-
onCleanup(() => {
|
|
38
|
-
ticker.remove(tickerCallback);
|
|
39
|
-
});
|
|
1
|
+
import { onCleanup as i } from "solid-js";
|
|
2
|
+
import { usePixiApp as r } from "./pixi-application.js";
|
|
3
|
+
const s = () => r().ticker, c = (o) => {
|
|
4
|
+
const {
|
|
5
|
+
ticker: e
|
|
6
|
+
} = r();
|
|
7
|
+
e.add(o), i(() => {
|
|
8
|
+
e.remove(o);
|
|
9
|
+
});
|
|
40
10
|
};
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
11
|
+
export {
|
|
12
|
+
c as useTick,
|
|
13
|
+
s as useTicker
|
|
14
|
+
};
|
|
15
|
+
//# sourceMappingURL=use-ticker.js.map
|
package/dist/use-ticker.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-ticker.js","
|
|
1
|
+
{"version":3,"file":"use-ticker.js","sources":["../src/use-ticker.tsx"],"sourcesContent":["import type { Ticker, TickerCallback } from \"pixi.js\";\n\nimport { onCleanup } from \"solid-js\";\nimport { usePixiApp } from \"./pixi-application\";\n\n/**\n * useTicker\n *\n * A custom SolidJS hook that provides access to the PIXI.Application's shared Ticker instance.\n * This hook must be called from a component that is a descendant of `PixiApplication`.\n *\n * @returns The PIXI.Ticker instance from the application context.\n * @throws Will throw an error if used outside of a `PixiApplication` context provider.\n *\n * **Example**\n * {@includeCode ./examples/useTicker.example.tsx}\n */\nexport const useTicker = (): Ticker => usePixiApp().ticker;\n\n/**\n * useTick\n *\n * A custom SolidJS hook that registers a callback function to be executed on every frame\n * of the PIXI.Application's ticker. The callback is automatically removed when the\n * component or hook's owning computation is cleaned up.\n *\n * This hook must be called from a component that is a descendant of `PixiApplication`.\n *\n * @param tickerCallback - The function to call on each ticker update. It receives\n * the `PIXI.Ticker` instance as its argument.\n *\n */\nexport const useTick = (tickerCallback: TickerCallback<Ticker>): void => {\n const { ticker } = usePixiApp();\n\n ticker.add(tickerCallback);\n onCleanup(() => {\n ticker.remove(tickerCallback);\n });\n};\n"],"names":["useTicker","usePixiApp","ticker","useTick","tickerCallback","add","onCleanup","remove"],"mappings":";;AAiBO,MAAMA,IAAYA,MAAcC,IAAaC,QAevCC,IAAUA,CAACC,MAAiD;AACvE,QAAM;AAAA,IAAEF,QAAAA;AAAAA,EAAAA,IAAWD,EAAAA;AAEnBC,EAAAA,EAAOG,IAAID,CAAc,GACzBE,EAAU,MAAM;AACdJ,IAAAA,EAAOK,OAAOH,CAAc;AAAA,EAC9B,CAAC;AACH;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
|