Merge pull request #3 from serhiipylypchuk1991/sp-refactor

[dev] refactoring

Author: AlexKlimenkov

README.md

@@ -2,7 +2,7 @@
 
 [![dhtmlx.com](https://img.shields.io/badge/made%20by-DHTMLX-blue)](https://dhtmlx.com/)
 
-![DHTMLX Diagram with Angular Demo](https://raw.githubusercontent.com/DHTMLX/angular-diagram-demo/master/diagram.png)
+![DHTMLX Diagram with Angular Demo](diagram_editor.png)
 
 ## How to start
 

diagram_editor.png

@@ -19,7 +19,7 @@
  "@angular/platform-browser": "^16.0.0",
  "@angular/platform-browser-dynamic": "^16.0.0",
  "@angular/router": "^16.0.0",
- "@dhx/trial-diagram": "^6.0.1",
+ "@dhx/trial-diagram": "^6.0.5",
  "rxjs": "~7.8.0",
  "tslib": "^2.3.0",
  "zone.js": "~0.13.0"

package.json

@@ -2,8 +2,9 @@ import { Component } from "@angular/core";
 
 @Component({
  selector: "app-root",
- template: `<diagram />`,
+ template: `<diagram-editor />`,
 })
+
 export class AppComponent {
  name = "";
 }

src/app/app.component.ts

@@ -2,12 +2,11 @@ import { NgModule } from "@angular/core";
 import { BrowserModule } from "@angular/platform-browser";
 
 import { AppComponent } from "./app.component";
-import { DiagramComponent } from "./diagram/diagram.component";
+import { DiagramEditorComponent } from "./diagram-editor/diagram-editor.component";
 
 @NgModule({
- declarations: [AppComponent, DiagramComponent],
+ declarations: [AppComponent, DiagramEditorComponent],
  imports: [BrowserModule],
- providers: [],
  bootstrap: [AppComponent],
 })
 export class AppModule {}

src/app/app.module.ts

@@ -0,0 +1,91 @@
+export function getData() {
+ return [
+ { id: 1, x: 880, y: 105, text: "Does user remember his password?", type: "process", lineHeight: 18, fontColor: "#fff", fill: "#3DA0E3", stroke: "#3DA0E3" },
+ { id: 2, x: 1080, y: 125, width: 50, "height": 50, text: "XOR", type: "circle", lineHeight: 18, fontColor: "#fff", fill: "#7D8495", stroke: "#7D8495" },
+ { id: 3, x: 1160, y: 40, text: "User forgets his password", type: "preparation", lineHeight: 18, fontColor: "#fff", fill: "#33B579", stroke: "#33B579" },
+ { id: 3.1, x: 1340, y: 40, text: "Send an E-mail with new password", type: "process", lineHeight: 18, fontColor: "#fff", fill: "#3DA0E3", stroke: "#3DA0E3" },
+ { id: 3.2, x: 1520, y: 40, text: "E-mail sent", type: "preparation", fontColor: "#fff", lineHeight: 18, fill: "#33B579", stroke: "#33B579" },
+ { id: 4, x: 1160, y: 180, text: "User remembers his password", type: "preparation", lineHeight: 18, fontColor: "#fff", fill: "#33B579", stroke: "#33B579" },
+ { id: 5, x: 1340, y: 180, text: "User types in login and password", type: "process", lineHeight: 18, fontColor: "#fff", fill: "#3DA0E3", stroke: "#3DA0E3" },
+ { id: 6, x: 1520, y: 180, text: "Data typed in", type: "preparation", fontColor: "#fff", lineHeight: 18, fill: "#33B579", stroke: "#33B579" },
+ { id: 7, x: 1700, y: 180, text: "Proof completion \n and correctness", type: "process", lineHeight: 18, fontColor: "#fff", fill: "#3DA0E3", stroke: "#3DA0E3" },
+ { id: 7.1, x: 1745, y: 600, width: 50, "height": 50, text: "XOR", type: "circle", lineHeight: 18, fontColor: "#fff", fill: "#7D8495", stroke: "#7D8495" },
+ { id: 7.2, x: 1880, y: 320, text: "User logged in", type: "preparation", lineHeight: 18, fontColor: "#fff", fill: "#33B579", stroke: "#33B579" },
+ { id: 7.3, x: 1880, y: 450, text: "Complete logging in", type: "process", lineHeight: 18, fontColor: "#fff", fill: "#3DA0E3", stroke: "#3DA0E3" },
+ { id: 7.4, x: 1880, y: 580, text: "Data is correct", type: "preparation", lineHeight: 18, fontColor: "#fff", fill: "#33B579", stroke: "#33B579" },
+ { id: 7.5, x: 1530, y: 580, text: "Data is not correct", type: "preparation", lineHeight: 18, fontColor: "#fff", fill: "#33B579", stroke: "#33B579" },
+ { id: 8, x: 1700, y: 40, text: "System", type: "subroutine", fontColor: "#fff", lineHeight: 18, fill: "#7E6BAD", stroke: "#7E6BAD" },
+ { id: 9, x: 1880, y: 180, text: "Database", type: "database", fontColor: "#fff", lineHeight: 18, fill: "#7E6BAD", stroke: "#7E6BAD" },
+ { id: 10, x: 0, y: 220, text: "Visitor enters the website", type: "preparation", lineHeight: 18, fontColor: "#fff", fill: "#33B579", stroke: "#33B579" },
+ { id: 11, x: 180, y: 220, text: "Logged in user?", type: "process", lineHeight: 18, fontColor: "#fff", fill: "#3DA0E3", stroke: "#3DA0E3" },
+ { id: 12, x: 365, y: 240, width: 50, "height": 50, text: "XOR", type: "circle", lineHeight: 18, fontColor: "#fff", fill: "#7D8495", stroke: "#7D8495" },
+ { id: 13, x: 320, y: 120, text: "User is logged in", type: "preparation", lineHeight: 18, fontColor: "#fff", fill: "#33B579", stroke: "#33B579" },
+ { id: 14, x: 320, y: 320, text: "User is not logged in", type: "preparation", lineHeight: 18, fontColor: "#fff", fill: "#33B579", stroke: "#33B579" },
+ { id: 15, x: 490, y: 320, text: "Registered user?", type: "process", lineHeight: 18, fontColor: "#fff", fill: "#3DA0E3", stroke: "#3DA0E3" },
+ { id: 16, x: 660, y: 340, width: 50, "height": 50, text: "XOR", type: "circle", lineHeight: 18, fontColor: "#fff", fill: "#7D8495", stroke: "#7D8495" },
+ { id: 17, x: 730, y: 240, text: "User is registered", type: "preparation", lineHeight: 18, fontColor: "#fff", fill: "#33B579", stroke: "#33B579" },
+ { id: 18, x: 730, y: 400, text: "User is not registered", type: "preparation", lineHeight: 18, fontColor: "#fff", fill: "#33B579", stroke: "#33B579" },
+ { id: 19, x: 905, y: 420, width: 50, "height": 50, text: "XOR", type: "circle", lineHeight: 18, fontColor: "#fff", fill: "#7D8495", stroke: "#7D8495" },
+ { id: 20, x: 860, y: 510, text: "User types in needed data", type: "process", lineHeight: 18, fontColor: "#fff", fill: "#3DA0E3", stroke: "#3DA0E3" },
+ { id: 21, x: 860, y: 640, text: "Data typed in", type: "preparation", lineHeight: 18, fontColor: "#fff", fill: "#33B579", stroke: "#33B579" },
+ { id: 22, x: 860, y: 770, text: "Proof completion \n and correctness", type: "process", lineHeight: 18, fontColor: "#fff", fill: "#3DA0E3", stroke: "#3DA0E3" },
+ { id: 23, x: 700, y: 770, text: "System", type: "subroutine", lineHeight: 18, fontColor: "#fff", fill: "#7E6BAD", stroke: "#7E6BAD" },
+ { id: 24, x: 860, y: 890, text: "Database", type: "database", lineHeight: 18, fontColor: "#fff", fill: "#7E6BAD", stroke: "#7E6BAD" },
+ { id: 25, x: 1065, y: 790, width: 50, "height": 50, text: "XOR", type: "circle", lineHeight: 18, fontColor: "#fff", fill: "#7D8495", stroke: "#7D8495" },
+ { id: 26, x: 1020, y: 640, text: "Data is not correct", type: "preparation", lineHeight: 18, fontColor: "#fff", fill: "#33B579", stroke: "#33B579" },
+ { id: 27, x: 1020, y: 890, text: "Data is correct", type: "preparation", lineHeight: 18, fontColor: "#fff", fill: "#33B579", stroke: "#33B579" },
+ { id: 28, x: 1245, y: 910, width: 50, "height": 50, text: "AND", type: "circle", lineHeight: 18, fontColor: "#fff", fill: "#7D8495", stroke: "#7D8495" },
+ { id: 29, x: 1200, y: 770, text: "Write account data into database", type: "process", lineHeight: 18, fontColor: "#fff", fill: "#3DA0E3", stroke: "#3DA0E3" },
+ { id: 29.1, x: 1380, y: 770, text: "Data writing done", type: "preparation", lineHeight: 18, fontColor: "#fff", fill: "#33B579", stroke: "#33B579" },
+ { id: 29.2, x: 1200, y: 640, text: "Database", type: "database", lineHeight: 18, fontColor: "#fff", fill: "#7E6BAD", stroke: "#7E6BAD" },
+ { id: 30, x: 1330, y: 890, text: "Send activation \n e-mail", type: "process", lineHeight: 18, fontColor: "#fff", fill: "#3DA0E3", stroke: "#3DA0E3" },
+ { id: 31, x: 1510, y: 890, text: "Activation e-mail sent", type: "preparation", lineHeight: 18, fontColor: "#fff", fill: "#33B579", stroke: "#33B579" },
+ { id: 32, x: 1690, y: 890, text: "User activates his account", type: "process", lineHeight: 18, fontColor: "#fff", fill: "#3DA0E3", stroke: "#3DA0E3" },
+ { id: 33, x: 1870, y: 889, text: "Account activated", type: "preparation", lineHeight: 18, fontColor: "#fff", fill: "#33B579", stroke: "#33B579" },
+
+ { from: 1, to: 2, type: "dash", forwardArrow: "filled", stroke: "#7D8495" },
+ { from: 2, to: 3, type: "dash", toSide: "bottom", forwardArrow: "filled", stroke: "#7D8495" },
+ { from: 2, to: 7.5, type: "dash", fromSide: "bottom", toSide: "top", backArrow: "filled", stroke: "#7D8495" },
+ { from: 2, to: 3.2, type: "dash", fromSide: "top", toSide: "top", stroke: "#7D8495" },
+ { from: 3, to: 3.1, type: "line", forwardArrow: "filled", stroke: "#7D8495" },
+ { from: 3.1, to: 3.2, type: "line", forwardArrow: "filled", stroke: "#7D8495" },
+ { from: 2, to: 4, type: "dash", toSide: "top", forwardArrow: "filled", stroke: "#7D8495" },
+ { from: 4, to: 5, type: "dash", forwardArrow: "filled", stroke: "#7D8495" },
+ { from: 5, to: 6, type: "dash", forwardArrow: "filled", stroke: "#7D8495" },
+ { from: 6, to: 7, type: "dash", forwardArrow: "filled", stroke: "#7D8495" },
+ { from: 7, to: 7.1, type: "dash", forwardArrow: "filled", stroke: "#7D8495" },
+ { from: 7.1, to: 7.4, type: "dash", toSide: "left", stroke: "#7D8495" },
+ { from: 7.1, to: 7.5, type: "dash", toSide: "right", stroke: "#7D8495" },
+ { from: 7.2, to: 7.3, type: "dash", backArrow: "filled", stroke: "#7D8495" },
+ { from: 7.3, to: 7.4, type: "dash", backArrow: "filled", stroke: "#7D8495" },
+ { from: 7, to: 8, type: "dash", toSide: "bottom", forwardArrow: "filled", stroke: "#7D8495" },
+ { from: 7, to: 9, type: "dash", forwardArrow: "filled", stroke: "#7D8495" },
+ { from: 10, to: 11, type: "dash", forwardArrow: "filled", stroke: "#7D8495" },
+ { from: 11, to: 12, type: "dash", forwardArrow: "filled", stroke: "#7D8495" },
+ { from: 12, to: 13, type: "dash", forwardArrow: "filled", toSide: "bottom", stroke: "#7D8495" },
+ { from: 12, to: 14, type: "dash", forwardArrow: "filled", toSide: "top", stroke: "#7D8495" },
+ { from: 14, to: 15, type: "dash", forwardArrow: "filled", stroke: "#7D8495" },
+ { from: 15, to: 16, type: "dash", forwardArrow: "filled", stroke: "#7D8495" },
+ { from: 16, to: 17, type: "dash", forwardArrow: "filled", toSide: "bottom", stroke: "#7D8495" },
+ { from: 16, to: 33, type: "dash", backArrow: "filled", fromSide: "bottom", toSide: "bottom", stroke: "#7D8495" },
+ { from: 17, to: 1, type: "dash", forwardArrow: "filled", stroke: "#7D8495" },
+ { from: 17, to: 18, type: "dash", forwardArrow: "filled", stroke: "#7D8495" },
+ { from: 18, to: 19, type: "dash", forwardArrow: "filled", stroke: "#7D8495" },
+ { from: 19, to: 20, type: "dash", forwardArrow: "filled", stroke: "#7D8495" },
+ { from: 19, to: 26, type: "dash", backArrow: "filled", fromSide: "right", stroke: "#7D8495" },
+ { from: 20, to: 22, type: "dash", forwardArrow: "filled", stroke: "#7D8495" },
+ { from: 22, to: 23, type: "dash", forwardArrow: "filled", stroke: "#7D8495" },
+ { from: 22, to: 24, type: "dash", forwardArrow: "filled", stroke: "#7D8495" },
+ { from: 22, to: 25, type: "dash", forwardArrow: "filled", stroke: "#7D8495" },
+ { from: 25, to: 26, type: "dash", forwardArrow: "filled", stroke: "#7D8495" },
+ { from: 25, to: 27, type: "dash", forwardArrow: "filled", stroke: "#7D8495" },
+ { from: 27, to: 28, type: "dash", forwardArrow: "filled", stroke: "#7D8495" },
+ { from: 28, to: 29, type: "dash", forwardArrow: "filled", stroke: "#7D8495" },
+ { from: 29, to: 29.1, type: "dash", forwardArrow: "filled", stroke: "#7D8495" },
+ { from: 29, to: 29.2, type: "dash", forwardArrow: "filled", stroke: "#7D8495" },
+ { from: 28, to: 30, type: "dash", forwardArrow: "filled", stroke: "#7D8495" },
+ { from: 30, to: 31, type: "dash", forwardArrow: "filled", stroke: "#7D8495" },
+ { from: 31, to: 32, type: "dash", forwardArrow: "filled", stroke: "#7D8495" },
+ { from: 32, to: 33, type: "dash", forwardArrow: "filled", stroke: "#7D8495" }
+ ]
+}

src/app/diagram-editor/data.ts

@@ -0,0 +1,16 @@
+/* import Diagram styles */
+@import "../../../node_modules/@dhx/trial-diagram/codebase/diagram.min.css";
+
+/* specify styles for initial page */
+html,
+body {
+ margin: 0;
+ padding: 0;
+ height: 100%;
+}
+
+/* specify styles for the Diagram Editor container */
+.widget {
+ width: 100%;
+ height: 100%;
+}

src/app/diagram-editor/diagram-editor.component.css

@@ -0,0 +1,35 @@
+import { DiagramEditor } from "@dhx/trial-diagram";
+import { IDefaultEditorConfig } from "@dhx/trial-diagram/codebase/types/ts-diagram-editor";
+import { getData } from "./data";
+
+import {
+ Component,
+ ElementRef,
+ OnInit,
+ OnDestroy,
+ ViewChild,
+ ViewEncapsulation,
+} from "@angular/core";
+
+@Component({
+ encapsulation: ViewEncapsulation.None,
+ selector: "diagram-editor",
+ styleUrls: ["./diagram-editor.component.css"],
+ template: `<div #container class="widget"></div>`,
+})
+
+export class DiagramEditorComponent implements OnInit, OnDestroy {
+ @ViewChild("container", { static: true }) editor_container!: ElementRef;
+
+ private _diagram_editor!: DiagramEditor;
+
+ ngOnInit() {
+ const data = getData();
+ this._diagram_editor = new DiagramEditor(this.editor_container.nativeElement, { type: "default" } as IDefaultEditorConfig);
+ this._diagram_editor.parse(data);
+ }
+
+ ngOnDestroy(): void {
+ this._diagram_editor?.destructor();
+ }
+}