@webspatial/react-sdk 0.0.6 → 0.0.9

package/dist/default/index.mjs

@@ -704,6 +704,127 @@ function parseCornerRadius(computedStyle) {
 import { createContext as createContext4 } from "react";
 var SpatialDebugNameContext = createContext4("");
 
+// src/XRApp.ts
+var defaultSceneConfig = {
+  defaultSize: {
+    width: 900,
+    height: 700
+  },
+  resizability: "automatic"
+};
+var CONTEXT_WINDOW_URL = "webspatial://createWindowContext";
+var originalOpen = window.open;
+var XRApp = class _XRApp {
+  static instance;
+  static getInstance() {
+    if (!_XRApp.instance) {
+      _XRApp.instance = new _XRApp();
+    }
+    return _XRApp.instance;
+  }
+  handleATag(event) {
+    const targetElement = event.target;
+    if (targetElement.tagName === "A") {
+      const link = targetElement;
+      const target = link.target;
+      const url = link.href;
+      if (target && target !== "_self") {
+        event.preventDefault();
+        window.open(url, target);
+      } else {
+        window.location.href = url;
+      }
+    }
+  }
+  init() {
+    ;
+    window.open = this.open;
+    document.addEventListener("click", this.handleATag);
+  }
+  deinit() {
+    ;
+    window.open = originalOpen;
+    document.removeEventListener("click", this.handleATag);
+  }
+  configMap = {};
+  // name=>config
+  getConfig(name) {
+    if (name === void 0 || !this.configMap[name]) return void 0;
+    return this.configMap[name];
+  }
+  async show(window2, cfg) {
+    try {
+      let session = getSession();
+      await session._createScene(
+        "Plain",
+        // only support Plain for now
+        {
+          sceneData: {
+            method: "showRoot",
+            sceneConfig: cfg,
+            // url: url,
+            window: window2
+          }
+        }
+      );
+    } catch (error) {
+      console.error(error);
+    }
+  }
+  open = (url, target, features) => {
+    const newWindow = originalOpen(url, target, features);
+    if (url === CONTEXT_WINDOW_URL) return newWindow;
+    if (target === "_self" || target === "_parent" || target === "_top") {
+      return newWindow;
+    }
+    let cnt = 2;
+    let timer = setInterval(async () => {
+      cnt -= 1;
+      if (cnt < 0) {
+        clearInterval(timer);
+        return;
+      }
+      if (newWindow._webSpatialID) {
+        clearInterval(timer);
+        let session = getSession();
+        if (!session) {
+          console.error("no session");
+        } else {
+          const cfg = this.getConfig(target);
+          try {
+            await session._createScene(
+              "Plain",
+              // only support Plain for now
+              {
+                sceneData: {
+                  method: "createRoot",
+                  sceneConfig: cfg,
+                  url,
+                  window: newWindow
+                  // windowID: (newWindow as any)._webSpatialID,
+                  // windowContainerID: (newWindow as any)._webSpatialGroupID,
+                }
+              }
+            );
+            if (typeof target === "string" && this.configMap[target]) {
+              delete this.configMap[target];
+            }
+          } catch (error) {
+            console.error(error);
+          }
+        }
+      }
+    }, 0);
+    return newWindow;
+  };
+  initScene(name, callback) {
+    this.configMap[name] = callback({ ...defaultSceneConfig });
+  }
+};
+function initScene(name, callback) {
+  return XRApp.getInstance().initScene(name, callback);
+}
+
 // src/spatial-react-components/SpatialReactComponent/PortalInstance.tsx
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 function renderJSXPortalInstance(inProps, elWidth, elHeight, inheritedPortalStyle, className) {
@@ -744,9 +865,7 @@ function handleOpenWindowDocumentClick(openedWindow) {
     let found = false;
     while (!found) {
       if (element && element.tagName == "A") {
-        if (!element.onclick) {
-          window.location.href = element.href;
-        }
+        XRApp.getInstance().handleATag(e);
         return false;
       }
       if (element && element.parentElement) {
@@ -792,6 +911,7 @@ async function syncParentHeadToChild(childWindow, debugName) {
   if (debugName) {
     childWindow.document.title = debugName;
   }
+  childWindow.document.documentElement.className = document.documentElement.className;
   return Promise.all(styleLoadedPromises);
 }
 async function syncHeaderStyle(openedWindow, debugName) {
@@ -1062,10 +1182,12 @@ function PortalInstance(inProps) {
       "div",
       {
         className,
+        "data-subportal-spatialid": spatialId,
         style: {
           position: "relative",
           width: `${domRect.width}px`,
-          height: `${domRect.height}px`
+          height: `${domRect.height}px`,
+          visibility: "hidden"
         }
       }
     ),
@@ -2027,7 +2149,8 @@ import {
   Children,
   useMemo as useMemo8,
   useRef as useRef12,
-  useEffect as useEffect16
+  useEffect as useEffect16,
+  useState as useState6
 } from "react";
 
 // src/spatial-react-components/Model3D/Model3D.tsx
@@ -2037,6 +2160,15 @@ import { forwardRef as forwardRef7, useContext as useContext8, useMemo as useMem
 import { useRef as useRef8, useEffect as useEffect9 } from "react";
 function useDetectLayoutDomUpdated(onDomUpdated) {
   const ref = useRef8(null);
+  useEffect9(() => {
+    const handleResize = () => {
+      onDomUpdated();
+    };
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
   useEffect9(() => {
     if (!ref.current) {
       console.warn("Ref is not attached to the DOM");
@@ -2209,8 +2341,8 @@ var Model3DNative = class {
     if (!this.entity || !this.spatialModel3DComponent) {
       return;
     }
-    const targetPosX = rect.x + (rect.width - rect.x) / 2;
-    const targetPosY = rect.y + (rect.height - rect.y) / 2 + window.scrollY;
+    const targetPosX = rect.x + rect.width / 2;
+    const targetPosY = rect.y + rect.height / 2 + window.scrollY;
     const { position, rotation, scale } = spatialTransform;
     const entity = this.entity;
     entity.transform.position.x = targetPosX + position.x;
@@ -3082,8 +3214,7 @@ var CSSModel3D = forwardRef8(CSSModel3DBase);
 CSSModel3D.displayName = "CSSModel3D";
 
 // src/spatial-react-components/Model/index.tsx
-import "@google/model-viewer";
-import { jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
 function renderInModel3D(inProps, ref, modelUrl, placeHolder) {
   const { poster, ...props } = inProps;
   return /* @__PURE__ */ jsxs7(CSSModel3D, { modelUrl, ...props, ref, children: [
@@ -3130,7 +3261,25 @@ function ModelBase(inProps, ref) {
   if (isWebEnv) {
     const myModelViewer = useRef12(null);
     const { className, style = {}, ...props2 } = inProps;
+    let [modelViewerExists, setModelViewerExists] = useState6(false);
     useEffect16(() => {
+      customElements.whenDefined("model-viewer").then(function() {
+        setModelViewerExists(true);
+      });
+    }, []);
+    useEffect16(() => {
+      if (!modelViewerExists) {
+        return;
+      }
+      myModelViewer.current.addEventListener("error", (event) => {
+        if (event.detail.type == "loadfailure") {
+          if (props2.onLoad) {
+            props2.onLoad({
+              target: { ready: false, currentSrc: gltfSourceURL }
+            });
+          }
+        }
+      });
       myModelViewer.current.addEventListener("load", (event) => {
         if (props2.onLoad) {
           props2.onLoad({
@@ -3168,7 +3317,7 @@ function ModelBase(inProps, ref) {
           });
         }
       });
-    }, []);
+    }, [modelViewerExists]);
     useEffect16(() => {
       if (props2.contentMode !== void 0 && props2.contentMode !== "fit") {
         console.warn(
@@ -3186,7 +3335,7 @@ function ModelBase(inProps, ref) {
         );
       }
     }, [props2.contentMode, props2.resizable, props2.aspectRatio]);
-    return /* @__PURE__ */ jsx14("div", { ref, className, style, children: /* @__PURE__ */ jsx14(
+    return /* @__PURE__ */ jsx14("div", { ref, className, style, children: modelViewerExists ? /* @__PURE__ */ jsx14(
       "model-viewer",
       {
         ref: myModelViewer,
@@ -3199,132 +3348,13 @@ function ModelBase(inProps, ref) {
         "touch-action": "pan-y",
         poster: props2.poster
       }
-    ) });
+    ) : /* @__PURE__ */ jsx14(Fragment5, {}) });
   } else {
     return renderInModel3D(props, ref, usdzSourceURL, placeHolder);
   }
 }
 var Model = forwardRef9(ModelBase);
 Model.displayName = "Model";
-
-// src/XRApp.ts
-var defaultSceneConfig = {
-  defaultSize: {
-    width: 900,
-    height: 700
-  },
-  resizability: "automatic"
-};
-var CONTEXT_WINDOW_URL = "webspatial://createWindowContext";
-var originalOpen = window.open;
-var XRApp = class _XRApp {
-  static instance;
-  static getInstance() {
-    if (!_XRApp.instance) {
-      _XRApp.instance = new _XRApp();
-    }
-    return _XRApp.instance;
-  }
-  handleATag(event) {
-    const targetElement = event.target;
-    if (targetElement.tagName === "A") {
-      const link = targetElement;
-      const target = link.target;
-      const url = link.href;
-      if (target && target !== "_self") {
-        event.preventDefault();
-        window.open(url, target);
-      }
-    }
-  }
-  init() {
-    ;
-    window.open = this.open;
-    document.addEventListener("click", this.handleATag);
-  }
-  deinit() {
-    ;
-    window.open = originalOpen;
-    document.removeEventListener("click", this.handleATag);
-  }
-  configMap = {};
-  // name=>config
-  getConfig(name) {
-    if (name === void 0 || !this.configMap[name]) return void 0;
-    return this.configMap[name];
-  }
-  async show(window2, cfg) {
-    try {
-      let session = getSession();
-      await session._createScene(
-        "Plain",
-        // only support Plain for now
-        {
-          sceneData: {
-            method: "showRoot",
-            sceneConfig: cfg,
-            // url: url,
-            window: window2
-          }
-        }
-      );
-    } catch (error) {
-      console.error(error);
-    }
-  }
-  open = (url, target, features) => {
-    const newWindow = originalOpen(url, target, features);
-    if (url === CONTEXT_WINDOW_URL) return newWindow;
-    if (target === "_self" || target === "_parent" || target === "_top") {
-      return newWindow;
-    }
-    let cnt = 2;
-    let timer = setInterval(async () => {
-      cnt -= 1;
-      if (cnt < 0) {
-        clearInterval(timer);
-        return;
-      }
-      if (newWindow._webSpatialID) {
-        clearInterval(timer);
-        let session = getSession();
-        if (!session) {
-          console.error("no session");
-        } else {
-          const cfg = this.getConfig(target);
-          try {
-            await session._createScene(
-              "Plain",
-              // only support Plain for now
-              {
-                sceneData: {
-                  method: "createRoot",
-                  sceneConfig: cfg,
-                  url,
-                  window: newWindow
-                  // windowID: (newWindow as any)._webSpatialID,
-                  // windowContainerID: (newWindow as any)._webSpatialGroupID,
-                }
-              }
-            );
-            if (typeof target === "string" && this.configMap[target]) {
-              delete this.configMap[target];
-            }
-          } catch (error) {
-            console.error(error);
-          }
-        }
-      }
-    }, 0);
-    return newWindow;
-  };
-  initScene(name, callback) {
-    this.configMap[name] = callback({ ...defaultSceneConfig });
-  }
-};
-function initScene(name, callback) {
-  return XRApp.getInstance().initScene(name, callback);
-}
 export {
   CSSSpatialDiv,
   CSSSpatialPrimitive,