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

(1)モデルにエンドポイントを追加

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

・モデルのビューが生成されたときに呼ばれるinitModel()に、Endoint追加処理を記述します。
・追加先は、正確にはModelではなく、ModelのH2になります。
・オプションの意味は以下の通り

isSource: true, — エンドポイントがコネクションの始点になるかどうか?
isTarget: true, — エンドポイントがコネクションの終点になるかどうか?

これでプレビューします。

cap10_1

くっついて表示されるはずのエンドポイントとModel H2が、
離れて表示されてしまいました。

原因は、jsPlumbがエンドポイントを付与した後に、
googleアイコンが読み込まれて、幅が変わったためです。

ということで、アイコンの幅をあらかじめCSSで指定します。

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

これでうまく行ったかに見えますが、
この状態で、長い名前のschemaを追加すると・・・

cap10_3

モデルの幅が変わることにより、
また、エンドポイントが離れてしまいました。

ということで、エンドポイントを再描画する機能を追加します。

(2)エンドポイント再描画機能追加

再描画が必要なタイミングは以下の通り。

・モデルの名前変更
・schemaの追加・変更・移動・削除

いずれも、htmlの描画が終わったあととなるため、
上記、変更タイミングで、フラグを立てて、
実際の再描画は、AppComponentのngAfterViewChecked()で行います。

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

・repaintEverything()を実装

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

・メンバ変数flg_repaintを追加。Constructorで初期値設定
・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

・モーダルが閉じるとき(ngOnDestroy())でフラグを立てる処理追加

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

・ngAfterViewChecked()追加。フラグが立っているとき、フラグを消して、再描画を呼び出します。
ngAfterViewChecked()は、何回も処理されるため、console.logはコメントアウト。

cap10_2

プレビューすると、無事endpointがついてきました。
これで、モデルのH2同士をつなぐ処理は完了です。

しかし、最終的に欲しいものは、モデルのH2同士はつなぎません。
モデルAAAとモデルBBBをつなぐ場合、つなぐのは[AAA – H2] と [BBBのschema(AAA_id)]になります。

ということで、次回はone-to-manyのリレーションの実装に進みます。

シェアする

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

フォローする