refactor(nodes): use NodeWrapper instead of wrapped node types

packages/react/src/components/Nodes/NodeWrapper.tsx

@@ -0,0 +1,263 @@
+import { useEffect, useRef, memo, type MouseEvent, type KeyboardEvent, ComponentType } from 'react';
+import cc from 'classcat';
+import {
+  clampPosition,
+  elementSelectionKeys,
+  errorMessages,
+  getPositionWithOrigin,
+  internalsSymbol,
+  isInputDOMNode,
+  NodeProps,
+  type XYPosition,
+} from '@xyflow/system';
+
+import { useStore, useStoreApi } from '../../hooks/useStore';
+import { Provider } from '../../contexts/NodeIdContext';
+import { ARIA_NODE_DESC_KEY } from '../A11yDescriptions';
+import useDrag from '../../hooks/useDrag';
+import useUpdateNodePositions from '../../hooks/useUpdateNodePositions';
+import { handleNodeClick } from './utils';
+import type { NodeWrapperProps } from '../../types';
+
+export const arrowKeyDiffs: Record<string, XYPosition> = {
+  ArrowUp: { x: 0, y: -1 },
+  ArrowDown: { x: 0, y: 1 },
+  ArrowLeft: { x: -1, y: 0 },
+  ArrowRight: { x: 1, y: 0 },
+};
+
+const NodeWrapper = ({
+  id,
+  onClick,
+  onMouseEnter,
+  onMouseMove,
+  onMouseLeave,
+  onContextMenu,
+  onDoubleClick,
+  nodesDraggable,
+  elementsSelectable,
+  nodesConnectable,
+  nodesFocusable,
+  resizeObserver,
+  noDragClassName,
+  noPanClassName,
+  disableKeyboardA11y,
+  rfId,
+  nodeTypes,
+  nodeExtent,
+  nodeOrigin,
+  onError,
+}: NodeWrapperProps) => {
+  const node = useStore((s) => s.nodeLookup.get(id)!);
+
+  let nodeType = node.type || 'default';
+
+  if (!nodeTypes[nodeType]) {
+    onError?.('003', errorMessages['error003'](nodeType));
+    nodeType = 'default';
+  }
+
+  const isDraggable = !!(node.draggable || (nodesDraggable && typeof node.draggable === 'undefined'));
+  const isSelectable = !!(node.selectable || (elementsSelectable && typeof node.selectable === 'undefined'));
+  const isConnectable = !!(node.connectable || (nodesConnectable && typeof node.connectable === 'undefined'));
+  const isFocusable = !!(node.focusable || (nodesFocusable && typeof node.focusable === 'undefined'));
+
+  const store = useStoreApi();
+  const nodeRef = useRef<HTMLDivElement>(null);
+  const prevSourcePosition = useRef(node.sourcePosition);
+  const prevTargetPosition = useRef(node.targetPosition);
+  const prevType = useRef(nodeType);
+
+  const updatePositions = useUpdateNodePositions();
+
+  useEffect(() => {
+    if (nodeRef.current && !node.hidden) {
+      const currNode = nodeRef.current;
+      resizeObserver?.observe(currNode);
+
+      return () => resizeObserver?.unobserve(currNode);
+    }
+  }, [node.hidden]);
+
+  useEffect(() => {
+    // when the user programmatically changes the source or handle position, we re-initialize the node
+    const typeChanged = prevType.current !== nodeType;
+    const sourcePosChanged = prevSourcePosition.current !== node.sourcePosition;
+    const targetPosChanged = prevTargetPosition.current !== node.targetPosition;
+
+    if (nodeRef.current && (typeChanged || sourcePosChanged || targetPosChanged)) {
+      if (typeChanged) {
+        prevType.current = nodeType;
+      }
+      if (sourcePosChanged) {
+        prevSourcePosition.current = node.sourcePosition;
+      }
+      if (targetPosChanged) {
+        prevTargetPosition.current = node.targetPosition;
+      }
+      store.getState().updateNodeDimensions(new Map([[id, { id, nodeElement: nodeRef.current, forceUpdate: true }]]));
+    }
+  }, [id, nodeType, node.sourcePosition, node.targetPosition]);
+
+  const dragging = useDrag({
+    nodeRef,
+    disabled: node.hidden || !isDraggable,
+    noDragClassName,
+    handleSelector: node.dragHandle,
+    nodeId: id,
+    isSelectable,
+  });
+
+  if (node.hidden) {
+    return null;
+  }
+
+  const NodeComponent = (nodeTypes[nodeType] || nodeTypes.default) as ComponentType<NodeProps>;
+  const width = node.width ?? undefined;
+  const height = node.height ?? undefined;
+  const computedWidth = node.computed?.width;
+  const computedHeight = node.computed?.height;
+  const positionAbsolute = nodeExtent
+    ? clampPosition(node.computed?.positionAbsolute, nodeExtent)
+    : node.computed?.positionAbsolute || { x: 0, y: 0 };
+  const positionAbsoluteOrigin = getPositionWithOrigin({
+    x: positionAbsolute.x,
+    y: positionAbsolute.y,
+    width: computedWidth ?? width ?? 0,
+    height: computedHeight ?? height ?? 0,
+    origin: node.origin || nodeOrigin,
+  });
+  const initialized = (!!computedWidth && !!computedHeight) || (!!width && !!height);
+  const zIndex = node[internalsSymbol]?.z ?? 0;
+  const isParent = !!node[internalsSymbol]?.isParent;
+  const hasPointerEvents = isSelectable || isDraggable || onClick || onMouseEnter || onMouseMove || onMouseLeave;
+
+  const onMouseEnterHandler =
+    onMouseEnter === undefined ? undefined : (event: MouseEvent) => onMouseEnter(event, { ...node });
+  const onMouseMoveHandler =
+    onMouseMove === undefined ? undefined : (event: MouseEvent) => onMouseMove(event, { ...node });
+  const onMouseLeaveHandler =
+    onMouseLeave === undefined ? undefined : (event: MouseEvent) => onMouseLeave(event, { ...node });
+  const onContextMenuHandler =
+    onContextMenu === undefined ? undefined : (event: MouseEvent) => onContextMenu(event, { ...node });
+  const onDoubleClickHandler =
+    onDoubleClick === undefined ? undefined : (event: MouseEvent) => onDoubleClick(event, { ...node });
+
+  const onSelectNodeHandler = (event: MouseEvent) => {
+    const { selectNodesOnDrag, nodeDragThreshold } = store.getState();
+
+    if (isSelectable && (!selectNodesOnDrag || !isDraggable || nodeDragThreshold > 0)) {
+      // this handler gets called by XYDrag on drag start when selectNodesOnDrag=true
+      // here we only need to call it when selectNodesOnDrag=false
+      handleNodeClick({
+        id,
+        store,
+        nodeRef,
+      });
+    }
+
+    if (onClick) {
+      onClick(event, { ...node });
+    }
+  };
+
+  const onKeyDown = (event: KeyboardEvent) => {
+    if (isInputDOMNode(event.nativeEvent)) {
+      return;
+    }
+
+    if (elementSelectionKeys.includes(event.key) && isSelectable) {
+      const unselect = event.key === 'Escape';
+
+      handleNodeClick({
+        id,
+        store,
+        unselect,
+        nodeRef,
+      });
+    } else if (
+      !disableKeyboardA11y &&
+      isDraggable &&
+      node.selected &&
+      Object.prototype.hasOwnProperty.call(arrowKeyDiffs, event.key)
+    ) {
+      store.setState({
+        ariaLiveMessage: `Moved selected node ${event.key
+          .replace('Arrow', '')
+          .toLowerCase()}. New position, x: ${~~positionAbsolute.x}, y: ${~~positionAbsolute.y}`,
+      });
+
+      updatePositions({
+        x: arrowKeyDiffs[event.key].x,
+        y: arrowKeyDiffs[event.key].y,
+        isShiftPressed: event.shiftKey,
+      });
+    }
+  };
+
+  return (
+    <div
+      className={cc([
+        'react-flow__node',
+        `react-flow__node-${nodeType}`,
+        {
+          // this is overwritable by passing `nopan` as a class name
+          [noPanClassName]: isDraggable,
+        },
+        node.className,
+        {
+          selected: node.selected,
+          selectable: isSelectable,
+          parent: isParent,
+          dragging,
+        },
+      ])}
+      ref={nodeRef}
+      style={{
+        zIndex,
+        transform: `translate(${positionAbsoluteOrigin.x}px,${positionAbsoluteOrigin.y}px)`,
+        pointerEvents: hasPointerEvents ? 'all' : 'none',
+        visibility: initialized ? 'visible' : 'hidden',
+        width,
+        height,
+        ...node.style,
+      }}
+      data-id={id}
+      data-testid={`rf__node-${id}`}
+      onMouseEnter={onMouseEnterHandler}
+      onMouseMove={onMouseMoveHandler}
+      onMouseLeave={onMouseLeaveHandler}
+      onContextMenu={onContextMenuHandler}
+      onClick={onSelectNodeHandler}
+      onDoubleClick={onDoubleClickHandler}
+      onKeyDown={isFocusable ? onKeyDown : undefined}
+      tabIndex={isFocusable ? 0 : undefined}
+      role={isFocusable ? 'button' : undefined}
+      aria-describedby={disableKeyboardA11y ? undefined : `${ARIA_NODE_DESC_KEY}-${rfId}`}
+      aria-label={node.ariaLabel}
+    >
+      <Provider value={id}>
+        <NodeComponent
+          id={id}
+          data={node.data}
+          type={nodeType}
+          width={computedWidth}
+          height={computedHeight}
+          positionAbsoluteX={positionAbsolute.x}
+          positionAbsoluteY={positionAbsolute.y}
+          selected={node.selected}
+          isConnectable={isConnectable}
+          sourcePosition={node.sourcePosition}
+          targetPosition={node.targetPosition}
+          dragging={dragging}
+          dragHandle={node.dragHandle}
+          zIndex={zIndex}
+        />
+      </Provider>
+    </div>
+  );
+};
+
+NodeWrapper.displayName = 'NodeWrapper';
+
+export default memo(NodeWrapper);

