diff --git a/.changeset/hot-bats-boil.md b/.changeset/hot-bats-boil.md new file mode 100644 index 000000000..903edff17 --- /dev/null +++ b/.changeset/hot-bats-boil.md @@ -0,0 +1,5 @@ +--- +"@vue-flow/node-resizer": patch +--- + +Use auto-scale prop to determine whether a resize handle should be scaled. diff --git a/packages/node-resizer/src/ResizeControl.vue b/packages/node-resizer/src/ResizeControl.vue index 7d717fa55..f60145262 100644 --- a/packages/node-resizer/src/ResizeControl.vue +++ b/packages/node-resizer/src/ResizeControl.vue @@ -45,6 +45,10 @@ const positionClassNames = computed(() => controlPosition.value.split('-')) const controlStyle = toRef(() => (props.color ? { [StylingProperty[props.variant]]: props.color } : {})) +const isHandleControl = toRef(() => props.variant === ResizeControlVariant.Handle) + +const scale = computed(() => (isHandleControl.value && props.autoScale ? `${Math.max(1 / viewport.value.zoom, 1)}` : undefined)) + watchEffect((onCleanup) => { if (!resizeControlRef.value || !props.nodeId) { return @@ -243,7 +247,7 @@ export default { :class="[...positionClassNames, variant, noDragClassName]" :style="{ ...controlStyle, - scale: variant === ResizeControlVariant.Handle ? `${Math.max(1 / viewport.zoom, 1)}` : undefined, + scale, }" >