Angularで作るER DIAGRAM TOOL – 第十一回 リレーションシップモーダルの作成と開く処理
まずは、前回、ModelのH2にエンドポイントを追加して、
コネクションを作成するようにしたのですが、
コネクションを作成せずに、モーダルを開くように変更します。
（１）リレーションシップモーダルの作成
/src/app/modal-relation/modal-relation.component.ts
https://github.com/dog-ears/er-diagram-tool/commit/7295efacc56aa0c29f524bb4cffdddd817c591d3#diff-646411b438809058dd2679d246b8906b
・source_modelが接続元Model、target_modelが接続先Modelです。
・source_model_display_schema、target_model_display_schemaは、どのカラムの内容で表示するかです。
（例）
category has many booksの場合、
source_model_display_schemaにタイトルを選ぶと、カテゴリを選ぶ際にカテゴリタイトルをプルダウンで選べます。
one-to-manyの場合は、target_model_display_schemaは不要となります。
・relation_typeによって、dataService.addOneToManyRelation()または、dataService.addManyToManyRelation()（いずれも未実装）を呼び出します。
/src/app/modal-relation/modal-relation.component.html
https://github.com/dog-ears/er-diagram-tool/commit/7295efacc56aa0c29f524bb4cffdddd817c591d3#diff-01be9d6214e34da40775ab3244149f02
/src/app/service/data.service.ts
https://github.com/dog-ears/er-diagram-tool/commit/7295efacc56aa0c29f524bb4cffdddd817c591d3#diff-ae990bb302f27e60323deb45d6746b17
・とりあえず、addOneToManyRelation()、addManyToManyRelation()を空実装しておく
/src/app/app.module.ts
https://github.com/dog-ears/er-diagram-tool/commit/7295efacc56aa0c29f524bb4cffdddd817c591d3#diff-fc6b22833aeaf77f8440c4970ade705e
・ModalRelationComponentのimportおよび登録
（２）Model – H2 エンドポイントのドロップ後の処理を変更
まずは、コネクション作成部分をモーダル呼出しに修正します。
/src/app/service/jsPlumb.service.ts
https://github.com/dog-ears/er-diagram-tool/commit/8600c7eea9846a3dcb940fd049814789ce8d09f3#diff-da7afb11f9169e78d9b5cfea7afcc510
・BsModalService、BsModalRef、ModalRelationComponentのimport。
・BsModalServiceのDI
・メンバ変数BsModalRefの追加
・addEndpointにオプション追加
beforeDrop: (params)=> {} — エンドポイントをドロップした直後に発生。このタイミングでモーダルを開き、
return falseすることにより、その後の処理（コネクションの作成）をキャンセルします。
・モーダルに渡すデータは、SourceModelとTargetModel。beforeDropのparamから、SourceModelエレメントと、TargetModelエレメントのIDを取得できるので、
エレメントのID名からモデルを取得する機能を、dataクラスに実装します。
/src/app/class/data.ts
https://github.com/dog-ears/er-diagram-tool/commit/8600c7eea9846a3dcb940fd049814789ce8d09f3#diff-ba726bfa70586322bd593dddb7beaf87
・getModelByElementH2Id()を実装
これで、model-h2のendPointをドラッグ・ドロップすることで、リレーションモーダルが開くようになりました。
※リレーションモーダルから先はまだ未実装。
リレーションモーダルの先を実装する前に、一つ残っているバグがあります。
モデルを削除したとき、endPointが残り続けます。
（３）Model削除時に、そのModelについていたendPointを削除する機能を実装
/src/app/model/model.component.ts
https://github.com/dog-ears/er-diagram-tool/commit/c7b772c2ec27c703829e99463e28028ab5118d44#diff-14ac3c6b037418c538e10e3c5571bbbe
・削除時（ngOnDestroy()）にjsPlumbService.destroyModel()（未実装）を実行
/src/app/service/jsPlumb.service.ts
https://github.com/dog-ears/er-diagram-tool/commit/c7b772c2ec27c703829e99463e28028ab5118d44#diff-da7afb11f9169e78d9b5cfea7afcc510
・destroyModel()を実装
これで、モデル削除時に自動でendPointが削除されるようになりました。
次回は、one-to-manyのリレーション作成を実装していこうと思います。