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

(1) Add an endpoint to the model

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

· 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.

cap10_1

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.

/src/styles.css
https://github.com/dog-ears/er-diagram-tool/commit/4123becc84351ee6a3f8b121836475d0d82b330c#diff-0fd3637456511d89012d5274dd855970

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

cap10_3

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

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

Implement repaintEverything ()

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

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

/src/app/modal-model/modal-model.component.ts
https://github.com/dog-ears/er-diagram-tool/commit/311d734be13d37ce306d7cca63573e32e305ceab#diff-ae990bb302f27e60323deb45d6746b17

/src/app/modal-schema/modal-schema.component.ts
https://github.com/dog-ears/er-diagram-tool/commit/311d734be13d37ce306d7cca63573e32e305ceab#diff-2588015c073ce9535c2d4c6b404f79ea

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

/src/app/app.component.ts
https://github.com/dog-ears/er-diagram-tool/commit/311d734be13d37ce306d7cca63573e32e305ceab#diff-5c26d2c8f8838f32ace87fdecd6344ea

· 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.

cap10_2

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.

シェアする

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

フォローする