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

We will proceed with implementing jsplumb this time.

jsplumb
https://jsplumbtoolkit.com/

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

There are Community Edition (free) and Toolkit Edition (fee) for jsplumb, but I will work on Community Edition.

So, firstly from the installation.

(1) Installation of jsPlumb

npm install jsplumb --save

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

· Load CSS and JS for jsPlumb.

(2) Production of jsPlumb service

All functions related to jsPlumb concentrate on this service.
To use it with other components, DI this service,
Call the required method.

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

• declare var jsPlumb: any; enables the jsPlumb library.
· The dataService is DIed in advance.

(3) Initialization of jsPlumb

I initialize jsPlumb, but the problem is that timing.
Since jsPlumb needs to be initialized after html element is ready,
Initialize with AppComponent’s ngAfterViewInit.

First, add a service to module

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

· Import of JsPlumbService and registration with providers.

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

· Call jsPlumbService.init () (unimplemented).
· Initialize jsPlumbService in ngAfterViewInit ().

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

· We get instances with jsPlumb.getInstance (), but only three options are attached.

[Basic knowledge of jsPlumb]
In understanding jsPlumb, we need to know the following four elements.

· Anchor point — Instrument for placing the end point
· End point — Start point and end point of connector
· Connector — a line connecting each end point
Overlay — What is displayed overlapping on the connector (not used this time)

The options you are calling at initialization are as follows.
Container: ‘canvas’, — the position of the element to be added. It is added immediately under # canvas.
Anchor: [“RightMiddle”, “LeftMiddle”], — The position of the endpoint is either right center or left center
ConnectionsDetachable: false, — The connector can not disconnect (by mouse operation).

(3) Drag model so that it can move

Let’s make the model drag moveable using jsPlumb.
However, it will be dragged only when you drag the title part (H2).

The timing to make it draggable is after the model HTML is generated, so use ngAfterViewInit ().

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

· Import and DI JsPlumbService.
· Call jsPlumbService.initModel () (unimplemented) with ngAfterViewInit ()
Call to jsPlumbService.toggleDraggable () (unimplemented) with toggleDragable ()

/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
I committed it with comment-out remaining ※, I commit additional.

· Make the received model draggable with initModel (), and immediately make it impossible to drag once.
· Toggle Draggable () to toggle draggable or impossible of the received model.

Finally we will set CSS surroundings.

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

You can now drag safely.

Next time, we will add endpoints to the model and fix it so that we can connect between models.

シェアする

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

フォローする

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

Data handled by this application,
Basically, crud-d-scaffold.json of dog-ears / crud-d-scaffold and
Make it the same shape.

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

続きを読む

シェアする

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

フォローする

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

I was asked about how to make of 2-step-login at the comment column of the article of the “multi-Authentication” that I posted.
Then I try it.

Outline I create this time is below

not login → login as user → login as Admin
According to login stage, you can see more pages.

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

続きを読む

シェアする

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

フォローする

はじめに

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

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

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

■このブログの趣旨

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

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

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

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

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

シェアする

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

フォローする