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

package/dist/default/index.js

@@ -1127,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;
@@ -2395,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;
@@ -2414,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);
@@ -2452,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;
@@ -2869,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"));
@@ -3053,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;
@@ -3090,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 {