Penpot/penpot-exporter-figma-plugin
0
Fork 0
mirror of https://github.com/penpot/penpot-exporter-figma-plugin.git synced 2024-12-22 05:33:02 -05:00
Code Issues Activity

Fix transformed shapes (#236)

Browse source 
* fix transformed shapes

* minor fix
This commit is contained in:
Alex Sánchez 2024-11-14 15:42:45 +01:00 committed by GitHub
parent 71ac1900b4
commit 3da80b4c26
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 20 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/bright-roses-wave.md Normal file
View file

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

2
package.json
View file

@ -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",

11
plugin-src/transformers/partials/transformRotationAndPosition.ts
View file

@ -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,

6
plugin-src/translators/vectors/translateCommands.ts
View file

@ -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);
}

10
plugin-src/utils/applyRotation.ts
View file

@ -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]],