2024-05-13 10:04:13 -05:00
|
|
|
import { translateImageFill, translateSolidFill } from '@plugin/translators/fills';
|
|
|
|
import {
|
|
|
|
translateGradientLinearFill,
|
|
|
|
translateGradientRadialFill
|
|
|
|
} from '@plugin/translators/fills/gradients';
|
|
|
|
import { rgbToHex } from '@plugin/utils';
|
|
|
|
|
|
|
|
import { Fill } from '@ui/lib/types/utils/fill';
|
|
|
|
|
2024-06-05 05:36:49 -05:00
|
|
|
export const translateFill = (fill: Paint): Fill | undefined => {
|
2024-05-13 10:04:13 -05:00
|
|
|
switch (fill.type) {
|
|
|
|
case 'SOLID':
|
|
|
|
return translateSolidFill(fill);
|
|
|
|
case 'GRADIENT_LINEAR':
|
|
|
|
return translateGradientLinearFill(fill);
|
|
|
|
case 'GRADIENT_RADIAL':
|
|
|
|
return translateGradientRadialFill(fill);
|
|
|
|
case 'IMAGE':
|
2024-06-05 05:36:49 -05:00
|
|
|
return translateImageFill(fill);
|
2024-05-13 10:04:13 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
console.error(`Unsupported fill type: ${fill.type}`);
|
|
|
|
};
|
|
|
|
|
2024-06-05 05:36:49 -05:00
|
|
|
export const translateFills = (
|
2024-05-21 07:36:30 -05:00
|
|
|
fills: readonly Paint[] | typeof figma.mixed | undefined
|
2024-06-05 05:36:49 -05:00
|
|
|
): Fill[] => {
|
2024-05-21 07:36:30 -05:00
|
|
|
if (fills === undefined || fills === figma.mixed) return [];
|
|
|
|
|
2024-05-13 10:04:13 -05:00
|
|
|
const penpotFills: Fill[] = [];
|
|
|
|
|
2024-05-21 07:36:30 -05:00
|
|
|
for (const fill of fills) {
|
2024-06-05 05:36:49 -05:00
|
|
|
const penpotFill = translateFill(fill);
|
|
|
|
|
2024-05-13 10:04:13 -05:00
|
|
|
if (penpotFill) {
|
|
|
|
// fills are applied in reverse order in Figma, that's why we unshift
|
|
|
|
penpotFills.unshift(penpotFill);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
return penpotFills;
|
|
|
|
};
|
|
|
|
|
|
|
|
export const translatePageFill = (fill: Paint): string | undefined => {
|
|
|
|
switch (fill.type) {
|
|
|
|
case 'SOLID':
|
|
|
|
return rgbToHex(fill.color);
|
|
|
|
}
|
|
|
|
|
|
|
|
console.error(`Unsupported page fill type: ${fill.type}`);
|
|
|
|
};
|