Improve rotation in flutter, text-trim in html, and inline transform in flutter

Author: bernaferrari

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

@@ -37,20 +37,35 @@ export const flutterVisibility = (node: SceneNode, child: string): string => {
 /**
  * https://api.flutter.dev/flutter/widgets/Transform-class.html
  * that's how you convert angles to clockwise radians: angle * -pi/180
- * using 3.14159 as Pi for enough precision and to avoid importing math lib.
  */
 export const flutterRotation = (node: LayoutMixin, child: string): string => {
   if (
     node.rotation !== undefined &&
     child !== "" &&
     Math.round(node.rotation) !== 0
   ) {
-    return generateWidgetCode("Transform", {
-      transform: `Matrix4.identity()..translate(0.0, 0.0)..rotateZ(${numberToFixedString(
-        node.rotation * (-3.14159 / 180),
-      )})`,
-      child: child,
-    });
+    const matrix = generateRotationMatrix(node);
+    if (matrix) {
+      return generateWidgetCode("Transform", {
+        transform: matrix,
+        child: child,
+      });
+    }
   }
   return child;
 };
+
+/**
+ * Generates a rotation matrix string for Flutter transforms
+ */
+export const generateRotationMatrix = (node: LayoutMixin): string => {
+  const rotation = (node.rotation || 0) + (node.cumulativeRotation || 0);
+
+  if (Math.round(rotation) === 0) {
+    return "";
+  }
+
+  return `Matrix4.identity()..translate(0.0, 0.0)..rotateZ(${numberToFixedString(
+    rotation * (-Math.PI / 180),
+  )})`;
+};

packages/backend/src/flutter/flutterContainer.ts

@@ -13,6 +13,7 @@ import {
 import { numberToFixedString } from "../common/numToAutoFixed";
 import { getCommonRadius } from "../common/commonRadius";
 import { commonStroke } from "../common/commonStroke";
+import { generateRotationMatrix } from "./builderImpl/flutterBlend";
 
 export const flutterContainer = (node: SceneNode, child: string): string => {
   // ignore the view when size is zero or less
@@ -42,6 +43,18 @@ export const flutterContainer = (node: SceneNode, child: string): string => {
   let result: string;
   const hasConstraints = constraints && Object.keys(constraints).length > 0;
 
+  const properties: Record<string, string> = {};
+
+  // If node has rotation, get the matrix for the transform property
+  if ("rotation" in node) {
+    const matrix = generateRotationMatrix(node);
+    if (matrix) {
+      properties.transform = matrix;
+    }
+  }
+
+  properties.child = child;
+
   if (width || height || propBoxDecoration || clipBehavior) {
     const parsedDecoration = skipDefaultProperty(
       propBoxDecoration,
@@ -53,7 +66,7 @@ export const flutterContainer = (node: SceneNode, child: string): string => {
       padding: propPadding,
       clipBehavior: clipBehavior,
       decoration: clipBehavior ? propBoxDecoration : parsedDecoration,
-      child: child,
+      ...properties,
     });
   } else if (propPadding) {
     // if there is just a padding, add Padding

packages/backend/src/flutter/flutterDefaultBuilder.ts

@@ -13,21 +13,25 @@ import { generateWidgetCode } from "../common/numToAutoFixed";
 
 export class FlutterDefaultBuilder {
   child: string;
+  rotationApplied: boolean = false;
 
   constructor(optChild: string) {
     this.child = optChild;
   }
 
   createContainer(node: SceneNode): this {
     this.child = flutterContainer(node, this.child);
+    this.rotationApplied = true;
+
     return this;
   }
 
   blendAttr(node: SceneNode): this {
-    console.log("rotation is", node.rotation);
-    if ("rotation" in node) {
+    // Only apply rotation via Transform if it wasn't already handled in the container
+    if ("rotation" in node && !this.rotationApplied) {
       this.child = flutterRotation(node, this.child);
     }
+
     if ("visible" in node) {
       this.child = flutterVisibility(node, this.child);
     } else if ("opacity" in node) {

packages/backend/src/html/htmlMain.ts

@@ -472,6 +472,7 @@ const htmlGroup = async (
 const htmlText = (node: TextNode, settings: HTMLSettings): string => {
   let layoutBuilder = new HtmlTextBuilder(node, settings)
     .commonPositionStyles()
+    .textTrim()
     .textAlignHorizontal()
     .textAlignVertical();
 

packages/backend/src/html/htmlTextBuilder.ts

@@ -134,6 +134,14 @@ export class HtmlTextBuilder extends HtmlDefaultBuilder {
     return this;
   }
 
+  textTrim(): this {
+    if ("leadingTrim" in this.node && this.node.leadingTrim === "CAP_HEIGHT") {
+      this.addStyles(formatWithJSX("text-box-trim", this.isJSX, "trim-both"));
+      this.addStyles(formatWithJSX("text-box-edge", this.isJSX, "cap alphabetic"));
+    }
+    return this;
+  }
+
   textDecoration(textDecoration: TextDecoration): string {
     switch (textDecoration) {
       case "STRIKETHROUGH":

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

@@ -30,11 +30,9 @@ export const swiftuiVisibility = (
  * https://developer.apple.com/documentation/swiftui/modifiedcontent/rotationeffect(_:anchor:)
  */
 export const swiftuiRotation = (node: LayoutMixin): SwiftUIModifier | null => {
-  if (node.rotation !== undefined && Math.round(node.rotation) !== 0) {
-    return [
-      "rotationEffect",
-      `.degrees(${numberToFixedString(node.rotation)})`,
-    ];
+  const rotation = (node.rotation || 0) + (node.cumulativeRotation || 0);
+  if (Math.round(rotation) !== 0) {
+    return ["rotationEffect", `.degrees(${numberToFixedString(rotation)})`];
   }
   return null;
 };