Study編 プラグインを改変して使う

記事作成日: 2023-11-22

draw.ioにはさまざまなプラグインが付属してありますが、すべてのプラグインがビルトインされているわけではありません。安全上の問題からか使用できないものも多く、自作のプラグインも直ちに登録できないようになっている模様です。

なので筆者は既存のビルトインプラグインを改変して自作プラグインとして使っております。

使い方

1.「./plugins」フォルダからビルトインプラグインを選んでバックアップを取ります。筆者はtext.jsプラグインを選びましたが、別のものが良かったかも。

2.text.jsファイルを以下の部分だけ残して削除する。

Draw.loadPlugin(function(ui){

}

あとは好きなようにコードを書くことができます。

このやり方だと本来のtext.jsプラグインは使用できなくなってしまいますが、自分がやりたいことは今のところほとんどできるようになりました。ajaxでのsaveやload、graphやeditor自体の操作など大体何でもできそうです。

サンプルコード

図形の挿入

Draw.loadPlugin(function(ui){
	const graph = ui.editor.graph
	graph.addListener(mxEvent.CLICK, function (e) {
		const v1 = graph.insertVertex(graph.getDefaultParent(),null,"無題",20,20,80,30)
	})
}

グラフをクリックすると図形を挿入するコードです。mxEvent.CLICKでイベントを取得し、insertVertex()で挿入します。

その他、筆者が行ったカスタマイズコードやTipsなどもブログに書いていきますのでよかったら参考にしてください。