Get layer list from layers inside of a group?

Photoshop UXP Plugin API
1

Based on this documentation, it seems that it is only possible to get a list of top-level layers. Is there a way to get a list of layers from inside groups? It seems there must be a way I would think.

https://developer.adobe.com/photoshop/uxp/2022/ps_reference/classes/layers/

2

You can do it with this function (I’ve added some typescript for better type checking and you can remove it if you want to):

import { app, constants } from "photoshop";
import { Layers } from "photoshop/dom/collections/Layers";
import { Layer } from "photoshop/dom/Layer";

export const getAllLayers = (
  layers: Layers = app.activeDocument.layers,
  allLayers: Layer[] = []
) => {
  layers.forEach((layer: Layer) => {
    if (layer.kind !== constants.LayerKind.GROUP) {
      allLayers.push(layer);
    } else {
      getAllLayers(layer.layers, allLayers);
    }
  });
  return allLayers;
};

and to call it you can just write it like this

const documentLayers = getAllLayers();

3

Here I made it even shorter using ternary operator :slight_smile:

import { app, constants } from "photoshop";
import { Layers } from "photoshop/dom/collections/Layers";
import { Layer } from "photoshop/dom/Layer";

export const getAllLayers = (
  layers: Layers = app.activeDocument.layers,
  allLayers: Layer[] = []
) => {
  layers.forEach((layer: Layer) =>
    layer.kind !== constants.LayerKind.GROUP
      ? allLayers.push(layer)
      : getAllLayers(layer.layers, allLayers)
  );
  return allLayers;
};
4

Thanks. I need to give it a try. I’m not familiar with typescript. Which parts to I need to remove?

5

Because typescript is just a superset of javascript any javascript code is also valid typescript code. If you use Visual Studio Code and try to copy-paste this code into a .js file it will warn you with the red squiggly lines. That’s part of the code that needs to be removed :slight_smile:

So here is the result (plain javascript):

import { app, constants } from "photoshop";

export const getAllLayers = (
  layers = app.activeDocument.layers,
  allLayers = []
) => {
  layers.forEach((layer) =>
    layer.kind !== constants.LayerKind.GROUP
      ? allLayers.push(layer)
      : getAllLayers(layer.layers, allLayers)
  );
  return allLayers;
};

Over time I switched to typescript because of that type declaration and in my opinion, it keeps my code better and prevents errors.

6

Thanks!
I use Brackets. I’m not a “real” programmer so I don’t use Visual Studio. I know just enough to hack together some javascript to make my Photoshop ideas work :slight_smile:

7

You’re welcome :grinning: I also used Brackets before and I love the color theme it has so when switched to VS code I found and immediately installed that same color theme.

8

Brackets :heart:
I built my first enterprise CEP plugin with it because the IT department wouldn’t let me install VS Code.
I smashed out ≈10k lines of code in 3 months having never written a jot of JS in my life and tbh Brackets’ simplicity definitely helped with that - I’ll always have a soft spot for it.
That said, VS Code is flipping great and much like Photoshop it can seem really daunting at first because it is so feature rich, but when you realise that you only need about 10% of those features to actually produce working code it’s not so bad.
Definitely worth giving it a shot - it’s worth it for IntelliSense alone (the thing that reads your code as you type and autocompletes).

9

Hey there, what should I do if app.activeDocument is valid and returns it’s name correctly, but app.activeDocument.layers is always empty?

10

as mentioned in other topics, layers is a proxy not an actual array.
you can loop through it like arrays just not using for-in, you can the good old for i++ or for-of

11

you can use the “guard clause” with optional chaining (?) for that.
if (!layers) return;

complete code

import { app, constants } from "photoshop";

const getAllLayers = (
  layers = app.activeDocument?.layers,
  allLayers = []
) => {
  if (!layers) return;
  layers.forEach((layer) =>
    layer.kind !== constants.LayerKind.GROUP
      ? allLayers.push(layer)
      : getAllLayers(layer.layers, allLayers)
  );
  return allLayers;
};

the function is going to return undefined if no layers are found.

12

Also, if you don’t want to show the error to the user, but still want to log it for debugging purposes you can wrap the entire logic into try...catch block. Something like this:

try {
  // Logic goes here...
} catch (error) {
  console.log(error)
}
13

An easier-to-understand recursive function version:

import { app } from "photoshop";
import type { Layers } from "photoshop/dom/collections/Layers";
import type { Layer } from "photoshop/dom/Layer";

export const getAllLayers = (layers: Layers = app.activeDocument.layers) => {
  const allLayers: Layer[] = [];

  const collect = (layerList: Layers) => {
    layerList.forEach((layer: Layer) => {
      if (!layer.layers) {
        allLayers.push(layer);
      } else {
        collect(layer.layers);
      }
    });
  };

  collect(layers);
  return allLayers;
};

And for those who like an iterative approach, here it is:

import { app } from "photoshop";
import type { Layers } from "photoshop/dom/collections/Layers";
import type { Layer } from "photoshop/dom/Layer";

export const getAllLayers = (layers: Layers = app.activeDocument.layers) => {
  const allLayers: Layer[] = [];
  const stack = Array.from(layers);

  while (stack.length > 0) {
    const currentLayer = stack.pop();

    if (!currentLayer) return;

    if (!currentLayer.layers) {
      allLayers.push(currentLayer);
    } else {
      currentLayer.layers.forEach((layer: Layer) => {
        if (!layer.layers) {
          allLayers.push(layer);
        } else {
          stack.push(layer);
        }
      });
    }
  }

  return allLayers;
};