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

Merge branch 'main' into feat/packages

Browse Source
This commit is contained in:
moklick
2023-03-14 11:23:32 +01:00
parent 3a39876383 d709c78604
commit 608768fd5b
54 changed files with 667 additions and 264 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/background/CHANGELOG.md
+9
View File
@@ -1,5 +1,14 @@
# @reactflow/background
## 11.1.9
### Patch Changes
- [#2895](https://github.com/wbkd/react-flow/pull/2895) [`3d5764ca`](https://github.com/wbkd/react-flow/commit/3d5764cac6548984a30cbf85899024e62fd69425) Thanks [@moklick](https://github.com/moklick)! - add data-testid for controls, minimap and background
- Updated dependencies [[`3d5764ca`](https://github.com/wbkd/react-flow/commit/3d5764cac6548984a30cbf85899024e62fd69425), [`83fc4675`](https://github.com/wbkd/react-flow/commit/83fc467545527729633e817dbccfe59d0040da4b), [`b1190837`](https://github.com/wbkd/react-flow/commit/b11908370bc438ca8d4179497cd4eb1f8c656798), [`5fabd272`](https://github.com/wbkd/react-flow/commit/5fabd2720f6367f75f79a45822d8f675a3b8e1cf), [`8f080bd5`](https://github.com/wbkd/react-flow/commit/8f080bd5e0e7e6c71f51eee9c9f2bc4b25182861), [`b8886514`](https://github.com/wbkd/react-flow/commit/b88865140c72fa7e92a883498768000cb2cc96a7), [`16bf89f2`](https://github.com/wbkd/react-flow/commit/16bf89f2b7bbf8449c00d0e2c07c19c3ff6d2533)]:
- @reactflow/core@11.6.0
## 11.1.8
### Patch Changes
packages/background/package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "@reactflow/background",
"version": "11.1.8",
"version": "11.1.9",
"description": "Background component with different variants for React Flow",
"keywords": [
"react",
packages/background/src/Background.tsx
+1
View File
@@ -59,6 +59,7 @@ function Background({
left: 0,
}}
ref={ref}
data-testid="rf__background"
>
<pattern
id={patternId}
packages/controls/CHANGELOG.md
+9
View File
@@ -1,5 +1,14 @@
# @reactflow/controls
## 11.1.9
### Patch Changes
- [#2895](https://github.com/wbkd/react-flow/pull/2895) [`3d5764ca`](https://github.com/wbkd/react-flow/commit/3d5764cac6548984a30cbf85899024e62fd69425) Thanks [@moklick](https://github.com/moklick)! - add data-testid for controls, minimap and background
- Updated dependencies [[`3d5764ca`](https://github.com/wbkd/react-flow/commit/3d5764cac6548984a30cbf85899024e62fd69425), [`83fc4675`](https://github.com/wbkd/react-flow/commit/83fc467545527729633e817dbccfe59d0040da4b), [`b1190837`](https://github.com/wbkd/react-flow/commit/b11908370bc438ca8d4179497cd4eb1f8c656798), [`5fabd272`](https://github.com/wbkd/react-flow/commit/5fabd2720f6367f75f79a45822d8f675a3b8e1cf), [`8f080bd5`](https://github.com/wbkd/react-flow/commit/8f080bd5e0e7e6c71f51eee9c9f2bc4b25182861), [`b8886514`](https://github.com/wbkd/react-flow/commit/b88865140c72fa7e92a883498768000cb2cc96a7), [`16bf89f2`](https://github.com/wbkd/react-flow/commit/16bf89f2b7bbf8449c00d0e2c07c19c3ff6d2533)]:
- @reactflow/core@11.6.0
## 11.1.8
### Patch Changes
packages/controls/package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "@reactflow/controls",
"version": "11.1.8",
"version": "11.1.9",
"description": "Component to control the viewport of a React Flow instance",
"keywords": [
"react",
packages/controls/src/Controls.tsx
+6 -1
View File
@@ -68,7 +68,12 @@ const Controls: FC<PropsWithChildren<ControlProps>> = ({
};
return (
<Panel className={cc(['react-flow__controls', className])} position={position} style={style}>
<Panel
className={cc(['react-flow__controls', className])}
position={position}
style={style}
data-testid="rf__controls"
>
{showZoom && (
<>
<ControlButton
packages/core/CHANGELOG.md
+14
View File
@@ -1,5 +1,19 @@
# @reactflow/core
## 11.6.0
### Minor Changes
- [#2877](https://github.com/wbkd/react-flow/pull/2877) [`b8886514`](https://github.com/wbkd/react-flow/commit/b88865140c72fa7e92a883498768000cb2cc96a7) - add `isValidConnection` prop for ReactFlow component
- [#2847](https://github.com/wbkd/react-flow/pull/2847) [`16bf89f2`](https://github.com/wbkd/react-flow/commit/16bf89f2b7bbf8449c00d0e2c07c19c3ff6d2533) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Add option to enable/disable replacing edge id when using `updateEdge`
### Patch Changes
- [#2895](https://github.com/wbkd/react-flow/pull/2895) [`3d5764ca`](https://github.com/wbkd/react-flow/commit/3d5764cac6548984a30cbf85899024e62fd69425) - add data-testid for controls, minimap and background
- [#2894](https://github.com/wbkd/react-flow/pull/2894) [`83fc4675`](https://github.com/wbkd/react-flow/commit/83fc467545527729633e817dbccfe59d0040da4b) - fix(nodes): blur when node gets unselected
- [#2892](https://github.com/wbkd/react-flow/pull/2892) [`5fabd272`](https://github.com/wbkd/react-flow/commit/5fabd2720f6367f75f79a45822d8f675a3b8e1cf) Thanks [@danielgek](https://github.com/danielgek) - track modifier keys on useKeypress
- [#2893](https://github.com/wbkd/react-flow/pull/2893) [`8f080bd5`](https://github.com/wbkd/react-flow/commit/8f080bd5e0e7e6c71f51eee9c9f2bc4b25182861) - fix: check if handle is connectable
## 11.5.5
### Patch Changes
packages/core/package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "@reactflow/core",
"version": "11.5.5",
"version": "11.6.0",
"description": "Core components and util functions of React Flow.",
"keywords": [
"react",
packages/core/src/components/Edges/wrapEdge.tsx
+6 -2
View File
@@ -10,6 +10,8 @@ import { EdgeAnchor } from './EdgeAnchor';
import { getMouseHandler } from './utils';
import type { EdgeProps, WrapEdgeProps } from '../../types';
const alwaysValidConnection = () => true;
export default (EdgeComponent: ComponentType<EdgeProps>) => {
const EdgeWrapper = ({
id,
@@ -93,12 +95,14 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
return;
}
const { edges, isValidConnection: isValidConnectionStore } = store.getState();
const nodeId = isSourceHandle ? target : source;
const handleId = (isSourceHandle ? targetHandleId : sourceHandleId) || null;
const handleType = isSourceHandle ? 'target' : 'source';
const isValidConnection = () => true;
const isValidConnection = isValidConnectionStore || alwaysValidConnection;
const isTarget = isSourceHandle;
const edge = store.getState().edges.find((e) => e.id === id)!;
const edge = edges.find((e) => e.id === id)!;
setUpdating(true);
onEdgeUpdateStart?.(event, edge, handleType);
packages/core/src/components/Handle/index.tsx
+12 -6
View File
@@ -26,7 +26,7 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
{
type = 'source',
position = Position.Top,
isValidConnection = alwaysValid,
isValidConnection,
isConnectable = true,
id,
onConnect,
@@ -60,8 +60,8 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
...params,
};
if (hasDefaultEdges) {
const { edges } = store.getState();
store.setState({ edges: addEdge(edgeParams, edges) });
const { edges, setEdges } = store.getState();
setEdges(addEdge(edgeParams, edges));
}
onConnectAction?.(edgeParams);
@@ -80,7 +80,7 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
isTarget,
getState: store.getState,
setState: store.setState,
isValidConnection,
isValidConnection: isValidConnection || store.getState().isValidConnection || alwaysValid,
});
}
@@ -92,7 +92,12 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
};
const onClick = (event: ReactMouseEvent) => {
const { onClickConnectStart, onClickConnectEnd, connectionMode } = store.getState();
const {
onClickConnectStart,
onClickConnectEnd,
connectionMode,
isValidConnection: isValidConnectionStore,
} = store.getState();
if (!connectionStartHandle) {
onClickConnectStart?.(event, { nodeId, handleId, handleType: type });
store.setState({ connectionStartHandle: { nodeId, type, handleId } });
@@ -100,6 +105,7 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
}
const doc = getHostForElement(event.target as HTMLElement);
const isValidConnectionHandler = isValidConnection || isValidConnectionStore || alwaysValid;
const { connection, isValid } = isValidHandle(
event.nativeEvent,
{
@@ -111,7 +117,7 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
connectionStartHandle.nodeId,
connectionStartHandle.handleId || null,
connectionStartHandle.type,
isValidConnection,
isValidConnectionHandler,
doc
);
packages/core/src/components/Handle/utils.ts
+3 -2
View File
@@ -112,9 +112,10 @@ export function isValidHandle(
// in strict mode we don't allow target to target or source to source connections
const isValid =
connectionMode === ConnectionMode.Strict
handleToCheck.classList.contains('connectable') &&
(connectionMode === ConnectionMode.Strict
? (isTarget && handleType === 'source') || (!isTarget && handleType === 'target')
: handleNodeId !== fromNodeId || handleId !== fromHandleId;
: handleNodeId !== fromNodeId || handleId !== fromHandleId);
if (isValid) {
result.isValid = isValidConnection(connection);
packages/core/src/components/Nodes/utils.ts
+5 -1
View File
@@ -1,4 +1,4 @@
import { MouseEvent } from 'react';
import { MouseEvent, RefObject } from 'react';
import { StoreApi } from 'zustand';
import { getDimensions } from '@reactflow/utils';
import { Position, type HandleElement, type NodeOrigin } from '@reactflow/system';
@@ -58,6 +58,7 @@ export function handleNodeClick({
id,
store,
unselect = false,
nodeRef,
}: {
id: string;
store: {
@@ -65,6 +66,7 @@ export function handleNodeClick({
setState: StoreApi<ReactFlowState>['setState'];
};
unselect?: boolean;
nodeRef?: RefObject<HTMLDivElement>;
}) {
const { addSelectedNodes, unselectNodesAndEdges, multiSelectionActive, nodeInternals } = store.getState();
const node = nodeInternals.get(id)!;
@@ -75,5 +77,7 @@ export function handleNodeClick({
addSelectedNodes([id]);
} else if (unselect || (node.selected && multiSelectionActive)) {
unselectNodesAndEdges({ nodes: [node] });
requestAnimationFrame(() => nodeRef?.current?.blur());
}
}
packages/core/src/components/Nodes/wrapNode.tsx
+3 -3
View File
@@ -74,6 +74,7 @@ export default (NodeComponent: ComponentType<NodeProps>) => {
handleNodeClick({
id,
store,
nodeRef,
});
}
@@ -90,13 +91,12 @@ export default (NodeComponent: ComponentType<NodeProps>) => {
if (elementSelectionKeys.includes(event.key) && isSelectable) {
const unselect = event.key === 'Escape';
if (unselect) {
nodeRef.current?.blur();
}
handleNodeClick({
id,
store,
unselect,
nodeRef,
});
} else if (
!disableKeyboardA11y &&
packages/core/src/components/StoreUpdater/index.tsx
+3
View File
@@ -50,6 +50,7 @@ type StoreUpdaterProps = Pick<
| 'autoPanOnNodeDrag'
| 'onError'
| 'connectionRadius'
| 'isValidConnection'
> & { rfId: string };
const selector = (s: ReactFlowState) => ({
@@ -128,6 +129,7 @@ const StoreUpdater = ({
autoPanOnNodeDrag,
onError,
connectionRadius,
isValidConnection,
}: StoreUpdaterProps) => {
const {
setNodes,
@@ -185,6 +187,7 @@ const StoreUpdater = ({
useDirectStoreUpdater('autoPanOnNodeDrag', autoPanOnNodeDrag, store.setState);
useDirectStoreUpdater('onError', onError, store.setState);
useDirectStoreUpdater('connectionRadius', connectionRadius, store.setState);
useDirectStoreUpdater('isValidConnection', isValidConnection, store.setState);
useStoreUpdater<Node[]>(nodes, setNodes);
useStoreUpdater<Edge[]>(edges, setEdges);
packages/core/src/container/EdgeRenderer/utils.ts
+3 -3
View File
@@ -75,10 +75,10 @@ export function getHandle(bounds: HandleElement[], handleId?: string | null): Ha
return null;
}
if (handleId) {
return bounds.find((d) => d.id === handleId)!;
} else if (bounds.length === 1) {
if (bounds.length === 1 || !handleId) {
return bounds[0];
} else if (handleId) {
return bounds.find((d) => d.id === handleId) || null;
}
return null;
packages/core/src/container/Pane/index.tsx
+2 -2
View File
@@ -111,7 +111,7 @@ const Pane = memo(
return;
}
const { x, y } = getEventPosition(event, containerBounds.current);
const { x, y } = getEventPosition(event.nativeEvent, containerBounds.current);
resetSelectedElements();
@@ -138,7 +138,7 @@ const Pane = memo(
store.setState({ userSelectionActive: true, nodesSelectionActive: false });
const mousePos = getEventPosition(event, containerBounds.current);
const mousePos = getEventPosition(event.nativeEvent, containerBounds.current);
const startX = userSelectionRect.startX ?? 0;
const startY = userSelectionRect.startY ?? 0;
packages/core/src/container/ReactFlow/index.tsx
+2
View File
@@ -167,6 +167,7 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
autoPanOnConnect = true,
autoPanOnNodeDrag = true,
connectionRadius = 20,
isValidConnection,
onError,
style,
id,
@@ -299,6 +300,7 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
autoPanOnNodeDrag={autoPanOnNodeDrag}
onError={onError}
connectionRadius={connectionRadius}
isValidConnection={isValidConnection}
/>
<SelectionListener onSelectionChange={onSelectionChange} />
{children}
packages/core/src/hooks/useDrag/index.ts
+1
View File
@@ -153,6 +153,7 @@ function useDrag({
handleNodeClick({
id: nodeId,
store,
nodeRef: nodeRef as RefObject<HTMLDivElement>,
});
}
packages/core/src/hooks/useKeyPress.ts
+9 -2
View File
@@ -18,6 +18,9 @@ const doc = typeof document !== 'undefined' ? document : null;
export default (keyCode: KeyCode | null = null, options: UseKeyPressOptions = { target: doc }): boolean => {
const [keyPressed, setKeyPressed] = useState(false);
// we need to remember if a modifier key is pressed in order to track it
const modifierPressed = useRef(false);
// we need to remember the pressed keys in order to support combinations
const pressedKeys = useRef<PressedKeys>(new Set([]));
@@ -42,7 +45,10 @@ export default (keyCode: KeyCode | null = null, options: UseKeyPressOptions = {
useEffect(() => {
if (keyCode !== null) {
const downHandler = (event: KeyboardEvent) => {
if (isInputDOMNode(event)) {
modifierPressed.current = event.ctrlKey || event.metaKey || event.shiftKey;
if (!modifierPressed.current && isInputDOMNode(event)) {
return false;
}
const keyOrCode = useKeyOrCode(event.code, keysToWatch);
@@ -55,7 +61,7 @@ export default (keyCode: KeyCode | null = null, options: UseKeyPressOptions = {
};
const upHandler = (event: KeyboardEvent) => {
if (isInputDOMNode(event)) {
if (!modifierPressed.current && isInputDOMNode(event)) {
return false;
}
const keyOrCode = useKeyOrCode(event.code, keysToWatch);
@@ -66,6 +72,7 @@ export default (keyCode: KeyCode | null = null, options: UseKeyPressOptions = {
} else {
pressedKeys.current.delete(event[keyOrCode]);
}
modifierPressed.current = false;
};
const resetHandler = () => {
packages/core/src/index.ts
+1 -1
View File
@@ -7,7 +7,6 @@ export { default as BezierEdge } from './components/Edges/BezierEdge';
export { default as SimpleBezierEdge, getSimpleBezierPath } from './components/Edges/SimpleBezierEdge';
export { default as SmoothStepEdge } from './components/Edges/SmoothStepEdge';
export { default as BaseEdge } from './components/Edges/BaseEdge';
export { default as ReactFlowProvider } from './components/ReactFlowProvider';
export { default as Panel } from './components/Panel';
export { default as EdgeLabelRenderer } from './components/EdgeLabelRenderer';
@@ -34,6 +33,7 @@ export {
rectToBox,
boxToRect,
getBoundsOfRects,
clamp,
} from '@reactflow/utils';
export { applyNodeChanges, applyEdgeChanges } from './utils/changes';
packages/core/src/store/index.ts
+2 -2
View File
@@ -36,8 +36,8 @@ const createRFStore = () =>
return Array.from(get().nodeInternals.values());
},
setEdges: (edges: Edge[]) => {
const { defaultEdgeOptions = {} } = get();
set({ edges: edges.map((e) => ({ ...defaultEdgeOptions, ...e })) });
const { defaultEdgeOptions = null } = get();
set({ edges: defaultEdgeOptions ? edges.map((e) => ({ ...defaultEdgeOptions, ...e })) : edges });
},
setDefaultNodesAndEdges: (nodes?: Node[], edges?: Edge[]) => {
const hasDefaultNodes = typeof nodes !== 'undefined';
packages/core/src/store/initialState.ts
+1
View File
@@ -58,6 +58,7 @@ const initialState: ReactFlowStore = {
autoPanOnNodeDrag: true,
connectionRadius: 20,
onError: devWarn,
isValidConnection: undefined,
};
export default initialState;
packages/core/src/types/component-props.ts
+2
View File
@@ -40,6 +40,7 @@ import type {
SelectionDragHandler,
EdgeMouseHandler,
} from '.';
import { ValidConnectionFunc } from '../components/Handle/utils';
export type ReactFlowProps = HTMLAttributes<HTMLDivElement> & {
nodes?: Node[];
@@ -146,6 +147,7 @@ export type ReactFlowProps = HTMLAttributes<HTMLDivElement> & {
autoPanOnConnect?: boolean;
connectionRadius?: number;
onError?: OnError;
isValidConnection?: ValidConnectionFunc;
};
export type ReactFlowRefType = HTMLDivElement;
packages/core/src/types/general.ts
+3
View File
@@ -18,6 +18,7 @@ import {
SetCenter,
FitBounds,
Project,
Connection,
} from '@reactflow/system';
import type { NodeChange, EdgeChange, Node, WrapNodeProps, Edge, EdgeProps, WrapEdgeProps, ReactFlowInstance } from '.';
@@ -53,6 +54,8 @@ export type FitViewOptions = FitViewOptionsBase<Node>;
export type FitView = (fitViewOptions?: FitViewOptions) => boolean;
export type OnInit<NodeData = any, EdgeData = any> = (reactFlowInstance: ReactFlowInstance<NodeData, EdgeData>) => void;
export type IsValidConnection = (edge: Edge | Connection) => boolean;
export type ViewportHelperFunctions = {
zoomIn: ZoomInOut;
zoomOut: ZoomInOut;
packages/core/src/types/store.ts
+3
View File
@@ -35,6 +35,7 @@ import type {
OnEdgesDelete,
OnSelectionChangeFunc,
UnselectNodesAndEdgesParams,
IsValidConnection,
} from '.';
export type ReactFlowStore = {
@@ -123,6 +124,8 @@ export type ReactFlowStore = {
autoPanOnConnect: boolean;
autoPanOnNodeDrag: boolean;
connectionRadius: number;
isValidConnection?: IsValidConnection;
};
export type ReactFlowActions = {
packages/minimap/CHANGELOG.md
+13
View File
@@ -1,5 +1,18 @@
# @reactflow/minimap
## 11.4.0
### Minor Changes
- [#2906](https://github.com/wbkd/react-flow/pull/2906) [`4a30185a`](https://github.com/wbkd/react-flow/commit/4a30185a12899691ff61259f0db84bc5494cb573) Thanks [@hayleigh-dot-dev](https://github.com/hayleigh-dot-dev)! - Add `nodeComponent` prop for passing custom component for the nodes
### Patch Changes
- [#2895](https://github.com/wbkd/react-flow/pull/2895) [`3d5764ca`](https://github.com/wbkd/react-flow/commit/3d5764cac6548984a30cbf85899024e62fd69425) - add data-testid for controls, minimap and background
- Updated dependencies [[`3d5764ca`](https://github.com/wbkd/react-flow/commit/3d5764cac6548984a30cbf85899024e62fd69425), [`83fc4675`](https://github.com/wbkd/react-flow/commit/83fc467545527729633e817dbccfe59d0040da4b), [`b1190837`](https://github.com/wbkd/react-flow/commit/b11908370bc438ca8d4179497cd4eb1f8c656798), [`5fabd272`](https://github.com/wbkd/react-flow/commit/5fabd2720f6367f75f79a45822d8f675a3b8e1cf), [`8f080bd5`](https://github.com/wbkd/react-flow/commit/8f080bd5e0e7e6c71f51eee9c9f2bc4b25182861), [`b8886514`](https://github.com/wbkd/react-flow/commit/b88865140c72fa7e92a883498768000cb2cc96a7), [`16bf89f2`](https://github.com/wbkd/react-flow/commit/16bf89f2b7bbf8449c00d0e2c07c19c3ff6d2533)]:
- @reactflow/core@11.6.0
## 11.3.8
### Patch Changes
packages/minimap/package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "@reactflow/minimap",
"version": "11.3.8",
"version": "11.4.0",
"description": "Minimap component for React Flow.",
"keywords": [
"react",
packages/minimap/src/MiniMap.tsx
+10 -2
View File
@@ -55,6 +55,9 @@ function MiniMap({
nodeClassName = '',
nodeBorderRadius = 5,
nodeStrokeWidth = 2,
// We need to rename the prop to be `CapitalCase` so that JSX will render it as
// a component properly.
nodeComponent: NodeComponent = MiniMapNode,
maskColor = 'rgb(240, 240, 240, 0.6)',
maskStrokeColor = 'none',
maskStrokeWidth = 1,
@@ -161,7 +164,12 @@ function MiniMap({
: undefined;
return (
<Panel position={position} style={style} className={cc(['react-flow__minimap', className])}>
<Panel
position={position}
style={style}
className={cc(['react-flow__minimap', className])}
data-testid="rf__minimap"
>
<svg
width={elementWidth}
height={elementHeight}
@@ -176,7 +184,7 @@ function MiniMap({
const { x, y } = getNodePositionWithOrigin(node, nodeOrigin).positionAbsolute;
return (
<MiniMapNode
<NodeComponent
key={node.id}
x={x}
y={y}
packages/minimap/src/MiniMapNode.tsx
+1 -17
View File
@@ -1,23 +1,7 @@
import { memo } from 'react';
import type { CSSProperties, MouseEvent } from 'react';
import type { MiniMapNodeProps } from './types';
import cc from 'classcat';
interface MiniMapNodeProps {
id: string;
x: number;
y: number;
width: number;
height: number;
borderRadius: number;
className: string;
color: string;
shapeRendering: string;
strokeColor: string;
strokeWidth: number;
style?: CSSProperties;
onClick?: (event: MouseEvent, id: string) => void;
}
const MiniMapNode = ({
id,
x,
packages/minimap/src/types.ts
+18 -1
View File
@@ -1,5 +1,5 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import type { HTMLAttributes, MouseEvent } from 'react';
import type { ComponentType, CSSProperties, HTMLAttributes, MouseEvent } from 'react';
import type { Node, PanelPosition, XYPosition } from '@reactflow/core';
export type GetMiniMapNodeAttribute<NodeData = any> = (node: Node<NodeData>) => string;
@@ -10,6 +10,7 @@ export type MiniMapProps<NodeData = any> = Omit<HTMLAttributes<SVGSVGElement>, '
nodeClassName?: string | GetMiniMapNodeAttribute<NodeData>;
nodeBorderRadius?: number;
nodeStrokeWidth?: number;
nodeComponent?: ComponentType<MiniMapNodeProps>;
maskColor?: string;
maskStrokeColor?: string;
maskStrokeWidth?: number;
@@ -20,3 +21,19 @@ export type MiniMapProps<NodeData = any> = Omit<HTMLAttributes<SVGSVGElement>, '
zoomable?: boolean;
ariaLabel?: string | null;
};
export interface MiniMapNodeProps {
id: string;
x: number;
y: number;
width: number;
height: number;
borderRadius: number;
className: string;
color: string;
shapeRendering: string;
strokeColor: string;
strokeWidth: number;
style?: CSSProperties;
onClick?: (event: MouseEvent, id: string) => void;
}
packages/node-resizer/CHANGELOG.md
+12
View File
@@ -1,5 +1,17 @@
# @reactflow/node-resizer
## 2.1.0
### Minor Changes
- [#2900](https://github.com/wbkd/react-flow/pull/2900) [`b1190837`](https://github.com/wbkd/react-flow/commit/b11908370bc438ca8d4179497cd4eb1f8c656798) Thanks [@stffabi](https://github.com/stffabi)! - add `maxWidth` and `maxHeight` props
- [#2900](https://github.com/wbkd/react-flow/pull/2900) [`b1190837`](https://github.com/wbkd/react-flow/commit/b11908370bc438ca8d4179497cd4eb1f8c656798) - add `keepAspectRatio` prop
### Patch Changes
- Updated dependencies [[`3d5764ca`](https://github.com/wbkd/react-flow/commit/3d5764cac6548984a30cbf85899024e62fd69425), [`83fc4675`](https://github.com/wbkd/react-flow/commit/83fc467545527729633e817dbccfe59d0040da4b), [`b1190837`](https://github.com/wbkd/react-flow/commit/b11908370bc438ca8d4179497cd4eb1f8c656798), [`5fabd272`](https://github.com/wbkd/react-flow/commit/5fabd2720f6367f75f79a45822d8f675a3b8e1cf), [`8f080bd5`](https://github.com/wbkd/react-flow/commit/8f080bd5e0e7e6c71f51eee9c9f2bc4b25182861), [`b8886514`](https://github.com/wbkd/react-flow/commit/b88865140c72fa7e92a883498768000cb2cc96a7), [`16bf89f2`](https://github.com/wbkd/react-flow/commit/16bf89f2b7bbf8449c00d0e2c07c19c3ff6d2533)]:
- @reactflow/core@11.6.0
## 2.0.1
### Patch Changes
packages/node-resizer/package.json
+2 -2
View File
@@ -1,6 +1,6 @@
{
"name": "@reactflow/node-resizer",
"version": "2.0.1",
"version": "2.1.0",
"description": "A helper component for resizing nodes.",
"keywords": [
"react",
@@ -38,7 +38,7 @@
"typecheck": "tsc --noEmit"
},
"dependencies": {
"@reactflow/core": "workspace:^11.3.3",
"@reactflow/core": "workspace:^11.6.0",
"classcat": "^5.0.4",
"d3-drag": "^3.0.0",
"d3-selection": "^3.0.0",
packages/node-resizer/src/NodeResizer.tsx
+9
View File
@@ -14,6 +14,9 @@ export default function NodeResizer({
color,
minWidth = 10,
minHeight = 10,
maxWidth = Number.MAX_VALUE,
maxHeight = Number.MAX_VALUE,
keepAspectRatio = false,
shouldResize,
onResizeStart,
onResize,
@@ -36,7 +39,10 @@ export default function NodeResizer({
color={color}
minWidth={minWidth}
minHeight={minHeight}
maxWidth={maxWidth}
maxHeight={maxHeight}
onResizeStart={onResizeStart}
keepAspectRatio={keepAspectRatio}
shouldResize={shouldResize}
onResize={onResize}
onResizeEnd={onResizeEnd}
@@ -52,7 +58,10 @@ export default function NodeResizer({
color={color}
minWidth={minWidth}
minHeight={minHeight}
maxWidth={maxWidth}
maxHeight={maxHeight}
onResizeStart={onResizeStart}
keepAspectRatio={keepAspectRatio}
shouldResize={shouldResize}
onResize={onResize}
onResizeEnd={onResizeEnd}
packages/node-resizer/src/ResizeControl.tsx
+45 -7
View File
@@ -9,6 +9,7 @@ import {
NodeDimensionChange,
useNodeId,
NodePositionChange,
clamp,
} from '@reactflow/core';
import { ResizeDragEvent, ResizeControlProps, ResizeControlLineProps, ResizeControlVariant } from './types';
@@ -20,6 +21,7 @@ const initStartValues = {
...initPrevValues,
pointerX: 0,
pointerY: 0,
aspectRatio: 1,
};
function ResizeControl({
@@ -32,6 +34,9 @@ function ResizeControl({
color,
minWidth = 10,
minHeight = 10,
maxWidth = Number.MAX_VALUE,
maxHeight = Number.MAX_VALUE,
keepAspectRatio = false,
shouldResize,
onResizeStart,
onResize,
@@ -53,6 +58,12 @@ function ResizeControl({
}
const selection = select(resizeControlRef.current);
const enableX = controlPosition.includes('right') || controlPosition.includes('left');
const enableY = controlPosition.includes('bottom') || controlPosition.includes('top');
const invertX = controlPosition.includes('left');
const invertY = controlPosition.includes('top');
const dragHandler = drag<HTMLDivElement, unknown>()
.on('start', (event: ResizeDragEvent) => {
const node = store.getState().nodeInternals.get(id);
@@ -69,6 +80,7 @@ function ResizeControl({
...prevValues.current,
pointerX: xSnapped,
pointerY: ySnapped,
aspectRatio: prevValues.current.width / prevValues.current.height,
};
onResizeStart?.(event, { ...prevValues.current });
@@ -77,10 +89,6 @@ function ResizeControl({
const { nodeInternals, triggerNodeChanges } = store.getState();
const { xSnapped, ySnapped } = getPointerPosition(event);
const node = nodeInternals.get(id);
const enableX = controlPosition.includes('right') || controlPosition.includes('left');
const enableY = controlPosition.includes('bottom') || controlPosition.includes('top');
const invertX = controlPosition.includes('left');
const invertY = controlPosition.includes('top');
if (node) {
const changes: NodeChange[] = [];
@@ -91,13 +99,43 @@ function ResizeControl({
height: startHeight,
x: startNodeX,
y: startNodeY,
aspectRatio,
} = startValues.current;
const { x: prevX, y: prevY, width: prevWidth, height: prevHeight } = prevValues.current;
const distX = Math.floor(enableX ? xSnapped - startX : 0);
const distY = Math.floor(enableY ? ySnapped - startY : 0);
const width = Math.max(startWidth + (invertX ? -distX : distX), minWidth);
const height = Math.max(startHeight + (invertY ? -distY : distY), minHeight);
let width = clamp(startWidth + (invertX ? -distX : distX), minWidth, maxWidth);
let height = clamp(startHeight + (invertY ? -distY : distY), minHeight, maxHeight);
if (keepAspectRatio) {
const nextAspectRatio = width / height;
const isDiagonal = enableX && enableY;
const isHorizontal = enableX && !enableY;
const isVertical = enableY && !enableX;
width = (nextAspectRatio <= aspectRatio && isDiagonal) || isVertical ? height * aspectRatio : width;
height = (nextAspectRatio > aspectRatio && isDiagonal) || isHorizontal ? width / aspectRatio : height;
if (width >= maxWidth) {
width = maxWidth;
height = maxWidth / aspectRatio;
} else if (width <= minWidth) {
width = minWidth;
height = minWidth / aspectRatio;
}
if (height >= maxHeight) {
height = maxHeight;
width = maxHeight * aspectRatio;
} else if (height <= minHeight) {
height = minHeight;
width = minHeight * aspectRatio;
}
}
const isWidthChange = width !== prevWidth;
const isHeightChange = height !== prevHeight;
@@ -183,7 +221,7 @@ function ResizeControl({
return () => {
selection.on('.drag', null);
};
}, [id, controlPosition, minWidth, minHeight, getPointerPosition]);
}, [id, controlPosition, minWidth, minHeight, maxWidth, maxHeight, keepAspectRatio, getPointerPosition]);
const positionClassNames = controlPosition.split('-');
const colorStyleProp = variant === ResizeControlVariant.Line ? 'borderColor' : 'backgroundColor';
packages/node-resizer/src/types.ts
+14 -1
View File
@@ -29,6 +29,9 @@ export type NodeResizerProps = {
isVisible?: boolean;
minWidth?: number;
minHeight?: number;
maxWidth?: number;
maxHeight?: number;
keepAspectRatio?: boolean;
shouldResize?: ShouldResize;
onResizeStart?: OnResizeStart;
onResize?: OnResize;
@@ -46,7 +49,17 @@ export enum ResizeControlVariant {
export type ResizeControlProps = Pick<
NodeResizerProps,
'nodeId' | 'color' | 'minWidth' | 'minHeight' | 'shouldResize' | 'onResizeStart' | 'onResize' | 'onResizeEnd'
| 'nodeId'
| 'color'
| 'minWidth'
| 'minHeight'
| 'maxWidth'
| 'maxHeight'
| 'keepAspectRatio'
| 'shouldResize'
| 'onResizeStart'
| 'onResize'
| 'onResizeEnd'
> & {
position?: ControlPosition;
variant?: ResizeControlVariant;
packages/node-toolbar/CHANGELOG.md
+7
View File
@@ -1,5 +1,12 @@
# @reactflow/node-toolbar
## 1.1.9
### Patch Changes
- Updated dependencies [[`3d5764ca`](https://github.com/wbkd/react-flow/commit/3d5764cac6548984a30cbf85899024e62fd69425), [`83fc4675`](https://github.com/wbkd/react-flow/commit/83fc467545527729633e817dbccfe59d0040da4b), [`b1190837`](https://github.com/wbkd/react-flow/commit/b11908370bc438ca8d4179497cd4eb1f8c656798), [`5fabd272`](https://github.com/wbkd/react-flow/commit/5fabd2720f6367f75f79a45822d8f675a3b8e1cf), [`8f080bd5`](https://github.com/wbkd/react-flow/commit/8f080bd5e0e7e6c71f51eee9c9f2bc4b25182861), [`b8886514`](https://github.com/wbkd/react-flow/commit/b88865140c72fa7e92a883498768000cb2cc96a7), [`16bf89f2`](https://github.com/wbkd/react-flow/commit/16bf89f2b7bbf8449c00d0e2c07c19c3ff6d2533)]:
- @reactflow/core@11.6.0
## 1.1.8
### Patch Changes
packages/node-toolbar/package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "@reactflow/node-toolbar",
"version": "1.1.8",
"version": "1.1.9",
"description": "A toolbar component for React Flow that can be attached to a node.",
"keywords": [
"react",
packages/reactflow/CHANGELOG.md
+24
View File
@@ -1,5 +1,29 @@
# reactflow
## 11.6.0
This release introduces a new `isValidConnection` prop for the ReactFlow component. You no longer need to pass it to all your Handle components but can pass it once. We also added a new option for the `updateEdge` function that allows you to specify if you want to replace an id when updating it. More over the `MiniMap` got a new `nodeComponent` prop to pass a custom component for the mini map nodes.
### Minor Changes
- [#2877](https://github.com/wbkd/react-flow/pull/2877) [`b8886514`](https://github.com/wbkd/react-flow/commit/b88865140c72fa7e92a883498768000cb2cc96a7) - add `isValidConnection` prop for ReactFlow component
- [#2847](https://github.com/wbkd/react-flow/pull/2847) [`16bf89f2`](https://github.com/wbkd/react-flow/commit/16bf89f2b7bbf8449c00d0e2c07c19c3ff6d2533) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Add option to enable/disable replacing edge id when using `updateEdge`
- [#2906](https://github.com/wbkd/react-flow/pull/2906) [`4a30185a`](https://github.com/wbkd/react-flow/commit/4a30185a12899691ff61259f0db84bc5494cb573) Thanks [@hayleigh-dot-dev](https://github.com/hayleigh-dot-dev)! - Minimap: add nodeComponent prop for passing custom component
### Patch Changes
- [#2895](https://github.com/wbkd/react-flow/pull/2895) [`3d5764ca`](https://github.com/wbkd/react-flow/commit/3d5764cac6548984a30cbf85899024e62fd69425) - add data-testid for controls, minimap and background
- [#2894](https://github.com/wbkd/react-flow/pull/2894) [`83fc4675`](https://github.com/wbkd/react-flow/commit/83fc467545527729633e817dbccfe59d0040da4b) - fix(nodes): blur when node gets unselected
- [#2892](https://github.com/wbkd/react-flow/pull/2892) [`5fabd272`](https://github.com/wbkd/react-flow/commit/5fabd2720f6367f75f79a45822d8f675a3b8e1cf) Thanks [@danielgek](https://github.com/danielgek) - track modifier keys on useKeypress
- [#2893](https://github.com/wbkd/react-flow/pull/2893) [`8f080bd5`](https://github.com/wbkd/react-flow/commit/8f080bd5e0e7e6c71f51eee9c9f2bc4b25182861) - fix: check if handle is connectable
- Updated dependencies [[`3d5764ca`](https://github.com/wbkd/react-flow/commit/3d5764cac6548984a30cbf85899024e62fd69425), [`4a30185a`](https://github.com/wbkd/react-flow/commit/4a30185a12899691ff61259f0db84bc5494cb573), [`83fc4675`](https://github.com/wbkd/react-flow/commit/83fc467545527729633e817dbccfe59d0040da4b), [`b1190837`](https://github.com/wbkd/react-flow/commit/b11908370bc438ca8d4179497cd4eb1f8c656798), [`5fabd272`](https://github.com/wbkd/react-flow/commit/5fabd2720f6367f75f79a45822d8f675a3b8e1cf), [`8f080bd5`](https://github.com/wbkd/react-flow/commit/8f080bd5e0e7e6c71f51eee9c9f2bc4b25182861), [`b8886514`](https://github.com/wbkd/react-flow/commit/b88865140c72fa7e92a883498768000cb2cc96a7), [`16bf89f2`](https://github.com/wbkd/react-flow/commit/16bf89f2b7bbf8449c00d0e2c07c19c3ff6d2533)]:
- @reactflow/background@11.1.9
- @reactflow/controls@11.1.9
- @reactflow/core@11.6.0
- @reactflow/minimap@11.4.0
- @reactflow/node-toolbar@1.1.9
## 11.5.6
### Patch Changes
packages/reactflow/package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "reactflow",
"version": "11.5.6",
"version": "11.6.0",
"description": "A highly customizable React library for building node-based editors and interactive flow charts",
"keywords": [
"react",
packages/utils/src/graph.ts
+12 -5
View File
@@ -108,11 +108,18 @@ export const addEdgeBase = <EdgeType extends BaseEdge>(
return edges.concat(edge);
};
export type UpdateEdgeOptions = {
shouldReplaceId?: boolean;
};
export const updateEdgeBase = <EdgeType extends BaseEdge>(
oldEdge: EdgeType,
newConnection: Connection,
edges: EdgeType[]
edges: EdgeType[],
options: UpdateEdgeOptions = { shouldReplaceId: true }
): EdgeType[] => {
const { id: oldEdgeId, ...rest } = oldEdge;
if (!newConnection.source || !newConnection.target) {
devWarn('006', errorMessages['006']());
@@ -122,22 +129,22 @@ export const updateEdgeBase = <EdgeType extends BaseEdge>(
const foundEdge = edges.find((e) => e.id === oldEdge.id) as EdgeType;
if (!foundEdge) {
devWarn('007', errorMessages['007'](oldEdge.id));
devWarn('007', errorMessages['007'](oldEdgeId));
return edges;
}
// Remove old edge and create the new edge with parameters of old edge.
const edge = {
...oldEdge,
id: getEdgeId(newConnection),
...rest,
id: options.shouldReplaceId ? getEdgeId(newConnection) : oldEdgeId,
source: newConnection.source,
target: newConnection.target,
sourceHandle: newConnection.sourceHandle,
targetHandle: newConnection.targetHandle,
} as EdgeType;
return edges.filter((e) => e.id !== oldEdge.id).concat(edge);
return edges.filter((e) => e.id !== oldEdgeId).concat(edge);
};
export const pointToRendererPoint = (