@webspatial/react-sdk 1.4.0 → 1.5.0

package/dist/default/index.d.ts

@@ -313,7 +313,8 @@ declare const ModelAsset: React__default.FC<Props>;
 
 declare const ModelEntity: React__default.ForwardRefExoticComponent<EntityProps & {
     model: string;
-} & {
+    materials?: string[];
+} & EntityEventHandler & {
     children?: React__default.ReactNode;
 } & React__default.RefAttributes<EntityRefShape>>;
 

package/dist/default/index.js

@@ -2,7 +2,7 @@
       (function(){
         if(typeof window === 'undefined') return;
         if(!window.__webspatialsdk__) window.__webspatialsdk__ = {}
-        window.__webspatialsdk__['react-sdk-version'] = "1.4.0"
+        window.__webspatialsdk__['react-sdk-version'] = "1.5.0"
         window.__webspatialsdk__['XR_ENV'] = "avp"
     })()
       
@@ -2349,6 +2349,20 @@ function shallowEqualRotation(a, b) {
   if (!a || !b) return false;
   return a.x === b.x && a.y === b.y && a.z === b.z && ("w" in a ? a.w === b.w : true);
 }
+function shallowEqualObject(a, b) {
+  if (a === b) return true;
+  if (!a || !b) return false;
+  const keysA = Object.keys(a);
+  const keysB = Object.keys(b);
+  if (keysA.length !== keysB.length) return false;
+  return keysA.every((key) => a[key] === b[key]);
+}
+function shallowEqualArray(a, b) {
+  if (a === b) return true;
+  if (!a || !b) return false;
+  if (a.length !== b.length) return false;
+  return a.every((val, i) => val === b[i]);
+}
 
 // src/reality/utils/AbortResourceManager.ts
 var AbortResourceManager = class {
@@ -2493,9 +2507,150 @@ var EntityRef = class {
   }
 };
 
