chore: setup monorepo using preconstruct

packages/core/src/components/Nodes/DefaultNode.tsx

@@ -0,0 +1,23 @@
+import React, { memo } from 'react';
+
+import Handle from '../../components/Handle';
+import { NodeProps, Position } from '../../types';
+
+const DefaultNode = ({
+  data,
+  isConnectable,
+  targetPosition = Position.Top,
+  sourcePosition = Position.Bottom,
+}: NodeProps) => {
+  return (
+    <>
+      <Handle type="target" position={targetPosition} isConnectable={isConnectable} />
+      {data?.label}
+      <Handle type="source" position={sourcePosition} isConnectable={isConnectable} />
+    </>
+  );
+};
+
+DefaultNode.displayName = 'DefaultNode';
+
+export default memo(DefaultNode);

packages/core/src/components/Nodes/GroupNode.tsx

@@ -0,0 +1,5 @@
+const GroupNode = () => null;
+
+GroupNode.displayName = 'GroupNode';
+
+export default GroupNode;

packages/core/src/components/Nodes/InputNode.tsx

@@ -0,0 +1,15 @@
+import React, { memo } from 'react';
+
+import Handle from '../../components/Handle';
+import { NodeProps, Position } from '../../types';
+
+const InputNode = ({ data, isConnectable, sourcePosition = Position.Bottom }: NodeProps) => (
+  <>
+    {data?.label}
+    <Handle type="source" position={sourcePosition} isConnectable={isConnectable} />
+  </>
+);
+
+InputNode.displayName = 'InputNode';
+
+export default memo(InputNode);

packages/core/src/components/Nodes/OutputNode.tsx

@@ -0,0 +1,15 @@
+import React, { memo } from 'react';
+
+import Handle from '../../components/Handle';
+import { NodeProps, Position } from '../../types';
+
+const OutputNode = ({ data, isConnectable, targetPosition = Position.Top }: NodeProps) => (
+  <>
+    <Handle type="target" position={targetPosition} isConnectable={isConnectable} />
+    {data?.label}
+  </>
+);
+
+OutputNode.displayName = 'OutputNode';
+
+export default memo(OutputNode);

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

@@ -0,0 +1,83 @@
+import { MouseEvent } from 'react';
+import { GetState, SetState } from 'zustand';
+
+import { HandleElement, Node, Position, ReactFlowState } from '../../types';
+import { getDimensions } from '../../utils';
+
+export const getHandleBounds = (nodeElement: HTMLDivElement, scale: number) => {
+  const bounds = nodeElement.getBoundingClientRect();
+
+  return {
+    source: getHandleBoundsByHandleType('.source', nodeElement, bounds, scale),
+    target: getHandleBoundsByHandleType('.target', nodeElement, bounds, scale),
+  };
+};
+
+export const getHandleBoundsByHandleType = (
+  selector: string,
+  nodeElement: HTMLDivElement,
+  parentBounds: DOMRect,
+  k: number
+): HandleElement[] | null => {
+  const handles = nodeElement.querySelectorAll(selector);
+
+  if (!handles || !handles.length) {
+    return null;
+  }
+
+  const handlesArray = Array.from(handles) as HTMLDivElement[];
+
+  return handlesArray.map((handle): HandleElement => {
+    const bounds = handle.getBoundingClientRect();
+    const dimensions = getDimensions(handle);
+    const handleId = handle.getAttribute('data-handleid');
+    const handlePosition = handle.getAttribute('data-handlepos') as unknown as Position;
+
+    return {
+      id: handleId,
+      position: handlePosition,
+      x: (bounds.left - parentBounds.left) / k,
+      y: (bounds.top - parentBounds.top) / k,
+      ...dimensions,
+    };
+  });
+};
+
+export function getMouseHandler(
+  id: string,
+  getState: GetState<ReactFlowState>,
+  handler?: (event: MouseEvent, node: Node) => void
+) {
+  return handler === undefined
+    ? handler
+    : (event: MouseEvent) => {
+        const node = getState().nodeInternals.get(id)!;
+        handler(event, { ...node });
+      };
+}
+
+// this handler is called by
+// 1. the click handler when node is not draggable or selectNodesOnDrag = false
+// or
+// 2. the on drag start handler when node is draggable and selectNodesOnDrag = true
+export function handleNodeClick({
+  id,
+  store,
+}: {
+  id: string;
+  store: {
+    getState: GetState<ReactFlowState>;
+    setState: SetState<ReactFlowState>;
+  };
+}) {
+  const { addSelectedNodes, unselectNodesAndEdges, multiSelectionActive, nodeInternals } = store.getState();
+  const node = nodeInternals.get(id)!;
+
+  store.setState({ nodesSelectionActive: false });
+
+  if (!node.selected) {
+    addSelectedNodes([id]);
+  } else if (node.selected && multiSelectionActive) {
+    unselectNodesAndEdges({ nodes: [node] });
+  }
+}

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

