refactor(react): use array for nodeInternals, rename to nodes

This commit is contained in:
moklick
2023-06-12 16:56:02 +02:00
parent cefdfd4e70
commit c6501aff62
33 changed files with 146 additions and 197 deletions
@@ -16,7 +16,6 @@ const defaultWidth = 200;
const defaultHeight = 150;
const selector = (s: ReactFlowState) => {
const nodes = s.getNodes();
const viewBB: Rect = {
x: -s.transform[0] / s.transform[2],
y: -s.transform[1] / s.transform[2],
@@ -26,7 +25,7 @@ const selector = (s: ReactFlowState) => {
return {
viewBB,
boundingRect: nodes.length > 0 ? getBoundsOfRects(getRectOfNodes(nodes, s.nodeOrigin), viewBB) : viewBB,
boundingRect: s.nodes.length > 0 ? getBoundsOfRects(getRectOfNodes(s.nodes, s.nodeOrigin), viewBB) : viewBB,
rfId: s.rfId,
nodeOrigin: s.nodeOrigin,
panZoom: s.panZoom,
@@ -118,7 +117,7 @@ function MiniMap({
const onSvgNodeClick = onNodeClick
? useCallback((event: MouseEvent, nodeId: string) => {
const node = store.getState().nodeInternals.get(nodeId)!;
const node = store.getState().nodes.find((n) => n.id === nodeId)!;
onNodeClick(event, node);
}, [])
: undefined;
@@ -12,7 +12,7 @@ import type { MiniMapNodes, GetMiniMapNodeAttribute } from './types';
declare const window: any;
const selector = (s: ReactFlowState) => s.nodeOrigin;
const selectorNodes = (s: ReactFlowState) => s.getNodes().filter((node) => !node.hidden && node.width && node.height);
const selectorNodes = (s: ReactFlowState) => s.nodes.filter((node) => !node.hidden && node.width && node.height);
const getAttrFunction = (func: any): GetMiniMapNodeAttribute => (func instanceof Function ? func : () => func);
function MiniMapNodes({
@@ -65,8 +65,8 @@ function ResizeControl({
const dragHandler = drag<HTMLDivElement, unknown>()
.on('start', (event: ResizeDragEvent) => {
const { nodeInternals, transform, snapGrid, snapToGrid } = store.getState();
const node = nodeInternals.get(id);
const { nodes, transform, snapGrid, snapToGrid } = store.getState();
const node = nodes.find((n) => n.id === id);
const { xSnapped, ySnapped } = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid });
prevValues.current = {
@@ -86,9 +86,9 @@ function ResizeControl({
onResizeStart?.(event, { ...prevValues.current });
})
.on('drag', (event: ResizeDragEvent) => {
const { nodeInternals, transform, snapGrid, snapToGrid, triggerNodeChanges } = store.getState();
const { nodes, transform, snapGrid, snapToGrid, triggerNodeChanges } = store.getState();
const { xSnapped, ySnapped } = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid });
const node = nodeInternals.get(id);
const node = nodes.find((n) => n.id === id);
if (node) {
const changes: NodeChange[] = [];
@@ -24,7 +24,7 @@ const nodesEqualityFn = (a: Node[], b: Node[]) => {
const storeSelector = (state: ReactFlowState) => ({
transform: state.transform,
nodeOrigin: state.nodeOrigin,
selectedNodesCount: state.getNodes().filter((node) => node.selected).length,
selectedNodesCount: state.nodes.filter((node) => node.selected).length,
});
function getTransform(nodeRect: Rect, transform: Transform, position: Position, offset: number, align: Align): string {
@@ -87,7 +87,7 @@ function NodeToolbar({
const nodeIds = Array.isArray(nodeId) ? nodeId : [nodeId || contextNodeId || ''];
return nodeIds.reduce<Node[]>((acc, id) => {
const node = state.nodeInternals.get(id);
const node = state.nodes.find((n) => n.id === id);
if (node) {
acc.push(node);
}