feat(floatingedge): configure connectionline

example/src/NodeAsHandle/CustomEdge.tsx

@@ -131,25 +131,25 @@ const CustomEdge: FC<EdgeProps> = ({
 };
 
 export const ConnectionLine: FC<ConnectionLineComponentProps> = ({
-  sourceX,
-  sourceY,
   targetX,
   targetY,
+  sourcePosition,
+  targetPosition,
   sourceNode,
 }) => {
   if (!sourceNode) {
     return null;
   }
 
-  const targetNode = { __rf: { width: 100, height: 100, position: { x: targetX, y: targetY - 50 } } };
-  const { sx, sy, tx, ty, label, sourcePos, targetPos } = getArrow(sourceNode, targetNode);
+  const targetNode = { __rf: { width: 1, height: 1, position: { x: targetX, y: targetY } } };
+  const { sx, sy } = getArrow(sourceNode, targetNode);
   const d = getBezierPath({
     sourceX: sx,
     sourceY: sy,
-    sourcePosition: sourcePos,
-    targetPosition: targetPos,
-    targetX: tx,
-    targetY: ty,
+    sourcePosition,
+    targetPosition,
+    targetX,
+    targetY,
   });
 
   return (

example/src/NodeAsHandle/CustomNode.tsx

@@ -1,16 +0,0 @@
-import { Handle, Position, NodeProps } from 'react-flow-renderer';
-
-const CustomNode = ({ data }: NodeProps) => {
-  const handleType = data?.isTarget ? 'target' : 'source';
-
-  return (
-    <div className="customnode">
-      This is a node
-      <div className="handlewrapper">
-        <Handle type={handleType} position={Position.Top} />
-      </div>
-    </div>
-  );
-};
-
-export default CustomNode;

example/src/NodeAsHandle/index.tsx

@@ -12,13 +12,9 @@ import ReactFlow, {
   Connection,
   Edge,
   ArrowHeadType,
-  NodeTypesType,
 } from 'react-flow-renderer';
 
 import CustomEdge, { ConnectionLine } from './CustomEdge';
-import CustomNode from './CustomNode';
-
-import './style.css';
 
 const onLoad = (reactFlowInstance: OnLoadParams) => reactFlowInstance.fitView();
 
@@ -32,7 +28,7 @@ function createElements() {
   const elements = [];
   const center = { x: window.innerWidth / 2, y: window.innerHeight / 2 };
 
-  elements.push({ type: 'custom', id: 'source', data: { label: 'Source', isTarget: false }, position: center });
+  elements.push({ id: 'source', data: { label: 'Source', isTarget: false }, position: center });
 
   for (let i = 0; i < 8; i++) {
     const degrees = i * (360 / 8);
@@ -40,7 +36,7 @@ function createElements() {
     const x = 250 * Math.cos(radians) + center.x;
     const y = 250 * Math.sin(radians) + center.y;
 
-    elements.push({ type: 'custom', id: `${i}`, data: { label: 'Target', isTarget: true }, position: { x, y } });
+    elements.push({ id: `${i}`, data: { label: 'Target', isTarget: true }, position: { x, y } });
 
     if (i % 2 === 0) {
       elements.push(
@@ -62,10 +58,6 @@ const edgeTypes: EdgeTypesType = {
   custom: CustomEdge,
 };
 
-const nodeTypes: NodeTypesType = {
-  custom: CustomNode,
-};
-
 const NodeAsHandleFlow = () => {
   const [elements, setElements] = useState<Elements>(initialElements);
 
@@ -79,7 +71,6 @@ const NodeAsHandleFlow = () => {
       onConnect={onConnect}
       onLoad={onLoad}
       edgeTypes={edgeTypes}
-      nodeTypes={nodeTypes}
       connectionLineComponent={ConnectionLine}
     >
       <MiniMap />

example/src/NodeAsHandle/style.css

@@ -1,24 +0,0 @@
-.customnode {
-  padding: 10px;
-  border: 1px solid #ddd;
-  position: relative;
-}
-
-.handlewrapper {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-
-.react-flow__handle {
-  background-color: red;
-  opacity: 0.5;
-  height: 100%;
-  width: 100%;
-  border-radius: 0;
-  left: 0;
-  top: 0;
-  transform: none;
-}