How to export all children of all selected artboards in an async manner

#1

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?

#2

@stevekwak Help appreciated!

#3

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
	}
};
#4

It’s exporting all artboards like this, not their child elements as induviduals. (image attached below)

#5

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 :slight_smile:

1 Like
#6

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
} 
#7

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.

1 Like
#8

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?

}; [ ]);
#9

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.

#10

I’ll try again.
here’s how you can format the code.

1 Like
#11

@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);
}
#13
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);
2 Likes
#14

You the man…it’s working!