From cefbc3c9be7ffb6252f43d229dcd30b966bfb5d4 Mon Sep 17 00:00:00 2001
From: grossmj <grossmj@gns3.net>
Date: Tue, 1 Aug 2023 15:54:47 +1000
Subject: [PATCH 1/3] Support for rounded rectangles

---
 .../drawing/drawings/rect/rect.component.html          |  2 ++
 .../helpers/svg-to-drawing-converter/rect-converter.ts | 10 ++++++++++
 src/app/cartography/models/drawings/rect-element.ts    |  2 ++
 src/app/cartography/widgets/drawings/rect-drawing.ts   |  4 +++-
 4 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/app/cartography/components/experimental-map/drawing/drawings/rect/rect.component.html b/src/app/cartography/components/experimental-map/drawing/drawings/rect/rect.component.html
index ed00003c8..c334f32ae 100644
--- a/src/app/cartography/components/experimental-map/drawing/drawings/rect/rect.component.html
+++ b/src/app/cartography/components/experimental-map/drawing/drawings/rect/rect.component.html
@@ -7,4 +7,6 @@
   [attr.stroke-dasharray]="stroke_dasharray"
   [attr.width]="rect.width"
   [attr.height]="rect.height"
+  [attr.rx]="rect.rx"
+  [attr.ry]="rect.ry"
 />
diff --git a/src/app/cartography/helpers/svg-to-drawing-converter/rect-converter.ts b/src/app/cartography/helpers/svg-to-drawing-converter/rect-converter.ts
index a5b98d248..fd88b2476 100644
--- a/src/app/cartography/helpers/svg-to-drawing-converter/rect-converter.ts
+++ b/src/app/cartography/helpers/svg-to-drawing-converter/rect-converter.ts
@@ -40,6 +40,16 @@ export class RectConverter implements SvgConverter {
       drawing.height = parseInt(height.value, 10);
     }
 
+    const rx = element.attributes.getNamedItem('rx');
+    if (rx) {
+      drawing.rx = parseInt(rx.value, 0);
+    }
+
+    const ry = element.attributes.getNamedItem('ry');
+    if (ry) {
+      drawing.ry = parseInt(ry.value, 0);
+    }
+
     return drawing;
   }
 }
diff --git a/src/app/cartography/models/drawings/rect-element.ts b/src/app/cartography/models/drawings/rect-element.ts
index 661e5ea41..a410e852a 100644
--- a/src/app/cartography/models/drawings/rect-element.ts
+++ b/src/app/cartography/models/drawings/rect-element.ts
@@ -8,4 +8,6 @@ export class RectElement implements DrawingElement {
   stroke: string;
   stroke_width: number;
   stroke_dasharray: string;
+  rx: number;
+  ry: number;
 }
diff --git a/src/app/cartography/widgets/drawings/rect-drawing.ts b/src/app/cartography/widgets/drawings/rect-drawing.ts
index de6a31d2f..e7b90352e 100644
--- a/src/app/cartography/widgets/drawings/rect-drawing.ts
+++ b/src/app/cartography/widgets/drawings/rect-drawing.ts
@@ -33,7 +33,9 @@ export class RectDrawingWidget implements DrawingShapeWidget {
       .attr('stroke-width', (rect) => rect.stroke_width)
       .attr('stroke-dasharray', (rect) => this.qtDasharrayFixer.fix(rect.stroke_dasharray))
       .attr('width', (rect) => rect.width)
-      .attr('height', (rect) => rect.height);
+      .attr('height', (rect) => rect.height)
+      .attr('rx', (rect) => rect.rx)
+      .attr('ry', (rect) => rect.ry);
 
     drawing.exit().remove();
   }

From df6248d641876102ba673c5b76b8ee52608bf999 Mon Sep 17 00:00:00 2001
From: grossmj <grossmj@gns3.net>
Date: Tue, 1 Aug 2023 19:44:04 +1000
Subject: [PATCH 2/3] Add corner radius setting to style editor

