From cefbc3c9be7ffb6252f43d229dcd30b966bfb5d4 Mon Sep 17 00:00:00 2001 From: grossmj Date: Tue, 1 Aug 2023 15:54:47 +1000 Subject: [PATCH 1/5] 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 ed00003c..c334f32a 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 a5b98d24..fd88b247 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 661e5ea4..a410e852 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 de6a31d2..e7b90352 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 Date: Tue, 1 Aug 2023 19:44:04 +1000 Subject: [PATCH 2/5] 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 @@