Angularで作るER DIAGRAM TOOL – 第十一回 リレーションシップモーダルの作成と開く処理

まずは、前回、ModelのH2にエンドポイントを追加して、
コネクションを作成するようにしたのですが、
コネクションを作成せずに、モーダルを開くように変更します。

(1)リレーションシップモーダルの作成

/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および登録

(2)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が残り続けます。

cap11

(3)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のリレーション作成を実装していこうと思います。

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

シェアする

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

フォローする

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