diff --git a/src/components/Attribution/index.tsx b/src/components/Attribution/index.tsx index ed7c9f10..6e0e2995 100644 --- a/src/components/Attribution/index.tsx +++ b/src/components/Attribution/index.tsx @@ -8,14 +8,10 @@ type AttributionProps = { position?: AttributionPosition; }; +const accounts = ['paid-pro', 'paid-sponsor', 'paid-enterprise', 'paid-custom']; + function Attribution({ proOptions, position = 'bottom-right' }: AttributionProps) { - if ( - (proOptions?.account === 'paid-pro' || - proOptions?.account === 'paid-sponsor' || - proOptions?.account === 'paid-enterprise' || - proOptions?.account === 'paid-custom') && - proOptions?.hideAttribution - ) { + if (proOptions?.account && accounts.includes(proOptions?.account) && proOptions?.hideAttribution) { return null; } diff --git a/src/components/Handle/index.tsx b/src/components/Handle/index.tsx index 873af7c5..c9cc85fc 100644 --- a/src/components/Handle/index.tsx +++ b/src/components/Handle/index.tsx @@ -1,4 +1,4 @@ -import React, { memo, useContext, useCallback, HTMLAttributes, forwardRef } from 'react'; +import React, { memo, useContext, HTMLAttributes, forwardRef } from 'react'; import cc from 'classcat'; import shallow from 'zustand/shallow'; @@ -56,99 +56,71 @@ const Handle = forwardRef( const handleId = id || null; const isTarget = type === 'target'; - const onConnectExtended = useCallback( - (params: Connection) => { - const { defaultEdgeOptions } = store.getState(); + const onConnectExtended = (params: Connection) => { + const { defaultEdgeOptions } = store.getState(); - const edgeParams = { - ...defaultEdgeOptions, - ...params, - }; - if (hasDefaultEdges) { - const { edges } = store.getState(); - store.setState({ edges: addEdge(edgeParams, edges) }); - } + const edgeParams = { + ...defaultEdgeOptions, + ...params, + }; + if (hasDefaultEdges) { + const { edges } = store.getState(); + store.setState({ edges: addEdge(edgeParams, edges) }); + } - onConnectAction?.(edgeParams); - onConnect?.(edgeParams); - }, - [hasDefaultEdges, onConnectAction, onConnect] - ); + onConnectAction?.(edgeParams); + onConnect?.(edgeParams); + }; - const onMouseDownHandler = useCallback( - (event: React.MouseEvent) => { - if (event.button === 0) { - handleMouseDown( - event, - handleId, - nodeId, - store.setState, - onConnectExtended, - isTarget, - isValidConnection, - connectionMode, - undefined, - undefined, - onConnectStart, - onConnectStop, - onConnectEnd - ); - } - onMouseDown?.(event); - }, - [ - handleId, - nodeId, - onConnectExtended, - isTarget, - isValidConnection, + const onMouseDownHandler = (event: React.MouseEvent) => { + if (event.button === 0) { + handleMouseDown( + event, + handleId, + nodeId, + store.setState, + onConnectExtended, + isTarget, + isValidConnection, + connectionMode, + undefined, + undefined, + onConnectStart, + onConnectStop, + onConnectEnd + ); + } + onMouseDown?.(event); + }; + + const onClick = (event: React.MouseEvent) => { + if (!connectionStartHandle) { + onConnectStart?.(event, { nodeId, handleId, handleType: type }); + store.setState({ connectionStartHandle: { nodeId, type, handleId } }); + return; + } + + const doc = getHostForElement(event.target as HTMLElement); + const { connection, isValid } = checkElementBelowIsValid( + event as unknown as MouseEvent, connectionMode, - onConnectStart, - onConnectStop, - onConnectEnd, - ] - ); + connectionStartHandle.type === 'target', + connectionStartHandle.nodeId, + connectionStartHandle.handleId || null, + isValidConnection, + doc + ); - const onClick = useCallback( - (event: React.MouseEvent) => { - if (!connectionStartHandle) { - onConnectStart?.(event, { nodeId, handleId, handleType: type }); - store.setState({ connectionStartHandle: { nodeId, type, handleId } }); - } else { - const doc = getHostForElement(event.target as HTMLElement); - const { connection, isValid } = checkElementBelowIsValid( - event as unknown as MouseEvent, - connectionMode, - connectionStartHandle.type === 'target', - connectionStartHandle.nodeId, - connectionStartHandle.handleId || null, - isValidConnection, - doc - ); + onConnectStop?.(event as unknown as MouseEvent); - onConnectStop?.(event as unknown as MouseEvent); + if (isValid) { + onConnectExtended(connection); + } - if (isValid) { - onConnectExtended(connection); - } + onConnectEnd?.(event as unknown as MouseEvent); - onConnectEnd?.(event as unknown as MouseEvent); - - store.setState({ connectionStartHandle: null }); - } - }, - [ - connectionStartHandle, - onConnectStart, - onConnectExtended, - onConnectStop, - onConnectEnd, - isTarget, - nodeId, - handleId, - type, - ] - ); + store.setState({ connectionStartHandle: null }); + }; const handleClasses = cc([ 'react-flow__handle', diff --git a/src/contexts/NodeIdContext.ts b/src/contexts/NodeIdContext.ts index ba112d70..c43a1c3b 100644 --- a/src/contexts/NodeIdContext.ts +++ b/src/contexts/NodeIdContext.ts @@ -1,8 +1,6 @@ import { createContext } from 'react'; -type ContextProps = string | null; - -export const NodeIdContext = createContext>(null); +export const NodeIdContext = createContext(null); export const Provider = NodeIdContext.Provider; export const Consumer = NodeIdContext.Consumer; diff --git a/src/theme-default.css b/src/theme-default.css index b5bc257a..3df0b997 100644 --- a/src/theme-default.css +++ b/src/theme-default.css @@ -54,8 +54,7 @@ background: #fff; border-color: #1a192b; - &.selected, - &.selected:hover { + &.selected { box-shadow: 0 0 0 0.5px #1a192b; } @@ -71,16 +70,15 @@ &:hover { box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.08); } + + &.selected { + box-shadow: 0 0 0 0.5px #1a192b; + } } .react-flow__node-group { background: rgba(240, 240, 240, 0.25); border-color: #1a192b; - - &.selected, - &.selected:hover { - box-shadow: 0 0 0 0.5px #1a192b; - } } .react-flow__nodesselection-rect,