No more optimize layout

Author: bernaferrari

apps/plugin/plugin-src/code.ts

@@ -19,7 +19,6 @@ let userPluginSettings: PluginSettings;
 
 export const defaultPluginSettings: PluginSettings = {
   framework: "HTML",
-  optimizeLayout: true,
   showLayerNames: false,
   useOldPluginVersion2025: false,
   responsiveRoot: false,

packages/backend/src/code.ts

@@ -163,17 +163,12 @@ function adjustChildrenOrder(node: any) {
  */
 const processNodePair = async (
   jsonNode: any,
+  figmaNode: SceneNode,
   settings: PluginSettings,
   parentNode?: any,
 ) => {
   if (!jsonNode.id) return;
 
-  const figmaNode = await figma.getNodeByIdAsync(jsonNode.id);
-
-  if (!figmaNode) {
-    return;
-  }
-
   // Set parent reference if parent is provided
   if (parentNode) {
     jsonNode.parent = parentNode;
@@ -357,7 +352,12 @@ const processNodePair = async (
     // );
 
     for (let i = 0; i < jsonNode.children.length; i++) {
-      await processNodePair(jsonNode.children[i], settings, jsonNode);
+      await processNodePair(
+        jsonNode.children[i],
+        figmaNode.children[i],
+        settings,
+        jsonNode,
+      );
     }
 
     if (
@@ -409,7 +409,7 @@ export const nodesToJSON = async (
   // Now process each top-level node pair (JSON node + Figma node)
   const processNodesStart = Date.now();
   for (let i = 0; i < nodes.length; i++) {
-    await processNodePair(nodeJson[i], settings);
+    await processNodePair(nodeJson[i], nodes[i], settings);
   }
   console.log(
     `[benchmark][inside nodesToJSON] Process node pairs: ${Date.now() - processNodesStart}ms`,

packages/backend/src/common/commonChildrenOrder.ts

@@ -14,10 +14,7 @@ export const getCommonPositionValue = (
   };
 };
 
-export const commonIsAbsolutePosition = (
-  node: SceneNode,
-  optimizeLayout: boolean,
-) => {
+export const commonIsAbsolutePosition = (node: SceneNode) => {
   if ("layoutPositioning" in node && node.layoutPositioning === "ABSOLUTE") {
     return true;
   }

packages/backend/src/common/commonPosition.ts

@@ -3,22 +3,23 @@ import { numberToFixedString } from "../../common/numToAutoFixed";
 
 // Used in tests.
 export const flutterSizeWH = (node: SceneNode): string => {
-  const fSize = flutterSize(node, false);
+  const fSize = flutterSize(node);
   const size = fSize.width + fSize.height;
   return size;
 };
 
 export const flutterSize = (
   node: SceneNode,
-  optimizeLayout: boolean,
-): { width: string; height: string; isExpanded: boolean; constraints: Record<string, string> } => {
+): {
+  width: string;
+  height: string;
+  isExpanded: boolean;
+  constraints: Record<string, string>;
+} => {
   const size = nodeSize(node);
   let isExpanded: boolean = false;
 
-  const nodeParent =
-    (node.parent && optimizeLayout && "inferredAutoLayout" in node.parent
-      ? node.parent.inferredAutoLayout
-      : null) ?? node.parent;
+  const nodeParent = node.parent;
 
   // this cast will always be true, since nodeWidthHeight was called with false to relative.
   let propWidth = "";
@@ -55,19 +56,19 @@ export const flutterSize = (
 
   // Handle min/max constraints
   const constraints: Record<string, string> = {};
-  
+
   if (node.minWidth !== undefined && node.minWidth !== null) {
     constraints.minWidth = numberToFixedString(node.minWidth);
   }
-  
+
   if (node.maxWidth !== undefined && node.maxWidth !== null) {
     constraints.maxWidth = numberToFixedString(node.maxWidth);
   }
-  
+
   if (node.minHeight !== undefined && node.minHeight !== null) {
     constraints.minHeight = numberToFixedString(node.minHeight);
   }
-  
+
   if (node.maxHeight !== undefined && node.maxHeight !== null) {
     constraints.maxHeight = numberToFixedString(node.maxHeight);
   }

packages/backend/src/flutter/builderImpl/flutterSize.ts

@@ -14,11 +14,7 @@ import { numberToFixedString } from "../common/numToAutoFixed";
 import { getCommonRadius } from "../common/commonRadius";
 import { commonStroke } from "../common/commonStroke";
 
-export const flutterContainer = (
-  node: SceneNode,
-  child: string,
-  optimizeLayout: boolean,
-): string => {
+export const flutterContainer = (node: SceneNode, child: string): string => {
   // ignore the view when size is zero or less
   // while technically it shouldn't get less than 0, due to rounding errors,
   // it can get to values like: -0.000004196293048153166
@@ -28,10 +24,7 @@ export const flutterContainer = (
 
   // ignore for Groups
   const propBoxDecoration = getDecoration(node);
-  const { width, height, isExpanded, constraints } = flutterSize(
-    node,
-    optimizeLayout,
-  );
+  const { width, height, isExpanded, constraints } = flutterSize(node);
 
   const clipBehavior =
     "clipsContent" in node && node.clipsContent === true
@@ -43,9 +36,7 @@ export const flutterContainer = (
   // [propPadding] will be "padding: const EdgeInsets.symmetric(...)" or ""
   let propPadding = "";
   if ("paddingLeft" in node) {
-    propPadding = flutterPadding(
-      (optimizeLayout ? node.inferredAutoLayout : null) ?? node,
-    );
+    propPadding = flutterPadding(node);
   }
 
   let result: string;

packages/backend/src/flutter/flutterContainer.ts

@@ -18,8 +18,8 @@ export class FlutterDefaultBuilder {
     this.child = optChild;
   }
 
-  createContainer(node: SceneNode, optimizeLayout: boolean): this {
-    this.child = flutterContainer(node, this.child, optimizeLayout);
+  createContainer(node: SceneNode): this {
+    this.child = flutterContainer(node, this.child);
     return this;
   }
 
@@ -34,8 +34,8 @@ export class FlutterDefaultBuilder {
     return this;
   }
 
-  position(node: SceneNode, optimizeLayout: boolean): this {
-    if (commonIsAbsolutePosition(node, optimizeLayout)) {
+  position(node: SceneNode): this {
+    if (commonIsAbsolutePosition(node)) {
       const { x, y } = getCommonPositionValue(node);
       this.child = generateWidgetCode("Positioned", {
         left: x,

packages/backend/src/flutter/flutterDefaultBuilder.ts

@@ -11,7 +11,6 @@ import {
   getCrossAxisAlignment,
   getMainAxisAlignment,
 } from "./builderImpl/flutterAutoLayout";
-import { commonSortChildrenWhenInferredAutoLayout } from "../common/commonChildrenOrder";
 import { PluginSettings } from "types";
 import { addWarning } from "../common/commonConversionWarnings";
 import { getPlaceholderImage } from "../common/images";
@@ -152,9 +151,9 @@ const flutterContainer = (node: SceneNode, child: string): string => {
   }
 
   const builder = new FlutterDefaultBuilder(propChild)
-    .createContainer(node, localSettings.optimizeLayout)
+    .createContainer(node)
     .blendAttr(node)
-    .position(node, localSettings.optimizeLayout);
+    .position(node);
 
   return builder.child;
 };
@@ -163,24 +162,15 @@ const flutterText = (node: TextNode): string => {
   const builder = new FlutterTextBuilder().createText(node);
   previousExecutionCache.push(builder.child);
 
-  return builder
-    .blendAttr(node)
-    .textAutoSize(node)
-    .position(node, localSettings.optimizeLayout).child;
+  return builder.blendAttr(node).textAutoSize(node).position(node).child;
 };
 
 const flutterFrame = (
   node: SceneNode & BaseFrameMixin & MinimalBlendMixin,
 ): string => {
-  // Sort children according to layout direction
-  const sortedChildren = commonSortChildrenWhenInferredAutoLayout(
-    node,
-    localSettings.optimizeLayout,
-  );
-
   // Check if any direct children need absolute positioning
-  const hasAbsoluteChildren = sortedChildren.some(
-    (child) => (child as any).layoutPositioning === "ABSOLUTE",
+  const hasAbsoluteChildren = node.children.some(
+    (child: any) => (child as any).layoutPositioning === "ABSOLUTE",
   );
 
   // Add warning if we need to use Stack due to absolute positioning
@@ -209,7 +199,7 @@ const flutterFrame = (
     const rowColumn = makeRowColumn(node, children);
     return flutterContainer(node, rowColumn);
   } else {
-    if (localSettings.optimizeLayout && node.inferredAutoLayout) {
+    if (node.inferredAutoLayout) {
       const rowColumn = makeRowColumn(node.inferredAutoLayout, children);
       return flutterContainer(node, rowColumn);
     }

packages/backend/src/flutter/flutterMain.ts

@@ -5,7 +5,6 @@ import { isPreviewGlobal } from "../htmlMain";
 export const htmlSizePartial = (
   node: SceneNode,
   isJsx: boolean,
-  optimizeLayout: boolean,
 ): { width: string; height: string; constraints: string[] } => {
   if (isPreviewGlobal && node.parent === undefined) {
     return {
@@ -16,10 +15,7 @@ export const htmlSizePartial = (
   }
 
   const size = nodeSize(node);
-  const nodeParent =
-    (node.parent && optimizeLayout && "inferredAutoLayout" in node.parent
-      ? node.parent.inferredAutoLayout
-      : null) ?? node.parent;
+  const nodeParent = node.parent;
 
   let w = "";
   if (typeof size.width === "number") {

packages/backend/src/html/builderImpl/htmlSize.ts

@@ -58,10 +58,6 @@ export class HtmlDefaultBuilder {
     return this.settings.htmlGenerationMode === "jsx";
   }
 
-  get optimizeLayout() {
-    return this.settings.optimizeLayout;
-  }
-
   get exportCSS() {
     return this.settings.htmlGenerationMode === "svelte";
   }
@@ -260,8 +256,8 @@ export class HtmlDefaultBuilder {
   }
 
   position(): this {
-    const { node, optimizeLayout, isJSX } = this;
-    const isAbsolutePosition = commonIsAbsolutePosition(node, optimizeLayout);
+    const { node, isJSX } = this;
+    const isAbsolutePosition = commonIsAbsolutePosition(node);
     if (isAbsolutePosition) {
       const { x, y } = getCommonPositionValue(node);
 
@@ -273,10 +269,7 @@ export class HtmlDefaultBuilder {
     } else {
       if (
         node.type === "GROUP" ||
-        ("layoutMode" in node &&
-          ((optimizeLayout ? node.inferredAutoLayout : null) ?? node)
-            ?.layoutMode === "NONE") ||
-        (node as any).isRelative
+        ("layoutMode" in node && (node as any).isRelative)
       ) {
         this.addStyles(formatWithJSX("position", isJSX, "relative"));
       }
@@ -356,7 +349,6 @@ export class HtmlDefaultBuilder {
     const { width, height, constraints } = htmlSizePartial(
       node,
       settings.htmlGenerationMode === "jsx",
-      settings.optimizeLayout,
     );
 
     if (node.type === "TEXT") {
@@ -384,14 +376,9 @@ export class HtmlDefaultBuilder {
   }
 
   autoLayoutPadding(): this {
-    const { node, isJSX, optimizeLayout } = this;
+    const { node, isJSX } = this;
     if ("paddingLeft" in node) {
-      this.addStyles(
-        ...htmlPadding(
-          (optimizeLayout ? (node as any).inferredAutoLayout : null) ?? node,
-          isJSX,
-        ),
-      );
+      this.addStyles(...htmlPadding(node, isJSX));
     }
     return this;
   }