diff --git a/examples/vite-app/src/examples/NodeResizer/index.tsx b/examples/vite-app/src/examples/NodeResizer/index.tsx
index 43f978ac..683f9ab5 100644
--- a/examples/vite-app/src/examples/NodeResizer/index.tsx
+++ b/examples/vite-app/src/examples/NodeResizer/index.tsx
@@ -43,9 +43,8 @@ const initialNodes = [
id: '3',
type: 'customResizer',
data: { label: 'resize control with child component' },
- position: { x: 250, y: 150 },
+ position: { x: 250, y: 200 },
style: { border: '1px solid #222', fontSize: 10, width: 100 },
- parentNode: '2',
},
{
id: '4',
@@ -53,13 +52,12 @@ const initialNodes = [
data: { label: 'resize controls' },
position: { x: 100, y: 150 },
style: { border: '1px solid #222', fontSize: 10 },
- parentNode: '2',
},
{
id: '5',
type: 'customResizer2',
data: { label: 'min width and height' },
- position: { x: 100, y: 150 },
+ position: { x: 250, y: 250 },
style: { border: '1px solid #222', fontSize: 10 },
},
];
@@ -82,9 +80,10 @@ const CustomNodeFlow = () => {
onEdgesChange={onEdgesChange}
onConnect={onConnect}
nodeTypes={nodeTypes}
- minZoom={-5}
+ minZoom={0.2}
maxZoom={5}
snapToGrid={snapToGrid}
+ fitView
>
diff --git a/packages/node-resizer/src/ResizeControl.tsx b/packages/node-resizer/src/ResizeControl.tsx
index b7c42e59..47050fec 100644
--- a/packages/node-resizer/src/ResizeControl.tsx
+++ b/packages/node-resizer/src/ResizeControl.tsx
@@ -10,10 +10,17 @@ import {
useNodeId,
NodePositionChange,
} from '@reactflow/core';
-import type { Dimensions, XYPosition } from '@reactflow/core';
import { ResizeDragEvent, ResizeControlProps, ResizeControlLineProps, ResizeControlVariant } from './types';
+const initPrevValues = { width: 0, height: 0, x: 0, y: 0 };
+
+const initStartValues = {
+ ...initPrevValues,
+ pointerX: 0,
+ pointerY: 0,
+};
+
function ResizeControl({
nodeId,
position,
@@ -22,22 +29,15 @@ function ResizeControl({
style = {},
children,
color,
- minWidth = 1,
- minHeight = 1,
+ minWidth = 10,
+ minHeight = 10,
}: ResizeControlProps) {
const contextNodeId = useNodeId();
const id = typeof nodeId === 'string' ? nodeId : contextNodeId;
const store = useStoreApi();
const resizeControlRef = useRef(null);
- const startValues = useRef({
- width: 0,
- height: 0,
- x: 0,
- y: 0,
- nodeX: 0,
- nodeY: 0,
- });
- const prevValues = useRef({ width: 0, height: 0, x: 0, y: 0 });
+ const startValues = useRef(initStartValues);
+ const prevValues = useRef(initPrevValues);
const getPointerPosition = useGetPointerPosition();
const defaultPosition = variant === ResizeControlVariant.Line ? 'right' : 'bottom-right';
const controlPosition = position ?? defaultPosition;
@@ -53,21 +53,18 @@ function ResizeControl({
const node = store.getState().nodeInternals.get(id);
const { xSnapped, ySnapped } = getPointerPosition(event);
- startValues.current = {
- width: node?.width ?? 0,
- height: node?.height ?? 0,
- nodeX: node?.position.x ?? 0,
- nodeY: node?.position.y ?? 0,
- x: xSnapped,
- y: ySnapped,
- };
-
prevValues.current = {
width: node?.width ?? 0,
height: node?.height ?? 0,
x: node?.position.x ?? 0,
y: node?.position.y ?? 0,
};
+
+ startValues.current = {
+ ...prevValues.current,
+ pointerX: xSnapped,
+ pointerY: ySnapped,
+ };
})
.on('drag', (event: ResizeDragEvent) => {
const { nodeInternals, triggerNodeChanges } = store.getState();
@@ -81,12 +78,12 @@ function ResizeControl({
if (node) {
const changes: NodeChange[] = [];
const {
- x: startX,
- y: startY,
+ pointerX: startX,
+ pointerY: startY,
width: startWidth,
height: startHeight,
- nodeX: startNodeX,
- nodeY: startNodeY,
+ x: startNodeX,
+ y: startNodeY,
} = startValues.current;
const { x: prevX, y: prevY, width: prevWidth, height: prevHeight } = prevValues.current;
@@ -143,15 +140,13 @@ function ResizeControl({
}
})
.on('end', () => {
- const { triggerNodeChanges } = store.getState();
-
const dimensionChange: NodeDimensionChange = {
id: id,
type: 'dimensions',
resizing: true,
};
- triggerNodeChanges([dimensionChange]);
+ store.getState().triggerNodeChanges([dimensionChange]);
});
selection.call(dragHandler);