Skip to content

Commit

Permalink
Merge pull request #16 from makamekm/develop
Browse files Browse the repository at this point in the history 
Midnight fixes
  • Loading branch information
@makamekm
makamekm authored Feb 29, 2020
2 parents 323d12f + 4ea18d1 commit f610519
Show file tree
Hide file tree
Showing 5 changed files with 345 additions and 151 deletions.
111 changes: 90 additions & 21 deletions api.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
const fetch = require('node-fetch');
const { colorString, getElementParams } = require('./lib');

const baseUrl = 'https://api.figma.com';

Expand All @@ -8,6 +9,7 @@ module.exports = {
loadVectors,
loadNodes,
loadRefImages,
loadListImages,
loadNodeImages,
getHeaders
};
Expand All @@ -19,51 +21,96 @@ function getHeaders(devToken) {
}

async function loadCanvas(fileKey, headers) {
let resp = await fetch(`${baseUrl}/v1/files/${fileKey}?geometry=paths`, { headers });
let data = await resp.json();
const resp = await fetch(`${baseUrl}/v1/files/${fileKey}?geometry=paths`, { headers });
const data = await resp.json();
const document = data.document;
if (data.err) {
throw new Error(data.err);
}
const canvas = document.children[0];
return canvas;
}

async function loadNodes(ids, fileKey, headers) {
let resp = await fetch(`${baseUrl}/v1/files/${fileKey}/nodes?geometry=paths&ids=${ids.join(',')}`, { headers });
let data = await resp.json();
return data.nodes;
if (ids.length > 0) {
const resp = await fetch(`${baseUrl}/v1/files/${fileKey}/nodes?geometry=paths&ids=${ids.join(',')}`, { headers });
const data = await resp.json();
if (data.err) {
throw new Error(data.err);
}
return data.nodes;
} else {
return {};
}
}

async function loadNodeImages({ imageMap, fileKey, headers, options }) {
const { imageScale, imageFormat } = options;
const guids = Object.keys(imageMap).join(',');
data = await fetch(`${baseUrl}/v1/images/${fileKey}?ids=${guids}&use_absolute_bounds=true&format=${imageFormat}&scale=${imageScale}`, {
headers
});
const json = await data.json();
return json.images;
if (Object.keys(imageMap).length > 0) {
const guids = Object.keys(imageMap).join(',');
const resp = await fetch(
`${baseUrl}/v1/images/${fileKey}?ids=${guids}&use_absolute_bounds=true&format=${imageFormat}&scale=${imageScale}`,
{
headers
}
);
const data = await resp.json();
if (data.err) {
throw new Error(data.err);
}
return data.images || {};
} else {
return {};
}
}

async function loadRefImages({ fileKey, headers }) {
data = await fetch(`${baseUrl}/v1/files/${fileKey}/images`, { headers });
const json = await data.json();
return json.meta.images;
const resp = await fetch(`${baseUrl}/v1/files/${fileKey}/images`, { headers });
const data = await resp.json();
if (data.err) {
throw new Error(data.err);
}
return data.meta.images || {};
}

