作ってみる前回追加した機能で出力したJSONをインポートできるようにします。前回のエクスポートでは、モデルの位置情報を保存していなかったため、モデルに位置情報を持たせます。(1)モデルの位置情報追加/src/app/class/model.tshttps://github.com/dog-ears/er-diagram-tool/commit/6f573860fe792b1a6834c2b311b494a6517a65b2#diff-15a154169b0b6112f2adcdf51a565ee2・pos_x、pos_yを追加/src/app/model/model.component.htmlhttps://github.com/dog-ears/er-diagram-tool/commit/6f573860fe792b1a6834c2b311b494a6517a65b2#diff-e7b9f22b5724e30d03dbdfd83021ec15・ドラッグ開始・終了処理を同じにしていましたが、startDrag()とendDrag()に分けました。/src/app/model/model.component.tshttps://github.com/dog-ears/er-diagram-tool/commit/6f573860fe792b1a6834c2b311b494a6517a65b2#diff-14ac3c6b037418c538e10e3c5571bbbe・HTML要素にアクセスするため、ElementRefをimport・ドラッグ終了時に、現在の位置情報を取得・保存します。これで、モデルの位置情報を持つようになりました。(2)JSONアップロード用モーダル作成/src/app/modal-upload/modal-upload.component.tshttps://github.com/dog-ears/er-diagram-tool/commit/8bbbfea2d9b493b12e951cbce644e3304008d91f#diff-fefed582b49af3ce97470d4f8b393d65・ファイルを選択した時に、データをパースして取得します。/src/app/modal-upload/modal-upload.component.htmlhttps://github.com/dog-ears/er-diagram-tool/commit/8bbbfea2d9b493b12e951cbce644e3304008d91f#diff-1ca7953252d5869cf8036f43589b4b75(3)JSONアップロード用モーダル呼出し。モジュールへの追加/src/app/app.module.tshttps://github.com/dog-ears/er-diagram-tool/commit/8bbbfea2d9b493b12e951cbce644e3304008d91f・モジュールに、ModalUploadComponentを追加/src/app/navbar/navbar.component.htmlhttps://github.com/dog-ears/er-diagram-tool/commit/8bbbfea2d9b493b12e951cbce644e3304008d91f#diff-017b6e710461134e5b4c9fd34aeabe7c/src/app/navbar/navbar.component.tshttps://github.com/dog-ears/er-diagram-tool/commit/8bbbfea2d9b493b12e951cbce644e3304008d91f#diff-12468dba4acc93d6788c4f72b2b89a70(4)JSONアップロード用モーダル呼出し。モジュールへの追加/src/app/class/model.tshttps://github.com/dog-ears/er-diagram-tool/commit/8bbbfea2d9b493b12e951cbce644e3304008d91f#diff-15a154169b0b6112f2adcdf51a565ee2・getSchemaById()で、該当するSchemaがない場合、nullを返すようにしました。・モデル生成時にmodel_dataを与えられた場合、そのデータをもとに新規作成するよう修正/src/app/class/schema.tshttps://github.com/dog-ears/er-diagram-tool/commit/8bbbfea2d9b493b12e951cbce644e3304008d91f#diff-43602a3f26ba4b6bcf22b9c72c3fec66・スキーマ生成時にschema_dataを与えられた場合、そのデータをもとに新規作成するよう修正(5)全jsPlumbエンドポイント削除機能追加/src/app/service/jsPlumb.service.tshttps://github.com/dog-ears/er-diagram-tool/commit/8bbbfea2d9b493b12e951cbce644e3304008d91f#diff-da7afb11f9169e78d9b5cfea7afcc510・deleteAll()を追加(6)データロード機能実装/src/app/service/data.service.tshttps://github.com/dog-ears/er-diagram-tool/commit/8bbbfea2d9b493b12e951cbce644e3304008d91f#diff-ae990bb302f27e60323deb45d6746b17/src/app/class/data.tshttps://github.com/dog-ears/er-diagram-tool/commit/8bbbfea2d9b493b12e951cbce644e3304008d91f#diff-ba726bfa70586322bd593dddb7beaf87・getModel—とか、getSchema—とかの機能を修正。対象がない場合、nullを返すように変更しました。以上でJSONがアップロードできるようになりました。追加したい機能はいっぱいありますが、いったんこの状態で、リリースしたいと思います。ここまで読んでくださった方、お疲れ様でした。ありがとうございました。モデル修正・削除機能の実装。左カラムに表示するmodel用のコンポーネントを作ります。データ用クラスの準備と、データサービスの作成からDIまで。今回は、dataのmodelを追加する機能を実装します。jsPlumbの導入、およびモデルをドラッグ可能に今回からjsplumbの実装に進みます。編集機能を実装navbarからモーダルでフォームを開き、dataを編集できるようにします。コメントをキャンセルメールアドレスが公開されることはありません。*サイト最近の投稿とりあえずESlistとprettierでコードフォーマットしたい人へ。Codeで動く設定ファイルをさらしてみる。Expressなしで、最短でNuxt(SSR)をfirebaseで公開してみる。まとめ【初心者向け】ドラゴンボールクリッカーを作ってみた。