Refactor layout positioning logic and add pixel rounding (#153)

Author: miraclehen

.changeset/cuddly-carpets-cover.md

@@ -0,0 +1,5 @@
+---
+"figma-developer-mcp": patch
+---
+
+Refactor layout positioning logic and add pixel rounding.

src/transformers/layout.ts

@@ -1,10 +1,10 @@
-import { isFrame, isLayout, isRectangle } from "~/utils/identity.js";
+import { isInAutoLayoutFlow, isFrame, isLayout, isRectangle } from "~/utils/identity.js";
 import type {
   Node as FigmaDocumentNode,
   HasFramePropertiesTrait,
   HasLayoutTrait,
 } from "@figma/rest-api-spec";
-import { generateCSSShorthand } from "~/utils/common.js";
+import { generateCSSShorthand, pixelRound } from "~/utils/common.js";
 
 export interface SimplifiedLayout {
   mode: "none" | "row" | "column";
@@ -208,17 +208,17 @@ function buildSimplifiedLayoutValues(
 
   // Only include positioning-related properties if parent layout isn't flex or if the node is absolute
   if (
-    isFrame(parent) &&
     // If parent is a frame but not an AutoLayout, or if the node is absolute, include positioning-related properties
-    (!parent.layoutMode || parent.layoutMode === "NONE" || n.layoutPositioning === "ABSOLUTE")
+    isFrame(parent) &&
+    !isInAutoLayoutFlow(n, parent)
   ) {
     if (n.layoutPositioning === "ABSOLUTE") {
       layoutValues.position = "absolute";
     }
     if (n.absoluteBoundingBox && parent.absoluteBoundingBox) {
       layoutValues.locationRelativeToParent = {
-        x: n.absoluteBoundingBox.x - parent.absoluteBoundingBox.x,
-        y: n.absoluteBoundingBox.y - parent.absoluteBoundingBox.y,
+        x: pixelRound(n.absoluteBoundingBox.x - parent.absoluteBoundingBox.x),
+        y: pixelRound(n.absoluteBoundingBox.y - parent.absoluteBoundingBox.y),
       };
     }
   }
@@ -255,6 +255,12 @@ function buildSimplifiedLayoutValues(
     }
 
     if (Object.keys(dimensions).length > 0) {
+      if (dimensions.width) {
+        dimensions.width = pixelRound(dimensions.width);
+      }
+      if (dimensions.height) {
+        dimensions.height = pixelRound(dimensions.height);
+      }
       layoutValues.dimensions = dimensions;
     }
   }

src/utils/common.ts

@@ -316,3 +316,16 @@ export function parsePaint(raw: Paint): SimplifiedFill {
 export function isVisible(element: { visible?: boolean }): boolean {
   return element.visible ?? true;
 }
+
+/**
+ * Rounds a number to two decimal places, suitable for pixel value processing.
+ * @param num The number to be rounded.
+ * @returns The rounded number with two decimal places.
+ * @throws TypeError If the input is not a valid number
+ */
+export function pixelRound(num: number): number {
+  if (isNaN(num)) {
+    throw new TypeError(`Input must be a valid number`);
+  }
+  return Number(Number(num).toFixed(2));
+}

src/utils/identity.ts

@@ -43,6 +43,25 @@ export function isLayout(val: unknown): val is HasLayoutTrait {
   );
 }
 
+/**
+ * Checks if:
+ * 1. A node is a child to an auto layout frame
+ * 2. The child adheres to the auto layout rules—i.e. it's not absolutely positioned
+ *
+ * @param node - The node to check.
+ * @param parent - The parent node.
+ * @returns True if the node is a child of an auto layout frame, false otherwise.
+ */
+export function isInAutoLayoutFlow(node: unknown, parent: unknown): boolean {
+  const autoLayoutModes = ["HORIZONTAL", "VERTICAL"];
+  return (
+    isFrame(parent) &&
+    autoLayoutModes.includes(parent.layoutMode ?? "NONE") &&
+    isLayout(node) &&
+    node.layoutPositioning !== "ABSOLUTE"
+  );
+}
+
 export function isStrokeWeights(val: unknown): val is StrokeWeights {
   return (
     typeof val === "object" &&