2024-04-17 03:53:38 -05:00
|
|
|
import {
|
2024-06-14 03:18:34 -05:00
|
|
|
transformAutoLayout,
|
2024-04-17 04:38:13 -05:00
|
|
|
transformBlend,
|
2024-04-17 08:27:53 -05:00
|
|
|
transformChildren,
|
2024-06-06 05:17:17 -05:00
|
|
|
transformConstraints,
|
2024-04-22 05:50:38 -05:00
|
|
|
transformCornerRadius,
|
2024-06-14 09:28:01 -05:00
|
|
|
transformDimension,
|
2024-04-22 07:35:59 -05:00
|
|
|
transformEffects,
|
2024-05-30 10:54:37 -05:00
|
|
|
transformFigmaIds,
|
2024-04-17 08:27:53 -05:00
|
|
|
transformFills,
|
2024-06-14 03:18:34 -05:00
|
|
|
transformLayoutAttributes,
|
2024-06-17 02:58:23 -05:00
|
|
|
transformOverrides,
|
2024-04-19 05:18:12 -05:00
|
|
|
transformProportion,
|
2024-06-14 09:28:01 -05:00
|
|
|
transformRotationAndPosition,
|
2024-04-17 03:53:38 -05:00
|
|
|
transformSceneNode,
|
|
|
|
transformStrokes
|
|
|
|
} from '@plugin/transformers/partials';
|
2024-04-12 09:52:36 -05:00
|
|
|
|
2024-05-06 01:06:14 -05:00
|
|
|
import { FrameShape } from '@ui/lib/types/shapes/frameShape';
|
2024-06-14 09:28:01 -05:00
|
|
|
import { Point } from '@ui/lib/types/utils/point';
|
2024-04-12 09:52:36 -05:00
|
|
|
|
2024-05-31 06:32:59 -05:00
|
|
|
const isSectionNode = (node: FrameNode | SectionNode | ComponentSetNode): node is SectionNode => {
|
2024-04-17 04:38:13 -05:00
|
|
|
return node.type === 'SECTION';
|
|
|
|
};
|
|
|
|
|
2024-04-12 06:55:42 -05:00
|
|
|
export const transformFrameNode = async (
|
2024-06-19 01:10:20 -05:00
|
|
|
node: FrameNode | SectionNode | ComponentSetNode
|
2024-04-12 06:55:42 -05:00
|
|
|
): Promise<FrameShape> => {
|
2024-04-22 07:35:59 -05:00
|
|
|
let frameSpecificAttributes: Partial<FrameShape> = {};
|
2024-06-14 09:28:01 -05:00
|
|
|
let referencePoint: Point = { x: node.absoluteTransform[0][2], y: node.absoluteTransform[1][2] };
|
2024-04-22 07:35:59 -05:00
|
|
|
|
|
|
|
if (!isSectionNode(node)) {
|
2024-06-19 01:10:20 -05:00
|
|
|
const { x, y, ...transformAndRotation } = transformRotationAndPosition(node);
|
2024-06-14 09:28:01 -05:00
|
|
|
|
|
|
|
referencePoint = { x, y };
|
|
|
|
|
2024-04-22 07:35:59 -05:00
|
|
|
// 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 = {
|
|
|
|
// @see: https://forum.figma.com/t/why-are-strokes-not-available-on-section-nodes/41658
|
2024-06-05 05:36:49 -05:00
|
|
|
...transformStrokes(node),
|
2024-04-22 07:35:59 -05:00
|
|
|
// @see: https://forum.figma.com/t/add-a-blendmode-property-for-sectionnode/58560
|
|
|
|
...transformBlend(node),
|
|
|
|
...transformProportion(node),
|
2024-06-18 06:10:30 -05:00
|
|
|
...transformLayoutAttributes(node, true),
|
2024-04-22 07:35:59 -05:00
|
|
|
...transformCornerRadius(node),
|
2024-06-06 05:17:17 -05:00
|
|
|
...transformEffects(node),
|
2024-06-14 03:18:34 -05:00
|
|
|
...transformConstraints(node),
|
2024-06-14 09:28:01 -05:00
|
|
|
...transformAutoLayout(node),
|
|
|
|
...transformAndRotation
|
2024-04-22 07:35:59 -05:00
|
|
|
};
|
|
|
|
}
|
|
|
|
|
2024-04-12 06:55:42 -05:00
|
|
|
return {
|
|
|
|
type: 'frame',
|
|
|
|
name: node.name,
|
2024-04-19 04:40:50 -05:00
|
|
|
showContent: isSectionNode(node) ? true : !node.clipsContent,
|
2024-05-30 10:54:37 -05:00
|
|
|
...transformFigmaIds(node),
|
2024-06-05 05:36:49 -05:00
|
|
|
...transformFills(node),
|
2024-06-14 09:28:01 -05:00
|
|
|
...referencePoint,
|
2024-04-22 07:35:59 -05:00
|
|
|
...frameSpecificAttributes,
|
2024-06-14 09:28:01 -05:00
|
|
|
...transformDimension(node),
|
2024-06-19 01:10:20 -05:00
|
|
|
...(await transformChildren(node)),
|
2024-06-17 02:58:23 -05:00
|
|
|
...transformSceneNode(node),
|
|
|
|
...transformOverrides(node)
|
2024-04-12 06:55:42 -05:00
|
|
|
};
|
|
|
|
};
|