Different styles of border, Ref: #137

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

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

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

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

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);
   });

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

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

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;

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

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

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)

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

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)

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

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