alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #2537 from wbkd/release/11.2.0

Browse Source 
Release: 11.2.0
This commit is contained in:
Moritz Klack
2022-11-02 21:07:49 +01:00
committed by GitHub
parent 674127a3eb d54b6b8617
commit 0b80eadb4a
36 changed files with 1122 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/vite-app/package.json
+1 -1
View File
@@ -1,7 +1,7 @@
{ {
"name": "@reactflow/examples", "name": "@reactflow/examples",
"private": true, "private": true,
"version": "0.0.2", "version": "0.0.0",
"type": "module", "type": "module",
"scripts": { "scripts": {
"dev": "vite --port 3000 --open", "dev": "vite --port 3000 --open",
examples/vite-app/src/App/index.tsx
+18
View File
@@ -10,11 +10,13 @@ import DefaultNodes from '../examples/DefaultNodes';
import DragHandle from '../examples/DragHandle'; import DragHandle from '../examples/DragHandle';
import DragNDrop from '../examples/DragNDrop'; import DragNDrop from '../examples/DragNDrop';
import Edges from '../examples/Edges'; import Edges from '../examples/Edges';
import EdgeRenderer from '../examples/EdgeRenderer';
import EdgeTypes from '../examples/EdgeTypes'; import EdgeTypes from '../examples/EdgeTypes';
import Empty from '../examples/Empty'; import Empty from '../examples/Empty';
import FloatingEdges from '../examples/FloatingEdges'; import FloatingEdges from '../examples/FloatingEdges';
import Hidden from '../examples/Hidden'; import Hidden from '../examples/Hidden';
import Interaction from '../examples/Interaction'; import Interaction from '../examples/Interaction';
import Intersection from '../examples/Intersection';
import Layouting from '../examples/Layouting'; import Layouting from '../examples/Layouting';
import MultiFlows from '../examples/MultiFlows'; import MultiFlows from '../examples/MultiFlows';
import NestedNodes from '../examples/NestedNodes'; import NestedNodes from '../examples/NestedNodes';
@@ -36,6 +38,7 @@ import Validation from '../examples/Validation';
import UseKeyPress from '../examples/UseKeyPress'; import UseKeyPress from '../examples/UseKeyPress';
import EdgeRouting from '../examples/EdgeRouting'; import EdgeRouting from '../examples/EdgeRouting';
import CancelConnection from '../examples/CancelConnection'; import CancelConnection from '../examples/CancelConnection';
import InteractiveMinimap from '../examples/InteractiveMinimap';
import UseOnSelectionChange from '../examples/UseOnSelectionChange'; import UseOnSelectionChange from '../examples/UseOnSelectionChange';
interface IRoute { interface IRoute {
@@ -95,6 +98,11 @@ const routes: IRoute[] = [
path: '/edges', path: '/edges',
component: Edges, component: Edges,
}, },
{
name: 'Edge Renderer',
path: '/edge-renderer',
component: EdgeRenderer,
},
{ {
name: 'Edge Types', name: 'Edge Types',
path: '/edge-types', path: '/edge-types',
@@ -125,6 +133,16 @@ const routes: IRoute[] = [
path: '/interaction', path: '/interaction',
component: Interaction, component: Interaction,
}, },
{
name: 'Intersection',
path: '/intersection',
component: Intersection,
},
{
name: 'Interactive Minimap',
path: '/interactive-minimap',
component: InteractiveMinimap,
},
{ {
name: 'Layouting', name: 'Layouting',
path: '/layouting', path: '/layouting',
examples/vite-app/src/examples/Basic/index.tsx
+1 -1
View File
@@ -106,7 +106,7 @@ const BasicFlow = () => {
<button onClick={toggleClassnames} style={{ marginRight: 5 }}> <button onClick={toggleClassnames} style={{ marginRight: 5 }}>
toggle classnames toggle classnames
</button> </button>
<button onClick={logToObject}>toObject</button> <button onClick={logToObject} style={{ marginRight: 5 }}>toObject</button>
</div> </div>
</ReactFlow> </ReactFlow>
); );
examples/vite-app/src/examples/EdgeRenderer/CustomEdge.tsx
+61
View File
@@ -0,0 +1,61 @@
import { FC, MouseEvent } from 'react';
import { EdgeProps, getBezierPath, EdgeLabelRenderer, useStore, ReactFlowStore } from 'reactflow';
const CustomEdge: FC<EdgeProps> = ({
id,
source,
target,
sourceX,
sourceY,
targetX,
targetY,
sourcePosition,
targetPosition,
data,
}) => {
const isConnectedNodeDragging = useStore((s) =>
Array.from(s.nodeInternals.values()).find((n) => n.dragging && (target === n.id || source === n.id))
);
const [edgePath, labelX, labelY] = getBezierPath({
sourceX,
sourceY,
sourcePosition,
targetX,
targetY,
targetPosition,
});
const onClick = (event: MouseEvent) => {
event.preventDefault();
event.stopPropagation();
console.log('click', data.text);
};
return (
<>
<path id={id} className="react-flow__edge-path" d={edgePath} />
<EdgeLabelRenderer>
<div
style={{
position: 'absolute',
transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
background: '#ffcc00',
padding: 10,
zIndex: isConnectedNodeDragging ? 10 : 0,
pointerEvents: 'all',
}}
className="nodrag nopan"
>
{data.text}
<input style={{ display: 'block' }} />
<button onClick={onClick}>send</button>
</div>
</EdgeLabelRenderer>
</>
);
};
export default CustomEdge;
examples/vite-app/src/examples/EdgeRenderer/CustomEdge2.tsx
+51
View File
@@ -0,0 +1,51 @@
import { FC } from 'react';
import { EdgeProps, getBezierPath, EdgeLabelRenderer, useStore } from 'reactflow';
const CustomEdge: FC<EdgeProps> = ({
id,
source,
target,
sourceX,
sourceY,
targetX,
targetY,
sourcePosition,
targetPosition,
data,
}) => {
const isConnectedNodeDragging = useStore((s) =>
Array.from(s.nodeInternals.values()).find((n) => n.dragging && (target === n.id || source === n.id))
);
const [edgePath, labelX, labelY] = getBezierPath({
sourceX,
sourceY,
sourcePosition,
targetX,
targetY,
targetPosition,
});
return (
<>
<path id={id} className="react-flow__edge-path" d={edgePath} />
<EdgeLabelRenderer>
<div
style={{
position: 'absolute',
transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
background: 'white',
border: '1px solid #555',
padding: 5,
zIndex: isConnectedNodeDragging ? 10 : 0,
}}
>
{data.text}
</div>
</EdgeLabelRenderer>
</>
);
};
export default CustomEdge;
examples/vite-app/src/examples/EdgeRenderer/index.tsx
+206
View File
@@ -0,0 +1,206 @@
import React, { MouseEvent, useCallback } from 'react';
import ReactFlow, {
Controls,
Background,
MiniMap,
addEdge,
Connection,
Edge,
EdgeTypes,
MarkerType,
Node,
useEdgesState,
useNodesState,
} from 'reactflow';
import CustomEdge from './CustomEdge';
import CustomEdge2 from './CustomEdge2';
const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
const onEdgeClick = (_: MouseEvent, edge: Edge) => console.log('click', edge);
const onEdgeDoubleClick = (_: MouseEvent, edge: Edge) => console.log('dblclick', edge);
const onEdgeMouseEnter = (_: MouseEvent, edge: Edge) => console.log('enter', edge);
const onEdgeMouseMove = (_: MouseEvent, edge: Edge) => console.log('move', edge);
const onEdgeMouseLeave = (_: MouseEvent, edge: Edge) => console.log('leave', edge);
const initialNodes: Node[] = [
{
id: '1',
type: 'input',
data: { label: 'Input 1' },
position: { x: 250, y: 0 },
},
{ id: '2', data: { label: 'Node 2' }, position: { x: 150, y: 100 } },
{ id: '2a', data: { label: 'Node 2a' }, position: { x: 0, y: 180 } },
{ id: '2b', data: { label: 'Node 2b' }, position: { x: -40, y: 300 } },
{ id: '3', data: { label: 'Node 3' }, position: { x: 250, y: 200 } },
{ id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 300 } },
{ id: '3a', data: { label: 'Node 3a' }, position: { x: 150, y: 300 } },
{ id: '5', data: { label: 'Node 5' }, position: { x: 250, y: 400 } },
{
id: '6',
type: 'output',
data: { label: 'Output 6' },
position: { x: 50, y: 550 },
},
{
id: '7',
type: 'output',
data: { label: 'Output 7' },
position: { x: 250, y: 550 },
},
{
id: '8',
type: 'output',
data: { label: 'Output 8' },
position: { x: 525, y: 600 },
},
{
id: '9',
type: 'output',
data: { label: 'Output 9' },
position: { x: 675, y: 500 },
},
];
const initialEdges: Edge[] = [
{
id: 'e1-2',
source: '1',
target: '2',
label: 'bezier edge (default)',
className: 'normal-edge',
},
{
id: 'e2-2a',
source: '2',
target: '2a',
type: 'smoothstep',
label: 'smoothstep edge',
},
{
id: 'e2a-2b',
source: '2a',
target: '2b',
type: 'simplebezier',
label: 'simple bezier edge',
},
{ id: 'e2-3', source: '2', target: '3', type: 'step', label: 'step edge' },
{
id: 'e3-4',
source: '3',
target: '4',
type: 'straight',
label: 'straight edge',
},
{
id: 'e3-3a',
source: '3',
target: '3a',
type: 'straight',
label: 'label only edge',
style: { stroke: 'none' },
},
{
id: 'e3-5',
source: '4',
target: '5',
animated: true,
label: 'animated styled edge',
style: { stroke: 'red' },
},
{
id: 'e5-7',
source: '5',
target: '7',
label: 'label with styled bg',
labelBgPadding: [8, 4],
labelBgBorderRadius: 4,
labelBgStyle: { fill: '#FFCC00', color: '#fff', fillOpacity: 0.7 },
markerEnd: {
type: MarkerType.ArrowClosed,
},
},
{
id: 'e5-8',
source: '5',
target: '8',
type: 'custom',
data: { text: 'custom edge' },
},
{
id: 'e5-9',
source: '5',
target: '9',
type: 'custom2',
data: { text: 'custom edge 2' },
},
{
id: 'e5-6',
source: '5',
target: '6',
label: (
<>
<tspan>i am using</tspan>
<tspan dy={10} x={0}>
{'<tspan>'}
</tspan>
</>
),
labelStyle: { fill: 'red', fontWeight: 700 },
style: { stroke: '#ffcc00' },
markerEnd: {
type: MarkerType.Arrow,
color: '#FFCC00',
markerUnits: 'userSpaceOnUse',
width: 20,
height: 20,
strokeWidth: 2,
},
markerStart: {
type: MarkerType.ArrowClosed,
color: '#FFCC00',
orient: 'auto-start-reverse',
markerUnits: 'userSpaceOnUse',
width: 20,
height: 20,
},
},
];
const edgeTypes: EdgeTypes = {
custom: CustomEdge,
custom2: CustomEdge2,
};
const EdgesFlow = () => {
const [nodes, , onNodesChange] = useNodesState(initialNodes);
const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
const onConnect = useCallback((params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)), [setEdges]);
return (
<ReactFlow
nodes={nodes}
edges={edges}
onNodesChange={onNodesChange}
onEdgesChange={onEdgesChange}
onNodeClick={onNodeClick}
onConnect={onConnect}
onNodeDragStop={onNodeDragStop}
snapToGrid={true}
edgeTypes={edgeTypes}
onEdgeClick={onEdgeClick}
onEdgeDoubleClick={onEdgeDoubleClick}
onEdgeMouseEnter={onEdgeMouseEnter}
onEdgeMouseMove={onEdgeMouseMove}
onEdgeMouseLeave={onEdgeMouseLeave}
>
<MiniMap />
<Controls />
<Background />
</ReactFlow>
);
};
export default EdgesFlow;
examples/vite-app/src/examples/InteractiveMinimap/index.tsx
+165
View File
@@ -0,0 +1,165 @@
import { MouseEvent, useCallback } from 'react';
import ReactFlow, {
MiniMap,
Background,
BackgroundVariant,
Controls,
ReactFlowProvider,
Node,
Edge,
useReactFlow,
XYPosition,
} from 'reactflow';
const onNodeDrag = (_: MouseEvent, node: Node) => console.log('drag', node);
const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
const initialNodes: Node[] = [
{
id: '1',
data: { label: 'Node 1' },
position: { x: 0, y: 0 },
},
{
id: '2',
data: { label: 'Node 2' },
position: { x: 0, y: 200 },
},
{
id: '3',
data: { label: 'Node 3' },
position: { x: 200, y: 0 },
},
{
id: '4',
data: { label: 'Node 4' },
position: { x: 1000, y: 0 },
},
{
id: '5',
data: { label: 'Node 5' },
position: { x: 1000, y: 200 },
},
{
id: '6',
data: { label: 'Node 6' },
position: { x: 800, y: 0 },
},
{
id: '7',
data: { label: 'Node 4' },
position: { x: 0, y: 1000 },
},
{
id: '8',
data: { label: 'Node 5' },
position: { x: 0, y: 800 },
},
{
id: '9',
data: { label: 'Node 6' },
position: { x: 200, y: 1000 },
},
{
id: '10',
data: { label: 'Node 4' },
position: { x: 1000, y: 1000 },
},
{
id: '11',
data: { label: 'Node 5' },
position: { x: 800, y: 1000 },
},
{
id: '12',
data: { label: 'Node 6' },
position: { x: 1000, y: 800 },
},
];
const initialEdges: Edge[] = [];
const defaultEdgeOptions = { zIndex: 0 };
const BasicFlow = () => {
const instance = useReactFlow();
const updatePos = () => {
instance.setNodes((nodes) =>
nodes.map((node) => {
node.position = {
x: Math.random() * 400,
y: Math.random() * 400,
};
return node;
})
);
};
const logToObject = () => console.log(instance.toObject());
const resetTransform = () => instance.setViewport({ x: 0, y: 0, zoom: 1 });
const toggleClassnames = () => {
instance.setNodes((nodes) =>
nodes.map((node) => {
node.className = node.className === 'light' ? 'dark' : 'light';
return node;
})
);
};
const onMiniMapClick = useCallback((event: MouseEvent, pos: XYPosition) => {
console.log(pos);
}, []);
const onMiniMapNodeClick = useCallback((event: MouseEvent, node: Node) => {
console.log(node);
}, []);
return (
<ReactFlow
defaultNodes={initialNodes}
defaultEdges={initialEdges}
onNodeClick={onNodeClick}
onNodeDragStop={onNodeDragStop}
onNodeDrag={onNodeDrag}
className="react-flow-basic-example"
minZoom={0.2}
maxZoom={4}
defaultEdgeOptions={defaultEdgeOptions}
selectNodesOnDrag={false}
fitView
>
<Background variant={BackgroundVariant.Dots} />
<MiniMap onClick={onMiniMapClick} onNodeClick={onMiniMapNodeClick} pannable zoomable />
<Controls />
<div style={{ position: 'absolute', right: 10, top: 10, zIndex: 4 }}>
<button onClick={resetTransform} style={{ marginRight: 5 }}>
reset transform
</button>
<button onClick={updatePos} style={{ marginRight: 5 }}>
change pos
</button>
<button onClick={toggleClassnames} style={{ marginRight: 5 }}>
toggle classnames
</button>
<button onClick={logToObject}>toObject</button>
</div>
</ReactFlow>
);
};
export default function App() {
return (
<ReactFlowProvider>
<BasicFlow />
</ReactFlowProvider>
);
}
examples/vite-app/src/examples/Intersection/index.tsx
+104
View File
@@ -0,0 +1,104 @@
import { useCallback, MouseEvent } from 'react';
import ReactFlow, {
MiniMap,
Background,
Controls,
ReactFlowProvider,
Node,
Edge,
useReactFlow,
useNodesState,
} from 'reactflow';
import './style.css';
const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
const initialNodes: Node[] = [
{
id: '1',
type: 'input',
data: { label: 'Node 1' },
position: { x: 0, y: 0 },
className: 'light',
style: {
width: 200,
height: 100,
},
},
{
id: '2',
data: { label: 'Node 2' },
position: { x: 0, y: 150 },
className: 'light',
},
{
id: '3',
data: { label: 'Node 3' },
position: { x: 250, y: 0 },
className: 'light',
},
{
id: '4',
data: { label: 'Node' },
position: { x: 350, y: 150 },
style: {
width: 50,
height: 50,
},
className: 'light',
},
];
const initialEdges: Edge[] = [];
const defaultEdgeOptions = { zIndex: 0 };
const BasicFlow = () => {
const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
const { getIntersectingNodes, isNodeIntersecting } = useReactFlow();
const onNodeDrag = useCallback((_: MouseEvent, node: Node) => {
const intersections = getIntersectingNodes(node).map((n) => n.id);
const isIntersecting = isNodeIntersecting(node, { x: 0, y: 0, width: 100, height: 100 });
console.log(isIntersecting);
setNodes((ns) =>
ns.map((n) => ({
...n,
className: intersections.includes(n.id) ? 'highlight' : '',
}))
);
}, []);
return (
<ReactFlow
nodes={nodes}
edges={initialEdges}
onNodesChange={onNodesChange}
onNodeClick={onNodeClick}
onNodeDragStop={onNodeDragStop}
onNodeDrag={onNodeDrag}
className="react-flow-basic-example"
minZoom={0.2}
maxZoom={4}
fitView
defaultEdgeOptions={defaultEdgeOptions}
selectNodesOnDrag={false}
>
<Background />
<MiniMap />
<Controls />
</ReactFlow>
);
};
export default function App() {
return (
<ReactFlowProvider>
<BasicFlow />
</ReactFlowProvider>
);
}
examples/vite-app/src/examples/Intersection/style.css
+4
View File
@@ -0,0 +1,4 @@
.react-flow__node.highlight {
background-color: #ff5050;
color: white;
}
examples/vite-app/src/examples/NestedNodes/index.tsx
+1 -1
View File
@@ -160,7 +160,7 @@ const NestedFlow = () => {
maxZoom={4} maxZoom={4}
onlyRenderVisibleElements={false} onlyRenderVisibleElements={false}
> >
<MiniMap /> <MiniMap pannable />
<Controls /> <Controls />
<Background /> <Background />
examples/vite-app/src/examples/UseReactFlow/index.tsx
+14
View File
@@ -43,6 +43,7 @@ const initialNodes: Node[] = [
const initialEdges: Edge[] = [ const initialEdges: Edge[] = [
{ id: 'e1-2', source: '1', target: '2', animated: true }, { id: 'e1-2', source: '1', target: '2', animated: true },
{ id: 'e1-3', source: '1', target: '3' }, { id: 'e1-3', source: '1', target: '3' },
// { id: 'e3-4', source: '3', target: '4' }
]; ];
let id = 5; let id = 5;
@@ -64,6 +65,7 @@ const UseZoomPanHelperFlow = () => {
addEdges, addEdges,
getNodes, getNodes,
getEdges, getEdges,
deleteElements
} = useReactFlow(); } = useReactFlow();
const onPaneClick = useCallback( const onPaneClick = useCallback(
@@ -111,6 +113,16 @@ const UseZoomPanHelperFlow = () => {
console.log('edges', getEdges()); console.log('edges', getEdges());
}, [getNodes, getEdges]); }, [getNodes, getEdges]);
const deleteSelectedElements = useCallback(() => {
const selectedNodes = nodes.filter(node => node.selected);
const selectedEdges = edges.filter(edge => edge.selected);
deleteElements({ nodes: selectedNodes, edges: selectedEdges });
}, [deleteElements, nodes, edges])
const deleteSomeElements = useCallback(() => {
deleteElements({ nodes: [{ id: '2' }], edges: [{ id: 'e1-3' }] })
}, [])
useEffect(() => { useEffect(() => {
addEdges({ id: 'e3-4', source: '3', target: '4' }); addEdges({ id: 'e3-4', source: '3', target: '4' });
}, [addEdges]); }, [addEdges]);
@@ -137,6 +149,8 @@ const UseZoomPanHelperFlow = () => {
<button onClick={onAddNode}>add node</button> <button onClick={onAddNode}>add node</button>
<button onClick={onResetNodes}>reset nodes</button> <button onClick={onResetNodes}>reset nodes</button>
<button onClick={logNodes}>useNodes</button> <button onClick={logNodes}>useNodes</button>
<button onClick={deleteSelectedElements}>deleteSelectedElements</button>
<button onClick={deleteSomeElements}>deleteSomeElements</button>
</div> </div>
<Background /> <Background />
<MiniMap /> <MiniMap />
packages/background/CHANGELOG.md
+7
View File
@@ -1,5 +1,12 @@
# @reactflow/background # @reactflow/background
## 11.0.4
### Patch Changes
- Updated dependencies [[`740659c0`](https://github.com/wbkd/react-flow/commit/740659c0e788c7572d4a1e64e1d33d60712233fc), [`7902a3ce`](https://github.com/wbkd/react-flow/commit/7902a3ce3188426d5cd07cf0943a68f679e67948), [`b25d499e`](https://github.com/wbkd/react-flow/commit/b25d499ec05b5c6f21ac552d03650eb37433552e), [`4fc1253e`](https://github.com/wbkd/react-flow/commit/4fc1253eadf9b7dd392d8dc2348f44fa8d08f931), [`8ba4dd5d`](https://github.com/wbkd/react-flow/commit/8ba4dd5d1d4b2e6f107c148de62aec0b688d8b21)]:
- @reactflow/core@11.2.0
## 11.0.3 ## 11.0.3
### Patch Changes ### Patch Changes
packages/background/package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{ {
"name": "@reactflow/background", "name": "@reactflow/background",
"version": "11.0.3", "version": "11.0.4",
"description": "Background component with different variants for React Flow", "description": "Background component with different variants for React Flow",
"keywords": [ "keywords": [
"react", "react",
packages/controls/CHANGELOG.md
+7
View File
@@ -1,5 +1,12 @@
# @reactflow/controls # @reactflow/controls
## 11.0.4
### Patch Changes
- Updated dependencies [[`740659c0`](https://github.com/wbkd/react-flow/commit/740659c0e788c7572d4a1e64e1d33d60712233fc), [`7902a3ce`](https://github.com/wbkd/react-flow/commit/7902a3ce3188426d5cd07cf0943a68f679e67948), [`b25d499e`](https://github.com/wbkd/react-flow/commit/b25d499ec05b5c6f21ac552d03650eb37433552e), [`4fc1253e`](https://github.com/wbkd/react-flow/commit/4fc1253eadf9b7dd392d8dc2348f44fa8d08f931), [`8ba4dd5d`](https://github.com/wbkd/react-flow/commit/8ba4dd5d1d4b2e6f107c148de62aec0b688d8b21)]:
- @reactflow/core@11.2.0
## 11.0.3 ## 11.0.3
### Patch Changes ### Patch Changes
packages/controls/package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{ {
"name": "@reactflow/controls", "name": "@reactflow/controls",
"version": "11.0.3", "version": "11.0.4",
"description": "Component to control the viewport of a React Flow instance", "description": "Component to control the viewport of a React Flow instance",
"keywords": [ "keywords": [
"react", "react",
packages/core/CHANGELOG.md
+16
View File
@@ -1,5 +1,21 @@
# @reactflow/core # @reactflow/core
## 11.2.0
### Minor Changes
- [#2535](https://github.com/wbkd/react-flow/pull/2535) [`7902a3ce`](https://github.com/wbkd/react-flow/commit/7902a3ce3188426d5cd07cf0943a68f679e67948) Thanks [@moklick](https://github.com/moklick)! - Feat: Add edge label renderer
- [#2536](https://github.com/wbkd/react-flow/pull/2536) [`b25d499e`](https://github.com/wbkd/react-flow/commit/b25d499ec05b5c6f21ac552d03650eb37433552e) Thanks [@pengfu](https://github.com/pengfu)! - Feat: add deleteElements helper function
- [#2539](https://github.com/wbkd/react-flow/pull/2539) [`4fc1253e`](https://github.com/wbkd/react-flow/commit/4fc1253eadf9b7dd392d8dc2348f44fa8d08f931) Thanks [@moklick](https://github.com/moklick)! - Feat: add intersection helpers
- [#2530](https://github.com/wbkd/react-flow/pull/2530) [`8ba4dd5d`](https://github.com/wbkd/react-flow/commit/8ba4dd5d1d4b2e6f107c148de62aec0b688d8b21) Thanks [@moklick](https://github.com/moklick)! - Feat: Add pan and zoom to mini map
### Patch Changes
- [#2538](https://github.com/wbkd/react-flow/pull/2538) [`740659c0`](https://github.com/wbkd/react-flow/commit/740659c0e788c7572d4a1e64e1d33d60712233fc) Thanks [@neo](https://github.com/neo)! - Refactor: put React Flow in isolated stacking context
## 11.1.2 ## 11.1.2
### Patch Changes ### Patch Changes
packages/core/package.json
+2 -1
View File
@@ -1,6 +1,6 @@
{ {
"name": "@reactflow/core", "name": "@reactflow/core",
"version": "11.1.2", "version": "11.2.0",
"description": "Core components and util functions of React Flow.", "description": "Core components and util functions of React Flow.",
"keywords": [ "keywords": [
"react", "react",
@@ -58,6 +58,7 @@
"@reactflow/tsconfig": "workspace:*", "@reactflow/tsconfig": "workspace:*",
"@types/node": "^18.7.16", "@types/node": "^18.7.16",
"@types/react": "^18.0.17", "@types/react": "^18.0.17",
"@types/react-dom": "^18.0.6",
"react": "^18.2.0", "react": "^18.2.0",
"typescript": "^4.8.3" "typescript": "^4.8.3"
}, },
packages/core/src/components/EdgeLabelRenderer/index.tsx
+15
View File
@@ -0,0 +1,15 @@
import { useRef } from 'react';
import type { ReactNode } from 'react';
import { createPortal } from 'react-dom';
function EdgeLabelRenderer({ children }: { children: ReactNode }) {
const wrapperRef = useRef(document.getElementById('edgelabel-portal'));
if (!wrapperRef.current) {
return null;
}
return createPortal(children, wrapperRef.current);
}
export default EdgeLabelRenderer;
packages/core/src/container/GraphView/index.tsx
+2
View File
@@ -158,6 +158,8 @@ const GraphView = ({
disableKeyboardA11y={disableKeyboardA11y} disableKeyboardA11y={disableKeyboardA11y}
rfId={rfId} rfId={rfId}
/> />
<div className="react-flow__edgelabel-renderer" id="edgelabel-portal" />
<NodeRenderer <NodeRenderer
nodeTypes={nodeTypes} nodeTypes={nodeTypes}
onNodeClick={onNodeClick} onNodeClick={onNodeClick}
packages/core/src/container/ReactFlow/index.tsx
+2 -1
View File
@@ -51,8 +51,9 @@ const initDefaultViewport: Viewport = { x: 0, y: 0, zoom: 1 };
const wrapperStyle: CSSProperties = { const wrapperStyle: CSSProperties = {
width: '100%', width: '100%',
height: '100%', height: '100%',
position: 'relative',
overflow: 'hidden', overflow: 'hidden',
position: 'relative',
zIndex: 0,
}; };
const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>( const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
packages/core/src/container/ZoomPane/index.tsx
+7 -1
View File
@@ -173,9 +173,12 @@ const ZoomPane = ({
useEffect(() => { useEffect(() => {
if (d3Zoom) { if (d3Zoom) {
d3Zoom.on('start', (event: D3ZoomEvent<HTMLDivElement, any>) => { d3Zoom.on('start', (event: D3ZoomEvent<HTMLDivElement, any>) => {
if (!event.sourceEvent) {
return null;
}
const { onViewportChangeStart } = store.getState(); const { onViewportChangeStart } = store.getState();
isZoomingOrPanning.current = true; isZoomingOrPanning.current = true;
if (event.sourceEvent?.type === 'mousedown') { if (event.sourceEvent?.type === 'mousedown') {
store.setState({ paneDragging: true }); store.setState({ paneDragging: true });
} }
@@ -194,6 +197,9 @@ const ZoomPane = ({
useEffect(() => { useEffect(() => {
if (d3Zoom) { if (d3Zoom) {
d3Zoom.on('end', (event: D3ZoomEvent<HTMLDivElement, any>) => { d3Zoom.on('end', (event: D3ZoomEvent<HTMLDivElement, any>) => {
if (!event.sourceEvent) {
return null;
}
const { onViewportChangeEnd } = store.getState(); const { onViewportChangeEnd } = store.getState();
isZoomingOrPanning.current = false; isZoomingOrPanning.current = false;
packages/core/src/hooks/useGlobalKeyHandler.ts
+10 -80
View File
@@ -2,9 +2,8 @@ import { useEffect } from 'react';
import { useStoreApi } from '../hooks/useStore'; import { useStoreApi } from '../hooks/useStore';
import useKeyPress from './useKeyPress'; import useKeyPress from './useKeyPress';
import { getConnectedEdges } from '../utils/graph'; import type { KeyCode } from '../types';
import type { KeyCode, NodeChange, Node } from '../types'; import useReactFlow from './useReactFlow';
interface HookParams { interface HookParams {
deleteKeyCode: KeyCode | null; deleteKeyCode: KeyCode | null;
multiSelectionKeyCode: KeyCode | null; multiSelectionKeyCode: KeyCode | null;
@@ -12,87 +11,18 @@ interface HookParams {
export default ({ deleteKeyCode, multiSelectionKeyCode }: HookParams): void => { export default ({ deleteKeyCode, multiSelectionKeyCode }: HookParams): void => {
const store = useStoreApi(); const store = useStoreApi();
const { deleteElements } = useReactFlow();
const deleteKeyPressed = useKeyPress(deleteKeyCode); const deleteKeyPressed = useKeyPress(deleteKeyCode);
const multiSelectionKeyPressed = useKeyPress(multiSelectionKeyCode); const multiSelectionKeyPressed = useKeyPress(multiSelectionKeyCode);
useEffect(() => { useEffect(() => {
if (!deleteKeyPressed) { if (deleteKeyPressed) {
return; const { nodeInternals, edges } = store.getState();
} const nodes = Array.from(nodeInternals.values());
const selectedNodes = nodes.filter((node) => node.selected);
const { const selectedEdges = edges.filter((edge) => edge.selected);
nodeInternals, deleteElements({nodes: selectedNodes, edges: selectedEdges});
edges,
hasDefaultNodes,
hasDefaultEdges,
onNodesDelete,
onEdgesDelete,
onNodesChange,
onEdgesChange,
} = store.getState();
const nodes = Array.from(nodeInternals.values());
const nodesToRemove = nodes.reduce<Node[]>((res, node) => {
const parentSelected = !node.selected && node.parentNode && res.find((n) => n.id === node.parentNode);
const deletable = typeof node.deletable === 'boolean' ? node.deletable : true;
if (deletable && (node.selected || parentSelected)) {
res.push(node);
}
return res;
}, []);
const deletableEdges = edges.filter((e) => (typeof e.deletable === 'boolean' ? e.deletable : true));
const selectedEdges = deletableEdges.filter((e) => e.selected);
if (nodesToRemove || selectedEdges) {
const connectedEdges = getConnectedEdges(nodesToRemove, deletableEdges);
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) {
onEdgesChange(
edgeIdsToRemove.map((id) => ({
id,
type: 'remove',
}))
);
}
}
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 }); store.setState({ nodesSelectionActive: false });
} }
}, [deleteKeyPressed]); }, [deleteKeyPressed]);
packages/core/src/hooks/useReactFlow.ts
+157 -1
View File
@@ -11,7 +11,12 @@ import type {
EdgeResetChange, EdgeResetChange,
NodeRemoveChange, NodeRemoveChange,
EdgeRemoveChange, EdgeRemoveChange,
NodeChange,
Node,
Rect,
} from '../types'; } from '../types';
import { getConnectedEdges } from '../utils/graph';
import { getOverlappingArea, isRectObject, nodeToRect } from '../utils';
/* eslint-disable-next-line @typescript-eslint/no-explicit-any */ /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
export default function useReactFlow<NodeData = any, EdgeData = any>(): ReactFlowInstance<NodeData, EdgeData> { export default function useReactFlow<NodeData = any, EdgeData = any>(): ReactFlowInstance<NodeData, EdgeData> {
@@ -111,6 +116,140 @@ export default function useReactFlow<NodeData = any, EdgeData = any>(): ReactFlo
}; };
}, []); }, []);
const deleteElements = useCallback<Instance.DeleteElements>(({ nodes: nodesDeleted, edges: edgesDeleted }) => {
const {
nodeInternals,
edges,
hasDefaultNodes,
hasDefaultEdges,
onNodesDelete,
onEdgesDelete,
onNodesChange,
onEdgesChange,
} = store.getState();
const nodes = Array.from(nodeInternals.values());
const nodeIds = (nodesDeleted || []).map((node) => node.id);
const edgeIds = (edgesDeleted || []).map((edge) => edge.id);
const nodesToRemove = nodes.reduce<Node[]>((res, node) => {
const parentHit = !nodeIds.includes(node.id) && node.parentNode && res.find((n) => n.id === node.parentNode);
const deletable = typeof node.deletable === 'boolean' ? node.deletable : true;
if (deletable && (nodeIds.includes(node.id) || parentHit)) {
res.push(node);
}
return res;
}, []);
const deletableEdges = edges.filter((e) => (typeof e.deletable === 'boolean' ? e.deletable : true));
const initialHitEdges = deletableEdges.filter((e) => edgeIds.includes(e.id));
if (nodesToRemove || initialHitEdges) {
const connectedEdges = getConnectedEdges(nodesToRemove, deletableEdges);
const edgesToRemove = [...initialHitEdges, ...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) {
onEdgesChange(
edgeIdsToRemove.map((id) => ({
id,
type: 'remove',
}))
);
}
}
if (nodesToRemove.length > 0) {
onNodesDelete?.(nodesToRemove);
if (onNodesChange) {
const nodeChanges: NodeChange[] = nodesToRemove.map((n) => ({ id: n.id, type: 'remove' }));
onNodesChange(nodeChanges);
}
}
}
}, []);
const getNodeRect = useCallback(
(
nodeOrRect: (Partial<Node<NodeData>> & { id: Node['id'] }) | Rect
): [Rect | null, Node<NodeData> | null | undefined, boolean] => {
const isRect = isRectObject(nodeOrRect);
const node = isRect ? null : store.getState().nodeInternals.get(nodeOrRect.id);
if (!isRect && !node) {
[null, null, isRect];
}
const nodeRect = isRect ? nodeOrRect : nodeToRect(node!);
return [nodeRect, node, isRect];
},
[]
);
const getIntersectingNodes = useCallback<Instance.GetIntersectingNodes<NodeData>>(
(nodeOrRect, partially = true, nodes) => {
const [nodeRect, node, isRect] = getNodeRect(nodeOrRect);
if (!nodeRect) {
return [];
}
return (nodes || Array.from(store.getState().nodeInternals.values())).filter((n) => {
if (!isRect && (n.id === node!.id || !n.positionAbsolute)) {
return false;
}
const currNodeRect = nodeToRect(n);
const overlappingArea = getOverlappingArea(currNodeRect, nodeRect);
const partiallyVisible = partially && overlappingArea > 0;
return partiallyVisible || overlappingArea >= nodeOrRect.width! * nodeOrRect.height!;
});
},
[]
);
const isNodeIntersecting = useCallback<Instance.IsNodeIntersecting<NodeData>>(
(nodeOrRect, area, partially = true) => {
const [nodeRect] = getNodeRect(nodeOrRect);
if (!nodeRect) {
return false;
}
const overlappingArea = getOverlappingArea(nodeRect, area);
const partiallyVisible = partially && overlappingArea > 0;
return partiallyVisible || overlappingArea >= nodeOrRect.width! * nodeOrRect.height!;
},
[]
);
return useMemo(() => { return useMemo(() => {
return { return {
...viewportHelper, ...viewportHelper,
@@ -123,6 +262,23 @@ export default function useReactFlow<NodeData = any, EdgeData = any>(): ReactFlo
addNodes, addNodes,
addEdges, addEdges,
toObject, toObject,
deleteElements,
getIntersectingNodes,
isNodeIntersecting,
}; };
}, [viewportHelper, getNodes, getNode, getEdges, getEdge, setNodes, setEdges, addNodes, addEdges, toObject]); }, [
viewportHelper,
getNodes,
getNode,
getEdges,
getEdge,
setNodes,
setEdges,
addNodes,
addEdges,
toObject,
deleteElements,
getIntersectingNodes,
isNodeIntersecting,
]);
} }
packages/core/src/index.ts
+1
View File
@@ -24,6 +24,7 @@ export { applyNodeChanges, applyEdgeChanges } from './utils/changes';
export { getMarkerEnd } from './components/Edges/utils'; export { getMarkerEnd } from './components/Edges/utils';
export { default as ReactFlowProvider } from './components/ReactFlowProvider'; export { default as ReactFlowProvider } from './components/ReactFlowProvider';
export { default as Panel } from './components/Panel'; export { default as Panel } from './components/Panel';
export { default as EdgeLabelRenderer } from './components/EdgeLabelRenderer';
export { default as useReactFlow } from './hooks/useReactFlow'; export { default as useReactFlow } from './hooks/useReactFlow';
export { default as useUpdateNodeInternals } from './hooks/useUpdateNodeInternals'; export { default as useUpdateNodeInternals } from './hooks/useUpdateNodeInternals';
packages/core/src/styles/init.css
+7
View File
@@ -220,3 +220,10 @@
stroke-dashoffset: 10; stroke-dashoffset: 10;
} }
} }
.react-flow__edgelabel-renderer {
position: absolute;
width: 100%;
height: 100%;
pointer-events: none;
}
packages/core/src/types/instance.ts
+19 -1
View File
@@ -1,6 +1,6 @@
/* eslint-disable @typescript-eslint/no-explicit-any */ /* eslint-disable @typescript-eslint/no-explicit-any */
/* eslint-disable @typescript-eslint/no-namespace */ /* eslint-disable @typescript-eslint/no-namespace */
import { ViewportHelperFunctions, Viewport, Node, Edge } from '.'; import { ViewportHelperFunctions, Viewport, Node, Edge, Rect } from '.';
export type ReactFlowJsonObject<NodeData = any, EdgeData = any> = { export type ReactFlowJsonObject<NodeData = any, EdgeData = any> = {
nodes: Node<NodeData>[]; nodes: Node<NodeData>[];
@@ -8,6 +8,10 @@ export type ReactFlowJsonObject<NodeData = any, EdgeData = any> = {
viewport: Viewport; viewport: Viewport;
}; };
export type DeleteElementsOptions = {
nodes?: (Partial<Node> & { id: Node['id'] })[];
edges?: (Partial<Edge> & { id: Edge['id'] })[];
};
export namespace Instance { export namespace Instance {
export type GetNodes<NodeData> = () => Node<NodeData>[]; export type GetNodes<NodeData> = () => Node<NodeData>[];
export type SetNodes<NodeData> = ( export type SetNodes<NodeData> = (
@@ -22,6 +26,17 @@ export namespace Instance {
export type GetEdge<EdgeData> = (id: string) => Edge<EdgeData> | undefined; export type GetEdge<EdgeData> = (id: string) => Edge<EdgeData> | undefined;
export type AddEdges<EdgeData> = (payload: Edge<EdgeData>[] | Edge<EdgeData>) => void; export type AddEdges<EdgeData> = (payload: Edge<EdgeData>[] | Edge<EdgeData>) => void;
export type ToObject<NodeData = any, EdgeData = any> = () => ReactFlowJsonObject<NodeData, EdgeData>; export type ToObject<NodeData = any, EdgeData = any> = () => ReactFlowJsonObject<NodeData, EdgeData>;
export type DeleteElements = ({ nodes, edges }: DeleteElementsOptions) => void;
export type GetIntersectingNodes<NodeData> = (
node: (Partial<Node<NodeData>> & { id: Node['id'] }) | Rect,
partially?: boolean,
nodes?: Node<NodeData>[]
) => Node<NodeData>[];
export type IsNodeIntersecting<NodeData> = (
node: (Partial<Node<NodeData>> & { id: Node['id'] }) | Rect,
area: Rect,
partially?: boolean
) => boolean;
} }
export type ReactFlowInstance<NodeData = any, EdgeData = any> = { export type ReactFlowInstance<NodeData = any, EdgeData = any> = {
@@ -34,5 +49,8 @@ export type ReactFlowInstance<NodeData = any, EdgeData = any> = {
addEdges: Instance.AddEdges<EdgeData>; addEdges: Instance.AddEdges<EdgeData>;
getEdge: Instance.GetEdge<EdgeData>; getEdge: Instance.GetEdge<EdgeData>;
toObject: Instance.ToObject<NodeData, EdgeData>; toObject: Instance.ToObject<NodeData, EdgeData>;
deleteElements: Instance.DeleteElements;
getIntersectingNodes: Instance.GetIntersectingNodes<NodeData>;
isNodeIntersecting: Instance.IsNodeIntersecting<NodeData>;
viewportInitialized: boolean; viewportInitialized: boolean;
} & Omit<ViewportHelperFunctions, 'initialized'>; } & Omit<ViewportHelperFunctions, 'initialized'>;
packages/core/src/utils/graph.ts
+5 -7
View File
@@ -1,7 +1,7 @@
/* eslint-disable @typescript-eslint/no-explicit-any */ /* eslint-disable @typescript-eslint/no-explicit-any */
import type { Selection as D3Selection } from 'd3'; import type { Selection as D3Selection } from 'd3';
import { boxToRect, clamp, devWarn, getBoundsOfBoxes, rectToBox } from '../utils'; import { boxToRect, clamp, devWarn, getBoundsOfBoxes, getOverlappingArea, rectToBox } from '../utils';
import type { Node, Edge, Connection, EdgeMarkerType, Transform, XYPosition, Rect, NodeInternals } from '../types'; import type { Node, Edge, Connection, EdgeMarkerType, Transform, XYPosition, Rect, NodeInternals } from '../types';
export const isEdge = (element: Node | Connection | Edge): element is Edge => export const isEdge = (element: Node | Connection | Edge): element is Edge =>
@@ -161,12 +161,12 @@ export const getNodesInside = (
// set excludeNonSelectableNodes if you want to pay attention to the nodes "selectable" attribute // set excludeNonSelectableNodes if you want to pay attention to the nodes "selectable" attribute
excludeNonSelectableNodes = false excludeNonSelectableNodes = false
): Node[] => { ): Node[] => {
const rBox = rectToBox({ const paneRect = {
x: (rect.x - tx) / tScale, x: (rect.x - tx) / tScale,
y: (rect.y - ty) / tScale, y: (rect.y - ty) / tScale,
width: rect.width / tScale, width: rect.width / tScale,
height: rect.height / tScale, height: rect.height / tScale,
}); };
const visibleNodes: Node[] = []; const visibleNodes: Node[] = [];
@@ -177,10 +177,8 @@ export const getNodesInside = (
return false; return false;
} }
const nBox = rectToBox({ ...positionAbsolute, width: width || 0, height: height || 0 }); const nodeRect = { ...positionAbsolute, width: width || 0, height: height || 0 };
const xOverlap = Math.max(0, Math.min(rBox.x2, nBox.x2) - Math.max(rBox.x, nBox.x)); const overlappingArea = getOverlappingArea(paneRect, nodeRect);
const yOverlap = Math.max(0, Math.min(rBox.y2, nBox.y2) - Math.max(rBox.y, nBox.y));
const overlappingArea = Math.ceil(xOverlap * yOverlap);
const notInitialized = const notInitialized =
typeof width === 'undefined' || typeof height === 'undefined' || width === null || height === null; typeof width === 'undefined' || typeof height === 'undefined' || width === null || height === null;
packages/core/src/utils/index.ts
+17 -1
View File
@@ -1,4 +1,4 @@
import type { Dimensions, XYPosition, CoordinateExtent, Box, Rect } from '../types'; import type { Dimensions, Node, XYPosition, CoordinateExtent, Box, Rect } from '../types';
export const getDimensions = (node: HTMLDivElement): Dimensions => ({ export const getDimensions = (node: HTMLDivElement): Dimensions => ({
width: node.offsetWidth, width: node.offsetWidth,
@@ -36,9 +36,25 @@ export const boxToRect = ({ x, y, x2, y2 }: Box): Rect => ({
height: y2 - y, height: y2 - y,
}); });
export const nodeToRect = (node: Node): Rect => ({
...(node.positionAbsolute || { x: 0, y: 0 }),
width: node.width || 0,
height: node.height || 0,
});
export const getBoundsOfRects = (rect1: Rect, rect2: Rect): Rect => export const getBoundsOfRects = (rect1: Rect, rect2: Rect): Rect =>
boxToRect(getBoundsOfBoxes(rectToBox(rect1), rectToBox(rect2))); boxToRect(getBoundsOfBoxes(rectToBox(rect1), rectToBox(rect2)));
export const getOverlappingArea = (rectA: Rect, rectB: Rect): number => {
const xOverlap = Math.max(0, Math.min(rectA.x + rectA.width, rectB.x + rectB.width) - Math.max(rectA.x, rectB.x));
const yOverlap = Math.max(0, Math.min(rectA.y + rectA.height, rectB.y + rectB.height) - Math.max(rectA.y, rectB.y));
return Math.ceil(xOverlap * yOverlap);
};
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export const isRectObject = (obj: any): obj is Rect => !!obj.width && !!obj.height && !!obj.x && !!obj.y;
/* eslint-disable-next-line @typescript-eslint/no-explicit-any */ /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
export const isNumeric = (n: any): n is number => !isNaN(n) && isFinite(n); export const isNumeric = (n: any): n is number => !isNaN(n) && isFinite(n);
packages/minimap/CHANGELOG.md
+11
View File
@@ -1,5 +1,16 @@
# @reactflow/minimap # @reactflow/minimap
## 11.1.0
### Minor Changes
- [#2530](https://github.com/wbkd/react-flow/pull/2530) [`8ba4dd5d`](https://github.com/wbkd/react-flow/commit/8ba4dd5d1d4b2e6f107c148de62aec0b688d8b21) Thanks [@moklick](https://github.com/moklick)! - Feat: Add pan and zoom to mini map
### Patch Changes
- Updated dependencies [[`740659c0`](https://github.com/wbkd/react-flow/commit/740659c0e788c7572d4a1e64e1d33d60712233fc), [`7902a3ce`](https://github.com/wbkd/react-flow/commit/7902a3ce3188426d5cd07cf0943a68f679e67948), [`b25d499e`](https://github.com/wbkd/react-flow/commit/b25d499ec05b5c6f21ac552d03650eb37433552e), [`4fc1253e`](https://github.com/wbkd/react-flow/commit/4fc1253eadf9b7dd392d8dc2348f44fa8d08f931), [`8ba4dd5d`](https://github.com/wbkd/react-flow/commit/8ba4dd5d1d4b2e6f107c148de62aec0b688d8b21)]:
- @reactflow/core@11.2.0
## 11.0.3 ## 11.0.3
### Patch Changes ### Patch Changes
packages/minimap/package.json
+5 -1
View File
@@ -1,6 +1,6 @@
{ {
"name": "@reactflow/minimap", "name": "@reactflow/minimap",
"version": "11.0.3", "version": "11.1.0",
"description": "Minimap component for React Flow.", "description": "Minimap component for React Flow.",
"keywords": [ "keywords": [
"react", "react",
@@ -40,7 +40,11 @@
"dependencies": { "dependencies": {
"@babel/runtime": "^7.18.9", "@babel/runtime": "^7.18.9",
"@reactflow/core": "workspace:*", "@reactflow/core": "workspace:*",
"@types/d3-selection": "^3.0.3",
"@types/d3-zoom": "^3.0.1",
"classcat": "^5.0.3", "classcat": "^5.0.3",
"d3-selection": "^3.0.0",
"d3-zoom": "^3.0.0",
"zustand": "^4.1.1" "zustand": "^4.1.1"
}, },
"peerDependencies": { "peerDependencies": {
packages/minimap/src/MiniMap.tsx
+89 -5
View File
@@ -1,8 +1,13 @@
/* eslint-disable @typescript-eslint/ban-ts-comment */
/* eslint-disable @typescript-eslint/no-explicit-any */ /* eslint-disable @typescript-eslint/no-explicit-any */
import { memo } from 'react'; import { memo, useEffect, useRef } from 'react';
import type { MouseEvent } from 'react';
import cc from 'classcat'; import cc from 'classcat';
import shallow from 'zustand/shallow'; import shallow from 'zustand/shallow';
import { useStore, getRectOfNodes, getBoundsOfRects, Panel } from '@reactflow/core'; import { zoom, zoomIdentity } from 'd3-zoom';
import type { D3ZoomEvent } from 'd3-zoom';
import { select, pointer } from 'd3-selection';
import { useStore, getRectOfNodes, Panel, getBoundsOfRects, useStoreApi } from '@reactflow/core';
import type { ReactFlowState, Rect } from '@reactflow/core'; import type { ReactFlowState, Rect } from '@reactflow/core';
import MiniMapNode from './MiniMapNode'; import MiniMapNode from './MiniMapNode';
@@ -37,14 +42,20 @@ const ARIA_LABEL_KEY = 'react-flow__minimap-desc';
function MiniMap({ function MiniMap({
style, style,
className, className,
nodeStrokeColor = '#555', nodeStrokeColor = 'transparent',
nodeColor = '#fff', nodeColor = '#e2e2e2',
nodeClassName = '', nodeClassName = '',
nodeBorderRadius = 5, nodeBorderRadius = 5,
nodeStrokeWidth = 2, nodeStrokeWidth = 2,
maskColor = 'rgb(240, 242, 243, 0.7)', maskColor = 'rgb(240, 240, 240, 0.6)',
position = 'bottom-right', position = 'bottom-right',
onClick,
onNodeClick,
pannable = false,
zoomable = false,
}: MiniMapProps) { }: MiniMapProps) {
const store = useStoreApi();
const svg = useRef<SVGSVGElement>(null);
const { boundingRect, viewBB, nodes, rfId } = useStore(selector, shallow); const { boundingRect, viewBB, nodes, rfId } = useStore(selector, shallow);
const elementWidth = (style?.width as number) ?? defaultWidth; const elementWidth = (style?.width as number) ?? defaultWidth;
const elementHeight = (style?.height as number) ?? defaultHeight; const elementHeight = (style?.height as number) ?? defaultHeight;
@@ -63,6 +74,75 @@ function MiniMap({
const height = viewHeight + offset * 2; const height = viewHeight + offset * 2;
const shapeRendering = typeof window === 'undefined' || !!window.chrome ? 'crispEdges' : 'geometricPrecision'; const shapeRendering = typeof window === 'undefined' || !!window.chrome ? 'crispEdges' : 'geometricPrecision';
const labelledBy = `${ARIA_LABEL_KEY}-${rfId}`; const labelledBy = `${ARIA_LABEL_KEY}-${rfId}`;
const viewScaleRef = useRef(0);
viewScaleRef.current = viewScale;
useEffect(() => {
if (svg.current) {
const selection = select(svg.current as Element);
const zoomHandler = (event: D3ZoomEvent<SVGSVGElement, any>) => {
const { transform, d3Selection, d3Zoom } = store.getState();
if (event.sourceEvent.type !== 'wheel' || !d3Selection || !d3Zoom) {
return;
}
const pinchDelta =
-event.sourceEvent.deltaY *
(event.sourceEvent.deltaMode === 1 ? 0.05 : event.sourceEvent.deltaMode ? 1 : 0.002) *
10;
const zoom = transform[2] * Math.pow(2, pinchDelta);
d3Zoom.scaleTo(d3Selection, zoom);
};
const panHandler = (event: D3ZoomEvent<HTMLDivElement, any>) => {
const { transform, d3Selection, d3Zoom } = store.getState();
if (event.sourceEvent.type !== 'mousemove' || !d3Selection || !d3Zoom) {
return;
}
// @TODO: how to calculate the correct next position? Math.max(1, transform[2]) is a workaround.
const position = {
x: transform[0] - event.sourceEvent.movementX * viewScaleRef.current * Math.max(1, transform[2]),
y: transform[1] - event.sourceEvent.movementY * viewScaleRef.current * Math.max(1, transform[2]),
};
const nextTransform = zoomIdentity.translate(position.x, position.y).scale(transform[2]);
d3Zoom.transform(d3Selection, nextTransform);
};
const zoomAndPanHandler = zoom()
// @ts-ignore
.on('zoom', pannable ? panHandler : null)
// @ts-ignore
.on('zoom.wheel', zoomable ? zoomHandler : null);
selection.call(zoomAndPanHandler);
return () => {
selection.on('zoom', null);
};
}
}, [pannable, zoomable]);
const onSvgClick = onClick
? (event: MouseEvent) => {
const rfCoord = pointer(event);
onClick(event, { x: rfCoord[0], y: rfCoord[1] });
}
: undefined;
const onSvgNodeClick = onNodeClick
? (event: MouseEvent, nodeId: string) => {
const node = store.getState().nodeInternals.get(nodeId)!;
onNodeClick(event, node);
}
: undefined;
return ( return (
<Panel position={position} style={style} className={cc(['react-flow__minimap', className])}> <Panel position={position} style={style} className={cc(['react-flow__minimap', className])}>
@@ -72,6 +152,8 @@ function MiniMap({
viewBox={`${x} ${y} ${width} ${height}`} viewBox={`${x} ${y} ${width} ${height}`}
role="img" role="img"
aria-labelledby={labelledBy} aria-labelledby={labelledBy}
ref={svg}
onClick={onSvgClick}
> >
<title id={labelledBy}>React Flow mini map</title> <title id={labelledBy}>React Flow mini map</title>
{nodes.map((node) => { {nodes.map((node) => {
@@ -89,6 +171,8 @@ function MiniMap({
strokeColor={nodeStrokeColorFunc(node)} strokeColor={nodeStrokeColorFunc(node)}
strokeWidth={nodeStrokeWidth} strokeWidth={nodeStrokeWidth}
shapeRendering={shapeRendering} shapeRendering={shapeRendering}
onClick={onSvgNodeClick}
id={node.id}
/> />
); );
})} })}
packages/minimap/src/MiniMapNode.tsx
+6 -1
View File
@@ -1,8 +1,9 @@
import { memo } from 'react'; import { memo } from 'react';
import type { CSSProperties } from 'react'; import type { CSSProperties, MouseEvent } from 'react';
import cc from 'classcat'; import cc from 'classcat';
interface MiniMapNodeProps { interface MiniMapNodeProps {
id: string;
x: number; x: number;
y: number; y: number;
width: number; width: number;
@@ -14,9 +15,11 @@ interface MiniMapNodeProps {
strokeColor: string; strokeColor: string;
strokeWidth: number; strokeWidth: number;
style?: CSSProperties; style?: CSSProperties;
onClick?: (event: MouseEvent, id: string) => void;
} }
const MiniMapNode = ({ const MiniMapNode = ({
id,
x, x,
y, y,
width, width,
@@ -28,6 +31,7 @@ const MiniMapNode = ({
className, className,
borderRadius, borderRadius,
shapeRendering, shapeRendering,
onClick,
}: MiniMapNodeProps) => { }: MiniMapNodeProps) => {
const { background, backgroundColor } = style || {}; const { background, backgroundColor } = style || {};
const fill = (color || background || backgroundColor) as string; const fill = (color || background || backgroundColor) as string;
@@ -45,6 +49,7 @@ const MiniMapNode = ({
stroke={strokeColor} stroke={strokeColor}
strokeWidth={strokeWidth} strokeWidth={strokeWidth}
shapeRendering={shapeRendering} shapeRendering={shapeRendering}
onClick={onClick ? (event) => onClick(event, id) : undefined}
/> />
); );
}; };
packages/minimap/src/types.ts
+7 -3
View File
@@ -1,10 +1,10 @@
/* eslint-disable @typescript-eslint/no-explicit-any */ /* eslint-disable @typescript-eslint/no-explicit-any */
import type { HTMLAttributes } from 'react'; import type { HTMLAttributes, MouseEvent } from 'react';
import type { Node, PanelPosition } from '@reactflow/core'; import type { Node, PanelPosition, XYPosition } from '@reactflow/core';
export type GetMiniMapNodeAttribute<NodeData = any> = (node: Node<NodeData>) => string; export type GetMiniMapNodeAttribute<NodeData = any> = (node: Node<NodeData>) => string;
export type MiniMapProps<NodeData = any> = HTMLAttributes<SVGSVGElement> & { export type MiniMapProps<NodeData = any> = Omit<HTMLAttributes<SVGSVGElement>, 'onClick'> & {
nodeColor?: string | GetMiniMapNodeAttribute<NodeData>; nodeColor?: string | GetMiniMapNodeAttribute<NodeData>;
nodeStrokeColor?: string | GetMiniMapNodeAttribute<NodeData>; nodeStrokeColor?: string | GetMiniMapNodeAttribute<NodeData>;
nodeClassName?: string | GetMiniMapNodeAttribute<NodeData>; nodeClassName?: string | GetMiniMapNodeAttribute<NodeData>;
@@ -12,4 +12,8 @@ export type MiniMapProps<NodeData = any> = HTMLAttributes<SVGSVGElement> & {
nodeStrokeWidth?: number; nodeStrokeWidth?: number;
maskColor?: string; maskColor?: string;
position?: PanelPosition; position?: PanelPosition;
onClick?: (event: MouseEvent, position: XYPosition) => void;
onNodeClick?: (event: MouseEvent, node: Node<NodeData>) => void;
pannable?: boolean;
zoomable?: boolean;
}; };
packages/reactflow/CHANGELOG.md
+22
View File
@@ -1,5 +1,27 @@
# reactflow # reactflow
## 11.2.0
### Minor Changes
- [#2535](https://github.com/wbkd/react-flow/pull/2535) [`7902a3ce`](https://github.com/wbkd/react-flow/commit/7902a3ce3188426d5cd07cf0943a68f679e67948) Thanks [@moklick](https://github.com/moklick)! - Feat: Add edge label renderer
- [#2536](https://github.com/wbkd/react-flow/pull/2536) [`b25d499e`](https://github.com/wbkd/react-flow/commit/b25d499ec05b5c6f21ac552d03650eb37433552e) Thanks [@pengfu](https://github.com/pengfu)! - Feat: add deleteElements helper function
- [#2539](https://github.com/wbkd/react-flow/pull/2539) [`4fc1253e`](https://github.com/wbkd/react-flow/commit/4fc1253eadf9b7dd392d8dc2348f44fa8d08f931) Thanks [@moklick](https://github.com/moklick)! - Feat: add intersection helpers
- [#2530](https://github.com/wbkd/react-flow/pull/2530) [`8ba4dd5d`](https://github.com/wbkd/react-flow/commit/8ba4dd5d1d4b2e6f107c148de62aec0b688d8b21) Thanks [@moklick](https://github.com/moklick)! - Feat: Add pan and zoom to mini map
### Patch Changes
- [#2538](https://github.com/wbkd/react-flow/pull/2538) [`740659c0`](https://github.com/wbkd/react-flow/commit/740659c0e788c7572d4a1e64e1d33d60712233fc) Thanks [@neo](https://github.com/neo)! - Refactor: put React Flow in isolated stacking context
- Updated dependencies [[`740659c0`](https://github.com/wbkd/react-flow/commit/740659c0e788c7572d4a1e64e1d33d60712233fc), [`7902a3ce`](https://github.com/wbkd/react-flow/commit/7902a3ce3188426d5cd07cf0943a68f679e67948), [`b25d499e`](https://github.com/wbkd/react-flow/commit/b25d499ec05b5c6f21ac552d03650eb37433552e), [`4fc1253e`](https://github.com/wbkd/react-flow/commit/4fc1253eadf9b7dd392d8dc2348f44fa8d08f931), [`8ba4dd5d`](https://github.com/wbkd/react-flow/commit/8ba4dd5d1d4b2e6f107c148de62aec0b688d8b21)]:
- @reactflow/core@11.2.0
- @reactflow/minimap@11.1.0
- @reactflow/background@11.0.4
- @reactflow/controls@11.0.4
## 11.1.2 ## 11.1.2
Housekeeping release with some fixes and some cleanups for the types. Housekeeping release with some fixes and some cleanups for the types.
packages/reactflow/package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{ {
"name": "reactflow", "name": "reactflow",
"version": "11.1.2", "version": "11.2.0",
"description": "A highly customizable React library for building node-based editors and interactive flow charts", "description": "A highly customizable React library for building node-based editors and interactive flow charts",
"keywords": [ "keywords": [
"react", "react",
pnpm-lock.yaml
Generated
+79 -80
View File
@@ -32,15 +32,15 @@ importers:
'@changesets/changelog-github': registry.npmjs.org/@changesets/changelog-github/0.4.7 '@changesets/changelog-github': registry.npmjs.org/@changesets/changelog-github/0.4.7
'@changesets/cli': registry.npmjs.org/@changesets/cli/2.25.0 '@changesets/cli': registry.npmjs.org/@changesets/cli/2.25.0
'@preconstruct/cli': registry.npmjs.org/@preconstruct/cli/2.2.1 '@preconstruct/cli': registry.npmjs.org/@preconstruct/cli/2.2.1
'@typescript-eslint/eslint-plugin': registry.npmjs.org/@typescript-eslint/eslint-plugin/5.39.0_jdrczqv3ll7udvbunca43w7rz4 '@typescript-eslint/eslint-plugin': registry.npmjs.org/@typescript-eslint/eslint-plugin/5.42.0_dcn2ddfkdgyby36a3kmqplwxkq
'@typescript-eslint/parser': registry.npmjs.org/@typescript-eslint/parser/5.39.0_irgkl5vooow2ydyo6aokmferha '@typescript-eslint/parser': registry.npmjs.org/@typescript-eslint/parser/5.42.0_irgkl5vooow2ydyo6aokmferha
autoprefixer: registry.npmjs.org/autoprefixer/10.4.9_postcss@8.4.16 autoprefixer: registry.npmjs.org/autoprefixer/10.4.9_postcss@8.4.16
concurrently: registry.npmjs.org/concurrently/7.4.0 concurrently: registry.npmjs.org/concurrently/7.4.0
cypress: registry.npmjs.org/cypress/10.7.0 cypress: registry.npmjs.org/cypress/10.7.0
eslint: registry.npmjs.org/eslint/8.23.1 eslint: registry.npmjs.org/eslint/8.23.1
eslint-config-prettier: registry.npmjs.org/eslint-config-prettier/8.5.0_eslint@8.23.1 eslint-config-prettier: registry.npmjs.org/eslint-config-prettier/8.5.0_eslint@8.23.1
eslint-plugin-prettier: registry.npmjs.org/eslint-plugin-prettier/4.2.1_cabrci5exjdaojcvd6xoxgeowu eslint-plugin-prettier: registry.npmjs.org/eslint-plugin-prettier/4.2.1_cabrci5exjdaojcvd6xoxgeowu
eslint-plugin-react: registry.npmjs.org/eslint-plugin-react/7.31.9_eslint@8.23.1 eslint-plugin-react: registry.npmjs.org/eslint-plugin-react/7.31.10_eslint@8.23.1
postcss: registry.npmjs.org/postcss/8.4.16 postcss: registry.npmjs.org/postcss/8.4.16
postcss-cli: registry.npmjs.org/postcss-cli/10.0.0_postcss@8.4.16 postcss-cli: registry.npmjs.org/postcss-cli/10.0.0_postcss@8.4.16
postcss-combine-duplicated-selectors: registry.npmjs.org/postcss-combine-duplicated-selectors/10.0.3_postcss@8.4.16 postcss-combine-duplicated-selectors: registry.npmjs.org/postcss-combine-duplicated-selectors/10.0.3_postcss@8.4.16
@@ -152,6 +152,7 @@ importers:
'@types/d3-zoom': ^3.0.1 '@types/d3-zoom': ^3.0.1
'@types/node': ^18.7.16 '@types/node': ^18.7.16
'@types/react': ^18.0.17 '@types/react': ^18.0.17
'@types/react-dom': ^18.0.6
classcat: ^5.0.3 classcat: ^5.0.3
d3-drag: ^3.0.0 d3-drag: ^3.0.0
d3-selection: ^3.0.0 d3-selection: ^3.0.0
@@ -175,6 +176,7 @@ importers:
'@reactflow/tsconfig': link:../../tooling/tsconfig '@reactflow/tsconfig': link:../../tooling/tsconfig
'@types/node': registry.npmjs.org/@types/node/18.7.16 '@types/node': registry.npmjs.org/@types/node/18.7.16
'@types/react': registry.npmjs.org/@types/react/18.0.19 '@types/react': registry.npmjs.org/@types/react/18.0.19
'@types/react-dom': registry.npmjs.org/@types/react-dom/18.0.6
react: registry.npmjs.org/react/18.2.0 react: registry.npmjs.org/react/18.2.0
typescript: registry.npmjs.org/typescript/4.8.3 typescript: registry.npmjs.org/typescript/4.8.3
@@ -185,16 +187,24 @@ importers:
'@reactflow/eslint-config': workspace:^0.0.0 '@reactflow/eslint-config': workspace:^0.0.0
'@reactflow/rollup-config': workspace:* '@reactflow/rollup-config': workspace:*
'@reactflow/tsconfig': workspace:* '@reactflow/tsconfig': workspace:*
'@types/d3-selection': ^3.0.3
'@types/d3-zoom': ^3.0.1
'@types/node': ^18.7.16 '@types/node': ^18.7.16
'@types/react': ^18.0.19 '@types/react': ^18.0.19
classcat: ^5.0.3 classcat: ^5.0.3
d3-selection: ^3.0.0
d3-zoom: ^3.0.0
react: ^18.2.0 react: ^18.2.0
typescript: ^4.8.3 typescript: ^4.8.3
zustand: ^4.1.1 zustand: ^4.1.1
dependencies: dependencies:
'@babel/runtime': registry.npmjs.org/@babel/runtime/7.19.0 '@babel/runtime': registry.npmjs.org/@babel/runtime/7.19.0
'@reactflow/core': link:../core '@reactflow/core': link:../core
'@types/d3-selection': registry.npmjs.org/@types/d3-selection/3.0.3
'@types/d3-zoom': registry.npmjs.org/@types/d3-zoom/3.0.1
classcat: registry.npmjs.org/classcat/5.0.4 classcat: registry.npmjs.org/classcat/5.0.4
d3-selection: registry.npmjs.org/d3-selection/3.0.0
d3-zoom: registry.npmjs.org/d3-zoom/3.0.0
zustand: registry.npmjs.org/zustand/4.1.1_react@18.2.0 zustand: registry.npmjs.org/zustand/4.1.1_react@18.2.0
devDependencies: devDependencies:
'@reactflow/eslint-config': link:../../tooling/eslint-config '@reactflow/eslint-config': link:../../tooling/eslint-config
@@ -242,7 +252,7 @@ importers:
eslint: registry.npmjs.org/eslint/8.23.1 eslint: registry.npmjs.org/eslint/8.23.1
eslint-config-prettier: registry.npmjs.org/eslint-config-prettier/8.5.0_eslint@8.23.1 eslint-config-prettier: registry.npmjs.org/eslint-config-prettier/8.5.0_eslint@8.23.1
eslint-config-turbo: registry.npmjs.org/eslint-config-turbo/0.0.4_eslint@8.23.1 eslint-config-turbo: registry.npmjs.org/eslint-config-turbo/0.0.4_eslint@8.23.1
eslint-plugin-react: registry.npmjs.org/eslint-plugin-react/7.31.8_eslint@8.23.1 eslint-plugin-react: registry.npmjs.org/eslint-plugin-react/7.31.10_eslint@8.23.1
tooling/rollup-config: tooling/rollup-config:
specifiers: specifiers:
@@ -1682,6 +1692,12 @@ packages:
version: 6.2.3 version: 6.2.3
dev: true dev: true
registry.npmjs.org/@types/semver/7.3.13:
resolution: {integrity: sha512-21cFJr9z3g5dW8B0CVI9g2O9beqaThGQ6ZFBqHfwhzLDKUxaqTIy3vnfah/UPkfOiF2pLq+tGz+W8RyCskuslw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@types/semver/-/semver-7.3.13.tgz}
name: '@types/semver'
version: 7.3.13
dev: true
registry.npmjs.org/@types/sinonjs__fake-timers/8.1.1: registry.npmjs.org/@types/sinonjs__fake-timers/8.1.1:
resolution: {integrity: sha512-0kSuKjAS0TrGLJ0M/+8MaFkGsQhZpB6pxOmvS3K8FYI72K//YmdfoW9X2qPsAKh1mkwxGD5zib9s1FIFed6E8g==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@types/sinonjs__fake-timers/-/sinonjs__fake-timers-8.1.1.tgz} resolution: {integrity: sha512-0kSuKjAS0TrGLJ0M/+8MaFkGsQhZpB6pxOmvS3K8FYI72K//YmdfoW9X2qPsAKh1mkwxGD5zib9s1FIFed6E8g==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@types/sinonjs__fake-timers/-/sinonjs__fake-timers-8.1.1.tgz}
name: '@types/sinonjs__fake-timers' name: '@types/sinonjs__fake-timers'
@@ -1704,11 +1720,11 @@ packages:
dev: true dev: true
optional: true optional: true
registry.npmjs.org/@typescript-eslint/eslint-plugin/5.39.0_jdrczqv3ll7udvbunca43w7rz4: registry.npmjs.org/@typescript-eslint/eslint-plugin/5.42.0_dcn2ddfkdgyby36a3kmqplwxkq:
resolution: {integrity: sha512-xVfKOkBm5iWMNGKQ2fwX5GVgBuHmZBO1tCRwXmY5oAIsPscfwm2UADDuNB8ZVYCtpQvJK4xpjrK7jEhcJ0zY9A==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.39.0.tgz} resolution: {integrity: sha512-5TJh2AgL6+wpL8H/GTSjNb4WrjKoR2rqvFxR/DDTqYNk6uXn8BJMEcncLSpMbf/XV1aS0jAjYwn98uvVCiAywQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.42.0.tgz}
id: registry.npmjs.org/@typescript-eslint/eslint-plugin/5.39.0 id: registry.npmjs.org/@typescript-eslint/eslint-plugin/5.42.0
name: '@typescript-eslint/eslint-plugin' name: '@typescript-eslint/eslint-plugin'
version: 5.39.0 version: 5.42.0
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
peerDependencies: peerDependencies:
'@typescript-eslint/parser': ^5.0.0 '@typescript-eslint/parser': ^5.0.0
@@ -1718,13 +1734,14 @@ packages:
typescript: typescript:
optional: true optional: true
dependencies: dependencies:
'@typescript-eslint/parser': registry.npmjs.org/@typescript-eslint/parser/5.39.0_irgkl5vooow2ydyo6aokmferha '@typescript-eslint/parser': registry.npmjs.org/@typescript-eslint/parser/5.42.0_irgkl5vooow2ydyo6aokmferha
'@typescript-eslint/scope-manager': registry.npmjs.org/@typescript-eslint/scope-manager/5.39.0 '@typescript-eslint/scope-manager': registry.npmjs.org/@typescript-eslint/scope-manager/5.42.0
'@typescript-eslint/type-utils': registry.npmjs.org/@typescript-eslint/type-utils/5.39.0_irgkl5vooow2ydyo6aokmferha '@typescript-eslint/type-utils': registry.npmjs.org/@typescript-eslint/type-utils/5.42.0_irgkl5vooow2ydyo6aokmferha
'@typescript-eslint/utils': registry.npmjs.org/@typescript-eslint/utils/5.39.0_irgkl5vooow2ydyo6aokmferha '@typescript-eslint/utils': registry.npmjs.org/@typescript-eslint/utils/5.42.0_irgkl5vooow2ydyo6aokmferha
debug: registry.npmjs.org/debug/4.3.4 debug: registry.npmjs.org/debug/4.3.4
eslint: registry.npmjs.org/eslint/8.23.1 eslint: registry.npmjs.org/eslint/8.23.1
ignore: registry.npmjs.org/ignore/5.2.0 ignore: registry.npmjs.org/ignore/5.2.0
natural-compare-lite: registry.npmjs.org/natural-compare-lite/1.4.0
regexpp: registry.npmjs.org/regexpp/3.2.0 regexpp: registry.npmjs.org/regexpp/3.2.0
semver: registry.npmjs.org/semver/7.3.8 semver: registry.npmjs.org/semver/7.3.8
tsutils: registry.npmjs.org/tsutils/3.21.0_typescript@4.8.3 tsutils: registry.npmjs.org/tsutils/3.21.0_typescript@4.8.3
@@ -1733,11 +1750,11 @@ packages:
- supports-color - supports-color
dev: true dev: true
registry.npmjs.org/@typescript-eslint/parser/5.39.0_irgkl5vooow2ydyo6aokmferha: registry.npmjs.org/@typescript-eslint/parser/5.42.0_irgkl5vooow2ydyo6aokmferha:
resolution: {integrity: sha512-PhxLjrZnHShe431sBAGHaNe6BDdxAASDySgsBCGxcBecVCi8NQWxQZMcizNA4g0pN51bBAn/FUfkWG3SDVcGlA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.39.0.tgz} resolution: {integrity: sha512-Ixh9qrOTDRctFg3yIwrLkgf33AHyEIn6lhyf5cCfwwiGtkWhNpVKlEZApi3inGQR/barWnY7qY8FbGKBO7p3JA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.42.0.tgz}
id: registry.npmjs.org/@typescript-eslint/parser/5.39.0 id: registry.npmjs.org/@typescript-eslint/parser/5.42.0
name: '@typescript-eslint/parser' name: '@typescript-eslint/parser'
version: 5.39.0 version: 5.42.0
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
peerDependencies: peerDependencies:
eslint: ^6.0.0 || ^7.0.0 || ^8.0.0 eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
@@ -1746,9 +1763,9 @@ packages:
typescript: typescript:
optional: true optional: true
dependencies: dependencies:
'@typescript-eslint/scope-manager': registry.npmjs.org/@typescript-eslint/scope-manager/5.39.0 '@typescript-eslint/scope-manager': registry.npmjs.org/@typescript-eslint/scope-manager/5.42.0
'@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.39.0 '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.42.0
'@typescript-eslint/typescript-estree': registry.npmjs.org/@typescript-eslint/typescript-estree/5.39.0_typescript@4.8.3 '@typescript-eslint/typescript-estree': registry.npmjs.org/@typescript-eslint/typescript-estree/5.42.0_typescript@4.8.3
debug: registry.npmjs.org/debug/4.3.4 debug: registry.npmjs.org/debug/4.3.4
eslint: registry.npmjs.org/eslint/8.23.1 eslint: registry.npmjs.org/eslint/8.23.1
typescript: registry.npmjs.org/typescript/4.8.3 typescript: registry.npmjs.org/typescript/4.8.3
@@ -1756,21 +1773,21 @@ packages:
- supports-color - supports-color
dev: true dev: true
registry.npmjs.org/@typescript-eslint/scope-manager/5.39.0: registry.npmjs.org/@typescript-eslint/scope-manager/5.42.0:
resolution: {integrity: sha512-/I13vAqmG3dyqMVSZPjsbuNQlYS082Y7OMkwhCfLXYsmlI0ca4nkL7wJ/4gjX70LD4P8Hnw1JywUVVAwepURBw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.39.0.tgz} resolution: {integrity: sha512-l5/3IBHLH0Bv04y+H+zlcLiEMEMjWGaCX6WyHE5Uk2YkSGAMlgdUPsT/ywTSKgu9D1dmmKMYgYZijObfA39Wow==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.42.0.tgz}
name: '@typescript-eslint/scope-manager' name: '@typescript-eslint/scope-manager'
version: 5.39.0 version: 5.42.0
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
dependencies: dependencies:
'@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.39.0 '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.42.0
'@typescript-eslint/visitor-keys': registry.npmjs.org/@typescript-eslint/visitor-keys/5.39.0 '@typescript-eslint/visitor-keys': registry.npmjs.org/@typescript-eslint/visitor-keys/5.42.0
dev: true dev: true
registry.npmjs.org/@typescript-eslint/type-utils/5.39.0_irgkl5vooow2ydyo6aokmferha: registry.npmjs.org/@typescript-eslint/type-utils/5.42.0_irgkl5vooow2ydyo6aokmferha:
resolution: {integrity: sha512-KJHJkOothljQWzR3t/GunL0TPKY+fGJtnpl+pX+sJ0YiKTz3q2Zr87SGTmFqsCMFrLt5E0+o+S6eQY0FAXj9uA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.39.0.tgz} resolution: {integrity: sha512-HW14TXC45dFVZxnVW8rnUGnvYyRC0E/vxXShFCthcC9VhVTmjqOmtqj6H5rm9Zxv+ORxKA/1aLGD7vmlLsdlOg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.42.0.tgz}
id: registry.npmjs.org/@typescript-eslint/type-utils/5.39.0 id: registry.npmjs.org/@typescript-eslint/type-utils/5.42.0
name: '@typescript-eslint/type-utils' name: '@typescript-eslint/type-utils'
version: 5.39.0 version: 5.42.0
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
peerDependencies: peerDependencies:
eslint: '*' eslint: '*'
@@ -1779,8 +1796,8 @@ packages:
typescript: typescript:
optional: true optional: true
dependencies: dependencies:
'@typescript-eslint/typescript-estree': registry.npmjs.org/@typescript-eslint/typescript-estree/5.39.0_typescript@4.8.3 '@typescript-eslint/typescript-estree': registry.npmjs.org/@typescript-eslint/typescript-estree/5.42.0_typescript@4.8.3
'@typescript-eslint/utils': registry.npmjs.org/@typescript-eslint/utils/5.39.0_irgkl5vooow2ydyo6aokmferha '@typescript-eslint/utils': registry.npmjs.org/@typescript-eslint/utils/5.42.0_irgkl5vooow2ydyo6aokmferha
debug: registry.npmjs.org/debug/4.3.4 debug: registry.npmjs.org/debug/4.3.4
eslint: registry.npmjs.org/eslint/8.23.1 eslint: registry.npmjs.org/eslint/8.23.1
tsutils: registry.npmjs.org/tsutils/3.21.0_typescript@4.8.3 tsutils: registry.npmjs.org/tsutils/3.21.0_typescript@4.8.3
@@ -1789,18 +1806,18 @@ packages:
- supports-color - supports-color
dev: true dev: true
registry.npmjs.org/@typescript-eslint/types/5.39.0: registry.npmjs.org/@typescript-eslint/types/5.42.0:
resolution: {integrity: sha512-gQMZrnfEBFXK38hYqt8Lkwt8f4U6yq+2H5VDSgP/qiTzC8Nw8JO3OuSUOQ2qW37S/dlwdkHDntkZM6SQhKyPhw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/types/-/types-5.39.0.tgz} resolution: {integrity: sha512-t4lzO9ZOAUcHY6bXQYRuu+3SSYdD9TS8ooApZft4WARt4/f2Cj/YpvbTe8A4GuhT4bNW72goDMOy7SW71mZwGw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/types/-/types-5.42.0.tgz}
name: '@typescript-eslint/types' name: '@typescript-eslint/types'
version: 5.39.0 version: 5.42.0
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
dev: true dev: true
registry.npmjs.org/@typescript-eslint/typescript-estree/5.39.0_typescript@4.8.3: registry.npmjs.org/@typescript-eslint/typescript-estree/5.42.0_typescript@4.8.3:
resolution: {integrity: sha512-qLFQP0f398sdnogJoLtd43pUgB18Q50QSA+BTE5h3sUxySzbWDpTSdgt4UyxNSozY/oDK2ta6HVAzvGgq8JYnA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.39.0.tgz} resolution: {integrity: sha512-2O3vSq794x3kZGtV7i4SCWZWCwjEtkWfVqX4m5fbUBomOsEOyd6OAD1qU2lbvV5S8tgy/luJnOYluNyYVeOTTg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.42.0.tgz}
id: registry.npmjs.org/@typescript-eslint/typescript-estree/5.39.0 id: registry.npmjs.org/@typescript-eslint/typescript-estree/5.42.0
name: '@typescript-eslint/typescript-estree' name: '@typescript-eslint/typescript-estree'
version: 5.39.0 version: 5.42.0
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
peerDependencies: peerDependencies:
typescript: '*' typescript: '*'
@@ -1808,8 +1825,8 @@ packages:
typescript: typescript:
optional: true optional: true
dependencies: dependencies:
'@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.39.0 '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.42.0
'@typescript-eslint/visitor-keys': registry.npmjs.org/@typescript-eslint/visitor-keys/5.39.0 '@typescript-eslint/visitor-keys': registry.npmjs.org/@typescript-eslint/visitor-keys/5.42.0
debug: registry.npmjs.org/debug/4.3.4 debug: registry.npmjs.org/debug/4.3.4
globby: registry.npmjs.org/globby/11.1.0 globby: registry.npmjs.org/globby/11.1.0
is-glob: registry.npmjs.org/is-glob/4.0.3 is-glob: registry.npmjs.org/is-glob/4.0.3
@@ -1820,34 +1837,36 @@ packages:
- supports-color - supports-color
dev: true dev: true
registry.npmjs.org/@typescript-eslint/utils/5.39.0_irgkl5vooow2ydyo6aokmferha: registry.npmjs.org/@typescript-eslint/utils/5.42.0_irgkl5vooow2ydyo6aokmferha:
resolution: {integrity: sha512-+DnY5jkpOpgj+EBtYPyHRjXampJfC0yUZZzfzLuUWVZvCuKqSdJVC8UhdWipIw7VKNTfwfAPiOWzYkAwuIhiAg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.39.0.tgz} resolution: {integrity: sha512-JZ++3+h1vbeG1NUECXQZE3hg0kias9kOtcQr3+JVQ3whnjvKuMyktJAAIj6743OeNPnGBmjj7KEmiDL7qsdnCQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.42.0.tgz}
id: registry.npmjs.org/@typescript-eslint/utils/5.39.0 id: registry.npmjs.org/@typescript-eslint/utils/5.42.0
name: '@typescript-eslint/utils' name: '@typescript-eslint/utils'
version: 5.39.0 version: 5.42.0
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
peerDependencies: peerDependencies:
eslint: ^6.0.0 || ^7.0.0 || ^8.0.0 eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
dependencies: dependencies:
'@types/json-schema': registry.npmjs.org/@types/json-schema/7.0.11 '@types/json-schema': registry.npmjs.org/@types/json-schema/7.0.11
'@typescript-eslint/scope-manager': registry.npmjs.org/@typescript-eslint/scope-manager/5.39.0 '@types/semver': registry.npmjs.org/@types/semver/7.3.13
'@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.39.0 '@typescript-eslint/scope-manager': registry.npmjs.org/@typescript-eslint/scope-manager/5.42.0
'@typescript-eslint/typescript-estree': registry.npmjs.org/@typescript-eslint/typescript-estree/5.39.0_typescript@4.8.3 '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.42.0
'@typescript-eslint/typescript-estree': registry.npmjs.org/@typescript-eslint/typescript-estree/5.42.0_typescript@4.8.3
eslint: registry.npmjs.org/eslint/8.23.1 eslint: registry.npmjs.org/eslint/8.23.1
eslint-scope: registry.npmjs.org/eslint-scope/5.1.1 eslint-scope: registry.npmjs.org/eslint-scope/5.1.1
eslint-utils: registry.npmjs.org/eslint-utils/3.0.0_eslint@8.23.1 eslint-utils: registry.npmjs.org/eslint-utils/3.0.0_eslint@8.23.1
semver: registry.npmjs.org/semver/7.3.8
transitivePeerDependencies: transitivePeerDependencies:
- supports-color - supports-color
- typescript - typescript
dev: true dev: true
registry.npmjs.org/@typescript-eslint/visitor-keys/5.39.0: registry.npmjs.org/@typescript-eslint/visitor-keys/5.42.0:
resolution: {integrity: sha512-yyE3RPwOG+XJBLrhvsxAidUgybJVQ/hG8BhiJo0k8JSAYfk/CshVcxf0HwP4Jt7WZZ6vLmxdo1p6EyN3tzFTkg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.39.0.tgz} resolution: {integrity: sha512-QHbu5Hf/2lOEOwy+IUw0GoSCuAzByTAWWrOTKzTzsotiUnWFpuKnXcAhC9YztAf2EElQ0VvIK+pHJUPkM0q7jg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.42.0.tgz}
name: '@typescript-eslint/visitor-keys' name: '@typescript-eslint/visitor-keys'
version: 5.39.0 version: 5.42.0
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
dependencies: dependencies:
'@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.39.0 '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.42.0
eslint-visitor-keys: registry.npmjs.org/eslint-visitor-keys/3.3.0 eslint-visitor-keys: registry.npmjs.org/eslint-visitor-keys/3.3.0
dev: true dev: true
@@ -3370,37 +3389,11 @@ packages:
prettier-linter-helpers: registry.npmjs.org/prettier-linter-helpers/1.0.0 prettier-linter-helpers: registry.npmjs.org/prettier-linter-helpers/1.0.0
dev: true dev: true
registry.npmjs.org/eslint-plugin-react/7.31.8_eslint@8.23.1: registry.npmjs.org/eslint-plugin-react/7.31.10_eslint@8.23.1:
resolution: {integrity: sha512-5lBTZmgQmARLLSYiwI71tiGVTLUuqXantZM6vlSY39OaDSV0M7+32K5DnLkmFrwTe+Ksz0ffuLUC91RUviVZfw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.31.8.tgz} resolution: {integrity: sha512-e4N/nc6AAlg4UKW/mXeYWd3R++qUano5/o+t+wnWxIf+bLsOaH3a4q74kX3nDjYym3VBN4HyO9nEn1GcAqgQOA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.31.10.tgz}
id: registry.npmjs.org/eslint-plugin-react/7.31.8 id: registry.npmjs.org/eslint-plugin-react/7.31.10
name: eslint-plugin-react name: eslint-plugin-react
version: 7.31.8 version: 7.31.10
engines: {node: '>=4'}
peerDependencies:
eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8
dependencies:
array-includes: registry.npmjs.org/array-includes/3.1.5
array.prototype.flatmap: registry.npmjs.org/array.prototype.flatmap/1.3.0
doctrine: registry.npmjs.org/doctrine/2.1.0
eslint: registry.npmjs.org/eslint/8.23.1
estraverse: registry.npmjs.org/estraverse/5.3.0
jsx-ast-utils: registry.npmjs.org/jsx-ast-utils/3.3.3
minimatch: registry.npmjs.org/minimatch/3.1.2
object.entries: registry.npmjs.org/object.entries/1.1.5
object.fromentries: registry.npmjs.org/object.fromentries/2.0.5
object.hasown: registry.npmjs.org/object.hasown/1.1.1
object.values: registry.npmjs.org/object.values/1.1.5
prop-types: registry.npmjs.org/prop-types/15.8.1
resolve: registry.npmjs.org/resolve/2.0.0-next.4
semver: registry.npmjs.org/semver/6.3.0
string.prototype.matchall: registry.npmjs.org/string.prototype.matchall/4.0.7
dev: true
registry.npmjs.org/eslint-plugin-react/7.31.9_eslint@8.23.1:
resolution: {integrity: sha512-vrVJwusIw4L99lyfXjtCw8HWdloajsiYslMavogrBe2Gl8gr95TJsJnOMRasN4b4N24I3XuJf6aAV6MhyGmjqw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.31.9.tgz}
id: registry.npmjs.org/eslint-plugin-react/7.31.9
name: eslint-plugin-react
version: 7.31.9
engines: {node: '>=4'} engines: {node: '>=4'}
peerDependencies: peerDependencies:
eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8
@@ -5174,6 +5167,12 @@ packages:
hasBin: true hasBin: true
dev: true dev: true
registry.npmjs.org/natural-compare-lite/1.4.0:
resolution: {integrity: sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/natural-compare-lite/-/natural-compare-lite-1.4.0.tgz}
name: natural-compare-lite
version: 1.4.0
dev: true
registry.npmjs.org/natural-compare/1.4.0: registry.npmjs.org/natural-compare/1.4.0:
resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz} resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz}
name: natural-compare name: natural-compare