diff --git a/libs/shared/lib/schema/panel/Schema.tsx b/libs/shared/lib/schema/panel/Schema.tsx index 07049c2bc8c9e2869ce74d073fb7523e203f060d..96e48a22a525ecd1bc6f285b1a26645ad200c0dc 100644 --- a/libs/shared/lib/schema/panel/Schema.tsx +++ b/libs/shared/lib/schema/panel/Schema.tsx @@ -54,8 +54,6 @@ export const Schema = (props: Props) => { const [hasLayoutBeenRun, setHasLayoutBeenRun] = useState(false); // Time threshold for distinguishing between a click and a drag - const mouseClickThreshold = 200; - const mouseDownTimestampRef = useRef<number | null>(null); const isPillClicked = useRef<boolean>(false); const reactFlowInstanceRef = useRef<ReactFlowInstance | null>(null); @@ -204,52 +202,28 @@ export const Schema = (props: Props) => { }, [graphStats]); const handleOnClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => { - const holdDownTime = event.timeStamp - (mouseDownTimestampRef.current || 0); - if (holdDownTime < mouseClickThreshold && isPillClicked.current === false) { - // Handle click on stage + const target = event.target as HTMLElement; + const clickedOutsideNode = target.classList.contains('react-flow__pane'); - setNodes((nds) => - nds.map((node) => ({ - ...node, - data: { - ...node.data, - tooltipClose: true, - }, - })), - ); - - setEdges((edg) => - edg.map((edge) => ({ - ...edge, - data: { - ...edge.data, - tooltipClose: true, - }, - })), - ); - - isPillClicked.current = false; - } else { - setNodes((nds) => - nds.map((node) => ({ - ...node, - data: { - ...node.data, - tooltipClose: false, - }, - })), - ); + setNodes((nds) => + nds.map((node) => ({ + ...node, + data: { + ...node.data, + tooltipClose: clickedOutsideNode, + }, + })), + ); - setEdges((edg) => - edg.map((edge) => ({ - ...edge, - data: { - ...edge.data, - tooltipClose: false, - }, - })), - ); - } + setEdges((edg) => + edg.map((edge) => ({ + ...edge, + data: { + ...edge.data, + tooltipClose: clickedOutsideNode, + }, + })), + ); }; return ( @@ -333,10 +307,6 @@ export const Schema = (props: Props) => { <div className="schema-panel w-full h-full flex flex-col justify-between" ref={reactFlowRef} - onMouseUpCapture={(event) => { - // this only fires when a pill is cliced, not in background - isPillClicked.current = true; - }} > {nodes.length === 0 ? ( <p className="m-3 text-xl font-bold">No Elements</p> @@ -352,11 +322,7 @@ export const Schema = (props: Props) => { connectionLineComponent={ConnectionDragLine} onNodesChange={onNodesChange} onEdgesChange={onEdgesChange} - onMouseDownCapture={(event) => { - mouseDownTimestampRef.current = event.timeStamp; - dispatch(resultSetFocus({ focusType: 'schema' })); - isPillClicked.current = false; - }} + onMouseDownCapture={() => dispatch(resultSetFocus({ focusType: 'schema' }))} nodes={nodes} edges={edges} onInit={(reactFlowInstance) => {