LoginSignup
0
0

More than 5 years have passed since last update.

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

Posted at

(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.jpg

カラムは追加されましたが、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.jpg

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

cap12_3.jpg

しかし、コネクション生成後、Sourceとなるモデルを削除すると、コネクションが残ってしまいます。
なので、こちらも修正

(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コネクションを同じように実装していきます。

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