@webspatial/react-sdk 0.1.10 → 0.1.13

package/dist/default/index.d.ts

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import * as React$1 from 'react';
 import React__default, { ReactNode, CSSProperties, ElementType, ForwardedRef } from 'react';
-import { BackgroundMaterialType, CornerRadius, SpatialEntity, Vec3, SpatialSession } from '@webspatial/core-sdk';
+import { BackgroundMaterialType, CornerRadius, SpatialEntity, Vec3, SpatialSession, WindowContainerOptions as WindowContainerOptions$1 } from '@webspatial/core-sdk';
 import { ModelViewerElement } from '@google/model-viewer';
 import { WindowContainerOptions } from '@webspatial/core-sdk/';
 
@@ -40,7 +40,7 @@ interface SpatialReactComponentProps {
 }
 type SpatialReactComponentRef = ForwardedRef<HTMLDivElement>;
 
-declare const SpatialReactComponent: React.ForwardRefExoticComponent<SpatialReactComponentProps & React.RefAttributes<HTMLDivElement>>;
+declare const SpatialReactComponent: React$1.ForwardRefExoticComponent<SpatialReactComponentProps & React$1.RefAttributes<HTMLDivElement>>;
 
 declare function withSpatial(Component: React__default.ElementType): any;
 declare const SpatialPrimitive: Record<string, typeof SpatialReactComponent>;
@@ -51,7 +51,7 @@ declare function withSpatialMonitor(El: React__default.ElementType): any;
 type SpatialMonitorProps = {
     El?: ElementType;
 };
-declare const SpatialMonitor: React.ForwardRefExoticComponent<SpatialMonitorProps & React.RefAttributes<HTMLElement>>;
+declare const SpatialMonitor: React$1.ForwardRefExoticComponent<SpatialMonitorProps & React$1.RefAttributes<HTMLElement>>;
 
 /**
  * External-developers can call this function to sync the standardInstance layout to PortalInstance.
@@ -68,7 +68,7 @@ declare function parseCornerRadius(computedStyle: CSSStyleDeclaration): {
     bottomTrailing: number;
 };
 
-declare const CSSSpatialComponent: React.ForwardRefExoticComponent<SpatialReactComponentProps & React.RefAttributes<HTMLDivElement>>;
+declare const CSSSpatialComponent: React$1.ForwardRefExoticComponent<SpatialReactComponentProps & React$1.RefAttributes<HTMLDivElement>>;
 
 declare function withCSSSpatial(Component: React__default.ElementType): any;
 declare const CSSSpatialPrimitive: Record<string, typeof CSSSpatialComponent>;
@@ -86,6 +86,11 @@ interface SpatialViewRef extends HTMLDivElement {
  */
 declare const SpatialView: React__default.ForwardRefExoticComponent<SpatialViewProps & React__default.RefAttributes<SpatialViewRef>>;
 
+type PartialSpatialTransformType = {
+    position?: Partial<vecType>;
+    rotation?: Partial<quatType>;
+    scale?: Partial<vecType>;
+};
 interface ModelEvent {
     target: ModelElement;
 }
@@ -94,10 +99,34 @@ interface ModelDragEvent extends ModelEvent {
     translation3D: Vec3;
     startLocation3D: Vec3;
 }
+interface Model3DProps {
+    spatialTransform?: PartialSpatialTransformType;
+    modelUrl: string;
+    visible: boolean;
+    contentMode?: 'fill' | 'fit';
+    resizable?: boolean;
+    aspectRatio?: number;
+    className?: string;
+    style?: CSSProperties | undefined;
+    children?: React.ReactNode;
+    onLoad?: (event: ModelEvent) => void;
+    onDragStart?: (dragEvent: ModelDragEvent) => void;
+    onDrag?: (dragEvent: ModelDragEvent) => void;
+    onDragEnd?: (dragEvent: ModelDragEvent) => void;
+    onTap?: (event: ModelEvent) => void;
+    onDoubleTap?: (event: ModelEvent) => void;
+    onLongPress?: (event: ModelEvent) => void;
+}
 interface ModelElement extends HTMLDivElement {
     ready: boolean;
     currentSrc: string;
 }
