本記事は図形をグリグリ動かせるアプリケーションを作るために図形ライブラリ使ってみたmxGraph編です。
JavaScriptを使っているもののデスクトップアプリケーションを作りたかったのでElectronを使用してます。
図形をグリグリ動かせる！無料JS図形ライブラリ5選比較してみた
図形をグリグリ動かすためのSigma.js+ Electron入門
図形をグリグリ動かすためのJSPlumb+ Electron入門
図形をグリグリ動かすためのCytoscape+ Electron入門
本記事👉図形をグリグリ動かすためのmxGraph+ Electron入門
図形をグリグリ動かすためのD3.js+ Electron入門
今回お試しで作ったやつはこんな感じ
mxGraphの使い方
Node.jsのインストール
本記事では、electron上で目的のライブラリを動作するため、まずはelectronを動かすうえで必要となるnode.jsをインストールしましょう。
ソースコード
package.json
{
"name": "sample",
"version": "1.0.0",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "electron ."
},
"license": "ISC",
"devDependencies": {
"electron": "^35.1.4"
},
"dependencies": {
"mxgraph": "^4.2.2"
}
}
main.js
const { app, BrowserWindow } = require('electron')
const path = require('path')
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
contextIsolation: false
}
})
win.loadFile('index.html')
}
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>mxGraph Demo</title>
<style>
#graphContainer {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #ffffff;
}
</style>
</head>
<body>
<div id="graphContainer"></div>
<script src="renderer.js"></script>
</body>
</html>renderer.js
const mx = require('mxgraph')({
mxBasePath: 'mxgraph'
});
// mxGraphの初期化
const container = document.getElementById('graphContainer');
const graph = new mx.mxGraph(container);
// 基本的なスタイル設定
const style = graph.getStylesheet().getDefaultVertexStyle();
style[mx.mxConstants.STYLE_FILLCOLOR] = '#ffffff';
style[mx.mxConstants.STYLE_STROKECOLOR] = '#000000';
style[mx.mxConstants.STYLE_FONTCOLOR] = '#000000';
// グラフの編集を有効化
graph.setEnabled(true);
// 基本的な図形の作成
graph.getModel().beginUpdate();
try {
const parent = graph.getDefaultParent();
// 頂点の作成
const v1 = graph.insertVertex(parent, null, 'Hello', 20, 20, 80, 30);
const v2 = graph.insertVertex(parent, null, 'World', 200, 150, 80, 30);
// エッジの作成
graph.insertEdge(parent, null, '', v1, v2);
} finally {
graph.getModel().endUpdate();
} ソースコード解説
初期設定
mxGraphライブラリをインポートし、基本パスを設定します。
const mx = require('mxgraph')({
mxBasePath: 'mxgraph'
});
// グラフの初期化
const container = document.getElementById('graphContainer');
const graph = new mx.mxGraph(container);各種設定
// スタイル設定
const style = graph.getStylesheet().getDefaultVertexStyle();
style[mx.mxConstants.STYLE_FILLCOLOR] = '#ffffff';
style[mx.mxConstants.STYLE_STROKECOLOR] = '#000000';
style[mx.mxConstants.STYLE_FONTCOLOR] = '#000000';
// グラフの編集設定
graph.setEnabled(true);頂点とエッジの作成
graph.getModel().beginUpdate();
try {
const parent = graph.getDefaultParent();
// 頂点の作成
const v1 = graph.insertVertex(parent, null, 'Hello', 20, 20, 80, 30);
const v2 = graph.insertVertex(parent, null, 'World', 200, 150, 80, 30);
// エッジの作成
graph.insertEdge(parent, null, '', v1, v2);
} finally {
graph.getModel().endUpdate();
}beginUpdate()とendUpdate()で変更をバッチ処理します。
insertVertex()で頂点を作成します。
insertEdge()でエッジを作成します。
実行
ライブラリのインストール
npm installアプリを実行！
npm start
終わりに
Draw.ioのバックグラウンドで使用されている通り、 the Draw.ioって感じのライブラリでした！
昔からDraw.ioを利用していることもあり、操作感とかだいぶ好きな感じです。
最終的な図は人が作るんだけど、雛形はツールで作りたいときとかにも使えるような気がしますね。
参考
https://github.com/fujarenpaw/codeForBlog/tree/main/code/electron/mxGraph