Feature/custom link style - dotted

package.json

@@ -1,9 +1,9 @@
 {
-  "name": "@georginaso/react-flow-chart",
-  "version": "0.0.13",
+  "name": "@futureworkshops/react-flow-chart",
+  "version": "0.1.2",
   "description": "A flexible, stateless flow chart library for react.",
   "main": "src/index.js",
-  "repository": "git@github.com:georginaso/react-flow-chart.git",
+  "repository": "git@github.com:FutureWorkshops/react-flow-chart.git",
   "author": "Georgina Serra <georgina@futureworkshops.com>",
   "license": "MIT",
   "devDependencies": {

src/components/Link/Link.default.tsx

@@ -51,6 +51,8 @@ export const LinkDefault = ({
     (fromPort.properties && fromPort.properties.linkColor) || "cornflowerblue";
   const linkStrokeWidth: string =
     (fromPort.properties && fromPort.properties.linkStrokeWidth) || "3";
+  const linkStrokeDasharray: string =
+    (fromPort.properties && fromPort.properties.linkStrokeDasharray) || "none";
 
   return (
     <svg
@@ -69,6 +71,7 @@ export const LinkDefault = ({
         stroke={linkColor}
         strokeWidth={linkStrokeWidth}
         fill="none"
+        strokeDasharray={linkStrokeDasharray}
       />
       {/* Thick line to make selection easier */}
       <path

src/container/utils/mapValues.ts

@@ -1,7 +1,7 @@
 export default function mapValues<
   Obj extends object,
   Res extends { [key in keyof Obj]: any }
-> (o: Obj, func: (value: Obj[keyof Obj]) => Res[keyof Obj]) {
+> (o: Obj, func: (value: Obj[keyof Obj]) => any) {
   const res: Res = {} as any
   for (const key in o) {
     if (o.hasOwnProperty(key)) {

stories/LinkStrokeDasharray.tsx

@@ -0,0 +1,138 @@
+import * as React from "react";
+
+import { FlowChartWithState, IChart } from "../src";
+import { Page } from "./components";
+
+const chartSimpleWithDottedLink: IChart = {
+  offset: {
+    x: 0,
+    y: 0,
+  },
+  scale: 1,
+  nodes: {
+    node1: {
+      id: "node1",
+      type: "output-only",
+      position: {
+        x: 300,
+        y: 100,
+      },
+      ports: {
+        port1: {
+          id: "port1",
+          type: "output",
+          properties: {
+            value: "no",
+            linkStrokeDasharray: "10",
+          },
+        },
+      },
+    },
+    node2: {
+      id: "node2",
+      type: "input-output",
+      position: {
+        x: 300,
+        y: 300,
+      },
+      ports: {
+        port1: {
+          id: "port1",
+          type: "input",
+        },
+        port2: {
+          id: "port2",
+          type: "output",
+          properties: {
+            linkStrokeDasharray: "8 2 4",
+          },
+        },
+        port3: {
+          id: "port3",
+          type: "output",
+        },
+      },
+    },
+    node3: {
+      id: "node3",
+      type: "input-output",
+      position: {
+        x: 100,
+        y: 600,
+      },
+      ports: {
+        port1: {
+          id: "port1",
+          type: "input",
+        },
+        port2: {
+          id: "port2",
+          type: "output",
+        },
+      },
+    },
+    node4: {
+      id: "node4",
+      type: "input-output",
+      position: {
+        x: 500,
+        y: 600,
+      },
+      ports: {
+        port1: {
+          id: "port1",
+          type: "input",
+        },
+        port2: {
+          id: "port2",
+          type: "output",
+        },
+      },
+    },
+  },
+  links: {
+    link1: {
+      id: "link1",
+      from: {
+        nodeId: "node1",
+        portId: "port1",
+      },
+      to: {
+        nodeId: "node2",
+        portId: "port1",
+      },
+    },
+    link2: {
+      id: "link2",
+      from: {
+        nodeId: "node2",
+        portId: "port2",
+      },
+      to: {
+        nodeId: "node3",
+        portId: "port1",
+      },
+    },
+    link3: {
+      id: "link3",
+      from: {
+        nodeId: "node2",
+        portId: "port3",
+      },
+      to: {
+        nodeId: "node4",
+        portId: "port1",
+      },
+    },
+  },
+  selected: {},
+  hovered: {},
+};
+
+export const LinkStrokeDasharray = () => {
+  return (
+    <Page>
+      <FlowChartWithState initialValue={chartSimpleWithDottedLink} />
+    </Page>
+  );
+};

stories/index.tsx

@@ -13,6 +13,7 @@ import { ExternalReactState } from "./ExternalReactState";
 import { InternalReactState } from "./InternalReactState";
 import { LinkColors } from "./LinkColors";
 import { LinkStrokeWidths } from "./LinkStrokeWidths";
+import { LinkStrokeDasharray } from "./LinkStrokeDasharray";
 import { ReadonlyMode } from "./ReadonlyMode";
 import { SelectedSidebar } from "./SelectedSidebar";
 import { SmartRouting } from "./SmartRouting";
@@ -30,6 +31,7 @@ storiesOf("Custom Components", module)
   .add("Canvas Outer", CustomCanvasOuterDemo)
   .add("Canvas Link", () => <CustomLinkDemo />)
   .add("Link Colors", () => <LinkColors />)
+  .add("Link Dotted", () => <LinkStrokeDasharray />)
   .add("Link Stroke Widths", () => <LinkStrokeWidths />);
 
 storiesOf("Stress Testing", module).add("default", StressTestDemo);