From f338a2e33dbf473a918aa4bb3497916279af6d94 Mon Sep 17 00:00:00 2001
From: Rajnikant Lodhi <rajnikant.lodhi@solarwinds.com>
Date: Thu, 18 Aug 2022 18:25:38 +0530
Subject: [PATCH 01/12] Resolve missing border style options dash dot dot and
 invisible for links between devices

---
 .../map/map-drawing-to-svg-converter.ts       |  2 +-
 .../style-editor/style-editor.component.ts    | 30 +++++++++++--------
 2 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/src/app/cartography/converters/map/map-drawing-to-svg-converter.ts b/src/app/cartography/converters/map/map-drawing-to-svg-converter.ts
index 9182870b..4e7b7432 100644
--- a/src/app/cartography/converters/map/map-drawing-to-svg-converter.ts
+++ b/src/app/cartography/converters/map/map-drawing-to-svg-converter.ts
@@ -19,7 +19,7 @@ export class MapDrawingToSvgConverter implements Converter<MapDrawing, string> {
       elem = `<ellipse fill=\"${mapDrawing.element.fill}\" fill-opacity=\"${mapDrawing.element.fill_opacity}\" cx=\"${mapDrawing.element.cx}\" cy=\"${mapDrawing.element.cy}\" rx=\"${mapDrawing.element.rx}\" ry=\"${mapDrawing.element.ry}\" stroke=\"${mapDrawing.element.stroke}\" stroke-width=\"${mapDrawing.element.stroke_width}\" stroke-dasharray=\"${mapDrawing.element.stroke_dasharray}\" />`;
     } else if (mapDrawing.element instanceof LineElement) {
       elem = `<line stroke=\"${mapDrawing.element.stroke}\" stroke-width=\"${mapDrawing.element.stroke_width}\" x1=\"${mapDrawing.element.x1}\" x2=\"${mapDrawing.element.x2}\" y1=\"${mapDrawing.element.y1}\" y2=\"${mapDrawing.element.y2}\" stroke-dasharray=\"${mapDrawing.element.stroke_dasharray}\" />`;
-    } else if (mapDrawing.element instanceof TextElement) {
+    } else if (mapDrawing.element instanceof TextElement ) {
       elem = `<text fill=\"${mapDrawing.element.fill}\" fill-opacity=\"1.0\" font-family=\"${mapDrawing.element.font_family}\" font-size=\"${mapDrawing.element.font_size}\" font-weight=\"${mapDrawing.element.font_weight}\">${mapDrawing.element.text}</text>`;
     } else return '';
 
diff --git a/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.ts b/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.ts
index 84830a2c..e2ad175f 100644
--- a/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.ts
+++ b/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.ts
@@ -8,8 +8,8 @@ import { Drawing } from '../../../../cartography/models/drawing';
 import { EllipseElement } from '../../../../cartography/models/drawings/ellipse-element';
 import { LineElement } from '../../../../cartography/models/drawings/line-element';
 import { RectElement } from '../../../../cartography/models/drawings/rect-element';
+import { Controller } from '../../../../models/controller';
 import { Project } from '../../../../models/project';
-import{ Controller } from '../../../../models/controller';
 import { DrawingService } from '../../../../services/drawing.service';
 import { ToasterService } from '../../../../services/toaster.service';
 import { NonNegativeValidator } from '../../../../validators/non-negative-validator';