---
 .../map/map-drawing-to-svg-converter.ts       |  2 +-
 .../rectangle-element-factory.ts              |  2 ++
 .../rect-converter.spec.ts                    |  6 +++++
 .../widgets/drawings/rect-drawing.spec.ts     |  4 ++++
 .../style-editor/style-editor.component.html  | 22 +++++++++++++++++--
 .../style-editor/style-editor.component.ts    | 11 ++++++++++
 src/app/services/drawing.service.spec.ts      |  2 +-
 7 files changed, 45 insertions(+), 4 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 e54664835..1a06d4035 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,7 +14,7 @@ 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}\" rx=\"${mapDrawing.element.rx}\" ry=\"${mapDrawing.element.ry}\" />`;
     } 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}\" />`;
     } else if (mapDrawing.element instanceof LineElement) {
diff --git a/src/app/cartography/helpers/drawings-factory/rectangle-element-factory.ts b/src/app/cartography/helpers/drawings-factory/rectangle-element-factory.ts
index 5e13236b8..8b5f95769 100644
--- a/src/app/cartography/helpers/drawings-factory/rectangle-element-factory.ts
+++ b/src/app/cartography/helpers/drawings-factory/rectangle-element-factory.ts
@@ -13,6 +13,8 @@ export class RectangleElementFactory implements DrawingElementFactory {
     rectElement.stroke_width = 2;
     rectElement.width = 200;
     rectElement.height = 100;
+    rectElement.rx = 0;
+    rectElement.ry = 0;
     return rectElement;
   }
 }
