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

(1) Add schema for relationship

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

The flow of one-to-many relationship creation is as follows.

· Drag drop from the endpoint of the model to the endpoint of another model (mounted)
· Relationship modal opens (already mounted)
· DataService add schema for relationship
· Create connection as schema’s html generation finishes.

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

· Implement the contents of addOneToManyRelation ()

(2) Correction to add / delete connections when schema is created and deleted

cap12_1

The column was added, but the endPoint shifted.

As soon as “schema’s html generation is finished, create redrawing flag according to the creation of connection”.
Let’s add processing at the time of deletion.

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

· JsPlumbService import, DI
· Call jsPlumbService.initSchema (), jsPlumbService.destroySchema () from ngAfterViewInit () and ngOnDestroy () respectively

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

· Schema class import
Implement initSchema ()
– Process only when belongsto exists in shcema
– Since we need the getModelByName () method to get the model from the model name that belongs to belongsto, we will add it to the data class later.
– Generate connection

· Implement destroySchema ()
– Process only when belongsto exists in shcema
– Delete connection targeting you

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

Implement getModelByName ()

cap12_2

This creates a connection,
By deleting the column named xxx_id for relationship, the connection is also deleted.

However, after creating the connection, deleting the model that becomes the source will result in the connection remaining.

cap12_3

So, also fixed here

(3) Implement the function to delete the connection when deleting the Source Model

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

Added processing to delete connection to destroyModel ()

Deletion Implement the method getSchemaByElementId () which acquires shcema from the element ID of the schema at the connection end point in data.

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

· Schema class loading
· Implement getSchemaByElementId ()

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

Implement getSchemaById ()

This concludes the implementation of one-to-many connection addition / deletion function.
Next time we will implement many-to-many connections in the same way.

シェアする

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

フォローする