Angularで作るER DIAGRAM TOOL - 第九回　jsPlumbの導入、およびモデルをドラッグ可能に

今回からjsplumbの実装に進みます。

■jsplumb
https://jsplumbtoolkit.com/

■npm - jsplumb
https://www.npmjs.com/package/jsplumb

jsplumbにはCommunity Edition（無料）とToolkit Edition（有料）がありますが、
Community Editionで、作業していきます。

では、まずインストールから。



##（１）jsPlumbのインストール

```
npm install jsplumb --save
```

/.angular-cli.json を修正
https://github.com/dog-ears/er-diagram-tool/commit/cc960ce9febc56f372022aed760fe9fe76faabe5#diff-c78e1fddb79799856010780b5453a800

・jsPlumb用のCSSとJSを読み込みます。



##（２）jsPlumbサービスの制作

jsPlumb関連の機能は、すべてこのサービスに集中。
他のコンポーネントで使う場合は、このサービスをDIして、
必要なメソッドを呼び出します。

/src/app/service/jsPlumb.service.ts
https://github.com/dog-ears/er-diagram-tool/commit/cc960ce9febc56f372022aed760fe9fe76faabe5#diff-da7afb11f9169e78d9b5cfea7afcc510

・declare var jsPlumb:any;で、jsPlumbライブラリが使用可能になります。
・dataServiceは、あらかじめDIしておきます。



##（３）jsPlumbの初期化

jsPlumbを初期化するのですが、問題はそのタイミングです。
jsPlumbは、html要素が準備できてから初期化する必要があるため、
AppComponent の ngAfterViewInit で初期化します。

まずは、moduleにサービスを追加

/src/app/app.module.ts
https://github.com/dog-ears/er-diagram-tool/commit/b7d435246be6f2eebcf8ba40cac78af63ad1761d#diff-fc6b22833aeaf77f8440c4970ade705e

・JsPlumbServiceのインポートおよび、providersへの登録。



/src/app/app.component.ts
https://github.com/dog-ears/er-diagram-tool/commit/b7d435246be6f2eebcf8ba40cac78af63ad1761d#diff-5c26d2c8f8838f32ace87fdecd6344ea

・jsPlumbService.init()（未実装）を呼び出し。
・ngAfterViewInit()内で、jsPlumbServiceの初期化処理を呼び出します。



/src/app/service/jsPlumb.service.ts
https://github.com/dog-ears/er-diagram-tool/commit/b7d435246be6f2eebcf8ba40cac78af63ad1761d#diff-da7afb11f9169e78d9b5cfea7afcc510

・jsPlumb.getInstance()でインスタンスを取得するのですが、３つだけオプションをつけてます。

[jsPlumbの基本知識]
jsPlumbを理解するうえで、以下４つの要素を知る必要があります。

・アンカーポイント --- エンドポイントを配置するための器
・エンドポイント --- コネクタの始点・終点
・コネクタ --- 各エンドポイントをつなぐ線
・オーバーレイ --- コネクタの上に重なって表示されるもの（今回は不使用）

初期化で呼び出しているオプションは、以下の通り。
  Container:'canvas', --- 追加される要素の位置。#canvas直下に追加されます。
  Anchor : [ "RightMiddle", "LeftMiddle" ], --- エンドポイントの位置は、右中央または左中央
  ConnectionsDetachable: false, --- コネクタは（マウス操作で）接続を切ることはできない。



##（４）モデルをドラッグ移動可能に

jsPlumbを使って、モデルをドラッグ移動可能にしましょう。
ただし、タイトル部分（H2）をドラッグしたときだけ、ドラッグされるようにします。

なお、ドラッグ可能にするタイミングは、モデルのHTMLが生成されてからなので、
ngAfterViewInit()を使います。

/src/app/model/model.component.ts
https://github.com/dog-ears/er-diagram-tool/commit/8ad595f6349aac7ee132ce7ac6c5edff1f6d8a3f#diff-14ac3c6b037418c538e10e3c5571bbbe

・JsPlumbServiceをimport、DIする。
・ngAfterViewInit()で、jsPlumbService.initModel()（未実装）を呼び出す
・toggleDragable()で、jsPlumbService.toggleDraggable()（未実装）を呼び出す



/src/app/service/jsPlumb.service.ts
https://github.com/dog-ears/er-diagram-tool/commit/8ad595f6349aac7ee132ce7ac6c5edff1f6d8a3f#diff-da7afb11f9169e78d9b5cfea7afcc510
https://github.com/dog-ears/er-diagram-tool/commit/267a69dbda04c988f3e63bdff9f4dd82be2f411d#diff-da7afb11f9169e78d9b5cfea7afcc510
※コメントアウトが残ったままcommitしてしまったので、追加commitしてます。

・initModel()で、受け取ったモデルをドラッグ可能にし、直後、いったんドラッグ不可にする。
・toggleDraggable()で、受け取ったモデルのドラッグ可能、不可能を切り替える。



最後にCSS周りを設定します。

/src/styles.css
https://github.com/dog-ears/er-diagram-tool/commit/8ad595f6349aac7ee132ce7ac6c5edff1f6d8a3f#diff-0fd3637456511d89012d5274dd855970

これで、無事にドラッグできるようになりました。

次回は、モデルにエンドポイントを追加して、モデル同士でコネクトできるように修正していきます。