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

correct node resizer control size for viewport zoom

Browse Source
This commit is contained in:
peterkogo
2025-06-10 16:39:51 +02:00
parent fee63db286
commit 9c2108f443
3 changed files with 14 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/react/src/additional-components/NodeResizer/NodeResizeControl.tsx
+10 -2
View File
@@ -1,5 +1,6 @@
import { useRef, useEffect, memo } from 'react'; import { useRef, useEffect, memo } from 'react';
import cc from 'classcat'; import cc from 'classcat';
import { shallow } from 'zustand/shallow';
import { import {
XYResizer, XYResizer,
ResizeControlVariant, ResizeControlVariant,
@@ -15,9 +16,12 @@ import {
XYPosition, XYPosition,
} from '@xyflow/system'; } from '@xyflow/system';
import { useStoreApi } from '../../hooks/useStore'; import { useStoreApi, useStore } from '../../hooks/useStore';
import { useNodeId } from '../../contexts/NodeIdContext'; import { useNodeId } from '../../contexts/NodeIdContext';
import type { ResizeControlProps, ResizeControlLineProps } from './types'; import type { ResizeControlProps, ResizeControlLineProps } from './types';
import { ReactFlowState } from '../../types';
const selector = (store: ReactFlowState) => store.transform[2];
function ResizeControl({ function ResizeControl({
nodeId, nodeId,
@@ -47,6 +51,8 @@ function ResizeControl({
const resizer = useRef<XYResizerInstance | null>(null); const resizer = useRef<XYResizerInstance | null>(null);
const zoom = useStore(selector, shallow);
useEffect(() => { useEffect(() => {
if (!resizeControlRef.current || !id) { if (!resizeControlRef.current || !id) {
return; return;
@@ -193,7 +199,9 @@ function ResizeControl({
const positionClassNames = controlPosition.split('-'); const positionClassNames = controlPosition.split('-');
const colorStyleProp = variant === ResizeControlVariant.Line ? 'borderColor' : 'backgroundColor'; 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 ( return (
<div <div
packages/svelte/src/lib/plugins/NodeResizer/ResizeControl.svelte
+1
View File
@@ -121,6 +121,7 @@
bind:this={resizeControlRef} bind:this={resizeControlRef}
style:border-color={variant === ResizeControlVariant.Line ? color : undefined} style:border-color={variant === ResizeControlVariant.Line ? color : undefined}
style:background-color={variant === ResizeControlVariant.Line ? undefined : color} style:background-color={variant === ResizeControlVariant.Line ? undefined : color}
style:--xy-view-zoom-inverse={1 / store.viewport.zoom}
{...rest} {...rest}
> >
{@render children?.()} {@render children?.()}
packages/system/src/styles/node-resizer.css
+3 -3
View File
@@ -28,12 +28,12 @@
/* handle styles */ /* handle styles */
.xy-flow__resize-control.handle { .xy-flow__resize-control.handle {
width: 4px; width: 5px;
height: 4px; height: 5px;
border: 1px solid #fff; border: 1px solid #fff;
border-radius: 1px; border-radius: 1px;
background-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default)); 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 { .xy-flow__resize-control.handle.left {