diff --git a/README.md b/README.md index 33bede4..d239482 100644 --- a/README.md +++ b/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 } diff --git a/cypress/snapshots/All Specs/React Archer -- First example page -- should draw arrows.snap.png b/cypress/snapshots/All Specs/React Archer -- First example page -- should draw arrows.snap.png index 911d429..a0893e2 100644 Binary files a/cypress/snapshots/All Specs/React Archer -- First example page -- should draw arrows.snap.png and b/cypress/snapshots/All Specs/React Archer -- First example page -- should draw arrows.snap.png differ diff --git a/example/FirstExample.js b/example/FirstExample.js index 1a4e44f..afe4aea 100644 --- a/example/FirstExample.js +++ b/example/FirstExample.js @@ -22,6 +22,7 @@ const FirstExample = () => { targetId: 'element2', targetAnchor: 'top', sourceAnchor: 'bottom', + style: { strokeDasharray: '5,5' }, }, ]} > diff --git a/flow-typed/archer-types.js b/flow-typed/archer-types.js index 175409d..02366a8 100644 --- a/flow-typed/archer-types.js +++ b/flow-typed/archer-types.js @@ -25,4 +25,5 @@ declare type ArrowStyleType = { arrowThickness: number, strokeColor: string, strokeWidth: number, -}; \ No newline at end of file + strokeDasharray?: string, +}; diff --git a/src/ArcherContainer.js b/src/ArcherContainer.js index bed84ce..ca16392 100644 --- a/src/ArcherContainer.js +++ b/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 { 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 { strokeColor={strokeColor} arrowLength={arrowLength} strokeWidth={strokeWidth} + strokeDasharray={strokeDasharray} arrowLabel={label} arrowThickness={arrowThickness} arrowMarkerId={this.getMarkerId(source, target)} diff --git a/src/ArcherContainer.test.js b/src/ArcherContainer.test.js index 65abadc..cc6fb6b 100644 --- a/src/ArcherContainer.test.js +++ b/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, } } diff --git a/src/SvgArrow.js b/src/SvgArrow.js index d350e29..1508677 100644 --- a/src/SvgArrow.js +++ b/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 = ({ {arrowLabel && ( diff --git a/types/react-archer.d.ts b/types/react-archer.d.ts index f03d087..c81fbe9 100644 --- a/types/react-archer.d.ts +++ b/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; export interface ArrowStyle { strokeColor?: string; strokeWidth?: number; + strokeDasharray?: string; arrowLength?: number; arrowThickness?: number; }