diff --git a/examples/react/src/examples/CustomNode/index.tsx b/examples/react/src/examples/CustomNode/index.tsx index 772d4ddd..32bf34a0 100644 --- a/examples/react/src/examples/CustomNode/index.tsx +++ b/examples/react/src/examples/CustomNode/index.tsx @@ -16,6 +16,7 @@ import { OnNodesChange, OnConnect, OnBeforeDelete, + BuiltInNode, } from '@xyflow/react'; import ColorSelectorNode from './ColorSelectorNode'; @@ -24,7 +25,7 @@ export type ColorSelectorNode = Node< { color: string; onChange: (event: ChangeEvent) => void }, 'selectorNode' >; -export type MyNode = Node | ColorSelectorNode; +export type MyNode = BuiltInNode | ColorSelectorNode; const onInit: OnInit = (reactFlowInstance) => { console.log('flow loaded:', reactFlowInstance); @@ -61,7 +62,7 @@ const CustomNodeFlow = () => { const onChange = (event: ChangeEvent) => { setNodes((nds) => nds.map((node) => { - if (node.id !== '2') { + if (node.id !== '2' || node.type !== 'selectorNode') { return node; } @@ -164,7 +165,7 @@ const CustomNodeFlow = () => { maxZoom={2} onBeforeDelete={onBeforeDelete} > - nodeStrokeColor={(n: MyNode): string => { if (n.type === 'input') return '#0041d0'; if (n.type === 'selectorNode') return bgColor; diff --git a/examples/react/src/examples/UseNodesData/index.tsx b/examples/react/src/examples/UseNodesData/index.tsx index d99ddb43..b9bc68f1 100644 --- a/examples/react/src/examples/UseNodesData/index.tsx +++ b/examples/react/src/examples/UseNodesData/index.tsx @@ -18,7 +18,7 @@ import UppercaseNode from './UppercaseNode'; export type TextNode = Node<{ text: string }, 'text'>; export type ResultNode = Node<{}, 'result'>; export type UppercaseNode = Node<{}, 'uppercase'>; -export type MyNode = Node | TextNode | ResultNode | UppercaseNode; +export type MyNode = TextNode | ResultNode | UppercaseNode; const nodeTypes = { text: TextNode, diff --git a/packages/react/src/additional-components/MiniMap/MiniMap.tsx b/packages/react/src/additional-components/MiniMap/MiniMap.tsx index cd3f64ae..60caca1b 100644 --- a/packages/react/src/additional-components/MiniMap/MiniMap.tsx +++ b/packages/react/src/additional-components/MiniMap/MiniMap.tsx @@ -7,7 +7,7 @@ import { getNodesBounds, getBoundsOfRects, XYMinimap, type Rect, type XYMinimapI import { useStore, useStoreApi } from '../../hooks/useStore'; import { Panel } from '../../components/Panel'; -import type { ReactFlowState } from '../../types'; +import type { ReactFlowState, Node } from '../../types'; import MiniMapNodes from './MiniMapNodes'; import type { MiniMapProps } from './types'; @@ -38,7 +38,7 @@ const selector = (s: ReactFlowState) => { const ARIA_LABEL_KEY = 'react-flow__minimap-desc'; -function MiniMapComponent({ +function MiniMapComponent({ style, className, nodeStrokeColor, @@ -61,7 +61,7 @@ function MiniMapComponent({ inversePan, zoomStep = 10, offsetScale = 5, -}: MiniMapProps) { +}: MiniMapProps) { const store = useStoreApi(); const svg = useRef(null); const { boundingRect, viewBB, rfId, panZoom, translateExtent, flowWidth, flowHeight } = useStore(selector, shallow); @@ -119,7 +119,7 @@ function MiniMapComponent({ const onSvgNodeClick = onNodeClick ? useCallback((event: MouseEvent, nodeId: string) => { - const node = store.getState().nodeLookup.get(nodeId)!; + const node = store.getState().nodeLookup.get(nodeId)! as NodeType; onNodeClick(event, node); }, []) : undefined; @@ -149,7 +149,7 @@ function MiniMapComponent({ onClick={onSvgClick} > {ariaLabel && {ariaLabel}} - onClick={onSvgNodeClick} nodeColor={nodeColor} nodeStrokeColor={nodeStrokeColor} @@ -174,4 +174,4 @@ function MiniMapComponent({ MiniMapComponent.displayName = 'MiniMap'; -export const MiniMap = memo(MiniMapComponent); +export const MiniMap = memo(MiniMapComponent) as typeof MiniMapComponent; diff --git a/packages/react/src/additional-components/MiniMap/MiniMapNodes.tsx b/packages/react/src/additional-components/MiniMap/MiniMapNodes.tsx index 63851aad..0dfb8fff 100644 --- a/packages/react/src/additional-components/MiniMap/MiniMapNodes.tsx +++ b/packages/react/src/additional-components/MiniMap/MiniMapNodes.tsx @@ -6,16 +6,17 @@ import { shallow } from 'zustand/shallow'; import { useStore } from '../../hooks/useStore'; import { MiniMapNode } from './MiniMapNode'; -import type { ReactFlowState } from '../../types'; +import type { ReactFlowState, Node } from '../../types'; import type { MiniMapNodes as MiniMapNodesProps, GetMiniMapNodeAttribute, MiniMapNodeProps } from './types'; declare const window: any; const selector = (s: ReactFlowState) => s.nodeOrigin; const selectorNodeIds = (s: ReactFlowState) => s.nodes.map((node) => node.id); -const getAttrFunction = (func: any): GetMiniMapNodeAttribute => (func instanceof Function ? func : () => func); +const getAttrFunction = (func: any): GetMiniMapNodeAttribute => + func instanceof Function ? func : () => func; -function MiniMapNodes({ +function MiniMapNodes({ nodeStrokeColor, nodeColor, nodeClassName = '', @@ -25,12 +26,12 @@ function MiniMapNodes({ // a component properly. nodeComponent: NodeComponent = MiniMapNode, onClick, -}: MiniMapNodesProps) { +}: MiniMapNodesProps) { const nodeIds = useStore(selectorNodeIds, shallow); const nodeOrigin = useStore(selector); - const nodeColorFunc = getAttrFunction(nodeColor); - const nodeStrokeColorFunc = getAttrFunction(nodeStrokeColor); - const nodeClassNameFunc = getAttrFunction(nodeClassName); + const nodeColorFunc = getAttrFunction(nodeColor); + const nodeStrokeColorFunc = getAttrFunction(nodeStrokeColor); + const nodeClassNameFunc = getAttrFunction(nodeClassName); const shapeRendering = typeof window === 'undefined' || !!window.chrome ? 'crispEdges' : 'geometricPrecision'; @@ -42,7 +43,7 @@ function MiniMapNodes({ // minimize the cost of updates when individual nodes change. // // For more details, see a similar commit in `NodeRenderer/index.tsx`. - key={nodeId} id={nodeId} nodeOrigin={nodeOrigin} @@ -60,7 +61,7 @@ function MiniMapNodes({ ); } -const NodeComponentWrapper = memo(function NodeComponentWrapper({ +function NodeComponentWrapperInner({ id, nodeOrigin, nodeColorFunc, @@ -74,9 +75,9 @@ const NodeComponentWrapper = memo(function NodeComponentWrapper({ }: { id: string; nodeOrigin: NodeOrigin; - nodeColorFunc: GetMiniMapNodeAttribute; - nodeStrokeColorFunc: GetMiniMapNodeAttribute; - nodeClassNameFunc: GetMiniMapNodeAttribute; + nodeColorFunc: GetMiniMapNodeAttribute; + nodeStrokeColorFunc: GetMiniMapNodeAttribute; + nodeClassNameFunc: GetMiniMapNodeAttribute; nodeBorderRadius: number; nodeStrokeWidth?: number; NodeComponent: ComponentType; @@ -84,7 +85,7 @@ const NodeComponentWrapper = memo(function NodeComponentWrapper({ shapeRendering: string; }) { const { node, x, y } = useStore((s) => { - const node = s.nodeLookup.get(id); + const node = s.nodeLookup.get(id) as NodeType; const { x, y } = getNodePositionWithOrigin(node, node?.origin || nodeOrigin).positionAbsolute; return { @@ -115,6 +116,8 @@ const NodeComponentWrapper = memo(function NodeComponentWrapper({ id={node.id} /> ); -}); +} -export default memo(MiniMapNodes); +const NodeComponentWrapper = memo(NodeComponentWrapperInner) as typeof NodeComponentWrapperInner; + +export default memo(MiniMapNodes) as typeof MiniMapNodes; diff --git a/packages/react/src/types/nodes.ts b/packages/react/src/types/nodes.ts index 9b28c78f..9ef7b9c3 100644 --- a/packages/react/src/types/nodes.ts +++ b/packages/react/src/types/nodes.ts @@ -48,3 +48,5 @@ export type NodeWrapperProps = { nodeOrigin: NodeOrigin; onError?: OnError; }; + +export type BuiltInNode = Node<{ label: string }, 'input' | 'output' | 'default'>;