packages/react/src/components/Nodes/utils.ts

@@ -1,22 +1,9 @@
-import type { MouseEvent, RefObject } from 'react';
+import type { RefObject } from 'react';
 import type { StoreApi } from 'zustand';
 
-import type { Node, ReactFlowState } from '../../types';
+import type { ReactFlowState } from '../../types';
 import { errorMessages } from '@xyflow/system';
 
-export function getMouseHandler(
-  id: string,
-  getState: StoreApi<ReactFlowState>['getState'],
-  handler?: (event: MouseEvent, node: Node) => void
-) {
-  return handler === undefined
-    ? handler
-    : (event: MouseEvent) => {
-        const node = getState().nodeLookup.get(id)!;
-        handler(event, { ...node });
-      };
-}
-
 // this handler is called by
 // 1. the click handler when node is not draggable or selectNodesOnDrag = false
 // or

packages/react/src/components/Nodes/wrapNode.tsx

@@ -1,232 +0,0 @@
-import { useEffect, useRef, memo, type ComponentType, type MouseEvent, type KeyboardEvent } from 'react';
-import cc from 'classcat';
-import { elementSelectionKeys, isInputDOMNode, type NodeProps, type XYPosition } from '@xyflow/system';
-
-import { useStoreApi } from '../../hooks/useStore';
-import { Provider } from '../../contexts/NodeIdContext';
-import { ARIA_NODE_DESC_KEY } from '../A11yDescriptions';
-import useDrag from '../../hooks/useDrag';
-import useUpdateNodePositions from '../../hooks/useUpdateNodePositions';
-import { getMouseHandler, handleNodeClick } from './utils';
-import type { WrapNodeProps } from '../../types';
-
-export const arrowKeyDiffs: Record<string, XYPosition> = {
-  ArrowUp: { x: 0, y: -1 },
-  ArrowDown: { x: 0, y: 1 },
-  ArrowLeft: { x: -1, y: 0 },
-  ArrowRight: { x: 1, y: 0 },
-};
-
-export default (NodeComponent: ComponentType<NodeProps>) => {
-  const NodeWrapper = ({
-    id,
-    type,
-    data,
-    xPosOrigin,
-    yPosOrigin,
-    positionAbsoluteX,
-    positionAbsoluteY,
-    selected,
-    onClick,
-    onMouseEnter,
-    onMouseMove,
-    onMouseLeave,
-    onContextMenu,
-    onDoubleClick,
-    style,
-    className,
-    isDraggable,
-    isSelectable,
-    isConnectable,
-    isFocusable,
-    sourcePosition,
-    targetPosition,
-    hidden,
-    resizeObserver,
-    dragHandle,
-    zIndex,
-    isParent,
-    noDragClassName,
-    noPanClassName,
-    initialized,
-    disableKeyboardA11y,
-    ariaLabel,
-    rfId,
-    width,
-    height,
-  }: WrapNodeProps) => {
-    const store = useStoreApi();
-    const nodeRef = useRef<HTMLDivElement>(null);
-    const prevSourcePosition = useRef(sourcePosition);
-    const prevTargetPosition = useRef(targetPosition);
-    const prevType = useRef(type);
-    const hasPointerEvents = isSelectable || isDraggable || onClick || onMouseEnter || onMouseMove || onMouseLeave;
-    const updatePositions = useUpdateNodePositions();
-
-    const onMouseEnterHandler = getMouseHandler(id, store.getState, onMouseEnter);
-    const onMouseMoveHandler = getMouseHandler(id, store.getState, onMouseMove);
-    const onMouseLeaveHandler = getMouseHandler(id, store.getState, onMouseLeave);
-    const onContextMenuHandler = getMouseHandler(id, store.getState, onContextMenu);
-    const onDoubleClickHandler = getMouseHandler(id, store.getState, onDoubleClick);
-    const onSelectNodeHandler = (event: MouseEvent) => {
-      const { selectNodesOnDrag, nodeDragThreshold } = store.getState();
-
-      if (isSelectable && (!selectNodesOnDrag || !isDraggable || nodeDragThreshold > 0)) {
-        // this handler gets called by XYDrag on drag start when selectNodesOnDrag=true
-        // here we only need to call it when selectNodesOnDrag=false
-        handleNodeClick({
-          id,
-          store,
-          nodeRef,
-        });
-      }
-
-      if (onClick) {
-        const node = store.getState().nodes.find((n) => n.id === id)!;
-        onClick(event, { ...node });
-      }
-    };
-
-    const onKeyDown = (event: KeyboardEvent) => {
-      if (isInputDOMNode(event.nativeEvent)) {
-        return;
-      }
-
-      if (elementSelectionKeys.includes(event.key) && isSelectable) {
-        const unselect = event.key === 'Escape';
-
-        handleNodeClick({
-          id,
-          store,
-          unselect,
-          nodeRef,
-        });
-      } else if (
-        !disableKeyboardA11y &&
-        isDraggable &&
-        selected &&
-        Object.prototype.hasOwnProperty.call(arrowKeyDiffs, event.key)
-      ) {
-        store.setState({
-          ariaLiveMessage: `Moved selected node ${event.key
-            .replace('Arrow', '')
-            .toLowerCase()}. New position, x: ${~~positionAbsoluteX}, y: ${~~positionAbsoluteY}`,
-        });
-
-        updatePositions({
-          x: arrowKeyDiffs[event.key].x,
-          y: arrowKeyDiffs[event.key].y,
-          isShiftPressed: event.shiftKey,
-        });
-      }
-    };
-
-    useEffect(() => {
-      if (nodeRef.current && !hidden) {
-        const currNode = nodeRef.current;
-        resizeObserver?.observe(currNode);
-
-        return () => resizeObserver?.unobserve(currNode);
-      }
-    }, [hidden]);
-
-    useEffect(() => {
-      // when the user programmatically changes the source or handle position, we re-initialize the node
-      const typeChanged = prevType.current !== type;
-      const sourcePosChanged = prevSourcePosition.current !== sourcePosition;
-      const targetPosChanged = prevTargetPosition.current !== targetPosition;
-
-      if (nodeRef.current && (typeChanged || sourcePosChanged || targetPosChanged)) {
-        if (typeChanged) {
-          prevType.current = type;
-        }
-        if (sourcePosChanged) {
-          prevSourcePosition.current = sourcePosition;
-        }
-        if (targetPosChanged) {
-          prevTargetPosition.current = targetPosition;
-        }
-        store.getState().updateNodeDimensions(new Map([[id, { id, nodeElement: nodeRef.current, forceUpdate: true }]]));
-      }
-    }, [id, type, sourcePosition, targetPosition]);
-
-    const dragging = useDrag({
-      nodeRef,
-      disabled: hidden || !isDraggable,
-      noDragClassName,
-      handleSelector: dragHandle,
-      nodeId: id,
-      isSelectable,
-    });
-
-    if (hidden) {
-      return null;
-    }
-
-    return (
-      <div
-        className={cc([
-          'react-flow__node',
-          `react-flow__node-${type}`,
-          {
-            // this is overwritable by passing `nopan` as a class name
-            [noPanClassName]: isDraggable,
-          },
-          className,
-          {
-            selected,
-            selectable: isSelectable,
-            parent: isParent,
-            dragging,
-          },
-        ])}
-        ref={nodeRef}
-        style={{
-          zIndex,
-          transform: `translate(${xPosOrigin}px,${yPosOrigin}px)`,
-          pointerEvents: hasPointerEvents ? 'all' : 'none',
-          visibility: initialized ? 'visible' : 'hidden',
-          width,
-          height,
-          ...style,
-        }}
-        data-id={id}
-        data-testid={`rf__node-${id}`}
-        onMouseEnter={onMouseEnterHandler}
-        onMouseMove={onMouseMoveHandler}
-        onMouseLeave={onMouseLeaveHandler}
-        onContextMenu={onContextMenuHandler}
-        onClick={onSelectNodeHandler}
-        onDoubleClick={onDoubleClickHandler}
-        onKeyDown={isFocusable ? onKeyDown : undefined}
-        tabIndex={isFocusable ? 0 : undefined}
-        role={isFocusable ? 'button' : undefined}
-        aria-describedby={disableKeyboardA11y ? undefined : `${ARIA_NODE_DESC_KEY}-${rfId}`}
-        aria-label={ariaLabel}
-      >
-        <Provider value={id}>
-          <NodeComponent
-            id={id}
-            data={data}
-            type={type}
-            width={width}
-            height={height}
-            positionAbsoluteX={positionAbsoluteX}
-            positionAbsoluteY={positionAbsoluteY}
-            selected={selected}
-            isConnectable={isConnectable}
-            sourcePosition={sourcePosition}
-            targetPosition={targetPosition}
-            dragging={dragging}
-            dragHandle={dragHandle}
-            zIndex={zIndex}
-          />
-        </Provider>
-      </div>
-    );
-  };
-
-  NodeWrapper.displayName = 'NodeWrapper';
-
-  return memo(NodeWrapper);
-};

