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がアップロードできるようになりました。

まだまだ、追加したい機能はいっぱいありますが、
いったんこの状態で、リリースしたいと思います。

ここまで読んでくださった方、お疲れ様でした。
そして、ありがとうございました。