chore: setup monorepo using preconstruct
This commit is contained in:
Christopher Möller
@@ -0,0 +1,166 @@
|
||||
import { RefObject, useEffect, useRef, MouseEvent, useState, useCallback } from 'react';
|
||||
import { D3DragEvent, drag, SubjectPosition } from 'd3-drag';
|
||||
import { select } from 'd3-selection';
|
||||
|
||||
import { useStoreApi } from '../../store';
|
||||
import { pointToRendererPoint } from '../../utils/graph';
|
||||
import { NodeDragItem, NodeDragHandler } from '../../types';
|
||||
import { getDragItems, getEventHandlerParams, hasSelector, updatePosition } from './utils';
|
||||
import { handleNodeClick } from '../../components/Nodes/utils';
|
||||
|
||||
export type UseDragEvent = D3DragEvent<HTMLDivElement, null, SubjectPosition>;
|
||||
export type UseDragData = { dx: number; dy: number };
|
||||
|
||||
type UseDragParams = {
|
||||
nodeRef: RefObject<Element>;
|
||||
onStart?: NodeDragHandler;
|
||||
onDrag?: NodeDragHandler;
|
||||
onStop?: NodeDragHandler;
|
||||
disabled?: boolean;
|
||||
noDragClassName?: string;
|
||||
handleSelector?: string;
|
||||
nodeId?: string;
|
||||
isSelectable?: boolean;
|
||||
selectNodesOnDrag?: boolean;
|
||||
};
|
||||
|
||||
function useDrag({
|
||||
onStart,
|
||||
onDrag,
|
||||
onStop,
|
||||
nodeRef,
|
||||
disabled = false,
|
||||
noDragClassName,
|
||||
handleSelector,
|
||||
nodeId,
|
||||
isSelectable,
|
||||
selectNodesOnDrag,
|
||||
}: UseDragParams) {
|
||||
const [dragging, setDragging] = useState<boolean>(false);
|
||||
const store = useStoreApi();
|
||||
const dragItems = useRef<NodeDragItem[]>();
|
||||
const lastPos = useRef<{ x: number | null; y: number | null }>({ x: null, y: null });
|
||||
|
||||
// returns the pointer position projected to the RF coordinate system
|
||||
const getPointerPosition = useCallback(({ sourceEvent }: UseDragEvent) => {
|
||||
const { transform, snapGrid, snapToGrid } = store.getState();
|
||||
const x = sourceEvent.touches ? sourceEvent.touches[0].clientX : sourceEvent.clientX;
|
||||
const y = sourceEvent.touches ? sourceEvent.touches[0].clientY : sourceEvent.clientY;
|
||||
const pointerPos = pointToRendererPoint({ x, y }, transform, snapToGrid, snapGrid);
|
||||
|
||||
return pointerPos;
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (nodeRef?.current) {
|
||||
const selection = select(nodeRef.current);
|
||||
|
||||
if (disabled) {
|
||||
selection.on('.drag', null);
|
||||
} else {
|
||||
const dragHandler = drag()
|
||||
.on('start', (event: UseDragEvent) => {
|
||||
const { nodeInternals, multiSelectionActive, unselectNodesAndEdges } = store.getState();
|
||||
|
||||
if (!selectNodesOnDrag && !multiSelectionActive && nodeId) {
|
||||
if (!nodeInternals.get(nodeId)?.selected) {
|
||||
// we need to reset selected nodes when selectNodesOnDrag=false
|
||||
unselectNodesAndEdges();
|
||||
}
|
||||
}
|
||||
|
||||
if (nodeId && isSelectable && selectNodesOnDrag) {
|
||||
handleNodeClick({
|
||||
id: nodeId,
|
||||
store,
|
||||
});
|
||||
}
|
||||
|
||||
const pointerPos = getPointerPosition(event);
|
||||
dragItems.current = getDragItems(nodeInternals, pointerPos, nodeId);
|
||||
|
||||
if (onStart && dragItems.current) {
|
||||
const [currentNode, nodes] = getEventHandlerParams({
|
||||
nodeId,
|
||||
dragItems: dragItems.current,
|
||||
nodeInternals,
|
||||
});
|
||||
onStart(event.sourceEvent as MouseEvent, currentNode, nodes);
|
||||
}
|
||||
})
|
||||
.on('drag', (event: UseDragEvent) => {
|
||||
const { updateNodePositions, nodeInternals, nodeExtent } = store.getState();
|
||||
const pointerPos = getPointerPosition(event);
|
||||
|
||||
// skip events without movement
|
||||
if ((lastPos.current.x !== pointerPos.x || lastPos.current.y !== pointerPos.y) && dragItems.current) {
|
||||
lastPos.current = pointerPos;
|
||||
dragItems.current = dragItems.current.map((n) =>
|
||||
updatePosition(n, pointerPos, nodeInternals, nodeExtent)
|
||||
);
|
||||
|
||||
updateNodePositions(dragItems.current, true, true);
|
||||
setDragging(true);
|
||||
|
||||
if (onDrag) {
|
||||
const [currentNode, nodes] = getEventHandlerParams({
|
||||
nodeId,
|
||||
dragItems: dragItems.current,
|
||||
nodeInternals,
|
||||
});
|
||||
onDrag(event.sourceEvent as MouseEvent, currentNode, nodes);
|
||||
}
|
||||
}
|
||||
|
||||
event.on('end', (event) => {
|
||||
setDragging(false);
|
||||
if (dragItems.current) {
|
||||
updateNodePositions(dragItems.current, false, false);
|
||||
|
||||
if (onStop) {
|
||||
const [currentNode, nodes] = getEventHandlerParams({
|
||||
nodeId,
|
||||
dragItems: dragItems.current,
|
||||
nodeInternals,
|
||||
});
|
||||
onStop(event.sourceEvent as MouseEvent, currentNode, nodes);
|
||||
}
|
||||
}
|
||||
});
|
||||
})
|
||||
.filter((event: MouseEvent) => {
|
||||
const target = event.target as HTMLDivElement;
|
||||
const isDraggable =
|
||||
!event.button &&
|
||||
(!noDragClassName || !hasSelector(target, `.${noDragClassName}`, nodeRef)) &&
|
||||
(!handleSelector || hasSelector(target, handleSelector, nodeRef));
|
||||
|
||||
return isDraggable;
|
||||
});
|
||||
|
||||
selection.call(dragHandler);
|
||||
|
||||
return () => {
|
||||
selection.on('.drag', null);
|
||||
};
|
||||
}
|
||||
}
|
||||
}, [
|
||||
onStart,
|
||||
onDrag,
|
||||
onStop,
|
||||
nodeRef,
|
||||
disabled,
|
||||
noDragClassName,
|
||||
handleSelector,
|
||||
isSelectable,
|
||||
store,
|
||||
nodeId,
|
||||
selectNodesOnDrag,
|
||||
getPointerPosition,
|
||||
]);
|
||||
|
||||
return dragging;
|
||||
}
|
||||
|
||||
export default useDrag;
|
||||
@@ -0,0 +1,123 @@
|
||||
import { RefObject } from 'react';
|
||||
|
||||
import { CoordinateExtent, Node, NodeDragItem, NodeInternals, XYPosition } from '../../types';
|
||||
import { clampPosition } from '../../utils';
|
||||
|
||||
export function isParentSelected(node: Node, nodeInternals: NodeInternals): boolean {
|
||||
if (!node.parentNode) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const parentNode = nodeInternals.get(node.parentNode);
|
||||
|
||||
if (!parentNode) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (parentNode.selected) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return isParentSelected(parentNode, nodeInternals);
|
||||
}
|
||||
|
||||
export function hasSelector(target: Element, selector: string, nodeRef: RefObject<Element>): boolean {
|
||||
let current = target;
|
||||
|
||||
do {
|
||||
if (current?.matches(selector)) return true;
|
||||
if (current === nodeRef.current) return false;
|
||||
current = current.parentElement as Element;
|
||||
} while (current);
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
// looks for all selected nodes and created a NodeDragItem for each of them
|
||||
export function getDragItems(nodeInternals: NodeInternals, mousePos: XYPosition, nodeId?: string): NodeDragItem[] {
|
||||
return Array.from(nodeInternals.values())
|
||||
.filter((n) => (n.selected || n.id === nodeId) && (!n.parentNode || !isParentSelected(n, nodeInternals)))
|
||||
.map((n) => ({
|
||||
id: n.id,
|
||||
position: n.positionAbsolute || { x: 0, y: 0 },
|
||||
distance: {
|
||||
x: mousePos.x - (n.positionAbsolute?.x ?? 0),
|
||||
y: mousePos.y - (n.positionAbsolute?.y ?? 0),
|
||||
},
|
||||
delta: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
},
|
||||
extent: n.extent,
|
||||
parentNode: n.parentNode,
|
||||
width: n.width,
|
||||
height: n.height,
|
||||
}));
|
||||
}
|
||||
|
||||
export function updatePosition(
|
||||
dragItem: NodeDragItem,
|
||||
mousePos: XYPosition,
|
||||
nodeInternals: NodeInternals,
|
||||
nodeExtent?: CoordinateExtent
|
||||
): NodeDragItem {
|
||||
let currentExtent = dragItem.extent || nodeExtent;
|
||||
const nextPosition = { x: mousePos.x - dragItem.distance.x, y: mousePos.y - dragItem.distance.y };
|
||||
|
||||
if (dragItem.extent === 'parent') {
|
||||
if (dragItem.parentNode && dragItem.width && dragItem.height) {
|
||||
const parent = nodeInternals.get(dragItem.parentNode);
|
||||
currentExtent =
|
||||
parent?.positionAbsolute && parent?.width && parent?.height
|
||||
? [
|
||||
[parent.positionAbsolute.x, parent.positionAbsolute.y],
|
||||
[
|
||||
parent.positionAbsolute.x + parent.width - dragItem.width,
|
||||
parent.positionAbsolute.y + parent.height - dragItem.height,
|
||||
],
|
||||
]
|
||||
: currentExtent;
|
||||
} else {
|
||||
// @ts-ignore
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
console.warn('[React Flow]: Only child nodes can use a parent extent. Help: https://reactflow.dev/error#500');
|
||||
}
|
||||
currentExtent = nodeExtent;
|
||||
}
|
||||
} else if (dragItem.extent && dragItem.parentNode) {
|
||||
const parent = nodeInternals.get(dragItem.parentNode);
|
||||
const parentX = parent?.positionAbsolute?.x ?? 0;
|
||||
const parentY = parent?.positionAbsolute?.y ?? 0;
|
||||
currentExtent = [
|
||||
[dragItem.extent[0][0] + parentX, dragItem.extent[0][1] + parentY],
|
||||
[dragItem.extent[1][0] + parentX, dragItem.extent[1][1] + parentY],
|
||||
];
|
||||
}
|
||||
|
||||
dragItem.position = currentExtent ? clampPosition(nextPosition, currentExtent as CoordinateExtent) : nextPosition;
|
||||
|
||||
return dragItem;
|
||||
}
|
||||
|
||||
// returns two params:
|
||||
// 1. the dragged node (or the first of the list, if we are dragging a node selection)
|
||||
// 2. array of selected nodes (handy when multi selection is active)
|
||||
export function getEventHandlerParams({
|
||||
nodeId,
|
||||
dragItems,
|
||||
nodeInternals,
|
||||
}: {
|
||||
nodeId?: string;
|
||||
dragItems: NodeDragItem[];
|
||||
nodeInternals: NodeInternals;
|
||||
}): [Node, Node[]] {
|
||||
const extentedDragItems: Node[] = dragItems.map((n) => {
|
||||
const node = nodeInternals.get(n.id)!;
|
||||
|
||||
return {
|
||||
...node,
|
||||
};
|
||||
});
|
||||
|
||||
return [nodeId ? extentedDragItems.find((n) => n.id === nodeId)! : extentedDragItems[0], extentedDragItems];
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
import { useStore } from '../store';
|
||||
import { Edge, ReactFlowState } from '../types';
|
||||
|
||||
const edgesSelector = (state: ReactFlowState) => state.edges;
|
||||
|
||||
function useEdges<EdgeData>(): Edge<EdgeData>[] {
|
||||
const edges = useStore(edgesSelector);
|
||||
|
||||
return edges;
|
||||
}
|
||||
|
||||
export default useEdges;
|
||||
@@ -0,0 +1,96 @@
|
||||
import { useEffect } from 'react';
|
||||
import shallow from 'zustand/shallow';
|
||||
|
||||
import { useStore, useStoreApi } from '../store';
|
||||
import useKeyPress from './useKeyPress';
|
||||
import { getConnectedEdges } from '../utils/graph';
|
||||
import { EdgeChange, KeyCode, NodeChange, Node, ReactFlowState } from '../types';
|
||||
|
||||
interface HookParams {
|
||||
deleteKeyCode: KeyCode | null;
|
||||
multiSelectionKeyCode: KeyCode | null;
|
||||
}
|
||||
|
||||
const selector = (s: ReactFlowState) => ({
|
||||
onNodesChange: s.onNodesChange,
|
||||
onEdgesChange: s.onEdgesChange,
|
||||
});
|
||||
|
||||
export default ({ deleteKeyCode, multiSelectionKeyCode }: HookParams): void => {
|
||||
const store = useStoreApi();
|
||||
const { onNodesChange, onEdgesChange } = useStore(selector, shallow);
|
||||
|
||||
const deleteKeyPressed = useKeyPress(deleteKeyCode);
|
||||
const multiSelectionKeyPressed = useKeyPress(multiSelectionKeyCode);
|
||||
|
||||
useEffect(() => {
|
||||
const { nodeInternals, edges, hasDefaultNodes, hasDefaultEdges, onNodesDelete, onEdgesDelete } = store.getState();
|
||||
const nodes = Array.from(nodeInternals.values());
|
||||
const nodesToRemove = nodes.reduce<Node[]>((res, node) => {
|
||||
if (!node.selected && node.parentNode && res.find((n) => n.id === node.parentNode)) {
|
||||
res.push(node);
|
||||
} else if (node.selected) {
|
||||
res.push(node);
|
||||
}
|
||||
|
||||
return res;
|
||||
}, []);
|
||||
const selectedEdges = edges.filter((e) => e.selected);
|
||||
|
||||
if (deleteKeyPressed && (nodesToRemove || selectedEdges)) {
|
||||
const connectedEdges = getConnectedEdges(nodesToRemove, edges);
|
||||
const edgesToRemove = [...selectedEdges, ...connectedEdges];
|
||||
const edgeIdsToRemove = edgesToRemove.reduce<string[]>((res, edge) => {
|
||||
if (!res.includes(edge.id)) {
|
||||
res.push(edge.id);
|
||||
}
|
||||
return res;
|
||||
}, []);
|
||||
|
||||
if (hasDefaultEdges || hasDefaultNodes) {
|
||||
if (hasDefaultEdges) {
|
||||
store.setState({
|
||||
edges: edges.filter((e) => !edgeIdsToRemove.includes(e.id)),
|
||||
});
|
||||
}
|
||||
|
||||
if (hasDefaultNodes) {
|
||||
nodesToRemove.forEach((node) => {
|
||||
nodeInternals.delete(node.id);
|
||||
});
|
||||
|
||||
store.setState({
|
||||
nodeInternals: new Map(nodeInternals),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (edgeIdsToRemove.length > 0) {
|
||||
onEdgesDelete?.(edgesToRemove);
|
||||
|
||||
if (onEdgesChange) {
|
||||
const edgeChanges: EdgeChange[] = edgeIdsToRemove.map((id) => ({
|
||||
id,
|
||||
type: 'remove',
|
||||
}));
|
||||
onEdgesChange(edgeChanges);
|
||||
}
|
||||
}
|
||||
|
||||
if (nodesToRemove.length > 0) {
|
||||
onNodesDelete?.(nodesToRemove);
|
||||
|
||||
if (onNodesChange) {
|
||||
const nodeChanges: NodeChange[] = nodesToRemove.map((n) => ({ id: n.id, type: 'remove' }));
|
||||
onNodesChange(nodeChanges);
|
||||
}
|
||||
}
|
||||
|
||||
store.setState({ nodesSelectionActive: false });
|
||||
}
|
||||
}, [deleteKeyPressed, onNodesChange, onEdgesChange]);
|
||||
|
||||
useEffect(() => {
|
||||
store.setState({ multiSelectionActive: multiSelectionKeyPressed });
|
||||
}, [multiSelectionKeyPressed]);
|
||||
};
|
||||
@@ -0,0 +1,114 @@
|
||||
import { useState, useEffect, useRef, useMemo } from 'react';
|
||||
|
||||
import { KeyCode } from '../types';
|
||||
|
||||
type Keys = Array<string>;
|
||||
type PressedKeys = Set<string>;
|
||||
type KeyOrCode = 'key' | 'code';
|
||||
export interface UseKeyPressOptions {
|
||||
target: Window | Document | HTMLElement | ShadowRoot | null;
|
||||
}
|
||||
|
||||
const doc = typeof document !== 'undefined' ? document : null;
|
||||
|
||||
// the keycode can be a string 'a' or an array of strings ['a', 'a+d']
|
||||
// a string means a single key 'a' or a combination when '+' is used 'a+d'
|
||||
// an array means different possibilites. Explainer: ['a', 'd+s'] here the
|
||||
// user can use the single key 'a' or the combination 'd' + 's'
|
||||
export default (keyCode: KeyCode | null = null, options: UseKeyPressOptions = { target: doc }): boolean => {
|
||||
const [keyPressed, setKeyPressed] = useState(false);
|
||||
|
||||
// we need to remember the pressed keys in order to support combinations
|
||||
const pressedKeys = useRef<PressedKeys>(new Set([]));
|
||||
|
||||
// keyCodes = array with single keys [['a']] or key combinations [['a', 's']]
|
||||
// keysToWatch = array with all keys flattened ['a', 'd', 'ShiftLeft']
|
||||
// used to check if we store event.code or event.key. When the code is in the list of keysToWatch
|
||||
// we use the code otherwise the key. Explainer: When you press the left "command" key, the code is "MetaLeft"
|
||||
// and the key is "Meta". We want users to be able to pass keys and codes so we assume that the key is meant when
|
||||
// we can't find it in the list of keysToWatch.
|
||||
const [keyCodes, keysToWatch] = useMemo<[Array<Keys>, Keys]>(() => {
|
||||
if (keyCode !== null) {
|
||||
const keyCodeArr = Array.isArray(keyCode) ? keyCode : [keyCode];
|
||||
const keys = keyCodeArr.filter((kc) => typeof kc === 'string').map((kc) => kc.split('+'));
|
||||
const keysFlat = keys.reduce((res: Keys, item) => res.concat(...item), []);
|
||||
|
||||
return [keys, keysFlat];
|
||||
}
|
||||
|
||||
return [[], []];
|
||||
}, [keyCode]);
|
||||
|
||||
useEffect(() => {
|
||||
if (keyCode !== null) {
|
||||
const downHandler = (event: KeyboardEvent) => {
|
||||
if (isInputDOMNode(event)) {
|
||||
return false;
|
||||
}
|
||||
const keyOrCode = useKeyOrCode(event.code, keysToWatch);
|
||||
pressedKeys.current.add(event[keyOrCode]);
|
||||
|
||||
if (isMatchingKey(keyCodes, pressedKeys.current, false)) {
|
||||
event.preventDefault();
|
||||
setKeyPressed(true);
|
||||
}
|
||||
};
|
||||
|
||||
const upHandler = (event: KeyboardEvent) => {
|
||||
if (isInputDOMNode(event)) {
|
||||
return false;
|
||||
}
|
||||
const keyOrCode = useKeyOrCode(event.code, keysToWatch);
|
||||
|
||||
if (isMatchingKey(keyCodes, pressedKeys.current, true)) {
|
||||
setKeyPressed(false);
|
||||
pressedKeys.current.clear();
|
||||
} else {
|
||||
pressedKeys.current.delete(event[keyOrCode]);
|
||||
}
|
||||
};
|
||||
|
||||
const resetHandler = () => {
|
||||
pressedKeys.current.clear();
|
||||
setKeyPressed(false);
|
||||
};
|
||||
|
||||
options?.target?.addEventListener('keydown', downHandler as EventListenerOrEventListenerObject);
|
||||
options?.target?.addEventListener('keyup', upHandler as EventListenerOrEventListenerObject);
|
||||
window.addEventListener('blur', resetHandler);
|
||||
|
||||
return () => {
|
||||
options?.target?.removeEventListener('keydown', downHandler as EventListenerOrEventListenerObject);
|
||||
options?.target?.removeEventListener('keyup', upHandler as EventListenerOrEventListenerObject);
|
||||
window.removeEventListener('blur', resetHandler);
|
||||
};
|
||||
}
|
||||
}, [keyCode, setKeyPressed]);
|
||||
|
||||
return keyPressed;
|
||||
};
|
||||
|
||||
// utils
|
||||
|
||||
function isMatchingKey(keyCodes: Array<Keys>, pressedKeys: PressedKeys, isUp: boolean): boolean {
|
||||
return (
|
||||
keyCodes
|
||||
// we only want to compare same sizes of keyCode definitions
|
||||
// and pressed keys. When the user specified 'Meta' as a key somewhere
|
||||
// this would also be truthy without this filter when user presses 'Meta' + 'r'
|
||||
.filter((keys) => isUp || keys.length === pressedKeys.size)
|
||||
// since we want to support multiple possibilities only one of the
|
||||
// combinations need to be part of the pressed keys
|
||||
.some((keys) => keys.every((k) => pressedKeys.has(k)))
|
||||
);
|
||||
}
|
||||
|
||||
function useKeyOrCode(eventCode: string, keysToWatch: KeyCode): KeyOrCode {
|
||||
return keysToWatch.includes(eventCode) ? 'code' : 'key';
|
||||
}
|
||||
|
||||
function isInputDOMNode(event: KeyboardEvent): boolean {
|
||||
const target = event.target as HTMLElement;
|
||||
|
||||
return ['INPUT', 'SELECT', 'TEXTAREA'].includes(target?.nodeName) || target?.hasAttribute('contenteditable');
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
import { useStore } from '../store';
|
||||
import { Node, ReactFlowState } from '../types';
|
||||
|
||||
const nodesSelector = (state: ReactFlowState) => Array.from(state.nodeInternals.values());
|
||||
|
||||
function useNodes<NodeData>(): Node<NodeData>[] {
|
||||
const nodes = useStore(nodesSelector);
|
||||
|
||||
return nodes;
|
||||
}
|
||||
|
||||
export default useNodes;
|
||||
@@ -0,0 +1,34 @@
|
||||
import { useState, useCallback, SetStateAction, Dispatch } from 'react';
|
||||
|
||||
import { applyNodeChanges, applyEdgeChanges } from '../utils/changes';
|
||||
import { Node, NodeChange, Edge, EdgeChange } from '../types';
|
||||
|
||||
type ApplyChanges<ItemType, ChangesType> = (changes: ChangesType[], items: ItemType[]) => ItemType[];
|
||||
type OnChange<ChangesType> = (changes: ChangesType[]) => void;
|
||||
|
||||
// returns a hook that can be used liked this:
|
||||
// const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
|
||||
function createUseItemsState(
|
||||
applyChanges: ApplyChanges<Node, NodeChange>
|
||||
): <NodeData = any>(
|
||||
initialItems: Node<NodeData>[]
|
||||
) => [Node<NodeData>[], Dispatch<SetStateAction<Node<NodeData>[]>>, OnChange<NodeChange>];
|
||||
function createUseItemsState(
|
||||
applyChanges: ApplyChanges<Edge, EdgeChange>
|
||||
): <EdgeData = any>(
|
||||
initialItems: Edge<EdgeData>[]
|
||||
) => [Edge<EdgeData>[], Dispatch<SetStateAction<Edge<EdgeData>[]>>, OnChange<EdgeChange>];
|
||||
function createUseItemsState(
|
||||
applyChanges: ApplyChanges<any, any>
|
||||
): (initialItems: any[]) => [any[], Dispatch<SetStateAction<any[]>>, OnChange<any>] {
|
||||
return (initialItems: any[]) => {
|
||||
const [items, setItems] = useState(initialItems);
|
||||
|
||||
const onItemsChange = useCallback((changes: any[]) => setItems((items: any) => applyChanges(changes, items)), []);
|
||||
|
||||
return [items, setItems, onItemsChange];
|
||||
};
|
||||
}
|
||||
|
||||
export const useNodesState = createUseItemsState(applyNodeChanges);
|
||||
export const useEdgesState = createUseItemsState(applyEdgeChanges);
|
||||
@@ -0,0 +1,18 @@
|
||||
import { useEffect, useRef } from 'react';
|
||||
|
||||
import useReactFlow from './useReactFlow';
|
||||
import { OnInit } from '../types';
|
||||
|
||||
function useOnInitHandler(onInit: OnInit<any> | undefined) {
|
||||
const ReactFlowInstance = useReactFlow();
|
||||
const isInitialized = useRef<boolean>(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isInitialized.current && ReactFlowInstance.viewportInitialized && onInit) {
|
||||
setTimeout(() => onInit(ReactFlowInstance), 1);
|
||||
isInitialized.current = true;
|
||||
}
|
||||
}, [onInit, ReactFlowInstance.viewportInitialized]);
|
||||
}
|
||||
|
||||
export default useOnInitHandler;
|
||||
@@ -0,0 +1,126 @@
|
||||
import { useCallback } from 'react';
|
||||
|
||||
import useViewportHelper from './useViewportHelper';
|
||||
import { useStoreApi } from '../store';
|
||||
import {
|
||||
ReactFlowInstance,
|
||||
Instance,
|
||||
NodeAddChange,
|
||||
EdgeAddChange,
|
||||
NodeResetChange,
|
||||
EdgeResetChange,
|
||||
NodeRemoveChange,
|
||||
EdgeRemoveChange,
|
||||
} from '../types';
|
||||
|
||||
export default function useReactFlow<NodeData = any, EdgeData = any>(): ReactFlowInstance<NodeData, EdgeData> {
|
||||
const { initialized: viewportInitialized, ...viewportHelperFunctions } = useViewportHelper();
|
||||
const store = useStoreApi();
|
||||
|
||||
const getNodes = useCallback<Instance.GetNodes<NodeData>>(() => {
|
||||
const { nodeInternals } = store.getState();
|
||||
const nodes = Array.from(nodeInternals.values());
|
||||
return nodes.map((n) => ({ ...n }));
|
||||
}, []);
|
||||
|
||||
const getNode = useCallback<Instance.GetNode<NodeData>>((id) => {
|
||||
const { nodeInternals } = store.getState();
|
||||
return nodeInternals.get(id);
|
||||
}, []);
|
||||
|
||||
const getEdges = useCallback<Instance.GetEdges<EdgeData>>(() => {
|
||||
const { edges = [] } = store.getState();
|
||||
return edges.map((e) => ({ ...e }));
|
||||
}, []);
|
||||
|
||||
const getEdge = useCallback<Instance.GetEdge<EdgeData>>((id) => {
|
||||
const { edges = [] } = store.getState();
|
||||
return edges.find((e) => e.id === id);
|
||||
}, []);
|
||||
|
||||
const setNodes = useCallback<Instance.SetNodes<NodeData>>((payload) => {
|
||||
const { nodeInternals, setNodes, hasDefaultNodes, onNodesChange } = store.getState();
|
||||
const nodes = Array.from(nodeInternals.values());
|
||||
const nextNodes = typeof payload === 'function' ? payload(nodes) : payload;
|
||||
|
||||
if (hasDefaultNodes) {
|
||||
setNodes(nextNodes);
|
||||
} else if (onNodesChange) {
|
||||
const changes =
|
||||
nextNodes.length === 0
|
||||
? nodes.map((node) => ({ type: 'remove', id: node.id } as NodeRemoveChange))
|
||||
: nextNodes.map((node) => ({ item: node, type: 'reset' } as NodeResetChange<NodeData>));
|
||||
onNodesChange(changes);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const setEdges = useCallback<Instance.SetEdges<EdgeData>>((payload) => {
|
||||
const { edges = [], setEdges, hasDefaultEdges, onEdgesChange } = store.getState();
|
||||
const nextEdges = typeof payload === 'function' ? payload(edges) : payload;
|
||||
|
||||
if (hasDefaultEdges) {
|
||||
setEdges(nextEdges);
|
||||
} else if (onEdgesChange) {
|
||||
const changes =
|
||||
nextEdges.length === 0
|
||||
? edges.map((edge) => ({ type: 'remove', id: edge.id } as EdgeRemoveChange))
|
||||
: nextEdges.map((edge) => ({ item: edge, type: 'reset' } as EdgeResetChange<EdgeData>));
|
||||
onEdgesChange(changes);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const addNodes = useCallback<Instance.AddNodes<NodeData>>((payload) => {
|
||||
const nodes = Array.isArray(payload) ? payload : [payload];
|
||||
const { nodeInternals, setNodes, hasDefaultNodes, onNodesChange } = store.getState();
|
||||
|
||||
if (hasDefaultNodes) {
|
||||
const currentNodes = Array.from(nodeInternals.values());
|
||||
const nextNodes = [...currentNodes, ...nodes];
|
||||
setNodes(nextNodes);
|
||||
} else if (onNodesChange) {
|
||||
const changes = nodes.map((node) => ({ item: node, type: 'add' } as NodeAddChange<NodeData>));
|
||||
onNodesChange(changes);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const addEdges = useCallback<Instance.AddEdges<EdgeData>>((payload) => {
|
||||
const nextEdges = Array.isArray(payload) ? payload : [payload];
|
||||
const { edges = [], setEdges, hasDefaultEdges, onEdgesChange } = store.getState();
|
||||
|
||||
if (hasDefaultEdges) {
|
||||
setEdges([...edges, ...nextEdges]);
|
||||
} else if (onEdgesChange) {
|
||||
const changes = nextEdges.map((edge) => ({ item: edge, type: 'add' } as EdgeAddChange<EdgeData>));
|
||||
onEdgesChange(changes);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const toObject = useCallback<Instance.ToObject<NodeData, EdgeData>>(() => {
|
||||
const { nodeInternals, edges = [], transform } = store.getState();
|
||||
const nodes = Array.from(nodeInternals.values());
|
||||
const [x, y, zoom] = transform;
|
||||
return {
|
||||
nodes: nodes.map((n) => ({ ...n })),
|
||||
edges: edges.map((e) => ({ ...e })),
|
||||
viewport: {
|
||||
x,
|
||||
y,
|
||||
zoom,
|
||||
},
|
||||
};
|
||||
}, []);
|
||||
|
||||
return {
|
||||
...viewportHelperFunctions,
|
||||
viewportInitialized,
|
||||
getNodes,
|
||||
getNode,
|
||||
getEdges,
|
||||
getEdge,
|
||||
setNodes,
|
||||
setEdges,
|
||||
addNodes,
|
||||
addEdges,
|
||||
toObject,
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
import { useEffect, MutableRefObject } from 'react';
|
||||
|
||||
import { useStoreApi } from '../store';
|
||||
import { getDimensions } from '../utils';
|
||||
|
||||
function useResizeHandler(rendererNode: MutableRefObject<HTMLDivElement | null>): void {
|
||||
const store = useStoreApi();
|
||||
|
||||
useEffect(() => {
|
||||
let resizeObserver: ResizeObserver;
|
||||
|
||||
const updateDimensions = () => {
|
||||
if (!rendererNode.current) {
|
||||
return;
|
||||
}
|
||||
|
||||
const size = getDimensions(rendererNode.current);
|
||||
|
||||
// @ts-ignore
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
if (size.height === 0 || size.width === 0) {
|
||||
console.warn(
|
||||
'[React Flow]: The React Flow parent container needs a width and a height to render the graph. Help: https://reactflow.dev/error#400'
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
store.setState({ width: size.width || 500, height: size.height || 500 });
|
||||
};
|
||||
|
||||
updateDimensions();
|
||||
window.onresize = updateDimensions;
|
||||
|
||||
if (rendererNode.current) {
|
||||
resizeObserver = new ResizeObserver(() => updateDimensions());
|
||||
resizeObserver.observe(rendererNode.current);
|
||||
}
|
||||
|
||||
return () => {
|
||||
window.onresize = null;
|
||||
|
||||
if (resizeObserver && rendererNode.current) {
|
||||
resizeObserver.unobserve(rendererNode.current!);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
}
|
||||
|
||||
export default useResizeHandler;
|
||||
@@ -0,0 +1,20 @@
|
||||
import { useCallback } from 'react';
|
||||
|
||||
import { useStore } from '../store';
|
||||
import { UpdateNodeInternals, ReactFlowState } from '../types';
|
||||
|
||||
const selector = (state: ReactFlowState) => state.updateNodeDimensions;
|
||||
|
||||
function useUpdateNodeInternals(): UpdateNodeInternals {
|
||||
const updateNodeDimensions = useStore(selector);
|
||||
|
||||
return useCallback<UpdateNodeInternals>((id: string) => {
|
||||
const nodeElement = document.querySelector(`.react-flow__node[data-id="${id}"]`) as HTMLDivElement;
|
||||
|
||||
if (nodeElement) {
|
||||
updateNodeDimensions([{ id, nodeElement, forceUpdate: true }]);
|
||||
}
|
||||
}, []);
|
||||
}
|
||||
|
||||
export default useUpdateNodeInternals;
|
||||
@@ -0,0 +1,18 @@
|
||||
import shallow from 'zustand/shallow';
|
||||
|
||||
import { useStore } from '../store';
|
||||
import { Viewport, ReactFlowState } from '../types';
|
||||
|
||||
const viewportSelector = (state: ReactFlowState) => ({
|
||||
x: state.transform[0],
|
||||
y: state.transform[1],
|
||||
zoom: state.transform[2],
|
||||
});
|
||||
|
||||
function useViewport(): Viewport {
|
||||
const viewport = useStore(viewportSelector, shallow);
|
||||
|
||||
return viewport;
|
||||
}
|
||||
|
||||
export default useViewport;
|
||||
@@ -0,0 +1,84 @@
|
||||
import { useMemo } from 'react';
|
||||
import { zoomIdentity } from 'd3-zoom';
|
||||
import shallow from 'zustand/shallow';
|
||||
|
||||
import { useStoreApi, useStore } from '../store';
|
||||
import { pointToRendererPoint, getTransformForBounds, getD3Transition } from '../utils/graph';
|
||||
import { FitViewOptions, Viewport, ViewportHelperFunctions, ReactFlowState, Rect, XYPosition } from '../types';
|
||||
import { fitView as fitViewStore } from '../store/utils';
|
||||
|
||||
const DEFAULT_PADDING = 0.1;
|
||||
|
||||
const initialViewportHelper: ViewportHelperFunctions = {
|
||||
zoomIn: () => {},
|
||||
zoomOut: () => {},
|
||||
zoomTo: (_: number) => {},
|
||||
getZoom: () => 1,
|
||||
setViewport: (_: Viewport) => {},
|
||||
getViewport: () => ({ x: 0, y: 0, zoom: 1 }),
|
||||
fitView: (_: FitViewOptions = { padding: DEFAULT_PADDING, includeHiddenNodes: false }) => {},
|
||||
setCenter: (_: number, __: number) => {},
|
||||
fitBounds: (_: Rect) => {},
|
||||
project: (position: XYPosition) => position,
|
||||
initialized: false,
|
||||
};
|
||||
|
||||
const selector = (s: ReactFlowState) => ({
|
||||
d3Zoom: s.d3Zoom,
|
||||
d3Selection: s.d3Selection,
|
||||
});
|
||||
|
||||
const useViewportHelper = (): ViewportHelperFunctions => {
|
||||
const store = useStoreApi();
|
||||
const { d3Zoom, d3Selection } = useStore(selector, shallow);
|
||||
|
||||
const viewportHelperFunctions = useMemo<ViewportHelperFunctions>(() => {
|
||||
if (d3Selection && d3Zoom) {
|
||||
return {
|
||||
zoomIn: (options) => d3Zoom.scaleBy(getD3Transition(d3Selection, options?.duration), 1.2),
|
||||
zoomOut: (options) => d3Zoom.scaleBy(getD3Transition(d3Selection, options?.duration), 1 / 1.2),
|
||||
zoomTo: (zoomLevel, options) => d3Zoom.scaleTo(getD3Transition(d3Selection, options?.duration), zoomLevel),
|
||||
getZoom: () => {
|
||||
const [, , zoom] = store.getState().transform;
|
||||
return zoom;
|
||||
},
|
||||
setViewport: (transform, options) => {
|
||||
const nextTransform = zoomIdentity.translate(transform.x, transform.y).scale(transform.zoom);
|
||||
d3Zoom.transform(getD3Transition(d3Selection, options?.duration), nextTransform);
|
||||
},
|
||||
getViewport: () => {
|
||||
const [x, y, zoom] = store.getState().transform;
|
||||
return { x, y, zoom };
|
||||
},
|
||||
fitView: (options) => fitViewStore(store.getState, options),
|
||||
setCenter: (x, y, options) => {
|
||||
const { width, height, maxZoom } = store.getState();
|
||||
const nextZoom = typeof options?.zoom !== 'undefined' ? options.zoom : maxZoom;
|
||||
const centerX = width / 2 - x * nextZoom;
|
||||
const centerY = height / 2 - y * nextZoom;
|
||||
const transform = zoomIdentity.translate(centerX, centerY).scale(nextZoom);
|
||||
|
||||
d3Zoom.transform(getD3Transition(d3Selection, options?.duration), transform);
|
||||
},
|
||||
fitBounds: (bounds, options) => {
|
||||
const { width, height, minZoom, maxZoom } = store.getState();
|
||||
const [x, y, zoom] = getTransformForBounds(bounds, width, height, minZoom, maxZoom, options?.padding ?? 0.1);
|
||||
const transform = zoomIdentity.translate(x, y).scale(zoom);
|
||||
|
||||
d3Zoom.transform(getD3Transition(d3Selection, options?.duration), transform);
|
||||
},
|
||||
project: (position: XYPosition) => {
|
||||
const { transform, snapToGrid, snapGrid } = store.getState();
|
||||
return pointToRendererPoint(position, transform, snapToGrid, snapGrid);
|
||||
},
|
||||
initialized: true,
|
||||
};
|
||||
}
|
||||
|
||||
return initialViewportHelper;
|
||||
}, [d3Zoom, d3Selection]);
|
||||
|
||||
return viewportHelperFunctions;
|
||||
};
|
||||
|
||||
export default useViewportHelper;
|
||||
@@ -0,0 +1,92 @@
|
||||
import { useCallback } from 'react';
|
||||
|
||||
import { useStore } from '../store';
|
||||
import { isEdgeVisible } from '../container/EdgeRenderer/utils';
|
||||
import { ReactFlowState, NodeInternals, Edge } from '../types';
|
||||
import { internalsSymbol, isNumeric } from '../utils';
|
||||
|
||||
const defaultEdgeTree = [{ level: 0, isMaxLevel: true, edges: [] }];
|
||||
|
||||
function groupEdgesByZLevel(edges: Edge[], nodeInternals: NodeInternals, elevateEdgesOnSelect: boolean = false) {
|
||||
let maxLevel = -1;
|
||||
|
||||
const levelLookup = edges.reduce<Record<string, Edge[]>>((tree, edge) => {
|
||||
const hasZIndex = isNumeric(edge.zIndex);
|
||||
let z = hasZIndex ? edge.zIndex! : 0;
|
||||
|
||||
if (elevateEdgesOnSelect) {
|
||||
z = hasZIndex
|
||||
? edge.zIndex!
|
||||
: Math.max(
|
||||
nodeInternals.get(edge.source)?.[internalsSymbol]?.z || 0,
|
||||
nodeInternals.get(edge.target)?.[internalsSymbol]?.z || 0
|
||||
);
|
||||
}
|
||||
|
||||
if (tree[z]) {
|
||||
tree[z].push(edge);
|
||||
} else {
|
||||
tree[z] = [edge];
|
||||
}
|
||||
|
||||
maxLevel = z > maxLevel ? z : maxLevel;
|
||||
|
||||
return tree;
|
||||
}, {});
|
||||
|
||||
const edgeTree = Object.entries(levelLookup).map(([key, edges]) => {
|
||||
const level = +key;
|
||||
|
||||
return {
|
||||
edges,
|
||||
level,
|
||||
isMaxLevel: level === maxLevel,
|
||||
};
|
||||
});
|
||||
|
||||
if (edgeTree.length === 0) {
|
||||
return defaultEdgeTree;
|
||||
}
|
||||
|
||||
return edgeTree;
|
||||
}
|
||||
|
||||
function useVisibleEdges(onlyRenderVisible: boolean, nodeInternals: NodeInternals, elevateEdgesOnSelect: boolean) {
|
||||
const edges = useStore(
|
||||
useCallback(
|
||||
(s: ReactFlowState) => {
|
||||
if (!onlyRenderVisible) {
|
||||
return s.edges;
|
||||
}
|
||||
|
||||
return s.edges.filter((e) => {
|
||||
const sourceNode = nodeInternals.get(e.source);
|
||||
const targetNode = nodeInternals.get(e.target);
|
||||
|
||||
return (
|
||||
sourceNode?.width &&
|
||||
sourceNode?.height &&
|
||||
targetNode?.width &&
|
||||
targetNode?.height &&
|
||||
isEdgeVisible({
|
||||
sourcePos: sourceNode.positionAbsolute || { x: 0, y: 0 },
|
||||
targetPos: targetNode.positionAbsolute || { x: 0, y: 0 },
|
||||
sourceWidth: sourceNode.width,
|
||||
sourceHeight: sourceNode.height,
|
||||
targetWidth: targetNode.width,
|
||||
targetHeight: targetNode.height,
|
||||
width: s.width,
|
||||
height: s.height,
|
||||
transform: s.transform,
|
||||
})
|
||||
);
|
||||
});
|
||||
},
|
||||
[onlyRenderVisible, nodeInternals]
|
||||
)
|
||||
);
|
||||
|
||||
return groupEdgesByZLevel(edges, nodeInternals, elevateEdgesOnSelect);
|
||||
}
|
||||
|
||||
export default useVisibleEdges;
|
||||
@@ -0,0 +1,23 @@
|
||||
import { useCallback } from 'react';
|
||||
|
||||
import { useStore } from '../store';
|
||||
import { getNodesInside } from '../utils/graph';
|
||||
|
||||
import { ReactFlowState } from '../types';
|
||||
|
||||
function useVisibleNodes(onlyRenderVisible: boolean) {
|
||||
const nodes = useStore(
|
||||
useCallback(
|
||||
(s: ReactFlowState) => {
|
||||
return onlyRenderVisible
|
||||
? getNodesInside(s.nodeInternals, { x: 0, y: 0, width: s.width, height: s.height }, s.transform, true)
|
||||
: Array.from(s.nodeInternals.values());
|
||||
},
|
||||
[onlyRenderVisible]
|
||||
)
|
||||
);
|
||||
|
||||
return nodes;
|
||||
}
|
||||
|
||||
export default useVisibleNodes;
|
||||
Reference in New Issue
Block a user