Add images to SwiftUI.

Author: bernaferrari

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

@@ -11,10 +11,7 @@ export const swiftUISolidColor = (fill: Paint): string => {
   return "";
 };
 
-/**
- * Retrieve the SOLID color for SwiftUI when existent, otherwise ""
- */
-export const swiftuiColorFromFills = (
+export const swiftuiSolidColor = (
   fills: ReadonlyArray<Paint> | PluginAPI["mixed"]
 ): string => {
   const fill = retrieveTopFill(fills);
@@ -24,9 +21,8 @@ export const swiftuiColorFromFills = (
     const opacity = fill.opacity ?? 1.0;
     return swiftuiColor(fill.color, opacity);
   } else if (fill?.type === "GRADIENT_LINEAR") {
-    return swiftuiGradient(fill);
+    return swiftuiRGBAColor(fill.gradientStops[0].color);
   } else if (fill?.type === "IMAGE") {
-    // placeholder for the image. Apparently SwiftUI doesn't support Image.network(...).
     return swiftuiColor(
       {
         r: 0.5,
@@ -40,6 +36,27 @@ export const swiftuiColorFromFills = (
   return "";
 };
 
+export const swiftuiBackground = (
+  node: SceneNode,
+  fills: ReadonlyArray<Paint> | PluginAPI["mixed"]
+): string => {
+  const fill = retrieveTopFill(fills);
+
+  if (fill && fill.type === "SOLID") {
+    // opacity should only be null on set, not on get. But better be prevented.
+    const opacity = fill.opacity ?? 1.0;
+    return swiftuiColor(fill.color, opacity);
+  } else if (fill?.type === "GRADIENT_LINEAR") {
+    return swiftuiGradient(fill);
+  } else if (fill?.type === "IMAGE") {
+    return `AsyncImage(url: URL(string: "https://via.placeholder.com/${node.width.toFixed(
+      0
+    )}x${node.height.toFixed(0)}"))`;
+  }
+
+  return "";
+};
+
 export const swiftuiGradient = (fill: GradientPaint): string => {
   const direction = gradientDirection(gradientAngle(fill));
 
@@ -74,6 +91,8 @@ const gradientDirection = (angle: number): string => {
   }
 };
 
+export const swiftuiRGBAColor = (color: RGBA) => swiftuiColor(color, color.a);
+
 export const swiftuiColor = (color: RGB, opacity: number): string => {
   // Using Color.black.opacity() is not reccomended, as per:
   // https://stackoverflow.com/a/56824114/4418073

packages/backend/src/swiftui/swiftuiDefaultBuilder.ts

@@ -4,7 +4,7 @@ import {
   swiftuiBorder,
   swiftuiCornerRadius,
 } from "./builderImpl/swiftuiBorder";
-import { swiftuiColorFromFills } from "./builderImpl/swiftuiColor";
+import { swiftuiBackground } from "./builderImpl/swiftuiColor";
 import { swiftuiPadding } from "./builderImpl/swiftuiPadding";
 import { swiftuiSize } from "./builderImpl/swiftuiSize";
 
@@ -104,9 +104,9 @@ export class SwiftuiDefaultBuilder {
 
   shapeBackground(node: SceneNode): this {
     if ("fills" in node) {
-      const fillColor = swiftuiColorFromFills(node.fills);
-      if (fillColor) {
-        this.pushModifier([`background`, fillColor]);
+      const background = swiftuiBackground(node, node.fills);
+      if (background) {
+        this.pushModifier([`background`, background]);
       }
     }
     return this;

packages/backend/src/swiftui/swiftuiTextBuilder.ts

@@ -9,7 +9,7 @@ import { swiftuiSize } from "./builderImpl/swiftuiSize";
 import { globalTextStyleSegments } from "../altNodes/altConversion";
 import { SwiftUIElement } from "./builderImpl/swiftuiParser";
 import { parseTextAsCode } from "../flutter/flutterTextBuilder";
-import { swiftuiColorFromFills } from "./builderImpl/swiftuiColor";
+import { swiftuiSolidColor } from "./builderImpl/swiftuiColor";
 
 export class SwiftuiTextBuilder extends SwiftuiDefaultBuilder {
   modifiers: string[] = [];
@@ -41,7 +41,7 @@ export class SwiftuiTextBuilder extends SwiftuiDefaultBuilder {
   }
 
   textColor(fills: Paint[]): string {
-    const fillColor = swiftuiColorFromFills(fills);
+    const fillColor = swiftuiSolidColor(fills);
     if (fillColor) {
       return fillColor;
     }