From 178ad01f51080a0121b13d95330444dcf0e9e303 Mon Sep 17 00:00:00 2001
From: peterkogo <peter@xyflow.com>
Date: Tue, 10 Jun 2025 21:22:29 +0200
Subject: [PATCH] remove css variable from node resizer

---
 .../NodeResizer/NodeResizeControl.tsx                |  7 ++++---
 .../src/lib/plugins/NodeResizer/ResizeControl.svelte | 12 ++++++------
 packages/system/src/styles/node-resizer.css          |  2 +-
 3 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/packages/react/src/additional-components/NodeResizer/NodeResizeControl.tsx b/packages/react/src/additional-components/NodeResizer/NodeResizeControl.tsx
index 98bf766a..fc758d8d 100644
--- a/packages/react/src/additional-components/NodeResizer/NodeResizeControl.tsx
+++ b/packages/react/src/additional-components/NodeResizer/NodeResizeControl.tsx
@@ -46,7 +46,8 @@ function ResizeControl({
   const id = typeof nodeId === 'string' ? nodeId : contextNodeId;
   const store = useStoreApi();
   const resizeControlRef = useRef<HTMLDivElement>(null);
-  const defaultPosition = variant === ResizeControlVariant.Line ? 'right' : 'bottom-right';
+  const isLineVariant = variant === ResizeControlVariant.Line;
+  const defaultPosition = isLineVariant ? 'right' : 'bottom-right';
   const controlPosition = position ?? defaultPosition;
 
   const resizer = useRef<XYResizerInstance | null>(null);
@@ -198,9 +199,9 @@ function ResizeControl({
   ]);
 
   const positionClassNames = controlPosition.split('-');
-  const colorStyleProp = variant === ResizeControlVariant.Line ? 'borderColor' : 'backgroundColor';
+  const colorStyleProp = isLineVariant ? 'borderColor' : 'backgroundColor';
 
-  const styleWithTransform = { ...style, '--xy-view-zoom-inverse': 1 / zoom };
+  const styleWithTransform = { ...style, scale: isLineVariant ? undefined : `${Math.max(1 / zoom, 1)}` };
   const controlStyle = color ? { ...styleWithTransform, [colorStyleProp]: color } : styleWithTransform;
 
   return (
diff --git a/packages/svelte/src/lib/plugins/NodeResizer/ResizeControl.svelte b/packages/svelte/src/lib/plugins/NodeResizer/ResizeControl.svelte
index 6dea30fa..47d7db5a 100644
--- a/packages/svelte/src/lib/plugins/NodeResizer/ResizeControl.svelte
+++ b/packages/svelte/src/lib/plugins/NodeResizer/ResizeControl.svelte
@@ -40,10 +40,10 @@
   let resizeControlRef: HTMLDivElement;
   let resizer: XYResizerInstance | null = $state(null);
 
+  let isLineVariant = $derived(variant === ResizeControlVariant.Line);
+
   let controlPosition = $derived.by(() => {
-    let defaultPosition = (
-      variant === ResizeControlVariant.Line ? 'right' : 'bottom-right'
-    ) as ControlPosition;
+    let defaultPosition = (isLineVariant ? 'right' : 'bottom-right') as ControlPosition;
     return position ?? defaultPosition;
   });
 
@@ -119,9 +119,9 @@
 <div
   class={['svelte-flow__resize-control', store.noDragClass, ...positionClasses, variant, className]}
   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}
+  style:border-color={isLineVariant ? color : undefined}
+  style:background-color={isLineVariant ? undefined : color}
+  style:scale={isLineVariant ? undefined : Math.max(1 / store.viewport.zoom, 1)}
   {...rest}
 >
   {@render children?.()}
diff --git a/packages/system/src/styles/node-resizer.css b/packages/system/src/styles/node-resizer.css
index 196bc3a5..4c69084b 100644
--- a/packages/system/src/styles/node-resizer.css
+++ b/packages/system/src/styles/node-resizer.css
@@ -33,7 +33,7 @@
   border: 1px solid #fff;
   border-radius: 1px;
   background-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));
-  transform: translate(-50%, -50%) scale(max(var(--xy-view-zoom-inverse, 1), 1));
+  translate: -50% -50%;
 }
 
 .xy-flow__resize-control.handle.left {