@webspatial/react-sdk 0.0.5 → 0.0.8

package/dist/web/index.js

@@ -198,7 +198,7 @@ var import_core_sdk = require("@webspatial/core-sdk");
 var spatial = null;
 var _currentSession = null;
 function getSession() {
-  if ("true") return null;
+  if (true) return null;
   if (!spatial) {
     spatial = new import_core_sdk.Spatial();
   }
@@ -214,7 +214,7 @@ function getSession() {
 
 // src/utils/debugTool.ts
 async function getStat() {
-  if ("true") return;
+  if (true) return;
   const statsInfo = await getSession()._getStats();
   return statsInfo;
 }
@@ -267,7 +267,7 @@ async function inspectRootWindowContainer(simple) {
   return rootWindowContainerInfo;
 }
 function enableDebugTool() {
-  if ("true") return;
+  if (true) return;
   const session = getSession();
   Object.assign(window, {
     session,
@@ -507,7 +507,7 @@ var SpatialWindowManager = class {
     this.entity?._setName(debugName);
   }
   async initInternal(url) {
-    if ("true") return;
+    if (true) return;
     this.entity = await getSession().createEntity();
     this.webview = await getSession().createWindowComponent();
     await this.webview.loadURL(url);
@@ -520,7 +520,7 @@ var SpatialWindowManager = class {
     await this.entity.setParent(ent);
   }
   async initInternalFromWindow(parentSpatialWindowManager) {
-    if ("true") return;
+    if (true) return;
     var w = await getSession().createWindowContext();
     this.window = w;
     this.entity = await getSession().createEntity();
@@ -742,6 +742,127 @@ function parseCornerRadius(computedStyle) {
 var import_react7 = require("react");
 var SpatialDebugNameContext = (0, import_react7.createContext)("");
 
+// 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
 var import_jsx_runtime2 = require("react/jsx-runtime");
 function renderJSXPortalInstance(inProps, elWidth, elHeight, inheritedPortalStyle, className) {
@@ -782,9 +903,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) {
@@ -830,6 +949,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) {
@@ -1100,10 +1220,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"
         }
       }
     ),
@@ -1905,7 +2027,7 @@ function renderInPortalInstance(cssSpatialRootContextObject, cssSpatialID, inPro
 }
 function CSSSpatialComponentBase(inProps, ref) {
   const { [CSSSpatialID]: cssSpatialID, ...props } = inProps;
-  const isWebEnv = "true";
+  const isWebEnv = true;
   if (isWebEnv) {
     return renderInWebEnv(props, ref);
   } else {
@@ -2019,7 +2141,7 @@ var SpatialViewEl = (0, import_react21.forwardRef)(
       return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { ref: divRef, ...props, children: "WebSpatial is not supported in this browser" });
     }
     (0, import_react21.useEffect)(() => {
-      if ("true") return;
+      if (true) return;
       activePromise.current = runAsync(async () => {
         if (activePromise.current) {
           await activePromise.current;
@@ -2032,7 +2154,7 @@ var SpatialViewEl = (0, import_react21.forwardRef)(
         }
       });
       return () => {
-        if ("true") return;
+        if (true) return;
         runAsync(async () => {
           await activePromise.current;
           spatialEntity.current?.destroy();
@@ -2058,6 +2180,15 @@ var import_react27 = require("react");
 var import_react22 = require("react");
 function useDetectLayoutDomUpdated(onDomUpdated) {
   const ref = (0, import_react22.useRef)(null);
+  (0, import_react22.useEffect)(() => {
+    const handleResize = () => {
+      onDomUpdated();
+    };
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
   (0, import_react22.useEffect)(() => {
     if (!ref.current) {
       console.warn("Ref is not attached to the DOM");
@@ -2145,7 +2276,7 @@ var Model3DNative = class {
     return this.initPromise;
   }
   async initInternal(modelUrl, onSuccess, onFailure) {
-    if ("true") return;
+    if (true) return;
     var session = getSession();
     if (!session) {
       return;
@@ -2230,8 +2361,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;
@@ -3098,7 +3229,6 @@ var CSSModel3D = (0, import_react30.forwardRef)(CSSModel3DBase);
 CSSModel3D.displayName = "CSSModel3D";
 
 // src/spatial-react-components/Model/index.tsx
-var import_model_viewer = require("@google/model-viewer");
 var import_jsx_runtime15 = require("react/jsx-runtime");
 function renderInModel3D(inProps, ref, modelUrl, placeHolder) {
   const { poster, ...props } = inProps;
@@ -3146,7 +3276,16 @@ function ModelBase(inProps, ref) {
   if (isWebEnv) {
     const myModelViewer = (0, import_react31.useRef)(null);
     const { className, style = {}, ...props2 } = inProps;
+    let [modelViewerExists, setModelViewerExists] = (0, import_react31.useState)(false);
+    (0, import_react31.useEffect)(() => {
+      customElements.whenDefined("model-viewer").then(function() {
+        setModelViewerExists(true);
+      });
+    }, []);
     (0, import_react31.useEffect)(() => {
+      if (!modelViewerExists) {
+        return;
+      }
       myModelViewer.current.addEventListener("load", (event) => {
         if (props2.onLoad) {
           props2.onLoad({
@@ -3184,7 +3323,7 @@ function ModelBase(inProps, ref) {
           });
         }
       });
-    }, []);
+    }, [modelViewerExists]);
     (0, import_react31.useEffect)(() => {
       if (props2.contentMode !== void 0 && props2.contentMode !== "fit") {
         console.warn(
@@ -3202,7 +3341,7 @@ function ModelBase(inProps, ref) {
         );
       }
     }, [props2.contentMode, props2.resizable, props2.aspectRatio]);
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { ref, className, style, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { ref, className, style, children: modelViewerExists ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       "model-viewer",
       {
         ref: myModelViewer,
@@ -3215,132 +3354,13 @@ function ModelBase(inProps, ref) {
         "touch-action": "pan-y",
         poster: props2.poster
       }
-    ) });
+    ) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, {}) });
   } else {
     return renderInModel3D(props, ref, usdzSourceURL, placeHolder);
   }
 }
 var Model = (0, import_react31.forwardRef)(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);
-}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   CSSSpatialDiv,