Fix transformed shapes (#236)

* fix transformed shapes

* minor fix

.changeset/bright-roses-wave.md

@@ -0,0 +1,5 @@
+---
+'penpot-exporter': patch
+---
+
+Fixed transformed shapes when flipped horizontally/vertically

package.json

@@ -8,7 +8,7 @@
     "build:prod": "concurrently -n widget,iframe 'npm:build:main' 'npm:build:ui -- --mode production'",
     "build:main": "esbuild plugin-src/code.ts --bundle --outfile=dist/code.js --target=es2016 --minify",
     "build:ui": "vite build",
-    "build:watch": "concurrently -n widget,iframe 'npm:build:main -- --watch' 'npm:build:ui -- --watch'",
+    "build:watch": "concurrently -n widget,iframe 'npm:build:main -- --watch' 'npm:build:ui -- --watch --mode development'",
     "lint": "concurrently 'npm:lint:*'",
     "lint:eslint": "eslint .",
     "lint:stylelint": "stylelint ui-src/**.css",

plugin-src/transformers/partials/transformRotationAndPosition.ts

@@ -1,5 +1,5 @@
 import { translateRotation, translateZeroRotation } from '@plugin/translators';
-import { applyInverseRotation, getRotation, hasRotation } from '@plugin/utils';
+import { applyInverseRotation, getRotation, isTransformed } from '@plugin/utils';
 
 import { ShapeBaseAttributes, ShapeGeomAttributes } from '@ui/lib/types/shapes/shape';
 
@@ -8,10 +8,6 @@ export const transformRotation = (
 ): Pick<ShapeBaseAttributes, 'transform' | 'transformInverse' | 'rotation'> => {
   const rotation = getRotation(node.absoluteTransform);
 
-  if (!hasRotation(rotation)) {
-    return translateZeroRotation();
-  }
-
   return translateRotation(node.absoluteTransform, rotation);
 };
 
@@ -23,7 +19,10 @@ export const transformRotationAndPosition = (
   const y = node.absoluteTransform[1][2];
   const rotation = getRotation(node.absoluteTransform);
 
-  if (!hasRotation(rotation) || !node.absoluteBoundingBox) {
+  if (
+    !node.absoluteBoundingBox ||
+    !isTransformed(node.absoluteTransform, node.absoluteBoundingBox)
+  ) {
     return {
       x,
       y,

plugin-src/translators/vectors/translateCommands.ts

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

plugin-src/utils/applyRotation.ts

@@ -1,8 +1,6 @@
 import { ClosePath, CurveTo, Segment } from '@ui/lib/types/shapes/pathShape';
 import { Point } from '@ui/lib/types/utils/point';
 
-const ROTATION_TOLERANCE = 0.000001;
-
 export const applyRotation = (point: Point, transform: Transform, boundingBox: Rect): Point => {
   const centerPoint = calculateCenter(boundingBox);
 
@@ -61,7 +59,13 @@ export const applyInverseRotation = (
 export const getRotation = (transform: Transform): number =>
   Math.acos(transform[0][0]) * (180 / Math.PI);
 
-export const hasRotation = (rotation: number): boolean => rotation > ROTATION_TOLERANCE;
+export const isTransformed = (transform: Transform, boundingBox: Rect | null): boolean => {
+  if (!boundingBox) {
+    return false;
+  }
+
+  return transform[0][2] !== boundingBox.x || transform[1][2] !== boundingBox.y;
+};
 
 const inverseMatrix = (matrix: Transform): Transform => [
   [matrix[0][0], matrix[1][0], matrix[0][2]],