Style Arrow Heads Edge Markers with CSS Variables

2025-07-28 13:27:21 +02:00
parent e625e1dffc
commit 85c6266a0e
4 changed files with 64 additions and 27 deletions
@@ -6,33 +6,21 @@ import { useStoreApi } from '../../hooks/useStore';
 type SymbolProps = Omit<EdgeMarker, 'type'>;

 const ArrowSymbol = ({ color = 'none', strokeWidth = 1 }: SymbolProps) => {
-  return (
-    <polyline
-      style={{
-        stroke: color,
-        strokeWidth,
-      }}
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      fill="none"
-      points="-5,-4 0,0 -5,4"
-    />
-  );
+  const style = {
+    strokeWidth,
+    ...(color !== 'none' && { stroke: color, fill: color }),
+  };
+
+  return <polyline style={style} strokeLinecap="round" strokeLinejoin="round" fill="none" points="-5,-4 0,0 -5,4" />;
 };

 const ArrowClosedSymbol = ({ color = 'none', strokeWidth = 1 }: SymbolProps) => {
-  return (
-    <polyline
-      style={{
-        stroke: color,
-        fill: color,
-        strokeWidth,
-      }}
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      points="-5,-4 0,0 -5,4 -5,-4"
-    />
-  );
+  const style = {
+    strokeWidth,
+    ...(color !== 'none' && { stroke: color, fill: color }),
+  };
+
+  return <polyline style={style} strokeLinecap="round" strokeLinejoin="round" points="-5,-4 0,0 -5,4 -5,-4" />;
 };

 export const MarkerSymbols = {