GoJSをNuxt.jsで使う

GoJSとは

GoJSは、JavaScriptとTypeScriptで、インタラクティブにダイアグラムやグラフを書くためのライブラリです。
有料のライブラリですが、美しいダイアグラムやグラフを書くツールを作成できます。
https://gojs.net/latest/index.html

前提

まずNuxt.jsプロジェクトを作成してください。
作成したプロジェクトのディレクトリに移動してください。

1. Go.jsのインストール

インストールは、npmコマンドまたは、yarnコマンドでインストールできます。
いつも通りですね。

npm install --save gojs

npm ではなく、yarnを利用している場合は、次になります。

yarn add gojs

2. 動作確認

pages/index.vueを次のものに置き換えてください。
（どのvueファイルでもいいです。動作確認できるものであれば）

pages/index.vue

<template>
  <div class="wrapper">
    <div
      id="myDiagramDiv"
      style="width:100%;height:600px;"
    />
  </div>
</template>

<script>
import * as go from 'gojs'
const $ = go.GraphObject.make
export default {
  components: {},
  props: {},
  data () {
    return {
    }
  },
  mounted () {
    const myDiagram = $(go.Diagram, 'myDiagramDiv',
      {
        'undoManager.isEnabled': true 
      })
    const myModel = $(go.Model)
    myModel.nodeDataArray = [
      { key: 'Alpha' },
      { key: 'Beta' },
      { key: 'Gamma' }
    ]
    myDiagram.model = myModel
  },
  methods: {}
}
</script>

下記にアクセス。
http://localhost:3000/

3. Vue.jsっぽくしていく

このままだとVue.jsとして扱いにくいですね。そこで少しだけVue.jsらしくすることで、扱いやすくしましょう。

pages/index.vue

<template>
  <div class="wrapper">
    <div
      id="myDiagramDiv"
      style="width:100%;height:600px;"
    />
  </div>
</template>

<script>
import * as go from 'gojs'
const $ = go.GraphObject.make
export default {
  components: {},
  props: {},
  data () {
    return {
      nodes:[   //変更
         { key: 'Alpha' },
         { key: 'Beta' },
         { key: 'Gamma' }
      ]
  },
  mounted () {
    const myDiagram = $(go.Diagram, 'myDiagramDiv',
      {
        'undoManager.isEnabled': true 
      })
    const myModel = $(go.Model)
    myModel.nodeDataArray = this.nodes //変更
    myDiagram.model = myModel
  },
  methods: {}
}
</script>

このサンプルだと、あまり変えるところがないですが、
propsやVuexを使うことで、データを渡すだけで、データに応じた初期データを持つダイアグラムを作るコンポーネントにできます。

おわりに

ReactやAngularのプロジェクトは、始まっているのですが、Vueのプロジェクトは始まっていません。Vueプロジェクトを始めるチャンス？