ドラッグ・アンド・ドロップ

ドラッグ・アンド・ドロップ機能を使用すると、ダイアグラム内部で外部コンポーネントをドラッグしている間に任意のアクションを実行できます。この機能は、Diagram ウィジェットによりバインドでき、アクションはカスタマイズ可能です。 この機能は、パレットから要素をドラッグしてグラフを作成するために一般的に使用されます。

DropSource コンポーネント

DropSource は、グラフ内部でドラッグ可能な小さいコンポーネントで、ダイアグラム内で特定のアクションを実行します。これは、標準 Dojo コンポーネント (dojo.dnd.Source) で、ダイアグラム内にカスタム要素をドラッグすることにより構成することができます。このコンポーネントをドラッグしている間、マウス・カーソルの後ろにアバターが表示され、ドラッグ・アンド・ドロップ・アクションが行われていることが示されます。
例:
var dndObj = new dojo.dnd.Source(node, {singular: true, copyOnly: true, creator: nodeCreator});
nodeCreator 関数が項目を受け取り、以下を返します。
return {node: node, data: item, type: type}
ここで、
  • nodeは、nodeCreator 関数によって作成されたデータ項目の DOM 表現です。 このノードには、固有 ID がなければなりません。ID が割り当てられない場合、後からコンテナーによって生成、割り当てられます。
  • data は、データ項目自体です。nodeCreator 関数によって、変更または置換が可能です。
  • type は、項目のタイプを識別するストリング配列です。 これは、ドラッグ・アンド・ドロップ操作時に互換性のあるターゲットを選択する場合に使用されます。

DropInteractor コンポーネント

DropInteractor は、ダイアグラム内のドロップ・アクションを処理します。DropInteractor がアクティブになると、ダイアグラム・ドロップ・アクションを検出して、ドロップ・アクションが行われたダイアグラム・ポイントを識別し、ドロップ・ポイントの後ろにあるグラフ要素を検出します。ドロップが行われると、onDropFunction が呼び出されます。このバインドされた関数は、以下のような形式になっています。
function(droppedItem,point,diagram,elements,undoAction)
関数の引数は、以下のとおりです。
  • droppedItem は、ドロップされた項目で、dojo.dnd.manager によって直接管理されます。
  • point は、グラフの座標内のドロップ・ポイントの位置です。
  • diagram は、現在のダイアグラムです。
  • elements は、ドロップ・ポイントの後ろにある graphElements の配列です。Z 順序 (最初の要素は前景にある要素) が使用されます。
  • undoAction は、このアクションを元に戻す、または再実行する場合に適用される DropAction です。元に戻すおよび再実行についてはカスタマイズしたアクションを設定することができ、このアクションに必要な他のデータを追加できます。
ドロップ・アクション時の最も一般的な手順の 1 つは、グラフ内に新規の要素を作成することです。 DropInteractor には、ドロップされた項目に基づいてテンプレートに従って新規要素を作成する関数 onDropTemplateFunction があります。 この関数により、ドロップ・アクション時に新規のグラフが作成される場合に使用されるテンプレートが決定されます。この関数は、通常、resolveNodeTemplate 関数に対してダイアグラム・エディターによって呼び出され、次のような形式になっています。
function onDropTemplate(droppedItem,dataItem,diagram)
これらの関数は、マークアップによって直接設定できます。
onDropFunction="onDrop" onDropTemplateFunction="onDropTemplate"

DropAction コンポーネント

DropAction コンポーネントには、ドロップ・アクションを元に戻すおよび再実行するあらゆる機能が組み込まれています。 このアクションは、通常、onDropFunction 関数から呼び出すユーザー関数を追加することにより、カスタマイズすることができます。 以下のメソッドが使用可能です。
  • setDroppedItem: ドロップされた項目を設定します。
  • getDroppedItem: ドロップされた項目を取得します。
  • setDroppedPosition: ドロップ位置のグラフ座標を設定します。
  • getDroppedPosition: ドロップ位置のグラフ座標を取得します。
  • setElementsList: ドロップ位置に一致するグラフ要素を含む要素リストを設定します。
  • getElementsList: ドロップ位置に一致するグラフ要素を含む要素リストを取得します。
  • setDropInteractor: ドロップ・インタラクターを設定します。
  • getDropInteractor: ドロップ・インタラクターを取得します。