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

(1) Add schema for relationship


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.


· Implement the contents of addOneToManyRelation ()

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


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.


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


· 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


Implement getModelByName ()


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.


So, also fixed here

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


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.


· Schema class loading
· Implement getSchemaByElementId ()


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.