remove base rotation and calculate it instead (#178)

penpot · Jun 19, 2024 · 4e5d01a · 4e5d01a
1 parent 8eb2b1a
commit 4e5d01a
Show file tree

Hide file tree

Showing 19 changed files with 109 additions and 139 deletions.
diff --git a/plugin-src/transformers/partials/transformChildren.ts b/plugin-src/transformers/partials/transformChildren.ts
@@ -6,16 +6,13 @@ const nodeActsAsMask = (node: SceneNode): boolean => {
   return 'isMask' in node && node.isMask;
 };
 
-export const transformChildren = async (
-  node: ChildrenMixin,
-  baseRotation: number = 0
-): Promise<Children> => {
+export const transformChildren = async (node: ChildrenMixin): Promise<Children> => {
   const maskIndex = node.children.findIndex(nodeActsAsMask);
   const containsMask = maskIndex !== -1;
 
   return {
     children: containsMask
-      ? await translateMaskChildren(node.children, maskIndex, baseRotation)
-      : await translateChildren(node.children, baseRotation)
+      ? await translateMaskChildren(node.children, maskIndex)
+      : await translateChildren(node.children)
   };
 };
diff --git a/plugin-src/transformers/partials/transformRotationAndPosition.ts b/plugin-src/transformers/partials/transformRotationAndPosition.ts
@@ -1,13 +1,12 @@
 import { translateRotation, translateZeroRotation } from '@plugin/translators';
-import { applyInverseRotation, hasRotation } from '@plugin/utils';
+import { applyInverseRotation, getRotation, hasRotation } from '@plugin/utils';
 
 import { ShapeBaseAttributes, ShapeGeomAttributes } from '@ui/lib/types/shapes/shape';
 
 export const transformRotation = (
-  node: LayoutMixin,
-  baseRotation: number
+  node: LayoutMixin
 ): Pick<ShapeBaseAttributes, 'transform' | 'transformInverse' | 'rotation'> => {
-  const rotation = node.rotation + baseRotation;
+  const rotation = getRotation(node.absoluteTransform);
 
   if (!hasRotation(rotation)) {
     return translateZeroRotation();
@@ -17,13 +16,12 @@ export const transformRotation = (
 };
 
 export const transformRotationAndPosition = (
-  node: LayoutMixin,
-  baseRotation: number
+  node: LayoutMixin
 ): Pick<ShapeBaseAttributes, 'transform' | 'transformInverse' | 'rotation'> &
   Pick<ShapeGeomAttributes, 'x' | 'y'> => {
-  const rotation = node.rotation + baseRotation;
   const x = node.absoluteTransform[0][2];
   const y = node.absoluteTransform[1][2];
+  const rotation = getRotation(node.absoluteTransform);
 
   if (!hasRotation(rotation) || !node.absoluteBoundingBox) {
     return {

diff --git a/plugin-src/transformers/partials/transformVectorPaths.ts b/plugin-src/transformers/partials/transformVectorPaths.ts
@@ -13,7 +13,7 @@ import { translateCommands, translateWindingRule } from '@plugin/translators/vec
 
 import { PathShape } from '@ui/lib/types/shapes/pathShape';
 
-export const transformVectorPaths = (node: VectorNode, baseRotation: number): PathShape[] => {
+export const transformVectorPaths = (node: VectorNode): PathShape[] => {
   const pathShapes = node.vectorPaths
     .filter((vectorPath, index) => {
       return (
@@ -22,7 +22,7 @@ export const transformVectorPaths = (node: VectorNode, baseRotation: number): Pa
       );
     })
     .map((vectorPath, index) =>
-      transformVectorPath(node, vectorPath, (node.vectorNetwork.regions ?? [])[index], baseRotation)
+      transformVectorPath(node, vectorPath, (node.vectorNetwork.regions ?? [])[index])
     );
 
   const geometryShapes = node.fillGeometry
@@ -32,7 +32,7 @@ export const transformVectorPaths = (node: VectorNode, baseRotation: number): Pa
           vectorPath => normalizePath(vectorPath.data) === normalizePath(geometry.data)
         )
     )
-    .map(geometry => transformVectorPath(node, geometry, undefined, baseRotation));
+    .map(geometry => transformVectorPath(node, geometry, undefined));
 
   return [...geometryShapes, ...pathShapes];
 };
@@ -58,15 +58,14 @@ const nodeHasFills = (
 const transformVectorPath = (
   node: VectorNode,
   vectorPath: VectorPath,
-  vectorRegion: VectorRegion | undefined,
-  baseRotation: number
+  vectorRegion: VectorRegion | undefined
 ): PathShape => {
   const normalizedPaths = parseSVG(vectorPath.data);
 
   return {
     type: 'path',
     name: 'svg-path',
-    content: translateCommands(node, normalizedPaths, baseRotation),
+    content: translateCommands(node, normalizedPaths),
     fills:
       vectorPath.windingRule === 'NONE' ? [] : translateFills(vectorRegion?.fills ?? node.fills),
     svgAttrs: {

diff --git a/plugin-src/transformers/transformBooleanNode.ts b/plugin-src/transformers/transformBooleanNode.ts
@@ -16,21 +16,18 @@ import { translateBoolType } from '@plugin/translators';
 
 import { BoolShape } from '@ui/lib/types/shapes/boolShape';
 
-export const transformBooleanNode = async (
-  node: BooleanOperationNode,
-  baseRotation: number
-): Promise<BoolShape> => {
+export const transformBooleanNode = async (node: BooleanOperationNode): Promise<BoolShape> => {
   return {
     type: 'bool',
     name: node.name,
     boolType: translateBoolType(node.booleanOperation),
     ...transformFigmaIds(node),
-    ...(await transformChildren(node, baseRotation)),
+    ...(await transformChildren(node)),
     ...transformFills(node),
     ...transformEffects(node),
     ...transformStrokes(node),
     ...transformDimension(node),
-    ...transformRotationAndPosition(node, baseRotation),
+    ...transformRotationAndPosition(node),
     ...transformSceneNode(node),
     ...transformBlend(node),
     ...transformProportion(node),

diff --git a/plugin-src/transformers/transformComponentNode.ts b/plugin-src/transformers/transformComponentNode.ts
@@ -18,10 +18,7 @@ import {
 
 import { ComponentRoot } from '@ui/types';
 
-export const transformComponentNode = async (
-  node: ComponentNode,
-  baseRotation: number
-): Promise<ComponentRoot> => {
+export const transformComponentNode = async (node: ComponentNode): Promise<ComponentRoot> => {
   componentsLibrary.register(node.id, {
     type: 'component',
     name: node.name,
@@ -36,9 +33,9 @@ export const transformComponentNode = async (
     ...transformProportion(node),
     ...transformLayoutAttributes(node, true),
     ...transformCornerRadius(node),
-    ...(await transformChildren(node, node.rotation + baseRotation)),
+    ...(await transformChildren(node)),
     ...transformDimension(node),
-    ...transformRotationAndPosition(node, baseRotation),
+    ...transformRotationAndPosition(node),
     ...transformConstraints(node),
     ...transformAutoLayout(node)
   });

diff --git a/plugin-src/transformers/transformEllipseNode.ts b/plugin-src/transformers/transformEllipseNode.ts
@@ -15,7 +15,7 @@ import {
 
 import { CircleShape } from '@ui/lib/types/shapes/circleShape';
 
-export const transformEllipseNode = (node: EllipseNode, baseRotation: number): CircleShape => {
+export const transformEllipseNode = (node: EllipseNode): CircleShape => {
   return {
     type: 'circle',
     name: node.name,
@@ -24,7 +24,7 @@ export const transformEllipseNode = (node: EllipseNode, baseRotation: number): C
     ...transformEffects(node),
     ...transformStrokes(node),
     ...transformDimension(node),
-    ...transformRotationAndPosition(node, baseRotation),
+    ...transformRotationAndPosition(node),
     ...transformSceneNode(node),
     ...transformBlend(node),
     ...transformProportion(node),

diff --git a/plugin-src/transformers/transformFrameNode.ts b/plugin-src/transformers/transformFrameNode.ts
@@ -24,18 +24,15 @@ const isSectionNode = (node: FrameNode | SectionNode | ComponentSetNode): node i
 };
 
 export const transformFrameNode = async (
-  node: FrameNode | SectionNode | ComponentSetNode,
-  baseRotation: number
+  node: FrameNode | SectionNode | ComponentSetNode
 ): Promise<FrameShape> => {
   let frameSpecificAttributes: Partial<FrameShape> = {};
   let referencePoint: Point = { x: node.absoluteTransform[0][2], y: node.absoluteTransform[1][2] };
-  let rotation = baseRotation;
 
   if (!isSectionNode(node)) {
-    const { x, y, ...transformAndRotation } = transformRotationAndPosition(node, baseRotation);
+    const { x, y, ...transformAndRotation } = transformRotationAndPosition(node);
 
     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.
@@ -63,7 +60,7 @@ export const transformFrameNode = async (
     ...referencePoint,
     ...frameSpecificAttributes,
     ...transformDimension(node),
-    ...(await transformChildren(node, rotation)),
+    ...(await transformChildren(node)),
     ...transformSceneNode(node),
     ...transformOverrides(node)
   };

diff --git a/plugin-src/transformers/transformGroupNode.ts b/plugin-src/transformers/transformGroupNode.ts
@@ -11,29 +11,25 @@ import { transformChildren } from '@plugin/transformers/partials';
 
 import { GroupShape } from '@ui/lib/types/shapes/groupShape';
 
-export const transformGroupNode = async (
-  node: GroupNode,
-  baseRotation: number
-): Promise<GroupShape> => {
+export const transformGroupNode = async (node: GroupNode): Promise<GroupShape> => {
   return {
     ...transformFigmaIds(node),
-    ...transformGroupNodeLike(node, baseRotation),
+    ...transformGroupNodeLike(node),
     ...transformEffects(node),
     ...transformBlend(node),
-    ...(await transformChildren(node, baseRotation)),
+    ...(await transformChildren(node)),
     ...transformOverrides(node)
   };
 };
 
 export const transformGroupNodeLike = (
-  node: BaseNodeMixin & LayoutMixin & SceneNodeMixin,
-  baseRotation: number
+  node: BaseNodeMixin & LayoutMixin & SceneNodeMixin
 ): GroupShape => {
   return {
     type: 'group',
     name: node.name,
     ...transformDimension(node),
-    ...transformRotationAndPosition(node, baseRotation),
+    ...transformRotationAndPosition(node),
     ...transformSceneNode(node)
   };
 };
diff --git a/plugin-src/transformers/transformInstanceNode.ts b/plugin-src/transformers/transformInstanceNode.ts
@@ -21,8 +21,7 @@ import {
 import { ComponentInstance, ComponentTextPropertyOverride } from '@ui/types';
 
 export const transformInstanceNode = async (
-  node: InstanceNode,
-  baseRotation: number
+  node: InstanceNode
 ): Promise<ComponentInstance | undefined> => {
   const mainComponent = await node.getMainComponentAsync();
   if (mainComponent === null) {
@@ -62,10 +61,10 @@ export const transformInstanceNode = async (
     ...transformLayoutAttributes(node, true),
     ...transformCornerRadius(node),
     ...transformDimension(node),
-    ...transformRotationAndPosition(node, baseRotation),
+    ...transformRotationAndPosition(node),
     ...transformConstraints(node),
     ...transformAutoLayout(node),
-    ...(await transformChildren(node, node.rotation + baseRotation)),
+    ...(await transformChildren(node)),
     ...transformOverrides(node)
   };
 };

diff --git a/plugin-src/transformers/transformLineNode.ts b/plugin-src/transformers/transformLineNode.ts
@@ -20,11 +20,11 @@ import { Segment } 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, baseRotation: number): PathShape => {
+export const transformLineNode = (node: LineNode): PathShape => {
   return {
     type: 'path',
     name: node.name,
-    content: translateLineNode(node, baseRotation),
+    content: translateLineNode(node),
     ...transformFigmaIds(node),
     ...transformStrokes(node),
     ...transformEffects(node),
@@ -37,23 +37,19 @@ export const transformLineNode = (node: LineNode, baseRotation: number): PathSha
   };
 };
 
-const translateLineNode = (node: LineNode, baseRotation: number): Segment[] => {
-  return translateCommands(
-    node,
-    [
-      {
-        x: 0,
-        y: 0,
-        command: 'moveto',
-        code: 'M'
-      },
-      {
-        x: node.width,
-        y: 0,
-        command: 'lineto',
-        code: 'L'
-      }
-    ],
-    baseRotation
-  );
+const translateLineNode = (node: LineNode): Segment[] => {
+  return translateCommands(node, [
+    {
+      x: 0,
+      y: 0,
+      command: 'moveto',
+      code: 'M'
+    },
+    {
+      x: node.width,
+      y: 0,
+      command: 'lineto',
+      code: 'L'
+    }
+  ]);
 };
diff --git a/plugin-src/transformers/transformPathNode.ts b/plugin-src/transformers/transformPathNode.ts
@@ -17,27 +17,24 @@ import { translateCommands } from '@plugin/translators/vectors';
 
 import { PathShape, Segment } from '@ui/lib/types/shapes/pathShape';
 
-export const transformPathNode = (
-  node: StarNode | PolygonNode,
-  baseRotation: number
-): PathShape => {
+export const transformPathNode = (node: StarNode | PolygonNode): PathShape => {
   return {
     type: 'path',
     name: node.name,
-    content: translatePathNode(node, baseRotation),
+    content: translatePathNode(node),
     ...transformFigmaIds(node),
     ...transformFills(node),
     ...transformStrokes(node),
     ...transformEffects(node),
     ...transformSceneNode(node),
     ...transformBlend(node),
     ...transformProportion(node),
-    ...transformRotation(node, baseRotation),
+    ...transformRotation(node),
     ...transformLayoutAttributes(node),
     ...transformConstraints(node),
     ...transformOverrides(node)
   };
 };
 
-const translatePathNode = (node: StarNode | PolygonNode, baseRotation: number): Segment[] =>
-  translateCommands(node, parseSVG(node.fillGeometry[0].data), baseRotation);
+const translatePathNode = (node: StarNode | PolygonNode): Segment[] =>
+  translateCommands(node, parseSVG(node.fillGeometry[0].data));
diff --git a/plugin-src/transformers/transformRectangleNode.ts b/plugin-src/transformers/transformRectangleNode.ts
@@ -16,7 +16,7 @@ import {
 
 import { RectShape } from '@ui/lib/types/shapes/rectShape';
 
-export const transformRectangleNode = (node: RectangleNode, baseRotation: number): RectShape => {
+export const transformRectangleNode = (node: RectangleNode): RectShape => {
   return {
     type: 'rect',
     name: node.name,
@@ -25,7 +25,7 @@ export const transformRectangleNode = (node: RectangleNode, baseRotation: number
     ...transformEffects(node),
     ...transformStrokes(node),
     ...transformDimension(node),
-    ...transformRotationAndPosition(node, baseRotation),
+    ...transformRotationAndPosition(node),
     ...transformSceneNode(node),
     ...transformBlend(node),
     ...transformProportion(node),