TypeError: layer.moveToBack() is not a function

This site is best viewed in a modern browser with JavaScript enabled.

TypeError: layer.moveToBack() is not a function

bryanberger

I'm trying to move a layer to the back by listening to SelectionChanged. According to the docs, all selectable layers inherit this property from api/Layer

code

export function SelectionChanged(context) {
  const action = context.actionContext
  const document = context.document || action.document

  if(document) {
  
    var selection = action.newSelection
    var layer = selection.firstObject()

    if(layer) {
      layer.moveToBack()
    }
  }
}

error
TypeError: layer.moveToBack() is not a function. (In 'layer.moveToBack()', 'layer.moveToBack' is undefined)

sonburn

I have only ever been able to achieve this with the following...

layer.select_byExpandingSelection(true,false);
actionWithType(context,"MSMoveToBackAction").doPerformAction(nil);

function actionWithType(context,type) {
	var controller = context.document.actionsController();

	if (controller.actionWithName) {
		return controller.actionWithName(type);
	} else if (controller.actionWithID) {
		return controller.actionWithID(type);
	} else {
		return controller.actionForID(type);
	}
}

bryanberger

sonburn Thanks this works, and made me realize I was accidentally mixing SketchJS and cocoascript methods

Winnie

bryanberger

Hi, I encounter the same problem and get the same error.
But I'm still confusing why layer.moveToBack() doesn't work as shown in https://developer.sketchapp.com/reference/api/#layer
and what "I was accidentally mixing SketchJS and cocoascript methods" means.
Could you please explain the difference between SketchJS and cocoascript methods?
Thanks a lot!

Winnie

PEZ

It really is confusing with the two API:s!

This works for me:

MSLayerMovement.moveToFront([layer]);

mathieudutour

In the first example of @bryanberger, layer is an MSLayer, which is a native object. It is not the Layer object you found in the API documentation.

The first example should be rewritten like this:

const sketch = require(‘sketch’)

export default () => {
  const doc = sketch.getSelectedDocument()
  if (!doc) {
    return
  }
  const layer = doc.selectedLayers.layers[0]
  if (layer) {
    layer.moveToBack()
  }
}

If you ever get an MSLayer you can wrap it to get a Layer like this: const layer = sketch.fromNative(msLayer)

Winnie

mathieudutour

Thank you for your detailed reply!
I still wonder besides the difference of object applied to, are there any other difference between
MSLayerMovement.moveToFront([msLayer]) between layer.moveToBack()
where msLayer is a native object MSLayer, layer is object Layer in API documentation
and layer = sketch.fromNative(msLayer).

For example, the efficiency.

Winnie.

mathieudutour

Not really, the implementation of layer.moveToBack is MSLayerMovement. It’s just that if MSLayerMovement change because of a Sketch update, we will make sure that layer.moveToBack doesn’t. So use the JS API

Winnie

mathieudutour

So, is the relationship between Layer and MSLayer similar to the relationship between Group and MSLayerGroup, where the former one is from JS API while the latter one is native?

I ask this because I tried to use new Group instead of MSLayerGroup before as below:

var Group = require('sketch/dom').Group;
var newGroup = new Group({
                          name: layerName,
                          layers: [layer],
                          parent: group
                          });`
newGroup.adjustToFit();

but encountered TypeError: newGroup.name is not a function. (In \'newGroup.name()\', \'newGroup.name\' is "background panel")' when I accessed name of newGroup and didn't know why.

I ended up using code below because I need to access newGroup's name. but I still cannot understand exact differences between native object and the other.
Do you mean that Sketch update may change native objects while those objects in JS API will not be influenced?

var newGroup = MSLayerGroup.new();
newGroup.setName(layerName);
newGroup.addLayers([layer]);
newGroup.resizeToFitChildrenWithOption(0);

group.addLayers([newGroup]);
group.resizeToFitChildrenWithOption(0);

Thanks a lot for your patience and reply!

Winnie

mathieudutour

It is indeed the same difference.
The error message that you get is pretty clear: name is not a function for the object from the api, it’s directly a string.

Yes, when the native objects are the native obj-c classes from the Sketch codebase. So when there is an update, it’s possible that they will change. The js api is there as a stable layer in between

Winnie

mathieudutour

I got it! Thanks again for helping me clarifying the difference between native objects and objects in js api.