faet(handle): add isConnectableStart and isConnectableEnd

packages/core/src/components/Handle/index.tsx

@@ -29,6 +29,8 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
       position = Position.Top,
       isValidConnection,
       isConnectable = true,
+      isConnectableStart = true,
+      isConnectableEnd = true,
       id,
       onConnect,
       children,
@@ -72,7 +74,7 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
     const onPointerDown = (event: ReactMouseEvent<HTMLDivElement> | ReactTouchEvent<HTMLDivElement>) => {
       const isMouseTriggered = isMouseEvent(event);
 
-      if ((isMouseTriggered && event.button === 0) || !isMouseTriggered) {
+      if (isConnectableStart && ((isMouseTriggered && event.button === 0) || !isMouseTriggered)) {
         handlePointerDown({
           event,
           handleId,
@@ -99,6 +101,11 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
         connectionMode,
         isValidConnection: isValidConnectionStore,
       } = store.getState();
+
+      if (!connectionStartHandle && !isConnectableStart) {
+        return;
+      }
+
       if (!connectionStartHandle) {
         onClickConnectStart?.(event, { nodeId, handleId, handleType: type });
         store.setState({ connectionStartHandle: { nodeId, type, handleId } });
@@ -131,6 +138,11 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
       store.setState({ connectionStartHandle: null });
     };
 
+    const connecting =
+      connectionStartHandle?.nodeId === nodeId &&
+      connectionStartHandle?.handleId === handleId &&
+      connectionStartHandle?.type === type;
+
     return (
       <div
         data-handleid={handleId}
@@ -147,10 +159,11 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
             source: !isTarget,
             target: isTarget,
             connectable: isConnectable,
-            connecting:
+            connectablestart: isConnectableStart,
-              connectionStartHandle?.nodeId === nodeId &&
+            connectableend: isConnectableEnd,
-              connectionStartHandle?.handleId === handleId &&
+            connecting,
-              connectionStartHandle?.type === type,
+            connectionindicator:
+              (isConnectable && isConnectableStart && !connecting) || (isConnectableEnd && connecting),
           },
         ])}
         onMouseDown={onPointerDown}

packages/core/src/components/Handle/utils.ts

@@ -92,6 +92,8 @@ export function isValidHandle(
     const handleType = getHandleType(undefined, handleToCheck);
     const handleNodeId = handleToCheck.getAttribute('data-nodeid');
     const handleId = handleToCheck.getAttribute('data-handleid');
+    const connectable = handleToCheck.classList.contains('connectable');
+    const connectableEnd = handleToCheck.classList.contains('connectableend');
 
     const connection: Connection = {
       source: isTarget ? handleNodeId : fromNodeId,
@@ -102,9 +104,10 @@ export function isValidHandle(
 
     result.connection = connection;
 
+    const isConnectable = connectable && connectableEnd;
     // in strict mode we don't allow target to target or source to source connections
     const isValid =
-      handleToCheck.classList.contains('connectable') &&
+      isConnectable &&
       (connectionMode === ConnectionMode.Strict
         ? (isTarget && handleType === 'source') || (!isTarget && handleType === 'target')
         : handleNodeId !== fromNodeId || handleId !== fromHandleId);

packages/core/src/styles/init.css

@@ -144,7 +144,7 @@
   min-width: 5px;
   min-height: 5px;
 
-  &.connectable {
+  &.connectionindicator {
     pointer-events: all;
     cursor: crosshair;
   }

packages/core/src/types/handles.ts

@@ -17,6 +17,8 @@ export interface HandleProps {
   type: HandleType;
   position: Position;
   isConnectable?: boolean;
+  isConnectableStart?: boolean;
+  isConnectableEnd?: boolean;
   onConnect?: OnConnect;
   isValidConnection?: (connection: Connection) => boolean;
   id?: string;