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.