@webspatial/react-sdk 0.0.15 → 0.0.16-alpha.1

package/dist/web/index.js

@@ -194,7 +194,8 @@ function simplifyEntityTree(rootTree) {
       cornerRadius: node.components[0].cornerRadius,
       backgroundMaterial: node.components[0].backgroundMaterial,
       isOpaque: node.components[0].isOpaque,
-      isScrollEnabled: node.components[0].isScrollEnabled
+      isScrollEnabled: node.components[0].isScrollEnabled,
+      scrollWithParent: node.components[0].scrollWithParent
     };
     nodeMap[node.id] = newNode;
     if (!parent) {
@@ -531,9 +532,9 @@ var SpatialWindowManager = class {
     this.initPromise = this.initInternalFromWindow();
     await this.initPromise;
   }
-  async resize(rect, offset, rotation = { x: 0, y: 0, z: 0, w: 1 }, scale = { x: 1, y: 1, z: 1 }, rotationOrigin = { x: 0, y: 0, z: 0 }) {
+  async resize(rect, offset, rotation = { x: 0, y: 0, z: 0, w: 1 }, scale = { x: 1, y: 1, z: 1 }, rotationOrigin = { x: 0, y: 0, z: 0 }, parrentOffset = 0) {
     let targetPosX = rect.x + rect.width / 2;
-    let targetPosY = rect.y + rect.height / 2 + window.scrollY;
+    let targetPosY = rect.y + rect.height / 2 + parrentOffset;
     if (!this.webview) {
       return;
     }
@@ -948,7 +949,7 @@ function syncDefaultSpatialStyle(openedWindow, debugName) {
   openedWindow.document.head.appendChild(styleElement);
   openedWindow.document.body.style.display = "inline-block";
 }
-function useSyncSpatialProps(spatialWindowManager, props, domRect, anchor, cornerRadiusFromStyle, opacity, stylePosition) {
+function useSyncSpatialProps(spatialWindowManager, props, domRect, anchor, cornerRadiusFromStyle, opacity, stylePosition, isSubPortal) {
   let { allowScroll, scrollWithParent, style, spatialStyle = {} } = props;
   let {
     position = { x: 0, y: 0, z: 1 },
@@ -1041,7 +1042,8 @@ function useSyncSpatialProps(spatialWindowManager, props, domRect, anchor, corne
           position,
           rotation,
           scale,
-          anchor
+          anchor,
+          isSubPortal ? 0 : window.scrollY
         );
         spatialWindowManager?.setZIndex(zIndex);
       })();
@@ -1125,12 +1127,14 @@ function useSyncDomRect(spatialId) {
       const isFixedPosition = stylePosition === "fixed";
       let domRect2 = dom.getBoundingClientRect();
       let rectType = domRect2rectType(domRect2);
-      const parentDom = spatialReactContextObject?.queryParentSpatialDom(spatialId);
-      if (!isFixedPosition && parentDom) {
-        const parentDomRect = parentDom.getBoundingClientRect();
-        const parentRectType = domRect2rectType(parentDomRect);
-        rectType.x -= parentRectType.x;
-        rectType.y -= parentRectType.y;
+      if (!isFixedPosition) {
+        const parentDom = spatialReactContextObject?.queryParentSpatialDom(spatialId);
+        if (parentDom) {
+          const parentDomRect = parentDom.getBoundingClientRect();
+          const parentRectType = domRect2rectType(parentDomRect);
+          rectType.x -= parentRectType.x;
+          rectType.y -= parentRectType.y;
+        }
       }
       const anchor = parseTransformOrigin(computedStyle);
       anchorRef.current = anchor;
@@ -1205,7 +1209,8 @@ function PortalInstance(inProps) {
     anchor,
     cornerRadius,
     opacity,
-    inheritedPortalStyle.position
+    inheritedPortalStyle.position,
+    isSubPortal
   );
   const JSXPortalInstance = renderJSXPortalInstance(
     props,
@@ -2392,9 +2397,12 @@ var Model3DNative = class {
     if (!this.entity || !this.spatialModel3DComponent) {
       return;
     }
+    const computedStyle = getComputedStyle(dom);
+    const isFixed = computedStyle.position === "fixed";
+    const scrollY = isFixed ? 0 : window.scrollY;
     const rect = dom.getBoundingClientRect();
     const targetPosX = rect.left + (rect.right - rect.left) / 2;
-    const targetPosY = rect.bottom + (rect.top - rect.bottom) / 2 + window.scrollY;
+    const targetPosY = rect.bottom + (rect.top - rect.bottom) / 2 + scrollY;
     const { spatialTransform } = options;
     const { position, rotation, scale } = spatialTransform;
     const entity = this.entity;
@@ -2411,7 +2419,6 @@ var Model3DNative = class {
     await entity.updateTransform();
     const spatialModel3DComponent = this.spatialModel3DComponent;
     await spatialModel3DComponent.setResolution(rect.width, rect.height);
-    const computedStyle = getComputedStyle(dom);
     const opacity = parseFloat(computedStyle.getPropertyValue("opacity"));
     await spatialModel3DComponent.setOpacity(opacity);
     const anchor = parseTransformOrigin(computedStyle);
@@ -2422,7 +2429,7 @@ var Model3DNative = class {
       return;
     }
     const targetPosX = rect.x + rect.width / 2;
-    const targetPosY = rect.y + rect.height / 2 + window.scrollY;
+    const targetPosY = rect.y + rect.height / 2;
     const { position, rotation, scale } = spatialTransform;
     const entity = this.entity;
     entity.transform.position.x = targetPosX + position.x;
@@ -2449,6 +2456,19 @@ var Model3DNative = class {
       this.spatialModel3DComponent.setOpacity(opacity);
     }
   }
+  async setScrollWithParent(scrollWithParent) {
+    if (this.spatialModel3DComponent) {
+      this.spatialModel3DComponent.setScrollWithParent(scrollWithParent);
+    }
+  }
+  async changeParentEntity(parentEntity) {
+    if (this.parentEntity !== parentEntity) {
+      if (this.entity) {
+        await this.entity.setParent(parentEntity);
+      }
+      this.parentEntity = parentEntity;
+    }
+  }
   set onDragStart(callback) {
     if (this.spatialModel3DComponent) {
       this.spatialModel3DComponent.onDragStart = callback;
@@ -2866,17 +2886,21 @@ function useSyncDomInfoFromStandardInstance(spatialId) {
         return;
       }
       modelRef.current = dom;
+      const computedStyle = getComputedStyle(dom);
+      inheritedPortalStyleRef.current = getInheritedStyleProps(computedStyle);
+      const stylePosition = inheritedPortalStyleRef.current.position;
+      const isFixedPosition = stylePosition === "fixed";
       let domRect2 = dom.getBoundingClientRect();
       let rectType = domRect2rectType(domRect2);
-      const parentDom = spatialReactContextObject?.queryParentSpatialDom(spatialId);
-      if (parentDom) {
-        const parentDomRect = parentDom.getBoundingClientRect();
-        const parentRectType = domRect2rectType(parentDomRect);
-        rectType.x -= parentRectType.x;
-        rectType.y -= parentRectType.y;
+      if (!isFixedPosition) {
+        const parentDom = spatialReactContextObject?.queryParentSpatialDom(spatialId);
+        if (parentDom) {
+          const parentDomRect = parentDom.getBoundingClientRect();
+          const parentRectType = domRect2rectType(parentDomRect);
+          rectType.x -= parentRectType.x;
+          rectType.y -= parentRectType.y;
+        }
       }
-      const computedStyle = getComputedStyle(dom);
-      inheritedPortalStyleRef.current = getInheritedStyleProps(computedStyle);
       const anchor = parseTransformOrigin(computedStyle);
       anchorRef.current = anchor;
       const opacity = parseFloat(computedStyle.getPropertyValue("opacity"));
@@ -3050,6 +3074,22 @@ function renderModel3DPortalInstance(spatialId, props) {
       model3DNativeRef.current.setOpacity(opacity);
     }
   }, [model3DNativeRef.current, opacity]);
+  const isFixedPosition = inheritedPortalStyle.position == "fixed";
+  useEffect13(() => {
+    if (model3DNativeRef.current) {
+      model3DNativeRef.current.setScrollWithParent(
+        inheritedPortalStyle.position !== "fixed"
+      );
+      if (isFixedPosition) {
+        ;
+        (async function() {
+          var wc = await getSession().getCurrentWindowComponent();
+          var ent = await wc.getEntity();
+          model3DNativeRef.current?.changeParentEntity(ent);
+        })();
+      }
+    }
+  }, [model3DNativeRef.current, isFixedPosition]);
   const onSuccess = useCallback5(() => {
     ;
     modelRef.current.ready = true;
@@ -3087,7 +3127,7 @@ function renderModel3DPortalInstance(spatialId, props) {
       }
     };
   }, [modelUrl]);
-  const needRenderPlaceHolder = inheritedPortalStyle.position !== "absolute";
+  const needRenderPlaceHolder = inheritedPortalStyle.position !== "absolute" && inheritedPortalStyle.position !== "fixed";
   if (!needRenderPlaceHolder && phase !== "failure") {
     return /* @__PURE__ */ jsx12(Fragment2, {});
   } else {
@@ -3344,6 +3384,16 @@ function ModelBase(inProps, ref) {
   );
   const isWebEnv = !getSession();
   if (isWebEnv) {
+    useEffect16(() => {
+      if (gltfSourceURL == "") {
+        console.warn("Unable to display model, no gltf/glb source provided");
+        if (props2.onLoad) {
+          props2.onLoad({
+            target: { ready: false, currentSrc: gltfSourceURL }
+          });
+        }
+      }
+    }, []);
     const myModelViewer = useRef12(null);
     const { className, style = {}, ...props2 } = inProps;
     const isDragging = useRef12(false);