@@ -21,16 +21,18 @@ import { RotationValidator } from '../../../../validators/rotation-validator';
   styleUrls: ['./style-editor.component.scss'],
 })
 export class StyleEditorDialogComponent implements OnInit {
-  controller:Controller ;
+  controller: Controller;
   project: Project;
   drawing: Drawing;
   element: ElementData;
   formGroup: FormGroup;
-  borderTypes = [ 
-    {value:"none",name:"Solid"}, 
-    {value:"5",name:"Dash"}, 
-    {value:"15",name:"Dot"}, 
-    {value:"5 15",name:"Dash Dot"}
+  borderTypes = [
+    { value: '', name: 'Invisible' },
+    { value: 'none', name: 'Solid' },
+    { value: '5', name: 'Dash' },
+    { value: '15', name: 'Dot' },
+    { value: '5 15', name: 'Dash Dot' },
+    { value: '10 5 5', name: 'Dash Dot Dot' },
   ];
 
   constructor(
@@ -55,7 +57,7 @@ export class StyleEditorDialogComponent implements OnInit {
     if (this.drawing.element instanceof RectElement || this.drawing.element instanceof EllipseElement) {
       this.element.fill = this.drawing.element.fill;
       this.element.stroke = this.drawing.element.stroke;
-      this.element.stroke_dasharray = this.drawing.element.stroke_dasharray ?? 'none'
+      this.element.stroke_dasharray = this.drawing.element.stroke_dasharray ?? 'none';
       this.element.stroke_width = this.drawing.element.stroke_width;
     } else if (this.drawing.element instanceof LineElement) {
       this.element.stroke = this.drawing.element.stroke;
@@ -74,7 +76,11 @@ export class StyleEditorDialogComponent implements OnInit {
 
   onYesClick() {
     if (this.formGroup.valid) {
-      this.element.stroke_width = this.formGroup.get('borderWidth').value;
+      if (this.element.stroke_dasharray == '') {
+        this.element.stroke_width = 0;
+      } else {
+        this.element.stroke_width = this.formGroup.get('borderWidth').value === 0 ? 2 : this.formGroup.get('borderWidth').value 
+      }
       this.drawing.rotation = this.formGroup.get('rotation').value;
 
       if (this.drawing.element instanceof RectElement || this.drawing.element instanceof EllipseElement) {
@@ -84,12 +90,12 @@ export class StyleEditorDialogComponent implements OnInit {
         this.drawing.element.stroke_width = this.element.stroke_width;
       } else if (this.drawing.element instanceof LineElement) {
         this.drawing.element.stroke = this.element.stroke;
-        this.drawing.element.stroke_dasharray = this.element.stroke_dasharray;
-        this.drawing.element.stroke_width = this.element.stroke_width;
+        this.drawing.element.stroke_dasharray = this.element.stroke_dasharray === '' ? 'none': this.element.stroke_dasharray ;
+        this.drawing.element.stroke_width = this.element.stroke_width === 0 ? 2 :this.element.stroke_width;
       }
       let mapDrawing = this.drawingToMapDrawingConverter.convert(this.drawing);
       mapDrawing.element = this.drawing.element;
-      
+
       this.drawing.svg = this.mapDrawingToSvgConverter.convert(mapDrawing);
 
       this.drawingService.update(this.controller, this.drawing).subscribe((controllerDrawing: Drawing) => {

From 651d4c9d320731c1330032ada380438593e58edf Mon Sep 17 00:00:00 2001
From: Jeremy Grossmann <grossmj@gns3.net>
Date: Thu, 18 Aug 2022 22:21:48 +0200
Subject: [PATCH 02/12] Change Invisible to No border

---
 .../drawings-editors/style-editor/style-editor.component.ts     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.ts b/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.ts
index e2ad175f..a9c6790e 100644
--- a/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.ts
+++ b/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.ts
@@ -27,12 +27,12 @@ export class StyleEditorDialogComponent implements OnInit {
   element: ElementData;
   formGroup: FormGroup;
   borderTypes = [
-    { value: '', name: 'Invisible' },
     { value: 'none', name: 'Solid' },
     { value: '5', name: 'Dash' },
     { value: '15', name: 'Dot' },
     { value: '5 15', name: 'Dash Dot' },
     { value: '10 5 5', name: 'Dash Dot Dot' },
+    { value: '', name: 'No border' },
   ];
 
   constructor(

From c5837b237a9738da153763ee88625761e070ba94 Mon Sep 17 00:00:00 2001
From: Rajnikant Lodhi <rajnikant.lodhi@solarwinds.com>
Date: Mon, 22 Aug 2022 16:06:33 +0530
Subject: [PATCH 03/12] Resolve inconsistent border styles for device links
 between GNS3 desktop UI and web-ui

---
 .../style-editor/style-editor.component.ts                | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.ts b/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.ts
index e2ad175f..e120eb54 100644
--- a/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.ts
+++ b/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.ts
@@ -29,10 +29,10 @@ export class StyleEditorDialogComponent implements OnInit {
   borderTypes = [
     { value: '', name: 'Invisible' },
     { value: 'none', name: 'Solid' },
-    { value: '5', name: 'Dash' },
-    { value: '15', name: 'Dot' },
-    { value: '5 15', name: 'Dash Dot' },
-    { value: '10 5 5', name: 'Dash Dot Dot' },
+    { value: '5', name: 'Dot' },
+    { value: '15', name: 'Dash' },
+    { value: '15 5', name: 'Dash Dot' },
+    { value: '15 5 5', name: 'Dash Dot Dot' },
   ];
 
   constructor(

From b66af49137c7cbc42f4b5410dacc21e38398eb7d Mon Sep 17 00:00:00 2001
From: Rajnikant Lodhi <rajnikant.lodhi@solarwinds.com>
Date: Tue, 23 Aug 2022 16:53:48 +0530
Subject: [PATCH 04/12] Modified the stroke dasharray value for creating Dash
 Dot, Dash Dot Dot border style

---
 .../style-editor/style-editor.component.html       |  2 +-
 .../style-editor/style-editor.component.ts         | 14 ++++++++------
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.html b/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.html
index 7ce5bd20..0807857e 100644
--- a/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.html
+++ b/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.html
@@ -37,7 +37,7 @@
   </form>
 </div>
 
-<div mat-dialog-actions>
+<div mat-dialog-actions align="end">
   <button mat-button (click)="onNoClick()" color="accent">Cancel</button>
   <button mat-button (click)="onYesClick()" tabindex="2" mat-raised-button color="primary">Apply</button>
 </div>
diff --git a/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.ts b/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.ts
index 26a954b6..1097b9c1 100644
--- a/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.ts
+++ b/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.ts
@@ -28,10 +28,10 @@ export class StyleEditorDialogComponent implements OnInit {
   formGroup: FormGroup;
   borderTypes = [
     { value: 'none', name: 'Solid' },
+    { value: '15 3', name: 'Dash' },
     { value: '5', name: 'Dot' },
-    { value: '15', name: 'Dash' },
-    { value: '15 5', name: 'Dash Dot' },
-    { value: '15 5 5', name: 'Dash Dot Dot' },
+    { value: '15 2 7 2', name: 'Dash Dot' },
+    { value: '15 2 7 2 7 2', name: 'Dash Dot Dot' },
     { value: '', name: 'No border' },
   ];
 
@@ -79,7 +79,8 @@ export class StyleEditorDialogComponent implements OnInit {
       if (this.element.stroke_dasharray == '') {
         this.element.stroke_width = 0;
       } else {
-        this.element.stroke_width = this.formGroup.get('borderWidth').value === 0 ? 2 : this.formGroup.get('borderWidth').value 
+        this.element.stroke_width =
+          this.formGroup.get('borderWidth').value === 0 ? 2 : this.formGroup.get('borderWidth').value;
       }
       this.drawing.rotation = this.formGroup.get('rotation').value;
 
@@ -90,8 +91,9 @@ export class StyleEditorDialogComponent implements OnInit {
         this.drawing.element.stroke_width = this.element.stroke_width;
       } else if (this.drawing.element instanceof LineElement) {
         this.drawing.element.stroke = this.element.stroke;
-        this.drawing.element.stroke_dasharray = this.element.stroke_dasharray === '' ? 'none': this.element.stroke_dasharray ;
-        this.drawing.element.stroke_width = this.element.stroke_width === 0 ? 2 :this.element.stroke_width;
+        this.drawing.element.stroke_dasharray =
+          this.element.stroke_dasharray === '' ? 'none' : this.element.stroke_dasharray;
+        this.drawing.element.stroke_width = this.element.stroke_width === 0 ? 2 : this.element.stroke_width;
       }
       let mapDrawing = this.drawingToMapDrawingConverter.convert(this.drawing);
       mapDrawing.element = this.drawing.element;

From 22ef305e81245ade6f50b50bfe191338a5a889f7 Mon Sep 17 00:00:00 2001
From: grossmj <grossmj@gns3.net>
Date: Tue, 23 Aug 2022 23:58:21 +0200
Subject: [PATCH 05/12] Add comments

---
 src/app/cartography/helpers/qt-dasharray-fixer.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/app/cartography/helpers/qt-dasharray-fixer.ts b/src/app/cartography/helpers/qt-dasharray-fixer.ts
index 31e2a7c2..e7aade66 100644
--- a/src/app/cartography/helpers/qt-dasharray-fixer.ts
+++ b/src/app/cartography/helpers/qt-dasharray-fixer.ts
@@ -7,10 +7,10 @@ import { Injectable } from '@angular/core';
 @Injectable()
 export class QtDasharrayFixer {
   static MAPPING = {
-    '25, 25': '10, 2',
-    '5, 25': '4, 2',
-    '5, 25, 25': '5, 5, 1, 5',
-    '25, 25, 5, 25, 5': '5, 2, 5, 2, 5',
+    '25, 25': '10, 2', // Dash
+    '5, 25': '4, 2', // Dot
+    '5, 25, 25': '5, 5, 1, 5', // Dash Dot
+    '25, 25, 5, 25, 5': '5, 2, 5, 2, 5', // Dash Dot Dot
   };
 
   public fix(dasharray: string): string {

From 5bee5deb22e7ec09342e0e64a2cb325eee53232a Mon Sep 17 00:00:00 2001
From: Rajnikant Lodhi <rajnikant.lodhi@solarwinds.com>
Date: Wed, 24 Aug 2022 16:03:50 +0530
Subject: [PATCH 06/12] convert the qt value into the stroke dasharray

---
 .../cartography/helpers/qt-dasharray-fixer.ts |  2 ++
 .../style-editor/style-editor.component.ts    | 35 +++++++++++++------
 2 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/src/app/cartography/helpers/qt-dasharray-fixer.ts b/src/app/cartography/helpers/qt-dasharray-fixer.ts
index e7aade66..127887ef 100644
--- a/src/app/cartography/helpers/qt-dasharray-fixer.ts
+++ b/src/app/cartography/helpers/qt-dasharray-fixer.ts
@@ -14,9 +14,11 @@ export class QtDasharrayFixer {
   };
 
   public fix(dasharray: string): string {
+    if(dasharray || dasharray == '' ){
     if (dasharray in QtDasharrayFixer.MAPPING) {
       return QtDasharrayFixer.MAPPING[dasharray];
     }
     return dasharray;
   }
 }
+}
diff --git a/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.ts b/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.ts
index 1097b9c1..5633f3a0 100644
--- a/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.ts
+++ b/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.ts
@@ -4,6 +4,7 @@ import { MatDialogRef } from '@angular/material/dialog';
 import { DrawingToMapDrawingConverter } from '../../../../cartography/converters/map/drawing-to-map-drawing-converter';
 import { MapDrawingToSvgConverter } from '../../../../cartography/converters/map/map-drawing-to-svg-converter';
 import { DrawingsDataSource } from '../../../../cartography/datasources/drawings-datasource';
+import { QtDasharrayFixer } from '../../../../cartography/helpers/qt-dasharray-fixer';
 import { Drawing } from '../../../../cartography/models/drawing';
 import { EllipseElement } from '../../../../cartography/models/drawings/ellipse-element';
 import { LineElement } from '../../../../cartography/models/drawings/line-element';
@@ -27,12 +28,12 @@ export class StyleEditorDialogComponent implements OnInit {
   element: ElementData;
   formGroup: FormGroup;
   borderTypes = [
-    { value: 'none', name: 'Solid' },
-    { value: '15 3', name: 'Dash' },
-    { value: '5', name: 'Dot' },
-    { value: '15 2 7 2', name: 'Dash Dot' },
-    { value: '15 2 7 2 7 2', name: 'Dash Dot Dot' },
-    { value: '', name: 'No border' },
+    {qt:'none', value: 'none', name: 'Solid' },
+    {qt:'10, 2', value: '25, 25', name: 'Dash' },
+    {qt:'4, 2', value: '5, 25', name: 'Dot' },
+    {qt:'5, 5, 1, 5', value: '5, 25, 25', name: 'Dash Dot' },
+    {qt:'5, 2, 5, 2, 5', value: '25, 25, 5, 25, 5', name: 'Dash Dot Dot' },
+    {qt:'', value: '', name: 'No border' },
   ];
 
   constructor(
@@ -44,7 +45,8 @@ export class StyleEditorDialogComponent implements OnInit {
     private formBuilder: FormBuilder,
     private toasterService: ToasterService,
     private nonNegativeValidator: NonNegativeValidator,
-    private rotationValidator: RotationValidator
+    private rotationValidator: RotationValidator,
+    private qtDasharrayFixer: QtDasharrayFixer
   ) {
     this.formGroup = this.formBuilder.group({
       borderWidth: new FormControl('', [Validators.required, nonNegativeValidator.get]),
@@ -53,15 +55,28 @@ export class StyleEditorDialogComponent implements OnInit {
   }
 
   ngOnInit() {
+    let dasharray_find_value;
     this.element = new ElementData();
     if (this.drawing.element instanceof RectElement || this.drawing.element instanceof EllipseElement) {
       this.element.fill = this.drawing.element.fill;
       this.element.stroke = this.drawing.element.stroke;
-      this.element.stroke_dasharray = this.drawing.element.stroke_dasharray ?? 'none';
+      let dasharray_value = this.drawing.element.stroke_dasharray;
+      this.borderTypes.map((_) => {
+        if (_.qt == dasharray_value) {
+          dasharray_find_value = _.value;
+        }
+      });
+      this.element.stroke_dasharray = dasharray_find_value ?? 'none';
       this.element.stroke_width = this.drawing.element.stroke_width;
     } else if (this.drawing.element instanceof LineElement) {
       this.element.stroke = this.drawing.element.stroke;
-      this.element.stroke_dasharray = this.drawing.element.stroke_dasharray ?? 'none';
+      let dasharray_value = this.drawing.element.stroke_dasharray;
+      this.borderTypes.map((_) => {
+        if (_.qt == dasharray_value) {
+          dasharray_find_value = _.value;
+        }
+      });
+      this.element.stroke_dasharray = dasharray_find_value ?? 'none';
       this.element.stroke_width = this.drawing.element.stroke_width;
     }
 
@@ -87,7 +102,7 @@ export class StyleEditorDialogComponent implements OnInit {
       if (this.drawing.element instanceof RectElement || this.drawing.element instanceof EllipseElement) {
         this.drawing.element.fill = this.element.fill;
         this.drawing.element.stroke = this.element.stroke;
-        this.drawing.element.stroke_dasharray = this.element.stroke_dasharray;
+        this.drawing.element.stroke_dasharray = this.qtDasharrayFixer.fix(this.element.stroke_dasharray);
         this.drawing.element.stroke_width = this.element.stroke_width;
       } else if (this.drawing.element instanceof LineElement) {
         this.drawing.element.stroke = this.element.stroke;

From 43c689b30aa9290675e954379cb3e1470c2a5cdc Mon Sep 17 00:00:00 2001
From: Rajnikant Lodhi <rajnikant.lodhi@solarwinds.com>
Date: Wed, 24 Aug 2022 18:04:20 +0530
Subject: [PATCH 07/12] remove qt fixer condition

---
 .../style-editor/style-editor.component.ts     | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.ts b/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.ts
index 5633f3a0..2bccfaf4 100644
--- a/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.ts
+++ b/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.ts
@@ -28,12 +28,12 @@ export class StyleEditorDialogComponent implements OnInit {
   element: ElementData;
   formGroup: FormGroup;
   borderTypes = [
-    {qt:'none', value: 'none', name: 'Solid' },
-    {qt:'10, 2', value: '25, 25', name: 'Dash' },
-    {qt:'4, 2', value: '5, 25', name: 'Dot' },
-    {qt:'5, 5, 1, 5', value: '5, 25, 25', name: 'Dash Dot' },
-    {qt:'5, 2, 5, 2, 5', value: '25, 25, 5, 25, 5', name: 'Dash Dot Dot' },
-    {qt:'', value: '', name: 'No border' },
+    { qt: 'none', value: 'none', name: 'Solid' },
+    { qt: '10, 2', value: '25, 25', name: 'Dash' },
+    { qt: '4, 2', value: '5, 25', name: 'Dot' },
+    { qt: '5, 5, 1, 5', value: '5, 25, 25', name: 'Dash Dot' },
+    { qt: '5, 2, 5, 2, 5', value: '25, 25, 5, 25, 5', name: 'Dash Dot Dot' },
+    { qt: '', value: '', name: 'No border' },
   ];
 
   constructor(
@@ -62,7 +62,7 @@ export class StyleEditorDialogComponent implements OnInit {
       this.element.stroke = this.drawing.element.stroke;
       let dasharray_value = this.drawing.element.stroke_dasharray;
       this.borderTypes.map((_) => {
-        if (_.qt == dasharray_value) {
+        if (_.qt == dasharray_value || _.value == dasharray_value) {
           dasharray_find_value = _.value;
         }
       });
@@ -72,7 +72,7 @@ export class StyleEditorDialogComponent implements OnInit {
       this.element.stroke = this.drawing.element.stroke;
       let dasharray_value = this.drawing.element.stroke_dasharray;
       this.borderTypes.map((_) => {
-        if (_.qt == dasharray_value) {
+        if (_.qt == dasharray_value || _.value == dasharray_value) {
           dasharray_find_value = _.value;
         }
       });
@@ -102,7 +102,7 @@ export class StyleEditorDialogComponent implements OnInit {
       if (this.drawing.element instanceof RectElement || this.drawing.element instanceof EllipseElement) {
         this.drawing.element.fill = this.element.fill;
         this.drawing.element.stroke = this.element.stroke;
-        this.drawing.element.stroke_dasharray = this.qtDasharrayFixer.fix(this.element.stroke_dasharray);
+        this.drawing.element.stroke_dasharray = this.element.stroke_dasharray;
         this.drawing.element.stroke_width = this.element.stroke_width;
       } else if (this.drawing.element instanceof LineElement) {
         this.drawing.element.stroke = this.element.stroke;

From 1c8e56274ad94f75915ec0e9713c1cb3148aaf91 Mon Sep 17 00:00:00 2001
From: Rajnikant Lodhi <rajnikant.lodhi@solarwinds.com>
Date: Thu, 25 Aug 2022 10:44:36 +0530
Subject: [PATCH 08/12] Resolve  stroke dasharray  value get undefined issue on
 web ui

---
 .../map/map-drawing-to-svg-converter.ts       | 22 +++++++++++++++----
 .../style-editor/style-editor.component.ts    |  4 ++--
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/app/cartography/converters/map/map-drawing-to-svg-converter.ts b/src/app/cartography/converters/map/map-drawing-to-svg-converter.ts
index 4e7b7432..b6c974bd 100644
--- a/src/app/cartography/converters/map/map-drawing-to-svg-converter.ts
+++ b/src/app/cartography/converters/map/map-drawing-to-svg-converter.ts
@@ -14,12 +14,26 @@ export class MapDrawingToSvgConverter implements Converter<MapDrawing, string> {
     let elem = ``;
 
     if (mapDrawing.element instanceof RectElement) {
-      elem = `<rect fill=\"${mapDrawing.element.fill}\" fill-opacity=\"${mapDrawing.element.fill_opacity}\" height=\"${mapDrawing.element.height}\" width=\"${mapDrawing.element.width}\" stroke=\"${mapDrawing.element.stroke}\" stroke-width=\"${mapDrawing.element.stroke_width}\" stroke-dasharray=\"${mapDrawing.element.stroke_dasharray}\" />`;
+      elem = `<rect fill=\"${mapDrawing.element.fill}\" fill-opacity=\"${mapDrawing.element.fill_opacity}\" height=\"${
+        mapDrawing.element.height
+      }\" width=\"${mapDrawing.element.width}\" stroke=\"${mapDrawing.element.stroke}\" stroke-width=\"${
+        mapDrawing.element.stroke_width
+      }\" stroke-dasharray=\"${mapDrawing.element.stroke_dasharray ?? 'none'}\" />`;
     } else if (mapDrawing.element instanceof EllipseElement) {
-      elem = `<ellipse fill=\"${mapDrawing.element.fill}\" fill-opacity=\"${mapDrawing.element.fill_opacity}\" cx=\"${mapDrawing.element.cx}\" cy=\"${mapDrawing.element.cy}\" rx=\"${mapDrawing.element.rx}\" ry=\"${mapDrawing.element.ry}\" stroke=\"${mapDrawing.element.stroke}\" stroke-width=\"${mapDrawing.element.stroke_width}\" stroke-dasharray=\"${mapDrawing.element.stroke_dasharray}\" />`;
+      elem = `<ellipse fill=\"${mapDrawing.element.fill}\" fill-opacity=\"${mapDrawing.element.fill_opacity}\" cx=\"${
+        mapDrawing.element.cx
+      }\" cy=\"${mapDrawing.element.cy}\" rx=\"${mapDrawing.element.rx}\" ry=\"${mapDrawing.element.ry}\" stroke=\"${
+        mapDrawing.element.stroke
+      }\" stroke-width=\"${mapDrawing.element.stroke_width}\" stroke-dasharray=\"${
+        mapDrawing.element.stroke_dasharray ?? 'none'
+      }\" />`;
     } else if (mapDrawing.element instanceof LineElement) {
-      elem = `<line stroke=\"${mapDrawing.element.stroke}\" stroke-width=\"${mapDrawing.element.stroke_width}\" x1=\"${mapDrawing.element.x1}\" x2=\"${mapDrawing.element.x2}\" y1=\"${mapDrawing.element.y1}\" y2=\"${mapDrawing.element.y2}\" stroke-dasharray=\"${mapDrawing.element.stroke_dasharray}\" />`;
-    } else if (mapDrawing.element instanceof TextElement ) {
+      elem = `<line stroke=\"${mapDrawing.element.stroke}\" stroke-width=\"${mapDrawing.element.stroke_width}\" x1=\"${
+        mapDrawing.element.x1
+      }\" x2=\"${mapDrawing.element.x2}\" y1=\"${mapDrawing.element.y1}\" y2=\"${
+        mapDrawing.element.y2
+      }\" stroke-dasharray=\"${mapDrawing.element.stroke_dasharray ?? 'none'}\" />`;
+    } else if (mapDrawing.element instanceof TextElement) {
       elem = `<text fill=\"${mapDrawing.element.fill}\" fill-opacity=\"1.0\" font-family=\"${mapDrawing.element.font_family}\" font-size=\"${mapDrawing.element.font_size}\" font-weight=\"${mapDrawing.element.font_weight}\">${mapDrawing.element.text}</text>`;
     } else return '';
 
diff --git a/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.ts b/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.ts
index 2bccfaf4..f7b66c4e 100644
--- a/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.ts
+++ b/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.ts
@@ -60,13 +60,13 @@ export class StyleEditorDialogComponent implements OnInit {
     if (this.drawing.element instanceof RectElement || this.drawing.element instanceof EllipseElement) {
       this.element.fill = this.drawing.element.fill;
       this.element.stroke = this.drawing.element.stroke;
-      let dasharray_value = this.drawing.element.stroke_dasharray;
+      let dasharray_value = this.drawing.element.stroke_dasharray ?? 'none';
       this.borderTypes.map((_) => {
         if (_.qt == dasharray_value || _.value == dasharray_value) {
           dasharray_find_value = _.value;
         }
       });
-      this.element.stroke_dasharray = dasharray_find_value ?? 'none';
+      this.element.stroke_dasharray = dasharray_find_value;
       this.element.stroke_width = this.drawing.element.stroke_width;
     } else if (this.drawing.element instanceof LineElement) {
       this.element.stroke = this.drawing.element.stroke;

From 0eaa5c714c778f078a0faa958dc9a35a3ec685b3 Mon Sep 17 00:00:00 2001
From: grossmj <grossmj@gns3.net>
Date: Thu, 25 Aug 2022 22:17:52 +0200
Subject: [PATCH 09/12] Add 'Dash Dot Dot' border type in link style editor

---
 .../link-style-editor/link-style-editor.component.ts        | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

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
index 735a1872..e92b9af9 100644
--- 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
@@ -21,7 +21,7 @@ export class LinkStyleEditorDialogComponent implements OnInit {
   project: Project;
   link: Link;
   formGroup: FormGroup;
-  borderTypes = ["Solid", "Dash", "Dot", "Dash Dot"];
+  borderTypes = ["Solid", "Dash", "Dot", "Dash Dot", "Dash Dot Dot"];
 
   constructor(
     public dialogRef: MatDialogRef<LinkStyleEditorDialogComponent>,
@@ -71,8 +71,8 @@ export class LinkStyleEditorDialogComponent implements OnInit {
       this.linkService.updateLinkStyle(this.controller, this.link).subscribe((link) => {
         this.linksDataSource.update(link);
         this.linksEventSource.edited.next(this.linkToMapLink.convert(link));
-        location.reload() 
-        // we add this code/line for reload the entire page because single graph/link style is not updated automatically. 
+        location.reload()
+        // we add this code/line for reload the entire page because single graph/link style is not updated automatically.
         // this.toasterService.success("Link updated");
         this.dialogRef.close();
       });

From 573d36057bf317f34d05068bb55f9edc6cc1d832 Mon Sep 17 00:00:00 2001
From: Rajnikant Lodhi <rajnikant.lodhi@solarwinds.com>
Date: Fri, 26 Aug 2022 11:06:57 +0530
Subject: [PATCH 10/12] add a condition for getting  no border and solid border
 style

---
 .../drawings-editors/style-editor/style-editor.component.ts  | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.ts b/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.ts
index f7b66c4e..0c0da668 100644
--- a/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.ts
+++ b/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.ts
@@ -60,7 +60,10 @@ export class StyleEditorDialogComponent implements OnInit {
     if (this.drawing.element instanceof RectElement || this.drawing.element instanceof EllipseElement) {
       this.element.fill = this.drawing.element.fill;
       this.element.stroke = this.drawing.element.stroke;
-      let dasharray_value = this.drawing.element.stroke_dasharray ?? 'none';
+      let dasharray_value =
+        this.drawing.element.stroke_dasharray ??
+        this.drawing.element.stroke_width ??
+        (this.drawing.element.stroke_width == undefined || this.drawing.element.stroke_width == 0 ? '' : 'none');
       this.borderTypes.map((_) => {
         if (_.qt == dasharray_value || _.value == dasharray_value) {
           dasharray_find_value = _.value;

From 3fa923a9d10aa810d2238b3e6af4db0c42eb53a9 Mon Sep 17 00:00:00 2001
From: Rajnikant Lodhi <rajnikant.lodhi@solarwinds.com>
Date: Sat, 27 Aug 2022 00:30:34 +0530
Subject: [PATCH 11/12] Resolve no border style issue

---
 .../map/map-drawing-to-svg-converter.ts       | 20 ++---------
 .../style-editor/style-editor.component.ts    | 34 +++++++------------
 2 files changed, 16 insertions(+), 38 deletions(-)

diff --git a/src/app/cartography/converters/map/map-drawing-to-svg-converter.ts b/src/app/cartography/converters/map/map-drawing-to-svg-converter.ts
index b6c974bd..bd76c68c 100644
--- a/src/app/cartography/converters/map/map-drawing-to-svg-converter.ts
+++ b/src/app/cartography/converters/map/map-drawing-to-svg-converter.ts
@@ -14,25 +14,11 @@ export class MapDrawingToSvgConverter implements Converter<MapDrawing, string> {
     let elem = ``;
 
     if (mapDrawing.element instanceof RectElement) {
-      elem = `<rect fill=\"${mapDrawing.element.fill}\" fill-opacity=\"${mapDrawing.element.fill_opacity}\" height=\"${
-        mapDrawing.element.height
-      }\" width=\"${mapDrawing.element.width}\" stroke=\"${mapDrawing.element.stroke}\" stroke-width=\"${
-        mapDrawing.element.stroke_width
-      }\" stroke-dasharray=\"${mapDrawing.element.stroke_dasharray ?? 'none'}\" />`;
+      elem = `${mapDrawing.element.stroke_dasharray == '' ? `<rect fill=\"${mapDrawing.element.fill}\" fill-opacity=\"${mapDrawing.element.fill_opacity}\" height=\"${mapDrawing.element.height}\" width=\"${mapDrawing.element.width}\"/>` :`<rect fill=\"${mapDrawing.element.fill}\" fill-opacity=\"${mapDrawing.element.fill_opacity}\" height=\"${mapDrawing.element.height}\" width=\"${mapDrawing.element.width}\" stroke=\"${mapDrawing.element.stroke}\" stroke-width=\"${mapDrawing.element.stroke_width}\" stroke-dasharray=\"${mapDrawing.element.stroke_dasharray}\" />`}`;
     } else if (mapDrawing.element instanceof EllipseElement) {
-      elem = `<ellipse fill=\"${mapDrawing.element.fill}\" fill-opacity=\"${mapDrawing.element.fill_opacity}\" cx=\"${
-        mapDrawing.element.cx
-      }\" cy=\"${mapDrawing.element.cy}\" rx=\"${mapDrawing.element.rx}\" ry=\"${mapDrawing.element.ry}\" stroke=\"${
-        mapDrawing.element.stroke
-      }\" stroke-width=\"${mapDrawing.element.stroke_width}\" stroke-dasharray=\"${
-        mapDrawing.element.stroke_dasharray ?? 'none'
-      }\" />`;
+      elem = `${mapDrawing.element.stroke_dasharray == '' ? `<ellipse fill=\"${mapDrawing.element.fill}\" fill-opacity=\"${mapDrawing.element.fill_opacity}\" cx=\"${mapDrawing.element.cx}\" cy=\"${mapDrawing.element.cy}\" rx=\"${mapDrawing.element.rx}\" ry=\"${mapDrawing.element.ry}\"/>` :`<ellipse fill=\"${mapDrawing.element.fill}\" fill-opacity=\"${mapDrawing.element.fill_opacity}\" cx=\"${mapDrawing.element.cx}\" cy=\"${mapDrawing.element.cy}\" rx=\"${mapDrawing.element.rx}\" ry=\"${mapDrawing.element.ry}\" stroke=\"${mapDrawing.element.stroke}\" stroke-width=\"${mapDrawing.element.stroke_width}\" stroke-dasharray=\"${mapDrawing.element.stroke_dasharray}\" />`}`;
     } else if (mapDrawing.element instanceof LineElement) {
-      elem = `<line stroke=\"${mapDrawing.element.stroke}\" stroke-width=\"${mapDrawing.element.stroke_width}\" x1=\"${
-        mapDrawing.element.x1
-      }\" x2=\"${mapDrawing.element.x2}\" y1=\"${mapDrawing.element.y1}\" y2=\"${
-        mapDrawing.element.y2
-      }\" stroke-dasharray=\"${mapDrawing.element.stroke_dasharray ?? 'none'}\" />`;
+      elem = `<line stroke=\"${mapDrawing.element.stroke}\" stroke-width=\"${mapDrawing.element.stroke_width}\" x1=\"${mapDrawing.element.x1}\" x2=\"${mapDrawing.element.x2}\" y1=\"${mapDrawing.element.y1}\" y2=\"${mapDrawing.element.y2}\" stroke-dasharray=\"${mapDrawing.element.stroke_dasharray ?? 'none'}\" />`;
     } else if (mapDrawing.element instanceof TextElement) {
       elem = `<text fill=\"${mapDrawing.element.fill}\" fill-opacity=\"1.0\" font-family=\"${mapDrawing.element.font_family}\" font-size=\"${mapDrawing.element.font_size}\" font-weight=\"${mapDrawing.element.font_weight}\">${mapDrawing.element.text}</text>`;
     } else return '';
diff --git a/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.ts b/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.ts
index 0c0da668..c434476f 100644
--- a/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.ts
+++ b/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.ts
@@ -59,27 +59,13 @@ export class StyleEditorDialogComponent implements OnInit {
     this.element = new ElementData();
     if (this.drawing.element instanceof RectElement || this.drawing.element instanceof EllipseElement) {
       this.element.fill = this.drawing.element.fill;
-      this.element.stroke = this.drawing.element.stroke;
-      let dasharray_value =
-        this.drawing.element.stroke_dasharray ??
-        this.drawing.element.stroke_width ??
-        (this.drawing.element.stroke_width == undefined || this.drawing.element.stroke_width == 0 ? '' : 'none');
-      this.borderTypes.map((_) => {
-        if (_.qt == dasharray_value || _.value == dasharray_value) {
-          dasharray_find_value = _.value;
-        }
-      });
-      this.element.stroke_dasharray = dasharray_find_value;
+      this.element.stroke = this.drawing.element.stroke;  
+      console.log(this.drawing.element.stroke_dasharray, this.drawing.element.stroke_width)
+      this.element.stroke_dasharray = (this.drawing.element.stroke_dasharray == undefined && this.drawing.element.stroke_width == undefined ) ? '': this.drawing.element.stroke_dasharray ?? 'none' ;
       this.element.stroke_width = this.drawing.element.stroke_width;
     } else if (this.drawing.element instanceof LineElement) {
       this.element.stroke = this.drawing.element.stroke;
-      let dasharray_value = this.drawing.element.stroke_dasharray;
-      this.borderTypes.map((_) => {
-        if (_.qt == dasharray_value || _.value == dasharray_value) {
-          dasharray_find_value = _.value;
-        }
-      });
-      this.element.stroke_dasharray = dasharray_find_value ?? 'none';
+      this.element.stroke_dasharray = (this.drawing.element.stroke_dasharray == undefined && this.drawing.element.stroke_width == undefined ) ? '': this.drawing.element.stroke_dasharray ?? 'none' ;
       this.element.stroke_width = this.drawing.element.stroke_width;
     }
 
@@ -104,13 +90,19 @@ export class StyleEditorDialogComponent implements OnInit {
 
       if (this.drawing.element instanceof RectElement || this.drawing.element instanceof EllipseElement) {
         this.drawing.element.fill = this.element.fill;
-        this.drawing.element.stroke = this.element.stroke;
+        this.drawing.element.stroke = this.element.stroke ?? "#000000";
         this.drawing.element.stroke_dasharray = this.element.stroke_dasharray;
         this.drawing.element.stroke_width = this.element.stroke_width;
       } else if (this.drawing.element instanceof LineElement) {
+        if (this.element.stroke_dasharray != '') {
+          this.drawing.element.stroke = this.element.stroke ?? "#000000";
+          this.drawing.element.stroke_dasharray =  this.element.stroke_dasharray === '' ? 'none' : this.element.stroke_dasharray;
+          this.drawing.element.stroke_width = this.element.stroke_width === 0 ? 2 : this.element.stroke_width;  
+        } else {
+          this.toasterService.warning(`No border style line element not supported`);
+        }
         this.drawing.element.stroke = this.element.stroke;
-        this.drawing.element.stroke_dasharray =
-          this.element.stroke_dasharray === '' ? 'none' : this.element.stroke_dasharray;
+        this.drawing.element.stroke_dasharray = this.element.stroke_dasharray;
         this.drawing.element.stroke_width = this.element.stroke_width === 0 ? 2 : this.element.stroke_width;
       }
       let mapDrawing = this.drawingToMapDrawingConverter.convert(this.drawing);

From 20bd0733f27ccbcc35d3fdf8420b25ce095034a2 Mon Sep 17 00:00:00 2001
From: grossmj <grossmj@gns3.net>
Date: Mon, 29 Aug 2022 19:23:48 +0200
Subject: [PATCH 12/12] Change 'Dash Dot' and 'Dash Dot Dot' border styles

---
 src/app/cartography/helpers/qt-dasharray-fixer.ts         | 4 ++--
 .../style-editor/style-editor.component.ts                | 8 ++++----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/app/cartography/helpers/qt-dasharray-fixer.ts b/src/app/cartography/helpers/qt-dasharray-fixer.ts
index 127887ef..95bb8226 100644
--- a/src/app/cartography/helpers/qt-dasharray-fixer.ts
+++ b/src/app/cartography/helpers/qt-dasharray-fixer.ts
@@ -9,8 +9,8 @@ export class QtDasharrayFixer {
   static MAPPING = {
     '25, 25': '10, 2', // Dash
     '5, 25': '4, 2', // Dot
-    '5, 25, 25': '5, 5, 1, 5', // Dash Dot
-    '25, 25, 5, 25, 5': '5, 2, 5, 2, 5', // Dash Dot Dot
+    '5, 25, 25': '12, 3, 5, 3', // Dash Dot
+    '25, 25, 5, 25, 5': '12, 3, 5, 3, 5, 3', // Dash Dot Dot
   };
 
   public fix(dasharray: string): string {
diff --git a/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.ts b/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.ts
index c434476f..acc22895 100644
--- a/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.ts
+++ b/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.ts
@@ -31,8 +31,8 @@ export class StyleEditorDialogComponent implements OnInit {
     { qt: 'none', value: 'none', name: 'Solid' },
     { qt: '10, 2', value: '25, 25', name: 'Dash' },
     { qt: '4, 2', value: '5, 25', name: 'Dot' },
-    { qt: '5, 5, 1, 5', value: '5, 25, 25', name: 'Dash Dot' },
-    { qt: '5, 2, 5, 2, 5', value: '25, 25, 5, 25, 5', name: 'Dash Dot Dot' },
+    { qt: '12, 3, 5, 3', value: '5, 25, 25', name: 'Dash Dot' },
+    { qt: '12, 3, 5, 3, 5, 3', value: '25, 25, 5, 25, 5', name: 'Dash Dot Dot' },
     { qt: '', value: '', name: 'No border' },
   ];
 
@@ -59,7 +59,7 @@ export class StyleEditorDialogComponent implements OnInit {
     this.element = new ElementData();
     if (this.drawing.element instanceof RectElement || this.drawing.element instanceof EllipseElement) {
       this.element.fill = this.drawing.element.fill;
-      this.element.stroke = this.drawing.element.stroke;  
+      this.element.stroke = this.drawing.element.stroke;
       console.log(this.drawing.element.stroke_dasharray, this.drawing.element.stroke_width)
       this.element.stroke_dasharray = (this.drawing.element.stroke_dasharray == undefined && this.drawing.element.stroke_width == undefined ) ? '': this.drawing.element.stroke_dasharray ?? 'none' ;
       this.element.stroke_width = this.drawing.element.stroke_width;
@@ -97,7 +97,7 @@ export class StyleEditorDialogComponent implements OnInit {
         if (this.element.stroke_dasharray != '') {
           this.drawing.element.stroke = this.element.stroke ?? "#000000";
           this.drawing.element.stroke_dasharray =  this.element.stroke_dasharray === '' ? 'none' : this.element.stroke_dasharray;
-          this.drawing.element.stroke_width = this.element.stroke_width === 0 ? 2 : this.element.stroke_width;  
+          this.drawing.element.stroke_width = this.element.stroke_width === 0 ? 2 : this.element.stroke_width;
         } else {
           this.toasterService.warning(`No border style line element not supported`);
         }