chore(markers): cleanup marker api

src/container/EdgeRenderer/MarkerSymbols.tsx

@@ -0,0 +1,51 @@
+import React, { useMemo } from 'react';
+import { MarkerType, EdgeMarker } from '../../types';
+
+type SymbolProps = Omit<EdgeMarker, 'type'>;
+
+const ArrowSymbol = ({ color = 'none', strokeWidth = 1 }: SymbolProps) => {
+  return (
+    <polyline
+      stroke={color}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={strokeWidth}
+      fill="none"
+      points="-5,-4 0,0 -5,4"
+    />
+  );
+};
+
+const ArrowClosedSymbol = ({ color = 'none', strokeWidth = 1 }: SymbolProps) => {
+  return (
+    <polyline
+      stroke={color}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={strokeWidth}
+      fill={color}
+      points="-5,-4 0,0 -5,4 -5,-4"
+    />
+  );
+};
+
+export const MarkerSymbols = {
+  [MarkerType.Arrow]: ArrowSymbol,
+  [MarkerType.ArrowClosed]: ArrowClosedSymbol,
+};
+
+export function useMarkerSymbol(type: MarkerType) {
+  const symbol = useMemo(() => {
+    const symbolExists = MarkerSymbols.hasOwnProperty(type);
+
+    if (!symbolExists) {
+      console.warn(`marker type "${type}" doesn't exist.`);
+      return () => null;
+    }
+
+    return MarkerSymbols[type];
+  }, [type]);
+  return symbol;
+}
+
+export default MarkerSymbols;