@vizij/render 0.0.1 → 0.0.3

package/dist/index.mjs

@@ -393,6 +393,11 @@ function InnerRenderedGroup({
       setReference(group.id, namespace, ref);
     }
   }, [group.id, namespace, ref, setReference, refIsNull]);
+  useEffect2(() => {
+    if (ref.current) {
+      ref.current.name = group.name;
+    }
+  }, [group.name]);
   const handlePointerOver = useCallback(
     (event) => {
       if (event.eventObject !== event.object) {
@@ -557,6 +562,9 @@ function InnerRenderedEllipse({
         if (instanceOfRawRGB(color)) {
           materialRef.current.color.setRGB(color.r, color.g, color.b);
           materialRef.current.needsUpdate = true;
+        } else if (instanceOfRawVector32(color)) {
+          materialRef.current.color.setRGB(color.x, color.y, color.z);
+          materialRef.current.needsUpdate = true;
         } else if (instanceOfRawHSL(color)) {
           materialRef.current.color.setHSL(color.h, color.s, color.l);
           materialRef.current.needsUpdate = true;
@@ -609,6 +617,13 @@ function InnerRenderedEllipse({
             strokeColor.b
           );
           lineRef.current.material.needsUpdate = true;
+        } else if (instanceOfRawVector32(strokeColor)) {
+          lineRef.current.material.color.setRGB(
+            strokeColor.x,
+            strokeColor.y,
+            strokeColor.z
+          );
+          lineRef.current.material.needsUpdate = true;
         } else if (instanceOfRawHSL(strokeColor)) {
           lineRef.current.material.color.setHSL(
             strokeColor.h,
@@ -845,6 +860,9 @@ function InnerRenderedRectangle({
         if (instanceOfRawRGB2(color)) {
           materialRef.current.color.setRGB(color.r, color.g, color.b);
           materialRef.current.needsUpdate = true;
+        } else if (instanceOfRawVector33(color)) {
+          materialRef.current.color.setRGB(color.x, color.y, color.z);
+          materialRef.current.needsUpdate = true;
         } else if (instanceOfRawHSL2(color)) {
           materialRef.current.color.setHSL(color.h, color.s, color.l);
           materialRef.current.needsUpdate = true;
@@ -897,6 +915,13 @@ function InnerRenderedRectangle({
             strokeColor.b
           );
           lineRef.current.material.needsUpdate = true;
+        } else if (instanceOfRawVector33(strokeColor)) {
+          lineRef.current.material.color.setRGB(
+            strokeColor.x,
+            strokeColor.y,
+            strokeColor.z
+          );
+          lineRef.current.material.needsUpdate = true;
         } else if (instanceOfRawHSL2(strokeColor)) {
           lineRef.current.material.color.setHSL(
             strokeColor.h,
@@ -1052,7 +1077,17 @@ function InnerRenderedShape({
     });
     return av;
   }, [shape.features, animatables]);
-  const geometry = useMemo4(() => shape.geometry.clone(), [shape.geometry]);
+  const materialName = useMemo4(
+    () => deriveMaterialName(shape, animatableValues),
+    [shape, animatableValues]
+  );
+  const geometry = useMemo4(() => {
+    const cloned = shape.geometry.clone();
+    if (shape.name) {
+      cloned.name = shape.name;
+    }
+    return cloned;
+  }, [shape.geometry, shape.name]);
   const selectionData = useMemo4(
     () => ({ id, namespace, type: "shape" }),
     [id, namespace]
@@ -1142,9 +1177,14 @@ function InnerRenderedShape({
             color.g,
             color.b
           );
-          if ((material.current || void 0)?.color) {
-            material.current.needsUpdate = true;
-          }
+          material.current.needsUpdate = true;
+        } else if ((material.current || void 0)?.color && instanceOfRawVector34(color)) {
+          material.current.color.setRGB(
+            color.x,
+            color.y,
+            color.z
+          );
+          material.current.needsUpdate = true;
         } else if (material.current && instanceOfRawHSL3(color)) {
           material.current.color.setHSL(
             color.h,
@@ -1167,6 +1207,21 @@ function InnerRenderedShape({
   useEffect5(() => {
     if (ref.current && refIsNull) setReference(shape.id, namespace, ref);
   }, [shape.id, namespace, ref, setReference, refIsNull]);
+  useEffect5(() => {
+    if (ref.current) {
+      ref.current.name = shape.name;
+    }
+  }, [shape.name]);
+  useEffect5(() => {
+    if (!material.current) {
+      return;
+    }
+    if (materialName) {
+      material.current.name = materialName;
+    } else if (shape.name) {
+      material.current.name = shape.name;
+    }
+  }, [materialName, shape.name]);
   const handlePointerOver = useCallback4(
     (event) => {
       event.stopPropagation();
@@ -1253,6 +1308,51 @@ function InnerRenderedShape({
   );
 }
 var RenderedShape = memo5(InnerRenderedShape);
+var MATERIAL_FEATURE_KEYS = [
+  "color",
+  "opacity",
+  "roughness",
+  "metalness",
+  "shininess"
+];
+var MATERIAL_NAME_SUFFIXES = [
+  " color",
+  " colours",
+  " colour",
+  " opacity",
+  " roughness",
+  " metalness",
+  " shininess"
+];
+function deriveMaterialName(shape, values) {
+  for (const key of MATERIAL_FEATURE_KEYS) {
+    const feature = shape.features[key];
+    if (feature && feature.animated) {
+      const animatable = values[feature.value];
+      const candidate = extractMaterialName(animatable?.name);
+      if (candidate) {
+        return candidate;
+      }
+    }
+  }
+  return void 0;
+}
+function extractMaterialName(name) {
+  if (!name) {
+    return void 0;
+  }
+  const trimmed = name.trim();
+  if (!trimmed) {
+    return void 0;
+  }
+  const lowered = trimmed.toLowerCase();
+  for (const suffix of MATERIAL_NAME_SUFFIXES) {
+    if (lowered.endsWith(suffix)) {
+      return trimmed.slice(0, trimmed.length - suffix.length).trim();
+    }
+  }
+  return trimmed;
+}
 
 // src/renderables/renderable.tsx
 import { Fragment as Fragment3, jsx as jsx6 } from "react/jsx-runtime";
@@ -2426,9 +2526,12 @@ function traverseThree(group, namespaces, aggressiveImport = false, rootBounds)
   });
   const useRobotData = !aggressiveImport || hasRobotData;
   if (useRobotData) {
-    group.traverse((child) => {
+    const stack = [group];
+    while (stack.length > 0) {
+      const child = stack.pop();
       if (child.userData?.gltfExtensions?.RobotData) {
         const data = child.userData.gltfExtensions.RobotData;
+        applyStoredRenderableNames(child, data);
         let loadedData;
         let mappedFeatures;
         let animatableValues;
@@ -2494,7 +2597,10 @@ function traverseThree(group, namespaces, aggressiveImport = false, rootBounds)
             throw new Error(`Unhandled type`);
         }
       }
-    });
+      if (child.children) {
+        stack.push(...child.children);
+      }
+    }
   } else {
     const derivedRootBounds = rootBounds ?? deriveRootBounds(group);
     if (!derivedRootBounds) {
@@ -2510,6 +2616,94 @@ function traverseThree(group, namespaces, aggressiveImport = false, rootBounds)
   }
   return [worldData, animatableData];
 }
+var MATERIAL_NAME_FEATURE_KEYS = [
+  "color",
+  "opacity",
+  "roughness",
+  "metalness",
+  "shininess"
+];
+var MATERIAL_NAME_SUFFIXES2 = [
+  " color",
+  " colours",
+  " colour",
+  " opacity",
+  " roughness",
+  " metalness",
+  " shininess"
+];
+function applyStoredRenderableNames(object, data) {
+  if (typeof data.name === "string" && data.name.length > 0) {
+    object.name = data.name;
+  }
+  if (object.isGroup) {
+    const group = object;
+    if (typeof data.name === "string" && data.name.length > 0) {
+      group.name = data.name;
+    }
+  }
+  if (object.isMesh) {
+    const mesh = object;
+    if (typeof data.name === "string" && data.name.length > 0) {
+      mesh.name = data.name;
+      if (mesh.geometry) {
+        mesh.geometry.name = data.name;
+      }
+    }
+    const inferredName = inferMaterialNameFromStoredRenderable(data);
+    if (inferredName) {
+      assignMaterialName(mesh.material, inferredName);
+    }
+  }
+}
+function assignMaterialName(material, name) {
+  if (!material) {
+    return;
+  }
+  if (Array.isArray(material)) {
+    material.forEach((mat) => {
+      mat.name = name;
+    });
+  } else {
+    material.name = name;
+  }
+}
+function inferMaterialNameFromStoredRenderable(data) {
+  if (data.type !== "shape") {
+    return void 0;
+  }
+  const features = data.features;
+  for (const key of MATERIAL_NAME_FEATURE_KEYS) {
+    const candidate = extractMaterialNameFromFeature(features[key]);
+    if (candidate) {
+      return candidate;
+    }
+  }
+  return void 0;
+}
+function extractMaterialNameFromFeature(feature) {
+  if (!isStoredAnimatedFeature(feature)) {
+    return void 0;
+  }
+  const animatableName = feature.value.name;
+  if (!animatableName) {
+    return void 0;
+  }
+  return stripMaterialSuffixes(animatableName);
+}
+function stripMaterialSuffixes(name) {
+  const trimmed = name.trim();
+  const lowered = trimmed.toLowerCase();
+  for (const suffix of MATERIAL_NAME_SUFFIXES2) {
+    if (lowered.endsWith(suffix)) {
+      return trimmed.slice(0, trimmed.length - suffix.length).trim();
+    }
+  }
+  return trimmed;
+}
+function isStoredAnimatedFeature(feature) {
+  return Boolean(feature) && typeof feature === "object" && feature.animated === true && "value" in feature;
+}
 function isGroupFeatures(value) {
   if (!value || typeof value !== "object") {
     throw new Error("Expected object");
@@ -2574,6 +2768,106 @@ function deriveRootBounds(group) {
   };
 }
 
+// src/functions/vizij-bundle.ts
+var BUNDLE_KEYS = ["VIZIJ_bundle"];
+function cloneBundle(value) {
+  return JSON.parse(JSON.stringify(value));
+}
+function readExtensionValue(extensionContainer) {
+  for (const key of BUNDLE_KEYS) {
+    if (extensionContainer && Object.prototype.hasOwnProperty.call(extensionContainer, key)) {
+      const value = extensionContainer[key];
+      if (value && typeof value === "object") {
+        return { key, value };
+      }
+    }
+  }
+  return null;
+}
+function searchObjectForBundle(object) {
+  const stack = [object];
+  while (stack.length > 0) {
+    const current = stack.pop();
+    const extensions = current?.userData?.gltfExtensions ?? current?.userData?.extensions ?? null;
+    if (extensions && typeof extensions === "object") {
+      const match = readExtensionValue(extensions);
+      if (match) {
+        return cloneBundle(match.value);
+      }
+    }
+    if (current.children && current.children.length > 0) {
+      stack.push(...current.children);
+    }
+  }
+  return null;
+}
+function searchParserJsonForBundle(parserJson) {
+  if (!parserJson || typeof parserJson !== "object") {
+    return null;
+  }
+  const nodes = Array.isArray(parserJson.nodes) ? parserJson.nodes : [];
+  for (const node of nodes) {
+    const extensions = node && typeof node === "object" ? node.extensions : null;
+    if (extensions && typeof extensions === "object") {
+      const match = readExtensionValue(extensions);
+      if (match) {
+        return cloneBundle(match.value);
+      }
+    }
+  }
+  const scenes = Array.isArray(parserJson.scenes) ? parserJson.scenes : [];
+  for (const scene of scenes) {
+    const extensions = scene && typeof scene === "object" ? scene.extensions : null;
+    if (extensions && typeof extensions === "object") {
+      const match = readExtensionValue(extensions);
+      if (match) {
+        return cloneBundle(match.value);
+      }
+    }
+  }
+  return null;
+}
+function extractVizijBundle(object, parserJson) {
+  const fromObject = searchObjectForBundle(object);
+  if (fromObject) {
+    return fromObject;
+  }
+  const fromParser = searchParserJsonForBundle(parserJson);
+  if (fromParser) {
+    return fromParser;
+  }
+  return null;
+}
+function applyVizijBundle(object, bundle) {
+  const userData = object.userData && typeof object.userData === "object" ? object.userData : {};
+  const originalExtensions = userData.gltfExtensions;
+  let applied = false;
+  if (bundle) {
+    userData.gltfExtensions = {
+      ...originalExtensions ?? {},
+      VIZIJ_bundle: bundle
+    };
+    object.userData = userData;
+    applied = true;
+  }
+  return () => {
+    if (!applied) {
+      return;
+    }
+    if (originalExtensions) {
+      userData.gltfExtensions = originalExtensions;
+    } else {
+      if (userData.gltfExtensions) {
+        delete userData.gltfExtensions;
+      }
+      if (Object.keys(userData).length === 0) {
+        delete object.userData;
+      }
+    }
+    applied = false;
+  };
+}
+
 // src/functions/load-gltf.ts
 THREE5.Object3D.DEFAULT_UP.set(0, 0, 1);
 var EmptyModelError = class extends Error {
@@ -2587,24 +2881,27 @@ async function loadGLTF(url, namespaces, aggressiveImport = false, rootBounds) {
   modelLoader.setDRACOLoader(new DRACOLoader());
   const modelData = await modelLoader.loadAsync(url);
   const actualizedNamespaces = namespaces.length > 0 ? namespaces : ["default"];
-  return traverseThree(
+  const asset = parseScene(
     modelData.scene,
     actualizedNamespaces,
     aggressiveImport,
-    rootBounds
+    rootBounds,
+    modelData?.parser?.json
   );
+  return [asset.world, asset.animatables];
 }
 async function loadGLTFFromBlob(blob, namespaces, aggressiveImport = false, rootBounds) {
   const actualizedNamespaces = namespaces.length > 0 ? namespaces : ["default"];
   if (typeof URL !== "undefined" && typeof URL.createObjectURL === "function") {
     const objectUrl = URL.createObjectURL(blob);
     try {
-      return await loadGLTF(
+      const asset = await loadGLTFWithBundle(
         objectUrl,
         actualizedNamespaces,
         aggressiveImport,
         rootBounds
       );
+      return [asset.world, asset.animatables];
     } finally {
       URL.revokeObjectURL(objectUrl);
     }
@@ -2618,14 +2915,83 @@ async function loadGLTFFromBlob(blob, namespaces, aggressiveImport = false, root
       "",
       (gltf) => {
         try {
-          resolve(
-            traverseThree(
-              gltf.scene,
-              actualizedNamespaces,
-              aggressiveImport,
-              rootBounds
-            )
+          const asset = parseScene(
+            gltf.scene,
+            actualizedNamespaces,
+            aggressiveImport,
+            rootBounds,
+            gltf?.parser?.json
           );
+          resolve([asset.world, asset.animatables]);
+        } catch (error) {
+          if (error instanceof Error) {
+            reject(error);
+          } else {
+            reject(new Error(String(error)));
+          }
+        }
+      },
+      (error) => {
+        reject(new Error(`Error loading GLTF: ${error.message}`));
+      }
+    );
+  });
+}
+function parseScene(scene, namespaces, aggressiveImport, rootBounds, parserJson) {
+  const [world, animatables] = traverseThree(
+    scene,
+    namespaces,
+    aggressiveImport,
+    rootBounds
+  );
+  const bundle = extractVizijBundle(scene, parserJson);
+  return { world, animatables, bundle };
+}
+async function loadGLTFWithBundle(url, namespaces, aggressiveImport = false, rootBounds) {
+  const modelLoader = new GLTFLoader();
+  modelLoader.setDRACOLoader(new DRACOLoader());
+  const modelData = await modelLoader.loadAsync(url);
+  const actualizedNamespaces = namespaces.length > 0 ? namespaces : ["default"];
+  return parseScene(
+    modelData.scene,
+    actualizedNamespaces,
+    aggressiveImport,
+    rootBounds,
+    modelData?.parser?.json
+  );
+}
+async function loadGLTFFromBlobWithBundle(blob, namespaces, aggressiveImport = false, rootBounds) {
+  const actualizedNamespaces = namespaces.length > 0 ? namespaces : ["default"];
+  if (typeof URL !== "undefined" && typeof URL.createObjectURL === "function") {
+    const objectUrl = URL.createObjectURL(blob);
+    try {
+      return await loadGLTFWithBundle(
+        objectUrl,
+        actualizedNamespaces,
+        aggressiveImport,
+        rootBounds
+      );
+    } finally {
+      URL.revokeObjectURL(objectUrl);
+    }
+  }
+  const arrayBuffer = typeof blob.arrayBuffer === "function" ? await blob.arrayBuffer() : await new Response(blob).arrayBuffer();
+  return new Promise((resolve, reject) => {
+    const loader = new GLTFLoader();
+    loader.setDRACOLoader(new DRACOLoader());
+    loader.parse(
+      arrayBuffer,
+      "",
+      (gltf) => {
+        try {
+          const asset = parseScene(
+            gltf.scene,
+            actualizedNamespaces,
+            aggressiveImport,
+            rootBounds,
+            gltf?.parser?.json
+          );
+          resolve(asset);
         } catch (error) {
           if (error instanceof Error) {
             reject(error);
@@ -2674,36 +3040,62 @@ var loadGltfFromBlob = (blob, namespaces) => {
 import { GLTFExporter } from "three-stdlib";
 import * as THREE6 from "three";
 THREE6.Object3D.DEFAULT_UP.set(0, 0, 1);
-function exportScene(data, fileName = "scene.glb") {
+function exportScene(data, fileNameOrOptions = "scene.glb") {
+  const options = typeof fileNameOrOptions === "string" ? { fileName: fileNameOrOptions } : fileNameOrOptions ?? {};
+  const fileName = options.fileName ?? "scene.glb";
+  const animationClips = Array.isArray(options.animations) ? options.animations.filter(Boolean) : [];
+  const shouldAttachBundle = Boolean(options.bundle);
   const exporter = new GLTFExporter();
-  exporter.parse(
-    data,
-    (gltf) => {
-      if (!(gltf instanceof ArrayBuffer)) {
-        throw new Error("Failed to export scene!");
-      }
-      const link = document.createElement("a");
-      link.href = URL.createObjectURL(
-        new Blob([gltf], {
-          type: "application/octet-stream"
-        })
-      );
-      const trimmed = fileName.trim();
-      const safeFileName = trimmed.length > 0 ? trimmed : "scene.glb";
-      const downloadName = safeFileName.toLowerCase().endsWith(".glb") ? safeFileName : `${safeFileName}.glb`;
-      link.download = downloadName;
-      link.click();
-      URL.revokeObjectURL(link.href);
-    },
-    () => {
-    },
-    {
-      trs: true,
-      onlyVisible: false,
-      binary: true,
-      includeCustomExtensions: true
+  exporter.register(() => ({
+    writeMesh(mesh, meshDef) {
+      const meshName = mesh.name?.trim() || mesh.geometry?.name?.trim() || void 0;
+      if (meshName) {
+        meshDef.name = meshName;
+      }
     }
-  );
+  }));
+  const detachBundle = shouldAttachBundle && options.bundle ? applyVizijBundle(data, options.bundle) : () => {
+  };
+  const binary = options.binary ?? true;
+  const exporterOptions = {
+    trs: true,
+    onlyVisible: false,
+    binary,
+    includeCustomExtensions: true
+  };
+  if (animationClips.length > 0) {
+    exporterOptions.animations = animationClips;
+  }
+  try {
+    exporter.parse(
+      data,
+      (gltf) => {
+        detachBundle();
+        if (!(gltf instanceof ArrayBuffer)) {
+          throw new Error("Failed to export scene!");
+        }
+        const link = document.createElement("a");
+        link.href = URL.createObjectURL(
+          new Blob([gltf], {
+            type: "application/octet-stream"
+          })
+        );
+        const trimmed = fileName.trim();
+        const safeFileName = trimmed.length > 0 ? trimmed : "scene.glb";
+        const downloadName = safeFileName.toLowerCase().endsWith(".glb") ? safeFileName : `${safeFileName}.glb`;
+        link.download = downloadName;
+        link.click();
+        URL.revokeObjectURL(link.href);
+      },
+      () => {
+        detachBundle();
+      },
+      exporterOptions
+    );
+  } catch (error) {
+    detachBundle();
+    throw error;
+  }
 }
 export {
   Controller,
@@ -2713,10 +3105,14 @@ export {
   Vizij,
   VizijContext,
   VizijSlice,
+  applyVizijBundle,
   createVizijStore,
   exportScene,
+  extractVizijBundle,
   loadGLTF,
   loadGLTFFromBlob,
+  loadGLTFFromBlobWithBundle,
+  loadGLTFWithBundle,
   loadGltfFromBlob,
   useDefaultVizijStore,
   useFeatures,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vizij/render",
   "description": "Higher-level visualization and interaction components for robot and ai faces.",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
@@ -31,7 +31,7 @@
     "lint:fix": "pnpm --filter \"$npm_package_name\" exec eslint --ext .js,.jsx,.ts,.tsx --fix -- .",
     "prettier:check": "prettier --check .",
     "prettier:write": "prettier --write .",
-    "test": "vitest --run --passWithNoTests",
+    "test": "node --loader ./tests/node-ts-loader.mjs --test tests/*.node-test.mjs",
     "clean": "rm -rf dist .turbo coverage tsconfig.tsbuildinfo",
     "reset": "rm -rf node_modules",
     "reset:hard": "pnpm run reset && rm -f pnpm-lock.yaml package-lock.json yarn.lock",
@@ -72,8 +72,7 @@
     "zustand": "^5.0.2",
     "tsup": "^8.0.1",
     "typescript": "^5.5.0",
-    "prettier": "^3.4.2",
-    "vitest": "^3.2.4"
+    "prettier": "^3.4.2"
   },
   "size-limit": [
     {