Fix rotation on svg

Author: bernaferrari

packages/backend/src/common/commonPosition.ts

@@ -1,10 +1,18 @@
+import { HTMLSettings, TailwindSettings } from "types";
+
 export const getCommonPositionValue = (
   node: SceneNode,
+  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 };
+    }
+
     const rect = calculateRectangleFromBoundingBox(
       {
         width: node.absoluteBoundingBox.width,

packages/backend/src/html/htmlDefaultBuilder.ts

@@ -259,7 +259,9 @@ export class HtmlDefaultBuilder {
     const { node, isJSX } = this;
     const isAbsolutePosition = commonIsAbsolutePosition(node);
     if (isAbsolutePosition) {
-      const { x, y } = getCommonPositionValue(node);
+      const { x, y } = getCommonPositionValue(node, this.settings);
+
+      console.log("for node", node.name, x, y);
 
       this.addStyles(
         formatWithJSX("left", isJSX, x),

packages/backend/src/tailwind/tailwindDefaultBuilder.ts

@@ -122,7 +122,7 @@ export class TailwindDefaultBuilder {
   position(): this {
     const { node } = this;
     if (commonIsAbsolutePosition(node)) {
-      const { x, y } = getCommonPositionValue(node);
+      const { x, y } = getCommonPositionValue(node, this.settings);
 
       const parsedX = numberToFixedString(x);
       const parsedY = numberToFixedString(y);