@webspatial/react-sdk 0.1.16 → 0.1.17

package/README.md

@@ -0,0 +1,16 @@
+<div align="left">
+  <img src="../../docs/assets/logo.png" alt="WebSpatial Logo" width="400"/>
+</div>
+<br/>
+
+# React SDK for WebSpatial
+
+The React SDK from the WebSpatial SDK makes the WebSpatial API immediately available inside React.
+
+## Documentation
+
+- [Table of Contents](../../docs/en/README.md)
+- [Introduction](../../docs/en/introduction/README.md)
+- [Quick Start](../../docs/en/quick-start/README.md)
+- [Core Concepts](../../docs/en/core-concepts/README.md)
+- [Development Guide](../../docs/en/development-guide/README.md)

package/dist/default/index.d.ts

@@ -3,6 +3,7 @@ import React__default, { ReactNode, CSSProperties, ElementType, ForwardedRef } f
 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/';
+export { WindowContainerOptions } from '@webspatial/core-sdk/';
 
 type vecType = {
     x: number;

package/dist/default/index.js

@@ -2,7 +2,7 @@
       (function(){
         if(typeof window === 'undefined') return;
         if(!window.__webspatialsdk__) window.__webspatialsdk__ = {}
-        window.__webspatialsdk__['react-sdk-version'] = "0.1.16"
+        window.__webspatialsdk__['react-sdk-version'] = "0.1.17"
         window.__webspatialsdk__['XR_ENV'] = "avp"
     })()
       
@@ -1548,15 +1548,18 @@ function parseTransform(computedStyle) {
   const idxOfMatrix = transform.indexOf(matrixFlagString);
   if (idxOfMatrix !== -1) {
     const transformDataArray = transform.substring(matrixFlagString.length, transform.length - 1).split(",").map((item) => parseFloat(item));
-    return parse2dMatrix(transformDataArray);
+    return { transformExist: true, matrix: parse2dMatrix(transformDataArray) };
   } else {
     const matrix3dFlagString = "matrix3d(";
     const idxOfMatrix3d = transform.indexOf(matrix3dFlagString);
     if (idxOfMatrix3d !== -1) {
       const transform3dDataArray = transform.substring(matrix3dFlagString.length, transform.length - 1).split(",").map((item) => parseFloat(item));
-      return parse3dMatrix(transform3dDataArray);
+      return {
+        transformExist: true,
+        matrix: parse3dMatrix(transform3dDataArray)
+      };
     } else {
-      return new Matrix4();
+      return { transformExist: false, matrix: new Matrix4() };
     }
   }
 }
@@ -1583,7 +1586,7 @@ function parseXRZIndex(computedStyle) {
 function parseSpatialStyle(node) {
   const computedStyle = getComputedStyle(node);
   const mat4ForBack = parseBack(computedStyle);
-  const mat4ForTransform = parseTransform(computedStyle);
+  const { transformExist, matrix: mat4ForTransform } = parseTransform(computedStyle);
   const resultMatrix = new Matrix4();
   resultMatrix.multiplyMatrices(mat4ForBack, mat4ForTransform);
   const position = new Vector3();
@@ -1608,7 +1611,8 @@ function parseSpatialStyle(node) {
     material: {
       type: backgroundMaterialType || "none"
     },
-    visible
+    visible,
+    transformExist
   };
 }
 function useSpatialStyle() {
@@ -1621,7 +1625,8 @@ function useSpatialStyle() {
     material: {
       type: "none"
     },
-    visible: true
+    visible: true,
+    transformExist: false
   });
   const [ready, setReady] = useState3(false);
   const checkSpatialStyleUpdate = useCallback2(() => {
@@ -2011,7 +2016,7 @@ function renderRootCSSSpatialComponent(inProps, refIn) {
   };
   const spatialDivStyle = {
     ...style,
-    transform: "none"
+    transform: spatialStyle.transformExist ? "translateZ(0)" : "none"
   };
   const El = inProps.component || "div";
   const spatialDivRef = useHijackSpatialDivRef(refIn, ref);
@@ -2085,7 +2090,7 @@ function renderInPortalInstance(cssSpatialRootContextObject, cssSpatialID, inPro
   };
   const spatialDivStyle = {
     ...style,
-    transform: "none"
+    transform: spatialStyle.transformExist ? "translateZ(0)" : "none"
   };
   const El = inProps.component || "div";
   const divRefClassName = className + " " + InjectClassName;
@@ -3250,7 +3255,7 @@ function renderCSSModel3DNotInSpatialDiv(inProps, refIn) {
   const visible = spatialStyle.visible;
   const model3DStyle = {
     ...style,
-    transform: "none"
+    transform: spatialStyle.transformExist ? "translateZ(0)" : "none"
   };
   return /* @__PURE__ */ jsxs4(Fragment3, { children: [
     ready && /* @__PURE__ */ jsx13(
@@ -3328,7 +3333,7 @@ function renderCSSModel3DPortalInstance(spatialId, inProps) {
   };
   const model3DStyle = {
     ...style,
-    transform: "none"
+    transform: spatialStyle.transformExist ? "translateZ(0)" : "none"
   };
   return /* @__PURE__ */ jsxs5(Fragment4, { children: [
     ready && /* @__PURE__ */ jsx15(
@@ -3769,7 +3774,7 @@ function spatialPolyfill() {
 }
 
 // src/index.ts
-var version = "0.1.16";
+var version = "0.1.17";
 export {
   CSSSpatialDiv,
   CSSSpatialPrimitive,