@mirage-engine/core 0.2.2 → 0.3.0

package/src/dom/Extractor.ts

@@ -7,21 +7,36 @@ import {
   SceneNode,
   Visibility,
   USER_LAYER,
-  SYSTEM_LAYER,
+  SELECT_LAYER,
   ALLOWED_FILTERS,
+  ATTR_DOM,
+  ATTR_FILTER,
+  ATTR_SELECT,
+  ATTR_TRAVEL,
+  ATTR_SHADER,
 } from "../types";
 
 import { BoxStyles, TextStyles, ShaderHooks } from "@mirage-engine/painter";
-import { FilterConfig } from "../types/config";
 
 // Helper function: getTextNodeRect, isValidTextNode, isLeafTextElement, extractTextStyles
 
-function extractTextLines(textNode: Text): { text: string; rect: { left: number; top: number; width: number; height: number } }[] {
+function extractTextLines(textNode: Text): {
+  text: string;
+  rect: { left: number; top: number; width: number; height: number };
+}[] {
   const text = textNode.textContent || "";
-  const lines: { text: string; rect: { left: number; top: number; width: number; height: number } }[] = [];
-  
+  const lines: {
+    text: string;
+    rect: { left: number; top: number; width: number; height: number };
+  }[] = [];
+
   let currentLineText = "";
-  let currentLineRect: { left: number; top: number; right: number; bottom: number } | null = null;
+  let currentLineRect: {
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+  } | null = null;
   let currentTop = -1;
 
   const processChunk = (chunkText: string, offset: number) => {
@@ -31,13 +46,16 @@ function extractTextLines(textNode: Text): { text: string; rect: { left: number;
       range.setStart(textNode, offset + i);
       range.setEnd(textNode, offset + i + 1);
       const rect = range.getBoundingClientRect();
-      
+
       if (rect.width === 0 && rect.height === 0) {
         currentLineText += char;
         continue;
       }
 
-      if (currentTop === -1 || Math.abs(rect.top - currentTop) > rect.height / 2) {
+      if (
+        currentTop === -1 ||
+        Math.abs(rect.top - currentTop) > rect.height / 2
+      ) {
         if (currentLineText && currentLineRect) {
           lines.push({
             text: currentLineText,
@@ -50,7 +68,12 @@ function extractTextLines(textNode: Text): { text: string; rect: { left: number;
           });
         }
         currentLineText = char;
-        currentLineRect = { left: rect.left, top: rect.top, right: rect.right, bottom: rect.bottom };
+        currentLineRect = {
+          left: rect.left,
+          top: rect.top,
+          right: rect.right,
+          bottom: rect.bottom,
+        };
         currentTop = rect.top;
       } else {
         currentLineText += char;
@@ -58,7 +81,10 @@ function extractTextLines(textNode: Text): { text: string; rect: { left: number;
           currentLineRect.left = Math.min(currentLineRect.left, rect.left);
           currentLineRect.top = Math.min(currentLineRect.top, rect.top);
           currentLineRect.right = Math.max(currentLineRect.right, rect.right);
-          currentLineRect.bottom = Math.max(currentLineRect.bottom, rect.bottom);
+          currentLineRect.bottom = Math.max(
+            currentLineRect.bottom,
+            rect.bottom,
+          );
         }
       }
     }
@@ -79,15 +105,19 @@ function extractTextLines(textNode: Text): { text: string; rect: { left: number;
       processChunk(token, currentOffset);
     } else {
       // Token is on a single line. Process it as a single block!
-      const rect = rects.length === 1 ? rects[0] : range.getBoundingClientRect();
-      
+      const rect =
+        rects.length === 1 ? rects[0] : range.getBoundingClientRect();
+
       if (rect.width === 0 && rect.height === 0) {
         currentLineText += token;
         currentOffset += token.length;
         continue;
       }
 
-      if (currentTop === -1 || Math.abs(rect.top - currentTop) > rect.height / 2) {
+      if (
+        currentTop === -1 ||
+        Math.abs(rect.top - currentTop) > rect.height / 2
+      ) {
         if (currentLineText && currentLineRect) {
           lines.push({
             text: currentLineText,
@@ -100,7 +130,12 @@ function extractTextLines(textNode: Text): { text: string; rect: { left: number;
           });
         }
         currentLineText = token;
-        currentLineRect = { left: rect.left, top: rect.top, right: rect.right, bottom: rect.bottom };
+        currentLineRect = {
+          left: rect.left,
+          top: rect.top,
+          right: rect.right,
+          bottom: rect.bottom,
+        };
         currentTop = rect.top;
       } else {
         currentLineText += token;
@@ -108,11 +143,14 @@ function extractTextLines(textNode: Text): { text: string; rect: { left: number;
           currentLineRect.left = Math.min(currentLineRect.left, rect.left);
           currentLineRect.top = Math.min(currentLineRect.top, rect.top);
           currentLineRect.right = Math.max(currentLineRect.right, rect.right);
-          currentLineRect.bottom = Math.max(currentLineRect.bottom, rect.bottom);
+          currentLineRect.bottom = Math.max(
+            currentLineRect.bottom,
+            rect.bottom,
+          );
         }
       }
     }
-    
+
     currentOffset += token.length;
   }
 
@@ -128,7 +166,12 @@ function extractTextLines(textNode: Text): { text: string; rect: { left: number;
     });
   }
 
-  return lines.filter(line => line.text.trim().length > 0 && line.rect.width > 0 && line.rect.height > 0);
+  return lines.filter(
+    (line) =>
+      line.text.trim().length > 0 &&
+      line.rect.width > 0 &&
+      line.rect.height > 0,
+  );
 }
 
 function extractTextStyles(computed: CSSStyleDeclaration): TextStyles {
@@ -161,7 +204,11 @@ export function extractSceneGraph(
     DIRTY_CONTENT |
     DIRTY_STRUCTURE,
   inheritedFlow: Visibility,
-  filterConfig?: FilterConfig,
+  captureLayer: number = 1,
+  inheritedZIndex: number = 0,
+  qualityFactor: number = 2,
+  inheritedNativeLayer?: number,
+  inheritedNativeStyles?: any,
 ): SceneNode | null {
   // Check text node
   if (sourceNode.nodeType === Node.TEXT_NODE) {
@@ -181,10 +228,10 @@ export function extractSceneGraph(
     if (!computed) return null;
 
     // Calculate overall bounding box of the lines
-    const minX = Math.min(...textLines.map(l => l.rect.left));
-    const minY = Math.min(...textLines.map(l => l.rect.top));
-    const maxX = Math.max(...textLines.map(l => l.rect.left + l.rect.width));
-    const maxY = Math.max(...textLines.map(l => l.rect.top + l.rect.height));
+    const minX = Math.min(...textLines.map((l) => l.rect.left));
+    const minY = Math.min(...textLines.map((l) => l.rect.top));
+    const maxX = Math.max(...textLines.map((l) => l.rect.left + l.rect.width));
+    const maxY = Math.max(...textLines.map((l) => l.rect.top + l.rect.height));
 
     // Create SceneNode for the text node
     return {
@@ -201,30 +248,62 @@ export function extractSceneGraph(
         backgroundColor: "transparent",
         backgroundImage: "",
         opacity:
-          parent && parent.dataset.mirageDom === "hide"
+          parent && parent.dataset[ATTR_DOM.KEY] === ATTR_DOM.VALUES.HIDE
             ? 1
             : parseFloat(computed.opacity),
-        zIndex: 0,
+        zIndex:
+          (isNaN(parseInt(computed.zIndex)) ? 0 : parseInt(computed.zIndex)) +
+          inheritedZIndex,
         borderRadius: "0px",
         borderColor: "transparent",
         borderWidth: "0px",
         isTraveler: false,
       },
       textContent: normalizedText,
-      textLines: textLines.map(l => ({
+      textLines: textLines.map((l) => ({
         text: l.text.trim(),
         rect: {
           x: l.rect.left + window.scrollX,
           y: l.rect.top + window.scrollY,
           width: l.rect.width,
           height: l.rect.height,
-        }
+        },
       })),
       textStyles: extractTextStyles(computed),
       dirtyMask: initialMask,
       visibility: inheritedFlow,
       isTraveler: false,
+      captureLayer,
       isFixed: computed.position === "fixed",
+      nativeLayer: inheritedNativeLayer,
+      nativeStyles: inheritedNativeStyles
+        ? {
+            backgroundColor: "transparent",
+            backgroundImage: "",
+            opacity:
+              parent && parent.dataset[ATTR_DOM.KEY] === ATTR_DOM.VALUES.HIDE
+                ? 1
+                : parseFloat(computed.opacity),
+            zIndex:
+              (isNaN(parseInt(computed.zIndex))
+                ? 0
+                : parseInt(computed.zIndex)) + inheritedZIndex,
+            borderRadius: "0px",
+            borderColor: "transparent",
+            borderWidth: "0px",
+            isTraveler: false,
+            ...extractTextStyles(computed),
+            ...inheritedNativeStyles,
+          }
+        : undefined,
+      nativeRect: inheritedNativeStyles
+        ? {
+            x: minX + window.scrollX,
+            y: minY + window.scrollY,
+            width: maxX - minX,
+            height: maxY - minY,
+          }
+        : undefined,
       children: [],
     };
   }
@@ -235,14 +314,14 @@ export function extractSceneGraph(
 
   const element = sourceNode as HTMLElement;
   // [[Filter]] data attribute based filtering
-  const filterData = element.dataset.mirageFilter;
+  const filterData = element.dataset[ATTR_FILTER.KEY];
   let visibleFlow = inheritedFlow;
   let visibleFlag = inheritedFlow;
   if (filterData) {
     const filterSet = new Set(filterData.split(/\s+/));
     // error check
     for (const token of filterSet) {
-      if (!ALLOWED_FILTERS.includes(token)) {
+      if (!ALLOWED_FILTERS.includes(token as any)) {
         throw new Error(
           `[MirageEngine] Invalid filter token: '${token}'. ` +
             `Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`,
@@ -250,58 +329,152 @@ export function extractSceneGraph(
       }
     }
 
-    if (filterSet.has("end")) return null;
+    if (filterSet.has(ATTR_FILTER.VALUES.END)) return null;
 
     // error check
-    if (filterSet.has("include-tree") && filterSet.has("exclude-tree")) {
+    if (
+      filterSet.has(ATTR_FILTER.VALUES.INCLUDE_TREE) &&
+      filterSet.has(ATTR_FILTER.VALUES.EXCLUDE_TREE)
+    ) {
       throw new Error(
         `[MirageEngine] Conflicting filters: 'include-tree' and 'exclude-tree' cannot be used together on the same element.`,
       );
     }
-    if (filterSet.has("include-self") && filterSet.has("exclude-self")) {
+    if (
+      filterSet.has(ATTR_FILTER.VALUES.INCLUDE_SELF) &&
+      filterSet.has(ATTR_FILTER.VALUES.EXCLUDE_SELF)
+    ) {
       throw new Error(
         `[MirageEngine] Conflicting filters: 'include-self' and 'exclude-self' cannot be used together on the same element.`,
       );
     }
 
-    if (filterSet.has("include-tree")) {
+    if (filterSet.has(ATTR_FILTER.VALUES.INCLUDE_TREE)) {
       visibleFlow = (visibleFlow | USER_LAYER) as Visibility;
-    } else if (filterSet.has("exclude-tree")) {
+    } else if (filterSet.has(ATTR_FILTER.VALUES.EXCLUDE_TREE)) {
       visibleFlow = (visibleFlow & ~USER_LAYER) as Visibility;
     }
 
     visibleFlag = visibleFlow;
 
-    if (filterSet.has("include-self")) {
+    if (filterSet.has(ATTR_FILTER.VALUES.INCLUDE_SELF)) {
       visibleFlag = (visibleFlag | USER_LAYER) as Visibility;
-    } else if (filterSet.has("exclude-self")) {
+    } else if (filterSet.has(ATTR_FILTER.VALUES.EXCLUDE_SELF)) {
       visibleFlag = (visibleFlag & ~USER_LAYER) as Visibility;
     }
   }
 
-  // [[filter]] class based filtering
-  // [Filter] end
-  // if (filterConfig && filterConfig.end && filterConfig.end.length > 0) {
-  //   const isEnd = filterConfig.end.some((cls) =>
-  //     element.classList.contains(cls),
-  //   );
-  //   if (isEnd) return null;
-  // }
+  // [[Select]] data attribute based selecting
+  const selectData = element.dataset[ATTR_SELECT.KEY];
+  if (selectData) {
+    const selectSet = new Set(selectData.split(/\s+/));
+    // error check
+    for (const token of selectSet) {
+      if (!ALLOWED_FILTERS.includes(token as any)) {
+        throw new Error(
+          `[MirageEngine] Invalid select token: '${token}'. ` +
+            `Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`,
+        );
+      }
+    }
 
-  visibleFlag = (visibleFlag | (inheritedFlow & SYSTEM_LAYER)) as Visibility;
+    if (selectSet.has(ATTR_SELECT.VALUES.END)) return null;
 
-  const travelData = element.dataset.mirageTravel;
+    if (
+      selectSet.has(ATTR_SELECT.VALUES.INCLUDE_TREE) &&
+      selectSet.has(ATTR_SELECT.VALUES.EXCLUDE_TREE)
+    ) {
+      throw new Error(
+        `[MirageEngine] Conflicting selects: 'include-tree' and 'exclude-tree' cannot be used together on the same element.`,
+      );
+    }
+    if (
+      selectSet.has(ATTR_SELECT.VALUES.INCLUDE_SELF) &&
+      selectSet.has(ATTR_SELECT.VALUES.EXCLUDE_SELF)
+    ) {
+      throw new Error(
+        `[MirageEngine] Conflicting selects: 'include-self' and 'exclude-self' cannot be used together on the same element.`,
+      );
+    }
+
+    if (selectSet.has(ATTR_SELECT.VALUES.INCLUDE_TREE)) {
+      visibleFlow = (visibleFlow | SELECT_LAYER) as Visibility;
+    } else if (selectSet.has(ATTR_SELECT.VALUES.EXCLUDE_TREE)) {
+      visibleFlow = (visibleFlow & ~SELECT_LAYER) as Visibility;
+    }
+
+    visibleFlag = visibleFlow;
+
+    if (selectSet.has(ATTR_SELECT.VALUES.INCLUDE_SELF)) {
+      visibleFlag = (visibleFlag | SELECT_LAYER) as Visibility;
+    } else if (selectSet.has(ATTR_SELECT.VALUES.EXCLUDE_SELF)) {
+      visibleFlag = (visibleFlag & ~SELECT_LAYER) as Visibility;
+    }
+  }
+
+  const travelData = element.dataset[ATTR_TRAVEL.KEY];
   let isTraveler = false;
+  let nativeParsedStyles: any = inheritedNativeStyles
+    ? { ...inheritedNativeStyles }
+    : {};
+  let nativeLayer: number | undefined = inheritedNativeLayer;
   if (travelData) {
-    const travelSet = new Set(travelData.split(/\s+/));
-    if (travelSet.has("traveler")) {
-      visibleFlag = (visibleFlag & ~SYSTEM_LAYER) as Visibility;
-      visibleFlow = (visibleFlow & ~SYSTEM_LAYER) as Visibility;
+    let explicitLayer = 1;
+
+    // '{' 부터 '}' 까지의 JSON 문자열 추출
+    const jsonStart = travelData.indexOf("{");
+    const jsonEnd = travelData.lastIndexOf("}");
+
+    let tokensPart = travelData;
+    if (jsonStart !== -1 && jsonEnd !== -1 && jsonEnd > jsonStart) {
+      tokensPart = travelData.substring(0, jsonStart).trim();
+      const jsonStr = travelData.substring(jsonStart, jsonEnd + 1);
+      try {
+        // 싱글 쿼트를 더블 쿼트로 변경하거나 키에 따옴표가 없는 객체를 지원하기 위해
+        // Function을 통한 안전한 객체 평가(또는 JSON.parse)를 사용
+        nativeParsedStyles = new Function("return " + jsonStr)();
+      } catch (e) {
+        console.warn(
+          `[MirageEngine] Failed to parse travel styles JSON: ${jsonStr}`,
+        );
+      }
+    }
+
+    const tokens = tokensPart.split(/\s+/);
+
+    let hasTravelToken = false;
+
+    // traveler 인 경우
+    if (tokens.includes(ATTR_TRAVEL.VALUES.TRAVELER)) {
       isTraveler = true;
+      hasTravelToken = true;
+      const numToken = tokens.find((t) => !isNaN(parseInt(t, 10)));
+      if (numToken) {
+        explicitLayer = parseInt(numToken, 10);
+      }
+    }
+    // native 인 경우
+    else if (tokens.includes(ATTR_TRAVEL.VALUES.NATIVE)) {
+      isTraveler = false;
+      const numToken = tokens.find((t) => !isNaN(parseInt(t, 10)));
+      if (numToken) {
+        nativeLayer = parseInt(numToken, 10);
+      }
+    }
+
+    // traveler만 명시된 레이어에 맞게 captureLayer 컨텍스트를 업데이트해야 함 (계층적 여행)
+    if (hasTravelToken) {
+      const targetCaptureLayer = explicitLayer + 1;
+      if (targetCaptureLayer < captureLayer) {
+        throw new Error(
+          `[MirageEngine] Traveler layer (${explicitLayer}) cannot be smaller than inherited capture layer (${captureLayer - 1}).`,
+        );
+      }
+      captureLayer = Math.min(targetCaptureLayer, ATTR_TRAVEL.MAX_LAYERS + 1);
     }
   }
 
-  const shaderData = element.dataset.mirageShader;
+  const shaderData = element.dataset[ATTR_SHADER.KEY];
   let shaderHooks: ShaderHooks | undefined;
   if (shaderData) {
     shaderHooks = JSON.parse(shaderData) as ShaderHooks;
@@ -324,12 +497,70 @@ export function extractSceneGraph(
     element.setAttribute("data-mid", id);
   }
 
-  const zIndex = parseInt(computed.zIndex);
+  const localZIndex = parseInt(computed.zIndex);
+  const effectiveZIndex =
+    (isNaN(localZIndex) ? 0 : localZIndex) + inheritedZIndex;
   // console.log(`${element.id}: ${computed.background}`);
   // console.log(computed.backgroundImage);
   let imageSrc: string | undefined;
   if (element.tagName === "IMG") {
     imageSrc = (element as HTMLImageElement).src;
+  } else if (element.tagName.toLowerCase() === "svg") {
+    const clone = element.cloneNode(true) as SVGSVGElement;
+
+    const overrideColor = nativeParsedStyles?.color;
+    const overrideFill = nativeParsedStyles?.fill;
+    const overrideStroke = nativeParsedStyles?.stroke;
+    const overrideOpacity = nativeParsedStyles?.opacity;
+
+    const inlineSVGStyles = (orig: Element, cloned: Element) => {
+      const computed = window.getComputedStyle(orig);
+      const clonedHtml = cloned as HTMLElement;
+
+      const isCurrentColorFill = computed.fill === computed.color;
+      const isCurrentColorStroke = computed.stroke === computed.color;
+
+      const fill = overrideFill || (isCurrentColorFill ? overrideColor : undefined) || computed.fill;
+      if (fill && fill !== "none") clonedHtml.style.fill = fill;
+
+      const stroke = overrideStroke || (isCurrentColorStroke ? overrideColor : undefined) || computed.stroke;
+      if (stroke && stroke !== "none") clonedHtml.style.stroke = stroke;
+
+      if (computed.strokeWidth && computed.strokeWidth !== "0px")
+        clonedHtml.style.strokeWidth = computed.strokeWidth;
+
+      const color = overrideColor || computed.color;
+      if (color) clonedHtml.style.color = color;
+
+      const opacity = overrideOpacity || computed.opacity;
+      if (opacity && opacity !== "1") clonedHtml.style.opacity = opacity;
+
+      for (let i = 0; i < orig.children.length; i++) {
+        inlineSVGStyles(orig.children[i], cloned.children[i]);
+      }
+    };
+
+    inlineSVGStyles(element, clone);
+
+    const svgRect = element.getBoundingClientRect();
+    const scale = window.devicePixelRatio * qualityFactor; // High-DPI 대응을 위한 해상도 스케일업
+
+    if (!clone.hasAttribute("viewBox")) {
+      clone.setAttribute("viewBox", `0 0 ${svgRect.width} ${svgRect.height}`);
+    }
+
+    clone.setAttribute("width", (svgRect.width * scale).toString());
+    clone.setAttribute("height", (svgRect.height * scale).toString());
+
+    let svgString = new XMLSerializer().serializeToString(clone);
+    if (!svgString.includes("xmlns=")) {
+      svgString = svgString.replace(
+        "<svg",
+        '<svg xmlns="http://www.w3.org/2000/svg"',
+      );
+    }
+
+    imageSrc = `data:image/svg+xml;utf8,${encodeURIComponent(svgString)}`;
   } else if (computed.backgroundImage && computed.backgroundImage !== "none") {
     const match = computed.backgroundImage.match(/url\(['"]?(.*?)['"]?\)/);
     if (match) {
@@ -337,36 +568,49 @@ export function extractSceneGraph(
     }
   }
 
-  const styles: BoxStyles = {
+  // Base node uses pure DOM styles, unpolluted by travelerStyles
+  const baseStyles: BoxStyles = {
     backgroundColor: computed.backgroundColor,
     backgroundImage: computed.backgroundImage,
     opacity:
-      element.dataset.mirageDom === "hide" ? 1 : parseFloat(computed.opacity),
-    zIndex: isNaN(zIndex) ? 0 : zIndex,
+      element.dataset[ATTR_DOM.KEY] === ATTR_DOM.VALUES.HIDE
+        ? 1
+        : parseFloat(computed.opacity),
+    zIndex: effectiveZIndex,
     borderRadius: computed.borderRadius,
     borderColor: computed.borderColor,
     borderWidth: computed.borderWidth,
     imageSrc,
-    isTraveler,
+    isTraveler: isTraveler,
   };
 
+  const styles: BoxStyles = baseStyles;
+
   let textContent: string | undefined;
   let textStyles: TextStyles | undefined;
   const children: SceneNode[] = [];
 
-  Array.from(element.childNodes).forEach((child) => {
-    const visibleFlowToPass =
-      child.nodeType === Node.TEXT_NODE ? visibleFlag : visibleFlow;
-    const childNode = extractSceneGraph(
-      child,
-      initialMask,
-      visibleFlowToPass,
-      filterConfig,
-    );
-    if (childNode) {
-      children.push(childNode);
-    }
-  });
+  if (element.tagName.toLowerCase() !== "svg") {
+    Array.from(element.childNodes).forEach((child) => {
+      const visibleFlowToPass =
+        child.nodeType === Node.TEXT_NODE ? visibleFlag : visibleFlow;
+      const childNode = extractSceneGraph(
+        child,
+        initialMask,
+        visibleFlowToPass,
+        captureLayer,
+        effectiveZIndex,
+        qualityFactor,
+        nativeLayer,
+        child.nodeType === Node.TEXT_NODE && Object.keys(nativeParsedStyles).length > 0
+          ? nativeParsedStyles
+          : undefined,
+      );
+      if (childNode) {
+        children.push(childNode);
+      }
+    });
+  }
 
   return {
     id,
@@ -384,6 +628,51 @@ export function extractSceneGraph(
     dirtyMask: initialMask,
     visibility: visibleFlag,
     isTraveler: isTraveler,
+    captureLayer,
+    nativeLayer,
+    nativeStyles:
+      nativeLayer !== undefined
+        ? {
+            ...baseStyles,
+            backgroundColor:
+              nativeParsedStyles.backgroundColor ?? baseStyles.backgroundColor,
+            backgroundImage:
+              nativeParsedStyles.backgroundImage ?? baseStyles.backgroundImage,
+            opacity: nativeParsedStyles.opacity ?? baseStyles.opacity,
+            zIndex:
+              nativeParsedStyles.zIndex !== undefined
+                ? nativeParsedStyles.zIndex + effectiveZIndex
+                : baseStyles.zIndex,
+            borderRadius:
+              nativeParsedStyles.borderRadius ?? baseStyles.borderRadius,
+            borderColor:
+              nativeParsedStyles.borderColor ?? baseStyles.borderColor,
+            borderWidth:
+              nativeParsedStyles.borderWidth ?? baseStyles.borderWidth,
+            isTraveler: baseStyles.isTraveler,
+          }
+        : undefined,
+    nativeRect:
+      nativeLayer !== undefined
+        ? {
+            x:
+              nativeParsedStyles.x !== undefined
+                ? parseFloat(nativeParsedStyles.x)
+                : rect.left + window.scrollX,
+            y:
+              nativeParsedStyles.y !== undefined
+                ? parseFloat(nativeParsedStyles.y)
+                : rect.top + window.scrollY,
+            width:
+              nativeParsedStyles.width !== undefined
+                ? parseFloat(nativeParsedStyles.width)
+                : rect.width,
+            height:
+              nativeParsedStyles.height !== undefined
+                ? parseFloat(nativeParsedStyles.height)
+                : rect.height,
+          }
+        : undefined,
     isFixed: computed.position === "fixed",
     children,
     shaderHooks,