2024-06-06 02:37:35 -05:00
|
|
|
import { remoteComponentLibrary } from '@plugin/RemoteComponentLibrary';
|
2024-05-30 10:54:37 -05:00
|
|
|
import {
|
|
|
|
transformBlend,
|
|
|
|
transformChildren,
|
2024-06-06 05:17:17 -05:00
|
|
|
transformConstraints,
|
2024-05-30 10:54:37 -05:00
|
|
|
transformCornerRadius,
|
|
|
|
transformDimensionAndPosition,
|
|
|
|
transformEffects,
|
|
|
|
transformFigmaIds,
|
|
|
|
transformFills,
|
|
|
|
transformProportion,
|
|
|
|
transformSceneNode,
|
|
|
|
transformStrokes
|
|
|
|
} from '@plugin/transformers/partials';
|
|
|
|
|
|
|
|
import { ComponentInstance } from '@ui/types';
|
|
|
|
|
|
|
|
export const transformInstanceNode = async (
|
|
|
|
node: InstanceNode,
|
|
|
|
baseX: number,
|
|
|
|
baseY: number
|
|
|
|
): Promise<ComponentInstance | undefined> => {
|
|
|
|
const mainComponent = await node.getMainComponentAsync();
|
|
|
|
|
2024-06-03 06:52:50 -05:00
|
|
|
if (mainComponent === null || isUnprocessableComponent(mainComponent)) {
|
2024-05-30 10:54:37 -05:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2024-06-06 02:37:35 -05:00
|
|
|
if (isExternalComponent(mainComponent)) {
|
2024-06-13 02:10:11 -05:00
|
|
|
registerExternalComponents(mainComponent);
|
2024-06-06 02:37:35 -05:00
|
|
|
}
|
|
|
|
|
2024-05-30 10:54:37 -05:00
|
|
|
return {
|
|
|
|
type: 'instance',
|
2024-05-31 06:32:59 -05:00
|
|
|
name: node.name,
|
2024-06-03 06:52:50 -05:00
|
|
|
mainComponentFigmaId: mainComponent.id,
|
2024-05-30 10:54:37 -05:00
|
|
|
isComponentRoot: isComponentRoot(node),
|
2024-06-06 02:37:35 -05:00
|
|
|
showContent: !node.clipsContent,
|
2024-05-30 10:54:37 -05:00
|
|
|
...transformFigmaIds(node),
|
2024-06-05 05:36:49 -05:00
|
|
|
...transformFills(node),
|
2024-05-30 10:54:37 -05:00
|
|
|
...transformEffects(node),
|
2024-06-05 05:36:49 -05:00
|
|
|
...transformStrokes(node),
|
2024-05-30 10:54:37 -05:00
|
|
|
...transformSceneNode(node),
|
|
|
|
...transformBlend(node),
|
|
|
|
...transformProportion(node),
|
|
|
|
...transformCornerRadius(node),
|
|
|
|
...transformDimensionAndPosition(node, baseX, baseY),
|
2024-06-06 05:17:17 -05:00
|
|
|
...transformConstraints(node),
|
2024-05-30 10:54:37 -05:00
|
|
|
...(await transformChildren(node, baseX + node.x, baseY + node.y))
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
2024-06-13 02:10:11 -05:00
|
|
|
const registerExternalComponents = (mainComponent: ComponentNode): void => {
|
2024-06-06 02:37:35 -05:00
|
|
|
let component: ComponentSetNode | ComponentNode = mainComponent;
|
|
|
|
|
|
|
|
if (component.parent?.type === 'COMPONENT_SET') {
|
|
|
|
component = component.parent;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (remoteComponentLibrary.get(component.id) !== undefined) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
remoteComponentLibrary.register(component.id, component);
|
|
|
|
};
|
|
|
|
|
|
|
|
const isExternalComponent = (mainComponent: ComponentNode): boolean => {
|
|
|
|
return (
|
|
|
|
mainComponent.remote ||
|
|
|
|
(mainComponent.parent?.type === 'COMPONENT_SET' && mainComponent.parent.remote)
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
2024-06-03 06:52:50 -05:00
|
|
|
/**
|
|
|
|
* We do not want to process component instances in the following scenarios:
|
|
|
|
*
|
2024-06-06 02:37:35 -05:00
|
|
|
* 1. If the component does not have a parent. (it's been removed)
|
|
|
|
* 2. Main component can be in a ComponentSet (the same logic applies to the parent).
|
2024-06-03 06:52:50 -05:00
|
|
|
*/
|
|
|
|
const isUnprocessableComponent = (mainComponent: ComponentNode): boolean => {
|
|
|
|
return (
|
2024-06-06 02:37:35 -05:00
|
|
|
(mainComponent.parent === null && !mainComponent.remote) ||
|
2024-06-03 06:27:30 -05:00
|
|
|
(mainComponent.parent?.type === 'COMPONENT_SET' &&
|
2024-06-06 02:37:35 -05:00
|
|
|
mainComponent.parent.parent === null &&
|
|
|
|
!mainComponent.parent.remote)
|
2024-06-03 06:27:30 -05:00
|
|
|
);
|
|
|
|
};
|
|
|
|
|
2024-05-30 10:54:37 -05:00
|
|
|
const isComponentRoot = (node: InstanceNode): boolean => {
|
|
|
|
let parent = node.parent;
|
2024-06-05 05:36:49 -05:00
|
|
|
|
2024-05-30 10:54:37 -05:00
|
|
|
while (parent !== null) {
|
|
|
|
if (parent.type === 'COMPONENT' || parent.type === 'INSTANCE') {
|
|
|
|
return false;
|
|
|
|
}
|
2024-06-05 05:36:49 -05:00
|
|
|
|
2024-05-30 10:54:37 -05:00
|
|
|
parent = parent.parent;
|
|
|
|
}
|
2024-06-05 05:36:49 -05:00
|
|
|
|
2024-05-30 10:54:37 -05:00
|
|
|
return true;
|
|
|
|
};
|