+// src/reality/hooks/useEntityEvent.tsx
+function createEventProxy2(ev, instance) {
+  return new Proxy(ev, {
+    get(target, prop) {
+      if (prop === "currentTarget") {
+        return instance;
+      }
+      if (prop === "target") {
+        const origin = target.__origin;
+        if (origin) {
+          return new EntityRef(origin, null);
+        }
+        return instance;
+      }
+      if (prop === "bubbles") {
+        return true;
+      }
+      if (prop === "offsetX") {
+        const type = target.type;
+        if (type === "spatialtap") {
+          return target.detail?.location3D?.x ?? 0;
+        }
+        if (type === "spatialdragstart") {
+          return target.detail?.startLocation3D?.x ?? 0;
+        }
+        return void 0;
+      }
+      if (prop === "offsetY") {
+        const type = target.type;
+        if (type === "spatialtap") {
+          return target.detail?.location3D?.y ?? 0;
+        }
+        if (type === "spatialdragstart") {
+          return target.detail?.startLocation3D?.y ?? 0;
+        }
+        return void 0;
+      }
+      if (prop === "offsetZ") {
+        const type = target.type;
+        if (type === "spatialtap") {
+          return target.detail?.location3D?.z ?? 0;
+        }
+        if (type === "spatialdragstart") {
+          return target.detail?.startLocation3D?.z ?? 0;
+        }
+        return void 0;
+      }
+      if (prop === "translationX") {
+        const type = target.type;
+        if (type === "spatialdrag") {
+          return target.detail?.translation3D?.x ?? 0;
+        }
+        return void 0;
+      }
+      if (prop === "translationY") {
+        const type = target.type;
+        if (type === "spatialdrag") {
+          return target.detail?.translation3D?.y ?? 0;
+        }
+        return void 0;
+      }
+      if (prop === "translationZ") {
+        const type = target.type;
+        if (type === "spatialdrag") {
+          return target.detail?.translation3D?.z ?? 0;
+        }
+        return void 0;
+      }
+      if (prop === "quaternion") {
+        const type = target.type;
+        if (type === "spatialrotate") {
+          return target.detail?.quaternion ?? {
+            x: 0,
+            y: 0,
+            z: 0,
+            w: 1
+          };
+        }
+        return void 0;
+      }
+      if (prop === "magnification") {
+        const type = target.type;
+        if (type === "spatialmagnify") {
+          return target.detail?.magnification ?? 1;
+        }
+        return void 0;
+      }
+      if (prop === "clientX") {
+        const type = target.type;
+        if (type === "spatialtap" || type === "spatialdragstart") {
+          return target.detail?.globalLocation3D?.x ?? 0;
+        }
+        return void 0;
+      }
+      if (prop === "clientY") {
+        const type = target.type;
+        if (type === "spatialtap" || type === "spatialdragstart") {
+          return target.detail?.globalLocation3D?.y ?? 0;
+        }
+        return void 0;
+      }
+      if (prop === "clientZ") {
+        const type = target.type;
+        if (type === "spatialtap" || type === "spatialdragstart") {
+          return target.detail?.globalLocation3D?.z ?? 0;
+        }
+        return void 0;
+      }
+      const val = target[prop];
+      return typeof val === "function" ? val.bind(target) : val;
+    }
+  });
+}
+var useEntityEvent = ({ instance, ...handlers }) => {
+  const eventsSetRef = useRef9(/* @__PURE__ */ new Set());
+  useEffect18(() => {
+    const entity = instance.entity;
+    if (!entity) return;
+    Object.entries(eventMap).forEach(([reactKey, spatialEvent]) => {
+      const handlerFn = handlers[reactKey];
+      if (!handlerFn) return;
+      const wrapped = (ev) => handlerFn(createEventProxy2(ev, instance));
+      entity.addEvent(spatialEvent, wrapped);
+      eventsSetRef.current.add(reactKey);
+    });
+    return () => {
+    };
+  }, [instance.entity, ...Object.values(handlers)]);
+  useEffect18(() => {
+    const entity = instance.entity;
+    if (!entity) return;
+    return () => {
+      for (let x of eventsSetRef.current) {
+        entity.removeEvent(x);
+      }
+      eventsSetRef.current.clear();
+    };
+  }, [instance.entity]);
+  return null;
+};
+
 // src/reality/hooks/useRealityEvents.tsx
 import { useEffect as useEffect19, useRef as useRef10 } from "react";