@@ -0,0 +1,172 @@
+import React, { useEffect, useRef, memo, ComponentType, MouseEvent } from 'react';
+import cc from 'classcat';
+
+import { useStore, useStoreApi } from '../../store';
+import { Provider } from '../../contexts/NodeIdContext';
+import { NodeProps, WrapNodeProps, ReactFlowState } from '../../types';
+import useDrag from '../../hooks/useDrag';
+import { getMouseHandler, handleNodeClick } from './utils';
+
+const selector = (s: ReactFlowState) => s.updateNodeDimensions;
+
+export default (NodeComponent: ComponentType<NodeProps>) => {
+  const NodeWrapper = ({
+    id,
+    type,
+    data,
+    xPos,
+    yPos,
+    selected,
+    onClick,
+    onMouseEnter,
+    onMouseMove,
+    onMouseLeave,
+    onContextMenu,
+    onDoubleClick,
+    onDragStart,
+    onDrag,
+    onDragStop,
+    style,
+    className,
+    isDraggable,
+    isSelectable,
+    isConnectable,
+    selectNodesOnDrag,
+    sourcePosition,
+    targetPosition,
+    hidden,
+    resizeObserver,
+    dragHandle,
+    zIndex,
+    isParent,
+    noPanClassName,
+    noDragClassName,
+    initialized,
+  }: WrapNodeProps) => {
+    const store = useStoreApi();
+    const updateNodeDimensions = useStore(selector);
+    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 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) => {
+      if (isSelectable && (!selectNodesOnDrag || !isDraggable)) {
+        // this handler gets called within the drag start event when selectNodesOnDrag=true
+        handleNodeClick({
+          id,
+          store,
+        });
+      }
+
+      if (onClick) {
+        const node = store.getState().nodeInternals.get(id)!;
+        onClick(event, { ...node });
+      }
+    };
+
+    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;
+        }
+        updateNodeDimensions([{ id, nodeElement: nodeRef.current, forceUpdate: true }]);
+      }
+    }, [id, type, sourcePosition, targetPosition]);
+
+    const dragging = useDrag({
+      onStart: onDragStart,
+      onDrag: onDrag,
+      onStop: onDragStop,
+      nodeRef,
+      disabled: hidden || !isDraggable,
+      noDragClassName,
+      handleSelector: dragHandle,
+      nodeId: id,
+      isSelectable,
+      selectNodesOnDrag,
+    });
+
+    if (hidden) {
+      return null;
+    }
+
+    return (
+      <div
+        className={cc([
+          'react-flow__node',
+          `react-flow__node-${type}`,
+          noPanClassName,
+          className,
+          {
+            selected,
+            selectable: isSelectable,
+            parent: isParent,
+          },
+        ])}
+        ref={nodeRef}
+        style={{
+          zIndex,
+          transform: `translate(${xPos}px,${yPos}px)`,
+          pointerEvents: hasPointerEvents ? 'all' : 'none',
+          visibility: initialized ? 'visible' : 'hidden',
+          ...style,
+        }}
+        onMouseEnter={onMouseEnterHandler}
+        onMouseMove={onMouseMoveHandler}
+        onMouseLeave={onMouseLeaveHandler}
+        onContextMenu={onContextMenuHandler}
+        onClick={onSelectNodeHandler}
+        onDoubleClick={onDoubleClickHandler}
+        data-id={id}
+      >
+        <Provider value={id}>
+          <NodeComponent
+            id={id}
+            data={data}
+            type={type}
+            xPos={xPos}
+            yPos={yPos}
+            selected={selected}
+            isConnectable={isConnectable}
+            sourcePosition={sourcePosition}
+            targetPosition={targetPosition}
+            dragging={dragging}
+            dragHandle={dragHandle}
+            zIndex={zIndex}
+          />
+        </Provider>
+      </div>
+    );
+  };
+
+  NodeWrapper.displayName = 'NodeWrapper';
+
+  return memo(NodeWrapper);
+};