Remove connection line when right clicking

packages/react-pipelines/src/FlowBoard.tsx

@@ -8,6 +8,7 @@ import Toolbox from './toolbox/Toolbox'
 import { parseBlockData } from './utils/BlockParser'
 import { ToolBlockDefinition } from './toolbox/ToolBlock'
 import React from 'react'
+import useConnectionRightClick from './hooks/useConnectionClick'
 
 interface FlowBoardProps {
   id: string
@@ -49,6 +50,13 @@ const FlowBoard = ({ blockData, ...props }: FlowBoardProps) => {
 
   const { svgConnectionLines } = useConnectionDraw(connectionLinesData, blockData)
 
+  const {
+    handleConnectionLineRightClick,
+  } = useConnectionRightClick(
+    props.connectionLineData,
+    props.onConnectionLineUpdate
+  )
+
   const dragBlock = (event: React.DragEvent<HTMLDivElement>) => {
     event.preventDefault()
   }
@@ -155,7 +163,7 @@ const FlowBoard = ({ blockData, ...props }: FlowBoardProps) => {
           ref={el => mainBoardRef.current = el}
         >
           {blocks}
-          <ConnectionCanvas key="connection-canvas" lines={svgConnectionLines} />
+          <ConnectionCanvas key="connection-canvas" lines={svgConnectionLines} onLineRightClick={handleConnectionLineRightClick}/>
         </Board>
       </div>
 

packages/react-pipelines/src/connections/ConnectionLine.tsx

@@ -3,6 +3,7 @@ import styled from 'styled-components'
 interface ConnectionContainerProps {
   key: string
   lines: ConnectionSvgLineProps[]
+  onLineRightClick: (lineKey: string, event: React.MouseEvent) => void;
 }
 
 const StyledSvgContainer = styled.svg`
@@ -19,7 +20,7 @@ const StyledSvgContainer = styled.svg`
 
 const StyledSvgLine = styled.line`
   position: absolute;
-  strokeWidth: 2px;
+  stroke-width: 2px;
   &:hover {
     stroke: red;
   }
@@ -55,6 +56,7 @@ const ConnectionCanvas = (props: ConnectionContainerProps) => {
           y2={line.y2}
           stroke="steelblue"
           strokeWidth="2"
+          onContextMenu={(event) => props.onLineRightClick(line.key, event)}
           // markerEnd="url(#arrowhead)"
         />
       ))}

packages/react-pipelines/src/connections/ConnectionPoint.tsx

@@ -6,33 +6,38 @@ const styledConnectionPoint = styled.div`
   height: 15px;
   background: white;
   border-radius: 50%;
-  cursor: crosshair;
+  cursor: grab;
   border: 1px solid black;
   z-index: 10;
   margin-bottom: 5px;
+
+  &:active {
+  cursor: grabbing;
+  border-color: lightblue;
+  }
 `
 
 const styledInputConnectionPoint = styled(styledConnectionPoint)`
   left: -10px;
-  top: 20px;
+  top: 40px;
   background: green;
 `
 
 const styledErrorInputConnectionPoint = styled(styledConnectionPoint)`
   left: -10px;
-  top: 50px;
+  top: 70px;
   background: red;
 `
 
 const styledOutputConnectionPoint = styled(styledConnectionPoint)`
 right: -10px;
-top: 20px;
+top: 40px;
 background: green;
 `
 
 const styledErrorOutputConnectionPoint = styled(styledConnectionPoint)`
   right: -10px;
-  top: 50px;
+  top: 70px;
   background: red;
 `
 

packages/react-pipelines/src/hooks/useConnectionClick.tsx

@@ -0,0 +1,23 @@
+import { useCallback } from 'react';
+import { ConnectionLineData } from '../utils/ConnectionUtils'
+
+const useConnectionRightClick = (
+    connectionLineData: ConnectionLineData[],
+    onConnectionLineUpdate: (connectionLineData: ConnectionLineData[]) => void = () => {},
+) => {
+    const handleConnectionLineRightClick = useCallback((lineKey: string, event: React.MouseEvent) => {
+        event.preventDefault()
+
+        const updatedConnectionLineData = connectionLineData.filter(
+            (line) => line.key !== lineKey
+    );
+    onConnectionLineUpdate(updatedConnectionLineData);
+    console.log(connectionLineData)
+
+},
+    [connectionLineData, onConnectionLineUpdate]
+);
+    return { handleConnectionLineRightClick };
+};
+
+export default useConnectionRightClick;

packages/react-pipelines/src/hooks/useConnectionDrag.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import { BlockData } from '../utils/BlockUtils'
 import { ConnectionLineData, TemporaryConnectionLineData } from '../utils/ConnectionUtils'
 
@@ -12,6 +12,10 @@ const useConnectionDrag = (
   const [connectionLinesData, setConnectionLines] = useState<(ConnectionLineData | TemporaryConnectionLineData)[]>(connectionLineData)
   const [currentConnectionLine, setCurrentConnectionLine] = useState<TemporaryConnectionLineData | null>(null)
 
+  useEffect(() => {
+    setConnectionLines(connectionLineData);
+  }, [connectionLineData]);
+
   const onOutputConnectionPointDragStart = (event: React.DragEvent<HTMLDivElement>) => {
     event.stopPropagation()
     event.dataTransfer.setData('originConnectionPoint', event.currentTarget.id)

packages/react-pipelines/src/hooks/useConnectionDraw.tsx

@@ -97,7 +97,10 @@ const useConnectionDraw = (
     [],
   )
 
-  useEffect(() => {
+  useEffect(() => {    
+
+    setSvgConnectionLines([]);
+
     const savedConnectionLines: ConnectionLineData[] = connectionLineData.filter(
       (connectionLine) => connectionLine.key !== 'xxx',
     ) as ConnectionLineData[]
@@ -106,12 +109,15 @@ const useConnectionDraw = (
       (connectionLine) => connectionLine.key === 'xxx',
     ) as TemporaryConnectionLineData[]
 
-    savedConnectionLines.forEach((connectionLine) => drawConnectionLine(connectionLine, calculatePosition, blockData))
+    savedConnectionLines.forEach((connectionLine) =>
+        drawConnectionLine(connectionLine, calculatePosition, blockData),
+      );
+
     tempConnectionLines.forEach((connectionLine) =>
       drawTempConnectionLine(connectionLine, calculatePosition, blockData),
     )
   }, [connectionLineData, blockData, drawConnectionLine, drawTempConnectionLine])
-
+ 
   return { svgConnectionLines }
 }