@vizij/render 0.0.1 → 0.0.2

package/dist/index.js

@@ -428,6 +428,11 @@ function InnerRenderedGroup({
       setReference(group.id, namespace, ref);
     }
   }, [group.id, namespace, ref, setReference, refIsNull]);
+  (0, import_react5.useEffect)(() => {
+    if (ref.current) {
+      ref.current.name = group.name;
+    }
+  }, [group.name]);
   const handlePointerOver = (0, import_react5.useCallback)(
     (event) => {
       if (event.eventObject !== event.object) {
@@ -579,6 +584,9 @@ function InnerRenderedEllipse({
         if ((0, import_utils4.instanceOfRawRGB)(color)) {
           materialRef.current.color.setRGB(color.r, color.g, color.b);
           materialRef.current.needsUpdate = true;
+        } else if ((0, import_utils4.instanceOfRawVector3)(color)) {
+          materialRef.current.color.setRGB(color.x, color.y, color.z);
+          materialRef.current.needsUpdate = true;
         } else if ((0, import_utils4.instanceOfRawHSL)(color)) {
           materialRef.current.color.setHSL(color.h, color.s, color.l);
           materialRef.current.needsUpdate = true;
@@ -631,6 +639,13 @@ function InnerRenderedEllipse({
             strokeColor.b
           );
           lineRef.current.material.needsUpdate = true;
+        } else if ((0, import_utils4.instanceOfRawVector3)(strokeColor)) {
+          lineRef.current.material.color.setRGB(
+            strokeColor.x,
+            strokeColor.y,
+            strokeColor.z
+          );
+          lineRef.current.material.needsUpdate = true;
         } else if ((0, import_utils4.instanceOfRawHSL)(strokeColor)) {
           lineRef.current.material.color.setHSL(
             strokeColor.h,
@@ -854,6 +869,9 @@ function InnerRenderedRectangle({
         if ((0, import_utils5.instanceOfRawRGB)(color)) {
           materialRef.current.color.setRGB(color.r, color.g, color.b);
           materialRef.current.needsUpdate = true;
+        } else if ((0, import_utils5.instanceOfRawVector3)(color)) {
+          materialRef.current.color.setRGB(color.x, color.y, color.z);
+          materialRef.current.needsUpdate = true;
         } else if ((0, import_utils5.instanceOfRawHSL)(color)) {
           materialRef.current.color.setHSL(color.h, color.s, color.l);
           materialRef.current.needsUpdate = true;
@@ -906,6 +924,13 @@ function InnerRenderedRectangle({
             strokeColor.b
           );
           lineRef.current.material.needsUpdate = true;
+        } else if ((0, import_utils5.instanceOfRawVector3)(strokeColor)) {
+          lineRef.current.material.color.setRGB(
+            strokeColor.x,
+            strokeColor.y,
+            strokeColor.z
+          );
+          lineRef.current.material.needsUpdate = true;
         } else if ((0, import_utils5.instanceOfRawHSL)(strokeColor)) {
           lineRef.current.material.color.setHSL(
             strokeColor.h,
@@ -1049,7 +1074,17 @@ function InnerRenderedShape({
     });
     return av;
   }, [shape.features, animatables]);
-  const geometry = (0, import_react8.useMemo)(() => shape.geometry.clone(), [shape.geometry]);
+  const materialName = (0, import_react8.useMemo)(
+    () => deriveMaterialName(shape, animatableValues),
+    [shape, animatableValues]
+  );
+  const geometry = (0, import_react8.useMemo)(() => {
+    const cloned = shape.geometry.clone();
+    if (shape.name) {
+      cloned.name = shape.name;
+    }
+    return cloned;
+  }, [shape.geometry, shape.name]);
   const selectionData = (0, import_react8.useMemo)(
     () => ({ id, namespace, type: "shape" }),
     [id, namespace]
@@ -1139,9 +1174,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 && (0, import_utils6.instanceOfRawVector3)(color)) {
+          material.current.color.setRGB(
+            color.x,
+            color.y,
+            color.z
+          );
+          material.current.needsUpdate = true;
         } else if (material.current && (0, import_utils6.instanceOfRawHSL)(color)) {
           material.current.color.setHSL(
             color.h,
@@ -1164,6 +1204,21 @@ function InnerRenderedShape({
   (0, import_react8.useEffect)(() => {
     if (ref.current && refIsNull) setReference(shape.id, namespace, ref);
   }, [shape.id, namespace, ref, setReference, refIsNull]);
+  (0, import_react8.useEffect)(() => {
+    if (ref.current) {
+      ref.current.name = shape.name;
+    }
+  }, [shape.name]);
+  (0, import_react8.useEffect)(() => {
+    if (!material.current) {
+      return;
+    }
+    if (materialName) {
+      material.current.name = materialName;
+    } else if (shape.name) {
+      material.current.name = shape.name;
+    }
+  }, [materialName, shape.name]);
   const handlePointerOver = (0, import_react8.useCallback)(
     (event) => {
       event.stopPropagation();
@@ -1250,6 +1305,51 @@ function InnerRenderedShape({
   );
 }
 var RenderedShape = (0, import_react8.memo)(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
 var import_jsx_runtime6 = require("react/jsx-runtime");
@@ -2424,6 +2524,7 @@ function traverseThree(group, namespaces, aggressiveImport = false, rootBounds)
     group.traverse((child) => {
       if (child.userData?.gltfExtensions?.RobotData) {
         const data = child.userData.gltfExtensions.RobotData;
+        applyStoredRenderableNames(child, data);
         let loadedData;
         let mappedFeatures;
         let animatableValues;
@@ -2505,6 +2606,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");
@@ -2671,6 +2860,14 @@ var THREE6 = __toESM(require("three"));
 THREE6.Object3D.DEFAULT_UP.set(0, 0, 1);
 function exportScene(data, fileName = "scene.glb") {
   const exporter = new import_three_stdlib3.GLTFExporter();
+  exporter.register(() => ({
+    writeMesh(mesh, meshDef) {
+      const meshName = mesh.name?.trim() || mesh.geometry?.name?.trim() || void 0;
+      if (meshName) {
+        meshDef.name = meshName;
+      }
+    }
+  }));
   exporter.parse(
     data,
     (gltf) => {

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";
@@ -2429,6 +2529,7 @@ function traverseThree(group, namespaces, aggressiveImport = false, rootBounds)
     group.traverse((child) => {
       if (child.userData?.gltfExtensions?.RobotData) {
         const data = child.userData.gltfExtensions.RobotData;
+        applyStoredRenderableNames(child, data);
         let loadedData;
         let mappedFeatures;
         let animatableValues;
@@ -2510,6 +2611,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");
@@ -2676,6 +2865,14 @@ import * as THREE6 from "three";
 THREE6.Object3D.DEFAULT_UP.set(0, 0, 1);
 function exportScene(data, fileName = "scene.glb") {
   const exporter = new GLTFExporter();
+  exporter.register(() => ({
+    writeMesh(mesh, meshDef) {
+      const meshName = mesh.name?.trim() || mesh.geometry?.name?.trim() || void 0;
+      if (meshName) {
+        meshDef.name = meshName;
+      }
+    }
+  }));
   exporter.parse(
     data,
     (gltf) => {

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.2",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",