今回から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
これで、無事にドラッグできるようになりました。
次回は、モデルにエンドポイントを追加して、モデル同士でコネクトできるように修正していきます。