From 68ce560cf177f6284fdeee7fff41c5663f367f60 Mon Sep 17 00:00:00 2001 From: moklick Date: Thu, 29 Feb 2024 12:53:04 +0100 Subject: [PATCH] chore(handles): cleanup --- .../react/src/examples/TouchDevice/index.tsx | 1 + .../src/examples/TouchDevice/touch-device.css | 8 ++++---- .../examples/Validation/validation.module.css | 6 +++++- .../src/routes/examples/validation/style.css | 6 +++++- packages/react/src/components/Handle/index.tsx | 10 ++++++++-- .../src/lib/components/Handle/Handle.svelte | 18 +++++++++++++++++- packages/system/src/xyhandle/XYHandle.ts | 16 +--------------- packages/system/src/xyhandle/utils.ts | 4 ---- 8 files changed, 41 insertions(+), 28 deletions(-) diff --git a/examples/react/src/examples/TouchDevice/index.tsx b/examples/react/src/examples/TouchDevice/index.tsx index 2073d13a..e412bee5 100644 --- a/examples/react/src/examples/TouchDevice/index.tsx +++ b/examples/react/src/examples/TouchDevice/index.tsx @@ -42,6 +42,7 @@ const TouchDeviceFlow = () => { onConnectEnd={onConnectEnd} onClickConnectStart={onClickConnectStart} onClickConnectEnd={onClickConnectEnd} + className="touch-flow" /> ); }; diff --git a/examples/react/src/examples/TouchDevice/touch-device.css b/examples/react/src/examples/TouchDevice/touch-device.css index 3ec36be2..92f85c27 100644 --- a/examples/react/src/examples/TouchDevice/touch-device.css +++ b/examples/react/src/examples/TouchDevice/touch-device.css @@ -1,15 +1,15 @@ -.react-flow .react-flow__handle { +.react-flow.touch-flow .react-flow__handle { width: 20px; height: 20px; border-radius: 3px; background-color: #9f7aea; } -.react-flow__handle-right { +.touch-flow .react-flow__handle-right { --translate: translate(50%, -50%); } -.react-flow__handle-left { +.touch-flow .react-flow__handle-left { --translate: translate(-50%, -50%); } @@ -22,6 +22,6 @@ } } -.react-flow .react-flow__handle.clickconnecting { +.react-flow.touch-flow .react-flow__handle.clickconnecting { animation: bounce 1600ms infinite ease-in; } diff --git a/examples/react/src/examples/Validation/validation.module.css b/examples/react/src/examples/Validation/validation.module.css index c19a8723..3fbe2f94 100644 --- a/examples/react/src/examples/Validation/validation.module.css +++ b/examples/react/src/examples/Validation/validation.module.css @@ -24,10 +24,14 @@ background: #fff; } -.validationflow :global .connecting { +.validationflow :global .connectingto { background: #ff6060; } +.validationflow :global .react-flow__node-custominput .connectingfrom { + background: #55dd99; +} + .validationflow :global .valid { background: #55dd99; } diff --git a/examples/svelte/src/routes/examples/validation/style.css b/examples/svelte/src/routes/examples/validation/style.css index 6839e129..a6bbf75a 100644 --- a/examples/svelte/src/routes/examples/validation/style.css +++ b/examples/svelte/src/routes/examples/validation/style.css @@ -1,7 +1,11 @@ -.svelte-flow__handle.connecting { +.svelte-flow__handle.connectingto { background: #ff6060; } +.svelte-flow__handle.connectingfrom { + background: #55dd99; +} + .svelte-flow__handle.valid { background: #55dd99; } diff --git a/packages/react/src/components/Handle/index.tsx b/packages/react/src/components/Handle/index.tsx index 378edb30..75c36b8c 100644 --- a/packages/react/src/components/Handle/index.tsx +++ b/packages/react/src/components/Handle/index.tsx @@ -38,11 +38,15 @@ const connectingSelector = connectionEndHandle: endHandle, connectionClickStartHandle: clickHandle, connectionMode, + connectionStatus, } = state; + + const connectingTo = endHandle?.nodeId === nodeId && endHandle?.handleId === handleId && endHandle?.type === type; + return { connectingFrom: startHandle?.nodeId === nodeId && startHandle?.handleId === handleId && startHandle?.type === type, - connectingTo: endHandle?.nodeId === nodeId && endHandle?.handleId === handleId && endHandle?.type === type, + connectingTo, clickConnecting: clickHandle?.nodeId === nodeId && clickHandle?.handleId === handleId && clickHandle?.type === type, isPossibleEndHandle: @@ -50,6 +54,7 @@ const connectingSelector = ? startHandle?.type !== type : nodeId !== startHandle?.nodeId || handleId !== startHandle?.handleId, connectionInProcess: !!startHandle, + valid: connectingTo && connectionStatus === 'valid', }; }; @@ -77,7 +82,7 @@ const HandleComponent = forwardRef( const store = useStoreApi(); const nodeId = useNodeId(); const { connectOnClick, noPanClassName, rfId } = useStore(selector, shallow); - const { connectingFrom, connectingTo, clickConnecting, isPossibleEndHandle, connectionInProcess } = useStore( + const { connectingFrom, connectingTo, clickConnecting, isPossibleEndHandle, connectionInProcess, valid } = useStore( connectingSelector(nodeId, handleId, type), shallow ); @@ -213,6 +218,7 @@ const HandleComponent = forwardRef( clickconnecting: clickConnecting, connectingfrom: connectingFrom, connectingto: connectingTo, + valid, // shows where you can start a connection from // and where you can end it while connecting connectionindicator: diff --git a/packages/svelte/src/lib/components/Handle/Handle.svelte b/packages/svelte/src/lib/components/Handle/Handle.svelte index f8a43dd4..e35804fc 100644 --- a/packages/svelte/src/lib/components/Handle/Handle.svelte +++ b/packages/svelte/src/lib/components/Handle/Handle.svelte @@ -56,7 +56,8 @@ onconnect: onConnectAction, onconnectstart: onConnectStartAction, onconnectend: onConnectEndAction, - flowId + flowId, + connection } = store; function onPointerDown(event: MouseEvent | TouchEvent) { @@ -123,6 +124,16 @@ prevConnections = connections ?? new Map(); } + $: connectingFrom = + $connection.startHandle?.nodeId === nodeId && + $connection.startHandle?.type === type && + $connection.startHandle?.handleId === handleId; + $: connectingTo = + $connection.endHandle?.nodeId === nodeId && + $connection.endHandle?.type === type && + $connection.endHandle?.handleId === handleId; + $: valid = connectingTo && $connection.status === 'valid'; + // @todo implement connectablestart, connectableend @@ -141,6 +152,11 @@ The Handle component is the part of a node that can be used to connect nodes. 'nodrag', 'nopan', position, + { + valid, + connectingto: connectingTo, + connectingfrom: connectingFrom + }, className ])} class:source={!isTarget} diff --git a/packages/system/src/xyhandle/XYHandle.ts b/packages/system/src/xyhandle/XYHandle.ts index 4ddb5313..4f99a97c 100644 --- a/packages/system/src/xyhandle/XYHandle.ts +++ b/packages/system/src/xyhandle/XYHandle.ts @@ -15,7 +15,7 @@ import { type ConnectionHandle, } from '../types'; -import { getClosestHandle, getConnectionStatus, getHandleLookup, getHandleType, resetRecentHandle } from './utils'; +import { getClosestHandle, getConnectionStatus, getHandleLookup, getHandleType } from './utils'; export type OnPointerDownParams = { autoPanOnConnect: boolean; @@ -107,7 +107,6 @@ function onPointerDown( return; } - let prevActiveHandle: Element; let connectionPosition = getEventPosition(event, containerBounds); let autoPanStarted = false; let connection: Connection | null = null; @@ -194,18 +193,6 @@ function onPointerDown( connectionStatus: getConnectionStatus(!!closestHandle, isValid), connectionEndHandle: result.endHandle, }); - - if (!closestHandle && !isValid && !handleDomNode) { - return resetRecentHandle(prevActiveHandle, lib); - } - - if (connection?.source !== connection?.target && handleDomNode) { - resetRecentHandle(prevActiveHandle, lib); - prevActiveHandle = handleDomNode; - handleDomNode.classList.add('connecting', `${lib}-flow__handle-connecting`); - handleDomNode.classList.toggle('valid', isValid); - handleDomNode.classList.toggle(`${lib}-flow__handle-valid`, isValid); - } } function onPointerUp(event: MouseEvent | TouchEvent) { @@ -221,7 +208,6 @@ function onPointerDown( onEdgeUpdateEnd?.(event); } - resetRecentHandle(prevActiveHandle, lib); cancelConnection(); cancelAnimationFrame(autoPanId); autoPanStarted = false; diff --git a/packages/system/src/xyhandle/utils.ts b/packages/system/src/xyhandle/utils.ts index c10356b1..8c82f6e3 100644 --- a/packages/system/src/xyhandle/utils.ts +++ b/packages/system/src/xyhandle/utils.ts @@ -101,10 +101,6 @@ export function getHandleType( return null; } -export function resetRecentHandle(handleDomNode: Element, lib: string): void { - handleDomNode?.classList.remove('valid', 'connecting', `${lib}-flow__handle-valid`, `${lib}-flow__handle-connecting`); -} - export function getConnectionStatus(isInsideConnectionRadius: boolean, isHandleValid: boolean) { let connectionStatus = null;