Improve group and multi-selection

Author: bernaferrari

apps/plugin/plugin-src/code.ts

@@ -23,9 +23,9 @@ export const defaultPluginSettings: PluginSettings = {
   responsiveRoot: false,
   flutterGenerationMode: "snippet",
   swiftUIGenerationMode: "snippet",
-  roundTailwindValues: false,
-  roundTailwindColors: false,
-  useColorVariables: false,
+  roundTailwindValues: true,
+  roundTailwindColors: true,
+  useColorVariables: true,
   customTailwindPrefix: "",
   embedImages: false,
   embedVectors: false,

packages/backend/src/altNodes/jsonNodeConversion.ts

@@ -2,6 +2,7 @@ import { addWarning } from "../common/commonConversionWarnings";
 import { PluginSettings } from "types";
 import { variableToColorName } from "../tailwind/conversionTables";
 import { HasGeometryTrait, Node, Paint } from "../api_types";
+import { calculateRectangleFromBoundingBox } from "../common/commonPosition";
 
 // Performance tracking counters
 export let getNodeByIdAsyncTime = 0;
@@ -196,7 +197,11 @@ const processNodePair = async (
   const nodeType = jsonNode.type;
 
   // Store the cumulative rotation (parent's cumulative + node's own)
-  jsonNode.cumulativeRotation = parentCumulativeRotation;
+  if (parentNode) {
+    // Only add cumulative when there is a parent. This is useful for the GROUP -> FRAME transformation, where
+    // we want to move the rotation of the GROUP to children, but want to se FRAME to 0.
+    jsonNode.cumulativeRotation = parentCumulativeRotation;
+  }
 
   // Handle empty frames and convert to rectangles
   if (
@@ -358,11 +363,33 @@ const processNodePair = async (
   }
 
   // Always copy size and position
-  if ("width" in figmaNode) {
-    jsonNode.width = figmaNode.width;
-    jsonNode.height = figmaNode.height;
-    jsonNode.x = figmaNode.x;
-    jsonNode.y = figmaNode.y;
+  if ("absoluteBoundingBox" in jsonNode && jsonNode.absoluteBoundingBox) {
+    if (jsonNode.parent) {
+      // Extract width and height from bounding box and rotation. This is necessary because Figma JSON API doesn't have width and height.
+      const rect = calculateRectangleFromBoundingBox(
+        {
+          width: jsonNode.absoluteBoundingBox.width,
+          height: jsonNode.absoluteBoundingBox.height,
+          x:
+            jsonNode.absoluteBoundingBox.x -
+            (jsonNode.parent?.absoluteBoundingBox.x || 0),
+          y:
+            jsonNode.absoluteBoundingBox.y -
+            (jsonNode.parent?.absoluteBoundingBox.y || 0),
+        },
+        -((jsonNode.rotation || 0) + (jsonNode.cumulativeRotation || 0)),
+      );
+
+      jsonNode.width = rect.width;
+      jsonNode.height = rect.height;
+      jsonNode.x = rect.left;
+      jsonNode.y = rect.top;
+    } else {
+      jsonNode.width = jsonNode.absoluteBoundingBox.width;
+      jsonNode.height = jsonNode.absoluteBoundingBox.height;
+      jsonNode.x = 0;
+      jsonNode.y = 0;
+    }
   }
 
   if ("individualStrokeWeights" in jsonNode) {
@@ -425,8 +452,6 @@ const processNodePair = async (
     "children" in figmaNode &&
     figmaNode.children.length === jsonNode.children.length
   ) {
-    console.log("cumulative", parentCumulativeRotation);
-
     const cumulative =
       parentCumulativeRotation +
       (jsonNode.type === "GROUP" ? jsonNode.rotation || 0 : 0);
@@ -489,21 +514,38 @@ export const nodesToJSON = async (
 ): Promise<Node[]> => {
   // Reset name counters for each conversion
   nodeNameCounters.clear();
-
   const exportJsonStart = Date.now();
-  // First get the JSON representation of nodes
-  const nodeJson = (await Promise.all(
-    nodes.map(
-      async (node) =>
-        (
-          (await node.exportAsync({
-            format: "JSON_REST_V1",
-          })) as any
-        ).document,
-    ),
-  )) as Node[];
-
-  console.log("[debug] initial nodeJson", { ...nodeJson[0] });
+  // First get the JSON representation of nodes with rotation handling
+  const nodeResults = await Promise.all(
+    nodes.map(async (node) => {
+      // Export node to JSON
+      const nodeDoc = (
+        (await node.exportAsync({
+          format: "JSON_REST_V1",
+        })) as any
+      ).document;
+
+      let nodeCumulativeRotation = 0;
+
+      // Wire GROUPs into FRAME.
+      if (node.type === "GROUP") {
+        nodeDoc.type = "FRAME";
+
+        // Fix rotation for children.
+        if ("rotation" in nodeDoc && nodeDoc.rotation) {
+          nodeCumulativeRotation = -nodeDoc.rotation * (180 / Math.PI);
+          nodeDoc.rotation = 0;
+        }
+      }
+
+      return {
+        nodeDoc,
+        nodeCumulativeRotation,
+      };
+    }),
+  );
+
+  console.log("[debug] initial nodeJson", { ...nodes[0] });
 
   console.log(
     `[benchmark][inside nodesToJSON] JSON_REST_V1 export: ${Date.now() - exportJsonStart}ms`,
@@ -515,9 +557,11 @@ export const nodesToJSON = async (
 
   for (let i = 0; i < nodes.length; i++) {
     const processedNode = await processNodePair(
-      nodeJson[i],
+      nodeResults[i].nodeDoc,
       nodes[i],
       settings,
+      undefined,
+      nodeResults[i].nodeCumulativeRotation,
     );
     if (processedNode !== null) {
       if (Array.isArray(processedNode)) {

packages/backend/src/code.ts

@@ -33,10 +33,6 @@ export const run = async (settings: PluginSettings) => {
   if (selection.length === 0) {
     postEmptyMessage();
     return;
-  } else if (selection.length > 1) {
-    addWarning(
-      "Ungrouped elements may have incorrect positioning. If this happens, try wrapping the selection in a Frame or Group.",
-    );
   }
 
   // Timing with Date.now() instead of console.time

packages/backend/src/common/commonPosition.ts

@@ -5,25 +5,15 @@ export const getCommonPositionValue = (
   settings?: HTMLSettings | TailwindSettings,
 ): { x: number; y: number } => {
   if (node.parent && node.parent.absoluteBoundingBox) {
-    const x = node.absoluteBoundingBox.x - node.parent.absoluteBoundingBox.x;
-    const y = node.absoluteBoundingBox.y - node.parent.absoluteBoundingBox.y;
-
     if (settings?.embedVectors && node.svg) {
       // When embedding vectors, we need to use the absolute position, since it already includes the rotation.
-      return { x: x, y: y };
+      return {
+        x: node.absoluteBoundingBox.x - node.parent.absoluteBoundingBox.x,
+        y: node.absoluteBoundingBox.y - node.parent.absoluteBoundingBox.y,
+      };
     }
 
-    const rect = calculateRectangleFromBoundingBox(
-      {
-        width: node.absoluteBoundingBox.width,
-        height: node.absoluteBoundingBox.height,
-        x: x,
-        y: y,
-      },
-      -((node.rotation || 0) + (node.cumulativeRotation || 0)),
-    );
-
-    return { x: rect.left, y: rect.top };
+    return { x: node.x, y: node.y };
   }
 
   if (node.parent && node.parent.type === "GROUP") {
@@ -54,7 +44,7 @@ interface RectangleStyle {
   rotation: number; // Rotation in degrees
 }
 
-function calculateRectangleFromBoundingBox(
+export function calculateRectangleFromBoundingBox(
   boundingBox: BoundingBox,
   figmaRotationDegrees: number,
 ): RectangleStyle {

packages/backend/src/html/htmlMain.ts

@@ -359,19 +359,23 @@ export const generateHTMLPreview = async (
   nodes: SceneNode[],
   settings: PluginSettings,
 ): Promise<HTMLPreview> => {
-  const result = await htmlMain(
+  let result = await htmlMain(
     nodes,
     {
       ...settings,
       htmlGenerationMode: "html",
     },
-    true,
+    nodes.length > 1 ? false : true,
   );
 
+  if (nodes.length > 1) {
+    result.html = `<div style="width: 100%; height: 100%">${result.html}</div>`;
+  }
+
   return {
     size: {
-      width: nodes[0].width,
-      height: nodes[0].height,
+      width: Math.max(...nodes.map((node) => node.width)),
+      height: nodes.reduce((sum, node) => sum + node.height, 0),
     },
     content: result.html,
   };