packages/react/src/container/NodeRenderer/NodeComponentWrapper.tsx

@@ -1,104 +0,0 @@
-import { memo, type ComponentType } from 'react';
-import { internalsSymbol, errorMessages, Position, clampPosition, getPositionWithOrigin } from '@xyflow/system';
-
-import { useStore } from '../../hooks/useStore';
-import type { ReactFlowState, WrapNodeProps } from '../../types';
-import { NodeRendererProps } from '.';
-
-function NodeComponentWrapper(props: {
-  id: string;
-  nodeExtent: NodeRendererProps['nodeExtent'];
-  nodeTypes: NodeRendererProps['nodeTypes'];
-  nodeOrigin: NodeRendererProps['nodeOrigin'];
-  onNodeClick: NodeRendererProps['onNodeClick'];
-  onNodeMouseEnter: NodeRendererProps['onNodeMouseEnter'];
-  onNodeMouseMove: NodeRendererProps['onNodeMouseMove'];
-  onNodeMouseLeave: NodeRendererProps['onNodeMouseLeave'];
-  onNodeContextMenu: NodeRendererProps['onNodeContextMenu'];
-  onNodeDoubleClick: NodeRendererProps['onNodeDoubleClick'];
-  noDragClassName: NodeRendererProps['noDragClassName'];
-  noPanClassName: NodeRendererProps['noPanClassName'];
-  rfId: NodeRendererProps['rfId'];
-  disableKeyboardA11y: NodeRendererProps['disableKeyboardA11y'];
-  resizeObserver: ResizeObserver | null;
-  nodesDraggable: boolean;
-  nodesConnectable: boolean;
-  nodesFocusable: boolean;
-  elementsSelectable: boolean;
-  onError: ReactFlowState['onError'];
-}) {
-  const node = useStore((s) => s.nodeLookup.get(props.id));
-  if (!node) return null;
-
-  let nodeType = node.type || 'default';
-
-  if (!props.nodeTypes[nodeType]) {
-    props.onError?.('003', errorMessages['error003'](nodeType));
-
-    nodeType = 'default';
-  }
-
-  const NodeComponent = (props.nodeTypes[nodeType] || props.nodeTypes.default) as ComponentType<WrapNodeProps>;
-  const isDraggable = !!(node.draggable || (props.nodesDraggable && typeof node.draggable === 'undefined'));
-  const isSelectable = !!(node.selectable || (props.elementsSelectable && typeof node.selectable === 'undefined'));
-  const isConnectable = !!(node.connectable || (props.nodesConnectable && typeof node.connectable === 'undefined'));
-  const isFocusable = !!(node.focusable || (props.nodesFocusable && typeof node.focusable === 'undefined'));
-
-  const absolutePositionClamped = props.nodeExtent
-    ? clampPosition(node.computed?.positionAbsolute, props.nodeExtent)
-    : node.computed?.positionAbsolute || { x: 0, y: 0 };
-
-  const posOrigin = getPositionWithOrigin({
-    x: absolutePositionClamped.x,
-    y: absolutePositionClamped.y,
-    width: node.computed?.width ?? node.width ?? 0,
-    height: node.computed?.height ?? node.height ?? 0,
-    origin: node.origin || props.nodeOrigin,
-  });
-  const initialized = (!!node.computed?.width && !!node.computed?.height) || (!!node.width && !!node.height);
-
-  return (
-    <NodeComponent
-      key={node.id}
-      id={node.id}
-      className={node.className}
-      style={node.style}
-      width={node.width ?? undefined}
-      height={node.height ?? undefined}
-      type={nodeType}
-      data={node.data}
-      sourcePosition={node.sourcePosition || Position.Bottom}
-      targetPosition={node.targetPosition || Position.Top}
-      hidden={node.hidden}
-      xPosOrigin={posOrigin.x}
-      yPosOrigin={posOrigin.y}
-      positionAbsoluteX={absolutePositionClamped.x}
-      positionAbsoluteY={absolutePositionClamped.y}
-      onClick={props.onNodeClick}
-      onMouseEnter={props.onNodeMouseEnter}
-      onMouseMove={props.onNodeMouseMove}
-      onMouseLeave={props.onNodeMouseLeave}
-      onContextMenu={props.onNodeContextMenu}
-      onDoubleClick={props.onNodeDoubleClick}
-      selected={!!node.selected}
-      isDraggable={isDraggable}
-      isSelectable={isSelectable}
-      isConnectable={isConnectable}
-      isFocusable={isFocusable}
-      resizeObserver={props.resizeObserver}
-      dragHandle={node.dragHandle}
-      zIndex={node[internalsSymbol]?.z ?? 0}
-      isParent={!!node[internalsSymbol]?.isParent}
-      noDragClassName={props.noDragClassName}
-      noPanClassName={props.noPanClassName}
-      initialized={initialized}
-      rfId={props.rfId}
-      disableKeyboardA11y={props.disableKeyboardA11y}
-      ariaLabel={node.ariaLabel}
-    />
-  );
-}
-
-NodeComponentWrapper.displayName = 'NodeComponentWrapper';
-
-export default memo(NodeComponentWrapper);

