ConnectionLine.tsx

// import {
//   ConnectionLineComponentProps,
//   useStore as flowState,
// } from 'react-flow-renderer';
// import { useStoreState } from '../../state/Hooks';

// const getPos = (isSource: boolean, bounds: DOMRect, transform: number[]) => {
//   let x, y;

//   if (isSource) {
//     x = (bounds.x + bounds.width - transform[0]) / transform[2];
//   } else {
//     x = (bounds.x - transform[0]) / transform[2];
//   }

//   y = (bounds.y + bounds.height / 2 - 60 - transform[1]) / transform[2];

//   return { x, y };
// };

// const ConnectionLine = ({ targetX, targetY }: ConnectionLineComponentProps) => {
//   const connecting = useStoreState((state) => state.connecting);
//   const altAction = useStoreState((state) => state.altAction);
//   const transform = flowState((state: any) => state.transform);
//   const handle = connecting?.start?.ref?.current as Element;
//   const isSource = connecting?.start?.id.connectionHandleType === 'source';

//   if (!handle) {
//     return null;
//   }

//   const bounds = handle.getBoundingClientRect();
//   const start = getPos(isSource, bounds, transform);
//   let end = { x: targetX, y: targetY };
//   const dist = 30 * (isSource ? 1 : -1);
//   const invalid = isSource ? end.x < start.x : end.y > start.x;
//   let color = '#76CDFF';

//   if (!invalid && connecting?.end?.ref) {
//     const snapTo = connecting?.end.ref?.current as Element;

//     if (snapTo && connecting?.end?.ref.current !== handle) {
//       const snapToBounds = snapTo.getBoundingClientRect();
//       end = getPos(!isSource, snapToBounds, transform);
//       color = '#0078CA';
//     }
//   }

//   color = invalid || altAction ? '#F24646' : color;

//   return (
//     <g>
//       <path
//         fill="none"
//         stroke={color}
//         strokeWidth={1.5}
//         className="animated"
//         d={`M${start.x},${start.y} ${start.x + dist},${start.y} ${
//           start.x + dist
//         },${start.y} ${end.x - dist},${end.y} ${end.x - dist},${end.y} ${
//           end.x
//         },${end.y}`}
//       />
//       <circle
//         cx={end.x}
//         cy={end.y}
//         fill="#fff"
//         r={3}
//         stroke={color}
//         strokeWidth={1.5}
//       />
//       <circle
//         cx={start.x - 2}
//         cy={start.y}
//         fill="#fff"
//         r={3}
//         stroke={color}
//         strokeWidth={1.5}
//       />
//     </g>
//   );
// };

// export default ConnectionLine;

export default {}