diff --git a/examples/vite-app/cypress/components/reactflow/multiple-instance.cy.tsx b/examples/vite-app/cypress/components/reactflow/multiple-instance.cy.tsx
new file mode 100644
index 00000000..b1b354a0
--- /dev/null
+++ b/examples/vite-app/cypress/components/reactflow/multiple-instance.cy.tsx
@@ -0,0 +1,63 @@
+import ReactFlow, { BaseEdge, EdgeLabelRenderer, EdgeProps, getSmoothStepPath, ReactFlowProvider } from 'reactflow';
+import * as simpleflow from '../../fixtures/simpleflow';
+
+function CustomEdge(props: EdgeProps) {
+ const [path, labelX, labelY] = getSmoothStepPath(props);
+ return (
+ <>
+
+
+ {props.id}
+
+
+ );
+}
+
+const simpleflow1 = { ...simpleflow };
+simpleflow1.edges = [...simpleflow1.edges];
+simpleflow1.edges[0] = { ...simpleflow1.edges[0], id: 'edge1' };
+
+const simpleflow2 = { ...simpleflow };
+simpleflow2.edges = [...simpleflow2.edges];
+simpleflow2.edges[0] = { ...simpleflow2.edges[0], id: 'edge2' };
+
+describe(': Multiple Instances', () => {
+ describe('render EdgeLabelRenderer', () => {
+ beforeEach(() => {
+ cy.mount(
+ <>
+
+
+
+
+
+
+
+ );
+ });
+
+ it('Each ReactFlow instance has one edge label in EdgeLabelRenderer', () => {
+ cy.get('.react-flow__edgelabel-renderer').should('have.length', 2);
+
+ cy.get('.react-flow__edgelabel-renderer')
+ .eq(0)
+ .within(() => {
+ cy.get('.label').should('have.length', 1).should('contain.text', 'edge1');
+ });
+
+ cy.get('.react-flow__edgelabel-renderer')
+ .eq(1)
+ .within(() => {
+ cy.get('.label').should('have.length', 1).should('contain.text', 'edge2');
+ });
+ });
+ });
+});
diff --git a/examples/vite-app/src/App/index.tsx b/examples/vite-app/src/App/index.tsx
index f0e32fb8..5b596f48 100644
--- a/examples/vite-app/src/App/index.tsx
+++ b/examples/vite-app/src/App/index.tsx
@@ -40,6 +40,7 @@ import EdgeRouting from '../examples/EdgeRouting';
import CancelConnection from '../examples/CancelConnection';
import InteractiveMinimap from '../examples/InteractiveMinimap';
import UseOnSelectionChange from '../examples/UseOnSelectionChange';
+import NodeToolbar from '../examples/NodeToolbar';
interface IRoute {
name: string;
@@ -168,6 +169,11 @@ const routes: IRoute[] = [
path: '/nodetypesobject-change',
component: NodeTypesObjectChange,
},
+ {
+ name: 'NodeToolbar',
+ path: '/node-toolbar',
+ component: NodeToolbar,
+ },
{
name: 'Overview',
path: '/overview',
diff --git a/examples/vite-app/src/examples/Basic/index.tsx b/examples/vite-app/src/examples/Basic/index.tsx
index d6f3950f..92077b35 100644
--- a/examples/vite-app/src/examples/Basic/index.tsx
+++ b/examples/vite-app/src/examples/Basic/index.tsx
@@ -8,6 +8,7 @@ import ReactFlow, {
Node,
Edge,
useReactFlow,
+ NodeOrigin,
} from 'reactflow';
const onNodeDrag = (_: MouseEvent, node: Node) => console.log('drag', node);
@@ -47,6 +48,8 @@ const initialEdges: Edge[] = [
{ id: 'e1-3', source: '1', target: '3' },
];
+const nodeOrigin: NodeOrigin = [0.5, 0.5];
+
const defaultEdgeOptions = { zIndex: 0 };
const BasicFlow = () => {
@@ -91,6 +94,7 @@ const BasicFlow = () => {
fitView
defaultEdgeOptions={defaultEdgeOptions}
selectNodesOnDrag={false}
+ nodeOrigin={nodeOrigin}
>
@@ -106,7 +110,9 @@ const BasicFlow = () => {
-
+
);
diff --git a/examples/vite-app/src/examples/NodeToolbar/CustomNode.tsx b/examples/vite-app/src/examples/NodeToolbar/CustomNode.tsx
new file mode 100644
index 00000000..4f8ab270
--- /dev/null
+++ b/examples/vite-app/src/examples/NodeToolbar/CustomNode.tsx
@@ -0,0 +1,19 @@
+import { memo, FC } from 'react';
+import { Handle, Position, NodeProps, NodeToolbar } from 'reactflow';
+
+const CustomNode: FC = ({ id, data }) => {
+ return (
+ <>
+
+
+
+
+
+ {data.label}
+
+
+
+ );
+};
+
+export default memo(CustomNode);
diff --git a/examples/vite-app/src/examples/NodeToolbar/index.tsx b/examples/vite-app/src/examples/NodeToolbar/index.tsx
new file mode 100644
index 00000000..9a5815df
--- /dev/null
+++ b/examples/vite-app/src/examples/NodeToolbar/index.tsx
@@ -0,0 +1,84 @@
+import ReactFlow, {
+ MiniMap,
+ Background,
+ BackgroundVariant,
+ Controls,
+ Node,
+ Edge,
+ NodeTypes,
+ Position,
+ NodeOrigin,
+} from 'reactflow';
+
+import CustomNode from './CustomNode';
+
+const nodeTypes: NodeTypes = {
+ custom: CustomNode,
+};
+
+const initialNodes: Node[] = [
+ {
+ id: '1',
+ type: 'custom',
+ data: { label: 'toolbar top', toolbarPosition: Position.Top },
+ position: { x: 0, y: 50 },
+ className: 'react-flow__node-default',
+ },
+ {
+ id: '2',
+ type: 'custom',
+ data: { label: 'toolbar right', toolbarPosition: Position.Right },
+ position: { x: 300, y: 0 },
+ className: 'react-flow__node-default',
+ },
+ {
+ id: '3',
+ type: 'custom',
+ data: { label: 'toolbar bottom', toolbarPosition: Position.Bottom },
+ position: { x: 400, y: 100 },
+ className: 'react-flow__node-default',
+ },
+ {
+ id: '4',
+ type: 'custom',
+ data: { label: 'toolbar left', toolbarPosition: Position.Left },
+ position: { x: 400, y: 200 },
+ className: 'react-flow__node-default',
+ },
+ {
+ id: '5',
+ type: 'custom',
+ data: { label: 'toolbar always open', toolbarPosition: Position.Top, toolbarVisible: true },
+ position: { x: 0, y: 200 },
+ className: 'react-flow__node-default',
+ },
+];
+
+const initialEdges: Edge[] = [
+ { id: 'e1-2', source: '1', target: '2' },
+ { id: 'e1-3', source: '1', target: '3' },
+ { id: 'e1-4', source: '1', target: '4' },
+];
+
+const defaultEdgeOptions = { zIndex: 0 };
+const nodeOrigin: NodeOrigin = [0.5, 0.5];
+
+export default function NodeToolbarExample() {
+ return (
+
+
+
+
+
+ );
+}
diff --git a/packages/background/CHANGELOG.md b/packages/background/CHANGELOG.md
index 7d2cfbff..eff5abc5 100644
--- a/packages/background/CHANGELOG.md
+++ b/packages/background/CHANGELOG.md
@@ -1,5 +1,12 @@
# @reactflow/background
+## 11.0.5
+
+### Patch Changes
+
+- Updated dependencies [[`92cf497e`](https://github.com/wbkd/react-flow/commit/92cf497eb72f21af592a53f5af9770c9f1e6d940), [`98116d43`](https://github.com/wbkd/react-flow/commit/98116d431f9fcdcc9b23a5b606a94ec0740b64cd), [`a39224b3`](https://github.com/wbkd/react-flow/commit/a39224b3a80afbdb83fc4490dd5f4f2be23cd4dd), [`5e8b67dd`](https://github.com/wbkd/react-flow/commit/5e8b67dd41f9bb60dcd7f5d14cc34b42c970e967), [`2a1c7db6`](https://github.com/wbkd/react-flow/commit/2a1c7db6b27ac0f4f81dcef2d593f4753c4321c7)]:
+ - @reactflow/core@11.3.0
+
## 11.0.4
### Patch Changes
diff --git a/packages/background/package.json b/packages/background/package.json
index b3575939..b821f6b8 100644
--- a/packages/background/package.json
+++ b/packages/background/package.json
@@ -1,6 +1,6 @@
{
"name": "@reactflow/background",
- "version": "11.0.4",
+ "version": "11.0.5",
"description": "Background component with different variants for React Flow",
"keywords": [
"react",
diff --git a/packages/controls/CHANGELOG.md b/packages/controls/CHANGELOG.md
index 92d15c50..729e65b7 100644
--- a/packages/controls/CHANGELOG.md
+++ b/packages/controls/CHANGELOG.md
@@ -1,5 +1,12 @@
# @reactflow/controls
+## 11.0.5
+
+### Patch Changes
+
+- Updated dependencies [[`92cf497e`](https://github.com/wbkd/react-flow/commit/92cf497eb72f21af592a53f5af9770c9f1e6d940), [`98116d43`](https://github.com/wbkd/react-flow/commit/98116d431f9fcdcc9b23a5b606a94ec0740b64cd), [`a39224b3`](https://github.com/wbkd/react-flow/commit/a39224b3a80afbdb83fc4490dd5f4f2be23cd4dd), [`5e8b67dd`](https://github.com/wbkd/react-flow/commit/5e8b67dd41f9bb60dcd7f5d14cc34b42c970e967), [`2a1c7db6`](https://github.com/wbkd/react-flow/commit/2a1c7db6b27ac0f4f81dcef2d593f4753c4321c7)]:
+ - @reactflow/core@11.3.0
+
## 11.0.4
### Patch Changes
diff --git a/packages/controls/package.json b/packages/controls/package.json
index 882da3b0..3084073e 100644
--- a/packages/controls/package.json
+++ b/packages/controls/package.json
@@ -1,6 +1,6 @@
{
"name": "@reactflow/controls",
- "version": "11.0.4",
+ "version": "11.0.5",
"description": "Component to control the viewport of a React Flow instance",
"keywords": [
"react",
diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md
index 3c8382a4..89c25608 100644
--- a/packages/core/CHANGELOG.md
+++ b/packages/core/CHANGELOG.md
@@ -1,15 +1,25 @@
# @reactflow/core
+## 11.3.0
+
+### Minor Changes
+
+- [#2563](https://github.com/wbkd/react-flow/pull/2563) [`98116d43`](https://github.com/wbkd/react-flow/commit/98116d431f9fcdcc9b23a5b606a94ec0740b64cd) Thanks [@chrtze](https://github.com/chrtze)! - Export a new component "NodeToolbar" that renders a fixed element attached to a node
+
+### Patch Changes
+
+- [#2561](https://github.com/wbkd/react-flow/pull/2561) [`92cf497e`](https://github.com/wbkd/react-flow/commit/92cf497eb72f21af592a53f5af9770c9f1e6d940) Thanks [@moklick](https://github.com/moklick)! - Fix multi selection and fitView when nodeOrigin is used
+- [#2560](https://github.com/wbkd/react-flow/pull/2560) [`a39224b3`](https://github.com/wbkd/react-flow/commit/a39224b3a80afbdb83fc4490dd5f4f2be23cd4dd) Thanks [@neo](https://github.com/neo)! - Always elevate zIndex when node is selected
+- [#2573](https://github.com/wbkd/react-flow/pull/2573) [`5e8b67dd`](https://github.com/wbkd/react-flow/commit/5e8b67dd41f9bb60dcd7f5d14cc34b42c970e967) Thanks [@moklick](https://github.com/moklick)! - Fix disappearing connection line for loose flows
+- [#2558](https://github.com/wbkd/react-flow/pull/2558) [`2a1c7db6`](https://github.com/wbkd/react-flow/commit/2a1c7db6b27ac0f4f81dcef2d593f4753c4321c7) Thanks [@moklick](https://github.com/moklick)! - EdgeLabelRenderer: handle multiple instances on a page
+
## 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
diff --git a/packages/core/package.json b/packages/core/package.json
index aef400ec..3f112b18 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,6 +1,6 @@
{
"name": "@reactflow/core",
- "version": "11.2.0",
+ "version": "11.3.0",
"description": "Core components and util functions of React Flow.",
"keywords": [
"react",
diff --git a/packages/core/src/components/ConnectionLine/index.tsx b/packages/core/src/components/ConnectionLine/index.tsx
index 767d16f3..28f1996a 100644
--- a/packages/core/src/components/ConnectionLine/index.tsx
+++ b/packages/core/src/components/ConnectionLine/index.tsx
@@ -7,7 +7,7 @@ import { getSmoothStepPath } from '../Edges/SmoothStepEdge';
import { getSimpleBezierPath } from '../Edges/SimpleBezierEdge';
import { internalsSymbol } from '../../utils';
import type { ConnectionLineComponent, HandleType, ReactFlowStore } from '../../types';
-import { Position, ConnectionLineType } from '../../types';
+import { Position, ConnectionLineType, ConnectionMode } from '../../types';
type ConnectionLineProps = {
connectionNodeId: string;
@@ -33,26 +33,33 @@ const ConnectionLine = ({
isConnectable,
CustomConnectionLineComponent,
}: ConnectionLineProps) => {
- const { fromNode, handleId, toX, toY } = useStore(
+ const { fromNode, handleId, toX, toY, connectionMode } = useStore(
useCallback(
(s: ReactFlowStore) => ({
fromNode: s.nodeInternals.get(connectionNodeId),
handleId: s.connectionHandleId,
toX: (s.connectionPosition.x - s.transform[0]) / s.transform[2],
toY: (s.connectionPosition.y - s.transform[1]) / s.transform[2],
+ connectionMode: s.connectionMode,
}),
[connectionNodeId]
),
shallow
);
const fromHandleBounds = fromNode?.[internalsSymbol]?.handleBounds;
+ let handleBounds = fromHandleBounds?.[connectionHandleType];
- if (!fromNode || !isConnectable || !fromHandleBounds?.[connectionHandleType]) {
+ if (connectionMode === ConnectionMode.Loose) {
+ handleBounds = handleBounds
+ ? handleBounds
+ : fromHandleBounds?.[connectionHandleType === 'source' ? 'target' : 'source'];
+ }
+
+ if (!fromNode || !isConnectable || !handleBounds) {
return null;
}
- const handleBound = fromHandleBounds[connectionHandleType]!;
- const fromHandle = handleId ? handleBound.find((d) => d.id === handleId) : handleBound[0];
+ const fromHandle = handleId ? handleBounds.find((d) => d.id === handleId) : handleBounds[0];
const fromHandleX = fromHandle ? fromHandle.x + fromHandle.width / 2 : (fromNode?.width ?? 0) / 2;
const fromHandleY = fromHandle ? fromHandle.y + fromHandle.height / 2 : fromNode?.height ?? 0;
const fromX = (fromNode?.positionAbsolute?.x || 0) + fromHandleX;
diff --git a/packages/core/src/components/EdgeLabelRenderer/index.tsx b/packages/core/src/components/EdgeLabelRenderer/index.tsx
index 0647364a..07477493 100644
--- a/packages/core/src/components/EdgeLabelRenderer/index.tsx
+++ b/packages/core/src/components/EdgeLabelRenderer/index.tsx
@@ -1,15 +1,18 @@
-import { useRef } from 'react';
import type { ReactNode } from 'react';
import { createPortal } from 'react-dom';
+import { useStore } from '../../hooks/useStore';
+import { ReactFlowState } from '../../types';
+
+const selector = (s: ReactFlowState) => s.domNode?.querySelector('.react-flow__edgelabel-renderer');
function EdgeLabelRenderer({ children }: { children: ReactNode }) {
- const wrapperRef = useRef(document.getElementById('edgelabel-portal'));
+ const edgeLabelRenderer = useStore(selector);
- if (!wrapperRef.current) {
+ if (!edgeLabelRenderer) {
return null;
}
- return createPortal(children, wrapperRef.current);
+ return createPortal(children, edgeLabelRenderer);
}
export default EdgeLabelRenderer;
diff --git a/packages/core/src/components/NodesSelection/index.tsx b/packages/core/src/components/NodesSelection/index.tsx
index 5e75d5ed..ed841db6 100644
--- a/packages/core/src/components/NodesSelection/index.tsx
+++ b/packages/core/src/components/NodesSelection/index.tsx
@@ -24,12 +24,11 @@ export interface NodesSelectionProps {
const selector = (s: ReactFlowState) => ({
transformString: `translate(${s.transform[0]}px,${s.transform[1]}px) scale(${s.transform[2]})`,
userSelectionActive: s.userSelectionActive,
- ...getRectOfNodes(Array.from(s.nodeInternals.values()).filter((n) => n.selected)),
});
const bboxSelector = (s: ReactFlowState) => {
const selectedNodes = Array.from(s.nodeInternals.values()).filter((n) => n.selected);
- return getRectOfNodes(selectedNodes);
+ return getRectOfNodes(selectedNodes, s.nodeOrigin);
};
function NodesSelection({ onSelectionContextMenu, noPanClassName, disableKeyboardA11y }: NodesSelectionProps) {
diff --git a/packages/core/src/components/UserSelection/index.tsx b/packages/core/src/components/UserSelection/index.tsx
index 142be18f..cbf1e830 100644
--- a/packages/core/src/components/UserSelection/index.tsx
+++ b/packages/core/src/components/UserSelection/index.tsx
@@ -101,9 +101,9 @@ const UserSelection = memo(({ selectionKeyPressed }: UserSelectionProps) => {
height: Math.abs(mousePos.y - startY),
};
- const { nodeInternals, edges, transform, onNodesChange, onEdgesChange } = store.getState();
+ const { nodeInternals, edges, transform, onNodesChange, onEdgesChange, nodeOrigin } = store.getState();
const nodes = Array.from(nodeInternals.values());
- const selectedNodes = getNodesInside(nodeInternals, nextUserSelectRect, transform, false, true);
+ const selectedNodes = getNodesInside(nodeInternals, nextUserSelectRect, transform, false, true, nodeOrigin);
const selectedEdgeIds = getConnectedEdges(selectedNodes, edges).map((e) => e.id);
const selectedNodeIds = selectedNodes.map((n) => n.id);
diff --git a/packages/core/src/container/GraphView/index.tsx b/packages/core/src/container/GraphView/index.tsx
index 4190bed0..3af02659 100644
--- a/packages/core/src/container/GraphView/index.tsx
+++ b/packages/core/src/container/GraphView/index.tsx
@@ -158,7 +158,7 @@ const GraphView = ({
disableKeyboardA11y={disableKeyboardA11y}
rfId={rfId}
/>
-
+
{
- const z = isNumeric(node.zIndex) ? node.zIndex : node.selected ? 1000 : 0;
+ const z = (isNumeric(node.zIndex) ? node.zIndex : 0) + (node.selected ? 1000 : 0);
const currInternals = nodeInternals.get(node.id);
const internals: Node = {
@@ -100,8 +100,18 @@ type InternalFitViewOptions = {
} & FitViewOptions;
export function fitView(get: StoreApi['getState'], options: InternalFitViewOptions = {}) {
- const { nodeInternals, width, height, minZoom, maxZoom, d3Zoom, d3Selection, fitViewOnInitDone, fitViewOnInit } =
- get();
+ const {
+ nodeInternals,
+ width,
+ height,
+ minZoom,
+ maxZoom,
+ d3Zoom,
+ d3Selection,
+ fitViewOnInitDone,
+ fitViewOnInit,
+ nodeOrigin,
+ } = get();
if ((options.initial && !fitViewOnInitDone && fitViewOnInit) || !options.initial) {
if (d3Zoom && d3Selection) {
@@ -112,7 +122,7 @@ export function fitView(get: StoreApi['getState'], options: Inte
const nodesInitialized = nodes.every((n) => n.width && n.height);
if (nodes.length > 0 && nodesInitialized) {
- const bounds = getRectOfNodes(nodes);
+ const bounds = getRectOfNodes(nodes, nodeOrigin);
const [x, y, zoom] = getTransformForBounds(
bounds,
width,
diff --git a/packages/core/src/utils/graph.ts b/packages/core/src/utils/graph.ts
index 78569276..0408603f 100644
--- a/packages/core/src/utils/graph.ts
+++ b/packages/core/src/utils/graph.ts
@@ -2,7 +2,17 @@
import type { Selection as D3Selection } from 'd3';
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,
+ NodeOrigin,
+} from '../types';
export const isEdge = (element: Node | Connection | Edge): element is Edge =>
'id' in element && 'source' in element && 'target' in element;
@@ -131,22 +141,26 @@ export const pointToRendererPoint = (
return position;
};
-export const getRectOfNodes = (nodes: Node[]): Rect => {
+export const getRectOfNodes = (nodes: Node[], nodeOrigin: NodeOrigin = [0, 0]): Rect => {
if (nodes.length === 0) {
return { x: 0, y: 0, width: 0, height: 0 };
}
const box = nodes.reduce(
- (currBox, { positionAbsolute, position, width, height }) =>
- getBoundsOfBoxes(
+ (currBox, { positionAbsolute, position, width, height }) => {
+ const nodeX = positionAbsolute ? positionAbsolute.x : position.x;
+ const nodeY = positionAbsolute ? positionAbsolute.y : position.y;
+
+ return getBoundsOfBoxes(
currBox,
rectToBox({
- x: positionAbsolute ? positionAbsolute.x : position.x,
- y: positionAbsolute ? positionAbsolute.y : position.y,
+ x: nodeX - nodeOrigin[0] * (width || 0),
+ y: nodeY - nodeOrigin[1] * (height || 0),
width: width || 0,
height: height || 0,
})
- ),
+ );
+ },
{ x: Infinity, y: Infinity, x2: -Infinity, y2: -Infinity }
);
@@ -159,7 +173,8 @@ export const getNodesInside = (
[tx, ty, tScale]: Transform = [0, 0, 1],
partially = false,
// set excludeNonSelectableNodes if you want to pay attention to the nodes "selectable" attribute
- excludeNonSelectableNodes = false
+ excludeNonSelectableNodes = false,
+ nodeOrigin: NodeOrigin = [0, 0]
): Node[] => {
const paneRect = {
x: (rect.x - tx) / tScale,
@@ -171,13 +186,18 @@ export const getNodesInside = (
const visibleNodes: Node[] = [];
nodeInternals.forEach((node) => {
- const { positionAbsolute = { x: 0, y: 0 }, width, height, selectable = true } = node;
+ const { width, height, selectable = true, positionAbsolute = { x: 0, y: 0 } } = node;
if (excludeNonSelectableNodes && !selectable) {
return false;
}
- const nodeRect = { ...positionAbsolute, width: width || 0, height: height || 0 };
+ const nodeRect = {
+ x: positionAbsolute.x - nodeOrigin[0] * (width || 0),
+ y: positionAbsolute.y - nodeOrigin[1] * (height || 0),
+ width: width || 0,
+ height: height || 0,
+ };
const overlappingArea = getOverlappingArea(paneRect, nodeRect);
const notInitialized =
typeof width === 'undefined' || typeof height === 'undefined' || width === null || height === null;
@@ -223,3 +243,4 @@ export const getTransformForBounds = (
export const getD3Transition = (selection: D3Selection, duration = 0) => {
return selection.transition().duration(duration);
};
+
diff --git a/packages/minimap/CHANGELOG.md b/packages/minimap/CHANGELOG.md
index c9660630..e23e9f1d 100644
--- a/packages/minimap/CHANGELOG.md
+++ b/packages/minimap/CHANGELOG.md
@@ -1,5 +1,17 @@
# @reactflow/minimap
+## 11.2.0
+
+### Minor Changes
+
+- [#2562](https://github.com/wbkd/react-flow/pull/2562) [`d745aa33`](https://github.com/wbkd/react-flow/commit/d745aa33fcd1333e12929c862f9a3d6de53f7179) Thanks [@moklick](https://github.com/moklick)! - Add maskStrokeColor and maskStrokeWidth props
+- [#2545](https://github.com/wbkd/react-flow/pull/2545) [`8f63f751`](https://github.com/wbkd/react-flow/commit/8f63f751e302d3c935865760d2134350c31ab93f) Thanks [@chrtze](https://github.com/chrtze)! - add a new property "ariaLabel" to configure or remove the aria-label of the minimap component
+
+### Patch Changes
+
+- Updated dependencies [[`92cf497e`](https://github.com/wbkd/react-flow/commit/92cf497eb72f21af592a53f5af9770c9f1e6d940), [`98116d43`](https://github.com/wbkd/react-flow/commit/98116d431f9fcdcc9b23a5b606a94ec0740b64cd), [`a39224b3`](https://github.com/wbkd/react-flow/commit/a39224b3a80afbdb83fc4490dd5f4f2be23cd4dd), [`5e8b67dd`](https://github.com/wbkd/react-flow/commit/5e8b67dd41f9bb60dcd7f5d14cc34b42c970e967), [`2a1c7db6`](https://github.com/wbkd/react-flow/commit/2a1c7db6b27ac0f4f81dcef2d593f4753c4321c7)]:
+ - @reactflow/core@11.3.0
+
## 11.1.0
### Minor Changes
diff --git a/packages/minimap/package.json b/packages/minimap/package.json
index 49dcd7cc..f2fc7d20 100644
--- a/packages/minimap/package.json
+++ b/packages/minimap/package.json
@@ -1,6 +1,6 @@
{
"name": "@reactflow/minimap",
- "version": "11.1.0",
+ "version": "11.2.0",
"description": "Minimap component for React Flow.",
"keywords": [
"react",
diff --git a/packages/minimap/src/MiniMap.tsx b/packages/minimap/src/MiniMap.tsx
index f2487f18..4764a987 100644
--- a/packages/minimap/src/MiniMap.tsx
+++ b/packages/minimap/src/MiniMap.tsx
@@ -30,15 +30,15 @@ const selector = (s: ReactFlowState) => {
return {
nodes: nodes.filter((node) => !node.hidden && node.width && node.height),
viewBB,
- boundingRect: nodes.length > 0 ? getBoundsOfRects(getRectOfNodes(nodes), viewBB) : viewBB,
+ boundingRect: nodes.length > 0 ? getBoundsOfRects(getRectOfNodes(nodes, s.nodeOrigin), viewBB) : viewBB,
rfId: s.rfId,
+ nodeOrigin: s.nodeOrigin,
};
};
const getAttrFunction = (func: any): GetMiniMapNodeAttribute => (func instanceof Function ? func : () => func);
const ARIA_LABEL_KEY = 'react-flow__minimap-desc';
-
function MiniMap({
style,
className,
@@ -48,15 +48,18 @@ function MiniMap({
nodeBorderRadius = 5,
nodeStrokeWidth = 2,
maskColor = 'rgb(240, 240, 240, 0.6)',
+ maskStrokeColor = 'none',
+ maskStrokeWidth = 1,
position = 'bottom-right',
onClick,
onNodeClick,
pannable = false,
zoomable = false,
+ ariaLabel = 'React Flow mini map',
}: MiniMapProps) {
const store = useStoreApi();
const svg = useRef(null);
- const { boundingRect, viewBB, nodes, rfId } = useStore(selector, shallow);
+ const { boundingRect, viewBB, nodes, rfId, nodeOrigin } = useStore(selector, shallow);
const elementWidth = (style?.width as number) ?? defaultWidth;
const elementHeight = (style?.height as number) ?? defaultHeight;
const nodeColorFunc = getAttrFunction(nodeColor);
@@ -155,33 +158,33 @@ function MiniMap({
ref={svg}
onClick={onSvgClick}
>
- React Flow mini map
- {nodes.map((node) => {
- return (
-
- );
- })}
+ {ariaLabel && {ariaLabel}}
+ {nodes.map((node) => (
+
+ ))}
diff --git a/packages/minimap/src/types.ts b/packages/minimap/src/types.ts
index 63d8c6d9..7d006329 100644
--- a/packages/minimap/src/types.ts
+++ b/packages/minimap/src/types.ts
@@ -11,9 +11,12 @@ export type MiniMapProps = Omit, '
nodeBorderRadius?: number;
nodeStrokeWidth?: number;
maskColor?: string;
+ maskStrokeColor?: string;
+ maskStrokeWidth?: number;
position?: PanelPosition;
onClick?: (event: MouseEvent, position: XYPosition) => void;
onNodeClick?: (event: MouseEvent, node: Node) => void;
pannable?: boolean;
zoomable?: boolean;
+ ariaLabel?: string | null;
};
diff --git a/packages/node-toolbar/.eslintrc.js b/packages/node-toolbar/.eslintrc.js
new file mode 100644
index 00000000..31cfbd11
--- /dev/null
+++ b/packages/node-toolbar/.eslintrc.js
@@ -0,0 +1,4 @@
+module.exports = {
+ root: true,
+ extends: ['@reactflow/eslint-config'],
+};
diff --git a/packages/node-toolbar/CHANGELOG.md b/packages/node-toolbar/CHANGELOG.md
new file mode 100644
index 00000000..9854f032
--- /dev/null
+++ b/packages/node-toolbar/CHANGELOG.md
@@ -0,0 +1,7 @@
+# @reactflow/node-toolbar
+
+## 1.0.0
+
+### Major Changes
+
+- [#2563](https://github.com/wbkd/react-flow/pull/2563) [`98116d43`](https://github.com/wbkd/react-flow/commit/98116d431f9fcdcc9b23a5b606a94ec0740b64cd) Thanks [@chrtze](https://github.com/chrtze)! - Export a new component "NodeToolbar" that renders a fixed element attached to a node
diff --git a/packages/node-toolbar/README.md b/packages/node-toolbar/README.md
new file mode 100644
index 00000000..210d62ac
--- /dev/null
+++ b/packages/node-toolbar/README.md
@@ -0,0 +1,10 @@
+# @reactflow/node-toolbar
+
+A toolbar component for React Flow that can be attached to a node.
+
+## Installation
+
+```sh
+npm install @reactflow/node-toolbar
+```
+
diff --git a/packages/node-toolbar/package.json b/packages/node-toolbar/package.json
new file mode 100644
index 00000000..ad15e213
--- /dev/null
+++ b/packages/node-toolbar/package.json
@@ -0,0 +1,66 @@
+{
+ "name": "@reactflow/node-toolbar",
+ "version": "1.0.0",
+ "description": "A toolbar component for React Flow that can be attached to a node.",
+ "keywords": [
+ "react",
+ "node-based UI",
+ "graph",
+ "diagram",
+ "workflow",
+ "react-flow"
+ ],
+ "files": [
+ "dist"
+ ],
+ "source": "src/index.tsx",
+ "main": "dist/umd/index.js",
+ "module": "dist/esm/index.js",
+ "types": "dist/esm/index.d.ts",
+ "sideEffects": [
+ "*.css"
+ ],
+ "publishConfig": {
+ "access": "public"
+ },
+ "license": "MIT",
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/wbkd/react-flow.git",
+ "directory": "packages/node-toolbar"
+ },
+ "scripts": {
+ "dev": "concurrently \"rollup --config node:@reactflow/rollup-config --watch\" pnpm:css-watch",
+ "build": "rollup --config node:@reactflow/rollup-config --environment NODE_ENV:production",
+ "lint": "eslint --ext .js,.jsx,.ts,.tsx src",
+ "typecheck": "tsc --noEmit"
+ },
+ "dependencies": {
+ "@babel/runtime": "^7.18.9",
+ "@reactflow/core": "workspace:*",
+ "classcat": "^5.0.3",
+ "zustand": "^4.1.1"
+ },
+ "peerDependencies": {
+ "react": ">=17",
+ "react-dom": ">=17"
+ },
+ "devDependencies": {
+ "@reactflow/eslint-config": "workspace:^0.0.0",
+ "@reactflow/rollup-config": "workspace:*",
+ "@reactflow/tsconfig": "workspace:*",
+ "@types/node": "^18.7.16",
+ "@types/react": "^18.0.19",
+ "@types/react-dom": "^18.0.6",
+ "react": "^18.2.0",
+ "typescript": "^4.8.3"
+ },
+ "rollup": {
+ "globals": {
+ "zustand": "Zustand",
+ "zustand/shallow": "zustandShallow",
+ "classcat": "cc"
+ },
+ "name": "ReactFlowNodeToolbar"
+ }
+}
diff --git a/packages/node-toolbar/src/NodeToolbar.tsx b/packages/node-toolbar/src/NodeToolbar.tsx
new file mode 100644
index 00000000..caadf257
--- /dev/null
+++ b/packages/node-toolbar/src/NodeToolbar.tsx
@@ -0,0 +1,100 @@
+import { useCallback, CSSProperties } from 'react';
+import {
+ Node,
+ ReactFlowState,
+ useStore,
+ getRectOfNodes,
+ Transform,
+ Rect,
+ Position,
+ internalsSymbol,
+} from '@reactflow/core';
+import cc from 'classcat';
+import shallow from 'zustand/shallow';
+
+import NodeToolbarPortal from './NodeToolbarPortal';
+import { NodeToolbarProps } from './types';
+
+type SelectedNode = Node | undefined;
+
+const nodeEqualityFn = (a: SelectedNode, b: SelectedNode) =>
+ a?.positionAbsolute?.x === b?.positionAbsolute?.x &&
+ a?.positionAbsolute?.y === b?.positionAbsolute?.y &&
+ a?.width === b?.width &&
+ a?.height === b?.height &&
+ a?.selected === b?.selected &&
+ a?.[internalsSymbol]?.z === b?.[internalsSymbol]?.z;
+
+const storeSelector = (state: ReactFlowState) => ({
+ transform: state.transform,
+ nodeOrigin: state.nodeOrigin,
+ selectedNodesCount: Array.from(state.nodeInternals.values()).filter((node) => node.selected).length,
+});
+
+function getTransform(nodeRect: Rect, transform: Transform, position: Position, offset: number): string {
+ // position === Position.Top
+ let xPos = (nodeRect.x + nodeRect.width / 2) * transform[2] + transform[0];
+ let yPos = nodeRect.y * transform[2] + transform[1] - offset;
+ let xShift = -50;
+ let yShift = -100;
+
+ switch (position) {
+ case Position.Right:
+ xPos = (nodeRect.x + nodeRect.width) * transform[2] + transform[0] + offset;
+ yPos = (nodeRect.y + nodeRect.height / 2) * transform[2] + transform[1];
+ xShift = 0;
+ yShift = -50;
+ break;
+ case Position.Bottom:
+ yPos = (nodeRect.y + nodeRect.height) * transform[2] + transform[1] + offset;
+ yShift = 0;
+ break;
+ case Position.Left:
+ xPos = nodeRect.x * transform[2] + transform[0] - offset;
+ yPos = (nodeRect.y + nodeRect.height / 2) * transform[2] + transform[1];
+ xShift = -100;
+ yShift = -50;
+ break;
+ }
+
+ return `translate(${xPos}px, ${yPos}px) translate(${xShift}%, ${yShift}%)`;
+}
+
+function NodeToolbar({
+ nodeId,
+ children,
+ className,
+ style,
+ isVisible,
+ position = Position.Top,
+ offset = 10,
+ ...rest
+}: NodeToolbarProps) {
+ const nodeSelector = useCallback((state: ReactFlowState): SelectedNode => state.nodeInternals.get(nodeId), [nodeId]);
+ const node = useStore(nodeSelector, nodeEqualityFn);
+ const { transform, nodeOrigin, selectedNodesCount } = useStore(storeSelector, shallow);
+ const isActive = typeof isVisible === 'boolean' ? isVisible : node?.selected && selectedNodesCount === 1;
+
+ if (!isActive || !node) {
+ return null;
+ }
+
+ const nodeRect: Rect = getRectOfNodes([node], nodeOrigin);
+
+ const wrapperStyle: CSSProperties = {
+ position: 'absolute',
+ transform: getTransform(nodeRect, transform, position, offset),
+ zIndex: (node[internalsSymbol]?.z || 1) + 1,
+ ...style,
+ };
+
+ return (
+
+
+ {children}
+
+
+ );
+}
+
+export default NodeToolbar;
diff --git a/packages/node-toolbar/src/NodeToolbarPortal.tsx b/packages/node-toolbar/src/NodeToolbarPortal.tsx
new file mode 100644
index 00000000..732362e5
--- /dev/null
+++ b/packages/node-toolbar/src/NodeToolbarPortal.tsx
@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import { createPortal } from 'react-dom';
+import { ReactFlowState, useStore } from '@reactflow/core';
+
+const selector = (state: ReactFlowState) => state.domNode?.querySelector('.react-flow__renderer');
+
+function NodeToolbarPortal({ children }: { children: ReactNode }) {
+ const wrapperRef = useStore(selector);
+
+ if (!wrapperRef) {
+ return null;
+ }
+
+ return createPortal(children, wrapperRef);
+}
+
+export default NodeToolbarPortal;
diff --git a/packages/node-toolbar/src/index.tsx b/packages/node-toolbar/src/index.tsx
new file mode 100644
index 00000000..3cded08b
--- /dev/null
+++ b/packages/node-toolbar/src/index.tsx
@@ -0,0 +1,2 @@
+export { default as NodeToolbar } from './NodeToolbar';
+export * from './types';
diff --git a/packages/node-toolbar/src/types.ts b/packages/node-toolbar/src/types.ts
new file mode 100644
index 00000000..1e6576b6
--- /dev/null
+++ b/packages/node-toolbar/src/types.ts
@@ -0,0 +1,9 @@
+import { Position } from '@reactflow/core';
+import type { HTMLAttributes } from 'react';
+
+export type NodeToolbarProps = HTMLAttributes & {
+ nodeId: string;
+ isVisible?: boolean;
+ position?: Position;
+ offset?: number;
+};
diff --git a/packages/node-toolbar/tsconfig.json b/packages/node-toolbar/tsconfig.json
new file mode 100644
index 00000000..994d3bf0
--- /dev/null
+++ b/packages/node-toolbar/tsconfig.json
@@ -0,0 +1,6 @@
+{
+ "extends": "@reactflow/tsconfig/react.json",
+ "display": "@reactflow/node-toolbar",
+ "include": ["**/*.ts", "**/*.tsx"],
+ "exclude": ["node_modules", "dist"]
+}
diff --git a/packages/reactflow/CHANGELOG.md b/packages/reactflow/CHANGELOG.md
index 10b93714..10c2affd 100644
--- a/packages/reactflow/CHANGELOG.md
+++ b/packages/reactflow/CHANGELOG.md
@@ -1,15 +1,34 @@
# reactflow
+## 11.3.0
+
+### Minor Changes
+
+- [#2562](https://github.com/wbkd/react-flow/pull/2562) [`d745aa33`](https://github.com/wbkd/react-flow/commit/d745aa33fcd1333e12929c862f9a3d6de53f7179) Thanks [@moklick](https://github.com/moklick)! - Minimap: Add `maskStrokeColor` and `maskStrokeWidth` props
+- [#2563](https://github.com/wbkd/react-flow/pull/2563) [`98116d43`](https://github.com/wbkd/react-flow/commit/98116d431f9fcdcc9b23a5b606a94ec0740b64cd) Thanks [@chrtze](https://github.com/chrtze)! - Core: Add `` component that renders a fixed element attached to a node
+- [#2545](https://github.com/wbkd/react-flow/pull/2545) [`8f63f751`](https://github.com/wbkd/react-flow/commit/8f63f751e302d3c935865760d2134350c31ab93f) Thanks [@chrtze](https://github.com/chrtze)! - Minimap: Add `ariaLabel` prop to configure or remove the aria-label
+
+### Patch Changes
+
+- [#2561](https://github.com/wbkd/react-flow/pull/2561) [`92cf497e`](https://github.com/wbkd/react-flow/commit/92cf497eb72f21af592a53f5af9770c9f1e6d940) Thanks [@moklick](https://github.com/moklick)! - Core: Fix multi selection and fitView when nodeOrigin is used
+- [#2560](https://github.com/wbkd/react-flow/pull/2560) [`a39224b3`](https://github.com/wbkd/react-flow/commit/a39224b3a80afbdb83fc4490dd5f4f2be23cd4dd) Thanks [@neo](https://github.com/neo)! - Core: Always elevate zIndex when node is selected
+- [#2573](https://github.com/wbkd/react-flow/pull/2573) [`5e8b67dd`](https://github.com/wbkd/react-flow/commit/5e8b67dd41f9bb60dcd7f5d14cc34b42c970e967) Thanks [@moklick](https://github.com/moklick)! - Core: Fix disappearing connection line for loose flows
+- [#2558](https://github.com/wbkd/react-flow/pull/2558) [`2a1c7db6`](https://github.com/wbkd/react-flow/commit/2a1c7db6b27ac0f4f81dcef2d593f4753c4321c7) Thanks [@moklick](https://github.com/moklick)! - Core: Handle multiple instances on a page for EdgeLabelRenderer
+
+- Updated dependencies [[`d745aa33`](https://github.com/wbkd/react-flow/commit/d745aa33fcd1333e12929c862f9a3d6de53f7179), [`92cf497e`](https://github.com/wbkd/react-flow/commit/92cf497eb72f21af592a53f5af9770c9f1e6d940), [`98116d43`](https://github.com/wbkd/react-flow/commit/98116d431f9fcdcc9b23a5b606a94ec0740b64cd), [`8f63f751`](https://github.com/wbkd/react-flow/commit/8f63f751e302d3c935865760d2134350c31ab93f), [`a39224b3`](https://github.com/wbkd/react-flow/commit/a39224b3a80afbdb83fc4490dd5f4f2be23cd4dd), [`5e8b67dd`](https://github.com/wbkd/react-flow/commit/5e8b67dd41f9bb60dcd7f5d14cc34b42c970e967), [`2a1c7db6`](https://github.com/wbkd/react-flow/commit/2a1c7db6b27ac0f4f81dcef2d593f4753c4321c7), [`c793433c`](https://github.com/wbkd/react-flow/commit/c793433cafc214281ae97c9a32f5ac2fe453c34f)]:
+ - @reactflow/minimap@11.2.0
+ - @reactflow/core@11.3.0
+ - @reactflow/node-toolbar@1.0.0
+ - @reactflow/background@11.0.5
+ - @reactflow/controls@11.0.5
+
## 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
diff --git a/packages/reactflow/package.json b/packages/reactflow/package.json
index 3cd02d16..1178425d 100644
--- a/packages/reactflow/package.json
+++ b/packages/reactflow/package.json
@@ -1,6 +1,6 @@
{
"name": "reactflow",
- "version": "11.2.0",
+ "version": "11.3.0",
"description": "A highly customizable React library for building node-based editors and interactive flow charts",
"keywords": [
"react",
@@ -38,7 +38,8 @@
"@reactflow/background": "workspace:*",
"@reactflow/controls": "workspace:*",
"@reactflow/core": "workspace:*",
- "@reactflow/minimap": "workspace:*"
+ "@reactflow/minimap": "workspace:*",
+ "@reactflow/node-toolbar": "workspace:*"
},
"peerDependencies": {
"react": ">=17",
@@ -58,7 +59,8 @@
"@reactflow/background": "ReactFlowBackground",
"@reactflow/controls": "ReactFlowControls",
"@reactflow/core": "ReactFlowCore",
- "@reactflow/minimap": "ReactFlowMinimap"
+ "@reactflow/minimap": "ReactFlowMinimap",
+ "@reactflow/node-toolbar": "ReactFlowNodeToolbar"
},
"name": "ReactFlow"
}
diff --git a/packages/reactflow/src/index.ts b/packages/reactflow/src/index.ts
index 310aa1f4..935883dc 100644
--- a/packages/reactflow/src/index.ts
+++ b/packages/reactflow/src/index.ts
@@ -2,5 +2,6 @@ export * from '@reactflow/core';
export * from '@reactflow/minimap';
export * from '@reactflow/controls';
export * from '@reactflow/background';
+export * from '@reactflow/node-toolbar';
export { ReactFlow as default } from '@reactflow/core';
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index afd78032..6d9414c1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -32,8 +32,8 @@ importers:
'@changesets/changelog-github': registry.npmjs.org/@changesets/changelog-github/0.4.7
'@changesets/cli': registry.npmjs.org/@changesets/cli/2.25.0
'@preconstruct/cli': registry.npmjs.org/@preconstruct/cli/2.2.1
- '@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.42.0_irgkl5vooow2ydyo6aokmferha
+ '@typescript-eslint/eslint-plugin': registry.npmjs.org/@typescript-eslint/eslint-plugin/5.43.0_nctdnn3gg3ldnbrjkdxid2oppm
+ '@typescript-eslint/parser': registry.npmjs.org/@typescript-eslint/parser/5.43.0_irgkl5vooow2ydyo6aokmferha
autoprefixer: registry.npmjs.org/autoprefixer/10.4.9_postcss@8.4.16
concurrently: registry.npmjs.org/concurrently/7.4.0
cypress: registry.npmjs.org/cypress/10.7.0
@@ -215,6 +215,35 @@ importers:
react: registry.npmjs.org/react/18.2.0
typescript: registry.npmjs.org/typescript/4.8.3
+ packages/node-toolbar:
+ specifiers:
+ '@babel/runtime': ^7.18.9
+ '@reactflow/core': workspace:*
+ '@reactflow/eslint-config': workspace:^0.0.0
+ '@reactflow/rollup-config': workspace:*
+ '@reactflow/tsconfig': workspace:*
+ '@types/node': ^18.7.16
+ '@types/react': ^18.0.19
+ '@types/react-dom': ^18.0.6
+ classcat: ^5.0.3
+ react: ^18.2.0
+ typescript: ^4.8.3
+ zustand: ^4.1.1
+ dependencies:
+ '@babel/runtime': registry.npmjs.org/@babel/runtime/7.19.0
+ '@reactflow/core': link:../core
+ classcat: registry.npmjs.org/classcat/5.0.4
+ zustand: registry.npmjs.org/zustand/4.1.1_react@18.2.0
+ devDependencies:
+ '@reactflow/eslint-config': link:../../tooling/eslint-config
+ '@reactflow/rollup-config': link:../../tooling/rollup-config
+ '@reactflow/tsconfig': link:../../tooling/tsconfig
+ '@types/node': registry.npmjs.org/@types/node/18.7.16
+ '@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
+ typescript: registry.npmjs.org/typescript/4.8.3
+
packages/reactflow:
specifiers:
'@reactflow/background': workspace:*
@@ -222,6 +251,7 @@ importers:
'@reactflow/core': workspace:*
'@reactflow/eslint-config': workspace:^0.0.0
'@reactflow/minimap': workspace:*
+ '@reactflow/node-toolbar': workspace:*
'@reactflow/rollup-config': workspace:*
'@reactflow/tsconfig': workspace:*
'@types/node': ^18.7.16
@@ -233,6 +263,7 @@ importers:
'@reactflow/controls': link:../controls
'@reactflow/core': link:../core
'@reactflow/minimap': link:../minimap
+ '@reactflow/node-toolbar': link:../node-toolbar
devDependencies:
'@reactflow/eslint-config': link:../../tooling/eslint-config
'@reactflow/rollup-config': link:../../tooling/rollup-config
@@ -1720,11 +1751,11 @@ packages:
dev: true
optional: true
- registry.npmjs.org/@typescript-eslint/eslint-plugin/5.42.0_dcn2ddfkdgyby36a3kmqplwxkq:
- 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.42.0
+ registry.npmjs.org/@typescript-eslint/eslint-plugin/5.43.0_nctdnn3gg3ldnbrjkdxid2oppm:
+ resolution: {integrity: sha512-wNPzG+eDR6+hhW4yobEmpR36jrqqQv1vxBq5LJO3fBAktjkvekfr4BRl+3Fn1CM/A+s8/EiGUbOMDoYqWdbtXA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.43.0.tgz}
+ id: registry.npmjs.org/@typescript-eslint/eslint-plugin/5.43.0
name: '@typescript-eslint/eslint-plugin'
- version: 5.42.0
+ version: 5.43.0
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
peerDependencies:
'@typescript-eslint/parser': ^5.0.0
@@ -1734,10 +1765,10 @@ packages:
typescript:
optional: true
dependencies:
- '@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.42.0
- '@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.42.0_irgkl5vooow2ydyo6aokmferha
+ '@typescript-eslint/parser': registry.npmjs.org/@typescript-eslint/parser/5.43.0_irgkl5vooow2ydyo6aokmferha
+ '@typescript-eslint/scope-manager': registry.npmjs.org/@typescript-eslint/scope-manager/5.43.0
+ '@typescript-eslint/type-utils': registry.npmjs.org/@typescript-eslint/type-utils/5.43.0_irgkl5vooow2ydyo6aokmferha
+ '@typescript-eslint/utils': registry.npmjs.org/@typescript-eslint/utils/5.43.0_irgkl5vooow2ydyo6aokmferha
debug: registry.npmjs.org/debug/4.3.4
eslint: registry.npmjs.org/eslint/8.23.1
ignore: registry.npmjs.org/ignore/5.2.0
@@ -1750,11 +1781,11 @@ packages:
- supports-color
dev: true
- registry.npmjs.org/@typescript-eslint/parser/5.42.0_irgkl5vooow2ydyo6aokmferha:
- 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.42.0
+ registry.npmjs.org/@typescript-eslint/parser/5.43.0_irgkl5vooow2ydyo6aokmferha:
+ resolution: {integrity: sha512-2iHUK2Lh7PwNUlhFxxLI2haSDNyXvebBO9izhjhMoDC+S3XI9qt2DGFUsiJ89m2k7gGYch2aEpYqV5F/+nwZug==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.43.0.tgz}
+ id: registry.npmjs.org/@typescript-eslint/parser/5.43.0
name: '@typescript-eslint/parser'
- version: 5.42.0
+ version: 5.43.0
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
peerDependencies:
eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
@@ -1763,9 +1794,9 @@ packages:
typescript:
optional: true
dependencies:
- '@typescript-eslint/scope-manager': registry.npmjs.org/@typescript-eslint/scope-manager/5.42.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.42.0_typescript@4.8.3
+ '@typescript-eslint/scope-manager': registry.npmjs.org/@typescript-eslint/scope-manager/5.43.0
+ '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.43.0
+ '@typescript-eslint/typescript-estree': registry.npmjs.org/@typescript-eslint/typescript-estree/5.43.0_typescript@4.8.3
debug: registry.npmjs.org/debug/4.3.4
eslint: registry.npmjs.org/eslint/8.23.1
typescript: registry.npmjs.org/typescript/4.8.3
@@ -1773,21 +1804,21 @@ packages:
- supports-color
dev: true
- registry.npmjs.org/@typescript-eslint/scope-manager/5.42.0:
- 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}
+ registry.npmjs.org/@typescript-eslint/scope-manager/5.43.0:
+ resolution: {integrity: sha512-XNWnGaqAtTJsUiZaoiGIrdJYHsUOd3BZ3Qj5zKp9w6km6HsrjPk/TGZv0qMTWyWj0+1QOqpHQ2gZOLXaGA9Ekw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.43.0.tgz}
name: '@typescript-eslint/scope-manager'
- version: 5.42.0
+ version: 5.43.0
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
dependencies:
- '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.42.0
- '@typescript-eslint/visitor-keys': registry.npmjs.org/@typescript-eslint/visitor-keys/5.42.0
+ '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.43.0
+ '@typescript-eslint/visitor-keys': registry.npmjs.org/@typescript-eslint/visitor-keys/5.43.0
dev: true
- registry.npmjs.org/@typescript-eslint/type-utils/5.42.0_irgkl5vooow2ydyo6aokmferha:
- 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.42.0
+ registry.npmjs.org/@typescript-eslint/type-utils/5.43.0_irgkl5vooow2ydyo6aokmferha:
+ resolution: {integrity: sha512-K21f+KY2/VvYggLf5Pk4tgBOPs2otTaIHy2zjclo7UZGLyFH86VfUOm5iq+OtDtxq/Zwu2I3ujDBykVW4Xtmtg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.43.0.tgz}
+ id: registry.npmjs.org/@typescript-eslint/type-utils/5.43.0
name: '@typescript-eslint/type-utils'
- version: 5.42.0
+ version: 5.43.0
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
peerDependencies:
eslint: '*'
@@ -1796,8 +1827,8 @@ packages:
typescript:
optional: true
dependencies:
- '@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.42.0_irgkl5vooow2ydyo6aokmferha
+ '@typescript-eslint/typescript-estree': registry.npmjs.org/@typescript-eslint/typescript-estree/5.43.0_typescript@4.8.3
+ '@typescript-eslint/utils': registry.npmjs.org/@typescript-eslint/utils/5.43.0_irgkl5vooow2ydyo6aokmferha
debug: registry.npmjs.org/debug/4.3.4
eslint: registry.npmjs.org/eslint/8.23.1
tsutils: registry.npmjs.org/tsutils/3.21.0_typescript@4.8.3
@@ -1806,18 +1837,18 @@ packages:
- supports-color
dev: true
- registry.npmjs.org/@typescript-eslint/types/5.42.0:
- 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}
+ registry.npmjs.org/@typescript-eslint/types/5.43.0:
+ resolution: {integrity: sha512-jpsbcD0x6AUvV7tyOlyvon0aUsQpF8W+7TpJntfCUWU1qaIKu2K34pMwQKSzQH8ORgUrGYY6pVIh1Pi8TNeteg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/types/-/types-5.43.0.tgz}
name: '@typescript-eslint/types'
- version: 5.42.0
+ version: 5.43.0
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
dev: true
- registry.npmjs.org/@typescript-eslint/typescript-estree/5.42.0_typescript@4.8.3:
- 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.42.0
+ registry.npmjs.org/@typescript-eslint/typescript-estree/5.43.0_typescript@4.8.3:
+ resolution: {integrity: sha512-BZ1WVe+QQ+igWal2tDbNg1j2HWUkAa+CVqdU79L4HP9izQY6CNhXfkNwd1SS4+sSZAP/EthI1uiCSY/+H0pROg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.43.0.tgz}
+ id: registry.npmjs.org/@typescript-eslint/typescript-estree/5.43.0
name: '@typescript-eslint/typescript-estree'
- version: 5.42.0
+ version: 5.43.0
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
peerDependencies:
typescript: '*'
@@ -1825,8 +1856,8 @@ packages:
typescript:
optional: true
dependencies:
- '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.42.0
- '@typescript-eslint/visitor-keys': registry.npmjs.org/@typescript-eslint/visitor-keys/5.42.0
+ '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.43.0
+ '@typescript-eslint/visitor-keys': registry.npmjs.org/@typescript-eslint/visitor-keys/5.43.0
debug: registry.npmjs.org/debug/4.3.4
globby: registry.npmjs.org/globby/11.1.0
is-glob: registry.npmjs.org/is-glob/4.0.3
@@ -1837,20 +1868,20 @@ packages:
- supports-color
dev: true
- registry.npmjs.org/@typescript-eslint/utils/5.42.0_irgkl5vooow2ydyo6aokmferha:
- 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.42.0
+ registry.npmjs.org/@typescript-eslint/utils/5.43.0_irgkl5vooow2ydyo6aokmferha:
+ resolution: {integrity: sha512-8nVpA6yX0sCjf7v/NDfeaOlyaIIqL7OaIGOWSPFqUKK59Gnumd3Wa+2l8oAaYO2lk0sO+SbWFWRSvhu8gLGv4A==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.43.0.tgz}
+ id: registry.npmjs.org/@typescript-eslint/utils/5.43.0
name: '@typescript-eslint/utils'
- version: 5.42.0
+ version: 5.43.0
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
peerDependencies:
eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
dependencies:
'@types/json-schema': registry.npmjs.org/@types/json-schema/7.0.11
'@types/semver': registry.npmjs.org/@types/semver/7.3.13
- '@typescript-eslint/scope-manager': registry.npmjs.org/@typescript-eslint/scope-manager/5.42.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.42.0_typescript@4.8.3
+ '@typescript-eslint/scope-manager': registry.npmjs.org/@typescript-eslint/scope-manager/5.43.0
+ '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.43.0
+ '@typescript-eslint/typescript-estree': registry.npmjs.org/@typescript-eslint/typescript-estree/5.43.0_typescript@4.8.3
eslint: registry.npmjs.org/eslint/8.23.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
@@ -1860,13 +1891,13 @@ packages:
- typescript
dev: true
- registry.npmjs.org/@typescript-eslint/visitor-keys/5.42.0:
- 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}
+ registry.npmjs.org/@typescript-eslint/visitor-keys/5.43.0:
+ resolution: {integrity: sha512-icl1jNH/d18OVHLfcwdL3bWUKsBeIiKYTGxMJCoGe7xFht+E4QgzOqoWYrU8XSLJWhVw8nTacbm03v23J/hFTg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.43.0.tgz}
name: '@typescript-eslint/visitor-keys'
- version: 5.42.0
+ version: 5.43.0
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
dependencies:
- '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.42.0
+ '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types/5.43.0
eslint-visitor-keys: registry.npmjs.org/eslint-visitor-keys/3.3.0
dev: true