packages/react/src/container/NodeRenderer/index.tsx

@@ -5,9 +5,9 @@ import useVisibleNodesIds from '../../hooks/useVisibleNodes';
 import { useStore } from '../../hooks/useStore';
 import { containerStyle } from '../../styles/utils';
 import { GraphViewProps } from '../GraphView';
-import type { NodeTypesWrapped, ReactFlowState } from '../../types';
+import type { ReactFlowState } from '../../types';
-import NodeComponentWrapper from './NodeComponentWrapper';
 import useResizeObserver from './useResizeObserver';
+import NodeWrapper from '../../components/Nodes/NodeWrapper';
 
 export type NodeRendererProps = Pick<
   GraphViewProps,
@@ -24,9 +24,8 @@ export type NodeRendererProps = Pick<
   | 'disableKeyboardA11y'
   | 'nodeOrigin'
   | 'nodeExtent'
-> & {
+  | 'nodeTypes'
-  nodeTypes: NodeTypesWrapped;
+>;
-};
 
 const selector = (s: ReactFlowState) => ({
   nodesDraggable: s.nodesDraggable,
@@ -68,18 +67,18 @@ const NodeRenderer = (props: NodeRendererProps) => {
           //   moved into `NodeComponentWrapper`. This ensures they are
           //   memorized – so if `NodeRenderer` *has* to rerender, it only
           //   needs to regenerate the list of nodes, nothing else.
-          <NodeComponentWrapper
+          <NodeWrapper
             key={nodeId}
             id={nodeId}
             nodeTypes={props.nodeTypes}
             nodeExtent={props.nodeExtent}
             nodeOrigin={props.nodeOrigin}
-            onNodeClick={props.onNodeClick}
+            onClick={props.onNodeClick}
-            onNodeMouseEnter={props.onNodeMouseEnter}
+            onMouseEnter={props.onNodeMouseEnter}
-            onNodeMouseMove={props.onNodeMouseMove}
+            onMouseMove={props.onNodeMouseMove}
-            onNodeMouseLeave={props.onNodeMouseLeave}
+            onMouseLeave={props.onNodeMouseLeave}
-            onNodeContextMenu={props.onNodeContextMenu}
+            onContextMenu={props.onNodeContextMenu}
-            onNodeDoubleClick={props.onNodeDoubleClick}
+            onDoubleClick={props.onNodeDoubleClick}
             noDragClassName={props.noDragClassName}
             noPanClassName={props.noPanClassName}
             rfId={props.rfId}

packages/react/src/container/NodeRenderer/utils.ts

@@ -5,30 +5,28 @@ import DefaultNode from '../../components/Nodes/DefaultNode';
 import InputNode from '../../components/Nodes/InputNode';
 import OutputNode from '../../components/Nodes/OutputNode';
 import GroupNode from '../../components/Nodes/GroupNode';
-import wrapNode from '../../components/Nodes/wrapNode';
+import type { NodeTypes } from '../../types';
-import type { NodeTypes, NodeTypesWrapped } from '../../types';
 
-export type CreateNodeTypes = (nodeTypes: NodeTypes) => NodeTypesWrapped;
+export type CreateNodeTypes = (nodeTypes: NodeTypes) => NodeTypes;
 
-export function createNodeTypes(nodeTypes: NodeTypes): NodeTypesWrapped {
+export function createNodeTypes(nodeTypes: NodeTypes): NodeTypes {
-  const standardTypes: NodeTypesWrapped = {
+  const builtinTypes: NodeTypes = {
-    input: wrapNode((nodeTypes.input || InputNode) as ComponentType<NodeProps>),
+    input: (nodeTypes.input || InputNode) as ComponentType<NodeProps>,
-    default: wrapNode((nodeTypes.default || DefaultNode) as ComponentType<NodeProps>),
+    default: (nodeTypes.default || DefaultNode) as ComponentType<NodeProps>,
-    output: wrapNode((nodeTypes.output || OutputNode) as ComponentType<NodeProps>),
+    output: (nodeTypes.output || OutputNode) as ComponentType<NodeProps>,
-    group: wrapNode((nodeTypes.group || GroupNode) as ComponentType<NodeProps>),
+    group: (nodeTypes.group || GroupNode) as ComponentType<NodeProps>,
   };
 
-  const wrappedTypes = {} as NodeTypesWrapped;
+  const userProvidedTypes = Object.keys(nodeTypes)
-  const specialTypes: NodeTypesWrapped = Object.keys(nodeTypes)
     .filter((k) => !['input', 'default', 'output', 'group'].includes(k))
-    .reduce((res, key) => {
+    .reduce<NodeTypes>((res, key) => {
-      res[key] = wrapNode((nodeTypes[key] || DefaultNode) as ComponentType<NodeProps>);
+      res[key] = (nodeTypes[key] || DefaultNode) as ComponentType<NodeProps>;
 
       return res;
-    }, wrappedTypes);
+    }, {});
 
   return {
-    ...standardTypes,
+    ...builtinTypes,
-    ...specialTypes,
+    ...userProvidedTypes,
   };
 }

packages/react/src/types/nodes.ts

@@ -1,5 +1,6 @@
 import type { CSSProperties, MouseEvent as ReactMouseEvent } from 'react';
-import type { NodeBase } from '@xyflow/system';
+import type { CoordinateExtent, NodeBase, NodeOrigin, OnError } from '@xyflow/system';
+import { NodeTypes } from './general';
 
 export type Node<NodeData = any, NodeType extends string | undefined = string | undefined> = NodeBase<
   NodeData,
@@ -14,32 +15,25 @@ export type NodeMouseHandler = (event: ReactMouseEvent, node: Node) => void;
 export type NodeDragHandler = (event: ReactMouseEvent, node: Node, nodes: Node[]) => void;
 export type SelectionDragHandler = (event: ReactMouseEvent, nodes: Node[]) => void;
 
-export type WrapNodeProps<NodeData = any> = Pick<
+export type NodeWrapperProps = {
-  Node<NodeData>,
+  id: string;
-  'id' | 'data' | 'style' | 'className' | 'dragHandle' | 'sourcePosition' | 'targetPosition' | 'hidden' | 'ariaLabel'
+  nodesConnectable: boolean;
-> &
+  elementsSelectable: boolean;
-  Required<Pick<Node<NodeData>, 'selected' | 'type' | 'zIndex'>> & {
+  nodesDraggable: boolean;
-    isConnectable: boolean;
+  nodesFocusable: boolean;
-    xPosOrigin: number;
+  onClick?: NodeMouseHandler;
-    yPosOrigin: number;
+  onDoubleClick?: NodeMouseHandler;
-    positionAbsoluteX: number;
+  onMouseEnter?: NodeMouseHandler;
-    positionAbsoluteY: number;
+  onMouseMove?: NodeMouseHandler;
-    initialized: boolean;
+  onMouseLeave?: NodeMouseHandler;
-    isSelectable: boolean;
+  onContextMenu?: NodeMouseHandler;
-    isDraggable: boolean;
+  resizeObserver: ResizeObserver | null;
-    isFocusable: boolean;
+  noDragClassName: string;
-    onClick?: NodeMouseHandler;
+  noPanClassName: string;
-    onDoubleClick?: NodeMouseHandler;
+  rfId: string;
-    onMouseEnter?: NodeMouseHandler;
+  disableKeyboardA11y: boolean;
-    onMouseMove?: NodeMouseHandler;
+  nodeTypes: NodeTypes;
-    onMouseLeave?: NodeMouseHandler;
+  nodeExtent?: CoordinateExtent;
-    onContextMenu?: NodeMouseHandler;
+  nodeOrigin: NodeOrigin;
-    resizeObserver: ResizeObserver | null;
+  onError?: OnError;
-    isParent: boolean;
+};
-    noDragClassName: string;
-    noPanClassName: string;
-    rfId: string;
-    disableKeyboardA11y: boolean;
-    width?: number;
-    height?: number;
-  };