TIP

このドキュメントはAIによって翻訳されました。不正確な情報については、英語版をご参照ください

StepDefinition

「StepDefinition」は、フローにおける個々のステップを定義します。各ステップは、アクション、イベント処理、またはその他の操作として機能します。ステップはフローの基本的な実行単位です。

タイプ定義

interface StepDefinition<TModel extends FlowModel = FlowModel>
  extends Partial<Omit<ActionDefinition<TModel, FlowRuntimeContext<TModel>>, 'name'>> {
  key?: string;
  isAwait?: boolean;
  use?: string;
  sort?: number;
  preset?: boolean;
  paramsRequired?: boolean;
  hideInSettings?: boolean;
  uiMode?: StepUIMode | ((ctx: FlowRuntimeContext<TModel>) => StepUIMode | Promise<StepUIMode>);
}

使用方法

class MyModel extends FlowModel {}

MyModel.registerFlow({
  key: 'pageSettings',
  steps: {
    step1: {
      use: 'actionName',
      title: 'First Step',
      sort: 0,
      preset: true
    },
    step2: {
      handler: async (ctx, params) => {
        // カスタム処理ロジック
        return { result: 'success' };
      },
      title: 'Second Step',
      sort: 1
    }
  }
});

属性説明

key

タイプ: string
必須: 否
説明: フロー内でステップを一意に識別するための識別子です。

提供されない場合、steps オブジェクト内のステップのキー名が使用されます。

例:

steps: {
  loadData: {  // キーは 'loadData' です
    use: 'loadDataAction'
  }
}

use

タイプ: string
必須: 否
説明: 使用する登録済み ActionDefinition の名前です。

use 属性を使用すると、登録済みのアクションを参照でき、定義の重複を避けることができます。

例:

// まずアクションを登録します
MyModel.registerAction({
  name: 'loadDataAction',
  handler: async (ctx, params) => {
    // データ読み込みロジック
  }
});

// ステップで使用します
steps: {
  step1: {
    use: 'loadDataAction',  // 登録済みのアクションを参照
    title: 'Load Data'
  }
}

title

タイプ: string
必須: 否
説明: ステップの表示タイトルです。

UI表示やデバッグに使用されます。

例:

title: 'Load Data'
title: 'Process Information'
title: 'Save Results'

sort

タイプ: number
必須: 否
説明: ステップの実行順序です。値が小さいほど先に実行されます。

同じフロー内の複数のステップの実行順序を制御するために使用されます。

例:

steps: {
  step1: { sort: 0 },  // 最も先に実行
  step2: { sort: 1 },  // 次に実行
  step3: { sort: 2 }   // 最後に実行
}

handler

タイプ: (ctx: FlowRuntimeContext<TModel>, params: any) => Promise<any> | any
必須: 否
説明: ステップのハンドラー関数です。

use 属性を使用しない場合、ハンドラー関数を直接定義できます。

例:

handler: async (ctx, params) => {
  // コンテキスト情報を取得
  const { model, flowEngine } = ctx;
  
  // 処理ロジック
  const result = await processData(params);
  
  // 結果を返します
  return { success: true, data: result };
}

defaultParams

タイプ: Record<string, any> | ((ctx: FlowRuntimeContext<TModel>) => Record<string, any> | Promise<Record<string, any>>)
必須: 否
説明: ステップのデフォルトパラメーターです。

ステップが実行される前に、パラメーターにデフォルト値が設定されます。

例:

// 静的なデフォルトパラメーター
defaultParams: {
  timeout: 5000,
  retries: 3,
  format: 'json'
}

// 動的なデフォルトパラメーター
defaultParams: (ctx) => {
  return {
    userId: ctx.model.uid,
    timestamp: Date.now()
  }
}

// 非同期のデフォルトパラメーター
defaultParams: async (ctx) => {
  const config = await loadConfig();
  return {
    apiUrl: config.apiUrl,
    apiKey: config.apiKey
  }
}

uiSchema

タイプ: Record<string, ISchema> | ((ctx: FlowRuntimeContext<TModel>) => Record<string, ISchema> | Promise<Record<string, ISchema>>)
必須: 否
説明: ステップのUI設定スキーマです。

インターフェースでのステップの表示方法とフォーム設定を定義します。

例:

uiSchema: {
  'x-component': 'Form',
  'x-component-props': {
    layout: 'vertical'
  },
  properties: {
    name: {
      type: 'string',
      title: 'Name',
      'x-component': 'Input'
    },
    age: {
      type: 'number',
      title: 'Age',
      'x-component': 'InputNumber'
    }
  }
}

