Enhance Compose support: add handling for Compose generation modes, improve text escaping, and refine border and padding functions

Author: bernaferrari

apps/plugin/plugin-src/code.ts

@@ -5,13 +5,15 @@ import {
   tailwindMain,
   swiftuiMain,
   htmlMain,
+  composeMain,
   postSettingsChanged,
 } from "backend";
 import { nodesToJSON } from "backend/src/altNodes/jsonNodeConversion";
 import { retrieveGenericSolidUIColors } from "backend/src/common/retrieveUI/retrieveColors";
 import { flutterCodeGenTextStyles } from "backend/src/flutter/flutterMain";
 import { htmlCodeGenTextStyles } from "backend/src/html/htmlMain";
 import { swiftUICodeGenTextStyles } from "backend/src/swiftui/swiftuiMain";
+import { composeCodeGenTextStyles } from "backend/src/compose/composeMain";
 import { PluginSettings, SettingWillChangeMessage } from "types";
 
 let userPluginSettings: PluginSettings;
@@ -394,6 +396,22 @@ const codegenMode = async () => {
               language: "SWIFT",
             },
           ];
+        // case "compose":
+        //   return [
+        //     {
+        //       title: "Jetpack Compose",
+        //       code: composeMain(convertedSelection, {
+        //         ...userPluginSettings,
+        //         composeGenerationMode: "snippet",
+        //       }),
+        //       language: "KOTLIN",
+        //     },
+        //     {
+        //       title: "Text Styles",
+        //       code: composeCodeGenTextStyles(),
+        //       language: "KOTLIN",
+        //     },
+        //   ];
         default:
           break;
       }

packages/backend/src/compose/builderImpl/composeAutoLayout.ts

@@ -11,6 +11,8 @@ export const getMainAxisAlignment = (
       return "Arrangement.End";
     case "SPACE_BETWEEN":
       return "Arrangement.SpaceBetween";
+    default:
+      return "Arrangement.Start";
   }
 };
 
@@ -30,6 +32,8 @@ export const getCrossAxisAlignment = (
         return "Alignment.Bottom";
       case "BASELINE":
         return "Alignment.CenterVertically"; // Compose doesn't have baseline alignment for Row
+      default:
+        return "Alignment.Top";
     }
   } else {
     // VERTICAL layout mode
@@ -43,6 +47,8 @@ export const getCrossAxisAlignment = (
         return "Alignment.End";
       case "BASELINE":
         return "Alignment.CenterHorizontally"; // Baseline not applicable for Column
+      default:
+        return "Alignment.Start";
     }
   }
 };
@@ -60,6 +66,8 @@ export const getWrapAlignment = (
       return "Arrangement.End";
     case "SPACE_BETWEEN":
       return "Arrangement.SpaceBetween";
+    default:
+      return "Arrangement.Start";
   }
 };
 
@@ -82,6 +90,8 @@ export const getWrapRunAlignment = (
         return "Arrangement.Center";
       case "MAX":
         return "Arrangement.Bottom";
+      default:
+        return "Arrangement.Top";
     }
   } else {
     // FlowColumn - horizontal alignment
@@ -94,6 +104,8 @@ export const getWrapRunAlignment = (
         return "Arrangement.Center";
       case "MAX":
         return "Arrangement.End";
+      default:
+        return "Arrangement.Start";
     }
   }
 };

packages/backend/src/compose/builderImpl/composeBorder.ts

@@ -39,7 +39,7 @@ const getStrokeAlignment = (node: SceneNode): "inside" | "center" | "outside" =>
  * @param node - The scene node with stroke properties
  * @returns Compose border modifier string
  */
