@webspatial/react-sdk 0.1.3 → 0.1.5

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,
@@ -3385,6 +3413,7 @@ function ModelBase(inProps, ref) {
   );
   const isWebEnv = !getSession();
   if (isWebEnv) {
+    const loadFailed = useRef12(false);
     useEffect16(() => {
       if (gltfSourceURL == "") {
         console.warn("Unable to display model, no gltf/glb source provided");
@@ -3393,6 +3422,7 @@ function ModelBase(inProps, ref) {
             target: { ready: false, currentSrc: gltfSourceURL }
           });
         }
+        loadFailed.current = true;
       }
     }, []);
     const myModelViewer = useRef12(null);
@@ -3415,6 +3445,7 @@ function ModelBase(inProps, ref) {
               target: { ready: false, currentSrc: gltfSourceURL }
             });
           }
+          loadFailed.current = true;
         }
       }, 500);
     }, []);
@@ -3429,6 +3460,7 @@ function ModelBase(inProps, ref) {
               target: { ready: false, currentSrc: gltfSourceURL }
             });
           }
+          loadFailed.current = true;
         }
       });
       myModelViewer.current.addEventListener("load", (event) => {
@@ -3437,6 +3469,7 @@ function ModelBase(inProps, ref) {
             target: { ready: true, currentSrc: gltfSourceURL }
           });
         }
+        loadFailed.current = false;
       });
       myModelViewer.current.addEventListener("pointerdown", (event) => {
         isDragging.current = true;
@@ -3494,27 +3527,33 @@ function ModelBase(inProps, ref) {
         );
       }
     }, [props2.contentMode, props2.resizable, props2.aspectRatio]);
-    return /* @__PURE__ */ jsx16("div", { ref, className, style, children: modelViewerExists ? /* @__PURE__ */ jsx16(
-      "model-viewer",
-      {
-        ref: myModelViewer,
-        style: {
-          width: "100%",
-          height: "100%"
-        },
-        src: gltfSourceURL,
-        "camera-controls": true,
-        "touch-action": "pan-y",
-        poster: props2.poster
-      }
-    ) : /* @__PURE__ */ jsx16(Fragment5, { children: props2.poster ? /* @__PURE__ */ jsx16(
+    return /* @__PURE__ */ jsx16("div", { ref, className, style, children: modelViewerExists ? /* @__PURE__ */ jsxs6(Fragment5, { children: [
+      /* @__PURE__ */ jsx16(
+        "model-viewer",
+        {
+          ref: myModelViewer,
+          style: {
+            display: loadFailed.current ? "none" : "",
+            width: "100%",
+            height: "100%"
+          },
+          src: gltfSourceURL,
+          "camera-controls": true,
+          "touch-action": "pan-y",
+          poster: props2.poster
+        }
+      ),
+      loadFailed.current ? /* @__PURE__ */ jsx16(Fragment5, { children: placeHolder }) : /* @__PURE__ */ jsx16(Fragment5, { children: " " })
+    ] }) : /* @__PURE__ */ jsx16(Fragment5, { children: props2.poster ? /* @__PURE__ */ jsx16(
       "img",
       {
         className,
-        style: Object.assign(style, { objectFit: "contain" }),
+        style: Object.assign(structuredClone(style), {
+          objectFit: "contain"
+        }),
         src: props2.poster
       }
-    ) : /* @__PURE__ */ jsx16(Fragment5, {}) }) });
+    ) : /* @__PURE__ */ jsx16(Fragment5, { children: placeHolder }) }) });
   } else {
     return renderInModel3D(props, ref, usdzSourceURL, placeHolder);
   }