beforeParamsSave

タイプ: (ctx: FlowSettingsContext<TModel>, params: any, previousParams: any) => void | Promise<void>
必須: 否
説明: パラメーター保存前に実行されるフック関数です。

ステップパラメーターが保存される前に実行され、パラメーターの検証や変換に使用できます。

例:

beforeParamsSave: (ctx, params, previousParams) => {
  // パラメーター検証
  if (!params.name) {
    throw new Error('Name is required');
  }
  
  // パラメーター変換
  params.name = params.name.trim().toLowerCase();
}

afterParamsSave

タイプ: (ctx: FlowSettingsContext<TModel>, params: any, previousParams: any) => void | Promise<void>
必須: 否
説明: パラメーター保存後に実行されるフック関数です。

ステップパラメーターが保存された後に実行され、他の操作をトリガーするために使用できます。

例:

afterParamsSave: (ctx, params, previousParams) => {
  // ログを記録
  console.log('Step params saved:', params);
  
  // 他の操作をトリガー
  ctx.model.emitter.emit('paramsChanged', params);
}

uiMode

タイプ: StepUIMode | ((ctx: FlowRuntimeContext<TModel>) => StepUIMode | Promise<StepUIMode>)
必須: 否
説明: ステップのUI表示モードです。

インターフェースでのステップの表示方法を制御します。

サポートされているモード:

'dialog' - ダイアログモード
'drawer' - ドロワーモード
'embed' - 埋め込みモード
またはカスタム設定オブジェクト

例:

// シンプルなモード
uiMode: 'dialog'

// カスタム設定
uiMode: {
  type: 'dialog',
  props: {
    width: 800,
    title: 'Step Configuration'
  }
}

// 動的なモード
uiMode: (ctx) => {
  return ctx.model.isMobile ? 'drawer' : 'dialog';
}

preset

タイプ: boolean
必須: 否
説明: プリセットステップであるかどうかを示します。

preset: true のステップのパラメーターは、作成時に記入する必要があります。このフラグがないステップは、モデル作成後に記入できます。

例:

steps: {
  step1: {
    preset: true,  // 作成時にパラメーターを記入する必要があります
    use: 'requiredAction'
  },
  step2: {
    preset: false, // パラメーターは後で記入できます
    use: 'optionalAction'
  }
}

paramsRequired

タイプ: boolean
必須: 否
説明: ステップパラメーターが必須であるかどうかを示します。

true の場合、モデルを追加する前に設定ダイアログが開きます。

例:

paramsRequired: true  // モデルを追加する前にパラメーターを設定する必要があります
paramsRequired: false // パラメーターは後で設定できます

hideInSettings

タイプ: boolean
必須: 否
説明: 設定メニューでステップを非表示にするかどうかを示します。

例:

hideInSettings: true  // 設定で非表示
hideInSettings: false // 設定で表示（デフォルト）

isAwait

タイプ: boolean
必須: 否
デフォルト値: true
説明: ハンドラー関数の完了を待つかどうかを示します。

例:

isAwait: true  // ハンドラー関数の完了を待ちます（デフォルト）
isAwait: false // 待たずに非同期で実行

完全な例

class DataProcessingModel extends FlowModel {}

DataProcessingModel.registerFlow({
  key: 'dataProcessing',
  title: 'Data Processing',
  steps: {
    loadData: {
      use: 'loadDataAction',
      title: 'データの読み込み',
      sort: 0,
      preset: true,
      paramsRequired: true,
      defaultParams: {
        source: 'api',
        timeout: 5000
      },
      uiMode: 'dialog'
    },
    processData: {
      handler: async (ctx, params) => {
        const data = await ctx.model.getData();
        return processData(data, params);
      },
      title: 'データの処理',
      sort: 1,
      defaultParams: (ctx) => ({
        userId: ctx.model.uid,
        timestamp: Date.now()
      }),
      beforeParamsSave: (ctx, params) => {
        if (!params.processor) {
          throw new Error('Processor is required');
        }
      },
      afterParamsSave: (ctx, params) => {
        ctx.model.emitter.emit('dataProcessed', params);
      }
    },
    saveData: {
      use: 'saveDataAction',
      title: 'データの保存',
      sort: 2,
      hideInSettings: false,
      uiMode: {
        type: 'drawer',
        props: {
          width: 600,
          title: '保存設定'
        }
      }
    }
  }
});

TIP

このドキュメントはAIによって翻訳されました。不正確な情報については、英語版をご参照ください

StepDefinition

タイプ定義

