UXP create pencil shape tool by coordinates

My goal is to get an array of shapes and render photoshop layers with shapes based on the data.
The shapes include a rectangle, an ellipse, a line, an arrow, text, as well as a pencil
All shapes except the pencil return a descriptor based on which there is no problem with them

To draw a line, there is an array of objects with x and y coordinates.
But the pencil event does not have a valid descriptor

Now the problem is solved by creating a large number of lines that end up looking like a pencil
But there are a few disadvantages - performance, since there are many points that takes a lot of time to create each and a large number of layers, instead of one shape layer

Here is an example of the description you can get when you create a rectangle:

To summarize, what is the best way to create a pencil with an array of coordinates?

Short introduction
It is possible to create a markup in our web app
Then display this markup in photoshop based on api request
The result looks something like this

Some of the interactions done with tools are not (easily) scriptable, for example brush strokes or pathpoint manipulation via pen tools.
In Photoshop Actions you can activate tool recording which works kind of but I assume in a scripting context you’d have to deal with raw data which apparently isn’t that easy handle. Also, I just tested to record adding 3 points with the pen tool and playing back the action made my Photoshop freeze 2 out of 2 times.

Luckily, the pen tools have a nice and readable underlying data structure (unlike brush tools): Paths.

So you can build your paths using that data model and directly set the working path to then make a shape of it. You can either use Alchemist to inspect the object structure or look at the types i’ve put together on github. Using the types makes working with Paths super easy since you get type safety, autocompletion etc.

Alternatively, you can also use the scriptable tools that produce Path objects (as you’re already doing), such as the rectangle tool and so on. You don’t have to create a layer for every path object though. If you replace the set event with addTo you can stack multiple rectangles in one path and then make one shape layer from it.

The good thing about paths is that 1) they’re made out of bezier curves so you can do all sorts of calculatiuons and manipulations on them (there are some great libraries for that) and 2) paths are “lightweight” and updated super quickly by Photoshop when you set them from a script.
Here’s an example of one of my plugins that builds and updates custom shapes, the update happens almost immediately:

2 Likes