Flipping a layer with the UXP function "flip" does not work, is there something wrong?

Photoshop UXP Plugin API
1

Hello everyone,
I am still wrestling with my plugin / script
Currently I am following the recommendation from some veterans here on the board, who told me it is better to write the manipulations that I want to perform from script in UXP as a plugin instead of doing it with the different scripts.
So following this idea I have started by reading through the posts and the documentation for the Photoshop API and following into the documentation at:

I did implement a version of flipping a layer that I thought should work.

Codes snippet:

// duplicate the active layer
let duplicatedLayer = await activeLayer.duplicate();

  switch (flipName) {
                            case "horizontal":
                                await duplicatedLayer.flip.horizontal();
                                                                    break;
                            case "vertical":
                                await duplicatedLayer.flip.vertical();
                                                                    break;
                            case "both":
                                await duplicatedLayer.flip.both();
                                                                    break;
                            default:
                                console.warn("Unknown flip mode:", flipName);
                    }

Still the function “duplicatedLayer.flip.XXX()” doen’t work. so apparently it is not recognised as a layer object.
Did I overlook something?

Thank you for any tips on this matter.

Cheers,
Oliver

2

So, a few things to note…

  1. The docs have the flip method example wrong. The flip method should be called with the axis as an argument like layer.flip("vertical").
  2. Both the duplicate and flip methods return a promise so they need to be awaited but they also need to be executed inside of a modal state using executeAsModal.

Below is a simple example that includes buttons for each flip type and a single method that does the flipping.

Try it out and let me know if you have any questions?

Here is index.html

<!DOCTYPE html>
<html>

<head>
  <script src="main.js"></script>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <sp-heading>Dupe and Flip</sp-heading>
  <sp-body>

    <div id="buttons">
      <sp-button id="flipLayerHorizontal">Flip Layer Horizontal</sp-button>
      <sp-button id="flipLayerVertical">Flip Layer Vertical</sp-button>
      <sp-button id="flipLayerBoth">Flip Layer Both Axis</sp-button>
    </div>

  </sp-body>
</body>

</html>

Here is main.js

const { app, core } = require("photoshop");

async function flipLayer(axis = "both") {
    const doc = app.activeDocument;

    // `duplicate` and `flip` need to execute inside of a modal context
    await core.executeAsModal(async () => {
        // note that is `doc.activeLayers` is an array

        // to only flip the first item I take the 0 index (or only item if there is only one layer selected)
        // if you want to flip all layers you can do the dupe and flip actions inside of a for loop
        const dupe = await doc.activeLayers[0].duplicate();

        dupe.name = `dupe flipped ${axis}`;
        dupe.flip(axis);
    });
}

document.getElementById("flipLayerHorizontal").addEventListener("click", async () => {
    await flipLayer("horizontal");
});
document.getElementById("flipLayerVertical").addEventListener("click", async () => {
    await flipLayer("vertical");
});
document.getElementById("flipLayerBoth").addEventListener("click", async () => {
    await flipLayer();
});
1 Like
3

Great
if one wants to rotate the level 90 degrees?

4

You would just need to use the layer.rotate method (docs).

  1. Add another button for rotate 90 degrees.
<sp-button id="rotateLayer90">Rotate Layer 90°</sp-button>
  1. Add a new click event listener for your new button that does the rotation inside of a modal context.
document.getElementById("rotateLayer90").addEventListener("click", async () => {
    const doc = app.activeDocument;
    await core.executeAsModal(async () => {
        await doc.activeLayers[0].rotate(90);
    });
});
1 Like
5

Hey Josh! (Finally took the time to read in your bio, you are doing a great job by the way)
Thank you for checking back on me! I really love your contribution, it helps me a lot!
The issue that I found is related to the API, it was using the syntax that I implemented.
Thank you so much for clearing this up.
I do not understand how the example would show a different way.
I have currently the implementation of execute as modal in the full function, so after I opened the document, the flipping should occur and then the file should be saved.
I will try to use this information that you have provided to me to implement it in my script.

Thank you again for your help and I will mark your answer as solving my issue once I have implemented it.
Is there a way to contact Adobe to fix their description of the function in the API description?

Cheers,
Oliver (sorry I answered so late to your reply! I was on a business trip with no access to the forum)

1 Like
6

Hey @OliverM, glad to hear I could help! As for the incorrect documentation, I submitted an issue in the documentation Github repo. I’m not sure how often they update the docs but at least they know of the error. Let me know if you run into any other issues with your implementation. I’m here to help. Have a great week!

1 Like
7

Hey @jduncan Josh, thank you!
Greatly appreciated, it feels a bit like running through a jungle and getting what you need with a machete sometimes :smiley: .
But we are in for a great experience at least.

Cheers,
Oliver

1 Like