add dashed strokes feature

README.md

@@ -85,6 +85,7 @@ export default App;
 | - | - | - |
 | `strokeColor` | `string` | A color string `'#ff0000'`
 | `strokeWidth` | `number` | A size in `px`
+| `strokeDasharray` | `string` | Adds dashes to the stroke. It has to be a string representing an array of sizes. See some [SVG strokes documentation](https://www.w3schools.com/graphics/svg_stroking.asp).
 | `arrowLength` | `number` | A size in `px`
 | `arrowThickness` | `number` | A size in `px`
 | `children` | `React.Node` |
@@ -115,6 +116,7 @@ The `Style` type has the following shape:
 {
   strokeColor: string,
   strokeWidth: number,
+  strokeDasharray: number,
   arrowLength: number,
   arrowThickness: number
 }

example/FirstExample.js

@@ -22,6 +22,7 @@ const FirstExample = () => {
                 targetId: 'element2',
                 targetAnchor: 'top',
                 sourceAnchor: 'bottom',
+                style: { strokeDasharray: '5,5' },
               },
             ]}
           >

flow-typed/archer-types.js

@@ -25,4 +25,5 @@ declare type ArrowStyleType = {
   arrowThickness: number,
   strokeColor: string,
   strokeWidth: number,
-};
+  strokeDasharray?: string,
+};

src/ArcherContainer.js

@@ -11,6 +11,7 @@ type Props = {
   arrowThickness: number,
   strokeColor: string,
   strokeWidth: number,
+  strokeDasharray?: string,
   children: React$Node,
   style?: Object,
   svgContainerStyle?: Object,
@@ -222,6 +223,8 @@ export class ArcherContainer extends React.Component<Props, State> {
 
       const strokeWidth = (style && style.strokeWidth) || this.props.strokeWidth;
 
+      const strokeDasharray = (style && style.strokeDasharray) || this.props.strokeDasharray;
+
       const arrowThickness = (style && style.arrowThickness) || this.props.arrowThickness;
 
       const startingAnchor = source.anchor;
@@ -248,6 +251,7 @@ export class ArcherContainer extends React.Component<Props, State> {
           strokeColor={strokeColor}
           arrowLength={arrowLength}
           strokeWidth={strokeWidth}
+          strokeDasharray={strokeDasharray}
           arrowLabel={label}
           arrowThickness={arrowThickness}
           arrowMarkerId={this.getMarkerId(source, target)}

src/ArcherContainer.test.js

@@ -13,6 +13,7 @@ describe('ArcherContainer', () => {
     arrowLength: 10,
     arrowThickness: 30,
     strokeColor: 'rgb(123, 234, 123)',
+    strokeDasharray: '5,5',
   };
 
   type WrapperState = {
@@ -102,6 +103,7 @@ describe('ArcherContainer', () => {
       Object {
         "fill": "none",
         "stroke": "rgb(123, 234, 123)",
+        "strokeDasharray": "5,5",
         "strokeWidth": 2,
       }
     }

src/SvgArrow.js

@@ -11,6 +11,7 @@ type Props = {
   strokeColor: string,
   arrowLength: number,
   strokeWidth: number,
+  strokeDasharray?: string,
   arrowLabel?: ?React$Node,
   arrowMarkerId: string,
 };
@@ -121,6 +122,7 @@ const SvgArrow = ({
   strokeColor,
   arrowLength,
   strokeWidth,
+  strokeDasharray,
   arrowLabel,
   arrowMarkerId,
 }: Props) => {
@@ -152,7 +154,7 @@ const SvgArrow = ({
     <g>
       <path
         d={pathString}
-        style={{ fill: 'none', stroke: strokeColor, strokeWidth }}
+        style={{ fill: 'none', stroke: strokeColor, strokeWidth, strokeDasharray }}
         markerEnd={`url(${location.href}#${arrowMarkerId})`}
       />
       {arrowLabel && (

types/react-archer.d.ts

@@ -5,21 +5,30 @@ export interface ArcherContainerProps {
    * A size in px
    */
   arrowLength?: number;
+
   /**
    * A size in px
    */
   arrowThickness?: number;
+
   /**
    * A color string
    *
    * @example '#ff0000'
    */
   strokeColor?: string;
+
   /**
    * A size in px
    */
   strokeWidth?: number;
 
+  /**
+   * A string representing an array of sizes
+   * See https://www.w3schools.com/graphics/svg_stroking.asp
+   */
+  strokeDasharray?: string;
+
   style?: React.CSSProperties;
 
   svgContainerStyle?: React.CSSProperties;
@@ -32,6 +41,7 @@ export const ArcherContainer: React.ComponentType<ArcherContainerProps>;
 export interface ArrowStyle {
   strokeColor?: string;
   strokeWidth?: number;
+  strokeDasharray?: string;
   arrowLength?: number;
   arrowThickness?: number;
 }