Monkey Work – Demeter Chaichan

Monkey Work is a Photoshop plugin to facilitate the creation of UXP scripts.
You can add variables to scripts, these are displayed in the interface. Now you can use them in the script.

Why not just use Photoshop actions?
Actions have limitations, you can only record something and play it back later. You have no access to files, no support for multiple executions, no support for variables etc.

The idea is to create scripts for Artist quickly and easily. Can create simple tasks like copying and renaming layers up to whole export scripts. The interface is simple and organized for the Artist. Each project can have its own scripts. This makes it easy to customize the artist pipeline.

A task is a javascript class, so we can use the full power of UXP scripting.
The class look like this:

class task {
    /**
    * Script Config
    */
    config = {
        id: 'com.test.task',
        label: 'Test Task',
        version: '0.0.1',
        description: 'This is a Test Task'
    }
    
    /**
    * Script Variable Setup
    */
    variables = [
        {
            "name": "message",
            "label": "Message",
            "default": "Works",
            "type": "string",
            "required": true,
            "config": {}
        },
        {
            "name": "testSlider",
            "label": "Slice Count Y",
            "default": 4,
            "type": "slider",
            "config": {
                "min": 2,
                "max": 20
            }
        },
    ]
    
    /**
     * Run Method trigger by user.
     *
     * Use this.getVar(veriableName) to get Variable Value
     * @param executionContext UXP (https://developer.adobe.com/photoshop/uxp/2022/ps_reference/interfaces/executioncontext/)
     * @returns {Promise<void>}
     */
    async run(executionContext) {
        const app = require("photoshop").app;
        await app.showAlert(`${this.getVar("message")}, slieder count: ${this.getVar("testSlider")}`);
    }
}

JavaScript

The Properties config and variables are required. Also, the Method run.
Monkey work will add some methods to the class. You can use this in the run Method.

Class Interface:

export interface ITaskScriptClass {
    config: {
        id: string,
        label: string,
        version: string,
        description: string
    },
    variables: Array<ITaskVariable>,
    React: any, // Please use React not "this.React"
    run: (executionContext: ExecutionContext) => Promise<any>
    helper: {
        MathHelper: MathHelper,
        LayerHelper: LayerHelper,
        FileHelper: FileHelper,
        SelectHelper: SelectHelper,
        ToolHelper: ToolHelper,
        DialogHelper: DialogHelper
    }

    haveRequired: () => boolean;
    checkRequired: () => Promise<{ result: boolean, msg: string }>;
    setVar: (name: string, value: any) => any;
    getVar: (name: string) => any;
    clearVar: (name: string) => any;

    parsedVariables: Array<ITaskParsedVariables>
}

JavaScript

Variable appears in the Monkey Work interface. The User can change this, and you can parse the variables in your script.
Use this.getVar(variableName) to get the parsed Variable.

Config:

export interface ITaskVariable {
    name: string // Variable name
    label: string // Label in UI
    required?: boolean // is Variable required, check before start run method. Also, variable shows outside the advances Variables
    invisible?: boolean | (() => boolean) // is variable invisible, you can use a function to check other variables
    forceUpdate?: boolean // Redraw the Variable list be every value changes, helpful for hidde some variable dynamic
    default: any // Default value.
    type: ITaskVariableType, // Variable Type
    noSave?: boolean, // disable Saving the value for the next session
    noLabel?: boolean, // no showing label
    config?: ITaskVariableConfig // Type config
    toolTip?: string // tool tip
}

JavaScript

Types:

export type ITaskVariableType =
    "string" |
    "number" |
    "slider" |
    "layers" |
    "checkbox" |
    "selection" |
    "file" |
    "directory" |
    "color" |
    "dropdown" |
    "divider"

JavaScript

Type config:

export interface ITaskVariableConfig {
    min: number,
    max: number,
    multiple: boolean,
    save?: boolean;
    fileName?: string
    initialDomain?: storage.DomainSymbol
    types?: string[];
    initialLocation?: storage.File | storage.Folder;
    allowMultiple?: boolean;
    items?: Array<ISpDropdownMenuItem | ISpDropdownMenuItemDivider>
    size?: 'large' | 'medium' | 'small'
}

JavaScript