diff --git a/packages/node-resizer/CHANGELOG.md b/packages/node-resizer/CHANGELOG.md index 229741104..343a834a8 100644 --- a/packages/node-resizer/CHANGELOG.md +++ b/packages/node-resizer/CHANGELOG.md @@ -1,5 +1,11 @@ # @vue-flow/node-resizer +## 1.5.0 + +### Minor Changes + +- [#1872](https://github.com/bcakmakoglu/vue-flow/pull/1872) [`ce0f42d`](https://github.com/bcakmakoglu/vue-flow/commit/ce0f42d1cba1bb224701bb8a806c1ae04c955c8c) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Add auto-scale prop to node resizer (default `true`) that forces node resizer controls to scale with the viewport zoom level. + ## 1.4.0 ### Minor Changes diff --git a/packages/node-resizer/package.json b/packages/node-resizer/package.json index afabcbc1e..6bedc7425 100644 --- a/packages/node-resizer/package.json +++ b/packages/node-resizer/package.json @@ -1,6 +1,6 @@ { "name": "@vue-flow/node-resizer", - "version": "1.4.0", + "version": "1.5.0", "private": false, "license": "MIT", "author": "Burak Cakmakoglu<78412429+bcakmakoglu@users.noreply.github.com>", diff --git a/packages/node-resizer/src/NodeResizer.vue b/packages/node-resizer/src/NodeResizer.vue index d51ddcfaa..7ff40a064 100644 --- a/packages/node-resizer/src/NodeResizer.vue +++ b/packages/node-resizer/src/NodeResizer.vue @@ -8,6 +8,7 @@ import { ResizeControlVariant } from './types' const props = withDefaults(defineProps(), { isVisible: true, + autoScale: true, }) const emits = defineEmits() @@ -92,13 +93,14 @@ export default { :node-id="nodeId" :position="c" :variant="ResizeControlVariant.Line" - :keep-aspect-ratio="keepAspectRatio" :color="color" :min-width="minWidth" :min-height="minHeight" :max-width="maxWidth" :max-height="maxHeight" :should-resize="shouldResize" + :keep-aspect-ratio="keepAspectRatio" + :auto-scale="autoScale" @resize-start="emits('resizeStart', $event)" @resize="emits('resize', $event)" @resize-end="emits('resizeEnd', $event)" @@ -118,6 +120,7 @@ export default { :max-height="maxHeight" :should-resize="shouldResize" :keep-aspect-ratio="keepAspectRatio" + :auto-scale="autoScale" @resize-start="emits('resizeStart', $event)" @resize="emits('resize', $event)" @resize-end="emits('resizeEnd', $event)" diff --git a/packages/node-resizer/src/ResizeControl.vue b/packages/node-resizer/src/ResizeControl.vue index ac5fa807d..7d717fa55 100644 --- a/packages/node-resizer/src/ResizeControl.vue +++ b/packages/node-resizer/src/ResizeControl.vue @@ -3,8 +3,9 @@ import type { NodeChange, NodeDimensionChange, NodePositionChange } from '@vue-f import { clamp, useGetPointerPosition, useVueFlow } from '@vue-flow/core' import { select } from 'd3-selection' import { drag } from 'd3-drag' -import { ref, toRef, watchEffect } from 'vue' -import type { NodeResizerEmits, ResizeControlProps, ResizeControlVariant, ResizeDragEvent } from './types' +import { computed, ref, toRef, watchEffect } from 'vue' +import type { NodeResizerEmits, ResizeControlProps, ResizeDragEvent } from './types' +import { ResizeControlVariant } from './types' import { DefaultPositions, StylingProperty, getDirection } from './utils' const props = withDefaults(defineProps(), { @@ -14,6 +15,7 @@ const props = withDefaults(defineProps(), { maxWidth: Number.MAX_VALUE, maxHeight: Number.MAX_VALUE, keepAspectRatio: false, + autoScale: true, }) const emits = defineEmits() @@ -27,7 +29,7 @@ const initStartValues = { aspectRatio: 1, } -const { findNode, emits: triggerEmits } = useVueFlow() +const { findNode, emits: triggerEmits, viewport, noDragClassName } = useVueFlow() const getPointerPosition = useGetPointerPosition() @@ -39,7 +41,7 @@ let prevValues: typeof initPrevValues = initPrevValues const controlPosition = toRef(() => props.position ?? DefaultPositions[props.variant]) -const positionClassNames = toRef(() => controlPosition.value.split('-')) +const positionClassNames = computed(() => controlPosition.value.split('-')) const controlStyle = toRef(() => (props.color ? { [StylingProperty[props.variant]]: props.color } : {})) @@ -237,9 +239,12 @@ export default {