From df6248d641876102ba673c5b76b8ee52608bf999 Mon Sep 17 00:00:00 2001 From: grossmj Date: Tue, 1 Aug 2023 19:44:04 +1000 Subject: [PATCH] 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 e5466483..1a06d403 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 { let elem = ``; if (mapDrawing.element instanceof RectElement) { - elem = ``; + elem = ``; } else if (mapDrawing.element instanceof EllipseElement) { elem = ``; } 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 5e13236b..8b5f9576 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 c66ceb5b..0af7e68f 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 ecd5e63a..5741e26c 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('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 be6c49aa..2c935d42 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 @@
- + - + @@ -36,6 +42,18 @@ /> + + + + 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 e216ab40..16f8096e 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 1ff105b3..495738d9 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 = - ''; + ''; service.duplicate(server, drawing.project_id, drawing).subscribe();