Angularで作るER DIAGRAM TOOL – 第十五回 modelにpositionを持たせる & Upload JSON機能追加

前回追加した機能で出力したJSONをインポートできるようにします。

まず、前回のエクスポートでは、モデルの位置情報を保存していなかったため、
モデルに位置情報を持たせます。

(1)モデルの位置情報追加

/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
・ドラッグ終了時に、現在の位置情報を取得・保存します。

これで、モデルの位置情報を持つようになりました。

(2)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

(3)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

(4)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を与えられた場合、そのデータをもとに新規作成するよう修正

(5)全jsPlumbエンドポイント削除機能追加

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

・deleteAll()を追加

(6)データロード機能実装

/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()追加

(7)モデル位置情報反映処理追加

/src/app/model/model.component.html
https://github.com/dog-ears/er-diagram-tool/commit/8bbbfea2d9b493b12e951cbce644e3304008d91f#diff-e7b9f22b5724e30d03dbdfd83021ec15

モデルのpos_x / pos_yと スタイルポジションが同期するように修正

(8)モーダル閉じる処理追加

/src/app/modal-download/modal-download.component.html
https://github.com/dog-ears/er-diagram-tool/commit/8bbbfea2d9b493b12e951cbce644e3304008d91f#diff-12d124f7e7d163dc41c5259d7ca56f0f

・Download JSONしたときにモーダルを閉じるよう修正

以上でJSONがアップロードできるようになりました。

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

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

スポンサーリンク
(English) google_adsense
(English) google_adsense

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
(English) google_adsense