Apply rotations to any figure (#168)

* Apply rotations to any figure

* add changelog

* apply rotations to curves too

.changeset/wise-olives-teach.md

@@ -0,0 +1,5 @@
+---
+"penpot-exporter": minor
+---
+
+Implement rotation for any arbitrary figure

plugin-src/transformers/partials/transformRotationAndPosition.ts

@@ -1,7 +1,21 @@
+import { translateRotation, translateZeroRotation } from '@plugin/translators';
 import { applyInverseRotation, hasRotation } from '@plugin/utils';
 
 import { ShapeBaseAttributes, ShapeGeomAttributes } from '@ui/lib/types/shapes/shape';
 
+export const transformRotation = (
+  node: LayoutMixin,
+  baseRotation: number
+): Pick<ShapeBaseAttributes, 'transform' | 'transformInverse' | 'rotation'> => {
+  const rotation = node.rotation + baseRotation;
+
+  if (!hasRotation(rotation)) {
+    return translateZeroRotation();
+  }
+
+  return translateRotation(node.absoluteTransform, rotation);
+};
+
 export const transformRotationAndPosition = (
   node: LayoutMixin,
   baseRotation: number
@@ -15,9 +29,7 @@ export const transformRotationAndPosition = (
     return {
       x,
       y,
-      rotation,
-      transform: undefined,
-      transformInverse: undefined
+      ...translateZeroRotation()
     };
   }
 
@@ -29,22 +41,6 @@ export const transformRotationAndPosition = (
 
   return {
     ...referencePoint,
-    rotation: -rotation < 0 ? -rotation + 360 : -rotation,
-    transform: {
-      a: node.absoluteTransform[0][0],
-      b: node.absoluteTransform[1][0],
-      c: node.absoluteTransform[0][1],
-      d: node.absoluteTransform[1][1],
-      e: 0,
-      f: 0
-    },
-    transformInverse: {
-      a: node.absoluteTransform[0][0],
-      b: node.absoluteTransform[0][1],
-      c: node.absoluteTransform[1][0],
-      d: node.absoluteTransform[1][1],
-      e: 0,
-      f: 0
-    }
+    ...translateRotation(node.absoluteTransform, rotation)
   };
 };

plugin-src/transformers/partials/transformVectorPaths.ts

@@ -9,11 +9,11 @@ import {
   transformStrokesFromVector
 } from '@plugin/transformers/partials';
 import { translateFills } from '@plugin/translators/fills';
-import { translateCommandsToSegments, translateWindingRule } from '@plugin/translators/vectors';
+import { translateCommands, translateWindingRule } from '@plugin/translators/vectors';
 
 import { PathShape } from '@ui/lib/types/shapes/pathShape';
 
-export const transformVectorPaths = (node: VectorNode): PathShape[] => {
+export const transformVectorPaths = (node: VectorNode, baseRotation: number): PathShape[] => {
   const pathShapes = node.vectorPaths
     .filter((vectorPath, index) => {
       return (
@@ -22,7 +22,7 @@ export const transformVectorPaths = (node: VectorNode): PathShape[] => {
       );
     })
     .map((vectorPath, index) =>
-      transformVectorPath(node, vectorPath, (node.vectorNetwork.regions ?? [])[index])
+      transformVectorPath(node, vectorPath, (node.vectorNetwork.regions ?? [])[index], baseRotation)
     );
 
   const geometryShapes = node.fillGeometry
@@ -32,7 +32,7 @@ export const transformVectorPaths = (node: VectorNode): PathShape[] => {
           vectorPath => normalizePath(vectorPath.data) === normalizePath(geometry.data)
         )
     )
-    .map(geometry => transformVectorPath(node, geometry, undefined));
+    .map(geometry => transformVectorPath(node, geometry, undefined, baseRotation));
 
   return [...geometryShapes, ...pathShapes];
 };
@@ -58,18 +58,15 @@ const nodeHasFills = (
 const transformVectorPath = (
   node: VectorNode,
   vectorPath: VectorPath,
-  vectorRegion: VectorRegion | undefined
+  vectorRegion: VectorRegion | undefined,
+  baseRotation: number
 ): PathShape => {
   const normalizedPaths = parseSVG(vectorPath.data);
 
   return {
     type: 'path',
     name: 'svg-path',
-    content: translateCommandsToSegments(
-      normalizedPaths,
-      node.absoluteTransform[0][2],
-      node.absoluteTransform[1][2]
-    ),
+    content: translateCommands(node, normalizedPaths, baseRotation),
     fills:
       vectorPath.windingRule === 'NONE' ? [] : translateFills(vectorRegion?.fills ?? node.fills),
     svgAttrs: {

plugin-src/transformers/transformLineNode.ts

@@ -9,9 +9,10 @@ import {
   transformSceneNode,
   transformStrokes
 } from '@plugin/transformers/partials';
-import { translateLineNode } from '@plugin/translators/vectors';
+import { translateCommands } from '@plugin/translators/vectors';
 
 import { PathShape } from '@ui/lib/types/shapes/pathShape';
+import { Segment } from '@ui/lib/types/shapes/pathShape';
 
 /**
  * In order to match the normal representation of a line in Penpot, we will assume that
@@ -35,3 +36,24 @@ export const transformLineNode = (node: LineNode, baseRotation: number): PathSha
     ...transformOverrides(node)
   };
 };
+
+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
+  );
+};

plugin-src/transformers/transformPathNode.ts

@@ -1,3 +1,5 @@
+import { parseSVG } from 'svg-path-parser';
+
 import {
   transformBlend,
   transformConstraints,
@@ -7,12 +9,13 @@ import {
   transformLayoutAttributes,
   transformOverrides,
   transformProportion,
+  transformRotation,
   transformSceneNode,
   transformStrokes
 } from '@plugin/transformers/partials';
-import { translatePathNode } from '@plugin/translators/vectors';
+import { translateCommands } from '@plugin/translators/vectors';
 
-import { PathShape } from '@ui/lib/types/shapes/pathShape';
+import { PathShape, Segment } from '@ui/lib/types/shapes/pathShape';
 
 export const transformPathNode = (
   node: StarNode | PolygonNode,
@@ -29,8 +32,12 @@ export const transformPathNode = (
     ...transformSceneNode(node),
     ...transformBlend(node),
     ...transformProportion(node),
+    ...transformRotation(node, baseRotation),
     ...transformLayoutAttributes(node),
     ...transformConstraints(node),
     ...transformOverrides(node)
   };
 };
+
+const translatePathNode = (node: StarNode | PolygonNode, baseRotation: number): Segment[] =>
+  translateCommands(node, parseSVG(node.fillGeometry[0].data), baseRotation);

plugin-src/transformers/transformVectorNode.ts

@@ -20,7 +20,7 @@ export const transformVectorNode = (
   node: VectorNode,
   baseRotation: number
 ): GroupShape | PathShape => {
-  const children = transformVectorPaths(node);
+  const children = transformVectorPaths(node, baseRotation);
 
   if (children.length === 1) {
     return {

plugin-src/translators/index.ts

@@ -4,5 +4,6 @@ export * from './translateBoolType';
 export * from './translateChildren';
 export * from './translateConstraints';
 export * from './translateLayout';
+export * from './translateRotation';
 export * from './translateShadowEffects';
 export * from './translateStrokes';

plugin-src/translators/translateRotation.ts

@@ -0,0 +1,33 @@
+import { ShapeBaseAttributes } from '@ui/lib/types/shapes/shape';
+
+export const translateRotation = (
+  transform: Transform,
+  rotation: number
+): Pick<ShapeBaseAttributes, 'transform' | 'transformInverse' | 'rotation'> => ({
+  rotation: -rotation < 0 ? -rotation + 360 : -rotation,
+  transform: {
+    a: transform[0][0],
+    b: transform[1][0],
+    c: transform[0][1],
+    d: transform[1][1],
+    e: 0,
+    f: 0
+  },
+  transformInverse: {
+    a: transform[0][0],
+    b: transform[0][1],
+    c: transform[1][0],
+    d: transform[1][1],
+    e: 0,
+    f: 0
+  }
+});
+
+export const translateZeroRotation = (): Pick<
+  ShapeBaseAttributes,
+  'transform' | 'transformInverse' | 'rotation'
+> => ({
+  rotation: 0,
+  transform: undefined,
+  transformInverse: undefined
+});

plugin-src/translators/vectors/index.ts

@@ -1,4 +1,4 @@
-export * from './translateCommandsToSegments';
-export * from './translateLineNode';
-export * from './translatePathNode';
+export * from './translateCommands';
+export * from './translateNonRotatedCommands';
+export * from './translateRotatedCommands';
 export * from './translateWindingRule';

plugin-src/translators/vectors/translateCommands.ts

@@ -0,0 +1,18 @@
+import { Command } from 'svg-path-parser';
+
+import { hasRotation } from '@plugin/utils';
+
+import { translateNonRotatedCommands } from '.';
+import { translateRotatedCommands } from './translateRotatedCommands';
+
+export const translateCommands = (node: LayoutMixin, commands: Command[], baseRotation: number) => {
+  if (hasRotation(node.rotation + baseRotation) && node.absoluteBoundingBox) {
+    return translateRotatedCommands(commands, node.absoluteTransform, node.absoluteBoundingBox);
+  }
+
+  return translateNonRotatedCommands(
+    commands,
+    node.absoluteTransform[0][2],
+    node.absoluteTransform[1][2]
+  );
+};