From f79e6f38eb52389500b1e37bbeb42c20ab3284a9 Mon Sep 17 00:00:00 2001
From: Georgina Serra <georgina@futureworkshops.com>
Date: Tue, 25 Aug 2020 12:03:23 +0200
Subject: [PATCH] Allow customize link stroke width

---
 src/components/Link/Link.default.tsx         |   9 +-
 src/components/Link/variants/ArrowLink.tsx   |   4 +-
 src/components/Link/variants/RegularLink.tsx |   4 +-
 stories/LinkStrokeWidths.tsx                 | 138 +++++++++++++++++++
 stories/index.tsx                            |   2 +
 5 files changed, 151 insertions(+), 6 deletions(-)
 create mode 100644 stories/LinkStrokeWidths.tsx

diff --git a/src/components/Link/Link.default.tsx b/src/components/Link/Link.default.tsx
index fcb625f9..086b2985 100644
--- a/src/components/Link/Link.default.tsx
+++ b/src/components/Link/Link.default.tsx
@@ -29,15 +29,16 @@ export const LinkDefault = (props: ILinkDefaultProps) => {
   const linkColor: string =
     (fromPort.properties && fromPort.properties.linkColor) || 'cornflowerblue'
 
+  const linkStrokeWidth: string =
+    (fromPort.properties && fromPort.properties.linkStrokeWidth) || '3'
+
   const linkProps = {
-    config,
     points,
     linkColor,
-    startPos,
-    endPos,
+    linkStrokeWidth,
     ...props,
   }
-  
+
   return config.showArrowHead
     ? <ArrowLink {...linkProps} />
     : <RegularLink {...linkProps} />
diff --git a/src/components/Link/variants/ArrowLink.tsx b/src/components/Link/variants/ArrowLink.tsx
index e87398b9..9d838c26 100644
--- a/src/components/Link/variants/ArrowLink.tsx
+++ b/src/components/Link/variants/ArrowLink.tsx
@@ -7,6 +7,7 @@ export interface IArrowLinkProps {
   link: ILink
   config: IConfig
   linkColor: string
+  linkStrokeWidth: string
   points: string
   isHovered: boolean
   isSelected: boolean
@@ -22,6 +23,7 @@ export const ArrowLink = ({
   link,
   config,
   linkColor,
+  linkStrokeWidth,
   points,
   isHovered,
   isSelected,
@@ -72,7 +74,7 @@ export const ArrowLink = ({
       <path
         d={points}
         stroke={linkColor}
-        strokeWidth="3"
+        strokeWidth={linkStrokeWidth}
         fill="none"
         {...marker}
       />
diff --git a/src/components/Link/variants/RegularLink.tsx b/src/components/Link/variants/RegularLink.tsx
index 646346bc..06750707 100644
--- a/src/components/Link/variants/RegularLink.tsx
+++ b/src/components/Link/variants/RegularLink.tsx
@@ -5,6 +5,7 @@ export interface IRegularLinkProps {
   className?: string
   points: string
   linkColor: string
+  linkStrokeWidth: string
   config: IConfig
   link: ILink
   startPos: IPosition
@@ -20,6 +21,7 @@ export const RegularLink = ({
   className,
   points,
   linkColor,
+  linkStrokeWidth,
   config,
   link,
   startPos,
@@ -43,7 +45,7 @@ export const RegularLink = ({
     >
       <circle r="4" cx={startPos.x} cy={startPos.y} fill={linkColor} />
       {/* Main line */}
-      <path d={points} stroke={linkColor} strokeWidth="3" fill="none" />
+      <path d={points} stroke={linkColor} strokeWidth={linkStrokeWidth} fill="none" />
       {/* Thick line to make selection easier */}
       <path
         d={points}
diff --git a/stories/LinkStrokeWidths.tsx b/stories/LinkStrokeWidths.tsx
new file mode 100644
index 00000000..a5d11c85
--- /dev/null
+++ b/stories/LinkStrokeWidths.tsx
@@ -0,0 +1,138 @@
+import * as React from 'react'
+
+import { FlowChartWithState, IChart } from '../src'
+import { Page } from './components'
+
+const chartSimpleWithLinkStrokeWidhts: 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',
+            linkStrokeWidth: '30',
+          },
+        },
+      },
+    },
+    node2: {
+      id: 'node2',
+      type: 'input-output',
+      position: {
+        x: 300,
+        y: 300,
+      },
+      ports: {
+        port1: {
+          id: 'port1',
+          type: 'input',
+        },
+        port2: {
+          id: 'port2',
+          type: 'output',
+          properties: {
+            linkStrokeWidth: '10',
+          },
+        },
+        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 LinkStrokeWidths = () => {
+  return (
+    <Page>
+      <FlowChartWithState initialValue={chartSimpleWithLinkStrokeWidhts} />
+    </Page>
+  )
+}
diff --git a/stories/index.tsx b/stories/index.tsx
index 90061abf..0c9bc771 100644
--- a/stories/index.tsx
+++ b/stories/index.tsx
@@ -12,6 +12,7 @@ import { DragAndDropSidebar } from './DragAndDropSidebar'
 import { ExternalReactState } from './ExternalReactState'
 import { InternalReactState } from './InternalReactState'
 import { LinkColors } from './LinkColors'
+import { LinkStrokeWidths } from './LinkStrokeWidths'
 import { NodeReadonly } from './NodeReadonly'
 import { LinkWithArrowHead } from './LinkWithArrowHead'
 import { ReadonlyMode } from './ReadonlyMode'
@@ -32,6 +33,7 @@ storiesOf('Custom Components', module)
   .add('Canvas Outer', CustomCanvasOuterDemo)
   .add('Canvas Link', () => <CustomLinkDemo />)
   .add('Link Colors', () => <LinkColors />)
+  .add('Link Stroke Widths', () => <LinkStrokeWidths />)
 
 storiesOf('Stress Testing', module).add('default', StressTestDemo)