Penpot/penpot-exporter-figma-plugin
0
Fork 0
mirror of https://github.com/penpot/penpot-exporter-figma-plugin.git synced 2025-01-03 05:10:13 -05:00
Code Issues Activity

🐛 Fix images nested in the node tree

Browse source 
This fixes a bug where only top-level images in the node tree were
being added to the penpot export as images.  They were instead
treated as empty shapes.  Closes #10.

Signed-off-by: Ryan Breen <rbreen@zmags.com>
This commit is contained in:
Ryan Breen 2022-12-11 12:15:41 -05:00
parent 7cdbfe99c6
commit 30b1f3d5b1
1 changed files with 9 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/ui.tsx
View file

@ -103,21 +103,14 @@ export default class PenpotExporter extends React.Component<PenpotExporterProps,
file.addPage(node.name); file.addPage(node.name);
for (var child of node.children){ for (var child of node.children){
this.createPenpotItem(file, child, 0, 0); this.createPenpotItem(file, child, 0, 0);
if (child.fills) {
for (var fill of child.fills ){
if (fill.type === "IMAGE"){
this.createPenpotImage(file, child, 0, 0, this.state.images[fill.imageHash]);
}
}
}
} }
file.closePage(); file.closePage();
} }
createPenpotBoard(file, node, baseX, baseY){ createPenpotBoard(file, node, baseX, baseY){
file.addArtboard({ name: node.name, x: node.x - baseX, y: node.y - baseY, width: node.width, height: node.height }); file.addArtboard({ name: node.name, x: node.x + baseX, y: node.y + baseY, width: node.width, height: node.height });
for (var child of node.children){ for (var child of node.children){
this.createPenpotItem(file, child, node.x - baseX, node.y - baseY); this.createPenpotItem(file, child, node.x + baseX, node.y + baseY);
} }
file.closeArtboard(); file.closeArtboard();
} }
@ -238,8 +231,14 @@ export default class PenpotExporter extends React.Component<PenpotExporterProps,
this.createPenpotGroup(file, node,baseX, baseY); this.createPenpotGroup(file, node,baseX, baseY);
} }
else if (node.type == "RECTANGLE"){ else if (node.type == "RECTANGLE"){
// Find a fill of type IMAGE (note, a Figma node can have only one IMAGE fill)
const imageFill = node.fills.find((fill) => fill.type === "IMAGE");
if (imageFill){
this.createPenpotImage(file, node, baseX, baseY, this.state.images[imageFill.imageHash]);
} else {
this.createPenpotRectangle(file, node, baseX, baseY); this.createPenpotRectangle(file, node, baseX, baseY);
} }
}
else if (node.type == "ELLIPSE"){ else if (node.type == "ELLIPSE"){
this.createPenpotCircle(file, node, baseX, baseY); this.createPenpotCircle(file, node, baseX, baseY);
} }