From 8e197a8831389c856fb46ab8f18929a82401113f Mon Sep 17 00:00:00 2001
From: Rajnikant Lodhi <rajnikant.lodhi@solarwinds.com>
Date: Wed, 10 Aug 2022 17:09:12 +0530
Subject: [PATCH 1/2] Resolve Cannot set border style for any shapes in Web-UI
 GNS3 3.0.0 Alpha 1 issue

---
 .../converters/map/map-drawing-to-svg-converter.ts |  6 +++---
 .../style-editor/style-editor.component.html       | 13 ++++---------
 .../style-editor/style-editor.component.ts         | 14 +++++++++-----
 3 files changed, 16 insertions(+), 17 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 e5466483..9182870b 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,11 +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}\" />`;
+      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}\" />`;
     } 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}\" />`;
+      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}\" />`;
+      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 = `<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.html b/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.html
index be6c49aa..c62079a6 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
@@ -25,15 +25,10 @@
     <mat-form-field class="form-field">
       <input matInput formControlName="borderWidth" placeholder="Border width" type="number" />
     </mat-form-field>
-
-    <mat-form-field class="form-field" *ngIf="element.stroke_dasharray">
-      <input
-        matInput
-        [ngModelOptions]="{ standalone: true }"
-        placeholder="Border style"
-        type="text"
-        [(ngModel)]="element.stroke_dasharray"
-      />
+    <mat-form-field class="form-field">
+      <mat-select placeholder="Type" [ngModelOptions]="{ standalone: true }" [(ngModel)]="element.stroke_dasharray">
+        <mat-option *ngFor="let type of borderTypes" [value]="type.value"> {{ type.name }} </mat-option>
+      </mat-select>
     </mat-form-field>
 
     <mat-form-field class="form-field">
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 583fe236..84830a2c 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
@@ -26,6 +26,12 @@ export class StyleEditorDialogComponent implements OnInit {
   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"}
+  ];
 
   constructor(
     public dialogRef: MatDialogRef<StyleEditorDialogComponent>,
@@ -46,15 +52,14 @@ export class StyleEditorDialogComponent implements OnInit {
 
   ngOnInit() {
     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;
+      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;
-      this.element.stroke_dasharray = this.drawing.element.stroke_dasharray;
+      this.element.stroke_dasharray = this.drawing.element.stroke_dasharray ?? 'none';
       this.element.stroke_width = this.drawing.element.stroke_width;
     }
 
@@ -82,10 +87,9 @@ export class StyleEditorDialogComponent implements OnInit {
         this.drawing.element.stroke_dasharray = this.element.stroke_dasharray;
         this.drawing.element.stroke_width = 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 5da993e2f56de75caad1537369ed90e5b577cbdf Mon Sep 17 00:00:00 2001
From: Rajnikant Lodhi <rajnikant.lodhi@solarwinds.com>
Date: Fri, 12 Aug 2022 14:51:01 +0530
Subject: [PATCH 2/2] Add Border style placeholder  in border style selections

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

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 c62079a6..7ce5bd20 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
@@ -26,7 +26,7 @@
       <input matInput formControlName="borderWidth" placeholder="Border width" type="number" />
     </mat-form-field>
     <mat-form-field class="form-field">
-      <mat-select placeholder="Type" [ngModelOptions]="{ standalone: true }" [(ngModel)]="element.stroke_dasharray">
+      <mat-select placeholder="Border style" [ngModelOptions]="{ standalone: true }" [(ngModel)]="element.stroke_dasharray">
         <mat-option *ngFor="let type of borderTypes" [value]="type.value"> {{ type.name }} </mat-option>
       </mat-select>
     </mat-form-field>