0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Posted at

前回追加した機能で出力した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がアップロードできるようになりました。

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

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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?