@webspatial/react-sdk 0.1.2 → 0.1.4

package/dist/default/index.js

@@ -948,11 +948,15 @@ function syncDefaultSpatialStyle(openedWindow, debugName) {
   styleElement.innerHTML = " .xr-spatial-default {  --xr-back: 0.001; --xr-background-material: none  } ";
   openedWindow.document.head.appendChild(styleElement);
   openedWindow.document.body.style.display = "inline-block";
+  openedWindow.document.body.style.minWidth = "auto";
+  openedWindow.document.body.style.minHeight = "auto";
+  openedWindow.document.body.style.maxWidth = "fit-content";
+  openedWindow.document.body.style.minWidth = "fit-content";
 }
 function useSyncSpatialProps(spatialWindowManager, props, domRect, anchor, cornerRadiusFromStyle, opacity, stylePosition, isSubPortal) {
   let { allowScroll, scrollWithParent, style, spatialStyle = {} } = props;
   let {
-    position = { x: 0, y: 0, z: 1 },
+    position = { x: 0, y: 0, z: 0 },
     rotation = { x: 0, y: 0, z: 0, w: 1 },
     scale = { x: 1, y: 1, z: 1 },
     material = { type: "none" },
@@ -1220,7 +1224,7 @@ function PortalInstance(inProps) {
   const needRenderPlaceHolder = isSubPortal && inheritedPortalStyle.position !== "absolute" && inheritedPortalStyle.position !== "fixed";
   return /* @__PURE__ */ jsxs(SpatialWindowManagerContext.Provider, { value: spatialWindowManager, children: [
     needRenderPlaceHolder && /* @__PURE__ */ jsx2(
-      "div",
+      "span",
       {
         className,
         "data-subportal-spatialid": spatialId,
@@ -1228,7 +1232,8 @@ function PortalInstance(inProps) {
           position: "relative",
           width: `${domRect.width}px`,
           height: `${domRect.height}px`,
-          visibility: "hidden"
+          visibility: "hidden",
+          display: inheritedPortalStyle.display
         }
       }
     ),
@@ -1504,7 +1509,8 @@ import { Quaternion } from "three/src/math/Quaternion.js";
 // src/spatial-react-components/CSSSpatialDiv/const.ts
 var SpatialCustomVars = {
   back: "--xr-back",
-  backgroundMaterial: "--xr-background-material"
+  backgroundMaterial: "--xr-background-material",
+  xrZIndex: "--xr-z-index"
 };
 var BackgroundMaterialDefault = "none";
 
@@ -1560,7 +1566,18 @@ function parseBack(computedStyle) {
     back = parseFloat(backProperty);
   } catch (error) {
   }
-  return new Matrix4().makeTranslation(0, 0, back || 1);
+  return new Matrix4().makeTranslation(0, 0, back || 0);
+}
+function parseXRZIndex(computedStyle) {
+  let xrZIndexProperty = computedStyle.getPropertyValue(
+    SpatialCustomVars.xrZIndex
+  );
+  let xrZIndex = 0;
+  try {
+    xrZIndex = parseFloat(xrZIndexProperty);
+  } catch (error) {
+  }
+  return xrZIndex;
 }
 function parseSpatialStyle(node) {
   const computedStyle = getComputedStyle(node);
@@ -1572,7 +1589,7 @@ function parseSpatialStyle(node) {
   const quaternion = new Quaternion();
   const scale = new Vector3();
   resultMatrix.decompose(position, quaternion, scale);
-  const zIndex = parseFloat(computedStyle.getPropertyValue("z-index"));
+  const zIndex = parseXRZIndex(computedStyle);
   const visible = computedStyle.getPropertyValue("visibility") === "visible";
   const backgroundMaterialType = computedStyle.getPropertyValue(
     SpatialCustomVars.backgroundMaterial
@@ -1596,7 +1613,7 @@ function parseSpatialStyle(node) {
 function useSpatialStyle() {
   const ref = useRef5(null);
   const [spatialStyle, setSpatialStyle] = useState3({
-    position: { x: 0, y: 0, z: 1 },
+    position: { x: 0, y: 0, z: 0 },
     rotation: { x: 0, y: 0, z: 0, w: 1 },
     scale: { x: 1, y: 1, z: 1 },
     zIndex: 0,
@@ -1752,10 +1769,15 @@ function useHijackSpatialDivRef(refIn, cssParserRef) {
                   } else if (property === "transform") {
                     ref.current?.style.setProperty(property, value);
                     return true;
+                  } else if (property === SpatialCustomVars.xrZIndex) {
+                    ref.current?.style.setProperty(
+                      SpatialCustomVars.xrZIndex,
+                      value
+                    );
                   }
                 } else if (prop === "removeProperty") {
                   const [property] = args;
-                  if (property === SpatialCustomVars.backgroundMaterial || property === SpatialCustomVars.back || property === "transform") {
+                  if (property === SpatialCustomVars.backgroundMaterial || property === SpatialCustomVars.back || property === "transform" || property === SpatialCustomVars.xrZIndex) {
                     ref.current?.style.removeProperty(property);
                   }
                 } else if (prop === "getPropertyValue") {
@@ -1790,6 +1812,11 @@ function useHijackSpatialDivRef(refIn, cssParserRef) {
                 SpatialCustomVars.back,
                 value
               );
+            } else if (property === SpatialCustomVars.xrZIndex) {
+              ref.current?.style.setProperty(
+                SpatialCustomVars.xrZIndex,
+                value
+              );
             } else if (property === "transform") {
               ref.current?.style.setProperty(property, value);
               return true;
@@ -1801,7 +1828,8 @@ function useHijackSpatialDivRef(refIn, cssParserRef) {
                 "transform",
                 "visibility",
                 SpatialCustomVars.back,
-                SpatialCustomVars.backgroundMaterial
+                SpatialCustomVars.backgroundMaterial,
+                SpatialCustomVars.xrZIndex
               ];
               const { extractedValues, filteredCssText } = extractAndRemoveCustomProperties(
                 value,