Angularで作るER DIAGRAM TOOL – 第十二回 one-to-manyのリレーション作成の実装

(1)リレーションシップ用のschema追加

one-to-manyリレーションシップ作成の流れは以下の通り。

・モデルのendPointから別のモデルのendPointにドラッグドロップ(実装済み)
・リレーションシップモーダルが開く(実装済み)
・dataServiceで、リレーションシップ用のschemaを追加
・schemaのhtml生成が終わり次第、コネクションの作成。

/src/app/service/data.service.ts
https://github.com/dog-ears/er-diagram-tool/commit/c6b7fa501853122f27855293165a7b1b8af3f43a#diff-ae990bb302f27e60323deb45d6746b17

・addOneToManyRelation()の中身を実装

(2)schema生成時、削除時にコネクションを追加・削除するよう修正

cap12_1

カラムは追加されましたが、endPointがずれてしまいました。

次の「schemaのhtml生成が終わり次第、コネクションの作成」のときに合わせて再描画フラグを立てます。
ついでに、削除時の処理も追加しましょう。

/src/app/schema/schema.component.ts
https://github.com/dog-ears/er-diagram-tool/commit/c6b7fa501853122f27855293165a7b1b8af3f43a#diff-153991cc3d6496727ece175d022d38c5

・JsPlumbServiceのimport、DI
・ngAfterViewInit()、ngOnDestroy()から、それぞれjsPlumbService.initSchema()、jsPlumbService.destroySchema()を呼び出し

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

・Schemaクラスのimport
・initSchema()を実装
— shcema にbelongstoがあるときのみ処理する
— belongstoに入っているモデル名からモデルを取得するメソッドgetModelByName()が必要になるので、のちほどdataクラスに追加する。
— コネクションを生成

・destroySchema()を実装
— shcema にbelongstoがあるときのみ処理する
— 自分をターゲットにしているコネクションを削除

/src/app/class/data.ts
https://github.com/dog-ears/er-diagram-tool/commit/c6b7fa501853122f27855293165a7b1b8af3f43a#diff-ba726bfa70586322bd593dddb7beaf87

・getModelByName()を実装

cap12_2

これでコネクションが生成され、
さらにリレーションシップ用のxxx_idというカラムを削除することで、コネクションも削除されます。

しかし、コネクション生成後、Sourceとなるモデルを削除すると、コネクションが残ってしまいます。

cap12_3

なので、こちらも修正

(3)Source Model削除時にコネクションを削除する機能を実装

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

・destroyModel()にコネクションを削除する処理を追加

削除コネクション終点にあるschemaのエレメントIDから、shcemaを取得するメソッドgetSchemaByElementId()をdataに実装します。

/src/app/class/data.ts
https://github.com/dog-ears/er-diagram-tool/commit/579524ff6dfa637b522f0c1e9a6f313bddb662aa#diff-15a154169b0b6112f2adcdf51a565ee2

・Schemaクラス読み込み
・getSchemaByElementId()を実装

/src/app/class/model.ts
https://github.com/dog-ears/er-diagram-tool/commit/579524ff6dfa637b522f0c1e9a6f313bddb662aa#diff-15a154169b0b6112f2adcdf51a565ee2

・getSchemaById()を実装

これで、one-to-manyコネクション追加・削除機能の実装が終わりました。
次回は、many-to-manyコネクションを同じように実装していきます。

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

シェアする

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

フォローする

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