Angularで作るER DIAGRAM TOOL – 第九回 jsPlumbの導入、およびモデルをドラッグ可能に

今回からjsplumbの実装に進みます。

■jsplumb
https://jsplumbtoolkit.com/

■npm – jsplumb
https://www.npmjs.com/package/jsplumb

jsplumbにはCommunity Edition(無料)とToolkit Edition(有料)がありますが、Community Editionで、作業していきます。

では、まずインストールから。

(1)jsPlumbのインストール

npm install jsplumb –save

/.angular-cli.json を修正
https://github.com/dog-ears/er-diagram-tool/commit/cc960ce9febc56f372022aed760fe9fe76faabe5#diff-c78e1fddb79799856010780b5453a800

・jsPlumb用のCSSとJSを読み込みます。

(2)jsPlumbサービスの制作

jsPlumb関連の機能は、すべてこのサービスに集中。
他のコンポーネントで使う場合は、このサービスをDIして、
必要なメソッドを呼び出します。

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

・declare var jsPlumb:any;で、jsPlumbライブラリが使用可能になります。
・dataServiceは、あらかじめDIしておきます。

(3)jsPlumbの初期化

jsPlumbを初期化するのですが、問題はそのタイミングです。
jsPlumbは、html要素が準備できてから初期化する必要があるため、
AppComponent の ngAfterViewInit で初期化します。

まずは、moduleにサービスを追加

/src/app/app.module.ts
https://github.com/dog-ears/er-diagram-tool/commit/b7d435246be6f2eebcf8ba40cac78af63ad1761d#diff-fc6b22833aeaf77f8440c4970ade705e

・JsPlumbServiceのインポートおよび、providersへの登録。

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

・jsPlumbService.init()(未実装)を呼び出し。
・ngAfterViewInit()内で、jsPlumbServiceの初期化処理を呼び出します。

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

・jsPlumb.getInstance()でインスタンスを取得するのですが、3つだけオプションをつけてます。

[jsPlumbの基本知識]
jsPlumbを理解するうえで、以下4つの要素を知る必要があります。

・アンカーポイント — エンドポイントを配置するための器
・エンドポイント — コネクタの始点・終点
・コネクタ — 各エンドポイントをつなぐ線
・オーバーレイ — コネクタの上に重なって表示されるもの(今回は不使用)

初期化で呼び出しているオプションは、以下の通り。
Container:’canvas’, — 追加される要素の位置。#canvas直下に追加されます。
Anchor : [ “RightMiddle”, “LeftMiddle” ], — エンドポイントの位置は、右中央または左中央
ConnectionsDetachable: false, — コネクタは(マウス操作で)接続を切ることはできない。

(3)モデルをドラッグ移動可能に

jsPlumbを使って、モデルをドラッグ移動可能にしましょう。
ただし、タイトル部分(H2)をドラッグしたときだけ、ドラッグされるようにします。

なお、ドラッグ可能にするタイミングは、モデルのHTMLが生成されてからなので、ngAfterViewInit()を使います。

/src/app/model/model.component.ts
https://github.com/dog-ears/er-diagram-tool/commit/8ad595f6349aac7ee132ce7ac6c5edff1f6d8a3f#diff-14ac3c6b037418c538e10e3c5571bbbe

・JsPlumbServiceをimport、DIする。
・ngAfterViewInit()で、jsPlumbService.initModel()(未実装)を呼び出す
・toggleDragable()で、jsPlumbService.toggleDraggable()(未実装)を呼び出す

/src/app/service/jsPlumb.service.ts
https://github.com/dog-ears/er-diagram-tool/commit/8ad595f6349aac7ee132ce7ac6c5edff1f6d8a3f#diff-da7afb11f9169e78d9b5cfea7afcc510
https://github.com/dog-ears/er-diagram-tool/commit/267a69dbda04c988f3e63bdff9f4dd82be2f411d#diff-da7afb11f9169e78d9b5cfea7afcc510
※コメントアウトが残ったままcommitしてしまったので、追加commitしてます。

・initModel()で、受け取ったモデルをドラッグ可能にし、直後、いったんドラッグ不可にする。
・toggleDraggable()で、受け取ったモデルのドラッグ可能、不可能を切り替える。

最後にCSS周りを設定します。

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

これで、無事にドラッグできるようになりました。

次回は、モデルにエンドポイントを追加して、モデル同士でコネクトできるように修正していきます。

スポンサーリンク
(English) google_adsense
(English) google_adsense

シェアする

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

フォローする

スポンサーリンク
(English) google_adsense

Angularで作るER DIAGRAM TOOL – 第四回 データ用クラスの準備と、データサービスの作成からDIまで。

このアプリで扱うデータは、
基本的に dog-ears/crud-d-scaffold の crud-d-scaffold.json と
同じような形にします。

■crud-d-scaffold.json.sample
https://github.com/dog-ears/crud-d-scaffold/blob/master/crud-d-scaffold.json.sample

続きを読む

スポンサーリンク
(English) google_adsense
(English) google_adsense

シェアする

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

フォローする

スポンサーリンク
(English) google_adsense

laravel5.2での2ステップログインの作り方

先日ポストしたマルチ認証の記事のコメント欄で、
2ステップログインの作り方を聞かれたので、やってみました。

今回作る2ステップログインは、以下のような形です。

非ログイン状態 → Userログイン → Adminログイン
各状況に応じて、見れるページが増えていく。

■github – my-blog-161117__2step-login
https://github.com/dog-ears/my-blog-161117__2step-login

続きを読む

スポンサーリンク
(English) google_adsense
(English) google_adsense

シェアする

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

フォローする

スポンサーリンク
(English) google_adsense

はじめに

みなさま、はじめまして。

私は、神奈川在住のWeb技術者、犬耳といいます。
本日から、この「Web技術おぼえがき」というブログで、仕事をしながら学んだWeb技術をまとめていこうと思います。

みなさん、よろしくお願いいたします。

■このブログの趣旨

Webの世界に入って十数年。
最近になって、いろいろあたらしく勉強することがあったので、
主にその個人用備忘録です。

いろいろと、プラグインなど開発して、どんどん公開していく予定です。

■前提条件
本サイトで制作するHTML、JSプラグインなどについて、
基本、以下のスタンスで制作します。

対応OS
・Windows
・iOS
・Android
※Macは持っていないので、検証から外しています。

対応ブラウザ:
・IE7.0~(※)
・FF最新
・Chrome最新
※ただし、一部機能については、致命的な表示崩れなどを除いて、
100%動作しないものとする。
(ex.角丸にならない・影がつかないなど)

スポンサーリンク
(English) google_adsense
(English) google_adsense

シェアする

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

フォローする

スポンサーリンク
(English) google_adsense