Implement rotation for remaining figures

plugin-src/transformers/partials/transformChildren.ts

@@ -9,14 +9,15 @@ const nodeActsAsMask = (node: SceneNode): boolean => {
 export const transformChildren = async (
   node: ChildrenMixin,
   baseX: number = 0,
-  baseY: number = 0
+  baseY: number = 0,
+  baseRotation: number = 0
 ): Promise<Children> => {
   const maskIndex = node.children.findIndex(nodeActsAsMask);
   const containsMask = maskIndex !== -1;
 
   return {
     children: containsMask
-      ? await translateMaskChildren(node.children, maskIndex, baseX, baseY)
-      : await translateChildren(node.children, baseX, baseY)
+      ? await translateMaskChildren(node.children, maskIndex, baseX, baseY, baseRotation)
+      : await translateChildren(node.children, baseX, baseY, baseRotation)
   };
 };

plugin-src/transformers/partials/transformRotationAndPosition.ts

@@ -5,10 +5,11 @@ import { ShapeBaseAttributes, ShapeGeomAttributes } from '@ui/lib/types/shapes/s
 export const transformRotationAndPosition = (
   node: LayoutMixin,
   baseX: number,
-  baseY: number
+  baseY: number,
+  baseRotation: number
 ): Pick<ShapeBaseAttributes, 'transform' | 'transformInverse' | 'rotation'> &
   Pick<ShapeGeomAttributes, 'x' | 'y'> => {
-  const rotation = node.rotation;
+  const rotation = node.rotation + baseRotation;
   const x = node.x + baseX;
   const y = node.y + baseY;
 
@@ -28,6 +29,8 @@ export const transformRotationAndPosition = (
     node.absoluteBoundingBox
   );
 
+  console.log(node.id, node.name, node.absoluteTransform);
+
   return {
     ...referencePoint,
     rotation: -rotation < 0 ? -rotation + 360 : -rotation,

plugin-src/transformers/transformEllipseNode.ts

@@ -17,7 +17,8 @@ import { CircleShape } from '@ui/lib/types/shapes/circleShape';
 export const transformEllipseNode = (
   node: EllipseNode,
   baseX: number,
-  baseY: number
+  baseY: number,
+  baseRotation: number
 ): CircleShape => {
   return {
     type: 'circle',
@@ -27,7 +28,7 @@ export const transformEllipseNode = (
     ...transformEffects(node),
     ...transformStrokes(node),
     ...transformDimension(node),
-    ...transformRotationAndPosition(node, baseX, baseY),
+    ...transformRotationAndPosition(node, baseX, baseY, baseRotation),
     ...transformSceneNode(node),
     ...transformBlend(node),
     ...transformProportion(node),

plugin-src/transformers/transformFrameNode.ts

@@ -4,17 +4,19 @@ import {
   transformChildren,
   transformConstraints,
   transformCornerRadius,
-  transformDimensionAndPosition,
+  transformDimension,
   transformEffects,
   transformFigmaIds,
   transformFills,
   transformLayoutAttributes,
   transformProportion,
+  transformRotationAndPosition,
   transformSceneNode,
   transformStrokes
 } from '@plugin/transformers/partials';
 
 import { FrameShape } from '@ui/lib/types/shapes/frameShape';
+import { Point } from '@ui/lib/types/utils/point';
 
 const isSectionNode = (node: FrameNode | SectionNode | ComponentSetNode): node is SectionNode => {
   return node.type === 'SECTION';
@@ -23,11 +25,24 @@ const isSectionNode = (node: FrameNode | SectionNode | ComponentSetNode): node i
 export const transformFrameNode = async (
   node: FrameNode | SectionNode | ComponentSetNode,
   baseX: number,
-  baseY: number
+  baseY: number,
+  baseRotation: number
 ): Promise<FrameShape> => {
   let frameSpecificAttributes: Partial<FrameShape> = {};
+  let referencePoint: Point = { x: node.x + baseX, y: node.y + baseY };
+  let rotation = baseRotation;
 
   if (!isSectionNode(node)) {
+    const { x, y, ...transformAndRotation } = transformRotationAndPosition(
+      node,
+      baseX,
+      baseY,
+      baseRotation
+    );
+
+    referencePoint = { x, y };
+    rotation += node.rotation;
+
     // Figma API does not expose strokes, blend modes, corner radius, or constraint proportions for sections,
     // they plan to add it in the future. Refactor this when available.
     frameSpecificAttributes = {
@@ -40,19 +55,29 @@ export const transformFrameNode = async (
       ...transformCornerRadius(node),
       ...transformEffects(node),
       ...transformConstraints(node),
-      ...transformAutoLayout(node)
+      ...transformAutoLayout(node),
+      ...transformAndRotation
     };
   }
 
+  console.log(
+    node.id,
+    node.name,
+    { x: node.x, y: node.y },
+    { x: node.absoluteBoundingBox?.x, y: node.absoluteBoundingBox?.y },
+    referencePoint
+  );
+
   return {
     type: 'frame',
     name: node.name,
     showContent: isSectionNode(node) ? true : !node.clipsContent,
+    ...referencePoint,
     ...transformFigmaIds(node),
     ...transformFills(node),
     ...frameSpecificAttributes,
-    ...(await transformChildren(node, baseX + node.x, baseY + node.y)),
-    ...transformDimensionAndPosition(node, baseX, baseY),
+    ...transformDimension(node),
+    ...(await transformChildren(node, referencePoint.x, referencePoint.y, rotation)),
     ...transformSceneNode(node)
   };
 };

plugin-src/transformers/transformLineNode.ts

@@ -19,11 +19,16 @@ import { PathShape } from '@ui/lib/types/shapes/pathShape';
  *
  * To represent the line rotated we do take into account the rotation of the line, but only in its content.
  */
-export const transformLineNode = (node: LineNode, baseX: number, baseY: number): PathShape => {
+export const transformLineNode = (
+  node: LineNode,
+  baseX: number,
+  baseY: number,
+  baseRotation: number
+): PathShape => {
   return {
     type: 'path',
     name: node.name,
-    content: translateLineNode(node, baseX, baseY),
+    content: translateLineNode(node, baseX, baseY, baseRotation),
     ...transformFigmaIds(node),
     ...transformStrokes(node),
     ...transformEffects(node),

plugin-src/transformers/transformRectangleNode.ts

@@ -18,7 +18,8 @@ import { RectShape } from '@ui/lib/types/shapes/rectShape';
 export const transformRectangleNode = (
   node: RectangleNode,
   baseX: number,
-  baseY: number
+  baseY: number,
+  baseRotation: number
 ): RectShape => {
   return {
     type: 'rect',
@@ -28,7 +29,7 @@ export const transformRectangleNode = (
     ...transformEffects(node),
     ...transformStrokes(node),
     ...transformDimension(node),
-    ...transformRotationAndPosition(node, baseX, baseY),
+    ...transformRotationAndPosition(node, baseX, baseY, baseRotation),
     ...transformSceneNode(node),
     ...transformBlend(node),
     ...transformProportion(node),

plugin-src/transformers/transformSceneNode.ts

@@ -17,7 +17,8 @@ import {
 export const transformSceneNode = async (
   node: SceneNode,
   baseX: number = 0,
-  baseY: number = 0
+  baseY: number = 0,
+  baseRotation: number = 0
 ): Promise<PenpotNode | undefined> => {
   let penpotNode: PenpotNode | undefined;
 
@@ -28,15 +29,15 @@ export const transformSceneNode = async (
 
   switch (node.type) {
     case 'RECTANGLE':
-      penpotNode = transformRectangleNode(node, baseX, baseY);
+      penpotNode = transformRectangleNode(node, baseX, baseY, baseRotation);
       break;
     case 'ELLIPSE':
-      penpotNode = transformEllipseNode(node, baseX, baseY);
+      penpotNode = transformEllipseNode(node, baseX, baseY, baseRotation);
       break;
     case 'SECTION':
     case 'FRAME':
     case 'COMPONENT_SET':
-      penpotNode = await transformFrameNode(node, baseX, baseY);
+      penpotNode = await transformFrameNode(node, baseX, baseY, baseRotation);
       break;
     case 'GROUP':
       penpotNode = await transformGroupNode(node, baseX, baseY);
@@ -48,7 +49,7 @@ export const transformSceneNode = async (
       penpotNode = transformVectorNode(node, baseX, baseY);
       break;
     case 'LINE':
-      penpotNode = transformLineNode(node, baseX, baseY);
+      penpotNode = transformLineNode(node, baseX, baseY, baseRotation);
       break;
     case 'STAR':
     case 'POLYGON':

plugin-src/translators/translateChildren.ts

@@ -18,11 +18,22 @@ export const translateMaskChildren = async (
   children: readonly SceneNode[],
   maskIndex: number,
   baseX: number,
-  baseY: number
+  baseY: number,
+  baseRotation: number
 ): Promise<PenpotNode[]> => {
   const maskChild = children[maskIndex];
-  const unmaskedChildren = await translateChildren(children.slice(0, maskIndex), baseX, baseY);
-  const maskedChildren = await translateChildren(children.slice(maskIndex), baseX, baseY);
+  const unmaskedChildren = await translateChildren(
+    children.slice(0, maskIndex),
+    baseX,
+    baseY,
+    baseRotation
+  );
+  const maskedChildren = await translateChildren(
+    children.slice(maskIndex),
+    baseX,
+    baseY,
+    baseRotation
+  );
 
   const maskGroup = {
     ...transformMaskFigmaIds(maskChild),
@@ -37,12 +48,13 @@ export const translateMaskChildren = async (
 export const translateChildren = async (
   children: readonly SceneNode[],
   baseX: number = 0,
-  baseY: number = 0
+  baseY: number = 0,
+  baseRotation: number = 0
 ): Promise<PenpotNode[]> => {
   const transformedChildren: PenpotNode[] = [];
 
   for (const child of children) {
-    const penpotNode = await transformSceneNode(child, baseX, baseY);
+    const penpotNode = await transformSceneNode(child, baseX, baseY, baseRotation);
 
     if (penpotNode) transformedChildren.push(penpotNode);
 

plugin-src/translators/vectors/translateLineNode.ts

@@ -6,8 +6,15 @@ import { Segment } from '@ui/lib/types/shapes/pathShape';
 
 import { translateCommandsToSegments } from '.';
 
-export const translateLineNode = (node: LineNode, baseX: number, baseY: number): Segment[] => {
-  if (!hasRotation(node.rotation) || !node.absoluteBoundingBox) {
+export const translateLineNode = (
+  node: LineNode,
+  baseX: number,
+  baseY: number,
+  baseRotation: number
+): Segment[] => {
+  const rotation = node.rotation + baseRotation;
+
+  if (!hasRotation(rotation) || !node.absoluteBoundingBox) {
     return translateCommandsToSegments(
       [
         {
@@ -28,14 +35,20 @@ export const translateLineNode = (node: LineNode, baseX: number, baseY: number):
     );
   }
 
+  const referencePoint = applyInverseRotation(
+    { x: node.x, y: node.y },
+    node.absoluteTransform,
+    node.absoluteBoundingBox
+  );
+
   const startPoint = applyRotation(
-    { x: 0, y: 0 },
+    { x: referencePoint.x, y: referencePoint.y },
     node.absoluteTransform,
     node.absoluteBoundingBox
   );
 
   const endPoint = applyRotation(
-    { x: node.width, y: 0 },
+    { x: referencePoint.x + node.width, y: referencePoint.y },
     node.absoluteTransform,
     node.absoluteBoundingBox
   );
@@ -55,11 +68,5 @@ export const translateLineNode = (node: LineNode, baseX: number, baseY: number):
     }
   ];
 
-  const referencePoint = applyInverseRotation(
-    { x: node.x, y: node.y },
-    node.absoluteTransform,
-    node.absoluteBoundingBox
-  );
-
-  return translateCommandsToSegments(commands, baseX + referencePoint.x, baseY + referencePoint.y);
+  return translateCommandsToSegments(commands, baseX, baseY);
 };