interface StepDefinition<TModel extends FlowModel = FlowModel>
  extends Partial<Omit<ActionDefinition<TModel, FlowRuntimeContext<TModel>>, 'name'>> {
  key?: string;
  isAwait?: boolean;
  use?: string;
  sort?: number;
  preset?: boolean;
  paramsRequired?: boolean;
  hideInSettings?: boolean;
  uiMode?: StepUIMode | ((ctx: FlowRuntimeContext<TModel>) => StepUIMode | Promise<StepUIMode>);
}

使用方法

class MyModel extends FlowModel {}

MyModel.registerFlow({
  key: 'pageSettings',
  steps: {
    step1: {
      use: 'actionName',
      title: 'First Step',
      sort: 0,
      preset: true
    },
    step2: {
      handler: async (ctx, params) => {
        // カスタム処理ロジック
        return { result: 'success' };
      },
      title: 'Second Step',
      sort: 1
    }
  }
});

属性説明

key

タイプ: string
必須: 否
説明: フロー内でステップを一意に識別するための識別子です。

提供されない場合、steps オブジェクト内のステップのキー名が使用されます。

例:

steps: {
  loadData: {  // キーは 'loadData' です
    use: 'loadDataAction'
  }
}

use

タイプ: string
必須: 否
説明: 使用する登録済み ActionDefinition の名前です。

use 属性を使用すると、登録済みのアクションを参照でき、定義の重複を避けることができます。

例:

// まずアクションを登録します
MyModel.registerAction({
  name: 'loadDataAction',
  handler: async (ctx, params) => {
    // データ読み込みロジック
  }
});

// ステップで使用します
steps: {
  step1: {
    use: 'loadDataAction',  // 登録済みのアクションを参照
    title: 'Load Data'
  }
}

title

タイプ: string
必須: 否
説明: ステップの表示タイトルです。

UI表示やデバッグに使用されます。

例:

title: 'Load Data'
title: 'Process Information'
title: 'Save Results'

sort

タイプ: number
必須: 否
説明: ステップの実行順序です。値が小さいほど先に実行されます。

同じフロー内の複数のステップの実行順序を制御するために使用されます。

例:

steps: {
  step1: { sort: 0 },  // 最も先に実行
  step2: { sort: 1 },  // 次に実行
  step3: { sort: 2 }   // 最後に実行
}

handler

タイプ: (ctx: FlowRuntimeContext<TModel>, params: any) => Promise<any> | any
必須: 否
説明: ステップのハンドラー関数です。

use 属性を使用しない場合、ハンドラー関数を直接定義できます。

例:

handler: async (ctx, params) => {
  // コンテキスト情報を取得
  const { model, flowEngine } = ctx;
  
  // 処理ロジック
  const result = await processData(params);
  
  // 結果を返します
  return { success: true, data: result };
}

defaultParams

ステップが実行される前に、パラメーターにデフォルト値が設定されます。

例:

// 静的なデフォルトパラメーター
defaultParams: {
  timeout: 5000,
  retries: 3,
  format: 'json'
}

// 動的なデフォルトパラメーター
defaultParams: (ctx) => {
  return {
    userId: ctx.model.uid,
    timestamp: Date.now()
  }
}

// 非同期のデフォルトパラメーター
defaultParams: async (ctx) => {
  const config = await loadConfig();
  return {
    apiUrl: config.apiUrl,
    apiKey: config.apiKey
  }
}

uiSchema

インターフェースでのステップの表示方法とフォーム設定を定義します。

例:

uiSchema: {
  'x-component': 'Form',
  'x-component-props': {
    layout: 'vertical'
  },
  properties: {
    name: {
      type: 'string',
      title: 'Name',
      'x-component': 'Input'
    },
    age: {
      type: 'number',
      title: 'Age',
      'x-component': 'InputNumber'
    }
  }
}

beforeParamsSave

タイプ: (ctx: FlowSettingsContext<TModel>, params: any, previousParams: any) => void | Promise<void>
必須: 否
説明: パラメーター保存前に実行されるフック関数です。

ステップパラメーターが保存される前に実行され、パラメーターの検証や変換に使用できます。

例:

beforeParamsSave: (ctx, params, previousParams) => {
  // パラメーター検証
  if (!params.name) {
    throw new Error('Name is required');
  }
  
  // パラメーター変換
  params.name = params.name.trim().toLowerCase();
}

afterParamsSave

タイプ: (ctx: FlowSettingsContext<TModel>, params: any, previousParams: any) => void | Promise<void>
必須: 否
説明: パラメーター保存後に実行されるフック関数です。

ステップパラメーターが保存された後に実行され、他の操作をトリガーするために使用できます。

例:

