MPS 2020.1 ヘルプ

ダイアグラム作成エディター

MPS の図表化サポートは言語デザイナーが彼らの概念にグラフィカルエディターを提供することを可能にします。図は通常、ボックスで表されるブロックと、ボックスを結ぶ線で表されるコネクターで構成されています。ブロックとコネクターはどちらも、基礎となるモデルからのノードを視覚化したものです。

Diagramm

ポート(オプション)は、コネクターを取り付けることができるブロックの形状上の定義済みの場所です。MPS は 2 つのタイプのポートを可能にします - 入力および出力。

任意選択で、利用可能なブロックのパレットを図の横に表示することができるため、ユーザは、図に追加する必要があるボックスの種類を素早く選ぶことができます。

要素の追加

エディターの空き領域をダブルクリックすると、ブロックが追加されます。ブロックの種類は、パレットで特定のブロックの種類を有効にするか、または空き領域をクリックした後に表示されるポップアップの補完メニューから選択することによって選択されます。

コネクターは、ブロックの出力端子から別のブロックまたは同じブロックの入力端子にドラッグすることによって作成されます。

サンプル

MPS には、図表エディターのサンプルがバンドルされています。どのようにダイアグラムを作成することができるかについての最初の習熟のために、componentDependencies または mindMaps サンプルプロジェクトを試すことができます。

依存関係

言語でダイアグラムエディターを定義できるようにするためには、その言語は必要な依存関係と使用言語を適切に設定する必要があります。

Used languages and developer kits

Dependencies

  • jetbrains.mps.lang.editor.diagram - ダイアグラムを定義するための言語

  • jetbrains.mps.lang.editor.figures(オプション) - カスタムビジュアル要素を定義するための言語 (ブロックとコネクター)

  • jetbrains.jetpadjetbrains.mps.lang.editor.diagram.runtime - ダイアグラムのレンダリングと動作を処理するランタイムライブラリ

ダイアグラム定義

ダイアグラムの根底にあるべき概念から始めましょう。そのノードのダイアグラムエディターには、ダイアグラムエディターセルが含まれます。

Editor cell

ダイアグラムセルには、ダイアグラムの一部になる必要があるすべてのノードを保持するための content パラメーターが必要です。私たちの場合、すべてのコンポーネント(ブロックとしてレンダリングされる)とそれらの依存関係(コネクターとしてレンダリングされる)を渡します。これらのノードがレンダリングされる方法は、後で説明するように、それぞれのエディター定義によって定義されます。

インスペクター 要素作成の下でハンドラーを定義することができます。これらは、新しいビジュアルブロックがダイアグラムに作成されるときはいつでも呼び出されます。各ハンドラーには、設定が必要なプロパティがいくつかあります。

  • name - 補完メニューとパレットで新しい要素を作成するオプションを表す任意の名前

  • container - 新しく作成されたノードを追加する必要があるノードのコレクション

  • concept - ハンドラーを通して作成されるノードの概念。デフォルトはコンテナー内のノードの種類ですが、サブタイプを代わりに指定することもできます。

  • on create - モデルに追加されてダイアグラムにレンダリングされる前にノードを操作できるハンドラー。通常、名前は意味のある値に設定され、画面上のブロックの位置はモデルに保存されます。

複数の要素作成ハンドラーを定義することができます。

同様に、コネクター作成を処理するために、ダイアグラムセルにコネクター作成ハンドラーを定義できます。要素作成ハンドラーについて既に説明した属性に加えて、コネクター作成ハンドラーには以下の特定の属性があります。

  • 作成可能 - ブール値を返し、指定されたプロパティを持つコネクターを合法的に構築してダイアグラムに追加できるかどうかを示す概念関数。

  • on create - now コネクターの作成を処理する概念関数。

  • これらの関数の from および to パラメーターは、新しい接続のソースおよびターゲットノード(ブロックまたはポートで表される)を指定します。

  • これらの関数の fromId および toId パラメーターは、新しい接続用のソースおよびターゲットノードの ID(ブロックまたはポートで表される)を指定します。

ユーザーがエディターをダブルクリックすると、要素が作成されます。複数の要素タイプが利用可能な場合は、補完ポップアップメニューが表示されます。

