Add layer to Artboard

yositsa

Hey,

I have many Images on a page and I want to add an Artboard beneath each Image, so i've created a function:

function beginCreatingArtboards() {
	//	Begin adding artboards to all page layers
	addArtboardToChildren(selectedPage);
}

function addArtboardToChildren(page) {
	const nativeLayers = page.sketchObject.children();
	nativeLayers.forEach(nativeLayer => {
		const wrappedLayer = sketch.fromNative(nativeLayer);
		addArtboardTo(wrappedLayer);
	})
}

function addArtboardTo(layer) {
	//	Get layer frame
	let frame = layer.frame

	//	Create a new artboard
	let artboard = new Artboard({
		parent: selectedPage,
		frame: frame
	});

	//	Set artboard as layer's parent
	artboard.layers.push(layer);
}

For some reason it crashes, anyone has an idea?

kevgski

So when you do this page.sketchObject.children() you don't just get the layers but also the page itself.

console.log(page.sketchObject.children())

/*
__NSArrayM [
  <MSPage: 0x123884cc0>,
  <MSBitmapLayer: 0x123884e70>,
  <MSBitmapLayer: 0x1238851c0>,
  <MSBitmapLayer: 0x1238853e0> ]
*/

My hunch is that its crashing because you are trying to add a page to an artboard which shouldn't be possible.

In general, I would recommend new folks to never use sketchObject. You'll need to know how to look at the Sketch Headers (https://sketchplugins.com/d/2187-how-to-use-sketch-headers/2) and in general have an understanding of how Mac OS development works.

If you stick to javascript and the Sketch JS API then you can do something like this:

let sketch = require('sketch')
let Artboard = sketch.Artboard

let doc = sketch.getSelectedDocument()
let page = doc.selectedPage
let images = page.layers

images.forEach(image=>{
  let artboard = new Artboard({
    parent: page,
    frame: image.frame
  })
  image.parent = artboard

  // reset images to be positioned in the top left of the artboard
  image.frame.x = 0
  image.frame.y = 0
})