From 4eeb74a9148b42508011100c62ef0264aaa9a7e3 Mon Sep 17 00:00:00 2001 From: Jordi Sala Morales Date: Mon, 3 Jun 2024 16:25:44 +0000 Subject: [PATCH 1/3] Improve performance of image processing --- package-lock.json | 24 +++++++++++++++++-- package.json | 1 + .../translators/fills/translateImageFill.ts | 7 +----- ui-src/lib/types/utils/imageColor.ts | 1 + ui-src/parser/creators/symbols/symbolFills.ts | 13 +++++++--- 5 files changed, 35 insertions(+), 11 deletions(-) diff --git a/package-lock.json b/package-lock.json index 3b3a9479..1d30ce32 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,15 +1,16 @@ { "name": "penpot-exporter", - "version": "0.3.1", + "version": "0.4.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "penpot-exporter", - "version": "0.3.1", + "version": "0.4.1", "license": "MPL2.0", "dependencies": { "@create-figma-plugin/ui": "^3.2", + "base64-js": "^1.5", "classnames": "^2.5", "preact": "^10.21", "react-hook-form": "^7.51", @@ -3240,6 +3241,25 @@ "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==", "dev": true }, + "node_modules/base64-js": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz", + "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ] + }, "node_modules/better-path-resolve": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/better-path-resolve/-/better-path-resolve-1.0.0.tgz", diff --git a/package.json b/package.json index 4782e6e6..c4551052 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "license": "MPL2.0", "dependencies": { "@create-figma-plugin/ui": "^3.2", + "base64-js": "^1.5", "classnames": "^2.5", "preact": "^10.21", "react-hook-form": "^7.51", diff --git a/plugin-src/translators/fills/translateImageFill.ts b/plugin-src/translators/fills/translateImageFill.ts index 5f8bf43b..4d242d6d 100644 --- a/plugin-src/translators/fills/translateImageFill.ts +++ b/plugin-src/translators/fills/translateImageFill.ts @@ -1,5 +1,4 @@ import { imagesLibrary } from '@plugin/ImageLibrary'; -import { detectMimeType } from '@plugin/utils'; import { Fill } from '@ui/lib/types/utils/fill'; import { ImageColor } from '@ui/lib/types/utils/imageColor'; @@ -36,15 +35,11 @@ const generateAndRegister = async (imageHash: string) => { const bytes = await image.getBytesAsync(); const { width, height } = await image.getSizeAsync(); - const b64 = figma.base64Encode(bytes); - const mtype = detectMimeType(b64); - const dataUri = `data:${mtype};base64,${b64}`; const imageColor: ImageColor = { width, height, - mtype, - dataUri, + bytes, keepAspectRatio: true, id: '00000000-0000-0000-0000-000000000000' }; diff --git a/ui-src/lib/types/utils/imageColor.ts b/ui-src/lib/types/utils/imageColor.ts index 39923a9f..1cbca761 100644 --- a/ui-src/lib/types/utils/imageColor.ts +++ b/ui-src/lib/types/utils/imageColor.ts @@ -9,4 +9,5 @@ export type ImageColor = { keepAspectRatio?: boolean; dataUri?: string; imageHash?: string; // @TODO: move to any other place + bytes?: Uint8Array; // @TODO: move to any other place }; diff --git a/ui-src/parser/creators/symbols/symbolFills.ts b/ui-src/parser/creators/symbols/symbolFills.ts index a4c28153..3e0478d3 100644 --- a/ui-src/parser/creators/symbols/symbolFills.ts +++ b/ui-src/parser/creators/symbols/symbolFills.ts @@ -1,4 +1,7 @@ +import { fromByteArray } from 'base64-js'; + import { imagesLibrary } from '@plugin/ImageLibrary'; +import { detectMimeType } from '@plugin/utils'; import { Fill } from '@ui/lib/types/utils/fill'; import { Gradient, LINEAR_TYPE, RADIAL_TYPE } from '@ui/lib/types/utils/gradient'; @@ -42,16 +45,20 @@ const symbolFillGradient = (fillGradient: Gradient): Gradient => { const symbolFillImage = (fillImage: ImageColor): ImageColor | undefined => { if (fillImage.dataUri) return fillImage; - const { imageHash, ...rest } = fillImage; + const { imageHash, bytes, ...rest } = fillImage; if (!imageHash) return; const imageColor = imagesLibrary.get(imageHash); - if (!imageColor) return; + if (!imageColor || !imageColor.bytes) return; + + const b64 = fromByteArray(imageColor.bytes); + const mtype = detectMimeType(b64); return { ...rest, - dataUri: imageColor?.dataUri + mtype, + dataUri: `data:${mtype};base64,${b64}` }; }; From 0f406d42bbc3b19d4b5b989f073c3420e7327da8 Mon Sep 17 00:00:00 2001 From: Jordi Sala Morales Date: Mon, 3 Jun 2024 16:30:59 +0000 Subject: [PATCH 2/3] refactor --- plugin-src/translators/fills/translateImageFill.ts | 9 ++++++++- ui-src/lib/types/utils/imageColor.ts | 1 - ui-src/parser/creators/symbols/symbolFills.ts | 13 +++---------- 3 files changed, 11 insertions(+), 12 deletions(-) diff --git a/plugin-src/translators/fills/translateImageFill.ts b/plugin-src/translators/fills/translateImageFill.ts index 4d242d6d..d2f3ab2d 100644 --- a/plugin-src/translators/fills/translateImageFill.ts +++ b/plugin-src/translators/fills/translateImageFill.ts @@ -1,4 +1,7 @@ +import { fromByteArray } from 'base64-js'; + import { imagesLibrary } from '@plugin/ImageLibrary'; +import { detectMimeType } from '@plugin/utils'; import { Fill } from '@ui/lib/types/utils/fill'; import { ImageColor } from '@ui/lib/types/utils/imageColor'; @@ -35,11 +38,15 @@ const generateAndRegister = async (imageHash: string) => { const bytes = await image.getBytesAsync(); const { width, height } = await image.getSizeAsync(); + const b64 = fromByteArray(bytes); + const mtype = detectMimeType(b64); + const dataUri = `data:${mtype};base64,${b64}`; const imageColor: ImageColor = { width, height, - bytes, + mtype, + dataUri, keepAspectRatio: true, id: '00000000-0000-0000-0000-000000000000' }; diff --git a/ui-src/lib/types/utils/imageColor.ts b/ui-src/lib/types/utils/imageColor.ts index 1cbca761..39923a9f 100644 --- a/ui-src/lib/types/utils/imageColor.ts +++ b/ui-src/lib/types/utils/imageColor.ts @@ -9,5 +9,4 @@ export type ImageColor = { keepAspectRatio?: boolean; dataUri?: string; imageHash?: string; // @TODO: move to any other place - bytes?: Uint8Array; // @TODO: move to any other place }; diff --git a/ui-src/parser/creators/symbols/symbolFills.ts b/ui-src/parser/creators/symbols/symbolFills.ts index 3e0478d3..a4c28153 100644 --- a/ui-src/parser/creators/symbols/symbolFills.ts +++ b/ui-src/parser/creators/symbols/symbolFills.ts @@ -1,7 +1,4 @@ -import { fromByteArray } from 'base64-js'; - import { imagesLibrary } from '@plugin/ImageLibrary'; -import { detectMimeType } from '@plugin/utils'; import { Fill } from '@ui/lib/types/utils/fill'; import { Gradient, LINEAR_TYPE, RADIAL_TYPE } from '@ui/lib/types/utils/gradient'; @@ -45,20 +42,16 @@ const symbolFillGradient = (fillGradient: Gradient): Gradient => { const symbolFillImage = (fillImage: ImageColor): ImageColor | undefined => { if (fillImage.dataUri) return fillImage; - const { imageHash, bytes, ...rest } = fillImage; + const { imageHash, ...rest } = fillImage; if (!imageHash) return; const imageColor = imagesLibrary.get(imageHash); - if (!imageColor || !imageColor.bytes) return; - - const b64 = fromByteArray(imageColor.bytes); - const mtype = detectMimeType(b64); + if (!imageColor) return; return { ...rest, - mtype, - dataUri: `data:${mtype};base64,${b64}` + dataUri: imageColor?.dataUri }; }; From f4bea3992f155fd0f400b18dc3ab02d731c337ce Mon Sep 17 00:00:00 2001 From: Jordi Sala Morales Date: Mon, 3 Jun 2024 16:35:16 +0000 Subject: [PATCH 3/3] add changelog --- .changeset/khaki-mirrors-smoke.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/khaki-mirrors-smoke.md diff --git a/.changeset/khaki-mirrors-smoke.md b/.changeset/khaki-mirrors-smoke.md new file mode 100644 index 00000000..6f10674a --- /dev/null +++ b/.changeset/khaki-mirrors-smoke.md @@ -0,0 +1,5 @@ +--- +"penpot-exporter": patch +--- + +Improve image processing speed