How to add a line to an existing Artboard.

dwkns

Using...

  let path = NSBezierPath.bezierPath();
  path.moveToPoint(NSMakePoint(10,10));
  path.lineToPoint(NSMakePoint(400,200));

  let shape = MSShapeGroup.layerWithPath(MSPath.pathWithBezierPath(path));  
  let border = shape.style().addStylePartOfType(1);
  border.color = MSColor.colorWithRGBADictionary({r: 0.8, g: 0.1, b: 0.1, a: 1});
  border.thickness = 3;
  
  context.document.currentPage().addLayers([shape]);

I can add a line to a page.

But how do I add a line (or any other element) to a specific Artboard? And specifically add the element relative to the Artboards coordinates not the pages.

I'm getting the artboard with...

  let artboards = document.getLayersNamed('1080p')
  let artboard = artboards[0]

I understood that...
shape.parent = artboard

Should add the line to the artboard, but it doesn't seem to do it (at least the UI doesn't update to show it). But even then the line is added based on the pages coordinates, not the artboards.

Any ideas?

kevgski

I recently shared how you can create a line with the JS Sketch API here
https://sketchplugins.com/d/1360-how-do-i-draw-ovals-circles-and-lines-with-the-js-api/

But I’ll answer your question directly here as well. To add an element relative to an artboard’s coordinates all you need to do is specify the parent like so.

let sketch = require('sketch')
let document = sketch.getSelectedDocument()
let page = document.selectedPage

let Artboard = sketch.Artboard
let Rectangle = sketch.Rectangle

let myArtboard = new Artboard({
  name: 'myArtboard',
  frame: new Rectangle(0,0,400,400),
  parent: page
})

let ShapePath = sketch.ShapePath

let myRect = new ShapePath({
  name: 'myRect',
  frame: new Rectangle(10,10,60,60),
  parent: myArtboard,
  style: { fills: ['#000'] }
})

You can see that the artboard’s coordinates are at {x:0,y:0} relative to the page and then the rectangle that I drew is at {x:10,y:10} relative to the artboard.

Lastly, since you were wanting to draw a line you can do so with this:

const myLine = new ShapePath({
  name: 'myLine',
  frame: new Rectangle(0,0,40,100),
  style: { borders: ['#FF0000']},
  parent: myArtboard,
  points: [
    { point: { x: 0, y: 0 }},
    { point: { x: 1, y: 1 }}
  ]
})

dwkns

Thanks kevgski I can see how that adds a Rectangle to an Artboard. However your Line example creates a Rectangle (unfilled with 1px border) not a Line.

This creates the line as required. Albeit within a group (any ideas to remove it from it's group?)

 var path = NSBezierPath.bezierPath();
  path.moveToPoint(NSMakePoint(10,10));
  path.lineToPoint(NSMakePoint(400,200));

  var line = MSShapeGroup.layerWithPath(MSPath.pathWithBezierPath(path));  
  var border = line.style().addStylePartOfType(1);
  border.color = MSColor.colorWithRGBADictionary({r: 0.8, g: 0.1, b: 0.1, a: 1});
  border.thickness = 3;

This adds it to the currently selected Artboard in the correct position.

context.document.currentPage().currentArtboard().addLayers([line]);

However I'm struggling to add it to a specific artboard. You would think that this would work...

 let artboards = document.getLayersNamed('d-art')
 let artboard = artboards[0]
 artboard.addLayers([line]);

But it fails with

TypeError: artboard.addLayers is not a function. (In 'artboard.addLayers([line])', 'artboard.addLayers' is undefined)

The only way I can see to do it is...

  var selection = document.selectedLayers
  selection.clear()
  let artboards = document.getLayersNamed('d-art')
  let artboard = artboards[0]
  artboard.selected = true
  context.document.currentPage().currentArtboard().addLayers([line]);

But this seems like a very longwinded way of doing it. Surely there must be a more elegant way.

The API documentation doesn't seem to offer any clues.

kevgski

Your Line example creates a Rectangle (unfilled with 1px border) not a Line.

It's not a Rectangle, but I see what you mean with it not being quite a Line either… I’ve made an issue for this on the SketchAPI repo.

In the mean time you can do something like this:

let sketch = require('sketch')
let document = sketch.getSelectedDocument()
let page = document.selectedPage

let Artboard = sketch.Artboard
let Rectangle = sketch.Rectangle

let myArtboard = new Artboard({
  name: 'myArtboard',
  frame: new Rectangle(0,0,400,400),
  parent: page,
})

var path = NSBezierPath.bezierPath()
path.moveToPoint(NSMakePoint(10,10))
path.lineToPoint(NSMakePoint(400,200))
var nativeLine = MSShapeGroup.layerWithPath(MSPath.pathWithBezierPath(path))

let lineShape = sketch.fromNative(nativeLine)
let line = lineShape.layers[0]
line.parent = myArtboard
line.style = { borders: ['#FF0000'] }

*Note that for some reason you have to assign the line to the parent before styling it. I couldn’t get my border style to be applied like this

let lineShape = sketch.fromNative(nativeLine)
let line = lineShape.layers[0]
line.style = { borders: ['#FF0000'] }
line.parent = myArtboard

I hope that helps!