コネクターは、ユーザーがソースブロックまたはその出力端子からターゲットブロックまたはその入力端子にドラッグしたときに作成されます。

パレット

Pallete

オプションのパレットを使用すると、開発者はダイアグラム内をダブルクリックまたはドラッグするたびに、作成するブロックとリンクの種類を選択できます。パレットはダイアグラムエディターセル用に定義されており、作成コンポーネントの指定とは別に、視覚的なグループ化とパレットアイテムの分離を可能にします。

ブロック

ブロックとして図表化に参加したいノードの概念は、x / y 座標サイズタイトルなどの有用な図表化品質を保持するプロパティを提供する必要があります。

Diagram properties

さらに、ノードは、コネクターが視覚的に接続できる入力ポートと出力ポートを提供する必要があります。

エディターはダイアグラムノードセルを使用します

Diagram node cell

ダイアグラムノードのセルには、図形を指定する必要があります。これは、jetpad フレームワークを使用してブロックの視覚的なレイアウトを定義する Figure クラスへの参照です。MPS には、jetbrains.mps.lang.editor.figures.library ソリューションにあらかじめ定義されたグラフィカル図形のセットが付属しており、これをインポートして使用することができます。各図は、図の視覚的特性を保持するいくつかのプロパティフィールドを公開することがあります。すべての Figure パラメーターはエディターの定義で指定する必要があります。おそらく、概念で定義されているノードのプロパティにマッピングすることによってです。

Diagram editor for the concept

パラメーターの値は、ノードのプロパティへの参照、または # 文字を先頭に追加した BaseLanguage 式です。これを使っ、式の中から編集したノードを参照することができます。

ノードが入力ポートと出力ポートを定義している場合は、それらがダイアグラムに表示されるように、ここでパラメーターとしても指定する必要があります。繰り返しますが、ポートを指定するには、ノードのプロパティを参照するか、または # 文字を先頭に追加した BaseLanguage 式を使用します。

カスタム図

あるいは、独自の数字を定義することができます。これらは、jetbrains.jetpad.projectional.view.View インターフェース(またはその子孫)を実装し、@Figure 注釈を付けた BaseLanguage クラスです。@FigureParameter 注釈を使用して、高さなどのプロパティフィールドを区別します。

myCell

MovableContentView インターフェースは、figure クラスに追加のパラメーターを提供します。

MovableContentView

jetbrains.mps.lang.editor.figures.library を勉強することによって、ジェットパッドライブラリとその内部の働きについてのより良い理解を得るかもしれません。

コネクター

コネクターで表されるノードは、ダイアグラム作成プロパティを保持する必要はありません。バージョン 3.1 では、コネクターは視覚的にカスタマイズできず、常に黒い実線で表示されます。これは、MPS の以下のバージョンのうちの 1 つでおそらく変わるでしょう。

Connectors

ノードのエディターには、ダイアグラムコネクターセルを含める必要があります。

Diagram connector cell

セルには、コネクターのソースとターゲットが必要です。これらはポートにすることができます。

Connector settings

またはノード自体:

Connector settings

値は、ノードのプロパティへの直接参照、または # 文字を先頭に追加した BaseLanguage 式になります。

レンダリングポート

入力ポートと出力ポートは、それぞれ入力ポート出力ポートのエディターセルを使用する必要があります。ポートのレンダリングは MPS 3.1 ではカスタマイズできませんが、それ以降のバージョンではおそらく有効になるでしょう。

暗黙的ポートの使用

状況によっては、モデル内で直接ポートを表現できないことがあります。ブロックとコネクターのみを使用したいのですが、ポートはどういうわけかモデルから派生する必要があります。このケースは簡単にサポートできます。

  1. ポートの表現を決めます。各ポートは、番号や文字列などの一意の識別子で表されます。

  2. ブロックの概念に、識別子のコレクションを返す動作メソッドを定義させる - 入力ポートと出力ポートに別々に

    Defining behavior

  3. メソッドを使用して inputPorts および outputPorts パラメーターを DiagramNode エディターセルに提供します

    methods of the DiagramNode

  4. コネクターエディターのセルで、ブロックのノードをソースターゲットとして参照します。# シンボルの後に要求された ID を追加します

    connector reference