@webspatial/react-sdk 0.0.11 → 0.0.13

package/dist/web/index.js

@@ -193,7 +193,8 @@ function simplifyEntityTree(rootTree) {
       visible: node.visible,
       cornerRadius: node.components[0].cornerRadius,
       backgroundMaterial: node.components[0].backgroundMaterial,
-      isOpaque: node.components[0].isOpaque
+      isOpaque: node.components[0].isOpaque,
+      isScrollEnabled: node.components[0].isScrollEnabled
     };
     nodeMap[node.id] = newNode;
     if (!parent) {
@@ -465,6 +466,12 @@ var SpatialWindowManager = class {
   entity;
   webview;
   window = null;
+  parentSpatialWindowManager;
+  isFixedPosition;
+  constructor(options) {
+    this.isFixedPosition = options.isFixedPosition || false;
+    this.parentSpatialWindowManager = options.parentSpatialWindowManager;
+  }
   setDebugName(debugName) {
     this.entity?._setName(debugName);
   }
@@ -481,7 +488,7 @@ var SpatialWindowManager = class {
     var ent = await wc.getEntity();
     await this.entity.setParent(ent);
   }
-  async initInternalFromWindow(parentSpatialWindowManager) {
+  async initInternalFromWindow() {
     if (true) return;
     var w = await getSession().createWindowContext();
     this.window = w;
@@ -492,14 +499,27 @@ var SpatialWindowManager = class {
     await this.webview.setScrollWithParent(true);
     await this.webview.setScrollEnabled(false);
     await this.entity.setComponent(this.webview);
-    if (parentSpatialWindowManager !== void 0) {
-      if (parentSpatialWindowManager !== null) {
-        await parentSpatialWindowManager.initPromise;
-        this.entity.setParent(parentSpatialWindowManager.entity);
-      } else {
+    this.setEntityParentByCSSPosition(this.isFixedPosition);
+  }
+  async updateCSSPosition(isFixedPosition) {
+    if (this.isFixedPosition === isFixedPosition) {
+      return;
+    } else {
+      this.isFixedPosition = isFixedPosition;
+    }
+    return this.setEntityParentByCSSPosition(isFixedPosition);
+  }
+  async setEntityParentByCSSPosition(isFixedPosition) {
+    if (this.initPromise) {
+      await this.initPromise;
+      if (isFixedPosition || !this.parentSpatialWindowManager) {
         var wc = await getSession().getCurrentWindowComponent();
         var ent = await wc.getEntity();
         await this.entity.setParent(ent);
+      } else {
+        const parentSpatialWindowManager = this.parentSpatialWindowManager;
+        await parentSpatialWindowManager.initPromise;
+        this.entity.setParent(parentSpatialWindowManager.entity);
       }
     }
   }
@@ -507,8 +527,8 @@ var SpatialWindowManager = class {
     this.initPromise = this.initInternal(url);
     await this.initPromise;
   }
-  async initFromWidow(parentSpatialWindowManager) {
-    this.initPromise = this.initInternalFromWindow(parentSpatialWindowManager);
+  async initFromWidow() {
+    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 }) {
@@ -562,8 +582,10 @@ function usePortalContainer(options) {
     let spawnedResult;
     async function asyncCreatePortalContainer() {
       const session = getSession();
-      let windowMgr = new SpatialWindowManager();
-      await windowMgr.initFromWidow(parentSpatialWindowManager);
+      let windowMgr = new SpatialWindowManager({
+        parentSpatialWindowManager: parentSpatialWindowManager || void 0
+      });
+      await windowMgr.initFromWidow();
       if (isDestroyed) {
         windowMgr.destroy();
         return;
@@ -962,6 +984,12 @@ function useSyncSpatialProps(spatialWindowManager, props, domRect, anchor, corne
   } else {
     Object.assign(cornerRadiusObject, cornerRadius);
   }
+  const isFixedPosition = stylePosition == "fixed";
+  useEffect3(() => {
+    if (spatialWindowManager && spatialWindowManager.webview) {
+      spatialWindowManager.updateCSSPosition(isFixedPosition);
+    }
+  }, [spatialWindowManager, isFixedPosition]);
   useEffect3(() => {
     if (spatialWindowManager && spatialWindowManager.webview) {
       const webview = spatialWindowManager.webview;
@@ -985,7 +1013,7 @@ function useSyncSpatialProps(spatialWindowManager, props, domRect, anchor, corne
       const webview = spatialWindowManager.webview;
       (async function() {
         webview.setScrollEnabled(allowScroll || styleOverflow == "scroll");
-        const isFixed = scrollWithParent == false || stylePosition == "fixed";
+        const isFixed = scrollWithParent == false || isFixedPosition;
         webview.setScrollWithParent(!isFixed);
       })();
     }
@@ -993,9 +1021,19 @@ function useSyncSpatialProps(spatialWindowManager, props, domRect, anchor, corne
     spatialWindowManager,
     allowScroll,
     scrollWithParent,
-    stylePosition,
+    isFixedPosition,
     styleOverflow
   ]);
+  useEffect3(() => {
+    if (spatialWindowManager && spatialWindowManager.webview) {
+      const webview = spatialWindowManager.webview;
+      (async function() {
+        webview.setScrollEnabled(allowScroll || styleOverflow == "scroll");
+        const isFixed = scrollWithParent == false || stylePosition == "fixed";
+        webview.setScrollWithParent(!isFixed);
+      })();
+    }
+  }, [spatialWindowManager, allowScroll, scrollWithParent, stylePosition]);
   useEffect3(() => {
     if (spatialWindowManager) {
       ;
@@ -1083,17 +1121,19 @@ function useSyncDomRect(spatialId) {
       if (!dom) {
         return;
       }
+      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) {
+      if (!isFixedPosition && 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 cornerRadius = parseCornerRadius(computedStyle);