2.2. Red Hat Decision Manager スタンドアロンのエディターの設定
Red Hat Decision Manager は、自己完結型のライブラリーに分散されたスタンドアロンのエディターを提供し、エディターごとにオールインワンの JavaScript ファイルを提供します。JavaScript ファイルは、包括的な API を使用してエディターを設定および制御します。
以下の方法を使用して、スタンドアロンのエディターをインストールします。
- 各 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 @kie-tools/kie-editors-standalone
各エディターライブラリーを
TypeScript
ファイルにインポートします。各エディターのインポート
import * as DmnEditor from "@kie-tools/kie-editors-standalone/dist/dmn" import * as BpmnEditor from "@kie-tools/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 要素。
initialContent
DMN モデルのコンテンツへの Promise。以下の例のように、このパラメーターは空にすることができます。
-
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 を参照してください。
-