0 || nodes.length > 0)"
[server]="server"
diff --git a/src/app/components/project-map/drawings-editors/link-style-editor/link-style-editor.component.html b/src/app/components/project-map/drawings-editors/link-style-editor/link-style-editor.component.html
new file mode 100644
index 00000000..aa761fbb
--- /dev/null
+++ b/src/app/components/project-map/drawings-editors/link-style-editor/link-style-editor.component.html
@@ -0,0 +1,35 @@
+Style editor
+
+
+
+
+
+
+
+
+
diff --git a/src/app/components/project-map/drawings-editors/link-style-editor/link-style-editor.component.scss b/src/app/components/project-map/drawings-editors/link-style-editor/link-style-editor.component.scss
new file mode 100644
index 00000000..38ca9c48
--- /dev/null
+++ b/src/app/components/project-map/drawings-editors/link-style-editor/link-style-editor.component.scss
@@ -0,0 +1,54 @@
+ .item {
+ height: 25px;
+ font-size: 10pt;
+ margin-bottom: 10px;
+ }
+
+ .item-name {
+ margin-bottom: 10px;
+ }
+
+ .item-value {
+ width: 100%;
+ margin-bottom: 10px;
+ }
+
+ .input-color {
+ padding: 0px;
+ border-width: 0px;
+ width: 100%;
+ background-color: transparent;
+ outline: none;
+ }
+
+ input:focus {
+ outline: none;
+ }
+
+ input[type='color'] {
+ -webkit-appearance: none;
+ border: none;
+ height: 25px;
+ }
+
+ input[type='color']::-webkit-color-swatch-wrapper {
+ padding: 0;
+ }
+
+ input[type='color']::-webkit-color-swatch {
+ border: none;
+ }
+
+ .modal-form-container {
+ display: flex;
+ flex-direction: column;
+ }
+
+ .modal-form-container > * {
+ width: 100%;
+ }
+
+ .form-field {
+ width: 100%;
+ }
+
\ No newline at end of file
diff --git a/src/app/components/project-map/drawings-editors/link-style-editor/link-style-editor.component.ts b/src/app/components/project-map/drawings-editors/link-style-editor/link-style-editor.component.ts
new file mode 100644
index 00000000..51fd2bac
--- /dev/null
+++ b/src/app/components/project-map/drawings-editors/link-style-editor/link-style-editor.component.ts
@@ -0,0 +1,61 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { MatDialogRef } from '@angular/material/dialog';
+import { Link } from '../../../../models/link';
+import { Project } from '../../../../models/project';
+import { Server } from '../../../../models/server';
+import { ToasterService } from '../../../../services/toaster.service';
+import { NonNegativeValidator } from '../../../../validators/non-negative-validator';
+import { LinkService } from '../../../../services/link.service';
+
+@Component({
+ selector: 'app-link-style-editor',
+ templateUrl: './link-style-editor.component.html',
+ styleUrls: ['./link-style-editor.component.scss'],
+})
+export class LinkStyleEditorDialogComponent implements OnInit {
+ server: Server;
+ project: Project;
+ link: Link;
+ formGroup: FormGroup;
+ borderTypes = ["Solid", "Dash", "Dot", "Dash Dot"];
+
+ constructor(
+ public dialogRef: MatDialogRef,
+ private formBuilder: FormBuilder,
+ private toasterService: ToasterService,
+ private linkService: LinkService,
+ private nonNegativeValidator: NonNegativeValidator
+ ) {
+ this.formGroup = this.formBuilder.group({
+ color: new FormControl('', [Validators.required, nonNegativeValidator.get]),
+ width: new FormControl('', [Validators.required, nonNegativeValidator.get]),
+ type: new FormControl('', [Validators.required, nonNegativeValidator.get])
+ });
+ }
+
+ ngOnInit() {
+ this.formGroup.controls['color'].setValue(this.link.link_style.color);
+ this.formGroup.controls['width'].setValue(this.link.link_style.width);
+ this.formGroup.controls['type'].setValue(this.link.link_style.width);
+ }
+
+ onNoClick() {
+ this.dialogRef.close();
+ }
+
+ onYesClick() {
+ if (this.formGroup.valid) {
+ this.link.link_style.color = this.formGroup.get('color').value;
+ this.link.link_style.width = this.formGroup.get('width').value;
+ this.link.link_style.type = this.formGroup.get('type').value;
+
+ this.linkService.updateLink(this.server, this.link).subscribe(() => {
+ this.toasterService.success("Link updated");
+ this.dialogRef.close();
+ });
+ } else {
+ this.toasterService.error(`Entered data is incorrect`);
+ }
+ }
+}
diff --git a/src/app/models/link-style.ts b/src/app/models/link-style.ts
new file mode 100644
index 00000000..c19be32c
--- /dev/null
+++ b/src/app/models/link-style.ts
@@ -0,0 +1,5 @@
+export class LinkStyle {
+ color: string;
+ width: number;
+ type: number;
+}
diff --git a/src/app/models/link.ts b/src/app/models/link.ts
index bb7a26bb..46a898fd 100644
--- a/src/app/models/link.ts
+++ b/src/app/models/link.ts
@@ -1,6 +1,7 @@
import { Node } from '../cartography/models/node';
import { Filter } from './filter';
import { LinkNode } from './link-node';
+import { LinkStyle } from './link-style';
export class Link {
capture_file_name: string;
@@ -12,6 +13,7 @@ export class Link {
nodes: LinkNode[];
project_id: string;
suspend: boolean;
+ link_style?: LinkStyle;
distance: number; // this is not from server
length: number; // this is not from server