MPS 2019.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

最終更新日: 2019年7月5日