-export const composeBorder = (node: SceneNode): string => {
+export const composeBorder = (node: SceneNode, shape?: string | null): string => {
   if (!("strokes" in node)) {
     return "";
   }
@@ -62,7 +62,7 @@ export const composeBorder = (node: SceneNode): string => {
       return "";
     }
 
-    return generateBorderModifier(stroke.all, strokeFill, strokeAlignment);
+    return generateBorderModifier(stroke.all, strokeFill, strokeAlignment, shape);
   } else {
     // Handle non-uniform borders
     // Compose doesn't have direct support for different border widths per side
@@ -80,7 +80,7 @@ export const composeBorder = (node: SceneNode): string => {
 
     // For now, use uniform border with max width
     // TODO: Consider using Canvas or custom drawing for true non-uniform borders
-    return generateBorderModifier(maxWidth, strokeFill, strokeAlignment);
+    return generateBorderModifier(maxWidth, strokeFill, strokeAlignment, shape);
   }
 };
 
@@ -90,7 +90,8 @@ export const composeBorder = (node: SceneNode): string => {
 const generateBorderModifier = (
   width: number,
   fill: Paint,
-  alignment: "inside" | "center" | "outside"
+  alignment: "inside" | "center" | "outside",
+  shape?: string | null
 ): string => {
   const widthDp = `${numberToFixedString(width)}.dp`;
 
@@ -109,11 +110,12 @@ const generateBorderModifier = (
     // For alignment, we note that Compose doesn't have built-in stroke alignment
     // All borders are essentially "inside" by default
     // For outside borders, we might need custom drawing or padding adjustments
+    const shapeParam = shape ? `, shape = ${shape}` : "";
     if (alignment === "outside") {
       // Add comment about limitation
-      return `.border(width = ${widthDp}, color = ${colorValue}) // Note: Compose borders are always inside`;
+      return `border(width = ${widthDp}, color = ${colorValue}${shapeParam}) // Note: Compose borders are always inside`;
     } else {
-      return `.border(width = ${widthDp}, color = ${colorValue})`;
+      return `border(width = ${widthDp}, color = ${colorValue}${shapeParam})`;
     }
   } else if (fill.type === "GRADIENT_LINEAR") {
     // Convert gradient to Compose Brush
@@ -133,13 +135,14 @@ const generateBorderModifier = (
     }).join(", ");
 
     const brush = `Brush.linearGradient(
-        colorStops = arrayOf(${stops})
+        listOf(${stops})
     )`;
 
+    const shapeParam = shape ? `, shape = ${shape}` : "";
     if (alignment === "outside") {
-      return `.border(width = ${widthDp}, brush = ${brush}) // Note: Compose borders are always inside`;
+      return `border(width = ${widthDp}, brush = ${brush}${shapeParam}) // Note: Compose borders are always inside`;
     } else {
-      return `.border(width = ${widthDp}, brush = ${brush})`;
+      return `border(width = ${widthDp}, brush = ${brush}${shapeParam})`;
     }
   } else if (fill.type === "GRADIENT_RADIAL") {
     // Convert radial gradient to Compose Brush
@@ -159,13 +162,14 @@ const generateBorderModifier = (
     }).join(", ");
 
     const brush = `Brush.radialGradient(
-        colorStops = arrayOf(${stops})
+        listOf(${stops})
     )`;
 
+    const shapeParam = shape ? `, shape = ${shape}` : "";
     if (alignment === "outside") {
-      return `.border(width = ${widthDp}, brush = ${brush}) // Note: Compose borders are always inside`;
+      return `border(width = ${widthDp}, brush = ${brush}${shapeParam}) // Note: Compose borders are always inside`;
     } else {
-      return `.border(width = ${widthDp}, brush = ${brush})`;
+      return `border(width = ${widthDp}, brush = ${brush}${shapeParam})`;
     }
   }
 

packages/backend/src/compose/builderImpl/composeColor.ts

@@ -4,28 +4,28 @@ export const composeColor = (fill: Paint): string | null => {
   if (fill.type === "SOLID") {
     const color = rgbTo6hex(fill.color);
     if (fill.opacity !== undefined && fill.opacity < 1) {
-      const alpha = Math.round(fill.opacity * 255).toString(16).padStart(2, '0');
-      return `background(Color(0x${alpha}${color.slice(1)}))`;
+      const alpha = Math.round(fill.opacity * 255).toString(16).padStart(2, '0').toUpperCase();
+      return `background(Color(0x${alpha}${color.toUpperCase()}))`;
     }
-    return `background(Color(0xFF${color.slice(1)}))`;
+    return `background(Color(0xFF${color.toUpperCase()}))`;
   } else if (fill.type === "GRADIENT_LINEAR") {
     // Convert gradient to Compose Brush
     const stops = fill.gradientStops.map(stop => {
       const color = rgbTo6hex(stop.color);
-      return `${stop.position}f to Color(0xFF${color.slice(1)})`;
+      return `${stop.position}f to Color(0xFF${color.toUpperCase()})`;
     }).join(", ");
 
     return `background(Brush.linearGradient(
-        colorStops = arrayOf(${stops})
+        listOf(${stops})
     ))`;
   } else if (fill.type === "GRADIENT_RADIAL") {
     const stops = fill.gradientStops.map(stop => {
       const color = rgbTo6hex(stop.color);
-      return `${stop.position}f to Color(0xFF${color.slice(1)})`;
+      return `${stop.position}f to Color(0xFF${color.toUpperCase()})`;
     }).join(", ");
 
     return `background(Brush.radialGradient(
-        colorStops = arrayOf(${stops})
+        listOf(${stops})
     ))`;
   }
 

packages/backend/src/compose/builderImpl/composePadding.ts

@@ -23,7 +23,7 @@ export const composePadding = (node: InferredAutoLayoutResult): string => {
     if (padding.all === 0) {
       return "";
     }
-    return `padding(all = ${numberToFixedString(padding.all)}.dp)`;
+    return `padding(${numberToFixedString(padding.all)}.dp)`;
   }
 
   if ("horizontal" in padding) {

packages/backend/src/compose/builderImpl/composeShadow.ts

@@ -37,7 +37,7 @@ export const composeShadow = (effects: readonly Effect[]): string => {
       if (effect.spread === 0 && effect.radius <= 8 && effect.offset.x === 0) {
         const elevation = Math.abs(effect.offset.y);
         if (elevation > 0 && elevation <= 24) {
-          shadowModifiers.push(`shadow(elevation = ${numberToFixedString(elevation)}.dp)`);
+          shadowModifiers.push(`shadow(${numberToFixedString(elevation)}.dp)`);
           return;
         }
       }
@@ -57,11 +57,7 @@ export const composeShadow = (effects: readonly Effect[]): string => {
 }`);
       } else {
         // Simple shadow with custom color
-        shadowModifiers.push(`shadow(
-    elevation = ${blurRadius}.dp,
-    ambientColor = Color(0x${color.toUpperCase()}),
-    spotColor = Color(0x${color.toUpperCase()})
-)`);
+        shadowModifiers.push(`shadow(${blurRadius}.dp, shape = RectangleShape)`);
       }
     } else if (effect.type === "INNER_SHADOW") {
       // Inner shadows in Compose require custom drawing

packages/backend/src/compose/composeContainer.ts

@@ -1,4 +1,3 @@
-import { numberToFixedString } from "../common/numToAutoFixed";
 import { retrieveTopFill } from "../common/retrieveFill";
 import { getCommonRadius } from "../common/commonRadius";
 import { composeSize } from "./builderImpl/composeSize";
@@ -11,6 +10,13 @@ export const composeContainer = (
   node: SceneNode & MinimalBlendMixin,
   child: string,
 ): string => {
+  // Safety check for node dimensions
+  if ("width" in node && "height" in node) {
+    if ((node.width <= 0 || node.height <= 0) && !child) {
+      return "// Invalid node dimensions";
+    }
+  }
+
   const modifiers: string[] = [];
   let containerType = "Box";
 
@@ -33,23 +39,26 @@ export const composeContainer = (
   }
 
   // Border radius
+  let shape = null;
   if ("cornerRadius" in node || "topLeftRadius" in node) {
     const radius = getCommonRadius(node);
     if ("all" in radius && radius.all > 0) {
-      modifiers.push(`clip(RoundedCornerShape(${radius.all}.dp))`);
+      shape = `RoundedCornerShape(${radius.all}.dp)`;
+      modifiers.push(`clip(${shape})`);
     } else if ("topLeft" in radius) {
-      modifiers.push(`clip(RoundedCornerShape(
+      shape = `RoundedCornerShape(
         topStart = ${radius.topLeft}.dp,
         topEnd = ${radius.topRight}.dp,
         bottomEnd = ${radius.bottomRight}.dp,
         bottomStart = ${radius.bottomLeft}.dp
-    ))`);
+    )`;
+      modifiers.push(`clip(${shape})`);
     }
   }
 
   // Border
   if ("strokes" in node && node.strokes.length > 0) {
-    const borderModifier = composeBorder(node);
+    const borderModifier = composeBorder(node, shape);
     if (borderModifier) {
       modifiers.push(borderModifier);
     }
@@ -73,7 +82,7 @@ export const composeContainer = (
 
   // Build modifier chain
   const modifierChain = modifiers.length > 0 
-    ? `modifier = Modifier.${modifiers.join(".")}`
+    ? `modifier = Modifier${modifiers.map(m => `.${m}`).join("")}`
     : "";
 
   // Generate container