refactor(packages): change package structure

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

@@ -0,0 +1,146 @@
+import { memo, useMemo, useEffect, useRef, type ComponentType } from 'react';
+import { shallow } from 'zustand/shallow';
+import { internalsSymbol, errorMessages, Position, clampPosition, getPositionWithOrigin } from '@xyflow/system';
+
+import useVisibleNodes from '../../hooks/useVisibleNodes';
+import { useStore } from '../../hooks/useStore';
+import { containerStyle } from '../../styles';
+import { GraphViewProps } from '../GraphView';
+import type { ReactFlowState, WrapNodeProps } from '../../types';
+
+type NodeRendererProps = Pick<
+  GraphViewProps,
+  | 'nodeTypes'
+  | 'onNodeClick'
+  | 'onNodeDoubleClick'
+  | 'onNodeMouseEnter'
+  | 'onNodeMouseMove'
+  | 'onNodeMouseLeave'
+  | 'onNodeContextMenu'
+  | 'onlyRenderVisibleElements'
+  | 'noPanClassName'
+  | 'noDragClassName'
+  | 'rfId'
+  | 'disableKeyboardA11y'
+  | 'nodeOrigin'
+  | 'nodeExtent'
+>;
+
+const selector = (s: ReactFlowState) => ({
+  nodesDraggable: s.nodesDraggable,
+  nodesConnectable: s.nodesConnectable,
+  nodesFocusable: s.nodesFocusable,
+  elementsSelectable: s.elementsSelectable,
+  updateNodeDimensions: s.updateNodeDimensions,
+  onError: s.onError,
+});
+
+const NodeRenderer = (props: NodeRendererProps) => {
+  const { nodesDraggable, nodesConnectable, nodesFocusable, elementsSelectable, updateNodeDimensions, onError } =
+    useStore(selector, shallow);
+  const nodes = useVisibleNodes(props.onlyRenderVisibleElements);
+  const resizeObserverRef = useRef<ResizeObserver>();
+
+  const resizeObserver = useMemo(() => {
+    if (typeof ResizeObserver === 'undefined') {
+      return null;
+    }
+
+    const observer = new ResizeObserver((entries: ResizeObserverEntry[]) => {
+      const updates = entries.map((entry: ResizeObserverEntry) => ({
+        id: entry.target.getAttribute('data-id') as string,
+        nodeElement: entry.target as HTMLDivElement,
+        forceUpdate: true,
+      }));
+
+      updateNodeDimensions(updates);
+    });
+
+    resizeObserverRef.current = observer;
+
+    return observer;
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      resizeObserverRef?.current?.disconnect();
+    };
+  }, []);
+
+  return (
+    <div className="react-flow__nodes" style={containerStyle}>
+      {nodes.map((node) => {
+        let nodeType = node.type || 'default';
+
+        if (!props.nodeTypes[nodeType]) {
+          onError?.('003', errorMessages['error003'](nodeType));
+
+          nodeType = 'default';
+        }
+
+        const NodeComponent = (props.nodeTypes[nodeType] || props.nodeTypes.default) as ComponentType<WrapNodeProps>;
+        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 clampedPosition = props.nodeExtent
+          ? clampPosition(node.positionAbsolute, props.nodeExtent)
+          : node.positionAbsolute;
+
+        const posX = clampedPosition?.x ?? 0;
+        const posY = clampedPosition?.y ?? 0;
+        const posOrigin = getPositionWithOrigin({
+          x: posX,
+          y: posY,
+          width: node.width ?? 0,
+          height: node.height ?? 0,
+          origin: node.origin || props.nodeOrigin,
+        });
+
+        return (
+          <NodeComponent
+            key={node.id}
+            id={node.id}
+            className={node.className}
+            style={node.style}
+            type={nodeType}
+            data={node.data}
+            sourcePosition={node.sourcePosition || Position.Bottom}
+            targetPosition={node.targetPosition || Position.Top}
+            hidden={node.hidden}
+            xPos={posX}
+            yPos={posY}
+            xPosOrigin={posOrigin.x}
+            yPosOrigin={posOrigin.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={resizeObserver}
+            dragHandle={node.dragHandle}
+            zIndex={node[internalsSymbol]?.z ?? 0}
+            isParent={!!node[internalsSymbol]?.isParent}
+            noDragClassName={props.noDragClassName}
+            noPanClassName={props.noPanClassName}
+            initialized={!!node.width && !!node.height}
+            rfId={props.rfId}
+            disableKeyboardA11y={props.disableKeyboardA11y}
+            ariaLabel={node.ariaLabel}
+          />
+        );
+      })}
+    </div>
+  );
+};
+
+NodeRenderer.displayName = 'NodeRenderer';
+
+export default memo(NodeRenderer);

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

@@ -0,0 +1,34 @@
+import type { ComponentType } from 'react';
+import type { NodeProps } from '@xyflow/system';
+
+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, NodeTypesWrapped } from '../../types';
+
+export type CreateNodeTypes = (nodeTypes: NodeTypes) => NodeTypesWrapped;
+
+export function createNodeTypes(nodeTypes: NodeTypes): NodeTypesWrapped {
+  const standardTypes: NodeTypesWrapped = {
+    input: wrapNode((nodeTypes.input || InputNode) as ComponentType<NodeProps>),
+    default: wrapNode((nodeTypes.default || DefaultNode) as ComponentType<NodeProps>),
+    output: wrapNode((nodeTypes.output || OutputNode) as ComponentType<NodeProps>),
+    group: wrapNode((nodeTypes.group || GroupNode) as ComponentType<NodeProps>),
+  };
+
+  const wrappedTypes = {} as NodeTypesWrapped;
+  const specialTypes: NodeTypesWrapped = Object.keys(nodeTypes)
+    .filter((k) => !['input', 'default', 'output', 'group'].includes(k))
+    .reduce((res, key) => {
+      res[key] = wrapNode((nodeTypes[key] || DefaultNode) as ComponentType<NodeProps>);
+
+      return res;
+    }, wrappedTypes);
+
+  return {
+    ...standardTypes,
+    ...specialTypes,
+  };
+}