@scenography/react 0.1.0 → 0.2.0
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.cjs +18 -2
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +5 -2
- package/dist/index.d.mts +5 -2
- package/dist/index.mjs +18 -2
- package/dist/index.mjs.map +1 -1
- package/package.json +4 -4
package/dist/index.cjs
CHANGED
|
@@ -13,13 +13,16 @@ const fillStyle = {
|
|
|
13
13
|
* canvas, keeps it sized to its container, and feeds scene changes through
|
|
14
14
|
* `setScene` so edits reconcile without remounting.
|
|
15
15
|
*/
|
|
16
|
-
function Gallery({ scene, className, style, onReady }) {
|
|
16
|
+
function Gallery({ scene, className, style, options, onReady }) {
|
|
17
17
|
const canvasRef = (0, react.useRef)(null);
|
|
18
18
|
const galleryRef = (0, react.useRef)(null);
|
|
19
19
|
(0, react.useEffect)(() => {
|
|
20
20
|
const canvas = canvasRef.current;
|
|
21
21
|
if (!canvas) return;
|
|
22
|
-
const gallery = (0, _scenography_engine.createGallery)(scene, {
|
|
22
|
+
const gallery = (0, _scenography_engine.createGallery)(scene, {
|
|
23
|
+
canvas,
|
|
24
|
+
...options
|
|
25
|
+
});
|
|
23
26
|
galleryRef.current = gallery;
|
|
24
27
|
gallery.start();
|
|
25
28
|
onReady?.(gallery);
|
|
@@ -39,6 +42,19 @@ function Gallery({ scene, className, style, onReady }) {
|
|
|
39
42
|
(0, react.useEffect)(() => {
|
|
40
43
|
galleryRef.current?.setScene(scene);
|
|
41
44
|
}, [scene]);
|
|
45
|
+
(0, react.useEffect)(() => {
|
|
46
|
+
galleryRef.current?.setRender({
|
|
47
|
+
antialias: options?.antialias,
|
|
48
|
+
ssao: options?.ssao,
|
|
49
|
+
bloom: options?.bloom,
|
|
50
|
+
shadows: options?.shadows
|
|
51
|
+
});
|
|
52
|
+
}, [
|
|
53
|
+
options?.antialias,
|
|
54
|
+
options?.ssao,
|
|
55
|
+
options?.bloom,
|
|
56
|
+
options?.shadows
|
|
57
|
+
]);
|
|
42
58
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("canvas", {
|
|
43
59
|
ref: canvasRef,
|
|
44
60
|
className,
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","names":[],"sources":["../src/Gallery.tsx"],"sourcesContent":["import { useEffect, useRef, type CSSProperties } from \"react\";\nimport {
|
|
1
|
+
{"version":3,"file":"index.cjs","names":[],"sources":["../src/Gallery.tsx"],"sourcesContent":["import { useEffect, useRef, type CSSProperties } from \"react\";\nimport {\n createGallery,\n type Gallery as GalleryInstance,\n type GalleryOptions,\n} from \"@scenography/engine\";\nimport type { Scene } from \"@scenography/scene\";\n\nexport interface GalleryProps {\n /** The scene definition to render. Changing it hot-reconciles in place. */\n scene: Scene;\n className?: string;\n style?: CSSProperties;\n /** Engine options (antialias, ssao, …). Applied once on mount. */\n options?: Omit<GalleryOptions, \"canvas\">;\n /** Called once with the gallery instance after it mounts (escape hatch). */\n onReady?: (gallery: GalleryInstance) => void;\n}\n\nconst fillStyle: CSSProperties = { display: \"block\", width: \"100%\", height: \"100%\" };\n\n/**\n * Declarative React wrapper over the engine. Mounts a `createGallery` onto a\n * canvas, keeps it sized to its container, and feeds scene changes through\n * `setScene` so edits reconcile without remounting.\n */\nexport function Gallery({ scene, className, style, options, onReady }: GalleryProps): JSX.Element {\n const canvasRef = useRef<HTMLCanvasElement>(null);\n const galleryRef = useRef<GalleryInstance | null>(null);\n\n // Mount once: create the gallery, track container size, run the loop.\n useEffect(() => {\n const canvas = canvasRef.current;\n if (!canvas) return;\n\n const gallery = createGallery(scene, { canvas, ...options });\n galleryRef.current = gallery;\n gallery.start();\n onReady?.(gallery);\n\n const resize = (): void => {\n const parent = canvas.parentElement;\n if (parent) gallery.resize(parent.clientWidth, parent.clientHeight);\n };\n resize();\n const observer = new ResizeObserver(resize);\n if (canvas.parentElement) observer.observe(canvas.parentElement);\n\n return () => {\n observer.disconnect();\n gallery.dispose();\n galleryRef.current = null;\n };\n // Mount/unmount only — scene updates are handled below.\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n // Hot-reconcile whenever the scene definition changes.\n useEffect(() => {\n galleryRef.current?.setScene(scene);\n }, [scene]);\n\n // Apply render-feature toggles live (antialias/ssao/bloom/shadows).\n useEffect(() => {\n galleryRef.current?.setRender({\n antialias: options?.antialias,\n ssao: options?.ssao,\n bloom: options?.bloom,\n shadows: options?.shadows,\n });\n }, [options?.antialias, options?.ssao, options?.bloom, options?.shadows]);\n\n return <canvas ref={canvasRef} className={className} style={{ ...fillStyle, ...style }} />;\n}\n"],"mappings":";;;;;AAmBA,MAAM,YAA2B;CAAE,SAAS;CAAS,OAAO;CAAQ,QAAQ;AAAO;;;;;;AAOnF,SAAgB,QAAQ,EAAE,OAAO,WAAW,OAAO,SAAS,WAAsC;CAChG,MAAM,aAAA,GAAA,MAAA,OAAA,CAAsC,IAAI;CAChD,MAAM,cAAA,GAAA,MAAA,OAAA,CAA4C,IAAI;CAGtD,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,MAAM,SAAS,UAAU;EACzB,IAAI,CAAC,QAAQ;EAEb,MAAM,WAAA,GAAA,oBAAA,cAAA,CAAwB,OAAO;GAAE;GAAQ,GAAG;EAAQ,CAAC;EAC3D,WAAW,UAAU;EACrB,QAAQ,MAAM;EACd,UAAU,OAAO;EAEjB,MAAM,eAAqB;GACzB,MAAM,SAAS,OAAO;GACtB,IAAI,QAAQ,QAAQ,OAAO,OAAO,aAAa,OAAO,YAAY;EACpE;EACA,OAAO;EACP,MAAM,WAAW,IAAI,eAAe,MAAM;EAC1C,IAAI,OAAO,eAAe,SAAS,QAAQ,OAAO,aAAa;EAE/D,aAAa;GACX,SAAS,WAAW;GACpB,QAAQ,QAAQ;GAChB,WAAW,UAAU;EACvB;CAGF,GAAG,CAAC,CAAC;CAGL,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,WAAW,SAAS,SAAS,KAAK;CACpC,GAAG,CAAC,KAAK,CAAC;CAGV,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,WAAW,SAAS,UAAU;GAC5B,WAAW,SAAS;GACpB,MAAM,SAAS;GACf,OAAO,SAAS;GAChB,SAAS,SAAS;EACpB,CAAC;CACH,GAAG;EAAC,SAAS;EAAW,SAAS;EAAM,SAAS;EAAO,SAAS;CAAO,CAAC;CAExE,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;EAAQ,KAAK;EAAsB;EAAW,OAAO;GAAE,GAAG;GAAW,GAAG;EAAM;CAAI,CAAA;AAC3F"}
|
package/dist/index.d.cts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { CSSProperties } from "react";
|
|
2
|
-
import { Gallery as Gallery$1 } from "@scenography/engine";
|
|
3
|
-
import { Scene } from "@scenography/
|
|
2
|
+
import { Gallery as Gallery$1, GalleryOptions } from "@scenography/engine";
|
|
3
|
+
import { Scene } from "@scenography/scene";
|
|
4
4
|
|
|
5
5
|
//#region src/Gallery.d.ts
|
|
6
6
|
interface GalleryProps {
|
|
@@ -8,6 +8,8 @@ interface GalleryProps {
|
|
|
8
8
|
scene: Scene;
|
|
9
9
|
className?: string;
|
|
10
10
|
style?: CSSProperties;
|
|
11
|
+
/** Engine options (antialias, ssao, …). Applied once on mount. */
|
|
12
|
+
options?: Omit<GalleryOptions, "canvas">;
|
|
11
13
|
/** Called once with the gallery instance after it mounts (escape hatch). */
|
|
12
14
|
onReady?: (gallery: Gallery$1) => void;
|
|
13
15
|
}
|
|
@@ -20,6 +22,7 @@ declare function Gallery({
|
|
|
20
22
|
scene,
|
|
21
23
|
className,
|
|
22
24
|
style,
|
|
25
|
+
options,
|
|
23
26
|
onReady
|
|
24
27
|
}: GalleryProps): JSX.Element;
|
|
25
28
|
//#endregion
|
package/dist/index.d.mts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { CSSProperties } from "react";
|
|
2
|
-
import { Gallery as Gallery$1 } from "@scenography/engine";
|
|
3
|
-
import { Scene } from "@scenography/
|
|
2
|
+
import { Gallery as Gallery$1, GalleryOptions } from "@scenography/engine";
|
|
3
|
+
import { Scene } from "@scenography/scene";
|
|
4
4
|
|
|
5
5
|
//#region src/Gallery.d.ts
|
|
6
6
|
interface GalleryProps {
|
|
@@ -8,6 +8,8 @@ interface GalleryProps {
|
|
|
8
8
|
scene: Scene;
|
|
9
9
|
className?: string;
|
|
10
10
|
style?: CSSProperties;
|
|
11
|
+
/** Engine options (antialias, ssao, …). Applied once on mount. */
|
|
12
|
+
options?: Omit<GalleryOptions, "canvas">;
|
|
11
13
|
/** Called once with the gallery instance after it mounts (escape hatch). */
|
|
12
14
|
onReady?: (gallery: Gallery$1) => void;
|
|
13
15
|
}
|
|
@@ -20,6 +22,7 @@ declare function Gallery({
|
|
|
20
22
|
scene,
|
|
21
23
|
className,
|
|
22
24
|
style,
|
|
25
|
+
options,
|
|
23
26
|
onReady
|
|
24
27
|
}: GalleryProps): JSX.Element;
|
|
25
28
|
//#endregion
|
package/dist/index.mjs
CHANGED
|
@@ -12,13 +12,16 @@ const fillStyle = {
|
|
|
12
12
|
* canvas, keeps it sized to its container, and feeds scene changes through
|
|
13
13
|
* `setScene` so edits reconcile without remounting.
|
|
14
14
|
*/
|
|
15
|
-
function Gallery({ scene, className, style, onReady }) {
|
|
15
|
+
function Gallery({ scene, className, style, options, onReady }) {
|
|
16
16
|
const canvasRef = useRef(null);
|
|
17
17
|
const galleryRef = useRef(null);
|
|
18
18
|
useEffect(() => {
|
|
19
19
|
const canvas = canvasRef.current;
|
|
20
20
|
if (!canvas) return;
|
|
21
|
-
const gallery = createGallery(scene, {
|
|
21
|
+
const gallery = createGallery(scene, {
|
|
22
|
+
canvas,
|
|
23
|
+
...options
|
|
24
|
+
});
|
|
22
25
|
galleryRef.current = gallery;
|
|
23
26
|
gallery.start();
|
|
24
27
|
onReady?.(gallery);
|
|
@@ -38,6 +41,19 @@ function Gallery({ scene, className, style, onReady }) {
|
|
|
38
41
|
useEffect(() => {
|
|
39
42
|
galleryRef.current?.setScene(scene);
|
|
40
43
|
}, [scene]);
|
|
44
|
+
useEffect(() => {
|
|
45
|
+
galleryRef.current?.setRender({
|
|
46
|
+
antialias: options?.antialias,
|
|
47
|
+
ssao: options?.ssao,
|
|
48
|
+
bloom: options?.bloom,
|
|
49
|
+
shadows: options?.shadows
|
|
50
|
+
});
|
|
51
|
+
}, [
|
|
52
|
+
options?.antialias,
|
|
53
|
+
options?.ssao,
|
|
54
|
+
options?.bloom,
|
|
55
|
+
options?.shadows
|
|
56
|
+
]);
|
|
41
57
|
return /* @__PURE__ */ jsx("canvas", {
|
|
42
58
|
ref: canvasRef,
|
|
43
59
|
className,
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","names":[],"sources":["../src/Gallery.tsx"],"sourcesContent":["import { useEffect, useRef, type CSSProperties } from \"react\";\nimport {
|
|
1
|
+
{"version":3,"file":"index.mjs","names":[],"sources":["../src/Gallery.tsx"],"sourcesContent":["import { useEffect, useRef, type CSSProperties } from \"react\";\nimport {\n createGallery,\n type Gallery as GalleryInstance,\n type GalleryOptions,\n} from \"@scenography/engine\";\nimport type { Scene } from \"@scenography/scene\";\n\nexport interface GalleryProps {\n /** The scene definition to render. Changing it hot-reconciles in place. */\n scene: Scene;\n className?: string;\n style?: CSSProperties;\n /** Engine options (antialias, ssao, …). Applied once on mount. */\n options?: Omit<GalleryOptions, \"canvas\">;\n /** Called once with the gallery instance after it mounts (escape hatch). */\n onReady?: (gallery: GalleryInstance) => void;\n}\n\nconst fillStyle: CSSProperties = { display: \"block\", width: \"100%\", height: \"100%\" };\n\n/**\n * Declarative React wrapper over the engine. Mounts a `createGallery` onto a\n * canvas, keeps it sized to its container, and feeds scene changes through\n * `setScene` so edits reconcile without remounting.\n */\nexport function Gallery({ scene, className, style, options, onReady }: GalleryProps): JSX.Element {\n const canvasRef = useRef<HTMLCanvasElement>(null);\n const galleryRef = useRef<GalleryInstance | null>(null);\n\n // Mount once: create the gallery, track container size, run the loop.\n useEffect(() => {\n const canvas = canvasRef.current;\n if (!canvas) return;\n\n const gallery = createGallery(scene, { canvas, ...options });\n galleryRef.current = gallery;\n gallery.start();\n onReady?.(gallery);\n\n const resize = (): void => {\n const parent = canvas.parentElement;\n if (parent) gallery.resize(parent.clientWidth, parent.clientHeight);\n };\n resize();\n const observer = new ResizeObserver(resize);\n if (canvas.parentElement) observer.observe(canvas.parentElement);\n\n return () => {\n observer.disconnect();\n gallery.dispose();\n galleryRef.current = null;\n };\n // Mount/unmount only — scene updates are handled below.\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n // Hot-reconcile whenever the scene definition changes.\n useEffect(() => {\n galleryRef.current?.setScene(scene);\n }, [scene]);\n\n // Apply render-feature toggles live (antialias/ssao/bloom/shadows).\n useEffect(() => {\n galleryRef.current?.setRender({\n antialias: options?.antialias,\n ssao: options?.ssao,\n bloom: options?.bloom,\n shadows: options?.shadows,\n });\n }, [options?.antialias, options?.ssao, options?.bloom, options?.shadows]);\n\n return <canvas ref={canvasRef} className={className} style={{ ...fillStyle, ...style }} />;\n}\n"],"mappings":";;;;AAmBA,MAAM,YAA2B;CAAE,SAAS;CAAS,OAAO;CAAQ,QAAQ;AAAO;;;;;;AAOnF,SAAgB,QAAQ,EAAE,OAAO,WAAW,OAAO,SAAS,WAAsC;CAChG,MAAM,YAAY,OAA0B,IAAI;CAChD,MAAM,aAAa,OAA+B,IAAI;CAGtD,gBAAgB;EACd,MAAM,SAAS,UAAU;EACzB,IAAI,CAAC,QAAQ;EAEb,MAAM,UAAU,cAAc,OAAO;GAAE;GAAQ,GAAG;EAAQ,CAAC;EAC3D,WAAW,UAAU;EACrB,QAAQ,MAAM;EACd,UAAU,OAAO;EAEjB,MAAM,eAAqB;GACzB,MAAM,SAAS,OAAO;GACtB,IAAI,QAAQ,QAAQ,OAAO,OAAO,aAAa,OAAO,YAAY;EACpE;EACA,OAAO;EACP,MAAM,WAAW,IAAI,eAAe,MAAM;EAC1C,IAAI,OAAO,eAAe,SAAS,QAAQ,OAAO,aAAa;EAE/D,aAAa;GACX,SAAS,WAAW;GACpB,QAAQ,QAAQ;GAChB,WAAW,UAAU;EACvB;CAGF,GAAG,CAAC,CAAC;CAGL,gBAAgB;EACd,WAAW,SAAS,SAAS,KAAK;CACpC,GAAG,CAAC,KAAK,CAAC;CAGV,gBAAgB;EACd,WAAW,SAAS,UAAU;GAC5B,WAAW,SAAS;GACpB,MAAM,SAAS;GACf,OAAO,SAAS;GAChB,SAAS,SAAS;EACpB,CAAC;CACH,GAAG;EAAC,SAAS;EAAW,SAAS;EAAM,SAAS;EAAO,SAAS;CAAO,CAAC;CAExE,OAAO,oBAAC,UAAD;EAAQ,KAAK;EAAsB;EAAW,OAAO;GAAE,GAAG;GAAW,GAAG;EAAM;CAAI,CAAA;AAC3F"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@scenography/react",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0",
|
|
4
4
|
"description": "React bindings for scenography: a declarative <Gallery> component over the engine, with hot scene updates.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"files": [
|
|
@@ -23,19 +23,19 @@
|
|
|
23
23
|
}
|
|
24
24
|
},
|
|
25
25
|
"dependencies": {
|
|
26
|
-
"@scenography/engine": "0.
|
|
26
|
+
"@scenography/engine": "0.2.0"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
29
|
"@types/react": "^18.3.0",
|
|
30
30
|
"@types/three": "^0.160.0",
|
|
31
31
|
"react": "^18.3.0",
|
|
32
32
|
"three": "^0.160.0",
|
|
33
|
-
"@scenography/
|
|
33
|
+
"@scenography/scene": "0.2.0"
|
|
34
34
|
},
|
|
35
35
|
"peerDependencies": {
|
|
36
36
|
"react": ">=18",
|
|
37
37
|
"three": ">=0.160.0",
|
|
38
|
-
"@scenography/
|
|
38
|
+
"@scenography/scene": "0.2.0"
|
|
39
39
|
},
|
|
40
40
|
"scripts": {
|
|
41
41
|
"build": "tsdown",
|