async function loadVectorListImages({ vectorMap, fileKey, headers }) {
const guids = Object.keys(vectorMap).join(',');
data = await fetch(`${baseUrl}/v1/images/${fileKey}?ids=${guids}&format=svg`, { headers });
const json = await data.json();
return json.images || {};
async function loadListImages({ fileKey, headers, options }, guids, format = 'svg', absolute = false, scale = null) {
if (guids.length > 0) {
const { imageScale } = options;
scale = scale || imageScale;
const resp = await fetch(
`${baseUrl}/v1/images/${fileKey}?ids=${guids}&scale=${format === 'svg' ? 1 : imageScale}&format=${format}${
absolute ? '&use_absolute_bounds=true' : ''
}`,
{
headers
}
);
const data = await resp.json();
if (data.err) {
throw new Error(data.err);
}
return data.images || {};
} else {
return {};
}
}

async function loadVectorListImages(shared, format = 'svg', absolute = false) {
const { vectorMap } = shared;
return loadListImages(shared, Object.keys(vectorMap).join(','), format, absolute);
}

async function loadVectors(shared) {
const { headers } = shared;

const vectors = await loadVectorListImages(shared);
const vectors = await loadVectorListImages(shared, 'svg', true);
const vectorsRelative = await loadVectorListImages(shared, 'svg', false);

let promises = [];
let guids = [];
const guids = [];

for (const guid in vectors) {
if (vectors[guid] == null) vectors[guid] = vectorsRelative[guid];
if (vectors[guid] == null) continue;
guids.push(guid);
promises.push(fetch(vectors[guid], { headers }));
Expand All @@ -80,5 +127,27 @@ async function loadVectors(shared) {
vectors[guids[i]] = responses[i].replace('<svg ', '<svg preserveAspectRatio="none" ');
}

// for (const guid in vectorMap) {
// if (!vectors[guid]) {
// const node = vectorMap[guid];
// let svg = '<svg preserveAspectRatio="none">';
// let color = '#ffffff';
// if (node.fills && node.fills.length > 0) {
// for (const fill of node.fills) {
// if (fill.type === 'SOLID') {
// color = colorString(fill.color);
// }
// }
// }
// if (node.fillGeometry && node.fillGeometry.length > 0) {
// for (const fill of node.fillGeometry) {
// svg += `<path d="${fill.path}" fill="${color}"></path>`;
// }
// }
// svg += '</svg>';
// vectors[guid] = svg;
// }
// }

return vectors;
}
30 changes: 23 additions & 7 deletions content.plugins.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
const { emptyChildren, getComponentName, createComponent, getDescriptionStyles } = require('./lib');
const { emptyChildren, getComponentName, createComponent, getDescriptionStyles, saveSvgToDisk } = require('./lib');

const contentPlugins = [
applyStyles,
setComponentFromCache,
renderMask,
renderVector,
renderPropsChildren,
renderPropsChildrenIfEmpty,
Expand Down Expand Up @@ -47,9 +48,17 @@ async function setComponentFromCache(state, shared) {
}
}

function renderVector(state, { vectors, genClassName, additionalStyles }) {
function renderMask(state) {
const { node } = state;
if (node.isMask) {
emptyChildren(state);
}
}

async function renderVector(state, shared) {
const { vectors, genClassName, additionalStyles } = shared;
const { node, content } = state;
if (node.type === 'VECTOR' && vectors[node.id]) {
if (node.type === 'VECTOR' && vectors[node.id] && !node.isMask) {
emptyChildren(state);

const currentClass = genClassName();
Expand All @@ -60,7 +69,7 @@ function renderVector(state, { vectors, genClassName, additionalStyles }) {
const scaleHorizontal = cHorizontal === 'LEFT_RIGHT' || cHorizontal === 'SCALE';
const scaleVertical = cVertical === 'TOP_BOTTOM' || cVertical === 'SCALE';

let additionalSvgStyles = `\n.${currentClass} > :global(svg) {\n`;
let additionalSvgStyles = '';
if (scaleHorizontal) additionalSvgStyles += `left: 0;\nwidth: 100%;\n`;
if (scaleVertical) additionalSvgStyles += `top: 0;\nheight: 100%;\n`;
if (scaleHorizontal && scaleVertical) {
Expand All @@ -70,10 +79,17 @@ function renderVector(state, { vectors, genClassName, additionalStyles }) {
} else if (!scaleHorizontal && scaleVertical) {
additionalSvgStyles += `transform: translateX(-50%);\n`;
}
additionalSvgStyles += `}\n`;
additionalStyles.push(additionalSvgStyles);

content.push(`<div className='vector ${currentClass}' dangerouslySetInnerHTML={{__html: \`${vectors[node.id]}\`}} />`);
if (additionalSvgStyles.length > 0) {
additionalSvgStyles = `\n.${currentClass} {\n` + additionalSvgStyles;
additionalSvgStyles += `}\n`;
additionalStyles.push(additionalSvgStyles);
}

const fileName = node.id.replace(/\W+/g, '-');
const url = await saveSvgToDisk(fileName, vectors[node.id], shared);

content.push(`<img className='vector ${currentClass}' src='${url}' />`);
}
}

Expand Down
8 changes: 4 additions & 4 deletions index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,10 @@ async function runFigmaReact(options = {}) {
// Load the document from Figma
const canvas = await loadCanvas(fileKey, headers);

// Debug
// const fs = require('fs');
// fs.writeFileSync('./temp.json', JSON.stringify(canvas, null, 4));

// Wrap vectors and images
preprocessCanvasComponents(canvas, shared);

Expand All @@ -66,10 +70,6 @@ async function runFigmaReact(options = {}) {
shared.refImages = await loadRefImages(shared);
shared.images = await loadNodeImages(shared);

// Debug
// const fs = require('fs');
// fs.writeFileSync('./temp.json', JSON.stringify(canvas, null, 4));

// Create components
await createComponents(canvas, shared);

Expand Down
Loading

0 comments on commit f610519

Please sign in to comment.