Angularで作るER DIAGRAM TOOL – 第十五回 modelにpositionを持たせる & Upload JSON機能追加

Allows you to import JSON output with the function you added last time.

First, since the position information of the model was not saved in the previous export,
We will give the model position information.

(1) Addition of position information of model

/src/app/class/model.ts
https://github.com/dog-ears/er-diagram-tool/commit/6f573860fe792b1a6834c2b311b494a6517a65b2#diff-15a154169b0b6112f2adcdf51a565ee2

· Add pos_x, pos_y

/src/app/model/model.component.html
https://github.com/dog-ears/er-diagram-tool/commit/6f573860fe792b1a6834c2b311b494a6517a65b2#diff-e7b9f22b5724e30d03dbdfd83021ec15

– Drag start / end processing was the same, but it was divided into startDrag () and endDrag ().

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

· To access HTML elements, import ElementRef as import
· When dragging is completed, the current position information is acquired and saved.

You now have location information for the model.

(2) Create a modal for JSON upload

/src/app/modal-upload/modal-upload.component.ts
https://github.com/dog-ears/er-diagram-tool/commit/8bbbfea2d9b493b12e951cbce644e3304008d91f#diff-fefed582b49af3ce97470d4f8b393d65

· When you select a file, parse the data and acquire it.

/src/app/modal-upload/modal-upload.component.html
https://github.com/dog-ears/er-diagram-tool/commit/8bbbfea2d9b493b12e951cbce644e3304008d91f#diff-1ca7953252d5869cf8036f43589b4b75

(3) a modal call for JSON upload. And addition to the module

/src/app/app.module.ts
https://github.com/dog-ears/er-diagram-tool/commit/8bbbfea2d9b493b12e951cbce644e3304008d91f

· Added ModalUploadComponent to module

/src/app/navbar/navbar.component.html
https://github.com/dog-ears/er-diagram-tool/commit/8bbbfea2d9b493b12e951cbce644e3304008d91f#diff-017b6e710461134e5b4c9fd34aeabe7c

/src/app/navbar/navbar.component.ts
https://github.com/dog-ears/er-diagram-tool/commit/8bbbfea2d9b493b12e951cbce644e3304008d91f#diff-12468dba4acc93d6788c4f72b2b89a70

(4) A modal call for JSON upload. And addition to the module

/src/app/class/model.ts
https://github.com/dog-ears/er-diagram-tool/commit/8bbbfea2d9b493b12e951cbce644e3304008d91f#diff-15a154169b0b6112f2adcdf51a565ee2

· GetSchemaById () now returns null if there is no corresponding Schema.
· When model_data is given at model creation, it is modified to create new on the basis of the data

/src/app/class/schema.ts
https://github.com/dog-ears/er-diagram-tool/commit/8bbbfea2d9b493b12e951cbce644e3304008d91f#diff-43602a3f26ba4b6bcf22b9c72c3fec66

· When schema_data is given at the time of schema generation, it is modified to create new based on the data

(5) Add all jsPlumb endpoint deletion function

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

· Add deleteAll ()

(6) Data load function implementation

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

/src/app/class/data.ts
https://github.com/dog-ears/er-diagram-tool/commit/8bbbfea2d9b493b12e951cbce644e3304008d91f#diff-ba726bfa70586322bd593dddb7beaf87

· Fixed getModel — and getSchema — and other functions. Changed to return null if there is no target.
· Add clearData ()
· LoadData () addition

(7) Model position information reflection processing addition

/src/app/model/model.component.html
https://github.com/dog-ears/er-diagram-tool/commit/8bbbfea2d9b493b12e951cbce644e3304008d91f#diff-e7b9f22b5724e30d03dbdfd83021ec15

Fix to make model pos_x / pos_y synchronize with style position

(8) Modal closing process addition

/src/app/modal-download/modal-download.component.html
https://github.com/dog-ears/er-diagram-tool/commit/8bbbfea2d9b493b12e951cbce644e3304008d91f#diff-12d124f7e7d163dc41c5259d7ca56f0f

· Modified to close the modal when download JSON

JSON can now be uploaded.

There are still many functions I want to add,
Once in this state, I would like to release it.

Thank you for those who have read this far.
And finally, thanks so much.

シェアする

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

フォローする