Fix size when layout is optimized.

Author: bernaferrari

package.json

@@ -11,7 +11,7 @@
     "eslint": "^8.42.0",
     "eslint-config-custom": "workspace:*",
     "prettier": "^2.8.8",
-    "turbo": "^1.10.2"
+    "turbo": "^1.10.3"
   },
   "packageManager": "[email protected]"
 }

packages/backend/package.json

@@ -19,12 +19,12 @@
     "react-dom": "18.2.0"
   },
   "devDependencies": {
-    "@types/react": "^18.2.6",
+    "@types/react": "^18.2.9",
     "@types/react-dom": "^18.2.4",
-    "eslint": "^8.36.0",
+    "eslint": "^8.42.0",
     "eslint-config-custom": "workspace:*",
     "tsconfig": "workspace:*",
     "tsup": "^6.7.0",
-    "typescript": "^5.0.2"
+    "typescript": "^5.1.3"
   }
 }

packages/backend/src/common/nodeWidthHeight.ts

@@ -3,30 +3,33 @@ type SizeResult = {
   readonly height: "fill" | number | null;
 };
 
-export const nodeSize = (node: SceneNode): SizeResult => {
+export const nodeSize = (
+  node: SceneNode,
+  optimizeLayout: boolean
+): SizeResult => {
   const hasLayout =
     "layoutAlign" in node && node.parent && "layoutMode" in node.parent;
 
   if (!hasLayout || ("layoutMode" in node && node.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 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;
+  const nodeAuto =
+    (optimizeLayout && "inferredAutoLayout" in node
+      ? node.inferredAutoLayout
+      : null) ?? node;
 
   const isWidthFill =
-    (parentLayoutMode === "HORIZONTAL" && node.layoutGrow === 1) ||
-    (parentLayoutMode === "VERTICAL" && node.layoutAlign === "STRETCH");
+    (parentLayoutMode === "HORIZONTAL" && nodeAuto.layoutGrow === 1) ||
+    (parentLayoutMode === "VERTICAL" && nodeAuto.layoutAlign === "STRETCH");
   const isHeightFill =
-    (parentLayoutMode === "HORIZONTAL" && node.layoutAlign === "STRETCH") ||
-    (parentLayoutMode === "VERTICAL" && node.layoutGrow === 1);
+    (parentLayoutMode === "HORIZONTAL" && nodeAuto.layoutAlign === "STRETCH") ||
+    (parentLayoutMode === "VERTICAL" && nodeAuto.layoutGrow === 1);
   const modesSwapped = parentLayoutMode === "HORIZONTAL";
   const primaryAxisMode = modesSwapped
     ? "counterAxisSizingMode"
@@ -38,12 +41,12 @@ export const nodeSize = (node: SceneNode): SizeResult => {
   return {
     width: isWidthFill
       ? "fill"
-      : "layoutMode" in node && node[primaryAxisMode] === "AUTO"
+      : "layoutMode" in nodeAuto && nodeAuto[primaryAxisMode] === "AUTO"
       ? null
       : node.width,
     height: isHeightFill
       ? "fill"
-      : "layoutMode" in node && node[counterAxisMode] === "AUTO"
+      : "layoutMode" in nodeAuto && nodeAuto[counterAxisMode] === "AUTO"
       ? null
       : node.height,
   };

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

@@ -3,15 +3,16 @@ import { sliceNum } from "../../common/numToAutoFixed";
 
 // Used in tests.
 export const flutterSizeWH = (node: SceneNode): string => {
-  const fSize = flutterSize(node);
+  const fSize = flutterSize(node, false);
   const size = fSize.width + fSize.height;
   return size;
 };
 
 export const flutterSize = (
-  node: SceneNode
+  node: SceneNode,
+  optimizeLayout: boolean
 ): { width: string; height: string; isExpanded: boolean } => {
-  const size = nodeSize(node);
+  const size = nodeSize(node, optimizeLayout);
   let isExpanded: boolean = false;
 
   // this cast will always be true, since nodeWidthHeight was called with false to relative.

packages/backend/src/flutter/flutterContainer.ts

@@ -28,7 +28,7 @@ export const flutterContainer = (
 
   // ignore for Groups
   const propBoxDecoration = getDecoration(node);
-  const { width, height, isExpanded } = flutterSize(node);
+  const { width, height, isExpanded } = flutterSize(node, optimizeLayout);
   const clipBehavior =
     "clipsContent" in node && node.clipsContent === true
       ? "Clip.antiAlias"

packages/backend/src/flutter/flutterMain.ts

@@ -142,24 +142,9 @@ const flutterContainer = (node: SceneNode, child: string): string => {
     )}x${node.height.toFixed(0)}")`;
   }
 
-  // if (child.length > 0 && image.length > 0) {
-  //   const prop1 = generateWidgetCode("Positioned.fill", {
-  //     child: child,
-  //   });
-  //   const prop2 = generateWidgetCode("Positioned.fill", {
-  //     child: image,
-  //   });
-
-  //   propChild = generateWidgetCode("Stack", {
-  //     children: [prop1, prop2],
-  //   });
-  // }
   if (child.length > 0) {
     propChild = child;
   }
-  //  else if (image.length > 0) {
-  //   propChild = image;
-  // }
 
   const builder = new FlutterDefaultBuilder(propChild)
     .createContainer(node, localSettings.optimizeLayout)

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

@@ -4,7 +4,8 @@ import { isPreviewGlobal } from "../htmlMain";
 
 export const htmlSizePartial = (
   node: SceneNode,
-  isJsx: boolean
+  isJsx: boolean,
+  optimizeLayout: boolean
 ): { width: string; height: string } => {
   if (isPreviewGlobal && node.parent === undefined) {
     return {
@@ -13,7 +14,7 @@ export const htmlSizePartial = (
     };
   }
 
-  const size = nodeSize(node);
+  const size = nodeSize(node, optimizeLayout);
 
   let w = "";
   if (typeof size.width === "number") {

packages/backend/src/html/htmlDefaultBuilder.ts

@@ -39,7 +39,7 @@ export class HtmlDefaultBuilder {
     node: SceneNode & LayoutMixin & MinimalBlendMixin,
     optimizeLayout: boolean
   ): this {
-    this.size(node);
+    this.size(node, optimizeLayout);
     this.autoLayoutPadding(node, optimizeLayout);
     this.position(node, optimizeLayout);
     this.blend(node);
@@ -219,8 +219,12 @@ export class HtmlDefaultBuilder {
     return this;
   }
 
-  size(node: SceneNode): this {
-    const { width, height } = htmlSizePartial(node, this.isJSX);
+  size(node: SceneNode, optimizedLayout: boolean): this {
+    const { width, height } = htmlSizePartial(
+      node,
+      this.isJSX,
+      optimizedLayout
+    );
 
     if (node.type === "TEXT") {
       switch (node.textAutoResize) {

packages/backend/src/html/htmlMain.ts

@@ -84,7 +84,7 @@ const htmlGroup = (node: GroupNode, isJsx: boolean = false): string => {
   // while technically it shouldn't get less than 0, due to rounding errors,
   // it can get to values like: -0.000004196293048153166
   // also ignore if there are no children inside, which makes no sense
-  if (node.width <= 0 || node.height <= 0 || node.children.length === 0) {
+  if (node.width < 0 || node.height <= 0 || node.children.length === 0) {
     return "";
   }
 
@@ -197,7 +197,7 @@ export const htmlContainer = (
   // 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
-  if (node.width <= 0 || node.height <= 0) {
+  if (node.width < 0 || node.height <= 0) {
     return children;
   }
 
@@ -247,7 +247,7 @@ export const htmlSection = (
 ): string => {
   const childrenStr = htmlWidgetGenerator(node.children, isJsx);
   const builder = new HtmlDefaultBuilder(node, showLayerName, isJsx)
-    .size(node)
+    .size(node, localSettings.optimizeLayout)
     .position(node, localSettings.optimizeLayout)
     .applyFillsToStyle(node.fills, "background");
 

packages/backend/src/swiftui/builderImpl/swiftuiSize.ts

@@ -2,9 +2,10 @@ import { nodeSize } from "../../common/nodeWidthHeight";
 import { sliceNum } from "../../common/numToAutoFixed";
 
 export const swiftuiSize = (
-  node: SceneNode
+  node: SceneNode,
+  optimizeLayout: boolean
 ): { width: string; height: string } => {
-  const size = nodeSize(node);
+  const size = nodeSize(node, optimizeLayout);
 
   // if width is set as maxWidth, height must also be set as maxHeight (not height)
   const shouldExtend = size.height === "fill" || size.width === "fill";