afterParamsSave: (ctx, params, previousParams) => {
  // ログを記録
  console.log('Step params saved:', params);
  
  // 他の操作をトリガー
  ctx.model.emitter.emit('paramsChanged', params);
}

uiMode

タイプ: StepUIMode | ((ctx: FlowRuntimeContext<TModel>) => StepUIMode | Promise<StepUIMode>)
必須: 否
説明: ステップのUI表示モードです。

インターフェースでのステップの表示方法を制御します。

サポートされているモード:

'dialog' - ダイアログモード
'drawer' - ドロワーモード
'embed' - 埋め込みモード
またはカスタム設定オブジェクト

例:

// シンプルなモード
uiMode: 'dialog'

// カスタム設定
uiMode: {
  type: 'dialog',
  props: {
    width: 800,
    title: 'Step Configuration'
  }
}

// 動的なモード
uiMode: (ctx) => {
  return ctx.model.isMobile ? 'drawer' : 'dialog';
}

preset

タイプ: boolean
必須: 否
説明: プリセットステップであるかどうかを示します。

preset: true のステップのパラメーターは、作成時に記入する必要があります。このフラグがないステップは、モデル作成後に記入できます。

例:

steps: {
  step1: {
    preset: true,  // 作成時にパラメーターを記入する必要があります
    use: 'requiredAction'
  },
  step2: {
    preset: false, // パラメーターは後で記入できます
    use: 'optionalAction'
  }
}

paramsRequired

タイプ: boolean
必須: 否
説明: ステップパラメーターが必須であるかどうかを示します。

true の場合、モデルを追加する前に設定ダイアログが開きます。

例:

paramsRequired: true  // モデルを追加する前にパラメーターを設定する必要があります
paramsRequired: false // パラメーターは後で設定できます

hideInSettings

タイプ: boolean
必須: 否
説明: 設定メニューでステップを非表示にするかどうかを示します。

例:

hideInSettings: true  // 設定で非表示
hideInSettings: false // 設定で表示（デフォルト）

isAwait

タイプ: boolean
必須: 否
デフォルト値: true
説明: ハンドラー関数の完了を待つかどうかを示します。

例:

isAwait: true  // ハンドラー関数の完了を待ちます（デフォルト）
isAwait: false // 待たずに非同期で実行

完全な例

class DataProcessingModel extends FlowModel {}

DataProcessingModel.registerFlow({
  key: 'dataProcessing',
  title: 'Data Processing',
  steps: {
    loadData: {
      use: 'loadDataAction',
      title: 'データの読み込み',
      sort: 0,
      preset: true,
      paramsRequired: true,
      defaultParams: {
        source: 'api',
        timeout: 5000
      },
      uiMode: 'dialog'
    },
    processData: {
      handler: async (ctx, params) => {
        const data = await ctx.model.getData();
        return processData(data, params);
      },
      title: 'データの処理',
      sort: 1,
      defaultParams: (ctx) => ({
        userId: ctx.model.uid,
        timestamp: Date.now()
      }),
      beforeParamsSave: (ctx, params) => {
        if (!params.processor) {
          throw new Error('Processor is required');
        }
      },
      afterParamsSave: (ctx, params) => {
        ctx.model.emitter.emit('dataProcessed', params);
      }
    },
    saveData: {
      use: 'saveDataAction',
      title: 'データの保存',
      sort: 2,
      hideInSettings: false,
      uiMode: {
        type: 'drawer',
        props: {
          width: 600,
          title: '保存設定'
        }
      }
    }
  }
});

#StepDefinition

#タイプ定義

#使用方法

#属性説明

#key

#use

#title

#sort

#handler

#defaultParams

#uiSchema

#beforeParamsSave

#afterParamsSave

#uiMode

#preset

#paramsRequired

#hideInSettings

#isAwait

#完全な例

#StepDefinition

#タイプ定義

#使用方法

#属性説明

#key

#use

#title

#sort

#handler

#defaultParams

#uiSchema

#beforeParamsSave

#afterParamsSave

#uiMode

#preset

#paramsRequired

#hideInSettings

#isAwait

#完全な例

StepDefinition

タイプ定義

使用方法

属性説明

key

use

title

sort

handler

defaultParams

uiSchema

beforeParamsSave

afterParamsSave

uiMode

preset

paramsRequired

hideInSettings

isAwait

完全な例

StepDefinition

タイプ定義

使用方法

属性説明

key

use

title

sort

handler

defaultParams

uiSchema

beforeParamsSave

afterParamsSave

uiMode

preset

paramsRequired

hideInSettings

isAwait

完全な例