+type ModelElementRef = ForwardedRef<ModelElement>;
+type CSSModel3DProps = Omit<Model3DProps, 'spatialTransform' | 'visible'>;
+
+declare const Model3D: React$1.ForwardRefExoticComponent<Model3DProps & React$1.RefAttributes<ModelElement>>;
+
+declare const CSSModel3D: React$1.ForwardRefExoticComponent<CSSModel3DProps & React$1.RefAttributes<ModelElement>>;
 
 declare global {
     namespace JSX {
@@ -159,6 +188,11 @@ declare class XRApp {
     open: (url?: string, target?: string, features?: string) => Window | null;
     initScene(name: string, callback: (pre: WindowContainerOptions) => WindowContainerOptions): void;
 }
-declare function initScene(name: string, callback: (pre: WindowContainerOptions) => WindowContainerOptions): void;
 
-export { CSSSpatialDiv, CSSSpatialPrimitive, Model, type ModelProps, SpatialDiv, type SpatialReactComponentProps as SpatialDivProps, type SpatialReactComponentRef as SpatialDivRef, SpatialMonitor, SpatialPrimitive, type SpatialReactComponentProps, type SpatialReactComponentRef, SpatialView, type SpatialViewRef, XRApp, defaultSceneConfig, enableDebugTool, getSession, initScene, notifyUpdateStandInstanceLayout, parseCornerRadius, withCSSSpatial, withSpatial, withSpatialMonitor };
+declare function initScene(name: string, callback: (pre: WindowContainerOptions$1) => WindowContainerOptions$1): void;
+
+declare function spatialPolyfill(): void;
+
+declare const version: string;
+
+export { CSSModel3D, CSSSpatialDiv, CSSSpatialPrimitive, Model, Model3D, type Model3DProps, type ModelDragEvent, type ModelElement, type ModelElementRef, type ModelEvent, type ModelProps, SpatialDiv, type SpatialReactComponentProps as SpatialDivProps, type SpatialReactComponentRef as SpatialDivRef, SpatialMonitor, SpatialPrimitive, type SpatialReactComponentProps, type SpatialReactComponentRef, SpatialView, type SpatialViewRef, XRApp, defaultSceneConfig, enableDebugTool, getSession, initScene, notifyUpdateStandInstanceLayout, parseCornerRadius, spatialPolyfill, version, withCSSSpatial, withSpatial, withSpatialMonitor };

package/dist/default/index.js

@@ -1,3 +1,12 @@
+
+      (function(){
+        if(typeof window === 'undefined') return;
+        if(!window.__webspatialsdk__) window.__webspatialsdk__ = {}
+        window.__webspatialsdk__['react-sdk-version'] = "0.1.13"
+        window.__webspatialsdk__['XR_ENV'] = "avp"
+    })()
+      
+
 // src/spatial-react-components/SpatialPrimitive.tsx
 import { forwardRef as forwardRef3 } from "react";
 
@@ -147,7 +156,6 @@ import { Spatial } from "@webspatial/core-sdk";
 var spatial = null;
 var _currentSession = null;
 function getSession() {
-  if (false) return null;
   if (!spatial) {
     spatial = new Spatial();
   }
@@ -163,7 +171,6 @@ function getSession() {
 
 // src/utils/debugTool.ts
 async function getStat() {
-  if (false) return;
   const statsInfo = await getSession()._getStats();
   return statsInfo;
 }
@@ -218,7 +225,6 @@ async function inspectRootWindowContainer(simple) {
   return rootWindowContainerInfo;
 }
 function enableDebugTool() {
-  if (false) return;
   const session = getSession();
   Object.assign(window, {
     session,
@@ -477,7 +483,6 @@ var SpatialWindowManager = class {
     this.entity?._setName(debugName);
   }
   async initInternal(url) {
-    if (false) return;
     this.entity = await getSession().createEntity();
     this.webview = await getSession().createWindowComponent();
     await this.webview.loadURL(url);
@@ -490,7 +495,6 @@ var SpatialWindowManager = class {
     await this.entity.setParent(ent);
   }
   async initInternalFromWindow() {
-    if (false) return;
     var w = await getSession().createWindowContext();
     this.window = w;
     this.entity = await getSession().createEntity();
@@ -664,7 +668,8 @@ function getInheritedStyleProps(computedStyle) {
     // position also need to be synced
     "position",
     "width",
-    "height"
+    "height",
+    "display"
   ];
   var props = {};
   for (var cssName of propNames) {
@@ -756,8 +761,6 @@ var XRApp = class _XRApp {
       if (target && target !== "_self") {
         event.preventDefault();
         window.open(url, target);
-      } else {
-        window.location.href = url;
       }
     }
   }
@@ -846,9 +849,6 @@ var XRApp = class _XRApp {
     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";
@@ -865,8 +865,7 @@ function renderJSXPortalInstance(inProps, inheritedPortalStyle, className) {
     marginTop: "0px",
     marginBottom: "0px",
     borderRadius: "0px",
-    overflow: "",
-    display: "block"
+    overflow: ""
   };
   const style = {
     ...inStyle,
@@ -1322,8 +1321,8 @@ function SpatialReactComponentRefactor(inProps, ref) {
 }
 function renderContentInLayer(inProps, ref) {
   const isInStandardInstance = useContext4(SpatialIsStandardInstanceContext);
-  const isWebSpatialEnv = getSession() !== null;
-  if (isInStandardInstance || !isWebSpatialEnv) {
+  const isWebSpatialEnv2 = getSession() !== null;
+  if (isInStandardInstance || !isWebSpatialEnv2) {
     return renderWebReactComponent(inProps, ref);
   } else {
     const parentSpatialReactContextObject = useContext4(SpatialReactContext);
@@ -2238,7 +2237,6 @@ var SpatialViewEl = forwardRef8(
       return /* @__PURE__ */ jsx9("div", { ref: divRef, ...props, children: "WebSpatial is not supported in this browser" });
     }
     useEffect8(() => {
-      if (false) return;
       activePromise.current = runAsync(async () => {
         if (activePromise.current) {
           await activePromise.current;
@@ -2251,7 +2249,6 @@ var SpatialViewEl = forwardRef8(
         }
       });
       return () => {
-        if (false) return;
         runAsync(async () => {
           await activePromise.current;
           spatialEntity.current?.destroy();
@@ -2380,7 +2377,6 @@ var Model3DNative = class {
     return this.initPromise;
   }
   async initInternal(modelUrl, onSuccess, onFailure) {
-    if (false) return;
     var session = getSession();
     if (!session) {
       return;
@@ -3582,6 +3578,198 @@ function ModelBase(inProps, ref) {
 }
 var Model = forwardRef11(ModelBase);
 Model.displayName = "Model";
+
+// src/initScene.ts
+function initScene(name, callback) {
+  return XRApp.getInstance().initScene(name, callback);
+}
+
+// src/polyfill/injectSceneHook.ts
+async function injectSceneHook() {
+  if (!window.opener) return;
+  if (window._SceneHookOff) return;
+  await getSession()?.setLoading("show");
+  function onContentLoaded(callback) {
+    if (document.readyState === "interactive" || document.readyState === "complete") {
+      callback();
+    } else {
+      document.addEventListener("DOMContentLoaded", callback);
+    }
+  }
+  onContentLoaded(async () => {
+    let cfg = defaultSceneConfig;
+    if (typeof window.xrCurrentSceneDefaults === "function") {
+      try {
+        cfg = await window.xrCurrentSceneDefaults?.();
+      } catch (error) {
+        console.error(error);
+      }
+    }
+    await new Promise((resolve, reject) => {
+      setTimeout(() => {
+        resolve(null);
+      }, 1e3);
+    });
+    await getSession()?.setLoading("hide");
+    await XRApp.getInstance().show(window, cfg);
+  });
+}
+
+// src/polyfill/spatialPolyfill.ts
+var isWebSpatialEnv = getSession() !== null;
+var SpatialGlobalCustomVars = {
+  backgroundMaterial: "--xr-background-material"
+};
+var htmlBackgroundMaterial = "";
+function setCurrentWindowStyle(backgroundMaterial) {
+  if (backgroundMaterial !== htmlBackgroundMaterial) {
+    const session = getSession();
+    session.getCurrentWindowComponent().setStyle({
+      material: { type: backgroundMaterial }
+    });
+    htmlBackgroundMaterial = backgroundMaterial;
+  }
+}
+function checkHtmlBackgroundMaterial() {
+  const computedStyle = getComputedStyle(document.documentElement);
+  const backgroundMaterial = computedStyle.getPropertyValue(
+    SpatialGlobalCustomVars.backgroundMaterial
+  );
+  setCurrentWindowStyle(backgroundMaterial || "none");
+}
+var htmlCornerRadius = {
+  topLeading: 0,
+  bottomLeading: 0,
+  topTrailing: 0,
+  bottomTrailing: 0
+};
+function checkCornerRadius() {
+  const computedStyle = getComputedStyle(document.documentElement);
+  const cornerRadius = parseCornerRadius(computedStyle);
+  setCornerRadius(cornerRadius);
+}
+function setCornerRadius(cornerRadius) {
+  if (htmlCornerRadius.topLeading !== cornerRadius.topLeading || htmlCornerRadius.bottomLeading !== cornerRadius.bottomLeading || htmlCornerRadius.topTrailing !== cornerRadius.topTrailing || htmlCornerRadius.bottomTrailing !== cornerRadius.bottomTrailing) {
+    const session = getSession();
+    if (!session) return;
+    session.getCurrentWindowComponent().setStyle({
+      cornerRadius
+    });
+    htmlCornerRadius.topLeading = cornerRadius.topLeading;
+    htmlCornerRadius.bottomLeading = cornerRadius.bottomLeading;
+    htmlCornerRadius.topTrailing = cornerRadius.topTrailing;
+    htmlCornerRadius.bottomTrailing = cornerRadius.bottomTrailing;
+  }
+}
+function setOpacity(opacity) {
+  const session = getSession();
+  if (!session) return;
+  session.getCurrentWindowComponent().setOpacity(opacity);
+}
+function checkOpacity() {
+  const computedStyle = getComputedStyle(document.documentElement);
+  const opacity = parseFloat(computedStyle.getPropertyValue("opacity"));
+  setOpacity(opacity);
+}
+async function setHtmlVisible(visible) {
+  const session = getSession();
+  if (!session) return;
+  const wc = session.getCurrentWindowComponent();
+  const ent = await wc.getEntity();
+  ent?.setVisible(visible);
+}
+function checkHtmlVisible() {
+  const computedStyle = getComputedStyle(document.documentElement);
+  const visibility = computedStyle.getPropertyValue("visibility") !== "hidden";
+  const widthGtZero = parseFloat(computedStyle.getPropertyValue("width")) > 0;
+  setHtmlVisible(visibility && widthGtZero);
+}
+function hijackDocumentElementStyle() {
+  const rawDocumentStyle = document.documentElement.style;
+  const styleProxy = new Proxy(rawDocumentStyle, {
+    set: function(target, key, value) {
+      const ret = Reflect.set(target, key, value);
+      if (key === SpatialGlobalCustomVars.backgroundMaterial) {
+        setCurrentWindowStyle(value);
+      }
+      if (key === "border-radius" || key === "borderRadius" || key === "border-top-left-radius" || key === "borderTopLeftRadius" || key === "border-top-right-radius" || key === "borderTopRightRadius" || key === "border-bottom-left-radius" || key === "borderBottomLeftRadius" || key === "border-bottom-right-radius" || key === "borderBottomRightRadius") {
+        checkCornerRadius();
+      }
+      if (key === "opacity") {
+        checkOpacity();
+      }
+      if (key === "visibility" || key === "display") {
+        checkHtmlVisible();
+      }
+      return ret;
+    },
+    get: function(target, prop) {
+      if (typeof target[prop] === "function") {
+        return function(...args) {
+          if (prop === "setProperty") {
+            const [property, value] = args;
+            if (property === SpatialGlobalCustomVars.backgroundMaterial) {
+              setCurrentWindowStyle(value);
+            }
+          } else if (prop === "removeProperty") {
+            const [property] = args;
+            if (property === SpatialGlobalCustomVars.backgroundMaterial) {
+              setCurrentWindowStyle("none");
+            }
+          }
+          return target[prop](
+            ...args
+          );
+        };
+      }
+      return Reflect.get(target, prop);
+    }
+  });
+  Object.defineProperty(document.documentElement, "style", {
+    get: function() {
+      return styleProxy;
+    }
+  });
+}
+function monitorExternalStyleChange() {
+  const headObserver = new MutationObserver(function(mutationsList) {
+    checkCSSProperties();
+  });
+  headObserver.observe(document.head, { childList: true, subtree: true });
+}
+function checkCSSProperties() {
+  checkHtmlBackgroundMaterial();
+  checkCornerRadius();
+  checkOpacity();
+  checkHtmlVisible();
+  window.addEventListener("resize", checkHtmlVisible);
+}
+function hijackGetComputedStyle() {
+  const rawFn = window.getComputedStyle.bind(window);
+  window.getComputedStyle = (element, pseudoElt) => {
+    if (element.__isSpatialDiv) {
+      return element.__getComputedStyle(rawFn, pseudoElt);
+    }
+    return rawFn(element, pseudoElt);
+  };
+}
+function hijackWindowOpen() {
+  XRApp.getInstance().init();
+}
+function spatialPolyfill() {
+  if (!isWebSpatialEnv) {
+    return;
+  }
+  injectSceneHook();
+  hijackWindowOpen();
+  checkCSSProperties();
+  hijackGetComputedStyle();
+  hijackDocumentElementStyle();
+  monitorExternalStyleChange();
+}
+
+// src/index.ts
+var version = "0.1.13";
 export {
   CSSSpatialDiv,
   CSSSpatialPrimitive,
@@ -3597,6 +3785,8 @@ export {
   initScene,
   notifyUpdateStandInstanceLayout,
   parseCornerRadius,
+  spatialPolyfill,
+  version,
   withCSSSpatial,
   withSpatial,
   withSpatialMonitor