Make it even faster. No more inferredAutoLayout.

Author: bernaferrari

packages/backend/src/code.ts

@@ -26,18 +26,6 @@ let nodeCacheHits = 0;
 // Keep track of node names for sequential numbering
 const nodeNameCounters: Map<string, number> = new Map();
 
-// Helper function to add parent references to all children in the node tree
-const addParentReferences = (node: any) => {
-  if (node.children && node.children.length > 0) {
-    for (const child of node.children) {
-      // Add parent reference to the child
-      child.parent = node;
-      // Recursively process this child's children
-      addParentReferences(child);
-    }
-  }
-};
-
 const variableCache = new Map<string, string>();
 
 const memoizedVariableToColorName = async (
@@ -171,14 +159,21 @@ function adjustChildrenOrder(node: any) {
  * @param jsonNode The JSON node to process
  * @param figmaNode The corresponding Figma node
  * @param settings Plugin settings
+ * @param parentNode Optional parent node reference to set
  */
 const processNodePair = async (
   jsonNode: any,
   figmaNode: SceneNode,
   settings: PluginSettings,
+  parentNode?: any
 ) => {
   if (!jsonNode.id) return;
 
+  // Set parent reference if parent is provided
+  if (parentNode) {
+    jsonNode.parent = parentNode;
+  }
+
   // Ensure node has a unique name with simple numbering
   const cleanName = jsonNode.name.trim();
 
@@ -295,13 +290,6 @@ const processNodePair = async (
     }
   }
 
-  // Extract inferredAutoLayout if optimizeLayout is enabled
-  if (settings.optimizeLayout && "inferredAutoLayout" in figmaNode) {
-    jsonNode.inferredAutoLayout = JSON.parse(
-      JSON.stringify(figmaNode.inferredAutoLayout),
-    );
-  }
-
   // Extract component metadata from instances
   if ("variantProperties" in figmaNode && figmaNode.variantProperties) {
     jsonNode.variantProperties = figmaNode.variantProperties;
@@ -311,8 +299,8 @@ const processNodePair = async (
   if ("width" in figmaNode) {
     jsonNode.width = figmaNode.width;
     jsonNode.height = figmaNode.height;
-    // jsonNode.x = figmaNode.x;
-    // jsonNode.y = figmaNode.y;
+    jsonNode.x = figmaNode.x;
+    jsonNode.y = figmaNode.y;
   }
 
   if ("rotation" in jsonNode) {
@@ -388,6 +376,7 @@ const processNodePair = async (
         jsonNode.children[i],
         figmaNode.children[i],
         settings,
+        jsonNode // Pass the current node as parent for its children
       );
     }
 
@@ -444,13 +433,6 @@ export const nodesToJSON = async (
     `[benchmark][inside nodesToJSON] Process node pairs: ${Date.now() - processNodesStart}ms`,
   );
 
-  const addParentStart = Date.now();
-  // Add parent references to all children in the node tree
-  nodeJson.forEach((node) => addParentReferences(node));
-  console.log(
-    `[benchmark][inside nodesToJSON] addParentReferences: ${Date.now() - addParentStart}ms`,
-  );
-
   return nodeJson;
 };
 

packages/backend/src/common/commonPosition.ts

@@ -1,97 +1,3 @@
-import { LayoutMode } from "types";
-import { parentCoordinates } from "./parentCoordinates";
-
-export const commonPosition = (
-  node: SceneNode & DimensionAndPositionMixin,
-): LayoutMode => {
-  // if node is same size as height, position is not necessary
-
-  // detect if Frame's width is same as Child when Frame has Padding.
-  // warning: this may return true even when false, if size is same, but position is different. However, it would be an unexpected layout.
-  let hPadding = 0;
-  let vPadding = 0;
-  if (node.parent && "layoutMode" in node.parent) {
-    hPadding = node.parent.paddingLeft + node.parent.paddingRight;
-    vPadding = node.parent.paddingTop + node.parent.paddingBottom;
-  }
-
-  if (
-    !node.parent ||
-    !("width" in node.parent) ||
-    (node.width === node.parent.width - hPadding &&
-      node.height === node.parent.height - vPadding)
-  ) {
-    return "";
-  }
-
-  // position is absolute, parent is relative
-  // return "absolute inset-0 m-auto ";
-
-  const [parentX, parentY] = parentCoordinates(node.parent);
-
-  // if view is too small, anything will be detected; this is necessary to reduce the tolerance.
-  let threshold = 8;
-  if (node.width < 16 || node.height < 16) {
-    threshold = 1;
-  }
-
-  // < 4 is a threshold. If === is used, there can be rounding errors (28.002 !== 28)
-  const centerX =
-    Math.abs(2 * (node.x - parentX) + node.width - node.parent.width) <
-    threshold;
-  const centerY =
-    Math.abs(2 * (node.y - parentY) + node.height - node.parent.height) <
-    threshold;
-
-  const minX = node.x - parentX < threshold;
-  const minY = node.y - parentY < threshold;
-
-  const maxX = node.parent.width - (node.x - parentX + node.width) < threshold;
-  const maxY =
-    node.parent.height - (node.y - parentY + node.height) < threshold;
-
-  // this needs to be on top, because Tailwind is incompatible with Center, so this will give preference.
-  if (minX && minY) {
-    // x left, y top
-    return "TopStart";
-  } else if (minX && maxY) {
-    // x left, y bottom
-    return "BottomStart";
-  } else if (maxX && minY) {
-    // x right, y top
-    return "TopEnd";
-  } else if (maxX && maxY) {
-    // x right, y bottom
-    return "BottomEnd";
-  }
-
-  if (centerX && centerY) {
-    return "Center";
-  }
-
-  if (centerX) {
-    if (minY) {
-      // x center, y top
-      return "TopCenter";
-    }
-    if (maxY) {
-      // x center, y bottom
-      return "BottomCenter";
-    }
-  } else if (centerY) {
-    if (minX) {
-      // x left, y center
-      return "CenterStart";
-    }
-    if (maxX) {
-      // x right, y center
-      return "CenterEnd";
-    }
-  }
-
-  return "Absolute";
-};
-
 export const getCommonPositionValue = (
   node: SceneNode,
 ): { x: number; y: number } => {
@@ -112,6 +18,10 @@ export const commonIsAbsolutePosition = (
   node: SceneNode,
   optimizeLayout: boolean,
 ) => {
+  if ("layoutPositioning" in node && node.layoutPositioning === "ABSOLUTE") {
+    return true;
+  }
+
   // No position when parent is inferred auto layout.
   if (
     optimizeLayout &&
@@ -130,11 +40,7 @@ export const commonIsAbsolutePosition = (
     "layoutMode" in node.parent && node.parent.layoutMode === "NONE";
   const hasNoLayoutMode = !("layoutMode" in node.parent);
 
-  if (
-    ("layoutPositioning" in node && node.layoutPositioning === "ABSOLUTE") ||
-    parentLayoutIsNone ||
-    hasNoLayoutMode
-  ) {
+  if (parentLayoutIsNone || hasNoLayoutMode) {
     return true;
   }
 

packages/plugin-ui/src/codegenPreferenceOptions.ts

@@ -9,15 +9,6 @@ export const preferenceOptions: LocalCodegenPreferenceOptions[] = [
     isDefault: false,
     includedLanguages: ["HTML", "Tailwind"],
   },
-  {
-    itemType: "individual_select",
-    propertyName: "optimizeLayout",
-    label: "Optimize layout",
-    description:
-      "Attempt to auto-layout suitable element groups. This may increase code quality, but may not always work as expected.",
-    isDefault: true,
-    includedLanguages: ["HTML", "Tailwind", "Flutter", "SwiftUI"],
-  },
   {
     itemType: "individual_select",
     propertyName: "roundTailwindValues",