pixi-solid 0.0.12 → 0.0.14
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 +32 -32
- package/dist/index.js.map +1 -1
- package/dist/pixi-application.js +79 -28
- package/dist/pixi-application.js.map +1 -1
- package/dist/pixi-canvas.js +49 -25
- package/dist/pixi-canvas.js.map +1 -1
- package/dist/pixi-components.js +78 -44
- package/dist/pixi-components.js.map +1 -1
- package/dist/pixi-events.js +9 -7
- package/dist/pixi-events.js.map +1 -1
- package/dist/pixi-stage.js +8 -7
- package/dist/pixi-stage.js.map +1 -1
- package/dist/renderer.js +68 -59
- package/dist/renderer.js.map +1 -1
- package/dist/types/index.d.ts +1 -2
- package/dist/types/pixi-application.d.ts +38 -2
- package/dist/use-resize.js +11 -8
- package/dist/use-resize.js.map +1 -1
- package/dist/utils/index.js +2 -2
- package/dist/utils/object-fit.js +28 -18
- package/dist/utils/object-fit.js.map +1 -1
- package/package.json +1 -1
- package/dist/types/use-ticker.d.ts +0 -28
- package/dist/use-ticker.js +0 -15
- package/dist/use-ticker.js.map +0 -1
package/dist/index.js
CHANGED
|
@@ -1,35 +1,35 @@
|
|
|
1
|
-
import { PixiApplication
|
|
2
|
-
import { PixiCanvas
|
|
3
|
-
import { AnimatedSprite
|
|
4
|
-
import { PIXI_EVENT_NAMES
|
|
5
|
-
import { PixiStage
|
|
6
|
-
import { useResize
|
|
7
|
-
import { useTick as v, useTicker as D } from "./use-ticker.js";
|
|
1
|
+
import { PixiApplication, TickerProvider, usePixiApp, useTick, useTicker } from "./pixi-application.js";
|
|
2
|
+
import { PixiCanvas } from "./pixi-canvas.js";
|
|
3
|
+
import { AnimatedSprite, BitmapText, Container, Graphics, HTMLText, MeshPlane, MeshRope, MeshSimple, NineSliceSprite, ParticleContainer, PerspectiveMesh, RenderContainer, RenderLayer, Sprite, Text, TilingSprite } from "./pixi-components.js";
|
|
4
|
+
import { PIXI_EVENT_NAMES, PIXI_SOLID_EVENT_HANDLER_NAMES } from "./pixi-events.js";
|
|
5
|
+
import { PixiStage } from "./pixi-stage.js";
|
|
6
|
+
import { useResize } from "./use-resize.js";
|
|
8
7
|
export {
|
|
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
|
-
|
|
8
|
+
AnimatedSprite,
|
|
9
|
+
BitmapText,
|
|
10
|
+
Container,
|
|
11
|
+
Graphics,
|
|
12
|
+
HTMLText,
|
|
13
|
+
MeshPlane,
|
|
14
|
+
MeshRope,
|
|
15
|
+
MeshSimple,
|
|
16
|
+
NineSliceSprite,
|
|
17
|
+
PIXI_EVENT_NAMES,
|
|
18
|
+
PIXI_SOLID_EVENT_HANDLER_NAMES,
|
|
19
|
+
ParticleContainer,
|
|
20
|
+
PerspectiveMesh,
|
|
21
|
+
PixiApplication,
|
|
22
|
+
PixiCanvas,
|
|
23
|
+
PixiStage,
|
|
24
|
+
RenderContainer,
|
|
25
|
+
RenderLayer,
|
|
26
|
+
Sprite,
|
|
27
|
+
Text,
|
|
28
|
+
TickerProvider,
|
|
29
|
+
TilingSprite,
|
|
30
|
+
usePixiApp,
|
|
31
|
+
useResize,
|
|
32
|
+
useTick,
|
|
33
|
+
useTicker
|
|
34
34
|
};
|
|
35
35
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
package/dist/pixi-application.js
CHANGED
|
@@ -1,44 +1,95 @@
|
|
|
1
|
-
import { createComponent
|
|
2
|
-
import { Application
|
|
3
|
-
import { createContext
|
|
4
|
-
const
|
|
5
|
-
|
|
6
|
-
|
|
1
|
+
import { createComponent } from "solid-js/web";
|
|
2
|
+
import { Application } from "pixi.js";
|
|
3
|
+
import { createContext, useContext, splitProps, createResource, createEffect, onCleanup, Show } from "solid-js";
|
|
4
|
+
const PixiAppContext = createContext();
|
|
5
|
+
const TickerContext = createContext();
|
|
6
|
+
const usePixiApp = () => {
|
|
7
|
+
const app = useContext(PixiAppContext);
|
|
8
|
+
if (!app) {
|
|
7
9
|
throw new Error("usePixiApp must be used within a PixiApplication");
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
10
|
+
}
|
|
11
|
+
return app;
|
|
12
|
+
};
|
|
13
|
+
const PixiApplication = (props) => {
|
|
14
|
+
const [_solidProps, initialisationProps] = splitProps(props, ["ref", "children"]);
|
|
15
|
+
const [appResource] = createResource(async () => {
|
|
16
|
+
const app = new Application();
|
|
17
|
+
await app.init({
|
|
18
|
+
autoDensity: true,
|
|
14
19
|
resolution: Math.min(window.devicePixelRatio, 2),
|
|
15
|
-
sharedTicker:
|
|
16
|
-
...
|
|
17
|
-
})
|
|
20
|
+
sharedTicker: true,
|
|
21
|
+
...initialisationProps
|
|
22
|
+
});
|
|
23
|
+
return app;
|
|
18
24
|
});
|
|
19
|
-
|
|
20
|
-
const
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
25
|
+
createEffect(() => {
|
|
26
|
+
const app = appResource();
|
|
27
|
+
if (app) {
|
|
28
|
+
if (props.ref) {
|
|
29
|
+
props.ref(app);
|
|
30
|
+
}
|
|
31
|
+
app.ticker.autoStart = false;
|
|
32
|
+
app.ticker.start();
|
|
33
|
+
onCleanup(() => {
|
|
34
|
+
app.destroy(true, {
|
|
35
|
+
children: true
|
|
36
|
+
});
|
|
24
37
|
});
|
|
25
|
-
}
|
|
26
|
-
})
|
|
38
|
+
}
|
|
39
|
+
});
|
|
40
|
+
return createComponent(Show, {
|
|
27
41
|
get when() {
|
|
28
|
-
return
|
|
42
|
+
return appResource();
|
|
29
43
|
},
|
|
30
|
-
children: (
|
|
44
|
+
children: (app) => createComponent(PixiAppContext.Provider, {
|
|
31
45
|
get value() {
|
|
32
|
-
return
|
|
46
|
+
return app();
|
|
33
47
|
},
|
|
34
48
|
get children() {
|
|
35
|
-
return
|
|
49
|
+
return createComponent(TickerContext.Provider, {
|
|
50
|
+
get value() {
|
|
51
|
+
return app().ticker;
|
|
52
|
+
},
|
|
53
|
+
get children() {
|
|
54
|
+
return props.children;
|
|
55
|
+
}
|
|
56
|
+
});
|
|
36
57
|
}
|
|
37
58
|
})
|
|
38
59
|
});
|
|
39
60
|
};
|
|
61
|
+
const TickerProvider = (props) => {
|
|
62
|
+
return createComponent(TickerContext.Provider, {
|
|
63
|
+
get value() {
|
|
64
|
+
return props.ticker;
|
|
65
|
+
},
|
|
66
|
+
get children() {
|
|
67
|
+
return props.children;
|
|
68
|
+
}
|
|
69
|
+
});
|
|
70
|
+
};
|
|
71
|
+
const useTicker = () => {
|
|
72
|
+
const ticker = useContext(TickerContext);
|
|
73
|
+
if (!ticker) {
|
|
74
|
+
throw new Error("useTicker must be used within a PixiApplication or a TickerProvider");
|
|
75
|
+
}
|
|
76
|
+
return ticker;
|
|
77
|
+
};
|
|
78
|
+
const useTick = (tickerCallback) => {
|
|
79
|
+
const ticker = useContext(TickerContext);
|
|
80
|
+
if (!ticker) {
|
|
81
|
+
throw new Error("useTick must be used within a PixiApplication or a TickerProvider");
|
|
82
|
+
}
|
|
83
|
+
ticker.add(tickerCallback);
|
|
84
|
+
onCleanup(() => {
|
|
85
|
+
ticker.remove(tickerCallback);
|
|
86
|
+
});
|
|
87
|
+
};
|
|
40
88
|
export {
|
|
41
|
-
|
|
42
|
-
|
|
89
|
+
PixiApplication,
|
|
90
|
+
TickerProvider,
|
|
91
|
+
usePixiApp,
|
|
92
|
+
useTick,
|
|
93
|
+
useTicker
|
|
43
94
|
};
|
|
44
95
|
//# sourceMappingURL=pixi-application.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pixi-application.js","sources":["../src/pixi-application.tsx"],"sourcesContent":["import type { ApplicationOptions } from \"pixi.js\";\nimport { Application } from \"pixi.js\";\nimport type { JSX, Ref } from \"solid-js\";\nimport { createContext, createEffect, createResource, onCleanup, Show, splitProps, useContext } from \"solid-js\";\n\nconst PixiAppContext = createContext<Application>();\n\n/**\n * A custom SolidJS hook to access the root PIXI.Application instance.\n * This hook must be called from a component that is a descendant of `PixiApplication`.\n *\n * @returns The PIXI.Application instance provided by the `PixiApplication` component.\n * @throws Will throw an error if used outside of a `PixiApplication` context provider.\n */\nexport const usePixiApp = () => {\n const app = useContext(PixiAppContext);\n if (!app) {\n throw new Error(\"usePixiApp must be used within a PixiApplication\");\n }\n return app;\n};\n\n/**\n * Props for the `PixiApplication` component. It extends the PIXI.ApplicationOptions\n * to allow passing configuration directly to the Pixi.js Application constructor,\n * but omits properties that are handled by the component itself.\n */\nexport type PixiApplicationProps = Partial<Omit<ApplicationOptions, \"children\" | \"resizeTo\">> & {\n ref?: Ref<Application>;\n children?: JSX.Element;\n};\n\n/**\n * A SolidJS component that creates and manages a PIXI.Application instance.\n * It provides the application instance through context to be used by child components\n * and custom hooks like `usePixiApp`, `useTick`, and `useTicker`.\n *\n * This component should only be used once in your application.\n *\n * @param props The properties to configure the Pixi.js Application.\n *\n */\nexport const PixiApplication = (props: PixiApplicationProps) => {\n const [_solidProps, initialisationProps] = splitProps(props, [\"ref\", \"children\"]);\n\n // TODO: Split props into initialisation props and runtime props\n\n const [appResource] = createResource(async () => {\n const app = new Application();\n await app.init({\n autoDensity: true,\n resolution: Math.min(window.devicePixelRatio, 2),\n sharedTicker: true,\n ...initialisationProps,\n });\n\n return app;\n });\n\n createEffect(() => {\n const app = appResource();\n if (app) {\n if (props.ref) {\n // Solid converts the ref prop to a callback function\n (props.ref as unknown as (arg: any) => void)(app);\n }\n\n // TODO: Go through the other props that can be set at runtime and apply them here\n // e.g. backgroundColor => app.renderer.backgroundColor, etc.\n\n app.ticker.autoStart = false;\n app.ticker.start();\n\n onCleanup(() => {\n app.destroy(true, { children: true });\n });\n }\n });\n\n return (\n <Show when={appResource()}>\n {(app) => <PixiAppContext.Provider value={app()}>{props.children}</PixiAppContext.Provider
|
|
1
|
+
{"version":3,"file":"pixi-application.js","sources":["../src/pixi-application.tsx"],"sourcesContent":["import type { ApplicationOptions, Ticker, TickerCallback } from \"pixi.js\";\nimport { Application } from \"pixi.js\";\nimport type { JSX, ParentProps, Ref } from \"solid-js\";\nimport { createContext, createEffect, createResource, onCleanup, Show, splitProps, useContext } from \"solid-js\";\n\nconst PixiAppContext = createContext<Application>();\nconst TickerContext = createContext<Ticker>();\n\n/**\n * A custom SolidJS hook to access the root PIXI.Application instance.\n * This hook must be called from a component that is a descendant of `PixiApplication`.\n *\n * @returns The PIXI.Application instance provided by the `PixiApplication` component.\n * @throws Will throw an error if used outside of a `PixiApplication` context provider.\n */\nexport const usePixiApp = () => {\n const app = useContext(PixiAppContext);\n if (!app) {\n throw new Error(\"usePixiApp must be used within a PixiApplication\");\n }\n return app;\n};\n\n/**\n * Props for the `PixiApplication` component. It extends the PIXI.ApplicationOptions\n * to allow passing configuration directly to the Pixi.js Application constructor,\n * but omits properties that are handled by the component itself.\n */\nexport type PixiApplicationProps = Partial<Omit<ApplicationOptions, \"children\" | \"resizeTo\">> & {\n ref?: Ref<Application>;\n children?: JSX.Element;\n};\n\n/**\n * A SolidJS component that creates and manages a PIXI.Application instance.\n * It provides the application instance through context to be used by child components\n * and custom hooks like `usePixiApp`, `useTick`, and `useTicker`.\n *\n * This component should only be used once in your application.\n *\n * @param props The properties to configure the Pixi.js Application.\n *\n */\nexport const PixiApplication = (props: PixiApplicationProps) => {\n const [_solidProps, initialisationProps] = splitProps(props, [\"ref\", \"children\"]);\n\n // TODO: Split props into initialisation props and runtime props\n\n const [appResource] = createResource(async () => {\n const app = new Application();\n await app.init({\n autoDensity: true,\n resolution: Math.min(window.devicePixelRatio, 2),\n sharedTicker: true,\n ...initialisationProps,\n });\n\n return app;\n });\n\n createEffect(() => {\n const app = appResource();\n if (app) {\n if (props.ref) {\n // Solid converts the ref prop to a callback function\n (props.ref as unknown as (arg: any) => void)(app);\n }\n\n // TODO: Go through the other props that can be set at runtime and apply them here\n // e.g. backgroundColor => app.renderer.backgroundColor, etc.\n\n app.ticker.autoStart = false;\n app.ticker.start();\n\n onCleanup(() => {\n app.destroy(true, { children: true });\n });\n }\n });\n\n return (\n <Show when={appResource()}>\n {(app) => (\n <PixiAppContext.Provider value={app()}>\n <TickerContext.Provider value={app().ticker}>{props.children}</TickerContext.Provider>\n </PixiAppContext.Provider>\n )}\n </Show>\n );\n};\n\nexport type TickerProviderProps = ParentProps<{ ticker: Ticker }>;\n\n/**\n * This is only required if you want a ticker without the Application.\n * It provides context for the `useTick` and `useTicker` hooks so we can run tests that use them without having to instantate a Pixi Application.\n *\n * You need to pass in the ticker instance you want to use so it can be manually controled form the outside for testing.\n */\nexport const TickerProvider = (props: TickerProviderProps) => {\n return <TickerContext.Provider value={props.ticker}>{props.children}</TickerContext.Provider>;\n};\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 * Or a descendant of `TickerProvider` if being used for testing without an application.\n *\n * @returns The PIXI.Ticker instance from the application context.\n * @throws Will throw an error if used outside of a `PixiApplication` or `TickerProvider` context.\n */\nexport const useTicker = (): Ticker => {\n const ticker = useContext(TickerContext);\n if (!ticker) {\n throw new Error(\"useTicker must be used within a PixiApplication or a TickerProvider\");\n }\n return ticker;\n};\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 * Or a descendant of `TickerProvider` if being used for testing without an application.\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 = useContext(TickerContext);\n\n if (!ticker) {\n throw new Error(\"useTick must be used within a PixiApplication or a TickerProvider\");\n }\n\n ticker.add(tickerCallback);\n onCleanup(() => {\n ticker.remove(tickerCallback);\n });\n};\n"],"names":["PixiAppContext","createContext","TickerContext","usePixiApp","app","useContext","Error","PixiApplication","props","_solidProps","initialisationProps","splitProps","appResource","createResource","Application","init","autoDensity","resolution","Math","min","window","devicePixelRatio","sharedTicker","createEffect","ref","ticker","autoStart","start","onCleanup","destroy","children","_$createComponent","Show","when","Provider","value","TickerProvider","useTicker","useTick","tickerCallback","add","remove"],"mappings":";;;AAKA,MAAMA,iBAAiBC,cAAAA;AACvB,MAAMC,gBAAgBD,cAAAA;AASf,MAAME,aAAaA,MAAM;AAC9B,QAAMC,MAAMC,WAAWL,cAAc;AACrC,MAAI,CAACI,KAAK;AACR,UAAM,IAAIE,MAAM,kDAAkD;AAAA,EACpE;AACA,SAAOF;AACT;AAsBO,MAAMG,kBAAkBA,CAACC,UAAgC;AAC9D,QAAM,CAACC,aAAaC,mBAAmB,IAAIC,WAAWH,OAAO,CAAC,OAAO,UAAU,CAAC;AAIhF,QAAM,CAACI,WAAW,IAAIC,eAAe,YAAY;AAC/C,UAAMT,MAAM,IAAIU,YAAAA;AAChB,UAAMV,IAAIW,KAAK;AAAA,MACbC,aAAa;AAAA,MACbC,YAAYC,KAAKC,IAAIC,OAAOC,kBAAkB,CAAC;AAAA,MAC/CC,cAAc;AAAA,MACd,GAAGZ;AAAAA,IAAAA,CACJ;AAED,WAAON;AAAAA,EACT,CAAC;AAEDmB,eAAa,MAAM;AACjB,UAAMnB,MAAMQ,YAAAA;AACZ,QAAIR,KAAK;AACP,UAAII,MAAMgB,KAAK;AAEZhB,cAAMgB,IAAsCpB,GAAG;AAAA,MAClD;AAKAA,UAAIqB,OAAOC,YAAY;AACvBtB,UAAIqB,OAAOE,MAAAA;AAEXC,gBAAU,MAAM;AACdxB,YAAIyB,QAAQ,MAAM;AAAA,UAAEC,UAAU;AAAA,QAAA,CAAM;AAAA,MACtC,CAAC;AAAA,IACH;AAAA,EACF,CAAC;AAED,SAAAC,gBACGC,MAAI;AAAA,IAAA,IAACC,OAAI;AAAA,aAAErB,YAAAA;AAAAA,IAAa;AAAA,IAAAkB,UACrB1B,CAAAA,QAAG2B,gBACF/B,eAAekC,UAAQ;AAAA,MAAA,IAACC,QAAK;AAAA,eAAE/B,IAAAA;AAAAA,MAAK;AAAA,MAAA,IAAA0B,WAAA;AAAA,eAAAC,gBAClC7B,cAAcgC,UAAQ;AAAA,UAAA,IAACC,QAAK;AAAA,mBAAE/B,MAAMqB;AAAAA,UAAM;AAAA,UAAA,IAAAK,WAAA;AAAA,mBAAGtB,MAAMsB;AAAAA,UAAQ;AAAA,QAAA,CAAA;AAAA,MAAA;AAAA,IAAA,CAAA;AAAA,EAAA,CAE/D;AAGP;AAUO,MAAMM,iBAAiBA,CAAC5B,UAA+B;AAC5D,SAAAuB,gBAAQ7B,cAAcgC,UAAQ;AAAA,IAAA,IAACC,QAAK;AAAA,aAAE3B,MAAMiB;AAAAA,IAAM;AAAA,IAAA,IAAAK,WAAA;AAAA,aAAGtB,MAAMsB;AAAAA,IAAQ;AAAA,EAAA,CAAA;AACrE;AAYO,MAAMO,YAAYA,MAAc;AACrC,QAAMZ,SAASpB,WAAWH,aAAa;AACvC,MAAI,CAACuB,QAAQ;AACX,UAAM,IAAInB,MAAM,qEAAqE;AAAA,EACvF;AACA,SAAOmB;AACT;AAgBO,MAAMa,UAAUA,CAACC,mBAAiD;AACvE,QAAMd,SAASpB,WAAWH,aAAa;AAEvC,MAAI,CAACuB,QAAQ;AACX,UAAM,IAAInB,MAAM,mEAAmE;AAAA,EACrF;AAEAmB,SAAOe,IAAID,cAAc;AACzBX,YAAU,MAAM;AACdH,WAAOgB,OAAOF,cAAc;AAAA,EAC9B,CAAC;AACH;"}
|
package/dist/pixi-canvas.js
CHANGED
|
@@ -1,35 +1,59 @@
|
|
|
1
|
-
import { template
|
|
2
|
-
import { createRenderEffect
|
|
3
|
-
import { usePixiApp
|
|
4
|
-
var
|
|
5
|
-
const
|
|
6
|
-
let
|
|
7
|
-
const
|
|
8
|
-
|
|
9
|
-
|
|
1
|
+
import { template, insert, effect, style, className, use } from "solid-js/web";
|
|
2
|
+
import { createRenderEffect, onMount, onCleanup } from "solid-js";
|
|
3
|
+
import { usePixiApp } from "./pixi-application.js";
|
|
4
|
+
var _tmpl$ = /* @__PURE__ */ template(`<div style=position:relative>`);
|
|
5
|
+
const PixiCanvas = (props) => {
|
|
6
|
+
let canvasWrapElement;
|
|
7
|
+
const pixiApp = usePixiApp();
|
|
8
|
+
pixiApp.canvas.style.display = "block";
|
|
9
|
+
pixiApp.canvas.style.position = "absolute";
|
|
10
|
+
pixiApp.canvas.style.top = "0";
|
|
11
|
+
pixiApp.canvas.style.left = "0";
|
|
12
|
+
pixiApp.canvas.style.width = "100%";
|
|
13
|
+
pixiApp.canvas.style.height = "100%";
|
|
14
|
+
createRenderEffect(() => {
|
|
15
|
+
if (props.children === void 0) {
|
|
10
16
|
throw new Error("PixiCanvas requires the `PixiStage` component to render.");
|
|
17
|
+
}
|
|
11
18
|
});
|
|
12
|
-
let
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
19
|
+
let previousResizeTo;
|
|
20
|
+
let resizeObserver;
|
|
21
|
+
onMount(() => {
|
|
22
|
+
if (!canvasWrapElement) return;
|
|
23
|
+
previousResizeTo = pixiApp.resizeTo;
|
|
24
|
+
pixiApp.resizeTo = canvasWrapElement;
|
|
25
|
+
pixiApp.queueResize();
|
|
26
|
+
resizeObserver = new ResizeObserver(() => {
|
|
27
|
+
pixiApp.queueResize();
|
|
28
|
+
});
|
|
29
|
+
resizeObserver.observe(canvasWrapElement);
|
|
30
|
+
});
|
|
31
|
+
onCleanup(() => {
|
|
32
|
+
if (!canvasWrapElement) return;
|
|
33
|
+
pixiApp.resizeTo = previousResizeTo;
|
|
34
|
+
resizeObserver?.disconnect();
|
|
35
|
+
resizeObserver = void 0;
|
|
36
|
+
});
|
|
37
|
+
return (() => {
|
|
38
|
+
var _el$ = _tmpl$();
|
|
39
|
+
var _ref$ = canvasWrapElement;
|
|
40
|
+
typeof _ref$ === "function" ? use(_ref$, _el$) : canvasWrapElement = _el$;
|
|
41
|
+
insert(_el$, () => pixiApp.canvas);
|
|
42
|
+
effect((_p$) => {
|
|
43
|
+
var _v$ = {
|
|
44
|
+
...typeof props.style === "object" ? props.style : {}
|
|
45
|
+
}, _v$2 = props.className;
|
|
46
|
+
_p$.e = style(_el$, _v$, _p$.e);
|
|
47
|
+
_v$2 !== _p$.t && className(_el$, _p$.t = _v$2);
|
|
48
|
+
return _p$;
|
|
26
49
|
}, {
|
|
27
50
|
e: void 0,
|
|
28
51
|
t: void 0
|
|
29
|
-
})
|
|
52
|
+
});
|
|
53
|
+
return _el$;
|
|
30
54
|
})();
|
|
31
55
|
};
|
|
32
56
|
export {
|
|
33
|
-
|
|
57
|
+
PixiCanvas
|
|
34
58
|
};
|
|
35
59
|
//# sourceMappingURL=pixi-canvas.js.map
|
package/dist/pixi-canvas.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pixi-canvas.js","sources":["../src/pixi-canvas.tsx"],"sourcesContent":["import type { JSX } from \"solid-js\";\nimport { createRenderEffect, onCleanup, onMount } from \"solid-js\";\nimport { usePixiApp } from \"./pixi-application\";\n\n/**\n * PixiCanvas\n *\n * A small wrapper that mounts the PIXI application's canvas element into the DOM\n * and automatically resizes it.\n *\n * - Requires a surrounding `PixiApplication` component.\n * - Requires a `PixiStage` component as a child.\n *\n * Props:\n * @param props.children - JSX content to render inside the canvas wrapper. Use `PixiStage` as the only child.\n */\n\nexport const PixiCanvas = (props: {\n children: JSX.Element;\n style?: JSX.CSSProperties | undefined;\n className?: string;\n}): JSX.Element => {\n let canvasWrapElement: HTMLDivElement | undefined;\n\n const pixiApp = usePixiApp();\n pixiApp.canvas.style.display = \"block\";\n\n createRenderEffect(() => {\n if (props.children === undefined) {\n throw new Error(\"PixiCanvas requires the `PixiStage` component to render.\");\n }\n });\n\n let previousResizeTo: typeof pixiApp.resizeTo;\n let resizeObserver: ResizeObserver | undefined;\n\n onMount(() => {\n if (!canvasWrapElement) return;\n previousResizeTo = pixiApp.resizeTo;\n pixiApp.resizeTo = canvasWrapElement;\n pixiApp.queueResize();\n resizeObserver = new ResizeObserver(() => {\n pixiApp.queueResize();\n });\n resizeObserver.observe(canvasWrapElement);\n });\n\n onCleanup(() => {\n if (!canvasWrapElement) return;\n pixiApp.resizeTo = previousResizeTo;\n resizeObserver?.disconnect();\n resizeObserver = undefined;\n });\n\n return (\n <div\n ref={canvasWrapElement}\n style={{\n ...(typeof props.style === \"object\" ? props.style : {}),\n }}\n class={props.className}\n >\n {pixiApp.canvas}\n </div>\n );\n};\n"],"names":["PixiCanvas","props","canvasWrapElement","pixiApp","usePixiApp","canvas","style","display","createRenderEffect","children","undefined","Error","previousResizeTo","resizeObserver","onMount","resizeTo","queueResize","ResizeObserver","observe","onCleanup","disconnect","_el$","_tmpl$","_ref$","_$use","_$insert","_$effect","_p$","_v$","_v$2","className","e","_$style","t","_$className"],"mappings":";;;;AAiBO,MAAMA,
|
|
1
|
+
{"version":3,"file":"pixi-canvas.js","sources":["../src/pixi-canvas.tsx"],"sourcesContent":["import type { JSX } from \"solid-js\";\nimport { createRenderEffect, onCleanup, onMount } from \"solid-js\";\nimport { usePixiApp } from \"./pixi-application\";\n\n/**\n * PixiCanvas\n *\n * A small wrapper that mounts the PIXI application's canvas element into the DOM\n * and automatically resizes it.\n *\n * - Requires a surrounding `PixiApplication` component.\n * - Requires a `PixiStage` component as a child.\n *\n * Props:\n * @param props.children - JSX content to render inside the canvas wrapper. Use `PixiStage` as the only child.\n */\n\nexport const PixiCanvas = (props: {\n children: JSX.Element;\n style?: JSX.CSSProperties | undefined;\n className?: string;\n}): JSX.Element => {\n let canvasWrapElement: HTMLDivElement | undefined;\n\n const pixiApp = usePixiApp();\n pixiApp.canvas.style.display = \"block\";\n pixiApp.canvas.style.position = \"absolute\";\n pixiApp.canvas.style.top = \"0\";\n pixiApp.canvas.style.left = \"0\";\n pixiApp.canvas.style.width = \"100%\";\n pixiApp.canvas.style.height = \"100%\";\n\n createRenderEffect(() => {\n if (props.children === undefined) {\n throw new Error(\"PixiCanvas requires the `PixiStage` component to render.\");\n }\n });\n\n let previousResizeTo: typeof pixiApp.resizeTo;\n let resizeObserver: ResizeObserver | undefined;\n\n onMount(() => {\n if (!canvasWrapElement) return;\n previousResizeTo = pixiApp.resizeTo;\n pixiApp.resizeTo = canvasWrapElement;\n pixiApp.queueResize();\n resizeObserver = new ResizeObserver(() => {\n pixiApp.queueResize();\n });\n resizeObserver.observe(canvasWrapElement);\n });\n\n onCleanup(() => {\n if (!canvasWrapElement) return;\n pixiApp.resizeTo = previousResizeTo;\n resizeObserver?.disconnect();\n resizeObserver = undefined;\n });\n\n return (\n <div\n ref={canvasWrapElement}\n style={{\n position: \"relative\",\n ...(typeof props.style === \"object\" ? props.style : {}),\n }}\n class={props.className}\n >\n {pixiApp.canvas}\n </div>\n );\n};\n"],"names":["PixiCanvas","props","canvasWrapElement","pixiApp","usePixiApp","canvas","style","display","position","top","left","width","height","createRenderEffect","children","undefined","Error","previousResizeTo","resizeObserver","onMount","resizeTo","queueResize","ResizeObserver","observe","onCleanup","disconnect","_el$","_tmpl$","_ref$","_$use","_$insert","_$effect","_p$","_v$","_v$2","className","e","_$style","t","_$className"],"mappings":";;;;AAiBO,MAAMA,aAAaA,CAACC,UAIR;AACjB,MAAIC;AAEJ,QAAMC,UAAUC,WAAAA;AAChBD,UAAQE,OAAOC,MAAMC,UAAU;AAC/BJ,UAAQE,OAAOC,MAAME,WAAW;AAChCL,UAAQE,OAAOC,MAAMG,MAAM;AAC3BN,UAAQE,OAAOC,MAAMI,OAAO;AAC5BP,UAAQE,OAAOC,MAAMK,QAAQ;AAC7BR,UAAQE,OAAOC,MAAMM,SAAS;AAE9BC,qBAAmB,MAAM;AACvB,QAAIZ,MAAMa,aAAaC,QAAW;AAChC,YAAM,IAAIC,MAAM,0DAA0D;AAAA,IAC5E;AAAA,EACF,CAAC;AAED,MAAIC;AACJ,MAAIC;AAEJC,UAAQ,MAAM;AACZ,QAAI,CAACjB,kBAAmB;AACxBe,uBAAmBd,QAAQiB;AAC3BjB,YAAQiB,WAAWlB;AACnBC,YAAQkB,YAAAA;AACRH,qBAAiB,IAAII,eAAe,MAAM;AACxCnB,cAAQkB,YAAAA;AAAAA,IACV,CAAC;AACDH,mBAAeK,QAAQrB,iBAAiB;AAAA,EAC1C,CAAC;AAEDsB,YAAU,MAAM;AACd,QAAI,CAACtB,kBAAmB;AACxBC,YAAQiB,WAAWH;AACnBC,oBAAgBO,WAAAA;AAChBP,qBAAiBH;AAAAA,EACnB,CAAC;AAED,UAAA,MAAA;AAAA,QAAAW,OAAAC,OAAAA;AAAA,QAAAC,QAES1B;AAAiB,WAAA0B,UAAA,aAAAC,IAAAD,OAAAF,IAAA,IAAjBxB,oBAAiBwB;AAAAI,WAAAJ,MAAA,MAOrBvB,QAAQE,MAAM;AAAA0B,WAAAC,CAAAA,QAAA;AAAA,UAAAC,MANR;AAAA,QAEL,GAAI,OAAOhC,MAAMK,UAAU,WAAWL,MAAMK,QAAQ,CAAA;AAAA,MAAC,GACtD4B,OACMjC,MAAMkC;AAASH,UAAAI,IAAAC,MAAAX,MAAAO,KAAAD,IAAAI,CAAA;AAAAF,eAAAF,IAAAM,KAAAC,UAAAb,MAAAM,IAAAM,IAAAJ,IAAA;AAAA,aAAAF;AAAAA,IAAA,GAAA;AAAA,MAAAI,GAAArB;AAAAA,MAAAuB,GAAAvB;AAAAA,IAAAA,CAAA;AAAA,WAAAW;AAAAA,EAAA,GAAA;AAK5B;"}
|
package/dist/pixi-components.js
CHANGED
|
@@ -1,49 +1,83 @@
|
|
|
1
|
-
import { RenderContainer as
|
|
2
|
-
import { splitProps
|
|
3
|
-
import { PIXI_SOLID_EVENT_HANDLER_NAMES
|
|
4
|
-
import { insert
|
|
5
|
-
const
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
1
|
+
import { RenderContainer as RenderContainer$1, RenderLayer as RenderLayer$1, AnimatedSprite as AnimatedSprite$1, BitmapText as BitmapText$1, Container as Container$1, Graphics as Graphics$1, HTMLText as HTMLText$1, MeshPlane as MeshPlane$1, MeshRope as MeshRope$1, MeshSimple as MeshSimple$1, NineSliceSprite as NineSliceSprite$1, ParticleContainer as ParticleContainer$1, PerspectiveMesh as PerspectiveMesh$1, Sprite as Sprite$1, Text as Text$1, TilingSprite as TilingSprite$1 } from "pixi.js";
|
|
2
|
+
import { splitProps, createRenderEffect, on } from "solid-js";
|
|
3
|
+
import { PIXI_SOLID_EVENT_HANDLER_NAMES } from "./pixi-events.js";
|
|
4
|
+
import { insert, setProp } from "./renderer.js";
|
|
5
|
+
const SOLID_PROP_KEYS = ["ref", "as", "children"];
|
|
6
|
+
const applyProps = (instance, props, defer) => {
|
|
7
|
+
for (const key in props) {
|
|
8
|
+
if (key === "as") continue;
|
|
9
|
+
if (key === "ref") {
|
|
10
|
+
createRenderEffect(() => {
|
|
11
|
+
props[key](instance);
|
|
12
|
+
});
|
|
13
|
+
} else if (key === "children") {
|
|
14
|
+
if (!("addChild" in instance)) {
|
|
15
|
+
throw new Error(`Cannot set children on non-container instance.`);
|
|
16
|
+
}
|
|
17
|
+
createRenderEffect(() => {
|
|
18
|
+
insert(instance, () => props.children);
|
|
19
|
+
});
|
|
20
|
+
} else if (defer) {
|
|
21
|
+
createRenderEffect(on(() => props[key], () => {
|
|
22
|
+
setProp(instance, key, props[key]);
|
|
20
23
|
}, {
|
|
21
|
-
defer
|
|
22
|
-
}))
|
|
23
|
-
|
|
24
|
+
defer
|
|
25
|
+
}));
|
|
26
|
+
} else {
|
|
27
|
+
createRenderEffect(() => {
|
|
28
|
+
setProp(instance, key, props[key]);
|
|
24
29
|
});
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
};
|
|
33
|
+
const createContainerComponent = (PixiClass) => {
|
|
34
|
+
return (props) => {
|
|
35
|
+
const [runtimeProps, initialisationProps] = splitProps(props, [...SOLID_PROP_KEYS, ...PIXI_SOLID_EVENT_HANDLER_NAMES]);
|
|
36
|
+
const instance = props.as || new PixiClass(initialisationProps);
|
|
37
|
+
applyProps(instance, initialisationProps, true);
|
|
38
|
+
applyProps(instance, runtimeProps);
|
|
39
|
+
return instance;
|
|
40
|
+
};
|
|
41
|
+
};
|
|
42
|
+
const createLeafComponent = (PixiClass) => {
|
|
43
|
+
return (props) => {
|
|
44
|
+
return createContainerComponent(PixiClass)(props);
|
|
45
|
+
};
|
|
46
|
+
};
|
|
47
|
+
const AnimatedSprite = createLeafComponent(AnimatedSprite$1);
|
|
48
|
+
const BitmapText = createLeafComponent(BitmapText$1);
|
|
49
|
+
const Container = createContainerComponent(Container$1);
|
|
50
|
+
const Graphics = createLeafComponent(Graphics$1);
|
|
51
|
+
const HTMLText = createLeafComponent(HTMLText$1);
|
|
52
|
+
const MeshPlane = createLeafComponent(MeshPlane$1);
|
|
53
|
+
const MeshRope = createLeafComponent(MeshRope$1);
|
|
54
|
+
const MeshSimple = createLeafComponent(MeshSimple$1);
|
|
55
|
+
const NineSliceSprite = createLeafComponent(NineSliceSprite$1);
|
|
56
|
+
const ParticleContainer = createLeafComponent(ParticleContainer$1);
|
|
57
|
+
const PerspectiveMesh = createLeafComponent(PerspectiveMesh$1);
|
|
58
|
+
const RenderContainer = createContainerComponent(RenderContainer$1);
|
|
59
|
+
const RenderLayer = createContainerComponent(RenderLayer$1);
|
|
60
|
+
const Sprite = createLeafComponent(Sprite$1);
|
|
61
|
+
const Text = createLeafComponent(Text$1);
|
|
62
|
+
const TilingSprite = createLeafComponent(TilingSprite$1);
|
|
29
63
|
export {
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
64
|
+
AnimatedSprite,
|
|
65
|
+
BitmapText,
|
|
66
|
+
Container,
|
|
67
|
+
Graphics,
|
|
68
|
+
HTMLText,
|
|
69
|
+
MeshPlane,
|
|
70
|
+
MeshRope,
|
|
71
|
+
MeshSimple,
|
|
72
|
+
NineSliceSprite,
|
|
73
|
+
ParticleContainer,
|
|
74
|
+
PerspectiveMesh,
|
|
75
|
+
RenderContainer,
|
|
76
|
+
RenderLayer,
|
|
77
|
+
SOLID_PROP_KEYS,
|
|
78
|
+
Sprite,
|
|
79
|
+
Text,
|
|
80
|
+
TilingSprite,
|
|
81
|
+
applyProps
|
|
48
82
|
};
|
|
49
83
|
//# sourceMappingURL=pixi-components.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pixi-components.js","sources":["../src/pixi-components.tsx"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport {\n AnimatedSprite as PixiAnimatedSprite,\n BitmapText as PixiBitmapText,\n Container as PixiContainer,\n Graphics as PixiGraphics,\n HTMLText as PixiHTMLText,\n MeshPlane as PixiMeshPlane,\n MeshRope as PixiMeshRope,\n MeshSimple as PixiMeshSimple,\n NineSliceSprite as PixiNineSliceSprite,\n ParticleContainer as PixiParticleContainer,\n PerspectiveMesh as PixiPerspectiveMesh,\n RenderContainer as PixiRenderContainer,\n RenderLayer as PixiRenderLayer,\n Sprite as PixiSprite,\n Text as PixiText,\n TilingSprite as PixiTilingSprite,\n} from \"pixi.js\";\nimport type { JSX, Ref } from \"solid-js\";\nimport { createRenderEffect, on, splitProps } from \"solid-js\";\nimport type { PixiEventHandlerMap } from \"./pixi-events\";\n\nimport { PIXI_SOLID_EVENT_HANDLER_NAMES } from \"./pixi-events\";\nimport { insert, setProp } from \"./renderer\";\n\n/**\n * Prop definition for components that CAN have children\n */\nexport type ContainerProps<Component> = PixiEventHandlerMap & {\n ref?: Ref<Component>;\n as?: Component;\n children?: JSX.Element;\n};\n\n/**\n * Prop definition for components that CANNOT have children\n */\nexport type LeafProps<Component> = Omit<ContainerProps<Component>, \"children\">;\n\n// Keys that are specific to Solid components and not Pixi props\nexport const SOLID_PROP_KEYS = [\"ref\", \"as\", \"children\"] as const;\n\n/**\n * Apply's the props to a Pixi instance with subsriptions to maintain reactivity.\n *\n * @param instance The Pixi instance we want to apply props to.\n * @param props The props object.\n * @param defer Defers the createRenderEffect so the props aren't set on the first run.\n * This is useful because setting initialisation props can have unintended side effects.\n * Notibly in AnimatedSprite, if we set the textures roperty after instantiation it will stop the instance from playing.\n */\nexport const applyProps = <InstanceType extends PixiContainer, OptionsType extends ContainerProps<InstanceType>>(\n instance: InstanceType,\n props: OptionsType,\n defer?: boolean\n) => {\n for (const key in props) {\n if (key === \"as\") continue;\n\n if (key === \"ref\") {\n createRenderEffect(() => {\n // Solid converts the ref prop to a callback function\n (props[key] as unknown as (arg: any) => void)(instance);\n });\n } else if (key === \"children\") {\n if (!(\"addChild\" in instance)) {\n throw new Error(`Cannot set children on non-container instance.`);\n }\n createRenderEffect(() => {\n insert(instance, () => props.children);\n });\n } else if (defer) {\n createRenderEffect(\n on(\n () => props[key as keyof typeof props],\n () => {\n setProp(instance, key, props[key as keyof typeof props]);\n },\n { defer }\n )\n );\n } else {\n createRenderEffect(() => {\n setProp(instance, key, props[key as keyof typeof props]);\n });\n }\n }\n};\n\nconst createContainerComponent = <InstanceType extends PixiContainer, OptionsType extends object>(\n PixiClass: new (props: OptionsType) => InstanceType\n) => {\n return (props: Omit<OptionsType, \"children\"> & ContainerProps<InstanceType>): JSX.Element => {\n const [runtimeProps, initialisationProps] = splitProps(props, [\n ...SOLID_PROP_KEYS,\n ...PIXI_SOLID_EVENT_HANDLER_NAMES,\n ]);\n\n const instance = props.as || new PixiClass(initialisationProps as any);\n\n applyProps(instance, initialisationProps, true);\n applyProps(instance, runtimeProps);\n\n return instance as unknown as JSX.Element;\n };\n};\n\nconst createLeafComponent = <InstanceType extends PixiContainer, OptionsType extends object>(\n PixiClass: new (props: OptionsType) => InstanceType\n) => {\n return (props: Omit<OptionsType, \"children\"> & LeafProps<InstanceType>): JSX.Element => {\n return createContainerComponent<PixiContainer, OptionsType>(PixiClass)(props as any);\n };\n};\n\n/**\n * A SolidJS component that renders a `PIXI.AnimatedSprite`.\n */\nexport const AnimatedSprite = createLeafComponent<PixiAnimatedSprite, Pixi.AnimatedSpriteOptions>(PixiAnimatedSprite);\n/**\n * A SolidJS component that renders a `PIXI.BitmapText`.\n */\nexport const BitmapText = createLeafComponent<PixiBitmapText, ConstructorParameters<typeof PixiBitmapText>>(\n PixiBitmapText\n);\n/**\n * A SolidJS component that renders a `PIXI.Container`.\n */\nexport const Container = createContainerComponent<PixiContainer, Pixi.ContainerOptions>(PixiContainer);\n/**\n * A SolidJS component that renders a `PIXI.Graphics`.\n * Use a ref to access the underlying graphics instance and draw with it.\n */\nexport const Graphics = createLeafComponent<PixiGraphics, Pixi.GraphicsOptions>(PixiGraphics);\n/**\n * A SolidJS component that renders a `PIXI.HTMLText`.\n */\nexport const HTMLText = createLeafComponent<PixiHTMLText, Pixi.HTMLTextOptions>(PixiHTMLText);\n\n/**\n * A SolidJS component that renders a `PIXI.MeshPlane`.\n */\nexport const MeshPlane = createLeafComponent<PixiMeshPlane, Pixi.MeshPlaneOptions>(PixiMeshPlane);\n\n/**\n * A SolidJS component that renders a `PIXI.MeshRope`.\n */\nexport const MeshRope = createLeafComponent<PixiMeshRope, Pixi.MeshRopeOptions>(PixiMeshRope);\n\n/**\n * A SolidJS component that renders a `PIXI.MeshSimple`.\n */\nexport const MeshSimple = createLeafComponent<PixiMeshSimple, Pixi.SimpleMeshOptions>(PixiMeshSimple);\n\n/**\n * A SolidJS component that renders a `PIXI.NineSliceSprite`.\n */\nexport const NineSliceSprite = createLeafComponent<PixiNineSliceSprite, Pixi.NineSliceSpriteOptions>(\n PixiNineSliceSprite\n);\n\n/**\n * A SolidJS component that renders a `PIXI.ParticleContainer`.\n *\n * Particles should be added and removed from this component imperatively. Please see the docs for a reference example.\n */\nexport const ParticleContainer = createLeafComponent<PixiParticleContainer, Pixi.ParticleContainerOptions>(\n PixiParticleContainer\n);\n\n/**\n * A SolidJS component that renders a `PIXI.PerspectiveMesh`.\n */\nexport const PerspectiveMesh = createLeafComponent<PixiPerspectiveMesh, Pixi.PerspectivePlaneOptions>(\n PixiPerspectiveMesh\n);\n\n/**\n * A SolidJS component that renders a `PIXI.RenderContainer`.\n */\nexport const RenderContainer = createContainerComponent<PixiRenderContainer, Pixi.RenderContainerOptions>(\n PixiRenderContainer\n);\n\n/**\n * A SolidJS component that renders a `PIXI.RenderLayer`.\n */\nexport const RenderLayer = createContainerComponent<PixiRenderLayer, Pixi.RenderLayerOptions>(PixiRenderLayer);\n\n/**\n * A SolidJS component that renders a `PIXI.Sprite`.\n */\nexport const Sprite = createLeafComponent<PixiSprite, Pixi.SpriteOptions>(PixiSprite);\n/**\n * A SolidJS component that renders a `PIXI.Text`.\n */\nexport const Text = createLeafComponent<PixiText, Pixi.CanvasTextOptions>(PixiText);\n\n/**\n * A SolidJS component that renders a `PIXI.TilingSprite`.\n */\nexport const TilingSprite = createLeafComponent<PixiTilingSprite, Pixi.TilingSpriteOptions>(PixiTilingSprite);\n\n// export const MeshGeometry = createLeafComponent<PixiMeshGeometry, Pixi.MeshGeometryOptions>(PixiMeshGeometry);\n\n// export const NineSliceGeometry = createLeafComponent<PixiNineSliceGeometry, Pixi.NineSliceGeometryOptions>(\n// PixiNineSliceGeometry\n// );\n\n// export const Particle = createLeafComponent<PixiParticle, Pixi.ParticleOptions>(PixiParticle);\n\n// export const PerspectivePlaneGeometry = createLeafComponent<\n// PixiPerspectivePlaneGeometry,\n// Pixi.PerspectivePlaneGeometryOptions\n// >(PixiPerspectivePlaneGeometry);\n\n// export const PlaneGeometry = createLeafComponent<PixiPlaneGeometry, Pixi.PlaneGeometryOptions>(PixiPlaneGeometry);\n\n// export const RopeGeometry = createLeafComponent<PixiRopeGeometry, Pixi.RopeGeometryOptions>(PixiRopeGeometry);\n\n// TODO: Do we need a component for the Culler. It needs to interact with the stage directly.\n// export const Culler = createLeafComponent<PixiCuller, Pixi.Culler>(PixiCuller);\n"],"names":["SOLID_PROP_KEYS","applyProps","instance","props","defer","key","createRenderEffect","Error","insert","children","on","setProp","createContainerComponent","PixiClass","runtimeProps","initialisationProps","splitProps","PIXI_SOLID_EVENT_HANDLER_NAMES","as","createLeafComponent","AnimatedSprite","PixiAnimatedSprite","BitmapText","PixiBitmapText","Container","PixiContainer","Graphics","PixiGraphics","HTMLText","PixiHTMLText","MeshPlane","PixiMeshPlane","MeshRope","PixiMeshRope","MeshSimple","PixiMeshSimple","NineSliceSprite","PixiNineSliceSprite","ParticleContainer","PixiParticleContainer","PerspectiveMesh","PixiPerspectiveMesh","RenderContainer","PixiRenderContainer","RenderLayer","PixiRenderLayer","Sprite","PixiSprite","Text","PixiText","TilingSprite","PixiTilingSprite"],"mappings":";;;;AAyCO,MAAMA,IAAkB,CAAC,OAAO,MAAM,UAAU,GAW1CC,IAAa,CACxBC,GACAC,GACAC,MACG;AACH,aAAWC,KAAOF;AAChB,QAAIE,MAAQ;AAEZ,UAAIA,MAAQ;AACVC,QAAAA,EAAmB,MAAM;AAEtBH,UAAAA,EAAME,CAAG,EAAoCH,CAAQ;AAAA,QACxD,CAAC;AAAA,eACQG,MAAQ,YAAY;AAC7B,YAAI,EAAE,cAAcH;AAClB,gBAAM,IAAIK,MAAM,gDAAgD;AAElED,QAAAA,EAAmB,MAAM;AACvBE,UAAAA,EAAON,GAAU,MAAMC,EAAMM,QAAQ;AAAA,QACvC,CAAC;AAAA,MACH,OAAWL,IACTE,EACEI,EACE,MAAMP,EAAME,CAAyB,GACrC,MAAM;AACJM,QAAAA,EAAQT,GAAUG,GAAKF,EAAME,CAAyB,CAAC;AAAA,MACzD,GACA;AAAA,QAAED,OAAAA;AAAAA,MAAAA,CACJ,CACF,IAEAE,EAAmB,MAAM;AACvBK,QAAAA,EAAQT,GAAUG,GAAKF,EAAME,CAAyB,CAAC;AAAA,MACzD,CAAC;AAGP,GAEMO,IAA2B,CAC/BC,MAEO,CAACV,MAAqF;AAC3F,QAAM,CAACW,GAAcC,CAAmB,IAAIC,EAAWb,GAAO,CAC5D,GAAGH,GACH,GAAGiB,CAA8B,CAClC,GAEKf,IAAWC,EAAMe,MAAM,IAAIL,EAAUE,CAA0B;AAErEd,SAAAA,EAAWC,GAAUa,GAAqB,EAAI,GAC9Cd,EAAWC,GAAUY,CAAY,GAE1BZ;AACT,GAGIiB,IAAsB,CAC1BN,MAEO,CAACV,MACCS,EAAqDC,CAAS,EAAEV,CAAY,GAO1EiB,IAAiBD,EAAoEE,CAAkB,GAIvGC,IAAaH,EACxBI,CACF,GAIaC,IAAYZ,EAA+Da,CAAa,GAKxFC,IAAWP,EAAwDQ,CAAY,GAI/EC,IAAWT,EAAwDU,CAAY,GAK/EC,IAAYX,EAA0DY,CAAa,GAKnFC,IAAWb,EAAwDc,CAAY,GAK/EC,IAAaf,EAA4DgB,CAAc,GAKvFC,IAAkBjB,EAC7BkB,CACF,GAOaC,IAAoBnB,EAC/BoB,CACF,GAKaC,IAAkBrB,EAC7BsB,CACF,GAKaC,IAAkB9B,EAC7B+B,CACF,GAKaC,IAAchC,EAAmEiC,CAAe,GAKhGC,IAAS3B,EAAoD4B,CAAU,GAIvEC,IAAO7B,EAAsD8B,CAAQ,GAKrEC,IAAe/B,EAAgEgC,CAAgB;"}
|
|
1
|
+
{"version":3,"file":"pixi-components.js","sources":["../src/pixi-components.tsx"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport {\n AnimatedSprite as PixiAnimatedSprite,\n BitmapText as PixiBitmapText,\n Container as PixiContainer,\n Graphics as PixiGraphics,\n HTMLText as PixiHTMLText,\n MeshPlane as PixiMeshPlane,\n MeshRope as PixiMeshRope,\n MeshSimple as PixiMeshSimple,\n NineSliceSprite as PixiNineSliceSprite,\n ParticleContainer as PixiParticleContainer,\n PerspectiveMesh as PixiPerspectiveMesh,\n RenderContainer as PixiRenderContainer,\n RenderLayer as PixiRenderLayer,\n Sprite as PixiSprite,\n Text as PixiText,\n TilingSprite as PixiTilingSprite,\n} from \"pixi.js\";\nimport type { JSX, Ref } from \"solid-js\";\nimport { createRenderEffect, on, splitProps } from \"solid-js\";\nimport type { PixiEventHandlerMap } from \"./pixi-events\";\n\nimport { PIXI_SOLID_EVENT_HANDLER_NAMES } from \"./pixi-events\";\nimport { insert, setProp } from \"./renderer\";\n\n/**\n * Prop definition for components that CAN have children\n */\nexport type ContainerProps<Component> = PixiEventHandlerMap & {\n ref?: Ref<Component>;\n as?: Component;\n children?: JSX.Element;\n};\n\n/**\n * Prop definition for components that CANNOT have children\n */\nexport type LeafProps<Component> = Omit<ContainerProps<Component>, \"children\">;\n\n// Keys that are specific to Solid components and not Pixi props\nexport const SOLID_PROP_KEYS = [\"ref\", \"as\", \"children\"] as const;\n\n/**\n * Apply's the props to a Pixi instance with subsriptions to maintain reactivity.\n *\n * @param instance The Pixi instance we want to apply props to.\n * @param props The props object.\n * @param defer Defers the createRenderEffect so the props aren't set on the first run.\n * This is useful because setting initialisation props can have unintended side effects.\n * Notibly in AnimatedSprite, if we set the textures roperty after instantiation it will stop the instance from playing.\n */\nexport const applyProps = <InstanceType extends PixiContainer, OptionsType extends ContainerProps<InstanceType>>(\n instance: InstanceType,\n props: OptionsType,\n defer?: boolean\n) => {\n for (const key in props) {\n if (key === \"as\") continue;\n\n if (key === \"ref\") {\n createRenderEffect(() => {\n // Solid converts the ref prop to a callback function\n (props[key] as unknown as (arg: any) => void)(instance);\n });\n } else if (key === \"children\") {\n if (!(\"addChild\" in instance)) {\n throw new Error(`Cannot set children on non-container instance.`);\n }\n createRenderEffect(() => {\n insert(instance, () => props.children);\n });\n } else if (defer) {\n createRenderEffect(\n on(\n () => props[key as keyof typeof props],\n () => {\n setProp(instance, key, props[key as keyof typeof props]);\n },\n { defer }\n )\n );\n } else {\n createRenderEffect(() => {\n setProp(instance, key, props[key as keyof typeof props]);\n });\n }\n }\n};\n\nconst createContainerComponent = <InstanceType extends PixiContainer, OptionsType extends object>(\n PixiClass: new (props: OptionsType) => InstanceType\n) => {\n return (props: Omit<OptionsType, \"children\"> & ContainerProps<InstanceType>): JSX.Element => {\n const [runtimeProps, initialisationProps] = splitProps(props, [\n ...SOLID_PROP_KEYS,\n ...PIXI_SOLID_EVENT_HANDLER_NAMES,\n ]);\n\n const instance = props.as || new PixiClass(initialisationProps as any);\n\n applyProps(instance, initialisationProps, true);\n applyProps(instance, runtimeProps);\n\n return instance as unknown as JSX.Element;\n };\n};\n\nconst createLeafComponent = <InstanceType extends PixiContainer, OptionsType extends object>(\n PixiClass: new (props: OptionsType) => InstanceType\n) => {\n return (props: Omit<OptionsType, \"children\"> & LeafProps<InstanceType>): JSX.Element => {\n return createContainerComponent<PixiContainer, OptionsType>(PixiClass)(props as any);\n };\n};\n\n/**\n * A SolidJS component that renders a `PIXI.AnimatedSprite`.\n */\nexport const AnimatedSprite = createLeafComponent<PixiAnimatedSprite, Pixi.AnimatedSpriteOptions>(PixiAnimatedSprite);\n/**\n * A SolidJS component that renders a `PIXI.BitmapText`.\n */\nexport const BitmapText = createLeafComponent<PixiBitmapText, ConstructorParameters<typeof PixiBitmapText>>(\n PixiBitmapText\n);\n/**\n * A SolidJS component that renders a `PIXI.Container`.\n */\nexport const Container = createContainerComponent<PixiContainer, Pixi.ContainerOptions>(PixiContainer);\n/**\n * A SolidJS component that renders a `PIXI.Graphics`.\n * Use a ref to access the underlying graphics instance and draw with it.\n */\nexport const Graphics = createLeafComponent<PixiGraphics, Pixi.GraphicsOptions>(PixiGraphics);\n/**\n * A SolidJS component that renders a `PIXI.HTMLText`.\n */\nexport const HTMLText = createLeafComponent<PixiHTMLText, Pixi.HTMLTextOptions>(PixiHTMLText);\n\n/**\n * A SolidJS component that renders a `PIXI.MeshPlane`.\n */\nexport const MeshPlane = createLeafComponent<PixiMeshPlane, Pixi.MeshPlaneOptions>(PixiMeshPlane);\n\n/**\n * A SolidJS component that renders a `PIXI.MeshRope`.\n */\nexport const MeshRope = createLeafComponent<PixiMeshRope, Pixi.MeshRopeOptions>(PixiMeshRope);\n\n/**\n * A SolidJS component that renders a `PIXI.MeshSimple`.\n */\nexport const MeshSimple = createLeafComponent<PixiMeshSimple, Pixi.SimpleMeshOptions>(PixiMeshSimple);\n\n/**\n * A SolidJS component that renders a `PIXI.NineSliceSprite`.\n */\nexport const NineSliceSprite = createLeafComponent<PixiNineSliceSprite, Pixi.NineSliceSpriteOptions>(\n PixiNineSliceSprite\n);\n\n/**\n * A SolidJS component that renders a `PIXI.ParticleContainer`.\n *\n * Particles should be added and removed from this component imperatively. Please see the docs for a reference example.\n */\nexport const ParticleContainer = createLeafComponent<PixiParticleContainer, Pixi.ParticleContainerOptions>(\n PixiParticleContainer\n);\n\n/**\n * A SolidJS component that renders a `PIXI.PerspectiveMesh`.\n */\nexport const PerspectiveMesh = createLeafComponent<PixiPerspectiveMesh, Pixi.PerspectivePlaneOptions>(\n PixiPerspectiveMesh\n);\n\n/**\n * A SolidJS component that renders a `PIXI.RenderContainer`.\n */\nexport const RenderContainer = createContainerComponent<PixiRenderContainer, Pixi.RenderContainerOptions>(\n PixiRenderContainer\n);\n\n/**\n * A SolidJS component that renders a `PIXI.RenderLayer`.\n */\nexport const RenderLayer = createContainerComponent<PixiRenderLayer, Pixi.RenderLayerOptions>(PixiRenderLayer);\n\n/**\n * A SolidJS component that renders a `PIXI.Sprite`.\n */\nexport const Sprite = createLeafComponent<PixiSprite, Pixi.SpriteOptions>(PixiSprite);\n/**\n * A SolidJS component that renders a `PIXI.Text`.\n */\nexport const Text = createLeafComponent<PixiText, Pixi.CanvasTextOptions>(PixiText);\n\n/**\n * A SolidJS component that renders a `PIXI.TilingSprite`.\n */\nexport const TilingSprite = createLeafComponent<PixiTilingSprite, Pixi.TilingSpriteOptions>(PixiTilingSprite);\n\n// export const MeshGeometry = createLeafComponent<PixiMeshGeometry, Pixi.MeshGeometryOptions>(PixiMeshGeometry);\n\n// export const NineSliceGeometry = createLeafComponent<PixiNineSliceGeometry, Pixi.NineSliceGeometryOptions>(\n// PixiNineSliceGeometry\n// );\n\n// export const Particle = createLeafComponent<PixiParticle, Pixi.ParticleOptions>(PixiParticle);\n\n// export const PerspectivePlaneGeometry = createLeafComponent<\n// PixiPerspectivePlaneGeometry,\n// Pixi.PerspectivePlaneGeometryOptions\n// >(PixiPerspectivePlaneGeometry);\n\n// export const PlaneGeometry = createLeafComponent<PixiPlaneGeometry, Pixi.PlaneGeometryOptions>(PixiPlaneGeometry);\n\n// export const RopeGeometry = createLeafComponent<PixiRopeGeometry, Pixi.RopeGeometryOptions>(PixiRopeGeometry);\n\n// TODO: Do we need a component for the Culler. It needs to interact with the stage directly.\n// export const Culler = createLeafComponent<PixiCuller, Pixi.Culler>(PixiCuller);\n"],"names":["SOLID_PROP_KEYS","applyProps","instance","props","defer","key","createRenderEffect","Error","insert","children","on","setProp","createContainerComponent","PixiClass","runtimeProps","initialisationProps","splitProps","PIXI_SOLID_EVENT_HANDLER_NAMES","as","createLeafComponent","AnimatedSprite","PixiAnimatedSprite","BitmapText","PixiBitmapText","Container","PixiContainer","Graphics","PixiGraphics","HTMLText","PixiHTMLText","MeshPlane","PixiMeshPlane","MeshRope","PixiMeshRope","MeshSimple","PixiMeshSimple","NineSliceSprite","PixiNineSliceSprite","ParticleContainer","PixiParticleContainer","PerspectiveMesh","PixiPerspectiveMesh","RenderContainer","PixiRenderContainer","RenderLayer","PixiRenderLayer","Sprite","PixiSprite","Text","PixiText","TilingSprite","PixiTilingSprite"],"mappings":";;;;AAyCO,MAAMA,kBAAkB,CAAC,OAAO,MAAM,UAAU;AAWhD,MAAMC,aAAa,CACxBC,UACAC,OACAC,UACG;AACH,aAAWC,OAAOF,OAAO;AACvB,QAAIE,QAAQ,KAAM;AAElB,QAAIA,QAAQ,OAAO;AACjBC,yBAAmB,MAAM;AAEtBH,cAAME,GAAG,EAAoCH,QAAQ;AAAA,MACxD,CAAC;AAAA,IACH,WAAWG,QAAQ,YAAY;AAC7B,UAAI,EAAE,cAAcH,WAAW;AAC7B,cAAM,IAAIK,MAAM,gDAAgD;AAAA,MAClE;AACAD,yBAAmB,MAAM;AACvBE,eAAON,UAAU,MAAMC,MAAMM,QAAQ;AAAA,MACvC,CAAC;AAAA,IACH,WAAWL,OAAO;AAChBE,yBACEI,GACE,MAAMP,MAAME,GAAyB,GACrC,MAAM;AACJM,gBAAQT,UAAUG,KAAKF,MAAME,GAAyB,CAAC;AAAA,MACzD,GACA;AAAA,QAAED;AAAAA,MAAAA,CACJ,CACF;AAAA,IACF,OAAO;AACLE,yBAAmB,MAAM;AACvBK,gBAAQT,UAAUG,KAAKF,MAAME,GAAyB,CAAC;AAAA,MACzD,CAAC;AAAA,IACH;AAAA,EACF;AACF;AAEA,MAAMO,2BAA2B,CAC/BC,cACG;AACH,SAAO,CAACV,UAAqF;AAC3F,UAAM,CAACW,cAAcC,mBAAmB,IAAIC,WAAWb,OAAO,CAC5D,GAAGH,iBACH,GAAGiB,8BAA8B,CAClC;AAED,UAAMf,WAAWC,MAAMe,MAAM,IAAIL,UAAUE,mBAA0B;AAErEd,eAAWC,UAAUa,qBAAqB,IAAI;AAC9Cd,eAAWC,UAAUY,YAAY;AAEjC,WAAOZ;AAAAA,EACT;AACF;AAEA,MAAMiB,sBAAsB,CAC1BN,cACG;AACH,SAAO,CAACV,UAAgF;AACtF,WAAOS,yBAAqDC,SAAS,EAAEV,KAAY;AAAA,EACrF;AACF;AAKO,MAAMiB,iBAAiBD,oBAAoEE,gBAAkB;AAI7G,MAAMC,aAAaH,oBACxBI,YACF;AAIO,MAAMC,YAAYZ,yBAA+Da,WAAa;AAK9F,MAAMC,WAAWP,oBAAwDQ,UAAY;AAIrF,MAAMC,WAAWT,oBAAwDU,UAAY;AAKrF,MAAMC,YAAYX,oBAA0DY,WAAa;AAKzF,MAAMC,WAAWb,oBAAwDc,UAAY;AAKrF,MAAMC,aAAaf,oBAA4DgB,YAAc;AAK7F,MAAMC,kBAAkBjB,oBAC7BkB,iBACF;AAOO,MAAMC,oBAAoBnB,oBAC/BoB,mBACF;AAKO,MAAMC,kBAAkBrB,oBAC7BsB,iBACF;AAKO,MAAMC,kBAAkB9B,yBAC7B+B,iBACF;AAKO,MAAMC,cAAchC,yBAAmEiC,aAAe;AAKtG,MAAMC,SAAS3B,oBAAoD4B,QAAU;AAI7E,MAAMC,OAAO7B,oBAAsD8B,MAAQ;AAK3E,MAAMC,eAAe/B,oBAAgEgC,cAAgB;"}
|
package/dist/pixi-events.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
const
|
|
1
|
+
const PIXI_EVENT_NAMES = [
|
|
2
2
|
"click",
|
|
3
3
|
"mousedown",
|
|
4
4
|
"mouseenter",
|
|
@@ -62,12 +62,14 @@ const t = [
|
|
|
62
62
|
"touchmovecapture",
|
|
63
63
|
"touchstartcapture",
|
|
64
64
|
"wheelcapture"
|
|
65
|
-
]
|
|
66
|
-
|
|
67
|
-
)
|
|
65
|
+
];
|
|
66
|
+
const PIXI_SOLID_EVENT_HANDLER_NAMES = PIXI_EVENT_NAMES.map(
|
|
67
|
+
(eventName) => `on${eventName}`
|
|
68
|
+
);
|
|
69
|
+
const PIXI_EVENT_HANDLER_NAME_SET = new Set(PIXI_SOLID_EVENT_HANDLER_NAMES);
|
|
68
70
|
export {
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
71
|
+
PIXI_EVENT_HANDLER_NAME_SET,
|
|
72
|
+
PIXI_EVENT_NAMES,
|
|
73
|
+
PIXI_SOLID_EVENT_HANDLER_NAMES
|
|
72
74
|
};
|
|
73
75
|
//# sourceMappingURL=pixi-events.js.map
|
package/dist/pixi-events.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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":[
|
|
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":[],"mappings":"AAEO,MAAM,mBAAyD;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;AAEO,MAAM,iCAAiC,iBAAiB;AAAA,EAC7D,CAAC,cAAc,KAAK,SAAS;AAC/B;AAQO,MAAM,8BAET,IAAI,IAAI,8BAA8B;"}
|
package/dist/pixi-stage.js
CHANGED
|
@@ -1,11 +1,12 @@
|
|
|
1
|
-
import { memo
|
|
2
|
-
import { usePixiApp
|
|
3
|
-
import { applyProps
|
|
4
|
-
const
|
|
5
|
-
const
|
|
6
|
-
|
|
1
|
+
import { memo } from "solid-js/web";
|
|
2
|
+
import { usePixiApp } from "./pixi-application.js";
|
|
3
|
+
import { applyProps } from "./pixi-components.js";
|
|
4
|
+
const PixiStage = (props) => {
|
|
5
|
+
const pixiApp = usePixiApp();
|
|
6
|
+
applyProps(pixiApp.stage, props);
|
|
7
|
+
return memo(() => pixiApp.stage);
|
|
7
8
|
};
|
|
8
9
|
export {
|
|
9
|
-
|
|
10
|
+
PixiStage
|
|
10
11
|
};
|
|
11
12
|
//# sourceMappingURL=pixi-stage.js.map
|
package/dist/pixi-stage.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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,
|
|
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,YAAYA,CAACC,UAAuC;AAC/D,QAAMC,UAAUC,WAAAA;AAEhBC,aAAWF,QAAQG,OAAOJ,KAAK;AAE/B,SAAAK,KAAA,MAAUJ,QAAQG,KAAK;AACzB;"}
|
package/dist/renderer.js
CHANGED
|
@@ -1,83 +1,92 @@
|
|
|
1
|
-
import { Text
|
|
2
|
-
import { createRenderer
|
|
3
|
-
import { PIXI_EVENT_HANDLER_NAME_SET
|
|
1
|
+
import { Text } from "pixi.js";
|
|
2
|
+
import { createRenderer } from "solid-js/universal";
|
|
3
|
+
import { PIXI_EVENT_HANDLER_NAME_SET } from "./pixi-events.js";
|
|
4
4
|
const {
|
|
5
|
-
effect
|
|
6
|
-
memo
|
|
7
|
-
createComponent
|
|
8
|
-
createElement
|
|
9
|
-
createTextNode
|
|
10
|
-
insertNode
|
|
11
|
-
insert
|
|
12
|
-
setProp
|
|
13
|
-
mergeProps
|
|
14
|
-
use
|
|
15
|
-
render
|
|
16
|
-
spread
|
|
17
|
-
} =
|
|
18
|
-
createElement(
|
|
19
|
-
throw new Error(`Cannot create element "${
|
|
5
|
+
effect,
|
|
6
|
+
memo,
|
|
7
|
+
createComponent,
|
|
8
|
+
createElement,
|
|
9
|
+
createTextNode,
|
|
10
|
+
insertNode,
|
|
11
|
+
insert,
|
|
12
|
+
setProp,
|
|
13
|
+
mergeProps,
|
|
14
|
+
use,
|
|
15
|
+
render,
|
|
16
|
+
spread
|
|
17
|
+
} = createRenderer({
|
|
18
|
+
createElement(name) {
|
|
19
|
+
throw new Error(`Cannot create element "${name}". Please import components directly from 'pixi-solid' and use them with a capital letter.`);
|
|
20
20
|
},
|
|
21
|
-
createTextNode(
|
|
22
|
-
return new
|
|
23
|
-
text:
|
|
21
|
+
createTextNode(value) {
|
|
22
|
+
return new Text({
|
|
23
|
+
text: value
|
|
24
24
|
});
|
|
25
25
|
},
|
|
26
|
-
replaceText(
|
|
27
|
-
|
|
26
|
+
replaceText(textNode, value) {
|
|
27
|
+
textNode.text = value;
|
|
28
28
|
},
|
|
29
|
-
setProperty(
|
|
30
|
-
if (
|
|
31
|
-
const
|
|
32
|
-
|
|
29
|
+
setProperty(node, name, value, prev) {
|
|
30
|
+
if (PIXI_EVENT_HANDLER_NAME_SET.has(name)) {
|
|
31
|
+
const eventName = name.slice(2);
|
|
32
|
+
if (prev) {
|
|
33
|
+
node.removeEventListener(eventName, prev);
|
|
34
|
+
}
|
|
35
|
+
node.addEventListener(eventName, value);
|
|
33
36
|
return;
|
|
34
37
|
}
|
|
35
|
-
if (
|
|
36
|
-
|
|
38
|
+
if (name in node) {
|
|
39
|
+
node[name] = value;
|
|
37
40
|
return;
|
|
38
41
|
}
|
|
39
42
|
},
|
|
40
|
-
insertNode(
|
|
41
|
-
if ("attach" in
|
|
42
|
-
|
|
43
|
+
insertNode(parent, node, anchor) {
|
|
44
|
+
if ("attach" in parent && typeof parent.attach === "function") {
|
|
45
|
+
parent.attach(node);
|
|
43
46
|
return;
|
|
44
47
|
}
|
|
45
|
-
if (!("addChildAt" in
|
|
48
|
+
if (!("addChildAt" in parent) || !("addChild" in parent) || typeof parent.addChild !== "function") {
|
|
46
49
|
throw new Error("Parent does not support children.");
|
|
47
|
-
|
|
50
|
+
}
|
|
51
|
+
if (anchor) {
|
|
52
|
+
parent.addChildAt(node, parent.children.indexOf(anchor));
|
|
53
|
+
} else {
|
|
54
|
+
parent.addChild(node);
|
|
55
|
+
}
|
|
48
56
|
},
|
|
49
|
-
isTextNode(
|
|
50
|
-
return
|
|
57
|
+
isTextNode(node) {
|
|
58
|
+
return node instanceof Text;
|
|
51
59
|
},
|
|
52
|
-
removeNode(
|
|
53
|
-
|
|
54
|
-
|
|
60
|
+
removeNode(_, node) {
|
|
61
|
+
node.removeFromParent();
|
|
62
|
+
node.destroy({
|
|
63
|
+
children: true
|
|
55
64
|
});
|
|
56
65
|
},
|
|
57
|
-
getParentNode(
|
|
58
|
-
return
|
|
66
|
+
getParentNode(node) {
|
|
67
|
+
return node?.parent ?? void 0;
|
|
59
68
|
},
|
|
60
|
-
getFirstChild(
|
|
61
|
-
return
|
|
69
|
+
getFirstChild(node) {
|
|
70
|
+
return node.children?.[0];
|
|
62
71
|
},
|
|
63
|
-
getNextSibling(
|
|
64
|
-
if (!
|
|
65
|
-
const
|
|
66
|
-
return
|
|
72
|
+
getNextSibling(node) {
|
|
73
|
+
if (!node.parent) return void 0;
|
|
74
|
+
const index = node.parent.children.indexOf(node);
|
|
75
|
+
return index > -1 ? node.parent.children[index + 1] : void 0;
|
|
67
76
|
}
|
|
68
77
|
});
|
|
69
78
|
export {
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
79
|
+
createComponent,
|
|
80
|
+
createElement,
|
|
81
|
+
createTextNode,
|
|
82
|
+
effect,
|
|
83
|
+
insert,
|
|
84
|
+
insertNode,
|
|
85
|
+
memo,
|
|
86
|
+
mergeProps,
|
|
87
|
+
render,
|
|
88
|
+
setProp,
|
|
89
|
+
spread,
|
|
90
|
+
use
|
|
82
91
|
};
|
|
83
92
|
//# sourceMappingURL=renderer.js.map
|
package/dist/renderer.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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
|
|
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;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AACF,IAAIC,eAA8B;AAAA,EAChCT,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;AAEnC,QAAIC,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;AAEA,QAAIF,QAAQQ,MAAM;AACfA,WAAaR,IAAI,IAAIE;AACtB;AAAA,IACF;AAAA,EACF;AAAA,EACAV,WAAWwB,QAAQR,MAAMS,QAAQ;AAE/B,QAAI,YAAYD,UAAU,OAAOA,OAAOE,WAAW,YAAY;AAC7DF,aAAOE,OAAOV,IAAI;AAElB;AAAA,IACF;AAEA,QACE,EAAE,gBAAgBQ,WAClB,EAAE,cAAcA,WAChB,OAAOA,OAAOG,aAAa,YAC3B;AACA,YAAM,IAAIlB,MAAM,mCAAmC;AAAA,IACrD;AAEA,QAAIgB,QAAQ;AACVD,aAAOI,WAAWZ,MAAMQ,OAAOK,SAASC,QAAQL,MAAM,CAAC;AAAA,IACzD,OAAO;AACLD,aAAOG,SAASX,IAAI;AAAA,IACtB;AAAA,EACF;AAAA,EACAe,WAAWf,MAAM;AACf,WAAOA,gBAAgBL;AAAAA,EACzB;AAAA,EACAqB,WAAWC,GAAGjB,MAAM;AAClBA,SAAKkB,iBAAAA;AACLlB,SAAKmB,QAAQ;AAAA,MAAEN,UAAU;AAAA,IAAA,CAAM;AAAA,EACjC;AAAA,EACAO,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;"}
|
package/dist/types/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export type { PixiApplicationProps } from "./pixi-application";
|
|
2
|
-
export { PixiApplication, usePixiApp } from "./pixi-application";
|
|
2
|
+
export { PixiApplication, TickerProvider, usePixiApp, useTick, useTicker, } from "./pixi-application";
|
|
3
3
|
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";
|
|
@@ -8,4 +8,3 @@ 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";
|
|
11
|
-
export { useTick, useTicker } from "./use-ticker";
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import type { ApplicationOptions } from "pixi.js";
|
|
1
|
+
import type { ApplicationOptions, Ticker, TickerCallback } from "pixi.js";
|
|
2
2
|
import { Application } from "pixi.js";
|
|
3
|
-
import type { JSX, Ref } from "solid-js";
|
|
3
|
+
import type { JSX, ParentProps, Ref } from "solid-js";
|
|
4
4
|
/**
|
|
5
5
|
* A custom SolidJS hook to access the root PIXI.Application instance.
|
|
6
6
|
* This hook must be called from a component that is a descendant of `PixiApplication`.
|
|
@@ -29,3 +29,39 @@ export type PixiApplicationProps = Partial<Omit<ApplicationOptions, "children" |
|
|
|
29
29
|
*
|
|
30
30
|
*/
|
|
31
31
|
export declare const PixiApplication: (props: PixiApplicationProps) => JSX.Element;
|
|
32
|
+
export type TickerProviderProps = ParentProps<{
|
|
33
|
+
ticker: Ticker;
|
|
34
|
+
}>;
|
|
35
|
+
/**
|
|
36
|
+
* This is only required if you want a ticker without the Application.
|
|
37
|
+
* It provides context for the `useTick` and `useTicker` hooks so we can run tests that use them without having to instantate a Pixi Application.
|
|
38
|
+
*
|
|
39
|
+
* You need to pass in the ticker instance you want to use so it can be manually controled form the outside for testing.
|
|
40
|
+
*/
|
|
41
|
+
export declare const TickerProvider: (props: TickerProviderProps) => JSX.Element;
|
|
42
|
+
/**
|
|
43
|
+
* useTicker
|
|
44
|
+
*
|
|
45
|
+
* A custom SolidJS hook that provides access to the PIXI.Application's shared Ticker instance.
|
|
46
|
+
* This hook must be called from a component that is a descendant of `PixiApplication`.
|
|
47
|
+
* Or a descendant of `TickerProvider` if being used for testing without an application.
|
|
48
|
+
*
|
|
49
|
+
* @returns The PIXI.Ticker instance from the application context.
|
|
50
|
+
* @throws Will throw an error if used outside of a `PixiApplication` or `TickerProvider` context.
|
|
51
|
+
*/
|
|
52
|
+
export declare const useTicker: () => Ticker;
|
|
53
|
+
/**
|
|
54
|
+
* useTick
|
|
55
|
+
*
|
|
56
|
+
* A custom SolidJS hook that registers a callback function to be executed on every frame
|
|
57
|
+
* of the PIXI.Application's ticker. The callback is automatically removed when the
|
|
58
|
+
* component or hook's owning computation is cleaned up.
|
|
59
|
+
*
|
|
60
|
+
* This hook must be called from a component that is a descendant of `PixiApplication`.
|
|
61
|
+
* Or a descendant of `TickerProvider` if being used for testing without an application.
|
|
62
|
+
*
|
|
63
|
+
* @param tickerCallback - The function to call on each ticker update. It receives
|
|
64
|
+
* the `PIXI.Ticker` instance as its argument.
|
|
65
|
+
*
|
|
66
|
+
*/
|
|
67
|
+
export declare const useTick: (tickerCallback: TickerCallback<Ticker>) => void;
|
package/dist/use-resize.js
CHANGED
|
@@ -1,14 +1,17 @@
|
|
|
1
|
-
import { onCleanup
|
|
2
|
-
import { usePixiApp
|
|
3
|
-
const
|
|
4
|
-
const
|
|
5
|
-
|
|
1
|
+
import { onCleanup } from "solid-js";
|
|
2
|
+
import { usePixiApp } from "./pixi-application.js";
|
|
3
|
+
const useResize = (resizeCallback) => {
|
|
4
|
+
const app = usePixiApp();
|
|
5
|
+
const handleResize = () => {
|
|
6
|
+
resizeCallback(app.renderer.screen);
|
|
6
7
|
};
|
|
7
|
-
|
|
8
|
-
|
|
8
|
+
handleResize();
|
|
9
|
+
app.renderer.addListener("resize", handleResize);
|
|
10
|
+
onCleanup(() => {
|
|
11
|
+
app.renderer.removeListener("resize", handleResize);
|
|
9
12
|
});
|
|
10
13
|
};
|
|
11
14
|
export {
|
|
12
|
-
|
|
15
|
+
useResize
|
|
13
16
|
};
|
|
14
17
|
//# sourceMappingURL=use-resize.js.map
|
package/dist/use-resize.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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":[
|
|
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":[],"mappings":";;AAWO,MAAM,YAAY,CAAC,mBAA2D;AACnF,QAAM,MAAM,WAAA;AAEZ,QAAM,eAAe,MAAM;AACzB,mBAAe,IAAI,SAAS,MAAM;AAAA,EACpC;AAEA,eAAA;AAEA,MAAI,SAAS,YAAY,UAAU,YAAY;AAE/C,YAAU,MAAM;AACd,QAAI,SAAS,eAAe,UAAU,YAAY;AAAA,EACpD,CAAC;AACH;"}
|
package/dist/utils/index.js
CHANGED
package/dist/utils/object-fit.js
CHANGED
|
@@ -1,37 +1,47 @@
|
|
|
1
|
-
const
|
|
2
|
-
const
|
|
3
|
-
|
|
1
|
+
const objectFit = (object, bounds, fitMode) => {
|
|
2
|
+
const originalWidth = object.width / object.scale.x;
|
|
3
|
+
const originalHeight = object.height / object.scale.y;
|
|
4
|
+
if (originalWidth === 0 || originalHeight === 0 || bounds.width === 0 || bounds.height === 0)
|
|
4
5
|
return;
|
|
5
|
-
const
|
|
6
|
-
|
|
7
|
-
|
|
6
|
+
const widthRatio = bounds.width / originalWidth;
|
|
7
|
+
const heightRatio = bounds.height / originalHeight;
|
|
8
|
+
let scaleX = 1;
|
|
9
|
+
let scaleY = 1;
|
|
10
|
+
switch (fitMode) {
|
|
8
11
|
case "cover": {
|
|
9
|
-
const
|
|
10
|
-
|
|
12
|
+
const coverScale = Math.max(widthRatio, heightRatio);
|
|
13
|
+
scaleX = coverScale;
|
|
14
|
+
scaleY = coverScale;
|
|
11
15
|
break;
|
|
12
16
|
}
|
|
13
17
|
case "contain": {
|
|
14
|
-
const
|
|
15
|
-
|
|
18
|
+
const containScale = Math.min(widthRatio, heightRatio);
|
|
19
|
+
scaleX = containScale;
|
|
20
|
+
scaleY = containScale;
|
|
16
21
|
break;
|
|
17
22
|
}
|
|
18
23
|
case "fill": {
|
|
19
|
-
|
|
24
|
+
scaleX = widthRatio;
|
|
25
|
+
scaleY = heightRatio;
|
|
20
26
|
break;
|
|
21
27
|
}
|
|
22
28
|
case "scale-down": {
|
|
23
|
-
if (
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
29
|
+
if (originalWidth <= bounds.width && originalHeight <= bounds.height) {
|
|
30
|
+
scaleX = 1;
|
|
31
|
+
scaleY = 1;
|
|
32
|
+
} else {
|
|
33
|
+
const scaleDown = Math.min(widthRatio, heightRatio);
|
|
34
|
+
scaleX = scaleDown;
|
|
35
|
+
scaleY = scaleDown;
|
|
28
36
|
}
|
|
29
37
|
break;
|
|
30
38
|
}
|
|
31
39
|
}
|
|
32
|
-
|
|
40
|
+
object.scale.set(scaleX, scaleY);
|
|
41
|
+
object.x = (bounds.width - object.width) / 2;
|
|
42
|
+
object.y = (bounds.height - object.height) / 2;
|
|
33
43
|
};
|
|
34
44
|
export {
|
|
35
|
-
|
|
45
|
+
objectFit
|
|
36
46
|
};
|
|
37
47
|
//# sourceMappingURL=object-fit.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"object-fit.js","sources":["../../src/utils/object-fit.ts"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\n\nexport type ObjectFitMode = \"cover\" | \"contain\" | \"fill\" | \"scale-down\";\n\n/**\n * Scale an object to fit within the given bounds according to the specified fit mode.\n * @param object The object to be scaled.\n * @param bounds The bounds it should fit within.\n * @param fitMode The object fit mode to apply.\n */\nexport const objectFit = (\n object: Pixi.Container,\n bounds: { width: number; height: number },\n fitMode: ObjectFitMode,\n): void => {\n const originalWidth = object.width / object.scale.x;\n const originalHeight = object.height / object.scale.y;\n\n if (originalWidth === 0 || originalHeight === 0 || bounds.width === 0 || bounds.height === 0)\n return;\n\n const widthRatio = bounds.width / originalWidth;\n const heightRatio = bounds.height / originalHeight;\n\n let scaleX = 1;\n let scaleY = 1;\n\n switch (fitMode) {\n case \"cover\": {\n const coverScale = Math.max(widthRatio, heightRatio);\n scaleX = coverScale;\n scaleY = coverScale;\n break;\n }\n case \"contain\": {\n const containScale = Math.min(widthRatio, heightRatio);\n scaleX = containScale;\n scaleY = containScale;\n break;\n }\n case \"fill\": {\n scaleX = widthRatio;\n scaleY = heightRatio;\n break;\n }\n case \"scale-down\": {\n // If the object is smaller than the container, it's 'none' (no scaling up).\n // Otherwise, it's 'contain'.\n if (originalWidth <= bounds.width && originalHeight <= bounds.height) {\n scaleX = 1;\n scaleY = 1;\n } else {\n const scaleDown = Math.min(widthRatio, heightRatio);\n scaleX = scaleDown;\n scaleY = scaleDown;\n }\n break;\n }\n default:\n // Default to no scaling if an unknown fitMode is provided\n break;\n }\n\n object.scale.set(scaleX, scaleY);\n\n // Center the object\n object.x = (bounds.width - object.width) / 2;\n object.y = (bounds.height - object.height) / 2;\n};\n"],"names":[
|
|
1
|
+
{"version":3,"file":"object-fit.js","sources":["../../src/utils/object-fit.ts"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\n\nexport type ObjectFitMode = \"cover\" | \"contain\" | \"fill\" | \"scale-down\";\n\n/**\n * Scale an object to fit within the given bounds according to the specified fit mode.\n * @param object The object to be scaled.\n * @param bounds The bounds it should fit within.\n * @param fitMode The object fit mode to apply.\n */\nexport const objectFit = (\n object: Pixi.Container,\n bounds: { width: number; height: number },\n fitMode: ObjectFitMode,\n): void => {\n const originalWidth = object.width / object.scale.x;\n const originalHeight = object.height / object.scale.y;\n\n if (originalWidth === 0 || originalHeight === 0 || bounds.width === 0 || bounds.height === 0)\n return;\n\n const widthRatio = bounds.width / originalWidth;\n const heightRatio = bounds.height / originalHeight;\n\n let scaleX = 1;\n let scaleY = 1;\n\n switch (fitMode) {\n case \"cover\": {\n const coverScale = Math.max(widthRatio, heightRatio);\n scaleX = coverScale;\n scaleY = coverScale;\n break;\n }\n case \"contain\": {\n const containScale = Math.min(widthRatio, heightRatio);\n scaleX = containScale;\n scaleY = containScale;\n break;\n }\n case \"fill\": {\n scaleX = widthRatio;\n scaleY = heightRatio;\n break;\n }\n case \"scale-down\": {\n // If the object is smaller than the container, it's 'none' (no scaling up).\n // Otherwise, it's 'contain'.\n if (originalWidth <= bounds.width && originalHeight <= bounds.height) {\n scaleX = 1;\n scaleY = 1;\n } else {\n const scaleDown = Math.min(widthRatio, heightRatio);\n scaleX = scaleDown;\n scaleY = scaleDown;\n }\n break;\n }\n default:\n // Default to no scaling if an unknown fitMode is provided\n break;\n }\n\n object.scale.set(scaleX, scaleY);\n\n // Center the object\n object.x = (bounds.width - object.width) / 2;\n object.y = (bounds.height - object.height) / 2;\n};\n"],"names":[],"mappings":"AAUO,MAAM,YAAY,CACvB,QACA,QACA,YACS;AACT,QAAM,gBAAgB,OAAO,QAAQ,OAAO,MAAM;AAClD,QAAM,iBAAiB,OAAO,SAAS,OAAO,MAAM;AAEpD,MAAI,kBAAkB,KAAK,mBAAmB,KAAK,OAAO,UAAU,KAAK,OAAO,WAAW;AACzF;AAEF,QAAM,aAAa,OAAO,QAAQ;AAClC,QAAM,cAAc,OAAO,SAAS;AAEpC,MAAI,SAAS;AACb,MAAI,SAAS;AAEb,UAAQ,SAAA;AAAA,IACN,KAAK,SAAS;AACZ,YAAM,aAAa,KAAK,IAAI,YAAY,WAAW;AACnD,eAAS;AACT,eAAS;AACT;AAAA,IACF;AAAA,IACA,KAAK,WAAW;AACd,YAAM,eAAe,KAAK,IAAI,YAAY,WAAW;AACrD,eAAS;AACT,eAAS;AACT;AAAA,IACF;AAAA,IACA,KAAK,QAAQ;AACX,eAAS;AACT,eAAS;AACT;AAAA,IACF;AAAA,IACA,KAAK,cAAc;AAGjB,UAAI,iBAAiB,OAAO,SAAS,kBAAkB,OAAO,QAAQ;AACpE,iBAAS;AACT,iBAAS;AAAA,MACX,OAAO;AACL,cAAM,YAAY,KAAK,IAAI,YAAY,WAAW;AAClD,iBAAS;AACT,iBAAS;AAAA,MACX;AACA;AAAA,IACF;AAAA,EAGE;AAGJ,SAAO,MAAM,IAAI,QAAQ,MAAM;AAG/B,SAAO,KAAK,OAAO,QAAQ,OAAO,SAAS;AAC3C,SAAO,KAAK,OAAO,SAAS,OAAO,UAAU;AAC/C;"}
|
package/package.json
CHANGED
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import type { Ticker, TickerCallback } from "pixi.js";
|
|
2
|
-
/**
|
|
3
|
-
* useTicker
|
|
4
|
-
*
|
|
5
|
-
* A custom SolidJS hook that provides access to the PIXI.Application's shared Ticker instance.
|
|
6
|
-
* This hook must be called from a component that is a descendant of `PixiApplication`.
|
|
7
|
-
*
|
|
8
|
-
* @returns The PIXI.Ticker instance from the application context.
|
|
9
|
-
* @throws Will throw an error if used outside of a `PixiApplication` context provider.
|
|
10
|
-
*
|
|
11
|
-
* **Example**
|
|
12
|
-
* {@includeCode ./examples/useTicker.example.tsx}
|
|
13
|
-
*/
|
|
14
|
-
export declare const useTicker: () => Ticker;
|
|
15
|
-
/**
|
|
16
|
-
* useTick
|
|
17
|
-
*
|
|
18
|
-
* A custom SolidJS hook that registers a callback function to be executed on every frame
|
|
19
|
-
* of the PIXI.Application's ticker. The callback is automatically removed when the
|
|
20
|
-
* component or hook's owning computation is cleaned up.
|
|
21
|
-
*
|
|
22
|
-
* This hook must be called from a component that is a descendant of `PixiApplication`.
|
|
23
|
-
*
|
|
24
|
-
* @param tickerCallback - The function to call on each ticker update. It receives
|
|
25
|
-
* the `PIXI.Ticker` instance as its argument.
|
|
26
|
-
*
|
|
27
|
-
*/
|
|
28
|
-
export declare const useTick: (tickerCallback: TickerCallback<Ticker>) => void;
|
package/dist/use-ticker.js
DELETED
|
@@ -1,15 +0,0 @@
|
|
|
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
|
-
});
|
|
10
|
-
};
|
|
11
|
-
export {
|
|
12
|
-
c as useTick,
|
|
13
|
-
s as useTicker
|
|
14
|
-
};
|
|
15
|
-
//# sourceMappingURL=use-ticker.js.map
|
package/dist/use-ticker.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
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;"}
|