fix and improve

plugin-src/transformers/transformDocumentNode.ts

@@ -1,4 +1,5 @@
 import { componentsLibrary } from '@plugin/ComponentLibrary';
+import { imagesLibrary } from '@plugin/ImageLibrary';
 
 import { PenpotDocument } from '@ui/types';
 
@@ -27,6 +28,7 @@ export const transformDocumentNode = async (node: DocumentNode): Promise<PenpotD
   return {
     name: node.name,
     children,
-    components: componentsLibrary.all()
+    components: componentsLibrary.all(),
+    images: imagesLibrary.all()
   };
 };

plugin-src/translators/fills/translateImageFill.ts

@@ -17,20 +17,30 @@ export const translateImageFill = async (fill: ImagePaint): Promise<Fill | undef
 const translateImage = async (imageHash: string | null): Promise<ImageColor | undefined> => {
   if (!imageHash) return;
 
-  const libraryImage = imagesLibrary.get(imageHash);
+  const imageColor = imagesLibrary.get(imageHash) ?? (await calculateAndRegister(imageHash));
 
-  if (libraryImage) return libraryImage;
+  if (!imageColor) return;
 
+  const { dataUri, ...rest } = imageColor;
+
+  return {
+    ...rest,
+    imageHash
+  };
+};
+
+const calculateAndRegister = async (imageHash: string) => {
   const image = figma.getImageByHash(imageHash);
 
   if (!image) return;
 
+  const bytes = await image.getBytesAsync();
   const { width, height } = await image.getSizeAsync();
-  const b64 = figma.base64Encode(await image.getBytesAsync());
+  const b64 = figma.base64Encode(bytes);
   const mtype = detectMimeType(b64);
   const dataUri = `data:${mtype};base64,${b64}`;
 
-  const imageColor = {
+  const imageColor: ImageColor = {
     width,
     height,
     mtype,

ui-src/lib/types/utils/imageColor.ts

@@ -9,4 +9,5 @@ export type ImageColor = {
   id?: Uuid;
   keepAspectRatio?: boolean;
   dataUri?: string;
+  imageHash?: string;
 };

ui-src/parser/creators/symbols/symbolFillGradients.ts

@@ -1,3 +1,5 @@
+import { imagesLibrary } from '@plugin/ImageLibrary';
+
 import { Fill } from '@ui/lib/types/utils/fill';
 import { Gradient, LINEAR_TYPE, RADIAL_TYPE } from '@ui/lib/types/utils/gradient';
 
@@ -9,6 +11,16 @@ export const symbolFillGradients = (fills?: Fill[]): Fill[] | undefined => {
       fill.fillColorGradient = symbolFillGradient(fill.fillColorGradient);
     }
 
+    if (fill.fillImage?.imageHash) {
+      const imageColor = imagesLibrary.get(fill.fillImage?.imageHash);
+      const { imageHash, ...rest } = fill.fillImage;
+
+      fill.fillImage = {
+        ...rest,
+        dataUri: imageColor?.dataUri
+      };
+    }
+
     return fill;
   });
 };

ui-src/parser/parse.ts

@@ -1,4 +1,5 @@
 import { componentsLibrary } from '@plugin/ComponentLibrary';
+import { imagesLibrary } from '@plugin/ImageLibrary';
 
 import { createFile } from '@ui/lib/penpot';
 import { createComponentLibrary, createPage } from '@ui/parser/creators';
@@ -7,8 +8,10 @@ import { PenpotDocument } from '@ui/types';
 
 import { idLibrary } from '.';
 
-export const parse = ({ name, children = [], components }: PenpotDocument) => {
+export const parse = ({ name, children = [], components, images }: PenpotDocument) => {
   componentsLibrary.init(components);
+  imagesLibrary.init(images);
+
   uiComponents.init();
   idLibrary.init();
 

ui-src/types/penpotDocument.ts

@@ -1,8 +1,10 @@
 import { PenpotPage } from '@ui/lib/types/penpotPage';
 import { ComponentShape } from '@ui/lib/types/shapes/componentShape';
+import { ImageColor } from '@ui/lib/types/utils/imageColor';
 
 export type PenpotDocument = {
   name: string;
   children?: PenpotPage[];
   components: Record<string, ComponentShape>;
+  images: Record<string, ImageColor>;
 };