-function createEventProxy2(ev, instance) {
+function createEventProxy3(ev, instance) {
   return new Proxy(ev, {
     get(target, prop) {
       if (prop === "currentTarget") {
@@ -2614,7 +2769,7 @@ var useRealityEvents = ({ instance, ...handlers }) => {
     Object.entries(eventMap).forEach(([reactKey, spatialEvent]) => {
       const handlerFn = handlers[reactKey];
       if (!handlerFn) return;
-      const wrapped = (ev) => handlerFn(createEventProxy2(ev, instance));
+      const wrapped = (ev) => handlerFn(createEventProxy3(ev, instance));
       instance.addEvent(spatialEvent, wrapped);
       eventsSetRef.current.add(spatialEvent);
     });
@@ -2652,7 +2807,16 @@ var useEntity = ({
   rotation,
   scale,
   enableInput,
-  createEntity
+  onSpatialTap,
+  onSpatialDragStart,
+  onSpatialDrag,
+  onSpatialDragEnd,
+  onSpatialRotate,
+  onSpatialRotateEnd,
+  onSpatialMagnify,
+  onSpatialMagnifyEnd,
+  createEntity,
+  recreateKey
 }) => {
   const ctx = useRealityContext();
   const parent = useParentContext();
@@ -2669,6 +2833,11 @@ var useEntity = ({
           ent.destroy();
           return;
         }
+        await ent.updateTransform({ position, rotation, scale });
+        if (controller.signal.aborted) {
+          ent.destroy();
+          return;
+        }
         if (parent) {
           const result = await parent.addEntity(ent);
           if (!result.success) throw new Error("parent.addEntity failed");
@@ -2687,10 +2856,21 @@ var useEntity = ({
       controller.abort();
       instanceRef.current?.destroy();
     };
-  }, [ctx, parent]);
+  }, [ctx, parent, recreateKey]);
   useEntityId({ id, entity: instanceRef.current.entity });
   useEntityTransform(instanceRef.current.entity, { position, rotation, scale });
   useEntityRef(ref, instanceRef.current);
+  useEntityEvent({
+    instance: instanceRef.current,
+    onSpatialTap,
+    onSpatialDragStart,
+    onSpatialDrag,
+    onSpatialDragEnd,
+    onSpatialRotate,
+    onSpatialRotateEnd,
+    onSpatialMagnify,
+    onSpatialMagnifyEnd
+  });
   useEffect21(() => {
     const ent = instanceRef.current.entity;
     if (!ent) return;
@@ -2702,20 +2882,21 @@ var useEntity = ({
 };
 
 // src/reality/hooks/useForceUpdate.tsx
-import { useCallback as useCallback7, useState as useState7 } from "react";
+import { useCallback as useCallback7, useState as useState6 } from "react";
 var useForceUpdate2 = () => {
-  const [, setTick] = useState7(0);
+  const [, setTick] = useState6(0);
   return useCallback7(() => setTick((tick) => tick + 1), []);
 };
 
 // src/reality/components/BaseEntity.tsx
 import { jsx as jsx12 } from "react/jsx-runtime";
 var BaseEntity = forwardRef10(
-  ({ children, createEntity, ...rest }, ref) => {
+  ({ children, createEntity, recreateKey, ...rest }, ref) => {
     const ctx = useRealityContext();
     const entity = useEntity({
       ...rest,
       ref,
+      recreateKey,
       createEntity: (signal) => createEntity(ctx, signal)
     });
     if (!entity) return null;
@@ -2743,35 +2924,102 @@ var Entity = forwardRef11((props, ref) => {
 import { forwardRef as forwardRef13 } from "react";
 
 // src/reality/components/GeometryEntity.tsx
-import { forwardRef as forwardRef12 } from "react";
+import { forwardRef as forwardRef12, useEffect as useEffect22, useRef as useRef12 } from "react";
 import { jsx as jsx14 } from "react/jsx-runtime";
 var GeometryEntity = forwardRef12(
   ({ id, children, name, materials, geometryOptions, createGeometry, ...rest }, ref) => {
+    const ctx = useRealityContext();
+    const entityRef = useRef12(null);
+    const componentRef = useRef12(null);
+    const mutableRef = useRef12({
+      lastSnapshot: null,
+      rebuildGen: 0
+    });
+    useEffect22(() => {
+      const { lastSnapshot } = mutableRef.current;
+      if (!ctx || !entityRef.current || lastSnapshot === null) return;
+      const geometryChanged = !shallowEqualObject(
+        lastSnapshot.geometryOptions,
+        geometryOptions
+      );
+      const materialsChanged = !shallowEqualArray(
+        lastSnapshot.materials,
+        materials
+      );
+      if (!geometryChanged && !materialsChanged) return;
+      mutableRef.current.lastSnapshot = { geometryOptions, materials };
+      mutableRef.current.rebuildGen += 1;
+      const gen = mutableRef.current.rebuildGen;
+      const rebuild = async () => {
+        const entity = entityRef.current;
+        if (!entity) return;
+        try {
+          const oldComponent = componentRef.current;
+          if (oldComponent) {
+            await entity.removeComponent(oldComponent);
+            await oldComponent.destroy();
+            componentRef.current = null;
+            if (gen !== mutableRef.current.rebuildGen) return;
+          }
+          const geometry = await createGeometry(geometryOptions);
+          if (gen !== mutableRef.current.rebuildGen) {
+            await geometry.destroy();
+            return;
+          }
+          const materialList = await Promise.all(
+            materials?.map((mid) => ctx.resourceRegistry.get(mid)).filter(Boolean) ?? []
+          );
+          if (gen !== mutableRef.current.rebuildGen) {
+            await geometry.destroy();
+            return;
+          }
+          const modelComponent = await ctx.session.createModelComponent({
+            mesh: geometry,
+            materials: materialList
+          });
+          if (gen !== mutableRef.current.rebuildGen) {
+            await modelComponent.destroy();
+            await geometry.destroy();
+            return;
+          }
+          await entity.addComponent(modelComponent);
+          componentRef.current = modelComponent;
+        } catch (error) {
+          if (gen === mutableRef.current.rebuildGen) {
+            console.error("GeometryEntity: rebuild failed", error);
+          }
+        }
+      };
+      rebuild();
+    }, [ctx, geometryOptions, materials, createGeometry]);
     return /* @__PURE__ */ jsx14(
       BaseEntity,
       {
         ...rest,
         id,
         ref,
-        createEntity: async (ctx, signal) => {
+        createEntity: async (ctx2, signal) => {
           const manager = new AbortResourceManager(signal);
           try {
             const ent = await manager.addResource(
-              () => ctx.session.createEntity({ id, name })
+              () => ctx2.session.createEntity({ id, name })
             );
             const geometry = await manager.addResource(
               () => createGeometry(geometryOptions)
             );
             const materialList = await Promise.all(
-              materials?.map((id2) => ctx.resourceRegistry.get(id2)).filter(Boolean) ?? []
+              materials?.map((id2) => ctx2.resourceRegistry.get(id2)).filter(Boolean) ?? []
             );
             const modelComponent = await manager.addResource(
-              () => ctx.session.createModelComponent({
+              () => ctx2.session.createModelComponent({
                 mesh: geometry,
                 materials: materialList
               })
             );
             await ent.addComponent(modelComponent);
+            entityRef.current = ent;
+            componentRef.current = modelComponent;
+            mutableRef.current.lastSnapshot = { geometryOptions, materials };
             return ent;
           } catch (error) {
             await manager.dispose();
@@ -2809,14 +3057,15 @@ var BoxEntity = forwardRef13(
 );
 
 // src/reality/components/UnlitMaterial.tsx
-import { useEffect as useEffect22, useRef as useRef12 } from "react";
+import { useEffect as useEffect23, useRef as useRef13 } from "react";
 var UnlitMaterial = ({
   children,
   ...options
 }) => {
   const ctx = useRealityContext();
-  const materialRef = useRef12();
-  useEffect22(() => {
+  const materialRef = useRef13();
+  const isInitializedRef = useRef13(false);
+  useEffect23(() => {
     if (!ctx) return;
     const { session, reality, resourceRegistry } = ctx;
     const init = async () => {
@@ -2825,6 +3074,7 @@ var UnlitMaterial = ({
       try {
         const mat = await materialPromise;
         materialRef.current = mat;
+        isInitializedRef.current = true;
       } catch (error) {
         console.error(" ~ UnlitMaterial ~ error:", error);
       }
@@ -2832,8 +3082,21 @@ var UnlitMaterial = ({
     init();
     return () => {
       resourceRegistry.removeAndDestroy(options.id);
+      materialRef.current = void 0;
+      isInitializedRef.current = false;
     };
   }, [ctx]);
+  useEffect23(() => {
+    if (!isInitializedRef.current || !materialRef.current) return;
+    const updates = {};
+    if (options.color !== void 0) updates.color = options.color;
+    if (options.transparent !== void 0)
+      updates.transparent = options.transparent;
+    if (options.opacity !== void 0) updates.opacity = options.opacity;
+    if (Object.keys(updates).length > 0) {
+      materialRef.current.updateProperties(updates);
+    }
+  }, [options.color, options.transparent, options.opacity]);
   return null;
 };
 
@@ -2932,7 +3195,7 @@ var SceneGraph = ({ children }) => {
 };
 
 // src/reality/components/ModelAsset.tsx
-import { useEffect as useEffect23, useRef as useRef13 } from "react";
+import { useEffect as useEffect24, useRef as useRef14 } from "react";
 var resolveAssetUrl = (url) => {
   if (url.startsWith("http://") || url.startsWith("https://")) {
     return url;
@@ -2941,8 +3204,8 @@ var resolveAssetUrl = (url) => {
 };
 var ModelAsset = ({ children, ...options }) => {
   const ctx = useRealityContext();
-  const materialRef = useRef13();
-  useEffect23(() => {
+  const materialRef = useRef14();
+  useEffect24(() => {
     const controller = new AbortController();
     if (!ctx) return;
     const { session, reality, resourceRegistry } = ctx;
@@ -2972,29 +3235,66 @@ var ModelAsset = ({ children, ...options }) => {
 };
 
 // src/reality/components/ModelEntity.tsx
-import { forwardRef as forwardRef18 } from "react";
+import { forwardRef as forwardRef18, useEffect as useEffect25, useRef as useRef15 } from "react";
 import { jsx as jsx21 } from "react/jsx-runtime";
 var ModelEntity = forwardRef18(
-  ({ id, model, children, name, ...rest }, ref) => {
+  ({ id, model, children, name, materials, ...rest }, ref) => {
+    const ctx = useRealityContext();
+    const entityRef = useRef15(null);
+    const lastMaterialsRef = useRef15(void 0);
+    useEffect25(() => {
+      if (!ctx || !entityRef.current) return;
+      const next = materials ?? [];
+      const prev = lastMaterialsRef.current ?? [];
+      if (shallowEqualArray(prev, next)) return;
+      lastMaterialsRef.current = next;
+      const apply = async () => {
+        try {
+          const materialList = (await Promise.all(
+            next.map((mid) => ctx.resourceRegistry.get(mid))
+          )).filter(Boolean);
+          if (entityRef.current) {
+            await entityRef.current.setMaterials(materialList);
+          }
+        } catch (error) {
+          console.error("ModelEntity: failed to set materials", error);
+        }
+      };
+      apply();
+    }, [ctx, materials]);
     return /* @__PURE__ */ jsx21(
       BaseEntity,
       {
         ...rest,
         id,
         ref,
-        createEntity: async (ctx, signal) => {
+        recreateKey: model,
+        createEntity: async (ctx2, signal) => {
           try {
-            const modelAsset = await ctx.resourceRegistry.get(model);
+            const modelAsset = await ctx2.resourceRegistry.get(model);
             if (!modelAsset)
               throw new Error(`ModelEntity: model not found ${model}`);
             if (signal.aborted) return null;
-            return ctx.session.createSpatialModelEntity(
+            const ent = await ctx2.session.createSpatialModelEntity(
               {
                 modelAssetId: modelAsset.id,
                 name
               },
               { id, name }
             );
+            entityRef.current = ent;
+            if (materials && materials.length > 0) {
+              const materialList = (await Promise.all(
+                materials.map(
+                  (mid) => ctx2.resourceRegistry.get(mid)
+                )
+              )).filter(Boolean);
+              if (materialList.length > 0 && !signal.aborted) {
+                await ent.setMaterials(materialList);
+              }
+            }
+            lastMaterialsRef.current = materials ?? [];
+            return ent;
           } catch (error) {
             return null;
           }
@@ -3009,9 +3309,9 @@ var ModelEntity = forwardRef18(
 import {
   forwardRef as forwardRef19,
   useCallback as useCallback8,
-  useEffect as useEffect24,
-  useRef as useRef14,
-  useState as useState8
+  useEffect as useEffect26,
+  useRef as useRef16,
+  useState as useState7
 } from "react";
 import { Fragment as Fragment3, jsx as jsx22, jsxs as jsxs3 } from "react/jsx-runtime";
 var Reality = forwardRef19(
@@ -3034,9 +3334,9 @@ var Reality = forwardRef19(
       onSpatialMagnifyEnd,
       ...props
     } = inProps;
-    const ctxRef = useRef14(null);
-    const creationId = useRef14(0);
-    const [isReady, setIsReady] = useState8(false);
+    const ctxRef = useRef16(null);
+    const creationId = useRef16(0);
+    const [isReady, setIsReady] = useState7(false);
     const cleanupReality = useCallback8(() => {
       ctxRef.current?.attachmentRegistry.destroy();
       ctxRef.current?.resourceRegistry.destroy();
@@ -3044,7 +3344,7 @@ var Reality = forwardRef19(
       ctxRef.current = null;
       setIsReady(false);
     }, []);
-    useEffect24(() => {
+    useEffect26(() => {
       return () => {
         creationId.current++;
         cleanupReality();
@@ -3122,7 +3422,7 @@ var Reality = forwardRef19(
 );
 
 // src/reality/components/AttachmentAsset.tsx
-import { useEffect as useEffect25, useState as useState9 } from "react";
+import { useEffect as useEffect27, useState as useState8 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
 import { jsx as jsx23 } from "react/jsx-runtime";
 var AttachmentAsset = ({
@@ -3130,8 +3430,8 @@ var AttachmentAsset = ({
   children
 }) => {
   const ctx = useRealityContext();
-  const [containers, setContainers] = useState9([]);
-  useEffect25(() => {
+  const [containers, setContainers] = useState8([]);
+  useEffect27(() => {
     if (!ctx) return;
     return ctx.attachmentRegistry.onContainersChange(name, setContainers);
   }, [ctx, name]);
@@ -3142,7 +3442,7 @@ var AttachmentAsset = ({
 };
 
 // src/reality/components/AttachmentEntity.tsx
-import { useEffect as useEffect26, useRef as useRef15, useState as useState10 } from "react";
+import { useEffect as useEffect28, useRef as useRef17, useState as useState9 } from "react";
 var instanceCounter = 0;
 var AttachmentEntity = ({
   attachment: attachmentName,
@@ -3151,12 +3451,12 @@ var AttachmentEntity = ({
 }) => {
   const ctx = useRealityContext();
   const parent = useParentContext();
-  const attachmentRef = useRef15(null);
-  const parentIdRef = useRef15(null);
-  const instanceIdRef = useRef15(`att_${++instanceCounter}`);
-  const attachmentNameRef = useRef15(attachmentName);
-  const [childWindow, setChildWindow] = useState10(null);
-  useEffect26(() => {
+  const attachmentRef = useRef17(null);
+  const parentIdRef = useRef17(null);
+  const instanceIdRef = useRef17(`att_${++instanceCounter}`);
+  const attachmentNameRef = useRef17(attachmentName);
+  const [childWindow, setChildWindow] = useState9(null);
+  useEffect28(() => {
     if (!ctx || !parent) return;
     if (attachmentRef.current) return;
     const parentId = parent.id;
@@ -3218,7 +3518,7 @@ var AttachmentEntity = ({
       }
     };
   }, [ctx, parent]);
-  useEffect26(() => {
+  useEffect28(() => {
     if (!ctx) return;
     const att = attachmentRef.current;
     const prevName = attachmentNameRef.current;
@@ -3235,7 +3535,7 @@ var AttachmentEntity = ({
     }
   }, [ctx, attachmentName]);
   useSyncHeadStyles(childWindow, { subtree: false });
-  useEffect26(() => {
+  useEffect28(() => {
     if (!attachmentRef.current) return;
     attachmentRef.current.update({ position, size });
   }, [position?.[0], position?.[1], position?.[2], size?.width, size?.height]);
@@ -3371,7 +3671,7 @@ async function convertCoordinate(position, { from, to }) {
 }
 
 // src/index.ts
-var version = "1.4.0";
+var version = "1.5.0";
 if (typeof window !== "undefined") {
   initPolyfill();
 }