Resize modal dialog after opening?

Photoshop UXP Plugin API
1

A simple question that may not have a simple answer:

Is there a programmatic way to resize a modal dialog that has already been opened via uxpShowModal()?

2

What happens if you call the function again?
If that does not work, one solution could be to store all the displayed data in a state, close the dialog and reopen it with the new size, then populate the UI from the state again.

3

I forgot to test this yesterday, but I believe just changing the style width/height for the dialogElement (the one on which you call dialogElement.uxpShowModal()) should do it. If it doesn’t, probably just another UXP limitation, because this dialogElement is just a usual HTML dom element

4

That’s pretty much what I ended up doing. Since uxpShowModal is blocking waiting for a close reason, I added a Resized option to my CloseReason enum (TypeScript). My ModalDialog.Open class method intercepts this and re-opens the dialog box in a loop.

/**
  * Opens the modal dialog box.
  * @return Close reason.
  */
async Open(): Promise<ModalDialog.CloseReason> {
    
    let closeReason: ModalDialog.CloseReason = 
        ModalDialog.CloseReason.Unknown;

    do {

      if (closeReason === ModalDialog.CloseReason.Resized) {
        // Set a resizing flag to indicate the dialog is opening after a resize.
        this.isResizing = true;
      }

      // Show modal dialog.
      closeReason = await this.elDialog.uxpShowModal({
        title: this.title,
        resize: this.resize,
        size: {
          width: this.width,
          height: this.height,
        },
        minSize: {
          width: this.minWidth || 'auto',
          height: this.minHeight || 'auto',
        },
        maxSize: {
          width: this.maxWidth || 'auto',
          height: this.maxHeight || 'auto',
        },
      });

      // Reopen dialog box if performing a resize.
      
    } while (closeReason === ModalDialog.CloseReason.Resized);

    return closeReason;
  }

It works well, with the downside being that you see the dialog box disappear before it comes back. Hopefully some day we’ll get API methods to do this more cleanly.

1 Like
5

What is your use case? This probably helps to decide if it will be addressed in the future.

6

Use case is an expand/restore button on a Video Player modal dialog box that I have created.

When the user clicks the button to expand the dialog, I query the available display resolutions via core.getDisplayConfiguration({}); and then resize the dialog box to fit within the smallest width and height detected while maintaining the video’s aspect ratio.

image
image852Ă—596 72.3 KB

A curious side note, I noticed that Mac users get a green maximize button on their modal dialog title bars while Windows users only have the option to close the dialog.

image

2 Likes
7

This is super interesting. I have very similar requirements for two of my modal windows. Also one should also show tutorial video and another should have full screen size.
I have not found which monitor is current active one where dialog is shown in core.getDisplayConfiguration({});. Do you have a solution here?

Also I am wondering if you publish your plugin in CC? As far I know such dialogs are not allowed and it should be refused. See my threat here: Style guide?
“So a modal dialog needs always 40px padding, and dialog buttons at the bottom” otherwise these will not be approved.