From c4c0ad362c3bb163cb68c47cd1cfd0e1f81e8571 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alex=20S=C3=A1nchez?= <sion333@gmail.com>
Date: Tue, 11 Jun 2024 18:52:03 +0200
Subject: [PATCH] fixes

---
 plugin-src/transformers/partials/transformChildren.ts | 9 +++------
 plugin-src/transformers/transformComponentNode.ts     | 4 +++-
 plugin-src/transformers/transformFrameNode.ts         | 6 +-----
 plugin-src/transformers/transformInstanceNode.ts      | 7 +------
 plugin-src/translators/translateLayout.ts             | 4 ++--
 5 files changed, 10 insertions(+), 20 deletions(-)

diff --git a/plugin-src/transformers/partials/transformChildren.ts b/plugin-src/transformers/partials/transformChildren.ts
index a516ed8..02093c5 100644
--- a/plugin-src/transformers/partials/transformChildren.ts
+++ b/plugin-src/transformers/partials/transformChildren.ts
@@ -9,16 +9,13 @@ const nodeActsAsMask = (node: SceneNode): boolean => {
 export const transformChildren = async (
   node: ChildrenMixin,
   baseX: number = 0,
-  baseY: number = 0,
-  reverseChildrenOrder: boolean = false
+  baseY: number = 0
 ): Promise<Children> => {
   const maskIndex = node.children.findIndex(nodeActsAsMask);
   const containsMask = maskIndex !== -1;
-  const children = reverseChildrenOrder ? node.children.slice().reverse() : node.children;
-
   return {
     children: containsMask
-      ? await translateMaskChildren(children, maskIndex, baseX, baseY)
-      : await translateChildren(children, baseX, baseY)
+      ? await translateMaskChildren(node.children, maskIndex, baseX, baseY)
+      : await translateChildren(node.children, baseX, baseY)
   };
 };
diff --git a/plugin-src/transformers/transformComponentNode.ts b/plugin-src/transformers/transformComponentNode.ts
index 336444b..3c99446 100644
--- a/plugin-src/transformers/transformComponentNode.ts
+++ b/plugin-src/transformers/transformComponentNode.ts
@@ -1,5 +1,6 @@
 import { componentsLibrary } from '@plugin/ComponentLibrary';
 import {
+  transformAutoLayout,
   transformAutoLayoutPosition,
   transformBlend,
   transformChildren,
@@ -39,7 +40,8 @@ export const transformComponentNode = async (
     ...transformCornerRadius(node),
     ...(await transformChildren(node, baseX + node.x, baseY + node.y)),
     ...transformDimensionAndPosition(node, baseX, baseY),
-    ...transformConstraints(node)
+    ...transformConstraints(node),
+    ...transformAutoLayout(node)
   });
 
   return {
diff --git a/plugin-src/transformers/transformFrameNode.ts b/plugin-src/transformers/transformFrameNode.ts
index 68f6eb4..4be6e0b 100644
--- a/plugin-src/transformers/transformFrameNode.ts
+++ b/plugin-src/transformers/transformFrameNode.ts
@@ -27,12 +27,8 @@ export const transformFrameNode = async (
   baseY: number
 ): Promise<FrameShape> => {
   let frameSpecificAttributes: Partial<FrameShape> = {};
-  let reverseChildrenOrder = false;
 
   if (!isSectionNode(node)) {
-    if (node.layoutMode !== 'NONE') {
-      reverseChildrenOrder = true;
-    }
     // Figma API does not expose strokes, blend modes, corner radius, or constraint proportions for sections,
     // they plan to add it in the future. Refactor this when available.
     frameSpecificAttributes = {
@@ -57,7 +53,7 @@ export const transformFrameNode = async (
     ...transformFigmaIds(node),
     ...transformFills(node),
     ...frameSpecificAttributes,
-    ...(await transformChildren(node, baseX + node.x, baseY + node.y, reverseChildrenOrder)),
+    ...(await transformChildren(node, baseX + node.x, baseY + node.y)),
     ...transformDimensionAndPosition(node, baseX, baseY),
     ...transformSceneNode(node)
   };
diff --git a/plugin-src/transformers/transformInstanceNode.ts b/plugin-src/transformers/transformInstanceNode.ts
index 44be36f..e4943b5 100644
--- a/plugin-src/transformers/transformInstanceNode.ts
+++ b/plugin-src/transformers/transformInstanceNode.ts
@@ -33,11 +33,6 @@ export const transformInstanceNode = async (
     await registerExternalComponents(mainComponent);
   }
 
-  let reverseChildrenOrder = false;
-  if (node.layoutMode !== 'NONE') {
-    reverseChildrenOrder = true;
-  }
-
   return {
     type: 'instance',
     name: node.name,
@@ -57,7 +52,7 @@ export const transformInstanceNode = async (
     ...transformDimensionAndPosition(node, baseX, baseY),
     ...transformConstraints(node),
     ...transformAutoLayout(node),
-    ...(await transformChildren(node, baseX + node.x, baseY + node.y, reverseChildrenOrder))
+    ...(await transformChildren(node, baseX + node.x, baseY + node.y))
   };
 };
 
diff --git a/plugin-src/translators/translateLayout.ts b/plugin-src/translators/translateLayout.ts
index 48dbe18..d2b595c 100644
--- a/plugin-src/translators/translateLayout.ts
+++ b/plugin-src/translators/translateLayout.ts
@@ -17,9 +17,9 @@ type FigmaLayoutSizing = 'FIXED' | 'HUG' | 'FILL';
 export const translateLayoutFlexDir = (layoutMode: FigmaLayoutMode): LayoutFlexDir | undefined => {
   switch (layoutMode) {
     case 'HORIZONTAL':
-      return 'row';
+      return 'row-reverse';
     case 'VERTICAL':
-      return 'column';
+      return 'column-reverse';
     default:
       return;
   }