Merge pull request #275 from Anchel123/add-fill-property-to-edge

add fill property to edge and set the arrow and the line color by it
reaviz · Sep 3, 2024 · dcdc83c · dcdc83c
2 parents bd23e1a + 119822e
commit dcdc83c
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/src/symbols/Edge.tsx b/src/symbols/Edge.tsx
@@ -132,7 +132,7 @@ export const Edge: FC<EdgeProps> = ({
   // Edge data
   const edges = useStore(state => state.edges);
   const edge = edges.find(e => e.id === id);
-  const { target, source, label, labelVisible = false, size = 1 } = edge;
+  const { target, source, label, labelVisible = false, size = 1, fill } = edge;
   const from = useStore(store => store.nodes.find(node => node.id === source));
   const to = useStore(store => store.nodes.find(node => node.id === target));
 
@@ -278,7 +278,7 @@ export const Edge: FC<EdgeProps> = ({
           color={
             isSelected || active || isActive
               ? theme.arrow.activeFill
-              : theme.arrow.fill
+              : fill || theme.arrow.fill
           }
           length={arrowLength}
           opacity={selectionOpacity}
@@ -295,6 +295,7 @@ export const Edge: FC<EdgeProps> = ({
         />
       ),
     [
+      fill,
       active,
       animated,
       arrowLength,
@@ -385,7 +386,7 @@ export const Edge: FC<EdgeProps> = ({
         color={
           isSelected || active || isActive
             ? theme.edge.activeFill
-            : theme.edge.fill
+            : fill || theme.edge.fill
         }
         curve={curve}
         curved={curved}

diff --git a/src/types.ts b/src/types.ts
@@ -56,6 +56,11 @@ export interface GraphEdge extends GraphElementBaseAttributes {
    */
   source: string;
 
+  /**
+   * Fill color for the edge.
+   */
+  fill?: string;
+
   /**
    * Target ID of the node.
    */