mxGraph一問一答

mxGraphを使っていて詰まったところを一問一答にしました。
思い出したら書き足します。

前提

Angular(typescript) v.10.1.0
mxGraph v.7.5.6
レイアウト：CompactTreeLayout

typescript

import { mxgraph } from '../../../mxtypes';
const mx: typeof mxgraph = require('mxgraph')({
  mxBasePath: 'assets/mxgraph',
  mxImageBasePath: 'assets/mxgraph/images',
  mxLoadResources: false,
  mxForceIncludes: false,
  mxLoadStylesheets: false,
});
graph: mxgraph.mxGraph;

一問一答

固定のツリーレイアウトで、ドラッグすると点線で枠が出る

mxGraph.prototype.cellsMovable = trueになっているからですが、これをfalseにするとレイアウトが崩れます。
以下のように設定します。

this.graph.setCellsSelectable(false); // セルを選択できないようにする
mx.mxConstants.CURSOR_MOVABLE_VERTEX = 'default'; // カーソルを変更
mx.mxConstants.CURSOR_MOVABLE_EDGE = 'default'; // カーソル変更

ノードが増えるとグラフの上に空白ができる

mxCompactTreeLayout.prototype.moveTree = false

セルをダブルクリックすると編集できるような表示になる

this.graph.cellsEditable = false;