correct node resizer control size for viewport zoom

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<XYResizerInstance | null>(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 (
     <div

packages/svelte/src/lib/plugins/NodeResizer/ResizeControl.svelte

@@ -121,6 +121,7 @@
   bind:this={resizeControlRef}
   style:border-color={variant === ResizeControlVariant.Line ? color : undefined}
   style:background-color={variant === ResizeControlVariant.Line ? undefined : color}
+  style:--xy-view-zoom-inverse={1 / store.viewport.zoom}
   {...rest}
 >
   {@render children?.()}

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 {