I need to first export all selected artboards (their children) in an async manner.
Can anyone help me out with this?
much appreciated!
Edit:
Further on after the exports are done I’d like to upload them to amazon s3.
Edit: Can I also see each child’s groupname have a group name?
@stevekwak Help appreciated!
Try this
const application = require("application");
const fs = require("uxp").storage.localFileSystem;
async function exportRendition(selection) {
const folder = await fs.getFolder();
const arr = await selection.items.map(async item => {
const file = await folder.createFile(`${item.guid}.png`);
let obj = {};
obj.node = item;
obj.outputFile = file;
obj.type = "png";
obj.scale = 2;
return obj
})
const renditions = await Promise.all(arr);
await application.createRenditions(renditions)
}
module.exports = {
commands: {
exportRendition
}
};
It’s exporting all artboards like this, not their child elements as induviduals. (image attached below)
I suppose you have to do the same for all children, like scenegraph.root.children.map, them the same of all nested children and so on. Classic tree walk
Can you give me some example how i can do that.
My data looks like this
Artboard ('ui') {
width: 1920, height: 1080
global X,Y: -20, 0
parent: RootNode
children: [Rectangle, Rectangle, Rectangle, Rectangle, Rectangle]
fill: ffffffff
}
Sure, if you task is that straight forward - just export children of specific artboard then exportRendition function should be updated a bit:
const folder = await fs.getFolder();
const scenegraph = require(“scenegraph”);
const artboard = scenegraph.root.children.filter(ab => ab.name === “Name of your artboard”);
const arr = await artboard.children.map(async …
and rest of the function goes here.
Or if you need to export elements from only selected artboards:
const folder = await fs.getFolder();
const scenegraph = require(“scenegraph”);
const artboards = selection.items.filter(node => node instanceof scenegraph.Artboard);
const arr = await artboards.reduce(async (all, ab) => {
const currentTask = ab.children.map(async item => { const file … return obj; });
const current = await Promise.all(currentTask);
return all.concat(current);
}; [ ]);
…
Code might contain some errors as I didn’t run it.
Thanks a ton for the reply. The code seems to be not working, has some syntax errors.
Can you please explain at the end of the code what’s this for?
}; [ ]);
sorry, of course it should be }, [ ]);
I just can’t find how to format code here. So in general it’s the of reduce function which looks like collection.reduce(async (all, current) => {…}, [ ]); where final [ ] is an initial value.
@gdreyv the code is working fine with a single artboard.
but when selected two artboards it gives this error:
Plugin TypeError: all.concat is not a function
at artboards.reduce (C:\Users\Saud\AppData\Local\Packages\Adobe.CC.XD_adky2gkssdxte\LocalState\develop\draftxr-react\main.js:35175:14)
The code looks like this:
async function exportRendition(selection) {
const folder = await fs.getFolder();
const artboards = selection.items.filter(node => node instanceof scenegraph.Artboard);
const arr = await artboards.reduce(async (all, ab) => {
const currentTask = ab.children.map(async item => {
const file = await folder.createFile(`${item.guid}.png`);
let obj = {};
obj.node = item;
obj.outputFile = file;
obj.type = 'png';
obj.scale = 2;
return obj;
});
const current = await Promise.all(currentTask);
return all.concat(current);
}, []);
const renditions = await Promise.all(arr);
await application.createRenditions(renditions);
}
const folder = await fs.getFolder();
const artboards = selection.items.filter(node => node instanceof scenegraph.Artboard);
const arr = await artboards.reduce(async (all, ab) => {
const currentTask = ab.children.map(async item => {
const file = await folder.createFile(`${item.guid}.png`);
let obj = {};
obj.node = item;
obj.outputFile = file;
obj.type = 'png';
obj.scale = 2;
return obj;
});
const current = await Promise.all(currentTask);
return (await all).concat(current);
}, []);
const renditions = await Promise.all(arr);
await application.createRenditions(renditions);
You the man…it’s working!