From cdd377b356ae9782f8da60283b6b8b157a821a7f Mon Sep 17 00:00:00 2001 From: ziajka Date: Mon, 28 May 2018 14:23:09 +0200 Subject: [PATCH] Different styles of border, Ref: #137 --- .../svg-to-drawing-converter/ellipse-converter.spec.ts | 2 ++ .../helpers/svg-to-drawing-converter/ellipse-converter.ts | 5 +++++ .../helpers/svg-to-drawing-converter/line-converter.spec.ts | 2 ++ .../helpers/svg-to-drawing-converter/line-converter.ts | 5 +++++ .../helpers/svg-to-drawing-converter/rect-converter.spec.ts | 3 ++- .../helpers/svg-to-drawing-converter/rect-converter.ts | 5 +++++ .../cartography/shared/models/drawings/ellipse-element.ts | 1 + src/app/cartography/shared/models/drawings/line-element.ts | 1 + src/app/cartography/shared/models/drawings/rect-element.ts | 1 + .../shared/widgets/drawings/ellipse-drawing.spec.ts | 2 ++ .../cartography/shared/widgets/drawings/ellipse-drawing.ts | 1 + .../cartography/shared/widgets/drawings/line-drawing.spec.ts | 2 ++ src/app/cartography/shared/widgets/drawings/line-drawing.ts | 1 + .../cartography/shared/widgets/drawings/rect-drawing.spec.ts | 2 ++ src/app/cartography/shared/widgets/drawings/rect-drawing.ts | 1 + 15 files changed, 33 insertions(+), 1 deletion(-) diff --git a/src/app/cartography/shared/helpers/svg-to-drawing-converter/ellipse-converter.spec.ts b/src/app/cartography/shared/helpers/svg-to-drawing-converter/ellipse-converter.spec.ts index acef0085..5af1f29d 100644 --- a/src/app/cartography/shared/helpers/svg-to-drawing-converter/ellipse-converter.spec.ts +++ b/src/app/cartography/shared/helpers/svg-to-drawing-converter/ellipse-converter.spec.ts @@ -14,6 +14,7 @@ describe('EllipseConverter', () => { node.setAttribute("fill-opacity", "1.0"); node.setAttribute("stroke", "#000000"); node.setAttribute("stroke-width", "2"); + node.setAttribute("stroke-dasharray", "5,25,25"); node.setAttribute("cx", "63"); node.setAttribute("cy", "59"); node.setAttribute("rx", "63"); @@ -24,6 +25,7 @@ describe('EllipseConverter', () => { expect(drawing.fill_opacity).toEqual(1.0); expect(drawing.stroke).toEqual("#000000"); expect(drawing.stroke_width).toEqual(2.0); + expect(drawing.stroke_dasharray).toEqual("5,25,25"); expect(drawing.cx).toEqual(63); expect(drawing.cy).toEqual(59); expect(drawing.rx).toEqual(63); diff --git a/src/app/cartography/shared/helpers/svg-to-drawing-converter/ellipse-converter.ts b/src/app/cartography/shared/helpers/svg-to-drawing-converter/ellipse-converter.ts index 37829237..a24d3929 100644 --- a/src/app/cartography/shared/helpers/svg-to-drawing-converter/ellipse-converter.ts +++ b/src/app/cartography/shared/helpers/svg-to-drawing-converter/ellipse-converter.ts @@ -26,6 +26,11 @@ export class EllipseConverter implements SvgConverter { drawing.stroke_width = parseInt(stroke_width.value, 10); } + const stroke_dasharray = node.attributes.getNamedItem("stroke-dasharray"); + if (stroke_dasharray) { + drawing.stroke_dasharray = stroke_dasharray.value; + } + const cx = node.attributes.getNamedItem('cx'); if (cx) { drawing.cx = parseInt(cx.value, 10); diff --git a/src/app/cartography/shared/helpers/svg-to-drawing-converter/line-converter.spec.ts b/src/app/cartography/shared/helpers/svg-to-drawing-converter/line-converter.spec.ts index 377826a2..47bdb643 100644 --- a/src/app/cartography/shared/helpers/svg-to-drawing-converter/line-converter.spec.ts +++ b/src/app/cartography/shared/helpers/svg-to-drawing-converter/line-converter.spec.ts @@ -12,6 +12,7 @@ describe('LineConverter', () => { const node = document.createElement("line"); node.setAttribute("stroke", "#000000"); node.setAttribute("stroke-width", "2"); + node.setAttribute("stroke-dasharray", "5,25,25"); node.setAttribute("x1", "10.10"); node.setAttribute("x2", "20"); node.setAttribute("y1", "30"); @@ -20,6 +21,7 @@ describe('LineConverter', () => { const drawing = lineConverter.convert(node); expect(drawing.stroke).toEqual("#000000"); expect(drawing.stroke_width).toEqual(2.0); + expect(drawing.stroke_dasharray).toEqual("5,25,25"); expect(drawing.x1).toEqual(10); expect(drawing.x2).toEqual(20); expect(drawing.y1).toEqual(30); diff --git a/src/app/cartography/shared/helpers/svg-to-drawing-converter/line-converter.ts b/src/app/cartography/shared/helpers/svg-to-drawing-converter/line-converter.ts index a8227f0d..ecd9b19d 100644 --- a/src/app/cartography/shared/helpers/svg-to-drawing-converter/line-converter.ts +++ b/src/app/cartography/shared/helpers/svg-to-drawing-converter/line-converter.ts @@ -16,6 +16,11 @@ export class LineConverter implements SvgConverter { drawing.stroke_width = parseInt(stroke_width.value, 10); } + const stroke_dasharray = node.attributes.getNamedItem("stroke-dasharray"); + if (stroke_dasharray) { + drawing.stroke_dasharray = stroke_dasharray.value; + } + const x1 = node.attributes.getNamedItem('x1'); if (x1) { drawing.x1 = parseInt(x1.value, 10); diff --git a/src/app/cartography/shared/helpers/svg-to-drawing-converter/rect-converter.spec.ts b/src/app/cartography/shared/helpers/svg-to-drawing-converter/rect-converter.spec.ts index ab1e47f5..83408307 100644 --- a/src/app/cartography/shared/helpers/svg-to-drawing-converter/rect-converter.spec.ts +++ b/src/app/cartography/shared/helpers/svg-to-drawing-converter/rect-converter.spec.ts @@ -14,6 +14,7 @@ describe('RectConverter', () => { node.setAttribute("fill-opacity", "0.7"); node.setAttribute("stroke", "#000000"); node.setAttribute("stroke-width", "2"); + node.setAttribute("stroke-dasharray", "5,25,25"); node.setAttribute("width", "100px"); node.setAttribute("height", "200px"); @@ -22,7 +23,7 @@ describe('RectConverter', () => { expect(drawing.fill).toEqual("#ffffff"); expect(drawing.fill_opacity).toEqual(0.7); expect(drawing.stroke).toEqual("#000000"); - expect(drawing.stroke_width).toEqual(2.0); + expect(drawing.stroke_dasharray).toEqual("5,25,25"); expect(drawing.width).toEqual(100); expect(drawing.height).toEqual(200); }); diff --git a/src/app/cartography/shared/helpers/svg-to-drawing-converter/rect-converter.ts b/src/app/cartography/shared/helpers/svg-to-drawing-converter/rect-converter.ts index 9c63fc46..504e2178 100644 --- a/src/app/cartography/shared/helpers/svg-to-drawing-converter/rect-converter.ts +++ b/src/app/cartography/shared/helpers/svg-to-drawing-converter/rect-converter.ts @@ -26,6 +26,11 @@ export class RectConverter implements SvgConverter { drawing.stroke_width = parseInt(stroke_width.value, 10); } + const stroke_dasharray = node.attributes.getNamedItem("stroke-dasharray"); + if (stroke_dasharray) { + drawing.stroke_dasharray = stroke_dasharray.value; + } + const width = node.attributes.getNamedItem('width'); if (width) { drawing.width = parseInt(width.value, 10); diff --git a/src/app/cartography/shared/models/drawings/ellipse-element.ts b/src/app/cartography/shared/models/drawings/ellipse-element.ts index 7b3b6235..f7ce4df2 100644 --- a/src/app/cartography/shared/models/drawings/ellipse-element.ts +++ b/src/app/cartography/shared/models/drawings/ellipse-element.ts @@ -12,4 +12,5 @@ export class EllipseElement implements DrawingElement { ry: number; stroke: string; stroke_width: number; + stroke_dasharray: string; } diff --git a/src/app/cartography/shared/models/drawings/line-element.ts b/src/app/cartography/shared/models/drawings/line-element.ts index 18aba742..936ab56c 100644 --- a/src/app/cartography/shared/models/drawings/line-element.ts +++ b/src/app/cartography/shared/models/drawings/line-element.ts @@ -6,6 +6,7 @@ export class LineElement implements DrawingElement { width: number; stroke: string; stroke_width: number; + stroke_dasharray: string; x1: number; x2: number; y1: number; diff --git a/src/app/cartography/shared/models/drawings/rect-element.ts b/src/app/cartography/shared/models/drawings/rect-element.ts index dce73480..4f086bf8 100644 --- a/src/app/cartography/shared/models/drawings/rect-element.ts +++ b/src/app/cartography/shared/models/drawings/rect-element.ts @@ -8,4 +8,5 @@ export class RectElement implements DrawingElement { fill_opacity: number; stroke: string; stroke_width: number; + stroke_dasharray: string; } diff --git a/src/app/cartography/shared/widgets/drawings/ellipse-drawing.spec.ts b/src/app/cartography/shared/widgets/drawings/ellipse-drawing.spec.ts index 16148437..800199f7 100644 --- a/src/app/cartography/shared/widgets/drawings/ellipse-drawing.spec.ts +++ b/src/app/cartography/shared/widgets/drawings/ellipse-drawing.spec.ts @@ -26,6 +26,7 @@ describe('EllipseDrawingWidget', () => { ellipse.fill_opacity = 2.0; ellipse.stroke = "#000000"; ellipse.stroke_width = 2.0; + ellipse.stroke_dasharray = "5,25,25"; ellipse.cx = 10; ellipse.cy = 20; ellipse.rx = 30; @@ -45,6 +46,7 @@ describe('EllipseDrawingWidget', () => { expect(ellipse_element.getAttribute('fill-opacity')).toEqual('2'); expect(ellipse_element.getAttribute('stroke')).toEqual('#000000'); expect(ellipse_element.getAttribute('stroke-width')).toEqual('2'); + expect(ellipse_element.getAttribute('stroke-dasharray')).toEqual('5,25,25'); expect(ellipse_element.getAttribute('cx')).toEqual('10'); expect(ellipse_element.getAttribute('cy')).toEqual('20'); expect(ellipse_element.getAttribute('rx')).toEqual('30'); diff --git a/src/app/cartography/shared/widgets/drawings/ellipse-drawing.ts b/src/app/cartography/shared/widgets/drawings/ellipse-drawing.ts index bfabb479..05882ce8 100644 --- a/src/app/cartography/shared/widgets/drawings/ellipse-drawing.ts +++ b/src/app/cartography/shared/widgets/drawings/ellipse-drawing.ts @@ -24,6 +24,7 @@ export class EllipseDrawingWidget implements DrawingWidget { .attr('fill-opacity', (ellipse) => ellipse.fill_opacity) .attr('stroke', (ellipse) => ellipse.stroke) .attr('stroke-width', (ellipse) => ellipse.stroke_width) + .attr('stroke-dasharray', (ellipse) => ellipse.stroke_dasharray) .attr('cx', (ellipse) => ellipse.cx) .attr('cy', (ellipse) => ellipse.cy) .attr('rx', (ellipse) => ellipse.rx) diff --git a/src/app/cartography/shared/widgets/drawings/line-drawing.spec.ts b/src/app/cartography/shared/widgets/drawings/line-drawing.spec.ts index 9aa212fd..727129e7 100644 --- a/src/app/cartography/shared/widgets/drawings/line-drawing.spec.ts +++ b/src/app/cartography/shared/widgets/drawings/line-drawing.spec.ts @@ -24,6 +24,7 @@ describe('LineDrawingWidget', () => { const line = new LineElement(); line.stroke = "#000000"; line.stroke_width = 2.0; + line.stroke_dasharray = "5,25,25"; line.x1 = 10; line.x2 = 20; line.y1 = 30; @@ -41,6 +42,7 @@ describe('LineDrawingWidget', () => { const line_element = drew.nodes()[0]; expect(line_element.getAttribute('stroke')).toEqual('#000000'); expect(line_element.getAttribute('stroke-width')).toEqual('2'); + expect(line_element.getAttribute('stroke-dasharray')).toEqual('5,25,25'); expect(line_element.getAttribute('x1')).toEqual('10'); expect(line_element.getAttribute('x2')).toEqual('20'); expect(line_element.getAttribute('y1')).toEqual('30'); diff --git a/src/app/cartography/shared/widgets/drawings/line-drawing.ts b/src/app/cartography/shared/widgets/drawings/line-drawing.ts index 0fef6087..579227a0 100644 --- a/src/app/cartography/shared/widgets/drawings/line-drawing.ts +++ b/src/app/cartography/shared/widgets/drawings/line-drawing.ts @@ -22,6 +22,7 @@ export class LineDrawingWidget implements DrawingWidget { merge .attr('stroke', (line) => line.stroke) .attr('stroke-width', (line) => line.stroke_width) + .attr('stroke-dasharray', (line) => line.stroke_dasharray) .attr('x1', (line) => line.x1) .attr('x2', (line) => line.x2) .attr('y1', (line) => line.y1) diff --git a/src/app/cartography/shared/widgets/drawings/rect-drawing.spec.ts b/src/app/cartography/shared/widgets/drawings/rect-drawing.spec.ts index 012c383b..a77a4adb 100644 --- a/src/app/cartography/shared/widgets/drawings/rect-drawing.spec.ts +++ b/src/app/cartography/shared/widgets/drawings/rect-drawing.spec.ts @@ -26,6 +26,7 @@ describe('RectDrawingWidget', () => { rect.fill_opacity = 1.0; rect.stroke = "#000000"; rect.stroke_width = 2.0; + rect.stroke_dasharray = "5,25,25"; rect.width = 100; rect.height = 200; drawing.element = rect; @@ -43,6 +44,7 @@ describe('RectDrawingWidget', () => { expect(rect_element.getAttribute('fill-opacity')).toEqual('1'); expect(rect_element.getAttribute('stroke')).toEqual('#000000'); expect(rect_element.getAttribute('stroke-width')).toEqual('2'); + expect(rect_element.getAttribute('stroke-dasharray')).toEqual('5,25,25'); expect(rect_element.getAttribute('width')).toEqual('100'); expect(rect_element.getAttribute('height')).toEqual('200'); }); diff --git a/src/app/cartography/shared/widgets/drawings/rect-drawing.ts b/src/app/cartography/shared/widgets/drawings/rect-drawing.ts index 83f86746..d02f1ea8 100644 --- a/src/app/cartography/shared/widgets/drawings/rect-drawing.ts +++ b/src/app/cartography/shared/widgets/drawings/rect-drawing.ts @@ -24,6 +24,7 @@ export class RectDrawingWidget implements DrawingWidget { .attr('fill-opacity', (rect) => rect.fill_opacity) .attr('stroke', (rect) => rect.stroke) .attr('stroke-width', (rect) => rect.stroke_width) + .attr('stroke-dasharray', (rect) => rect.stroke_dasharray) .attr('width', (rect) => rect.width) .attr('height', (rect) => rect.height);