Action calling UXP plugin functionality example

Photoshop UXP Plugin API
,
1

Greetings everyone,

I have recently stumbled upon the action recording for uxp plugins. I have read through the documentation and I genuinely have no idea how I would implement it in the first place. Any help just making a simple implementation. I am currently using the React Starter template created using UDT. Can anyone provide a code sample of how I would go about doing it?

Thanks

2

This is a sample plugin for action recording based on the React Starter template. The Demos.jsx part of the template would be replaced by this.

Clicking the button will translate the active layer in the X direction by the amount of the number entered in the panel.

action-record-sample
action-record-sample484×522 45.8 KB

The translate function can be recorded in Photoshop’s Actions panel as usual.

action-recording-sample2
action-recording-sample2690×406 76 KB

I have detailed what is done in which part as a comment in the source code. Please take a look at it.

/**
  * @file action-recording-sample
  * https://forums.creativeclouddeveloper.com/t/action-calling-uxp-plugin-functionality-example/
  * @version 1.0.0
  * @author sttk3.com
*/

// react
import React, { useState } from 'react' ;

// adobe
import { app, core, action } from 'photoshop' ;
import { WC } from '../components/WC' ;

import './Translate.css' ;

/**
  * Do something in the plugin. 
  * Translate in the X direction in this sample
  * @param {number} deltaX X(px)
  * @returns {Promise<void>}
*/
const translate = async (deltaX) => {
  // Exit if there is no target
  const doc = app.activeDocument ;
  if(doc.activeLayers.length <= 0) {return ;}

  // Translate selected layer
  const selectedLayer = doc.activeLayers[0] ;
  selectedLayer.translate(deltaX, 0) ;

  /*
    Allow the user to record plugin actions. And define the data to be recorded when doing that.

    The user does not need any special steps other than recording the normal actions of Photoshop
  */
  action.recordAction(
    // RecordActionOptions
    {
      /*
        A command name that will be shown in the actions panel. You may name it whatever you wish
      */
      name: `translate(${deltaX}, 0)`, 

      /*
        The name of the function to execute when replaying the recorded action. 
        The function with that name must exist at the top level. In this sample I chose `actionHandler`
      */
      methodName: `actionHandler`, 
    }, 

    /*
      Info to be passed to the actionHandler, which may be in any format you wish
    */ 
    {
      deltaX: deltaX
    }
  ) ;
} ;

/**
  * Play recorded plugin action
  * @param {ExecutionContext} executionContext You can get information about the currently running executeAsModal from this variable
  * @param {any} info Arguments (info) defined in recordAction can be obtained from this variable
  * @returns {Promise<void>}
*/
const actionHandler = async (executionContext, info) => {
  await translate(info.deltaX) ;
} ;

// Add actionHandler to the top level
window.actionHandler = actionHandler ;

// Main panel
export const PanelTranslate = () => {
  const [deltaX, setDeltaX] = useState(100) ;

  return (
    <div className='container'>
      <WC
        onChange={ (event) => {
          try {
            const x = Number(event.target.value) ;
            setDeltaX(x) ;
          } catch(e) {
            console.error(e) ;
          }
        } }
      >
        <sp-textfield
          style={ {width: '100%', marginBottom: '12px'} }
          value={deltaX.toString()}
        >
          <sp-label slot='label'>Translate X</sp-label>
        </sp-textfield>
      </WC>
      
      <sp-button
        style={ {width: 'calc(100% - 16px)'} }
        variant='primary'
        onClick={ async () => {
          await core.executeAsModal(
            async (executionContext) => {
              await translate(deltaX) ;
            }, 
            
            {commandName: 'Translate X'}
          ) ;
        } }
      >
        Apply
      </sp-button>
    </div>
  ) ;
}