Angularで作るER DIAGRAM TOOL – 第十五回 modelにpositionを持たせる ＆ Upload JSON機能追加
前回追加した機能で出力したJSONをインポートできるようにします。
まず、前回のエクスポートでは、モデルの位置情報を保存していなかったため、
モデルに位置情報を持たせます。
（１）モデルの位置情報追加
/src/app/class/model.ts
https://github.com/dog-ears/er-diagram-tool/commit/6f573860fe792b1a6834c2b311b494a6517a65b2#diff-15a154169b0b6112f2adcdf51a565ee2
・pos_x、pos_yを追加
/src/app/model/model.component.html
https://github.com/dog-ears/er-diagram-tool/commit/6f573860fe792b1a6834c2b311b494a6517a65b2#diff-e7b9f22b5724e30d03dbdfd83021ec15
・ドラッグ開始・終了処理を同じにしていましたが、startDrag()とendDrag()に分けました。
/src/app/model/model.component.ts
https://github.com/dog-ears/er-diagram-tool/commit/6f573860fe792b1a6834c2b311b494a6517a65b2#diff-14ac3c6b037418c538e10e3c5571bbbe
・HTML要素にアクセスするため、ElementRefをimport
・ドラッグ終了時に、現在の位置情報を取得・保存します。
これで、モデルの位置情報を持つようになりました。
（２）JSONアップロード用モーダル作成
/src/app/modal-upload/modal-upload.component.ts
https://github.com/dog-ears/er-diagram-tool/commit/8bbbfea2d9b493b12e951cbce644e3304008d91f#diff-fefed582b49af3ce97470d4f8b393d65
・ファイルを選択した時に、データをパースして取得します。
/src/app/modal-upload/modal-upload.component.html
https://github.com/dog-ears/er-diagram-tool/commit/8bbbfea2d9b493b12e951cbce644e3304008d91f#diff-1ca7953252d5869cf8036f43589b4b75
（３）JSONアップロード用モーダル呼出し。および、モジュールへの追加
/src/app/app.module.ts
https://github.com/dog-ears/er-diagram-tool/commit/8bbbfea2d9b493b12e951cbce644e3304008d91f
・モジュールに、ModalUploadComponentを追加
/src/app/navbar/navbar.component.html
https://github.com/dog-ears/er-diagram-tool/commit/8bbbfea2d9b493b12e951cbce644e3304008d91f#diff-017b6e710461134e5b4c9fd34aeabe7c
/src/app/navbar/navbar.component.ts
https://github.com/dog-ears/er-diagram-tool/commit/8bbbfea2d9b493b12e951cbce644e3304008d91f#diff-12468dba4acc93d6788c4f72b2b89a70
（４）JSONアップロード用モーダル呼出し。および、モジュールへの追加
/src/app/class/model.ts
https://github.com/dog-ears/er-diagram-tool/commit/8bbbfea2d9b493b12e951cbce644e3304008d91f#diff-15a154169b0b6112f2adcdf51a565ee2
・getSchemaById()で、該当するSchemaがない場合、nullを返すようにしました。
・モデル生成時にmodel_dataを与えられた場合、そのデータをもとに新規作成するよう修正
/src/app/class/schema.ts
https://github.com/dog-ears/er-diagram-tool/commit/8bbbfea2d9b493b12e951cbce644e3304008d91f#diff-43602a3f26ba4b6bcf22b9c72c3fec66
・スキーマ生成時にschema_dataを与えられた場合、そのデータをもとに新規作成するよう修正
（５）全jsPlumbエンドポイント削除機能追加
/src/app/service/jsPlumb.service.ts
https://github.com/dog-ears/er-diagram-tool/commit/8bbbfea2d9b493b12e951cbce644e3304008d91f#diff-da7afb11f9169e78d9b5cfea7afcc510
・deleteAll()を追加
（６）データロード機能実装
/src/app/service/data.service.ts
https://github.com/dog-ears/er-diagram-tool/commit/8bbbfea2d9b493b12e951cbce644e3304008d91f#diff-ae990bb302f27e60323deb45d6746b17
/src/app/class/data.ts
https://github.com/dog-ears/er-diagram-tool/commit/8bbbfea2d9b493b12e951cbce644e3304008d91f#diff-ba726bfa70586322bd593dddb7beaf87
・getModel—とか、getSchema—とかの機能を修正。対象がない場合、nullを返すように変更しました。
・clearData()追加
・loadData()追加
（７）モデル位置情報反映処理追加
/src/app/model/model.component.html
https://github.com/dog-ears/er-diagram-tool/commit/8bbbfea2d9b493b12e951cbce644e3304008d91f#diff-e7b9f22b5724e30d03dbdfd83021ec15
モデルのpos_x / pos_yと スタイルポジションが同期するように修正
（８）モーダル閉じる処理追加
/src/app/modal-download/modal-download.component.html
https://github.com/dog-ears/er-diagram-tool/commit/8bbbfea2d9b493b12e951cbce644e3304008d91f#diff-12d124f7e7d163dc41c5259d7ca56f0f
・Download JSONしたときにモーダルを閉じるよう修正
以上でJSONがアップロードできるようになりました。
まだまだ、追加したい機能はいっぱいありますが、
いったんこの状態で、リリースしたいと思います。
ここまで読んでくださった方、お疲れ様でした。
そして、ありがとうございました。