基礎編 mxGraphModelについて

記事作成日: 2020-12-19

mxGraphModelはグラフの構造を記述するコアモデルであり、実際のグラフデータ構造の格納を担当するcellsのラッパーとして機能します。mxGraphModelはmxCellsを含み、mxGraphViewの中にあるcellsの状態をキャッシュします。

グラフ構造への追加、変更、削除は、グラフモデルAPIを介して行われます。グラフ構造を決定する方法や、可視性、グループ化、スタイルなどの視覚的な状態を設定する方法も提供します。

セルとレイヤー

筆者の理解が正しいか自信がないですが以下のような構造になると思います。

cellsは1つのレイヤーに含まれます。それぞれのレイヤーの親はroot elementです。レイヤーが必要でない場合は、すべての新しいセルをデフォルトのレイヤーに追加する必要があります。

root cellとデフォルトレイヤー付きの新たなグラフモデルは次のように作成することができます。

var root = new mxCell();
root.insert(new mxCell());
var model = new mxGraphModel(root);

このようなコードを書かなくても、

var graph = new mxGraph(container_dom);

とすれば自動的にモデルとroot,デフォルトレイヤーは作成されます。

このgraphインスタンスをconsole.log(graph)で見ると以下のようになっています。

rootの所のid:0がroot cell、id:1がデフォルトレイヤーだと思います。間違ってたら済みません。