2.2. Red Hat Process Automation Manager スタンドアロンのエディターの設定
Red Hat Process Automation Manager は、自己完結型のライブラリーに分散されたスタンドアロンのエディターを提供し、エディターごとにオールインワンの JavaScript ファイルを提供します。JavaScript ファイルは、包括的な API を使用してエディターを設定および制御します。
スタンドアロンのエディターは、以下の 3 つの方法でインストールできます。
- 各 JavaScript ファイルを手動でダウンロード
- NPM パッケージの使用
手順
以下の方法のいずれかを使用して、スタンドアロンのエディターをインストールします。
各 JavaScript ファイルを手動でダウンロード: この方法の場合は、以下の手順に従います。
- JavaScript ファイルをダウンロードします。
- ダウンロードした Javascript ファイルをホスト型アプリケーションに追加します。
以下の
<script>タグを HTML ページに追加します。DMN エディターの HTML ページのスクリプトタグ
<script src="https://<YOUR_PAGE>/dmn/index.js"></script>
BPMN エディターの HTML ページのスクリプトタグ
<script src="https://<YOUR_PAGE>/bpmn/index.js"></script>
NPM パッケージの使用: この方法の場合は、以下の手順に従います。
NPM パッケージを
package.jsonファイルに追加します。NPM パッケージの追加
npm install @redhat/kogito-tooling-kie-editors-standalone
各エディターライブラリーを TypeScript ファイルにインポートします。
各エディターのインポート
import * as DmnEditor from "@redhat/kogito-tooling-kie-editors-standalone/dist/dmn" import * as BpmnEditor from "@redhat/kogito-tooling-kie-editors-standalone/dist/bpmn"
スタンドアロンのエディターをインストールしたら、以下の例のように提供されたエディター API を使用して必要なエディターを開き、DMN エディターを開きます。API はエディターごとに同じです。
DMN スタンドアロンのエディターを開く
const editor = DmnEditor.open({ container: document.getElementById("dmn-editor-container"), initialContent: Promise.resolve(""), readOnly: false, origin: "", resources: new Map([ [ "MyIncludedModel.dmn", { contentType: "text", content: Promise.resolve("") } ] ]) });エディター API で以下のパラメーターを使用します。
表2.1 パラメーターの例
パラメーター 説明 containerエディターが追加される HTML 要素。
initialContentDMN モデルのコンテンツへの Pomise。以下の例のように、このパラメーターは空にすることができます。
-
Promise.resolve("") -
Promise.resolve("<DIAGRAM_CONTENT_DIRECTLY_HERE>") -
fetch("MyDmnModel.dmn").then(content ⇒ content.text())
readonly(任意)エディターでの変更を許可します。コンテンツの編集を許可する場合は
false(デフォルト)、エディターで読み取り専用モードの場合はtrueに設定します。注記現在、DMN エディターだけが読み取り専用モードをサポートしています。
origin(任意)リポジトリーの起点。デフォルト値は
window.location.originです。resources(任意)エディターのリソースのマッピング。たとえば、このパラメーターを使用して、BPMN エディターの DMN エディターまたは作業アイテム定義に含まれるモデルを提供します。マップの各エントリーには、リソース名と、
content-type(textまたはbinary) およびcontent(initialContentパラメーターと同様) で設定されるオブジェクトが含まれています。返されるオブジェクトには、エディターの操作に必要なメソッドが含まれます。
表2.2 返されたオブジェクトメソッド
メソッド 説明 getContent(): Promise<string>エディターのコンテンツを含む promise を返します。
setContent(content: string): voidエディターの内容を設定します。
getPreview(): Promise<string>現在のダイアグラムの SVG 文字列が含まれる promise を返します。
subscribeToContentChanges(callback: (isDirty: boolean) ⇒ void): (isDirty: boolean) ⇒ voidエディターでコンテンツを変更し、サブスクライブ解除に使用されるのと同じコールバックを返す際に呼び出されるコールバックを設定します。
unsubscribeToContentChanges(callback: (isDirty: boolean) ⇒ void): voidエディターでコンテンツが変更される際に渡されたコールバックのサブスクライブを解除します。
markAsSaved(): voidエディターの内容が保存されることを示すエディターの状態をリセットします。また、コンテンツの変更に関連するサブスクライブされたコールバックをアクティベートします。
undo(): voidエディターの最後の変更を元に戻します。また、コンテンツの変更に関連するサブスクライブされたコールバックをアクティベートします。
redo(): voidエディターで、最後に元に戻した変更をやり直します。また、コンテンツの変更に関連するサブスクライブされたコールバックをアクティベートします。
close(): voidエディターを終了します。
getElementPosition(selector: string): Promise<Rect>要素をキャンバスまたはビデオコンポーネント内に置いた場合に、標準のクエリーセレクターを拡張する方法を提供します。
selectorパラメーターは、Canvas:::MySquare、Video:::PresenterHandなどの<PROVIDER>:::<SELECT>形式に従う必要があります。このメソッドは、要素の位置を表すRectを返します。envelopeApi: MessageBusClientApi<KogitoEditorEnvelopeApi>これは高度なエディター API です。高度なエディター API の詳細は、MessageBusClientApi および KogitoEditorEnvelopeApi を参照してください。
-