feat: add custom edge (#1061)

### What problem does this PR solve?
feat: add custom edge
feat: add flow card
feat: add store for canvas
#918 

### Type of change

- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/flow/canvas/edge/index.less

@@ -0,0 +1,15 @@
+.edgeButton {
+  width: 14px;
+  height: 14px;
+  background: #eee;
+  border: 1px solid #fff;
+  padding: 0;
+  cursor: pointer;
+  border-radius: 50%;
+  font-size: 10px;
+  line-height: 1;
+}
+
+.edgeButton:hover {
+  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.08);
+}

web/src/pages/flow/canvas/edge/index.tsx

@@ -0,0 +1,72 @@
+import {
+  BaseEdge,
+  EdgeLabelRenderer,
+  EdgeProps,
+  getBezierPath,
+} from 'reactflow';
+import useStore from '../../store';
+
+import { useMemo } from 'react';
+import styles from './index.less';
+
+export function ButtonEdge({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  style = {},
+  markerEnd,
+  selected,
+}: EdgeProps) {
+  const deleteEdgeById = useStore((state) => state.deleteEdgeById);
+  const [edgePath, labelX, labelY] = getBezierPath({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition,
+  });
+
+  const selectedStyle = useMemo(() => {
+    return selected ? { strokeWidth: 1, stroke: '#1677ff' } : {};
+  }, [selected]);
+
+  const onEdgeClick = () => {
+    deleteEdgeById(id);
+  };
+
+  return (
+    <>
+      <BaseEdge
+        path={edgePath}
+        markerEnd={markerEnd}
+        style={{ ...style, ...selectedStyle }}
+      />
+      <EdgeLabelRenderer>
+        <div
+          style={{
+            position: 'absolute',
+            transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
+            fontSize: 12,
+            // everything inside EdgeLabelRenderer has no pointer events by default
+            // if you have an interactive element, set pointer-events: all
+            pointerEvents: 'all',
+          }}
+          className="nodrag nopan"
+        >
+          <button
+            className={styles.edgeButton}
+            type="button"
+            onClick={onEdgeClick}
+          >
+            ×
+          </button>
+        </div>
+      </EdgeLabelRenderer>
+    </>
+  );
+}