From 1b73c8fff5857523d8940a3c36c87172762116d5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Christopher=20M=C3=B6ller?= <chrtze@gmail.com>
Date: Fri, 15 Oct 2021 11:51:54 +0200
Subject: [PATCH] feat(markers): add more properties for custom markers

---
 example/src/Edges/index.tsx                   |  8 ++-
 .../EdgeRenderer/MarkerDefinitions.tsx        | 52 ++++++++++---------
 src/types/index.ts                            |  4 ++
 3 files changed, 37 insertions(+), 27 deletions(-)

diff --git a/example/src/Edges/index.tsx b/example/src/Edges/index.tsx
index 9676da7e..c46cca68 100644
--- a/example/src/Edges/index.tsx
+++ b/example/src/Edges/index.tsx
@@ -56,7 +56,12 @@ const initialElements: Elements = [
     labelStyle: { fill: 'red', fontWeight: 700 },
     style: { stroke: '#ffcc00' },
     markerEnd: {
-      type: ArrowHeadType.ArrowClosed,
+      type: ArrowHeadType.Arrow,
+      color: '#FFCC00',
+      units: 'userSpaceOnUse',
+      width: 20,
+      height: 20,
+      strokeWidth: 2,
     },
     markerStart: {
       type: ArrowHeadType.Arrow,
@@ -73,7 +78,6 @@ const initialElements: Elements = [
     labelBgStyle: { fill: '#FFCC00', color: '#fff', fillOpacity: 0.7 },
     markerEnd: {
       type: ArrowHeadType.ArrowClosed,
-      color: '#FFCC00',
     },
   },
   {
diff --git a/src/container/EdgeRenderer/MarkerDefinitions.tsx b/src/container/EdgeRenderer/MarkerDefinitions.tsx
index f4dc34a6..9645ea0e 100644
--- a/src/container/EdgeRenderer/MarkerDefinitions.tsx
+++ b/src/container/EdgeRenderer/MarkerDefinitions.tsx
@@ -2,43 +2,35 @@ import React, { useMemo } from 'react';
 import { useStoreState } from '../../store/hooks';
 import { EdgeMarker, ArrowHeadType } from '../../types';
 import { getMarkerId } from '../../utils/graph';
-interface MarkerProps {
+interface MarkerProps extends EdgeMarker {
   id: string;
-  type: ArrowHeadType;
-  color: string;
 }
 interface MarkerDefinitionsProps {
   defaultColor: string;
 }
 
-interface SymbolProps {
-  color: string;
-}
+type SymbolProps = Omit<MarkerProps, 'id' | 'type'>;
 
-interface EdgeMarkerExtended extends EdgeMarker {
-  id: string;
-}
-
-const ArrowSymbol = ({ color }: SymbolProps) => {
+const ArrowSymbol = ({ color = 'none', strokeWidth = 1 }: SymbolProps) => {
   return (
     <polyline
       stroke={color}
       strokeLinecap="round"
       strokeLinejoin="round"
-      strokeWidth="1"
-      fill={color}
-      points="-5,-4 0,0 -5,4 -5,-4"
+      strokeWidth={strokeWidth}
+      fill="none"
+      points="-5,-4 0,0 -5,4"
     />
   );
 };
 
-const ArrowClosedSymbol = ({ color }: SymbolProps) => {
+const ArrowClosedSymbol = ({ color = 'none', strokeWidth = 1 }: SymbolProps) => {
   return (
     <polyline
       stroke={color}
       strokeLinecap="round"
       strokeLinejoin="round"
-      strokeWidth="1"
+      strokeWidth={strokeWidth}
       fill={color}
       points="-5,-4 0,0 -5,4 -5,-4"
     />
@@ -50,21 +42,22 @@ const markerSymbols = {
   [ArrowHeadType.ArrowClosed]: ArrowClosedSymbol,
 };
 
-const Marker = ({ id, type, color }: MarkerProps) => {
+const Marker = ({ id, type, color, width = 12.5, height = 12.5, units = 'strokeWidth', strokeWidth }: MarkerProps) => {
   const Symbol = markerSymbols[type];
 
   return (
     <marker
       className="react-flow__arrowhead"
       id={id}
-      markerWidth="12.5"
-      markerHeight="12.5"
+      markerUnits={units}
+      markerWidth={`${width}`}
+      markerHeight={`${height}`}
       viewBox="-10 -10 20 20"
       orient="auto"
       refX="0"
       refY="0"
     >
-      <Symbol color={color} />
+      <Symbol color={color} strokeWidth={strokeWidth} />
     </marker>
   );
 };
@@ -74,24 +67,33 @@ const MarkerDefinitions = ({ defaultColor }: MarkerDefinitionsProps) => {
   const markers = useMemo(() => {
     const ids: string[] = [];
 
-    return edges.reduce<EdgeMarkerExtended[]>((markers, edge) => {
+    return edges.reduce<MarkerProps[]>((markers, edge) => {
       [edge.markerStart, edge.markerEnd].forEach((marker) => {
         if (marker && typeof marker === 'object') {
           const markerId = getMarkerId(marker);
           if (!ids.includes(markerId)) {
-            markers.push({ id: markerId, ...marker });
+            markers.push({ id: markerId, color: marker.color || defaultColor, ...marker });
             ids.push(markerId);
           }
         }
       });
       return markers.sort((a, b) => a.id.localeCompare(b.id));
     }, []);
-  }, [edges]);
+  }, [edges, defaultColor]);
 
   return (
     <defs>
-      {markers.map((marker: EdgeMarkerExtended) => (
-        <Marker id={marker.id} key={marker.id} type={marker.type} color={marker.color || defaultColor} />
+      {markers.map((marker: MarkerProps) => (
+        <Marker
+          id={marker.id}
+          key={marker.id}
+          type={marker.type}
+          color={marker.color}
+          width={marker.width}
+          height={marker.height}
+          units={marker.units}
+          strokeWidth={marker.strokeWidth}
+        />
       ))}
     </defs>
   );
diff --git a/src/types/index.ts b/src/types/index.ts
index 97938453..2a660572 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -60,6 +60,10 @@ export enum ArrowHeadType {
 export interface EdgeMarker {
   type: ArrowHeadType;
   color?: string;
+  width?: number;
+  height?: number;
+  units?: 'userSpaceOnUse' | 'strokeWidth';
+  strokeWidth?: number;
 }
 
 export type EdgeMarkerType = string | EdgeMarker;