add processed image loading demo

makamekm · Feb 24, 2020 · 9a5b7c8 · 9a5b7c8
1 parent 2cdcbe5
commit 9a5b7c8
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 4 deletions.
diff --git a/api.js b/api.js
@@ -8,6 +8,7 @@ module.exports = {
   loadImages,
   loadNodes,
   loadURLPNGImages,
+  loadPNGImages,
   getHeaders
 };
 
@@ -37,6 +38,13 @@ async function loadURLImages(vectorList, fileKey, headers) {
   return await data.json();
 }
 
+async function loadPNGImages(imagesList, fileKey, headers) {
+  const guids = imagesList.join(',');
+  data = await fetch(`${baseUrl}/v1/images/${fileKey}?ids=${guids}&use_absolute_bounds=true`, { headers });
+  const json = await data.json();
+  return json.images;
+}
+
 async function loadURLPNGImages(fileKey, headers) {
   data = await fetch(`${baseUrl}/v1/files/${fileKey}/images`, { headers });
   const json = await data.json();

diff --git a/index.js b/index.js
@@ -1,7 +1,7 @@
 require('dotenv').config();
 
 const { preprocessCanvasComponents, createComponents, generateComponent } = require('./lib');
-const { loadCanvas, loadNodes, loadImages, loadURLImages, loadURLPNGImages, getHeaders } = require('./api');
+const { loadCanvas, loadNodes, loadImages, loadURLImages, loadURLPNGImages, loadPNGImages, getHeaders } = require('./api');
 const presets = require('./presets');
 
 function getConfig(options = {}) {
@@ -34,6 +34,7 @@ async function runFigmaReact(options = {}) {
 
   // Create shared objects
   const vectorMap = {};
+  const imageMap = {};
   const componentMap = {};
   const componentDescriptionMap = {};
   const vectorList = [];
@@ -42,6 +43,7 @@ async function runFigmaReact(options = {}) {
     componentMap,
     componentDescriptionMap,
     vectorMap,
+    imageMap,
     vectorList,
     options,
     fileKey,
@@ -65,6 +67,7 @@ async function runFigmaReact(options = {}) {
   const imageJSON = await loadURLImages(vectorList, fileKey, headers);
   const imgMap = await loadImages(imageJSON, fileKey, headers);
   const pngImages = await loadURLPNGImages(fileKey, headers);
+  const images = await loadPNGImages(Object.keys(imageMap), fileKey, headers);
 
   // Debug
   // const fs = require('fs');
@@ -76,6 +79,7 @@ async function runFigmaReact(options = {}) {
     headers,
     imgMap,
     pngImages,
+    images,
     componentMap,
     componentDescriptionMap,
     options

diff --git a/lib.js b/lib.js
@@ -501,7 +501,7 @@ function paintsRequireRender(paints) {
 }
 
 function preprocessTree(node, shared) {
-  const { vectorMap, vectorList } = shared;
+  const { vectorMap, vectorList, imageMap } = shared;
 
   let vectorsOnly = node.name.charAt(0) !== '#';
   let vectorVConstraint = null;
@@ -537,13 +537,17 @@ function preprocessTree(node, shared) {
     };
   }
 
-  if (VECTOR_TYPES.indexOf(node.type) >= 0) {
+  if (VECTOR_TYPES.includes(node.type)) {
     node.type = 'VECTOR';
     vectorMap[node.id] = node;
     vectorList.push(node.id);
     node.children = [];
   }
 
+  if (node.fills.find(f => f.type === 'IMAGE')) {
+    imageMap[node.id] = node;
+  }
+
   if (node.children) {
     for (const child of node.children) {
       preprocessTree(child, shared);

diff --git a/style.plugins.js b/style.plugins.js
@@ -205,7 +205,8 @@ function setHorizontalLayout({ node, middleStyle, innerStyle, parent, classNames
   }
 }
 
-async function setFrameStyles(state, { pngImages, headers, options }) {
+async function setFrameStyles(state, { pngImages, images, headers, options }) {
+  console.log(images[node.id]);
   const { node, middleStyle, props } = state;
   if (['FRAME', 'RECTANGLE', 'INSTANCE', 'COMPONENT'].includes(node.type)) {
     if (node.backgroundColor) {