@vizij/render 1.0.0 → 2.0.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/README.md +195 -110
- package/dist/index.d.mts +183 -151
- package/dist/index.d.ts +183 -151
- package/dist/index.js +765 -1776
- package/dist/index.mjs +738 -1776
- package/package.json +11 -18
package/dist/index.d.mts
CHANGED
|
@@ -1,12 +1,140 @@
|
|
|
1
|
-
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
1
|
import * as react from 'react';
|
|
3
|
-
import { CSSProperties,
|
|
4
|
-
import {
|
|
5
|
-
import * as THREE from 'three';
|
|
6
|
-
import { BufferGeometry, ShapeGeometry, ToneMapping, Group as Group$1, Mesh, AnimationClip, Object3D } from 'three';
|
|
2
|
+
import { CSSProperties, ReactNode } from 'react';
|
|
3
|
+
import { MountOptions, InitProgress, ToneMapping, Fit, Bounds, Pick } from '@vizij/runtime';
|
|
7
4
|
import * as zustand from 'zustand';
|
|
5
|
+
import * as THREE from 'three';
|
|
6
|
+
import { BufferGeometry, ShapeGeometry, Group as Group$1, Object3D, AnimationClip } from 'three';
|
|
8
7
|
import { RawValue, AnimatableValue, RawVector2 } from '@vizij/utils';
|
|
9
8
|
|
|
9
|
+
/**
|
|
10
|
+
* Resolves with the page's canvas once `<VizijCanvas>` has mounted it, which
|
|
11
|
+
* `loadVizij` requires; rejects if mounting failed.
|
|
12
|
+
*/
|
|
13
|
+
declare function canvasMounted(): Promise<HTMLCanvasElement>;
|
|
14
|
+
interface VizijCanvasProps {
|
|
15
|
+
/** `mount`'s options: every face's defaults. Read on the page's first
|
|
16
|
+
* mount; the App keeps them for the page's lifetime. */
|
|
17
|
+
options?: MountOptions;
|
|
18
|
+
/** Replace the default style — fixed over the page, pointer events off —
|
|
19
|
+
* of the element the canvas fills. A page that takes picks gives it
|
|
20
|
+
* pointer events. */
|
|
21
|
+
className?: string;
|
|
22
|
+
style?: CSSProperties;
|
|
23
|
+
}
|
|
24
|
+
/**
|
|
25
|
+
* The page's one canvas, which every `<Vizij>` slot draws on.
|
|
26
|
+
*
|
|
27
|
+
* Its first mount runs `@vizij/runtime`'s `mount`; a second `<VizijCanvas>`,
|
|
28
|
+
* a remount or React StrictMode's second effect shows the same canvas and
|
|
29
|
+
* App. While it is shown, one animation frame loop places each slot's face
|
|
30
|
+
* over the slot and hands each pick to the slot it names: `placeVizij` and
|
|
31
|
+
* `drainPicks` are page-wide, so they have one caller.
|
|
32
|
+
*
|
|
33
|
+
* By default the canvas is fixed over the page with pointer events off, so
|
|
34
|
+
* faces draw wherever their slots lie and the page's own UI keeps the
|
|
35
|
+
* pointer. Content that must draw over the faces stacks above the canvas.
|
|
36
|
+
*/
|
|
37
|
+
declare function VizijCanvas({ options, className, style, }: VizijCanvasProps): ReactNode;
|
|
38
|
+
|
|
39
|
+
/**
|
|
40
|
+
* A face's own stages on its way to being drawn, as whoever loads it reports
|
|
41
|
+
* them (`setVizijProgress`): its GLB's bytes arriving (`total` is `null`
|
|
42
|
+
* when the length is unknown), `loadVizij`, then its first frame. `failed`
|
|
43
|
+
* ends the load.
|
|
44
|
+
*/
|
|
45
|
+
type VizijProgress = {
|
|
46
|
+
stage: "fetch";
|
|
47
|
+
loaded: number;
|
|
48
|
+
total: number | null;
|
|
49
|
+
} | {
|
|
50
|
+
stage: "load";
|
|
51
|
+
} | {
|
|
52
|
+
stage: "draw";
|
|
53
|
+
} | {
|
|
54
|
+
stage: "failed";
|
|
55
|
+
error: Error;
|
|
56
|
+
};
|
|
57
|
+
/**
|
|
58
|
+
* Where a face's slot is on its way to showing the face: the runtime's
|
|
59
|
+
* stages (`@vizij/runtime`'s `onInitProgress` until `init()` resolves, then
|
|
60
|
+
* `mount`, the page's App being built), then the face's own.
|
|
61
|
+
*/
|
|
62
|
+
type LoadingStage = Exclude<InitProgress, {
|
|
63
|
+
stage: "ready";
|
|
64
|
+
}> | {
|
|
65
|
+
stage: "mount";
|
|
66
|
+
} | VizijProgress;
|
|
67
|
+
/**
|
|
68
|
+
* Report face `vizijId`'s own stage, for the loading view of its slot
|
|
69
|
+
* (`<Vizij>`). `@vizij/runtime-react`'s provider reports its faces; a page
|
|
70
|
+
* that loads a face with `loadVizij` itself reports it the same way. `null`
|
|
71
|
+
* says no face is loaded under the id any more: its slot shows the loading
|
|
72
|
+
* view again until a face under the id is drawn.
|
|
73
|
+
*
|
|
74
|
+
* Whatever is reported, a slot hides its loading view once its face has been
|
|
75
|
+
* drawn (`ready(vizijId)`), and keeps it hidden through reloads, whose
|
|
76
|
+
* previous scene draws until the new one is ready.
|
|
77
|
+
*/
|
|
78
|
+
declare function setVizijProgress(vizijId: string, progress: VizijProgress | null): void;
|
|
79
|
+
|
|
80
|
+
/** A slot's loading view, as `<Vizij>`'s `loading` render prop receives it. */
|
|
81
|
+
interface VizijLoading {
|
|
82
|
+
stage: LoadingStage;
|
|
83
|
+
/** The stage in words: "Downloading the runtime: 3.1 of 9.8 MB". */
|
|
84
|
+
label: string;
|
|
85
|
+
/** How much of the stage is done, from 0 to 1, for the stages that count
|
|
86
|
+
* bytes against a known total; `null` (indeterminate) for the others. */
|
|
87
|
+
fraction: number | null;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
interface VizijProps {
|
|
91
|
+
/** The face this slot shows: the id it is loaded under (`loadVizij`). */
|
|
92
|
+
vizijId: string;
|
|
93
|
+
/** Size and place the slot; the face draws over its border box. */
|
|
94
|
+
className?: string;
|
|
95
|
+
style?: CSSProperties;
|
|
96
|
+
/** The face's tone-mapping curve; `none` when absent. */
|
|
97
|
+
toneMapping?: ToneMapping;
|
|
98
|
+
/** How the framed bounds fit the slot; the canvas's `options.fit` when
|
|
99
|
+
* absent. */
|
|
100
|
+
fit?: Fit;
|
|
101
|
+
/** Magnification after the fit; the canvas's `options.zoom` when absent. */
|
|
102
|
+
zoom?: number | [number, number];
|
|
103
|
+
/** The world rectangle the face's camera frames, in place of the GLB's
|
|
104
|
+
* authored `rootBounds`. */
|
|
105
|
+
bounds?: Bounds;
|
|
106
|
+
/** Outline the framed bounds over the face. */
|
|
107
|
+
showSafeArea?: boolean;
|
|
108
|
+
/** The elements whose outlines glow, by the ids their RobotData declares.
|
|
109
|
+
* Absent, the slot leaves the face's selection as it is. */
|
|
110
|
+
selection?: string[];
|
|
111
|
+
/** A press on the face: the element under the pointer, or `null` for a
|
|
112
|
+
* press that hit none. Picks need pointer events on the canvas. */
|
|
113
|
+
onPick?: (pick: Pick) => void;
|
|
114
|
+
/** The image of the default loading view, in place of Vizij's logo,
|
|
115
|
+
* which `@vizij/render` ships; `null` for none. */
|
|
116
|
+
loadingImage?: ReactNode;
|
|
117
|
+
/** The slot's own loading view, in place of the default: called with the
|
|
118
|
+
* stage, its label and its fraction while the face is not drawn. `null`
|
|
119
|
+
* shows none. */
|
|
120
|
+
loading?: ((loading: VizijLoading) => ReactNode) | null;
|
|
121
|
+
}
|
|
122
|
+
/**
|
|
123
|
+
* Where face `vizijId` draws on the page's canvas (`<VizijCanvas>`): a
|
|
124
|
+
* `<div>` the canvas's frame loop places the face over, following it as the
|
|
125
|
+
* page scrolls and lays out. It renders no canvas of its own. One slot shows
|
|
126
|
+
* a face at a time.
|
|
127
|
+
*
|
|
128
|
+
* The element carries `data-vizij-id`, and `data-vizij-ready` — `"true"`
|
|
129
|
+
* once the face's scene shows its device's pose (`ready(vizijId)`).
|
|
130
|
+
*
|
|
131
|
+
* Until its face is first drawn, the slot shows a loading view over its
|
|
132
|
+
* border box: the runtime's stages, then the face's (`setVizijProgress`).
|
|
133
|
+
* The view is a DOM overlay in the slot: under a canvas laid over the page,
|
|
134
|
+
* it shows wherever the canvas draws nothing.
|
|
135
|
+
*/
|
|
136
|
+
declare function Vizij({ vizijId, className, style, toneMapping, fit, zoom, bounds, showSafeArea, selection, onPick, loadingImage, loading, }: VizijProps): ReactNode;
|
|
137
|
+
|
|
10
138
|
/**
|
|
11
139
|
* A wrapping type to reference an attribute that is animatable.
|
|
12
140
|
*
|
|
@@ -70,17 +198,17 @@ interface Stored<T extends Omit<RenderableBase, "refs">> {
|
|
|
70
198
|
type StoredRenderable = Stored<RenderableBase>;
|
|
71
199
|
|
|
72
200
|
/**
|
|
73
|
-
* An object for creating
|
|
201
|
+
* An object for creating hierarchies/bodies
|
|
74
202
|
*
|
|
75
|
-
* @param id - The id of the
|
|
76
|
-
* @param name - The name of the
|
|
77
|
-
* @param tags - The tags of the
|
|
203
|
+
* @param id - The id of the ellipse
|
|
204
|
+
* @param name - The name of the ellipse
|
|
205
|
+
* @param tags - The tags of the ellipse
|
|
78
206
|
* @param type - Type flag
|
|
79
|
-
* @param features - The features of the
|
|
80
|
-
* @param children - The children of the
|
|
207
|
+
* @param features - The features of the ellipse (translation, rotation, and scale)
|
|
208
|
+
* @param children - The children of the ellipse (list of ids for other bodies or shapes)
|
|
81
209
|
*/
|
|
82
|
-
interface
|
|
83
|
-
type: "
|
|
210
|
+
interface Ellipse extends RenderableBase {
|
|
211
|
+
type: "ellipse";
|
|
84
212
|
features: {
|
|
85
213
|
height: Feature;
|
|
86
214
|
width: Feature;
|
|
@@ -89,27 +217,26 @@ interface Rectangle extends RenderableBase {
|
|
|
89
217
|
fillColor?: Feature;
|
|
90
218
|
strokeColor?: Feature;
|
|
91
219
|
strokeWidth?: Feature;
|
|
92
|
-
strokeRadius?: Feature;
|
|
93
220
|
strokeOffset?: Feature;
|
|
94
221
|
translation: Feature;
|
|
95
222
|
rotation: Feature;
|
|
96
223
|
};
|
|
97
224
|
}
|
|
98
|
-
type
|
|
99
|
-
type
|
|
225
|
+
type EllipseFeature = keyof Ellipse["features"];
|
|
226
|
+
type StoredEllipse = Stored<Ellipse>;
|
|
100
227
|
|
|
101
228
|
/**
|
|
102
|
-
* An object for creating
|
|
229
|
+
* An object for creating rectangles
|
|
103
230
|
*
|
|
104
|
-
* @param id - The id of the
|
|
105
|
-
* @param name - The name of the
|
|
106
|
-
* @param tags - The tags of the
|
|
231
|
+
* @param id - The id of the rectangle
|
|
232
|
+
* @param name - The name of the rectangle
|
|
233
|
+
* @param tags - The tags of the rectangle
|
|
107
234
|
* @param type - Type flag
|
|
108
|
-
* @param features - The features of the
|
|
109
|
-
* @param children - The children of the
|
|
235
|
+
* @param features - The features of the rectangle (translation, rotation, and scale)
|
|
236
|
+
* @param children - The children of the rectangle (list of ids for other bodies or shapes)
|
|
110
237
|
*/
|
|
111
|
-
interface
|
|
112
|
-
type: "
|
|
238
|
+
interface Rectangle extends RenderableBase {
|
|
239
|
+
type: "rectangle";
|
|
113
240
|
features: {
|
|
114
241
|
height: Feature;
|
|
115
242
|
width: Feature;
|
|
@@ -118,13 +245,14 @@ interface Ellipse extends RenderableBase {
|
|
|
118
245
|
fillColor?: Feature;
|
|
119
246
|
strokeColor?: Feature;
|
|
120
247
|
strokeWidth?: Feature;
|
|
248
|
+
strokeRadius?: Feature;
|
|
121
249
|
strokeOffset?: Feature;
|
|
122
250
|
translation: Feature;
|
|
123
251
|
rotation: Feature;
|
|
124
252
|
};
|
|
125
253
|
}
|
|
126
|
-
type
|
|
127
|
-
type
|
|
254
|
+
type RectangleFeature = keyof Rectangle["features"];
|
|
255
|
+
type StoredRectangle = Stored<Rectangle>;
|
|
128
256
|
|
|
129
257
|
/**
|
|
130
258
|
* An object for creating hierarchies/groups
|
|
@@ -208,6 +336,8 @@ declare enum ShapeMaterial {
|
|
|
208
336
|
type ShapeFeature = keyof Shape["features"];
|
|
209
337
|
type StoredShape = Stored<Omit<Shape, "geometry">>;
|
|
210
338
|
|
|
339
|
+
type World = Record<string, Group | Ellipse | Rectangle | Shape>;
|
|
340
|
+
|
|
211
341
|
type RenderableFeature = GroupFeature | EllipseFeature;
|
|
212
342
|
|
|
213
343
|
/**
|
|
@@ -230,27 +360,20 @@ interface Selection {
|
|
|
230
360
|
};
|
|
231
361
|
}
|
|
232
362
|
|
|
233
|
-
type World = Record<string, Group | Ellipse | Rectangle | Shape>;
|
|
234
|
-
|
|
235
363
|
/**
|
|
236
|
-
*
|
|
237
|
-
*
|
|
238
|
-
*
|
|
239
|
-
*
|
|
240
|
-
*
|
|
241
|
-
*
|
|
242
|
-
*
|
|
243
|
-
*
|
|
244
|
-
* clip at 1.0. This matches plain web/canvas rendering and is the historical
|
|
245
|
-
* vizij default (chosen so studio colors match the canvas).
|
|
246
|
-
* - `"agx"` — AgX, Blender 4.x's default view transform. Compresses
|
|
247
|
-
* over-1.0 emissive into soft, slightly-desaturated color; matches faces
|
|
248
|
-
* authored/exported from Blender.
|
|
364
|
+
* A face's tone-mapping curve, as a bundle stores it and the view applies it
|
|
365
|
+
* (`@vizij/runtime`'s `ToneMapping`):
|
|
366
|
+
*
|
|
367
|
+
* - `"none"` — no curve: colors as shaded, clipped at 1.0, as plain web
|
|
368
|
+
* rendering shows them. The default.
|
|
369
|
+
* - `"agx"` — AgX, Blender 4.x's default view transform: over-1.0 emissive
|
|
370
|
+
* compressed into soft, slightly desaturated color, as faces authored in
|
|
371
|
+
* Blender expect.
|
|
249
372
|
* - `"aces"` — ACES Filmic, a punchier cinematic curve.
|
|
250
|
-
* - `"neutral"` — Khronos PBR Neutral, a mild curve that
|
|
251
|
-
* while taming highlights.
|
|
373
|
+
* - `"neutral"` — Khronos PBR Neutral, a mild curve that keeps hue and
|
|
374
|
+
* saturation while taming highlights.
|
|
252
375
|
*/
|
|
253
|
-
type ToneMappingMode =
|
|
376
|
+
type ToneMappingMode = ToneMapping;
|
|
254
377
|
/**
|
|
255
378
|
* The set of supported tone-mapping modes, in display order. Useful for
|
|
256
379
|
* building selection UIs.
|
|
@@ -260,21 +383,12 @@ declare const TONE_MAPPING_MODES: ToneMappingMode[];
|
|
|
260
383
|
* Human-readable labels for each tone-mapping mode.
|
|
261
384
|
*/
|
|
262
385
|
declare const TONE_MAPPING_LABELS: Record<ToneMappingMode, string>;
|
|
263
|
-
/**
|
|
264
|
-
* The default tone-mapping mode used when a face/scene has not specified one.
|
|
265
|
-
* `"none"` preserves the historical web-matching behavior.
|
|
266
|
-
*/
|
|
386
|
+
/** The tone-mapping mode of a face that specifies none. */
|
|
267
387
|
declare const DEFAULT_TONE_MAPPING_MODE: ToneMappingMode;
|
|
268
388
|
/**
|
|
269
389
|
* Type guard: is `value` a valid {@link ToneMappingMode}?
|
|
270
390
|
*/
|
|
271
391
|
declare function isToneMappingMode(value: unknown): value is ToneMappingMode;
|
|
272
|
-
/**
|
|
273
|
-
* Resolve a {@link ToneMappingMode} (or an unknown/undefined stored value) to
|
|
274
|
-
* the corresponding three.js tone-mapping constant. Falls back to
|
|
275
|
-
* {@link DEFAULT_TONE_MAPPING_MODE} for missing/invalid input.
|
|
276
|
-
*/
|
|
277
|
-
declare function resolveToneMapping(mode: unknown): ToneMapping;
|
|
278
392
|
/**
|
|
279
393
|
* Normalize an unknown/stored value into a valid {@link ToneMappingMode},
|
|
280
394
|
* falling back to {@link DEFAULT_TONE_MAPPING_MODE}.
|
|
@@ -503,68 +617,14 @@ interface VizijAnimationClipData {
|
|
|
503
617
|
tracks: VizijAnimationTrackData[];
|
|
504
618
|
}
|
|
505
619
|
|
|
506
|
-
interface VizijProps {
|
|
507
|
-
style?: CSSProperties;
|
|
508
|
-
className?: string;
|
|
509
|
-
rootId: string;
|
|
510
|
-
namespace?: string;
|
|
511
|
-
showSafeArea?: boolean;
|
|
512
|
-
showSelectionGlow?: boolean;
|
|
513
|
-
/**
|
|
514
|
-
* View-transform applied by the WebGL renderer. Defaults to `"none"`
|
|
515
|
-
* (no tone mapping — matches plain web/canvas rendering). Faces authored in
|
|
516
|
-
* Blender typically want `"agx"` to compress over-driven emissive. Applied
|
|
517
|
-
* reactively, so it can be changed at runtime without remounting the canvas.
|
|
518
|
-
*/
|
|
519
|
-
toneMapping?: ToneMappingMode;
|
|
520
|
-
onPointerMissed?: ComponentProps<typeof Canvas>["onPointerMissed"];
|
|
521
|
-
}
|
|
522
|
-
/**
|
|
523
|
-
* Renders the Vizij component.
|
|
524
|
-
*
|
|
525
|
-
* @param style - The style object for the Vizij component.
|
|
526
|
-
*
|
|
527
|
-
* @param className - The CSS class name for the Vizij component
|
|
528
|
-
*
|
|
529
|
-
* @param rootId - The root identifier for the Vizij component.
|
|
530
|
-
*
|
|
531
|
-
* @param namespace - The namespace for the Vizij component
|
|
532
|
-
*
|
|
533
|
-
* @param showSafeArea - Whether to show the safe area.
|
|
534
|
-
*
|
|
535
|
-
* @returns The rendered ReactNode.
|
|
536
|
-
*/
|
|
537
|
-
declare function Vizij({ style, className, rootId, namespace, showSafeArea, showSelectionGlow, toneMapping, onPointerMissed, }: VizijProps): ReactNode;
|
|
538
|
-
interface InnerVizijProps {
|
|
539
|
-
rootId: string;
|
|
540
|
-
namespace: string;
|
|
541
|
-
container?: {
|
|
542
|
-
width: number;
|
|
543
|
-
height: number;
|
|
544
|
-
resolution: number;
|
|
545
|
-
};
|
|
546
|
-
showSafeArea?: boolean;
|
|
547
|
-
showSelectionGlow?: boolean;
|
|
548
|
-
toneMapping?: ToneMappingMode;
|
|
549
|
-
}
|
|
550
|
-
declare function InnerVizij({ rootId, namespace, container, showSafeArea, showSelectionGlow, toneMapping, }: InnerVizijProps): react_jsx_runtime.JSX.Element;
|
|
551
|
-
|
|
552
620
|
interface VizijData {
|
|
553
621
|
world: World;
|
|
554
|
-
/**
|
|
555
|
-
* The mounted three.js object of each world element, by element id and then
|
|
556
|
-
* namespace. It lives beside `world` so that the world stays plain data.
|
|
557
|
-
*/
|
|
558
|
-
refs: Record<string, Record<string, RefObject<Group$1 | Mesh | null>>>;
|
|
559
622
|
animatables: Record<string, AnimatableValue>;
|
|
560
623
|
values: Map<string, RawValue | undefined>;
|
|
561
|
-
renderHit: boolean;
|
|
562
624
|
preferences: {
|
|
563
625
|
damping: boolean;
|
|
564
626
|
};
|
|
565
627
|
elementSelection: Selection[];
|
|
566
|
-
hoveredElement: Selection | null;
|
|
567
|
-
slotConfig: Record<string, string>;
|
|
568
628
|
}
|
|
569
629
|
interface VizijActions {
|
|
570
630
|
setValue: (id: string, namespace: string, value: RawValue | ((current: RawValue | undefined) => RawValue | undefined)) => void;
|
|
@@ -575,15 +635,9 @@ interface VizijActions {
|
|
|
575
635
|
}>) => void;
|
|
576
636
|
setWorldElementName: (id: string, value: string) => void;
|
|
577
637
|
setVizij: (scene: World, animatables: Record<string, AnimatableValue>) => void;
|
|
578
|
-
setSlot: (parentId: string, parentNamespace: string, childId: string, childNamespace: string) => void;
|
|
579
|
-
setSlots: (slots: Record<string, string>, replace?: boolean) => void;
|
|
580
|
-
clearSlot: (parentId: string, parentNamespace: string) => void;
|
|
581
638
|
addWorldElements: (world: World, animatables: Record<string, AnimatableValue>, replace?: boolean) => void;
|
|
582
639
|
setPreferences: (preferences: Partial<VizijData["preferences"]>) => void;
|
|
583
|
-
getExportableBodies: (filterIds?: string[]) => Group$1[];
|
|
584
640
|
updateElementSelection: (selection: Selection, chain: string[]) => void;
|
|
585
|
-
setHoveredElement: (selection: Selection | null) => void;
|
|
586
|
-
onElementClick: (selection: Selection, chain: string[], event: ThreeEvent<MouseEvent>) => void;
|
|
587
641
|
clearSelection: () => void;
|
|
588
642
|
setOrigin: (id: string, origin: {
|
|
589
643
|
translation?: THREE.Vector3;
|
|
@@ -598,7 +652,6 @@ interface VizijActions {
|
|
|
598
652
|
setChildren: (id: string, children: string[]) => void;
|
|
599
653
|
setGeometry: (id: string, geometry: THREE.BufferGeometry) => void;
|
|
600
654
|
setMaterial: (id: string, material: string) => void;
|
|
601
|
-
setReference: (id: string, namespace: string, object: RefObject<Group$1 | Mesh | null>) => void;
|
|
602
655
|
createGroup: (root: boolean) => void;
|
|
603
656
|
createAnimatable: (elementId: string, featureName: string, value: Partial<AnimatableValue>) => void;
|
|
604
657
|
createStatic: (elementId: string, featureName: string, value: RawValue) => void;
|
|
@@ -606,23 +659,16 @@ interface VizijActions {
|
|
|
606
659
|
type VizijStoreSetter = (partial: (VizijData & VizijActions) | Partial<VizijData & VizijActions> | ((state: VizijData & VizijActions) => (VizijData & VizijActions) | Partial<VizijData & VizijActions>), replace?: false | undefined) => void;
|
|
607
660
|
type VizijStoreGetter = () => VizijData & VizijActions;
|
|
608
661
|
|
|
609
|
-
declare const VizijSlice: (set: VizijStoreSetter,
|
|
662
|
+
declare const VizijSlice: (set: VizijStoreSetter, _get: VizijStoreGetter) => {
|
|
610
663
|
world: {};
|
|
611
|
-
refs: {};
|
|
612
664
|
animatables: {};
|
|
613
665
|
values: Map<any, any>;
|
|
614
|
-
renderHit: boolean;
|
|
615
666
|
preferences: {
|
|
616
667
|
damping: boolean;
|
|
617
668
|
};
|
|
618
669
|
elementSelection: never[];
|
|
619
|
-
hoveredElement: null;
|
|
620
|
-
slotConfig: {};
|
|
621
670
|
clearSelection: () => void;
|
|
622
671
|
updateElementSelection: (selection: Selection, _chain: string[]) => void;
|
|
623
|
-
setHoveredElement: (selection: Selection | null) => void;
|
|
624
|
-
onElementClick: (selection: Selection, _chain: string[], event: ThreeEvent<MouseEvent>) => void;
|
|
625
|
-
getExportableBodies: (filterIds?: string[]) => THREE.Group<THREE.Object3DEventMap>[];
|
|
626
672
|
setGeometry: (id: string, geometry: THREE.BufferGeometry) => void;
|
|
627
673
|
setValue: (id: string, namespace: string, value: RawValue | ((current: RawValue | undefined) => RawValue | undefined)) => void;
|
|
628
674
|
setValues: (writes?: Array<{
|
|
@@ -646,13 +692,9 @@ declare const VizijSlice: (set: VizijStoreSetter, get: VizijStoreGetter) => {
|
|
|
646
692
|
createAnimatable: (elementId: string, featureName: string, value: Partial<AnimatableValue>) => void;
|
|
647
693
|
createStatic: (elementId: string, featureName: string, value: RawValue) => void;
|
|
648
694
|
setAnimatableValue: (id: string, value: AnimatableValue) => void;
|
|
649
|
-
setSlot: (parentId: string, parentNamespace: string, childId: string, childNamespace: string) => void;
|
|
650
|
-
setSlots: (slots: Record<string, string>, replace?: boolean) => void;
|
|
651
|
-
clearSlot: (parentId: string, parentNamespace: string) => void;
|
|
652
695
|
setVizij: (scene: World, animatables: Record<string, AnimatableValue>) => void;
|
|
653
696
|
addWorldElements(world: World, animatables: Record<string, AnimatableValue>, replace?: boolean): void;
|
|
654
697
|
setPreferences: (preferences: Partial<VizijData["preferences"]>) => void;
|
|
655
|
-
setReference: (id: string, namespace: string, ref: RefObject<Group$1 | Mesh | null>) => void;
|
|
656
698
|
};
|
|
657
699
|
declare const useDefaultVizijStore: zustand.UseBoundStore<Omit<zustand.StoreApi<VizijData & VizijActions>, "subscribe"> & {
|
|
658
700
|
subscribe: {
|
|
@@ -688,25 +730,6 @@ declare function useVizijStore<T>(selector: (state: VizijData & VizijActions) =>
|
|
|
688
730
|
|
|
689
731
|
declare function useVizijStoreSubscription<T>(selector: (state: VizijData & VizijActions) => T, listener: (state: T) => void): void;
|
|
690
732
|
|
|
691
|
-
/**
|
|
692
|
-
* Custom React hook to manage and subscribe to feature values.
|
|
693
|
-
*
|
|
694
|
-
* @param namespace - The namespace for the features.
|
|
695
|
-
* @param features - A record of feature objects keyed by their IDs.
|
|
696
|
-
* @param callbacks - A record of callback functions keyed by feature IDs.
|
|
697
|
-
* @param debugInfo - Optional debug information to log in case of errors.
|
|
698
|
-
*
|
|
699
|
-
* @throws [Error] If the SceneContext store is not found.
|
|
700
|
-
*
|
|
701
|
-
* @returns [void]
|
|
702
|
-
*
|
|
703
|
-
* This hook sets up subscriptions to feature values and invokes the provided callbacks when the values change.
|
|
704
|
-
* It handles both animated and non-animated features. For animated features, it subscribes to the animatable value
|
|
705
|
-
* in the store and invokes the callback whenever the value changes. For non-animated features, it immediately
|
|
706
|
-
* invokes the callback with the feature's value.
|
|
707
|
-
*/
|
|
708
|
-
declare function useFeatures(namespace: string, features: Record<string, Feature>, callbacks: Record<string, (current: RawValue) => void>, debugInfo?: any): void;
|
|
709
|
-
|
|
710
733
|
declare function useVizijStoreSetter(): {
|
|
711
734
|
(partial: (VizijData & VizijActions) | Partial<VizijData & VizijActions> | ((state: VizijData & VizijActions) => (VizijData & VizijActions) | Partial<VizijData & VizijActions>), replace?: false): void;
|
|
712
735
|
(state: (VizijData & VizijActions) | ((state: VizijData & VizijActions) => VizijData & VizijActions), replace: true): void;
|
|
@@ -752,7 +775,11 @@ declare function loadGLTFFromBlobWithBundle(blob: Blob, aggressiveImport?: boole
|
|
|
752
775
|
size: RawVector2;
|
|
753
776
|
}): Promise<LoadedVizijAsset>;
|
|
754
777
|
|
|
755
|
-
|
|
778
|
+
/**
|
|
779
|
+
* The bounds of everything under `group` in the XY plane: its meshes, and its
|
|
780
|
+
* `ellipse` and `rectangle` elements' shapes. `null` when it holds neither.
|
|
781
|
+
*/
|
|
782
|
+
declare function deriveRootBounds(group: Object3D): {
|
|
756
783
|
center: RawVector2;
|
|
757
784
|
size: RawVector2;
|
|
758
785
|
} | null;
|
|
@@ -810,9 +837,14 @@ declare function exportScene(root: THREE.Object3D, options?: ExportSceneOptions)
|
|
|
810
837
|
* pose. A caller that wants other values in the file passes them as the
|
|
811
838
|
* defaults of `animatables`.
|
|
812
839
|
*
|
|
813
|
-
*
|
|
814
|
-
*
|
|
815
|
-
*
|
|
840
|
+
* An ellipse or a rectangle becomes a node with no mesh: its RobotData —
|
|
841
|
+
* `type`, `width`, `height`, `fillColor`, `fillOpacity` among its features —
|
|
842
|
+
* is what the Bevy view draws it from (a unit circle or square scaled by the
|
|
843
|
+
* width and height, filled with the colour and opacity). The node carries its
|
|
844
|
+
* translation and rotation, and the width and height as its scale on X and Y.
|
|
845
|
+
*
|
|
846
|
+
* Throws when an element is missing from `world`, and when an animated
|
|
847
|
+
* feature names an animatable missing from `animatables`.
|
|
816
848
|
*/
|
|
817
849
|
declare function buildSceneGraph(world: World, animatables: Record<string, AnimatableValue>, rootId: string): THREE.Object3D;
|
|
818
850
|
|
|
@@ -854,4 +886,4 @@ declare function sanitizeMorphKey(name: string, fallbackIndex: number, used: Set
|
|
|
854
886
|
*/
|
|
855
887
|
declare function deriveMorphFeatureKeys(names: ReadonlyArray<string>): string[];
|
|
856
888
|
|
|
857
|
-
export { type AnimatedFeature, DEFAULT_TONE_MAPPING_MODE, type Ellipse, type EllipseFeature, EmptyModelError, type ExportSceneOptions, type Feature, type Group, type GroupFeature,
|
|
889
|
+
export { type AnimatedFeature, DEFAULT_TONE_MAPPING_MODE, type Ellipse, type EllipseFeature, EmptyModelError, type ExportSceneOptions, type Feature, type Group, type GroupFeature, type LoadedVizijAsset, type LoadingStage, type Rectangle, type RectangleFeature, type RenderableBase, type RenderableFeature, type Selection, type Shape, type ShapeFeature, ShapeMaterial, type StaticFeature, type Stored, type StoredAnimatedFeature, type StoredEllipse, type StoredFeatures, type StoredGroup, type StoredRectangle, type StoredRenderable, type StoredShape, TONE_MAPPING_LABELS, TONE_MAPPING_MODES, type ToneMappingMode, Vizij, type VizijActions, type VizijAnimationClipData, type VizijAnimationId, type VizijAnimationTrackData, type VizijBundleAnimationClip, type VizijBundleAnimationEntry, type VizijBundleAnimationKeyframe, type VizijBundleAnimationTrack, type VizijBundleExtension, type VizijBundleGraphEntry, type VizijBundleGraphKind, type VizijBundleGraphMetadata, type VizijBundlePoseSection, type VizijBundleProfile, type VizijBundleStarredSection, type VizijBundleVersion, VizijCanvas, type VizijCanvasProps, VizijContext, type VizijData, type VizijGraphId, type VizijLoading, type VizijPoseDefinition, type VizijPoseId, type VizijPoseRigConfig, type VizijProfileKey, type VizijProgress, type VizijProps, VizijSlice, type VizijSpeechConfig, type VizijStarredItem, type VizijStarredKind, type VizijStore, type VizijStoreGetter, type VizijStoreSetter, type World, applyVizijBundle, buildSceneGraph, canvasMounted, createVizijStore, deriveMorphFeatureKeys, deriveRootBounds, exportScene, extractVizijBundle, isToneMappingMode, loadGLTF, loadGLTFFromBlob, loadGLTFFromBlobWithBundle, loadGLTFWithBundle, normalizeToneMappingMode, parseGlbJsonChunk, patchGlbJson, patchVizijBundleMetadata, sanitizeMorphKey, setVizijProgress, useDefaultVizijStore, useVizijStore, useVizijStoreGetter, useVizijStoreSetter, useVizijStoreSubscription };
|