2.2. Red Hat Process Automation Manager スタンドアロンのエディターの設定

手順

1. 以下の方法のいずれかを使用して、スタンドアロンのエディターをインストールします。

   各 JavaScript ファイルを手動でダウンロード: この方法の場合は、以下の手順に従います。

   1. JavaScript ファイルをダウンロードします。
   2. ダウンロードした Javascript ファイルをホスト型アプリケーションに追加します。

   3. 以下の <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 パッケージの使用: この方法の場合は、以下の手順に従います。

   1. NPM パッケージを package.json ファイルに追加します。

      NPM パッケージの追加

      npm install @kogito-tooling/kie-editors-standalone

   2. 各エディターライブラリーを TypeScript ファイルにインポートします。

      各エディターのインポート

      import * as DmnEditor from "@kogito-tooling/kie-editors-standalone/dist/dmn"
      import * as BpmnEditor from "@kogito-tooling/kie-editors-standalone/dist/bpmn"

2. スタンドアロンのエディターをインストールしたら、以下の例のように提供されたエディター 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 要素。
   initialContent	DMN モデルのコンテンツへの Pomise。以下の例のように、このパラメーターは空にすることができます。 Promise.resolve("") Promise.resolve("<DIAGRAM_CONTENT_DIRECTLY_HERE>") fetch("MyDmnModel.dmn").then(content ⇒ content.text())
   readonly (任意)	エディターでの変更を許可します。コンテンツの編集を許可する場合は false (デフォルト)、エディターで読み取り専用モードの場合は true に設定します。
   origin (任意)	リポジトリーの起点。デフォルト値は window.location.origin です。
   resources (任意)	エディターのリソースのマッピング。たとえば、このパラメーターを使用して、BPMN エディターの DMN エディターまたは作業アイテム定義に含まれるモデルを提供します。マップの各エントリーには、リソース名と、content-type (text または binary) および content (initialContent パラメーターと同様) で設定されるオブジェクトが含まれています。

   返されるオブジェクトには、エディターの操作に必要なメソッドが含まれます。

   表2.2 返されたオブジェクトメソッド

   メソッド	説明
   getContent(): Promise<string>	エディターのコンテンツを含む promise を返します。
   setContent(path: string, 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 を参照してください。