feat(Flow): allow overriding default edge options (#3732)

lumada-design · Oct 13, 2023 · 3d7aa5f · 3d7aa5f
1 parent a800d0a
commit 3d7aa5f
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 7 deletions.
diff --git a/packages/lab/src/components/Flow/DroppableFlow.tsx b/packages/lab/src/components/Flow/DroppableFlow.tsx
@@ -107,6 +107,7 @@ export const HvDroppableFlow = ({
   onConnect: onConnectProp,
   onNodesChange: onNodesChangeProp,
   onEdgesChange: onEdgesChangeProp,
+  defaultEdgeOptions: defaultEdgeOptionsProp,
   ...others
 }: HvDroppableFlowProps) => {
   const { classes, cx } = useClasses(classesProp);
@@ -235,6 +236,15 @@ export const HvDroppableFlow = ({
 
   const validEdges = validateEdges(edges, nodes, nodeTypes);
 
+  const defaultEdgeOptions = {
+    markerEnd: {
+      type: MarkerType.ArrowClosed,
+      height: 20,
+      width: 20,
+    },
+    ...defaultEdgeOptionsProp,
+  };
+
   return (
     <div
       id={elementId}
@@ -249,13 +259,7 @@ export const HvDroppableFlow = ({
         onEdgesChange={handleEdgesChange}
         onConnect={handleConnect}
         isValidConnection={isValidConnection}
-        defaultEdgeOptions={{
-          markerEnd: {
-            type: MarkerType.ArrowClosed,
-            height: 20,
-            width: 20,
-          },
-        }}
+        defaultEdgeOptions={defaultEdgeOptions}
         {...others}
       >
         {children}

diff --git a/packages/lab/src/components/Flow/stories/Visualizations/Visualizations.tsx b/packages/lab/src/components/Flow/stories/Visualizations/Visualizations.tsx
@@ -6,6 +6,8 @@ import {
   LineChart as LineChartIcon,
   Heart,
   Transformation,
+  Delete,
+  Duplicate,
 } from "@hitachivantara/uikit-react-icons";
 import { theme } from "@hitachivantara/uikit-styles";
 import { useState } from "react";
@@ -16,6 +18,12 @@ import { JsonInput } from "./JsonInput";
 import { LineChart } from "./LineChart";
 import { BarChart } from "./BarChart";
 import { Filter } from "./Filter";
+import { HvFlowDefaultActions } from "../../types";
+
+const defaultActions: HvFlowDefaultActions[] = [
+  { id: "delete", label: "Delete", icon: <Delete /> },
+  { id: "duplicate", label: "Duplicate", icon: <Duplicate /> },
+];
 
 export const Visualizations = () => {
   const [open, setOpen] = useState(false);
@@ -180,11 +188,13 @@ export const Visualizations = () => {
           edges={edges}
           nodeTypes={nodeTypes}
           nodeGroups={nodeGroups}
+          defaultActions={defaultActions}
           defaultViewport={{
             zoom: 0.7,
             x: 0,
             y: 0,
           }}
+          defaultEdgeOptions={{ animated: true }}
           sidebar={
             <HvFlowSidebar
               title="Add Node"