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] 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);