2024-06-26 04:38:42 -05:00
|
|
|
import { init } from '@common/map';
|
2024-06-26 01:11:57 -05:00
|
|
|
import { sleep } from '@common/sleep';
|
2024-05-29 10:33:29 -05:00
|
|
|
|
2024-06-06 10:24:59 -05:00
|
|
|
import { sendMessage } from '@ui/context';
|
2024-06-25 07:12:37 -05:00
|
|
|
import { createFile } from '@ui/lib/penpot';
|
|
|
|
import { PenpotFile } from '@ui/lib/types/penpotFile';
|
2024-06-25 09:08:59 -05:00
|
|
|
import { TypographyStyle } from '@ui/lib/types/shapes/textShape';
|
2024-06-25 07:12:37 -05:00
|
|
|
import { FillStyle } from '@ui/lib/types/utils/fill';
|
2024-06-28 05:17:56 -05:00
|
|
|
import {
|
|
|
|
colors,
|
|
|
|
componentShapes,
|
|
|
|
images,
|
|
|
|
typographies,
|
|
|
|
componentProperties as uiComponentProperties
|
|
|
|
} from '@ui/parser';
|
2024-06-25 07:12:37 -05:00
|
|
|
import { buildFile } from '@ui/parser/creators';
|
2024-05-29 10:33:29 -05:00
|
|
|
import { PenpotDocument } from '@ui/types';
|
2024-05-29 05:52:21 -05:00
|
|
|
|
2024-06-18 02:50:38 -05:00
|
|
|
import { parseImage } from '.';
|
2024-05-30 10:54:37 -05:00
|
|
|
|
2024-06-26 01:11:57 -05:00
|
|
|
const optimizeImages = async (binaryImages: Record<string, Uint8Array>) => {
|
|
|
|
const imagesToOptimize = Object.entries(binaryImages);
|
2024-06-18 02:50:38 -05:00
|
|
|
|
|
|
|
if (imagesToOptimize.length === 0) return;
|
|
|
|
|
2024-06-06 10:24:59 -05:00
|
|
|
let imagesOptimized = 1;
|
|
|
|
|
|
|
|
sendMessage({
|
2024-06-18 02:50:38 -05:00
|
|
|
type: 'PROGRESS_TOTAL_ITEMS',
|
|
|
|
data: imagesToOptimize.length
|
2024-06-06 10:24:59 -05:00
|
|
|
});
|
|
|
|
|
|
|
|
sendMessage({
|
2024-06-18 02:50:38 -05:00
|
|
|
type: 'PROGRESS_STEP',
|
|
|
|
data: 'optimization'
|
2024-06-06 10:24:59 -05:00
|
|
|
});
|
|
|
|
|
|
|
|
for (const [key, bytes] of imagesToOptimize) {
|
|
|
|
if (bytes) {
|
2024-06-26 01:11:57 -05:00
|
|
|
images.set(key, await parseImage(bytes));
|
2024-06-06 10:24:59 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
sendMessage({
|
|
|
|
type: 'PROGRESS_PROCESSED_ITEMS',
|
|
|
|
data: imagesOptimized++
|
|
|
|
});
|
|
|
|
|
|
|
|
await sleep(0);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2024-06-25 09:08:59 -05:00
|
|
|
const prepareTypographyLibraries = async (
|
|
|
|
file: PenpotFile,
|
|
|
|
styles: Record<string, TypographyStyle>
|
|
|
|
) => {
|
|
|
|
const stylesToRegister = Object.entries(styles);
|
|
|
|
|
|
|
|
if (stylesToRegister.length === 0) return;
|
|
|
|
|
|
|
|
let stylesRegistered = 1;
|
|
|
|
|
|
|
|
sendMessage({
|
|
|
|
type: 'PROGRESS_TOTAL_ITEMS',
|
|
|
|
data: stylesToRegister.length
|
|
|
|
});
|
|
|
|
|
|
|
|
sendMessage({
|
|
|
|
type: 'PROGRESS_STEP',
|
|
|
|
data: 'typoFormat'
|
|
|
|
});
|
|
|
|
|
|
|
|
for (const [key, style] of stylesToRegister) {
|
|
|
|
const typographyId = file.newId();
|
|
|
|
style.textStyle.typographyRefId = typographyId;
|
|
|
|
style.textStyle.typographyRefFile = file.getId();
|
|
|
|
style.typography.id = typographyId;
|
|
|
|
|
2024-06-26 01:11:57 -05:00
|
|
|
typographies.set(key, style);
|
2024-06-25 09:08:59 -05:00
|
|
|
|
|
|
|
sendMessage({
|
|
|
|
type: 'PROGRESS_PROCESSED_ITEMS',
|
|
|
|
data: stylesRegistered++
|
|
|
|
});
|
|
|
|
|
|
|
|
await sleep(0);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2024-06-25 07:12:37 -05:00
|
|
|
const prepareColorLibraries = async (file: PenpotFile, styles: Record<string, FillStyle>) => {
|
|
|
|
const stylesToRegister = Object.entries(styles);
|
|
|
|
|
|
|
|
if (stylesToRegister.length === 0) return;
|
|
|
|
|
|
|
|
let stylesRegistered = 1;
|
|
|
|
|
|
|
|
sendMessage({
|
|
|
|
type: 'PROGRESS_TOTAL_ITEMS',
|
|
|
|
data: stylesToRegister.length
|
|
|
|
});
|
|
|
|
|
|
|
|
sendMessage({
|
|
|
|
type: 'PROGRESS_STEP',
|
|
|
|
data: 'format'
|
|
|
|
});
|
|
|
|
|
|
|
|
for (const [key, fillStyle] of stylesToRegister) {
|
|
|
|
for (let index = 0; index < fillStyle.fills.length; index++) {
|
|
|
|
const colorId = file.newId();
|
|
|
|
fillStyle.fills[index].fillColorRefId = colorId;
|
|
|
|
fillStyle.fills[index].fillColorRefFile = file.getId();
|
|
|
|
fillStyle.colors[index].id = colorId;
|
|
|
|
fillStyle.colors[index].refFile = file.getId();
|
|
|
|
}
|
|
|
|
|
2024-06-26 01:11:57 -05:00
|
|
|
colors.set(key, fillStyle);
|
2024-06-25 07:12:37 -05:00
|
|
|
|
|
|
|
sendMessage({
|
|
|
|
type: 'PROGRESS_PROCESSED_ITEMS',
|
|
|
|
data: stylesRegistered++
|
|
|
|
});
|
|
|
|
|
|
|
|
await sleep(0);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2024-06-19 08:58:13 -05:00
|
|
|
export const parse = async ({
|
|
|
|
name,
|
|
|
|
children = [],
|
|
|
|
components,
|
|
|
|
images,
|
2024-06-25 10:12:20 -05:00
|
|
|
paintStyles,
|
2024-06-28 05:17:56 -05:00
|
|
|
textStyles,
|
|
|
|
componentProperties
|
2024-06-19 08:58:13 -05:00
|
|
|
}: PenpotDocument) => {
|
2024-06-26 04:38:42 -05:00
|
|
|
init(componentShapes, components);
|
2024-06-28 05:17:56 -05:00
|
|
|
init(uiComponentProperties, componentProperties);
|
2024-06-25 07:12:37 -05:00
|
|
|
|
|
|
|
const file = createFile(name);
|
2024-06-05 05:36:49 -05:00
|
|
|
|
2024-06-06 10:24:59 -05:00
|
|
|
await optimizeImages(images);
|
2024-06-25 10:12:20 -05:00
|
|
|
await prepareColorLibraries(file, paintStyles);
|
|
|
|
await prepareTypographyLibraries(file, textStyles);
|
2024-06-05 05:36:49 -05:00
|
|
|
|
2024-06-25 07:12:37 -05:00
|
|
|
return buildFile(file, children);
|
2024-05-29 05:52:21 -05:00
|
|
|
};
|