diff --git a/packages/react/src/additional-components/NodeResizer/NodeResizeControl.tsx b/packages/react/src/additional-components/NodeResizer/NodeResizeControl.tsx index beaeb527..98bf766a 100644 --- a/packages/react/src/additional-components/NodeResizer/NodeResizeControl.tsx +++ b/packages/react/src/additional-components/NodeResizer/NodeResizeControl.tsx @@ -1,5 +1,6 @@ import { useRef, useEffect, memo } from 'react'; import cc from 'classcat'; +import { shallow } from 'zustand/shallow'; import { XYResizer, ResizeControlVariant, @@ -15,9 +16,12 @@ import { XYPosition, } from '@xyflow/system'; -import { useStoreApi } from '../../hooks/useStore'; +import { useStoreApi, useStore } from '../../hooks/useStore'; import { useNodeId } from '../../contexts/NodeIdContext'; import type { ResizeControlProps, ResizeControlLineProps } from './types'; +import { ReactFlowState } from '../../types'; + +const selector = (store: ReactFlowState) => store.transform[2]; function ResizeControl({ nodeId, @@ -47,6 +51,8 @@ function ResizeControl({ const resizer = useRef(null); + const zoom = useStore(selector, shallow); + useEffect(() => { if (!resizeControlRef.current || !id) { return; @@ -193,7 +199,9 @@ function ResizeControl({ const positionClassNames = controlPosition.split('-'); const colorStyleProp = variant === ResizeControlVariant.Line ? 'borderColor' : 'backgroundColor'; - const controlStyle = color ? { ...style, [colorStyleProp]: color } : style; + + const styleWithTransform = { ...style, '--xy-view-zoom-inverse': 1 / zoom }; + const controlStyle = color ? { ...styleWithTransform, [colorStyleProp]: color } : styleWithTransform; return (
{@render children?.()} diff --git a/packages/system/src/styles/node-resizer.css b/packages/system/src/styles/node-resizer.css index 1c031d45..196bc3a5 100644 --- a/packages/system/src/styles/node-resizer.css +++ b/packages/system/src/styles/node-resizer.css @@ -28,12 +28,12 @@ /* handle styles */ .xy-flow__resize-control.handle { - width: 4px; - height: 4px; + width: 5px; + height: 5px; border: 1px solid #fff; border-radius: 1px; background-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default)); - transform: translate(-50%, -50%); + transform: translate(-50%, -50%) scale(max(var(--xy-view-zoom-inverse, 1), 1)); } .xy-flow__resize-control.handle.left {