@vizij/render 0.0.6 → 0.1.0

package/dist/index.js

@@ -55,12 +55,12 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/vizij.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_react_error_boundary = require("react-error-boundary");
-var import_three = require("three");
-var import_fiber = require("@react-three/fiber");
+var import_three2 = require("three");
+var import_fiber2 = require("@react-three/fiber");
 var import_drei3 = require("@react-three/drei");
-var import_shallow7 = require("zustand/react/shallow");
+var import_shallow8 = require("zustand/react/shallow");
 
 // src/renderables/renderable.tsx
 var import_react8 = require("react");
@@ -174,7 +174,7 @@ function InnerRenderedGroup({
   namespace,
   chain
 }) {
-  const ref = (0, import_react4.useRef)();
+  const ref = (0, import_react4.useRef)(null);
   const group = useVizijStore((0, import_shallow2.useShallow)((state) => state.world[id]));
   const refIsNull = !group.refs[namespace]?.current;
   const animatables = useVizijStore((0, import_shallow2.useShallow)((state) => state.animatables));
@@ -295,9 +295,11 @@ function InnerRenderedEllipse({
   namespace,
   chain
 }) {
-  const ellipseRef = (0, import_react5.useRef)();
-  const materialRef = (0, import_react5.useRef)();
-  const lineRef = (0, import_react5.useRef)();
+  const ellipseRef = (0, import_react5.useRef)(null);
+  const materialRef = (0, import_react5.useRef)(
+    null
+  );
+  const lineRef = (0, import_react5.useRef)(null);
   const strokeOffsetRef = (0, import_react5.useRef)(0);
   const strokeWidthRef = (0, import_react5.useRef)(0);
   const onElementClick = useVizijStore(
@@ -580,9 +582,11 @@ function InnerRenderedRectangle({
   namespace,
   chain
 }) {
-  const rectangleRef = (0, import_react6.useRef)();
-  const materialRef = (0, import_react6.useRef)();
-  const lineRef = (0, import_react6.useRef)();
+  const rectangleRef = (0, import_react6.useRef)(null);
+  const materialRef = (0, import_react6.useRef)(
+    null
+  );
+  const lineRef = (0, import_react6.useRef)(null);
   const strokeOffsetRef = (0, import_react6.useRef)(0);
   const strokeWidthRef = (0, import_react6.useRef)(0);
   const onElementClick = useVizijStore(
@@ -867,8 +871,8 @@ function InnerRenderedShape({
   namespace,
   chain
 }) {
-  const refGroup = (0, import_react7.useRef)();
-  const ref = (0, import_react7.useRef)();
+  const refGroup = (0, import_react7.useRef)(null);
+  const ref = (0, import_react7.useRef)(null);
   const shape = useVizijStore((0, import_shallow5.useShallow)((state) => state.world[id]));
   const refs = useVizijStore(
     (0, import_shallow5.useShallow)((state) => state.world[id].refs)
@@ -909,7 +913,7 @@ function InnerRenderedShape({
     }),
     [shape, animatableValues, selectionData]
   );
-  const material = (0, import_react7.useRef)();
+  const material = (0, import_react7.useRef)(null);
   const morphTargetSettings = (0, import_react7.useMemo)(() => {
     if (shape.morphTargets) {
       const dictionary = shape.morphTargets.reduce(
@@ -1555,6 +1559,19 @@ var VizijSlice = (set, get) => ({
       })
     );
   },
+  setValues: (writes = []) => {
+    if (writes.length === 0) {
+      return;
+    }
+    set(
+      (0, import_immer.produce)((state) => {
+        writes.forEach(({ id, namespace, value }) => {
+          const lookupId = (0, import_utils6.getLookup)(namespace, id);
+          state.values.set(lookupId, value);
+        });
+      })
+    );
+  },
   setWorldElementName: (id, value) => {
     set(
       (0, import_immer.produce)((state) => {
@@ -1749,59 +1766,163 @@ var createVizijStore = (initial) => (0, import_zustand2.create)()(
   }))
 );
 
-// src/vizij.tsx
+// src/effects/selection-glow-effect.tsx
+var import_react10 = require("react");
+var import_fiber = require("@react-three/fiber");
+var import_shallow7 = require("zustand/react/shallow");
+var import_three = require("three");
 var import_jsx_runtime6 = require("react/jsx-runtime");
-import_three.Object3D.DEFAULT_UP.set(0, 0, 1);
+function SelectionGlowEffect({
+  enabled = false,
+  color = "#ff1010ff",
+  opacity = 0.9,
+  thresholdAngle = 2
+}) {
+  const selections = useVizijStore(
+    (0, import_shallow7.useShallow)(
+      (state) => enabled ? state.elementSelection ?? [] : []
+    )
+  );
+  if (!enabled || selections.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react10.Fragment, { children: selections.map((selection) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    SelectionOutline,
+    {
+      selection,
+      color: selection.color ?? color,
+      opacity,
+      thresholdAngle
+    },
+    `${selection.namespace}:${selection.id}`
+  )) });
+}
+function SelectionOutline({
+  selection,
+  color,
+  opacity,
+  thresholdAngle
+}) {
+  const target = useVizijStore(
+    (0, import_shallow7.useShallow)((state) => {
+      const entry = state.world[selection.id];
+      const ref = entry?.refs?.[selection.namespace];
+      const geometry = entry?.geometry ?? null;
+      return { ref, geometry };
+    })
+  );
+  const sourceRef = target.ref;
+  const edgesGeometry = (0, import_react10.useMemo)(() => {
+    if (!target.geometry) return null;
+    const edges = new import_three.EdgesGeometry(target.geometry, thresholdAngle);
+    return edges;
+  }, [target.geometry, thresholdAngle]);
+  (0, import_react10.useEffect)(() => () => edgesGeometry?.dispose(), [edgesGeometry]);
+  const material = (0, import_react10.useMemo)(() => {
+    const mat = new import_three.LineBasicMaterial({
+      color: new import_three.Color(color),
+      transparent: true,
+      opacity,
+      blending: import_three.AdditiveBlending,
+      depthTest: false,
+      depthWrite: false,
+      toneMapped: false
+    });
+    return mat;
+  }, [color, opacity]);
+  (0, import_react10.useEffect)(() => () => material.dispose(), [material]);
+  const lineRef = (0, import_react10.useRef)(null);
+  (0, import_fiber.useFrame)(() => {
+    const source = sourceRef?.current;
+    const line = lineRef.current;
+    if (!source || !line) return;
+    copyWorldTransform(source, line);
+    line.visible = source.visible;
+  });
+  if (!sourceRef || !edgesGeometry) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "lineSegments",
+    {
+      ref: lineRef,
+      geometry: edgesGeometry,
+      material,
+      frustumCulled: false,
+      renderOrder: 1e3
+    }
+  );
+}
+var tempMatrix = new import_three.Matrix4();
+var tempPosition = new import_three.Vector3();
+var tempQuaternion = new import_three.Quaternion();
+var tempScale = new import_three.Vector3();
+function copyWorldTransform(source, target) {
+  source.updateWorldMatrix(true, false);
+  tempMatrix.copy(source.matrixWorld);
+  tempMatrix.decompose(tempPosition, tempQuaternion, tempScale);
+  target.position.copy(tempPosition);
+  target.quaternion.copy(tempQuaternion);
+  target.scale.copy(tempScale);
+  target.updateMatrix();
+}
+
+// src/vizij.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+import_three2.Object3D.DEFAULT_UP.set(0, 0, 1);
 function Vizij({
   style,
   className,
   rootId,
   namespace = "default",
   showSafeArea = false,
+  showSelectionGlow = false,
   onPointerMissed
 }) {
-  const ctx = (0, import_react10.useContext)(VizijContext);
+  const ctx = (0, import_react11.useContext)(VizijContext);
   if (ctx) {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      import_fiber.Canvas,
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      import_fiber2.Canvas,
       {
         shadows: false,
         style,
         className,
         onPointerMissed,
         gl: {
-          outputColorSpace: import_three.SRGBColorSpace,
-          toneMapping: import_three.NoToneMapping,
+          outputColorSpace: import_three2.SRGBColorSpace,
+          toneMapping: import_three2.NoToneMapping,
           antialias: true
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           MemoizedInnerVizij,
           {
             rootId,
             namespace,
-            showSafeArea
+            showSafeArea,
+            showSelectionGlow
           }
         )
       }
     );
   } else {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(VizijContext.Provider, { value: useDefaultVizijStore, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      import_fiber.Canvas,
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(VizijContext.Provider, { value: useDefaultVizijStore, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      import_fiber2.Canvas,
       {
         style,
         className,
         onPointerMissed,
         gl: {
-          outputColorSpace: import_three.SRGBColorSpace,
-          toneMapping: import_three.NoToneMapping,
+          outputColorSpace: import_three2.SRGBColorSpace,
+          toneMapping: import_three2.NoToneMapping,
           antialias: true
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           MemoizedInnerVizij,
           {
             rootId,
             namespace,
-            showSafeArea
+            showSafeArea,
+            showSelectionGlow
           }
         )
       }
@@ -1812,15 +1933,16 @@ function InnerVizij({
   rootId,
   namespace = "default",
   container,
-  showSafeArea
+  showSafeArea,
+  showSelectionGlow
 }) {
   const sceneParentSizing = container ? {
     width: container.width * container.resolution,
     height: container.height * container.resolution
   } : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("ambientLight", { intensity: Math.PI / 2 }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("ambientLight", { intensity: Math.PI / 2 }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       import_drei3.OrthographicCamera,
       {
         makeDefault: true,
@@ -1829,7 +1951,7 @@ function InnerVizij({
         far: 101
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react10.Suspense, { fallback: null, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react11.Suspense, { fallback: null, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       World,
       {
         rootId,
@@ -1837,27 +1959,28 @@ function InnerVizij({
         parentSizing: sceneParentSizing
       }
     ) }),
-    showSafeArea && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SafeAreaRenderer, { rootId })
+    showSelectionGlow && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SelectionGlowEffect, { enabled: true }),
+    showSafeArea && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SafeAreaRenderer, { rootId })
   ] });
 }
-var MemoizedInnerVizij = (0, import_react10.memo)(InnerVizij);
+var MemoizedInnerVizij = (0, import_react11.memo)(InnerVizij);
 function InnerWorld({
   rootId,
   namespace = "default",
   parentSizing
 }) {
   const [present, rootBounds] = useVizijStore(
-    (0, import_shallow7.useShallow)((state) => {
+    (0, import_shallow8.useShallow)((state) => {
       const group = state.world[rootId];
       const bounds = group?.rootBounds ?? defaultRootBounds;
       return [group !== void 0, bounds];
     })
   );
-  const { camera, size } = (0, import_fiber.useThree)((state) => ({
+  const { camera, size } = (0, import_fiber2.useThree)((state) => ({
     camera: state.camera,
     size: state.size
   }));
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     const width = rootBounds.size.x;
     const height = rootBounds.size.y;
     if (camera && parentSizing === void 0 && camera.isOrthographicCamera) {
@@ -1885,9 +2008,9 @@ function InnerWorld({
       camera.updateProjectionMatrix();
     }
   }, [rootBounds, camera, parentSizing, size]);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_error_boundary.ErrorBoundary, { fallback: null, children: [
-    present && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Renderable, { id: rootId, namespace, chain: [] }),
-    !present && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_error_boundary.ErrorBoundary, { fallback: null, children: [
+    present && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Renderable, { id: rootId, namespace, chain: [] }),
+    !present && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       import_drei3.Text,
       {
         position: [0, 0, 0],
@@ -1900,7 +2023,7 @@ function InnerWorld({
     )
   ] });
 }
-var World = (0, import_react10.memo)(InnerWorld);
+var World = (0, import_react11.memo)(InnerWorld);
 function SafeAreaRenderer({ rootId }) {
   const rootBounds = useVizijStore((state) => {
     const group = state.world[rootId];
@@ -1910,7 +2033,7 @@ function SafeAreaRenderer({ rootId }) {
   const right = rootBounds.center.x + rootBounds.size.x / 2;
   const top = rootBounds.center.y + rootBounds.size.y / 2;
   const bottom = rootBounds.center.y - rootBounds.size.y / 2;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     import_drei3.Line,
     {
       points: [
@@ -1941,11 +2064,11 @@ var ShapeMaterial = /* @__PURE__ */ ((ShapeMaterial2) => {
 })(ShapeMaterial || {});
 
 // src/hooks/use-vizij-store-subscription.ts
-var import_react11 = require("react");
+var import_react12 = require("react");
 function useVizijStoreSubscription(selector, listener) {
-  const store = (0, import_react11.useContext)(VizijContext);
+  const store = (0, import_react12.useContext)(VizijContext);
   if (!store) throw new Error("Missing VizijProvider in the tree");
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     const initialValue = selector(store.getState());
     listener(initialValue);
     return store.subscribe(selector, listener);
@@ -1953,17 +2076,17 @@ function useVizijStoreSubscription(selector, listener) {
 }
 
 // src/hooks/use-vizij-store-setter.ts
-var import_react12 = require("react");
+var import_react13 = require("react");
 function useVizijStoreSetter() {
-  const store = (0, import_react12.useContext)(VizijContext);
+  const store = (0, import_react13.useContext)(VizijContext);
   if (!store) throw new Error("Missing VizijProvider in the tree");
   return store.setState;
 }
 
 // src/hooks/use-vizij-store-getter.ts
-var import_react13 = require("react");
+var import_react14 = require("react");
 function useVizijStoreGetter() {
-  const store = (0, import_react13.useContext)(VizijContext);
+  const store = (0, import_react14.useContext)(VizijContext);
   if (!store) throw new Error("Missing VizijProvider in the tree");
   return store.getState;
 }
@@ -1973,7 +2096,7 @@ var THREE5 = __toESM(require("three"));
 var import_three_stdlib = require("three-stdlib");
 
 // src/functions/gltf-loading/traverse-three.ts
-var import_react15 = require("react");
+var import_react16 = require("react");
 var THREE4 = __toESM(require("three"));
 
 // src/functions/gltf-loading/map-features.ts
@@ -1999,19 +2122,19 @@ function mapFeatures(features) {
 }
 
 // src/functions/gltf-loading/import-scene.ts
-var import_three4 = require("three");
+var import_three5 = require("three");
 
 // src/functions/gltf-loading/import-group.ts
-var import_three3 = require("three");
+var import_three4 = require("three");
 
 // src/functions/util.ts
-var import_react14 = require("react");
+var import_react15 = require("react");
 function namespaceArrayToRefs(namespaces) {
-  return namespaces.reduce((acc, ns) => ({ ...acc, [ns]: (0, import_react14.createRef)() }), {});
+  return namespaces.reduce((acc, ns) => ({ ...acc, [ns]: (0, import_react15.createRef)() }), {});
 }
 
 // src/functions/gltf-loading/import-mesh.ts
-var import_three2 = require("three");
+var import_three3 = require("three");
 
 // src/functions/gltf-loading/import-geometry.ts
 function sanitizeMorphKey(name, fallbackIndex, used) {
@@ -2051,7 +2174,7 @@ function importGeometry(geometry, mesh) {
           type: "number",
           default: mesh.morphTargetInfluences?.[index] ?? 0,
           constraints: {
-            min: 0,
+            min: -1,
             max: 1
           },
           pub: {
@@ -2067,7 +2190,7 @@ function importGeometry(geometry, mesh) {
 }
 
 // src/functions/gltf-loading/import-mesh.ts
-import_three2.Object3D.DEFAULT_UP.set(0, 0, 1);
+import_three3.Object3D.DEFAULT_UP.set(0, 0, 1);
 function importMesh(mesh, namespaces, colorLookup) {
   let world = {};
   let animatables = {};
@@ -2226,7 +2349,7 @@ function getShapeMaterial(mesh, useEmissive) {
 }
 
 // src/functions/gltf-loading/import-group.ts
-import_three3.Object3D.DEFAULT_UP.set(0, 0, 1);
+import_three4.Object3D.DEFAULT_UP.set(0, 0, 1);
 function importGroup(group, namespaces, colorLookup, rootBounds) {
   let world = {};
   let animatables = {};
@@ -2314,7 +2437,7 @@ function importGroup(group, namespaces, colorLookup, rootBounds) {
 }
 
 // src/functions/gltf-loading/import-scene.ts
-import_three4.Object3D.DEFAULT_UP.set(0, 0, 1);
+import_three5.Object3D.DEFAULT_UP.set(0, 0, 1);
 function importScene(scene, namespaces, rootBounds) {
   let world = {};
   let animatables = {};
@@ -2356,7 +2479,7 @@ function traverseThree(group, namespaces, aggressiveImport = false, rootBounds)
             loadedData = {
               ...data,
               refs: namespaces.reduce(
-                (acc, ns) => ({ ...acc, [ns]: (0, import_react15.createRef)() }),
+                (acc, ns) => ({ ...acc, [ns]: (0, import_react16.createRef)() }),
                 {}
               )
             };
@@ -2371,7 +2494,7 @@ function traverseThree(group, namespaces, aggressiveImport = false, rootBounds)
               ...data,
               geometry: child.geometry,
               refs: namespaces.reduce(
-                (acc, ns) => ({ ...acc, [ns]: (0, import_react15.createRef)() }),
+                (acc, ns) => ({ ...acc, [ns]: (0, import_react16.createRef)() }),
                 {}
               )
             };
@@ -2385,7 +2508,7 @@ function traverseThree(group, namespaces, aggressiveImport = false, rootBounds)
             loadedData = {
               ...data,
               refs: namespaces.reduce(
-                (acc, ns) => ({ ...acc, [ns]: (0, import_react15.createRef)() }),
+                (acc, ns) => ({ ...acc, [ns]: (0, import_react16.createRef)() }),
                 {}
               )
             };
@@ -2399,7 +2522,7 @@ function traverseThree(group, namespaces, aggressiveImport = false, rootBounds)
             loadedData = {
               ...data,
               refs: namespaces.reduce(
-                (acc, ns) => ({ ...acc, [ns]: (0, import_react15.createRef)() }),
+                (acc, ns) => ({ ...acc, [ns]: (0, import_react16.createRef)() }),
                 {}
               )
             };
@@ -2585,9 +2708,10 @@ function deriveRootBounds(group) {
 }
 
 // src/functions/vizij-bundle.ts
+var import_utils7 = require("@vizij/utils");
 var BUNDLE_KEYS = ["VIZIJ_bundle"];
 function cloneBundle(value) {
-  return JSON.parse(JSON.stringify(value));
+  return (0, import_utils7.cloneDeepSafe)(value);
 }
 function readExtensionValue(extensionContainer) {
   for (const key of BUNDLE_KEYS) {
@@ -2685,6 +2809,7 @@ function applyVizijBundle(object, bundle) {
 }
 
 // src/functions/gltf-loading/extract-animations.ts
+var import_utils8 = require("@vizij/utils");
 var CHANNEL_PATH_TO_TRACK_PROPERTY = {
   translation: "position",
   rotation: "quaternion",
@@ -2700,7 +2825,7 @@ function clonePlainObject(value) {
   if (!value) {
     return void 0;
   }
-  return JSON.parse(JSON.stringify(value));
+  return (0, import_utils8.cloneDeepSafe)(value);
 }
 function inferValueSize(valueType) {
   switch (valueType) {