remove css variable from node resizer

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 (

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 = (
+    let defaultPosition = (isLineVariant ? 'right' : 'bottom-right') as ControlPosition;
-      variant === ResizeControlVariant.Line ? '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:border-color={isLineVariant ? color : undefined}
-  style:background-color={variant === ResizeControlVariant.Line ? undefined : color}
+  style:background-color={isLineVariant ? undefined : color}
-  style:--xy-view-zoom-inverse={1 / store.viewport.zoom}
+  style:scale={isLineVariant ? undefined : Math.max(1 / store.viewport.zoom, 1)}
   {...rest}
 >
   {@render children?.()}

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 {