Simple Crop script question?

So I’m trying to learn UXP, please bear with me :slight_smile:
My goal is to crop the document to 200x200 when the button is pressed.

I added this code to the default plugin template provided for UXP (removed some redundant code):

I know width and height can be accessed correctly, but Crop() does nothing.
Neither does Resize() if I try it. The code throws no errors.

Any ideas?

function showLayerNames() {
 (...)
    const doc = app.activeDocument;
    var width = doc.width;
    var height = doc.height;
    var newBounds = [0,0,200,200];
    doc.crop(newBounds);
(...)
}
document.getElementById("btnPopulate").addEventListener("click", showLayerNames);

(Ultimately I want to resize the document relative to width and height, but first I just want crop to work at all, hence the unused variables).

Edit: tried the same but as an Async function with Await before the crop, still nothing.

From which documentation did you take the information about the crop function?
Checking the UXP docs, it lists the following parameters:
image
The bounds there are an object with left/right/top/bottom, not a simple array.

I recommend using the debug window while developing your plugins, in most cases it will give you helpful error messages so that you can find bugs more easily:

image
→ it expected a Rectangle with the “left” key.


→ Crop function was called correctly.
(Using API-version 2 though, so it won’t run outside a modal scope)

Thank you so much for the reply! :slight_smile:

I dunno what I’m doing wrong, firstly, even after opening the Debug console of the UXP developer tools, I don’t get errors you describe.

It will throw a syntax error in the console if the code is blatantly wrong, but doing crop([0,0,200,200]) or even something kinda strange like crop([200,200])doesn’t throw an error. Really odd.

When I enable “pause on exceptions” in the debugger it will stop when I do crop({left:200, right:200}) and indicate missing parameters. Why not in the console though? Weird…

Anyway, with “pause on exceptions” your code example runs perfectly fine and doesn’t halt. Except the document doesn’t crop, nothing happens :man_shrugging:

Here’s some of the notes from the debugger when I try a crop or resize in various ways.

I wrote that directly inside the debug window. Maybe you need a try/catch with a console.error to output the errors. You could try to write the same in the debug window and see if you get the errors there.

Not sure why cropping doesn’t work for you. Which API version are you coding for?

Thanks for the help, I got it!

So #1, I started digging around the documentation and found this:

From there I realized executeAsModal is key. And finally built the code below which totally works:

async function cropDocument(){
const app = require(‘photoshop’).app;
const myDoc = app.activeDocument;
myDoc.crop({left:0, top:0, right: 200, bottom: 200});
}

require(‘photoshop’).core.executeAsModal(cropDocument);

Coming from ExtendScript this was a bit of a leap, but I think now that I have this much it should be smooth sailing. Huge thanks for bringing me on the right track! :slight_smile:

Edit: One thing I still don’t understand is how to add execute as modal to an event listener (like on button press)

document.getElementById(“btnPopulate”).addEventListener(“click”, showLayerNames);
document.getElementById(“btnCrop”).addEventListener(“click”, resizeDocument);

showLayerNames is sync and it works
resizeDocument is async and doesn’t work. It does run when executeAsModal is called at plugin start though…

OK, what does work:

function runAsync(){
  require('photoshop').core.executeAsModal(resizeDocument);
}

document.getElementById("btnCrop").addEventListener("click", runAsync);

And then it works, if I wrap async code in a sync call…is that how it’s supposed to be?

1 Like

It’s not about sync or async, it’s about what modifies the state of photoshop and what doesn’t (- getters don’t).
From the docs link you’ve posted:

A key concept to understand before diving straight into Photoshop UXP plugin development is what we have termed “execute as modal”. Any and all commands that may modify the document , or the application state , must utilize executeAsModal.

1 Like

:man_facepalming: OK, yeah, reading comprehension would help me immensely.

Thanks for pointing this out. Think I’m finally on the right track :slight_smile:

1 Like