Unable to modify Polygon Path in UXP Plugin

InDesign
1

Hi everyone,

While trying to write my now third inDesign plugin, I’ve found some issues when trying to modify a simple Polygon’s Path.

Here’s an example of what polygon i’ve been using:

image
image886×824 29.6 KB

when trying to modify the Anchor points I tried using this

app.selection[0].paths.firstItem().entirePath[0] = [100, 100]

aswell as plenty other ways (using …paths.item(0).entirePath, and even individual anchors…) but nothing seems to be actually working?

Path []( Number index )

Returns the Path with the specified index.

this part of the InDesign API is also very unclear, when trying to access a specific Path from an Paths object (or any instance from a “s” type object), is this supposed to be used as paths.[](index) ? In any case it’s very weird.

hopefully one of the more experienced people here can guide me.

Thanks,
Andreas

2

The reason it is Paths[0] is because it takes into account the case of a compound path. For a donut-shaped compound path, there are Paths[0] and Paths[1].
Also, entirePath[0] points to the first anchor point, which is an array of [left handle, anchor, right handle].
The left handle, anchor, and right handle are arrays of [x, y], respectively.

So, if you modify the code presented, it will look like this:

app.selection[0].paths.firstItem().entirePath[0] = [[100, 100], [100, 100], [100, 100]]

The following example creates a new document and draws a shape in it.
const {app} = require(“indesign”);
let doc = app.documents.add();
let rct = doc.rectangles.add();
rct.paths.firstItem().entirePath =
[[[90, 74], [84.4, 41.8], [82, 25.8]],
[[56, 27.8], [50, 39], [44, 27.8]],
[[18, 25.8], [15.6, 41.8], [10, 73.8]],
[[50, 89], [50, 97.8], [50, 89]]];

1 Like
3

Hi Omachi thank you for the help,

Unfortunately app.selection[0].paths.firstItem().entirePath[0] = [[100, 100], [100, 100], [100, 100]]

Does not work either, probably because the returned array for a path with straight lines and no left/right handles (since there are no bezier curves) like mine is of type :

[[x1, y1], [x2, y2], [x3, y3], ....]

At the end I solved it by actually setting the entire path array at once, apparently you cannot set individual points in the entirePath, you must send an array of the same size with the modifications at once.

I am using AnimeJS so the entire working code block when button pressed looks like this

    let path = app.selection[0].paths.firstItem();

    const newAnchors: any = [];

    for (let i = 0; i < path.entirePath.length; i++) {
        newAnchors.push({ x: path.entirePath[i][0], y: path.entirePath[i][1] });
    }

    anime({
        targets: newAnchors,
        x: function () {
            return anime.random(0, 200);
        },
        y: function () {
            return anime.random(0, 200);
        },
        easing: "easeInOutSine",
        loop: true,
        direction: "alternate",
        update: function () {
            pushAnchorToOriginalArray();
        },
    });

    function pushAnchorToOriginalArray() {
        let tempArray: any = [];
        newAnchors.forEach((anchor: { x: number; y: number }, index: number) => {
            tempArray.push([anchor.x, anchor.y]);
        });
        path.entirePath = tempArray;
    }

Hopefully anybody having the same issue finds this useful

4

I forgot. You can’t specify individual anchor points with the entirePath property. If you want to specify them, use the pathPoint object.
The first code shown looks like this:
app.selection[0].paths.firstItem().pathPoints.item(0).anchor = [100, 100];

However, using entirePath is much faster, so I don’t recommend it.