Angularで作るER DIAGRAM TOOL – 第十回 モデルへエンドポイントを追加

(1) Add an endpoint to the model


· Write End End addition processing in initModel () which is called when the model view is generated.
· The addition destination is not Model, but exactly Model H2.
· The meanings of the options are as follows

isSource: true, — Will the endpoint be the starting point of the connection?
isTarget: true, — Will the endpoint be the endpoint of the connection?

I will preview it.


End points and Model H 2 that should be displayed sticking together,
It was displayed away.

The reason is that after jsPlumb gave the endpoint,
The google icon has been loaded and its width has changed.

So I will specify the width of the icon with CSS beforehand.


Although it seems that it went well,
In this state, adding a long name schema …


As the width of the model changes,
Also, the endpoint has left.

So we will add a function to redraw the endpoint.

(2) End point redraw function addition

The timing when redrawing is necessary is as follows.

· Rename model
· Add, change, move and delete schema

In either case, after drawing of html is over,
At the above-mentioned change timing, a flag is set,
The actual redrawing is done with AppComponent’s ngAfterViewChecked ().


Implement repaintEverything ()


Added member variable flg_repaint. Initial value setting with Constructor
· Added processing to set flag at the end of deleteModel (), deleteSchema (), moveSchema ()



– Added processing to set flags when the modal closes (ngOnDestroy ())


· NgAfterViewChecked () added. When the flag is set, it clears the flag and calls redrawing.
Since ngAfterViewChecked () is processed many times, console.log is commented out.


When previewed, the endpoint came safely.
This concludes the process of connecting models H2 to each other.

But what I finally want is not to connect models H2 to each other.
When connecting model AAA and model BBB, it is [AAA – H2] and [BBB schema (AAA_id)] to connect.

So we will proceed to implement one-to-many relations next time.