diff --git a/src/app/cartography/helpers/svg-to-drawing-converter/rect-converter.spec.ts b/src/app/cartography/helpers/svg-to-drawing-converter/rect-converter.spec.ts
index c66ceb5b5..0af7e68f6 100644
--- a/src/app/cartography/helpers/svg-to-drawing-converter/rect-converter.spec.ts
+++ b/src/app/cartography/helpers/svg-to-drawing-converter/rect-converter.spec.ts
@@ -17,6 +17,8 @@ describe('RectConverter', () => {
 
     element.setAttribute('width', '100px');
     element.setAttribute('height', '200px');
+    element.setAttribute('rx', '0');
+    element.setAttribute('ry', '0');
 
     const drawing = rectConverter.convert(element);
     expect(drawing.fill).toEqual('#ffffff');
@@ -25,6 +27,8 @@ describe('RectConverter', () => {
     expect(drawing.stroke_dasharray).toEqual('5,25,25');
     expect(drawing.width).toEqual(100);
     expect(drawing.height).toEqual(200);
+    expect(drawing.rx).toEqual(0);
+    expect(drawing.ry).toEqual(0);
   });
 
   it('should parse with no attributes', () => {
@@ -37,5 +41,7 @@ describe('RectConverter', () => {
     expect(drawing.stroke_dasharray).toBeUndefined();
     expect(drawing.width).toBeUndefined();
     expect(drawing.height).toBeUndefined();
+    expect(drawing.rx).toBeUndefined();
+    expect(drawing.ry).toBeUndefined();
   });
 });
diff --git a/src/app/cartography/widgets/drawings/rect-drawing.spec.ts b/src/app/cartography/widgets/drawings/rect-drawing.spec.ts
index ecd5e63a8..5741e26c9 100644
--- a/src/app/cartography/widgets/drawings/rect-drawing.spec.ts
+++ b/src/app/cartography/widgets/drawings/rect-drawing.spec.ts
@@ -28,6 +28,8 @@ describe('RectDrawingWidget', () => {
     rect.stroke_dasharray = '5,25,25';
     rect.width = 100;
     rect.height = 200;
+    rect.rx = 0;
+    rect.ry = 0;
     drawing.element = rect;
 
     const drawings = svg.canvas.selectAll<SVGGElement, MapDrawing>('g.drawing').data([drawing]);
@@ -46,5 +48,7 @@ describe('RectDrawingWidget', () => {
     expect(rect_element.getAttribute('stroke-dasharray')).toEqual('5,25,25');
     expect(rect_element.getAttribute('width')).toEqual('100');
     expect(rect_element.getAttribute('height')).toEqual('200');
+    expect(rect_element.getAttribute('rx')).toEqual('0');
+    expect(rect_element.getAttribute('ry')).toEqual('0');
   });
 });
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 be6c49aa7..2c935d42e 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
@@ -2,7 +2,7 @@ <h1 mat-dialog-title>Style editor</h1>
 
 <div class="modal-form-container">
   <form [formGroup]="formGroup">
-    <mat-form-field class="form-field">
+    <mat-form-field class="form-field" *ngIf="element.fill !== undefined">
       <input
         matInput
         [ngModelOptions]="{ standalone: true }"
@@ -23,7 +23,13 @@ <h1 mat-dialog-title>Style editor</h1>
     </mat-form-field>
 
     <mat-form-field class="form-field">
-      <input matInput formControlName="borderWidth" placeholder="Border width" type="number" />
+      <input
+        matInput formControlName="borderWidth"
+        placeholder="Border width"
+        type="number"
+        min="0"
+        max="100"
+      />
     </mat-form-field>
 
     <mat-form-field class="form-field" *ngIf="element.stroke_dasharray">
@@ -36,6 +42,18 @@ <h1 mat-dialog-title>Style editor</h1>
       />
     </mat-form-field>
 
+    <mat-form-field class="form-field" *ngIf="element.rx !== undefined">
+      <input
+        matInput
+        [ngModelOptions]="{ standalone: true }"
+        placeholder="Corner radius"
+        type="number"
+        min="0"
+        max="100"
+        [(ngModel)]="element.rx"
+      />
+    </mat-form-field>
+
     <mat-form-field class="form-field">
       <input matInput formControlName="rotation" placeholder="Rotation" type="number" />
     </mat-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 e216ab40b..16f8096e7 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
@@ -58,6 +58,10 @@ export class StyleEditorDialogComponent implements OnInit {
       this.element.stroke_width = this.drawing.element.stroke_width;
     }
 
+    if (this.drawing.element instanceof RectElement) {
+        this.element.rx = this.drawing.element.rx;
+      }
+
     if (this.element.stroke_width === undefined) this.element.stroke_width = 0;
     this.formGroup.controls['borderWidth'].setValue(this.element.stroke_width);
     this.formGroup.controls['rotation'].setValue(this.drawing.rotation);
@@ -83,6 +87,11 @@ export class StyleEditorDialogComponent implements OnInit {
         this.drawing.element.stroke_width = this.element.stroke_width;
       }
 
+      if (this.drawing.element instanceof RectElement) {
+        this.drawing.element.rx = this.element.rx;
+        this.drawing.element.ry = this.element.rx;
+      }
+
       let mapDrawing = this.drawingToMapDrawingConverter.convert(this.drawing);
       mapDrawing.element = this.drawing.element;
 
@@ -103,4 +112,6 @@ export class ElementData {
   stroke: string;
   stroke_width: number;
   stroke_dasharray: string;
+  rx: number;
+  ry: number;
 }
diff --git a/src/app/services/drawing.service.spec.ts b/src/app/services/drawing.service.spec.ts
index 1ff105b37..495738d9a 100644
--- a/src/app/services/drawing.service.spec.ts
+++ b/src/app/services/drawing.service.spec.ts
@@ -149,7 +149,7 @@ describe('DrawingService', () => {
     drawing.z = 1;
     drawing.rotation = 0;
     drawing.svg =
-      '<svg height="100" width="200"><rect fill="#ffffff" fill-opacity="1.0" height="100" stroke="#000000" stroke-width="2" width="200" /></svg>';
+      '<svg height="100" width="200"><rect fill="#ffffff" fill-opacity="1.0" height="100" stroke="#000000" stroke-width="2" width="200" rx="0" ry="0" /></svg>';
 
     service.duplicate(server, drawing.project_id, drawing).subscribe();
 

From 89bff8ac30799ea4e1b3e06f257c9018533af448 Mon Sep 17 00:00:00 2001
From: grossmj <grossmj@gns3.net>
Date: Tue, 1 Aug 2023 19:48:08 +1000
Subject: [PATCH 3/3] Set ry for rectangle

---
 .../drawings-editors/style-editor/style-editor.component.ts    | 3 ++-
 1 file changed, 2 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 16f8096e7..94b10b7b5 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,6 +60,7 @@ export class StyleEditorDialogComponent implements OnInit {
 
     if (this.drawing.element instanceof RectElement) {
         this.element.rx = this.drawing.element.rx;
+        this.element.ry = this.drawing.element.ry;
       }
 
     if (this.element.stroke_width === undefined) this.element.stroke_width = 0;
@@ -89,7 +90,7 @@ export class StyleEditorDialogComponent implements OnInit {
 
       if (this.drawing.element instanceof RectElement) {
         this.drawing.element.rx = this.element.rx;
-        this.drawing.element.ry = this.element.rx;
+        this.drawing.element.ry = this.element.rx;  // set ry with rx because we don't have ry in the form
       }
 
       let mapDrawing = this.drawingToMapDrawingConverter.convert(this.drawing);