chore: setup monorepo using preconstruct

2022-07-11 18:04:27 +02:00
parent a47f1c1382
commit 1bb32c8eb7
188 changed files with 2590 additions and 288 deletions
@@ -0,0 +1,237 @@
+import create from 'zustand';
+import createContext from 'zustand/context';
+
+import { clampPosition, getDimensions, internalsSymbol } from '../utils';
+import { applyNodeChanges } from '../utils/changes';
+import {
+  ReactFlowState,
+  Node,
+  Edge,
+  NodeDimensionUpdate,
+  CoordinateExtent,
+  NodeDimensionChange,
+  EdgeSelectionChange,
+  NodeSelectionChange,
+  NodePositionChange,
+  NodeDragItem,
+  UnselectNodesAndEdgesParams,
+} from '../types';
+import { getHandleBounds } from '../components/Nodes/utils';
+import { createSelectionChange, getSelectionChanges } from '../utils/changes';
+import { createNodeInternals, fitView, updateNodesAndEdgesSelections } from './utils';
+import initialState from './initialState';
+
+const { Provider, useStore, useStoreApi } = createContext<ReactFlowState>();
+
+const createStore = () =>
+  create<ReactFlowState>((set, get) => ({
+    ...initialState,
+    setNodes: (nodes: Node[]) => {
+      set({ nodeInternals: createNodeInternals(nodes, get().nodeInternals) });
+    },
+    setEdges: (edges: Edge[]) => {
+      const { defaultEdgeOptions = {} } = get();
+      set({ edges: edges.map((e) => ({ ...defaultEdgeOptions, ...e })) });
+    },
+    setDefaultNodesAndEdges: (nodes?: Node[], edges?: Edge[]) => {
+      const hasDefaultNodes = typeof nodes !== 'undefined';
+      const hasDefaultEdges = typeof edges !== 'undefined';
+
+      const nodeInternals = hasDefaultNodes ? createNodeInternals(nodes, new Map()) : new Map();
+      const nextEdges = hasDefaultEdges ? edges : [];
+
+      set({ nodeInternals, edges: nextEdges, hasDefaultNodes, hasDefaultEdges });
+    },
+    updateNodeDimensions: (updates: NodeDimensionUpdate[]) => {
+      const { onNodesChange, transform, nodeInternals, fitViewOnInit, fitViewOnInitDone, fitViewOnInitOptions } = get();
+
+      const changes: NodeDimensionChange[] = updates.reduce<NodeDimensionChange[]>((res, update) => {
+        const node = nodeInternals.get(update.id);
+
+        if (node) {
+          const dimensions = getDimensions(update.nodeElement);
+          const doUpdate = !!(
+            dimensions.width &&
+            dimensions.height &&
+            (node.width !== dimensions.width || node.height !== dimensions.height || update.forceUpdate)
+          );
+
+          if (doUpdate) {
+            const handleBounds = getHandleBounds(update.nodeElement, transform[2]);
+            nodeInternals.set(node.id, {
+              ...node,
+              [internalsSymbol]: {
+                ...node[internalsSymbol],
+                handleBounds,
+              },
+              ...dimensions,
+            });
+
+            res.push({
+              id: node.id,
+              type: 'dimensions',
+              dimensions,
+            });
+          }
+        }
+
+        return res;
+      }, []);
+
+      const nextFitViewOnInitDone =
+        fitViewOnInitDone ||
+        (fitViewOnInit && !fitViewOnInitDone && fitView(get, { initial: true, ...fitViewOnInitOptions }));
+      set({ nodeInternals: new Map(nodeInternals), fitViewOnInitDone: nextFitViewOnInitDone });
+
+      if (changes?.length > 0) {
+        onNodesChange?.(changes);
+      }
+    },
+    updateNodePositions: (nodeDragItems: NodeDragItem[], positionChanged = true, dragging = false) => {
+      const { onNodesChange, nodeInternals, hasDefaultNodes } = get();
+
+      if (hasDefaultNodes || onNodesChange) {
+        const changes = nodeDragItems.map((node) => {
+          const change: NodePositionChange = {
+            id: node.id,
+            type: 'position',
+            dragging,
+          };
+
+          if (positionChanged) {
+            change.positionAbsolute = node.position;
+            change.position = node.position;
+
+            if (node.parentNode) {
+              const parentNode = nodeInternals.get(node.parentNode);
+              change.position = {
+                x: change.position.x - (parentNode?.positionAbsolute?.x ?? 0),
+                y: change.position.y - (parentNode?.positionAbsolute?.y ?? 0),
+              };
+            }
+          }
+
+          return change;
+        });
+
+        if (changes?.length) {
+          if (hasDefaultNodes) {
+            const nodes = applyNodeChanges(changes, Array.from(nodeInternals.values()));
+            const nextNodeInternals = createNodeInternals(nodes, nodeInternals);
+            set({ nodeInternals: nextNodeInternals });
+          }
+
+          onNodesChange?.(changes);
+        }
+      }
+    },
+    addSelectedNodes: (selectedNodeIds: string[]) => {
+      const { multiSelectionActive, nodeInternals, edges } = get();
+      let changedNodes: NodeSelectionChange[];
+      let changedEdges: EdgeSelectionChange[] | null = null;
+
+      if (multiSelectionActive) {
+        changedNodes = selectedNodeIds.map((nodeId) => createSelectionChange(nodeId, true)) as NodeSelectionChange[];
+      } else {
+        changedNodes = getSelectionChanges(Array.from(nodeInternals.values()), selectedNodeIds);
+        changedEdges = getSelectionChanges(edges, []);
+      }
+
+      updateNodesAndEdgesSelections({
+        changedNodes,
+        changedEdges,
+        get,
+        set,
+      });
+    },
+    addSelectedEdges: (selectedEdgeIds: string[]) => {
+      const { multiSelectionActive, edges, nodeInternals } = get();
+      let changedEdges: EdgeSelectionChange[];
+      let changedNodes: NodeSelectionChange[] | null = null;
+
+      if (multiSelectionActive) {
+        changedEdges = selectedEdgeIds.map((edgeId) => createSelectionChange(edgeId, true)) as EdgeSelectionChange[];
+      } else {
+        changedEdges = getSelectionChanges(edges, selectedEdgeIds);
+        changedNodes = getSelectionChanges(Array.from(nodeInternals.values()), []);
+      }
+
+      updateNodesAndEdgesSelections({
+        changedNodes,
+        changedEdges,
+        get,
+        set,
+      });
+    },
+    unselectNodesAndEdges: ({ nodes, edges }: UnselectNodesAndEdgesParams = {}) => {
+      const { nodeInternals, edges: storeEdges } = get();
+      const nodesToUnselect = nodes ? nodes : Array.from(nodeInternals.values());
+      const edgesToUnselect = edges ? edges : storeEdges;
+
+      const changedNodes = nodesToUnselect.map((n) => {
+        n.selected = false;
+        return createSelectionChange(n.id, false);
+      }) as NodeSelectionChange[];
+      const changedEdges = edgesToUnselect.map((edge) =>
+        createSelectionChange(edge.id, false)
+      ) as EdgeSelectionChange[];
+
+      updateNodesAndEdgesSelections({
+        changedNodes,
+        changedEdges,
+        get,
+        set,
+      });
+    },
+    setMinZoom: (minZoom: number) => {
+      const { d3Zoom, maxZoom } = get();
+      d3Zoom?.scaleExtent([minZoom, maxZoom]);
+
+      set({ minZoom });
+    },
+    setMaxZoom: (maxZoom: number) => {
+      const { d3Zoom, minZoom } = get();
+      d3Zoom?.scaleExtent([minZoom, maxZoom]);
+
+      set({ maxZoom });
+    },
+    setTranslateExtent: (translateExtent: CoordinateExtent) => {
+      const { d3Zoom } = get();
+      d3Zoom?.translateExtent(translateExtent);
+
+      set({ translateExtent });
+    },
+    resetSelectedElements: () => {
+      const { nodeInternals, edges } = get();
+      const nodes = Array.from(nodeInternals.values());
+
+      const nodesToUnselect = nodes
+        .filter((e) => e.selected)
+        .map((n) => createSelectionChange(n.id, false)) as NodeSelectionChange[];
+      const edgesToUnselect = edges
+        .filter((e) => e.selected)
+        .map((e) => createSelectionChange(e.id, false)) as EdgeSelectionChange[];
+
+      updateNodesAndEdgesSelections({
+        changedNodes: nodesToUnselect,
+        changedEdges: edgesToUnselect,
+        get,
+        set,
+      });
+    },
+    setNodeExtent: (nodeExtent: CoordinateExtent) => {
+      const { nodeInternals } = get();
+
+      nodeInternals.forEach((node) => {
+        node.positionAbsolute = clampPosition(node.position, nodeExtent);
+      });
+
+      set({
+        nodeExtent,
+        nodeInternals: new Map(nodeInternals),
+      });
+    },
+    reset: () => set({ ...initialState }),
+  }));
+
+export { Provider, useStore, createStore, useStoreApi };
@@ -0,0 +1,51 @@
+import { CoordinateExtent, ReactFlowStore, ConnectionMode } from '../types';
+
+export const infiniteExtent: CoordinateExtent = [
+  [Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY],
+  [Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY],
+];
+
+const initialState: ReactFlowStore = {
+  width: 0,
+  height: 0,
+  transform: [0, 0, 1],
+  nodeInternals: new Map(),
+  edges: [],
+  onNodesChange: null,
+  onEdgesChange: null,
+  hasDefaultNodes: false,
+  hasDefaultEdges: false,
+  d3Zoom: null,
+  d3Selection: null,
+  d3ZoomHandler: undefined,
+  minZoom: 0.5,
+  maxZoom: 2,
+  translateExtent: infiniteExtent,
+  nodeExtent: infiniteExtent,
+  nodesSelectionActive: false,
+  userSelectionActive: false,
+  connectionNodeId: null,
+  connectionHandleId: null,
+  connectionHandleType: 'source',
+  connectionPosition: { x: 0, y: 0 },
+  connectionMode: ConnectionMode.Strict,
+
+  snapGrid: [15, 15],
+  snapToGrid: false,
+
+  nodesDraggable: true,
+  nodesConnectable: true,
+  elementsSelectable: true,
+  fitViewOnInit: false,
+  fitViewOnInitDone: false,
+  fitViewOnInitOptions: undefined,
+
+  multiSelectionActive: false,
+
+  reactFlowVersion: typeof __REACT_FLOW_VERSION__ !== 'undefined' ? __REACT_FLOW_VERSION__ : '-',
+
+  connectionStartHandle: null,
+  connectOnClick: true,
+};
+
+export default initialState;
@@ -0,0 +1,190 @@
+import { zoomIdentity } from 'd3-zoom';
+import { GetState, SetState } from 'zustand';
+
+import { internalsSymbol, isNumeric } from '../utils';
+import { getD3Transition, getRectOfNodes, getTransformForBounds } from '../utils/graph';
+import {
+  Edge,
+  EdgeSelectionChange,
+  Node,
+  NodeInternals,
+  NodeSelectionChange,
+  ReactFlowState,
+  XYZPosition,
+  FitViewOptions,
+} from '../types';
+
+type ParentNodes = Record<string, boolean>;
+
+function calculateXYZPosition(
+  node: Node,
+  nodeInternals: NodeInternals,
+  parentNodes: ParentNodes,
+  result: XYZPosition
+): XYZPosition {
+  if (!node.parentNode) {
+    return result;
+  }
+  const parentNode = nodeInternals.get(node.parentNode)!;
+
+  return calculateXYZPosition(parentNode, nodeInternals, parentNodes, {
+    x: (result.x ?? 0) + (parentNode.position?.x ?? 0),
+    y: (result.y ?? 0) + (parentNode.position?.y ?? 0),
+    z: (parentNode[internalsSymbol]?.z ?? 0) > (result.z ?? 0) ? parentNode[internalsSymbol]?.z ?? 0 : result.z ?? 0,
+  });
+}
+
+export function createNodeInternals(nodes: Node[], nodeInternals: NodeInternals): NodeInternals {
+  const nextNodeInternals = new Map<string, Node>();
+  const parentNodes: ParentNodes = {};
+
+  nodes.forEach((node) => {
+    const z = isNumeric(node.zIndex) ? node.zIndex : node.selected ? 1000 : 0;
+    const currInternals = nodeInternals.get(node.id);
+
+    const internals: Node = {
+      width: currInternals?.width,
+      height: currInternals?.height,
+      ...node,
+      positionAbsolute: {
+        x: node.position.x,
+        y: node.position.y,
+      },
+    };
+
+    if (node.parentNode) {
+      internals.parentNode = node.parentNode;
+      parentNodes[node.parentNode] = true;
+    }
+
+    Object.defineProperty(internals, internalsSymbol, {
+      enumerable: false,
+      value: {
+        handleBounds: currInternals?.[internalsSymbol]?.handleBounds,
+        z,
+      },
+    });
+
+    nextNodeInternals.set(node.id, internals);
+  });
+
+  nextNodeInternals.forEach((node) => {
+    if (node.parentNode && !nextNodeInternals.has(node.parentNode)) {
+      throw new Error(`Parent node ${node.parentNode} not found`);
+    }
+
+    if (node.parentNode || parentNodes[node.id]) {
+      const { x, y, z } = calculateXYZPosition(node, nextNodeInternals, parentNodes, {
+        ...node.position,
+        z: node[internalsSymbol]?.z ?? 0,
+      });
+
+      node.positionAbsolute = {
+        x,
+        y,
+      };
+
+      node[internalsSymbol]!.z = z;
+
+      if (parentNodes[node.id]) {
+        node[internalsSymbol]!.isParent = true;
+      }
+    }
+  });
+
+  return nextNodeInternals;
+}
+
+type InternalFitViewOptions = {
+  initial?: boolean;
+} & FitViewOptions;
+
+export function fitView(get: GetState<ReactFlowState>, options: InternalFitViewOptions = {}) {
+  let { nodeInternals, width, height, minZoom, maxZoom, d3Zoom, d3Selection, fitViewOnInitDone, fitViewOnInit } = get();
+
+  if ((options.initial && !fitViewOnInitDone && fitViewOnInit) || !options.initial) {
+    if (d3Zoom && d3Selection) {
+      const nodes = Array.from(nodeInternals.values()).filter((n) =>
+        options.includeHiddenNodes ? n.width && n.height : !n.hidden
+      );
+
+      const nodesInitialized = nodes.every((n) => n.width && n.height);
+
+      if (nodes.length > 0 && nodesInitialized) {
+        const bounds = getRectOfNodes(nodes);
+        const [x, y, zoom] = getTransformForBounds(
+          bounds,
+          width,
+          height,
+          options.minZoom ?? minZoom,
+          options.maxZoom ?? maxZoom,
+          options.padding ?? 0.1
+        );
+
+        const nextTransform = zoomIdentity.translate(x, y).scale(zoom);
+
+        if (typeof options.duration === 'number' && options.duration > 0) {
+          d3Zoom.transform(getD3Transition(d3Selection, options.duration), nextTransform);
+        } else {
+          d3Zoom.transform(d3Selection, nextTransform);
+        }
+
+        return true;
+      }
+    }
+  }
+
+  return false;
+}
+
+export function handleControlledNodeSelectionChange(nodeChanges: NodeSelectionChange[], nodeInternals: NodeInternals) {
+  nodeChanges.forEach((change) => {
+    const node = nodeInternals.get(change.id);
+    if (node) {
+      nodeInternals.set(node.id, {
+        ...node,
+        [internalsSymbol]: node[internalsSymbol],
+        selected: change.selected,
+      });
+    }
+  });
+
+  return new Map(nodeInternals);
+}
+
+export function handleControlledEdgeSelectionChange(edgeChanges: EdgeSelectionChange[], edges: Edge[]) {
+  return edges.map((e) => {
+    const change = edgeChanges.find((change) => change.id === e.id);
+    if (change) {
+      e.selected = change.selected;
+    }
+    return e;
+  });
+}
+
+type UpdateNodesAndEdgesParams = {
+  changedNodes: NodeSelectionChange[] | null;
+  changedEdges: EdgeSelectionChange[] | null;
+  get: GetState<ReactFlowState>;
+  set: SetState<ReactFlowState>;
+};
+
+export function updateNodesAndEdgesSelections({ changedNodes, changedEdges, get, set }: UpdateNodesAndEdgesParams) {
+  const { nodeInternals, edges, onNodesChange, onEdgesChange, hasDefaultNodes, hasDefaultEdges } = get();
+
+  if (changedNodes?.length) {
+    if (hasDefaultNodes) {
+      set({ nodeInternals: handleControlledNodeSelectionChange(changedNodes, nodeInternals) });
+    }
+
+    onNodesChange?.(changedNodes);
+  }
+
+  if (changedEdges?.length) {
+    if (hasDefaultEdges) {
+      set({ edges: handleControlledEdgeSelectionChange(changedEdges, edges) });
+    }
+
+    onEdgesChange?.(changedEdges);
+  }
+}