Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

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

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

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

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

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

cap10_3.jpg

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

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

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

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

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

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

dog-ears
主に、PHP、laravel、Angular、Cloud9などに興味あり。
http://dog-ears.net/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away