Fix ordering with Figma.

Author: bernaferrari

apps/plugin/plugin-src/code.ts

@@ -108,7 +108,6 @@ switch (figma.mode) {
     // figma.codegen.on("preferenceschange", (preferences) => {
 
     // });
-
     figma.codegen.on("generate", ({ language, node }) => {
       const convertedSelection = convertIntoNodes([node], null);
 

packages/backend/src/altNodes/altConversion.ts

@@ -41,6 +41,7 @@ export const frameNodeTo = (
     return frameToRectangleNode(node, parent);
   }
   const clone = standardClone(node, parent);
+
   overrideReadonlyProperty(
     clone,
     "children",

packages/backend/src/common/commonChildrenOrder.ts

@@ -0,0 +1,31 @@
+export const commonSortChildrenWhenInferredAutoLayout = (
+  node: SceneNode & ChildrenMixin,
+  optimize: boolean
+) => {
+  if (node.children.length <= 1) {
+    return node.children;
+  }
+
+  if (
+    optimize &&
+    "inferredAutoLayout" in node &&
+    node.inferredAutoLayout !== null
+  ) {
+    const children = [...node.children];
+    switch (node.inferredAutoLayout.layoutMode) {
+      case "HORIZONTAL":
+        return children.sort((a, b) => a.x - b.x);
+      // NONE is a bug from Figma.
+      case "NONE":
+      case "VERTICAL":
+        console.log(
+          "ordering",
+          children.map((c) => c.name),
+          children.sort((a, b) => a.y - b.y).map((c) => c.name)
+        );
+        return children.sort((a, b) => a.y - b.y);
+    }
+  }
+  console.log("no inferredAutoLayout for ", node.name);
+  return node.children;
+};

packages/backend/src/common/nodeWidthHeight.ts

@@ -10,20 +10,24 @@ export const nodeSize = (
   const hasLayout =
     "layoutAlign" in node && node.parent && "layoutMode" in node.parent;
 
-  if (!hasLayout || ("layoutMode" in node && node.layoutMode === "NONE")) {
+  if (!hasLayout) {
     return { width: node.width, height: node.height };
   }
 
-  // const parentLayoutMode = node.parent.layoutMode;
-  const parentLayoutMode = optimizeLayout
-    ? node.parent.inferredAutoLayout?.layoutMode
-    : null ?? node.parent.layoutMode;
-
   const nodeAuto =
     (optimizeLayout && "inferredAutoLayout" in node
       ? node.inferredAutoLayout
       : null) ?? node;
 
+  if ("layoutMode" in nodeAuto && nodeAuto.layoutMode === "NONE") {
+    return { width: node.width, height: node.height };
+  }
+
+  // const parentLayoutMode = node.parent.layoutMode;
+  const parentLayoutMode = optimizeLayout
+    ? node.parent.inferredAutoLayout?.layoutMode
+    : null ?? node.parent.layoutMode;
+
   const isWidthFill =
     (parentLayoutMode === "HORIZONTAL" && nodeAuto.layoutGrow === 1) ||
     (parentLayoutMode === "VERTICAL" && nodeAuto.layoutAlign === "STRETCH");

packages/backend/src/flutter/flutterMain.ts

@@ -8,6 +8,7 @@ import {
   getCrossAxisAlignment,
   getMainAxisAlignment,
 } from "./builderImpl/flutterAutoLayout";
+import { commonSortChildrenWhenInferredAutoLayout } from "../common/commonChildrenOrder";
 
 let localSettings: PluginSettings;
 let previousExecutionCache: string[];
@@ -167,7 +168,9 @@ const flutterText = (node: TextNode): string => {
 const flutterFrame = (
   node: SceneNode & BaseFrameMixin & MinimalBlendMixin
 ): string => {
-  const children = flutterWidgetGenerator(node.children);
+  const children = flutterWidgetGenerator(
+    commonSortChildrenWhenInferredAutoLayout(node, localSettings.optimizeLayout)
+  );
 
   if (node.layoutMode !== "NONE") {
     const rowColumn = makeRowColumn(node, node, children);

packages/backend/src/html/htmlMain.ts

@@ -5,6 +5,7 @@ import { HtmlDefaultBuilder } from "./htmlDefaultBuilder";
 import { PluginSettings } from "../code";
 import { htmlAutoLayoutProps } from "./builderImpl/htmlAutoLayout";
 import { formatWithJSX } from "../common/parseJSX";
+import { commonSortChildrenWhenInferredAutoLayout } from "../common/commonChildrenOrder";
 
 let showLayerName = false;
 
@@ -135,7 +136,13 @@ const htmlFrame = (
   node: SceneNode & BaseFrameMixin,
   isJsx: boolean = false
 ): string => {
-  const childrenStr = htmlWidgetGenerator(node.children, isJsx);
+  const childrenStr = htmlWidgetGenerator(
+    commonSortChildrenWhenInferredAutoLayout(
+      node,
+      localSettings.optimizeLayout
+    ),
+    isJsx
+  );
 
   if (node.layoutMode !== "NONE") {
     const rowColumn = htmlAutoLayoutProps(node, node, isJsx);

packages/backend/src/swiftui/swiftuiMain.ts

@@ -3,6 +3,7 @@ import { className, sliceNum } from "../common/numToAutoFixed";
 import { SwiftuiTextBuilder } from "./swiftuiTextBuilder";
 import { SwiftuiDefaultBuilder } from "./swiftuiDefaultBuilder";
 import { PluginSettings } from "../code";
+import { commonSortChildrenWhenInferredAutoLayout } from "../common/commonChildrenOrder";
 
 let localSettings: PluginSettings;
 let previousExecutionCache: string[];
@@ -68,6 +69,7 @@ const swiftuiWidgetGenerator = (
     switch (node.type) {
       case "RECTANGLE":
       case "ELLIPSE":
+      case "LINE":
         comp.push(swiftuiContainer(node));
         break;
       case "GROUP":
@@ -105,7 +107,7 @@ export const swiftuiContainer = (
   }
 
   let kind = "";
-  if (node.type === "RECTANGLE") {
+  if (node.type === "RECTANGLE" || node.type === "LINE") {
     kind = "Rectangle()";
   } else if (node.type === "ELLIPSE") {
     kind = "Ellipse()";
@@ -234,17 +236,26 @@ export const generateSwiftViewCode = (
 
 // todo should the plugin manually Group items? Ideally, it would detect the similarities and allow a ForEach.
 const widgetGeneratorWithLimits = (
-  node: ChildrenMixin,
+  node: SceneNode & ChildrenMixin,
   indentLevel: number
 ) => {
   if (node.children.length < 10) {
     // standard way
-    return swiftuiWidgetGenerator(node.children, indentLevel);
+    return swiftuiWidgetGenerator(
+      commonSortChildrenWhenInferredAutoLayout(
+        node,
+        localSettings.optimizeLayout
+      ),
+      indentLevel
+    );
   }
 
   const chunk = 10;
   let strBuilder = "";
-  const slicedChildren = node.children.slice(0, 100);
+  const slicedChildren = commonSortChildrenWhenInferredAutoLayout(
+    node,
+    localSettings.optimizeLayout
+  ).slice(0, 100);
 
   // I believe no one should have more than 100 items in a single nesting level. If you do, please email me.
   if (node.children.length > 100) {

packages/backend/src/tailwind/tailwindMain.ts

@@ -5,18 +5,19 @@ import { TailwindTextBuilder } from "./tailwindTextBuilder";
 import { TailwindDefaultBuilder } from "./tailwindDefaultBuilder";
 import { PluginSettings } from "../code";
 import { tailwindAutoLayoutProps } from "./builderImpl/tailwindAutoLayout";
+import { commonSortChildrenWhenInferredAutoLayout } from "../common/commonChildrenOrder";
 
-let globalLocalSettings: PluginSettings;
+let localSettings: PluginSettings;
 
 let previousExecutionCache: { style: string; text: string }[];
 
 const selfClosingTags = ["img"];
 
 export const tailwindMain = (
   sceneNode: Array<SceneNode>,
-  localSettings: PluginSettings
+  settings: PluginSettings
 ): string => {
-  globalLocalSettings = localSettings;
+  localSettings = settings;
   previousExecutionCache = [];
 
   let result = tailwindWidgetGenerator(sceneNode, localSettings.jsx);
@@ -81,7 +82,7 @@ const tailwindGroup = (node: GroupNode, isJsx: boolean = false): string => {
 
   const vectorIfExists = tailwindVector(
     node,
-    globalLocalSettings.layerName,
+    localSettings.layerName,
     "",
     isJsx
   );
@@ -90,12 +91,12 @@ const tailwindGroup = (node: GroupNode, isJsx: boolean = false): string => {
   // this needs to be called after CustomNode because widthHeight depends on it
   const builder = new TailwindDefaultBuilder(
     node,
-    globalLocalSettings.layerName,
+    localSettings.layerName,
     isJsx
   )
     .blend(node)
-    .size(node, globalLocalSettings.optimizeLayout)
-    .position(node, globalLocalSettings.optimizeLayout);
+    .size(node, localSettings.optimizeLayout)
+    .position(node, localSettings.optimizeLayout);
 
   if (builder.attributes || builder.style) {
     const attr = builder.build("");
@@ -111,10 +112,10 @@ const tailwindGroup = (node: GroupNode, isJsx: boolean = false): string => {
 export const tailwindText = (node: TextNode, isJsx: boolean): string => {
   let layoutBuilder = new TailwindTextBuilder(
     node,
-    globalLocalSettings.layerName,
+    localSettings.layerName,
     isJsx
   )
-    .commonPositionStyles(node, globalLocalSettings.optimizeLayout)
+    .commonPositionStyles(node, localSettings.optimizeLayout)
     .textAlign(node);
 
   const styledHtml = layoutBuilder.getTextSegments(node.id);
@@ -137,16 +138,19 @@ const tailwindFrame = (
   node: FrameNode | InstanceNode | ComponentNode | ComponentSetNode,
   isJsx: boolean
 ): string => {
-  const childrenStr = tailwindWidgetGenerator(node.children, isJsx);
+  const childrenStr = tailwindWidgetGenerator(
+    commonSortChildrenWhenInferredAutoLayout(
+      node,
+      localSettings.optimizeLayout
+    ),
+    isJsx
+  );
 
   if (node.layoutMode !== "NONE") {
     const rowColumn = tailwindAutoLayoutProps(node, node);
     return tailwindContainer(node, childrenStr, rowColumn, isJsx);
   } else {
-    if (
-      globalLocalSettings.optimizeLayout &&
-      node.inferredAutoLayout !== null
-    ) {
+    if (localSettings.optimizeLayout && node.inferredAutoLayout !== null) {
       const rowColumn = tailwindAutoLayoutProps(node, node.inferredAutoLayout);
       return tailwindContainer(node, childrenStr, rowColumn, isJsx);
     }
@@ -177,12 +181,8 @@ export const tailwindContainer = (
     return children;
   }
 
-  let builder = new TailwindDefaultBuilder(
-    node,
-    globalLocalSettings.layerName,
-    isJsx
-  )
-    .commonPositionStyles(node, globalLocalSettings.optimizeLayout)
+  let builder = new TailwindDefaultBuilder(node, localSettings.layerName, isJsx)
+    .commonPositionStyles(node, localSettings.optimizeLayout)
     .commonShapeStyles(node);
 
   if (builder.attributes || additionalAttr) {
@@ -221,10 +221,10 @@ export const tailwindContainer = (
 export const tailwindLine = (node: LineNode, isJsx: boolean): string => {
   const builder = new TailwindDefaultBuilder(
     node,
-    globalLocalSettings.layerName,
+    localSettings.layerName,
     isJsx
   )
-    .commonPositionStyles(node, globalLocalSettings.optimizeLayout)
+    .commonPositionStyles(node, localSettings.optimizeLayout)
     .commonShapeStyles(node);
 
   return `\n<div${builder.build()}></div>`;
@@ -234,11 +234,11 @@ export const tailwindSection = (node: SectionNode, isJsx: boolean): string => {
   const childrenStr = tailwindWidgetGenerator(node.children, isJsx);
   const builder = new TailwindDefaultBuilder(
     node,
-    globalLocalSettings.layerName,
+    localSettings.layerName,
     isJsx
   )
-    .size(node, globalLocalSettings.optimizeLayout)
-    .position(node, globalLocalSettings.optimizeLayout)
+    .size(node, localSettings.optimizeLayout)
+    .position(node, localSettings.optimizeLayout)
     .customColor(node.fills, "bg");
 
   if (childrenStr) {