Merge pull request #1382 from GNS3/bugfix/1377

Resolve Cannot set border style for any shapes in Web-UI GNS3 3.0.0 A…

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 '';

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">
-    <mat-form-field class="form-field" *ngIf="element.stroke_dasharray">
+      <mat-select placeholder="Border style" [ngModelOptions]="{ standalone: true }" [(ngModel)]="element.stroke_dasharray">
-      <input
+        <mat-option *ngFor="let type of borderTypes" [value]="type.value"> {{ type.name }} </mat-option>
-        matInput
+      </mat-select>
-        [ngModelOptions]="{ standalone: true }"
-        placeholder="Border style"
-        type="text"
-        [(ngModel)]="element.stroke_dasharray"
-      />
     </mat-form-field>
 
     <mat-form-field class="form-field">

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,7 +87,6 @@ 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;