@webspatial/react-sdk 0.0.14 → 0.0.16-alpha.0

package/dist/default/index.js

@@ -194,7 +194,8 @@ function simplifyEntityTree(rootTree) {
       cornerRadius: node.components[0].cornerRadius,
       backgroundMaterial: node.components[0].backgroundMaterial,
       isOpaque: node.components[0].isOpaque,
-      isScrollEnabled: node.components[0].isScrollEnabled
+      isScrollEnabled: node.components[0].isScrollEnabled,
+      scrollWithParent: node.components[0].scrollWithParent
     };
     nodeMap[node.id] = newNode;
     if (!parent) {
@@ -531,9 +532,9 @@ var SpatialWindowManager = class {
     this.initPromise = this.initInternalFromWindow();
     await this.initPromise;
   }
-  async resize(rect, offset, rotation = { x: 0, y: 0, z: 0, w: 1 }, scale = { x: 1, y: 1, z: 1 }, rotationOrigin = { x: 0, y: 0, z: 0 }) {
+  async resize(rect, offset, rotation = { x: 0, y: 0, z: 0, w: 1 }, scale = { x: 1, y: 1, z: 1 }, rotationOrigin = { x: 0, y: 0, z: 0 }, parrentOffset = 0) {
     let targetPosX = rect.x + rect.width / 2;
-    let targetPosY = rect.y + rect.height / 2 + window.scrollY;
+    let targetPosY = rect.y + rect.height / 2 + parrentOffset;
     if (!this.webview) {
       return;
     }
@@ -661,7 +662,9 @@ function getInheritedStyleProps(computedStyle) {
     // background also need to be synced
     "background",
     // position also need to be synced
-    "position"
+    "position",
+    "width",
+    "height"
   ];
   var props = {};
   for (var cssName of propNames) {
@@ -849,7 +852,7 @@ function 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) {
+function renderJSXPortalInstance(inProps, inheritedPortalStyle, className) {
   const { El, style: inStyle = {}, className: _, ...props } = inProps;
   const extraStyle = {
     visibility: "visible",
@@ -864,15 +867,10 @@ function renderJSXPortalInstance(inProps, elWidth, elHeight, inheritedPortalStyl
     borderRadius: "0px",
     overflow: ""
   };
-  const elWHStyle = {
-    width: `${elWidth}px`,
-    height: `${elHeight}px`
-  };
   const style = {
     ...inStyle,
     ...inheritedPortalStyle,
-    ...extraStyle,
-    ...elWHStyle
+    ...extraStyle
   };
   return /* @__PURE__ */ jsx2(El, { style, className, ...props });
 }
@@ -949,8 +947,9 @@ function syncDefaultSpatialStyle(openedWindow, debugName) {
   styleElement.type = "text/css";
   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";
 }
-function useSyncSpatialProps(spatialWindowManager, props, domRect, anchor, cornerRadiusFromStyle, opacity, stylePosition) {
+function useSyncSpatialProps(spatialWindowManager, props, domRect, anchor, cornerRadiusFromStyle, opacity, stylePosition, isSubPortal) {
   let { allowScroll, scrollWithParent, style, spatialStyle = {} } = props;
   let {
     position = { x: 0, y: 0, z: 1 },
@@ -1043,7 +1042,8 @@ function useSyncSpatialProps(spatialWindowManager, props, domRect, anchor, corne
           position,
           rotation,
           scale,
-          anchor
+          anchor,
+          isSubPortal ? 0 : window.scrollY
         );
         spatialWindowManager?.setZIndex(zIndex);
       })();
@@ -1207,12 +1207,11 @@ function PortalInstance(inProps) {
     anchor,
     cornerRadius,
     opacity,
-    inheritedPortalStyle.position
+    inheritedPortalStyle.position,
+    isSubPortal
   );
   const JSXPortalInstance = renderJSXPortalInstance(
     props,
-    domRect.width,
-    domRect.height,
     inheritedPortalStyle,
     className
   );
@@ -2426,7 +2425,7 @@ var Model3DNative = class {
       return;
     }
     const targetPosX = rect.x + rect.width / 2;
-    const targetPosY = rect.y + rect.height / 2 + window.scrollY;
+    const targetPosY = rect.y + rect.height / 2;
     const { position, rotation, scale } = spatialTransform;
     const entity = this.entity;
     entity.transform.position.x = targetPosX + position.x;
@@ -3348,6 +3347,16 @@ function ModelBase(inProps, ref) {
   );
   const isWebEnv = !getSession();
   if (isWebEnv) {
+    useEffect16(() => {
+      if (gltfSourceURL == "") {
+        console.warn("Unable to display model, no gltf/glb source provided");
+        if (props2.onLoad) {
+          props2.onLoad({
+            target: { ready: false, currentSrc: gltfSourceURL }
+          });
+        }
+      }
+    }, []);
     const myModelViewer = useRef12(null);
     const { className, style = {}, ...props2 } = inProps;
     const isDragging = useRef12(false);