diff --git a/.changeset/twelve-olives-fly.md b/.changeset/twelve-olives-fly.md new file mode 100644 index 000000000..75bb2f92d --- /dev/null +++ b/.changeset/twelve-olives-fly.md @@ -0,0 +1,5 @@ +--- +"@vue-flow/core": patch +--- + +Use correct handlesuffix for connection lookup in `getHandleConnections` action. diff --git a/examples/vite/src/Basic/Basic.vue b/examples/vite/src/Basic/Basic.vue index c5be8653d..f23c150c0 100644 --- a/examples/vite/src/Basic/Basic.vue +++ b/examples/vite/src/Basic/Basic.vue @@ -6,11 +6,14 @@ import { Background } from '@vue-flow/background' import { Controls } from '@vue-flow/controls' import { MiniMap } from '@vue-flow/minimap' -const elements = ref([ +const nodes = ref([ { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' }, { id: '2', label: 'Node 2', position: { x: 100, y: 100 }, class: 'light' }, { id: '3', label: 'Node 3', position: { x: 400, y: 100 }, class: 'light' }, { id: '4', label: 'Node 4', position: { x: 400, y: 200 }, class: 'light' }, +]) + +const edges = ref([ { id: 'e1-2', source: '1', target: '2', animated: true }, { id: 'e1-3', source: '1', target: '3' }, ]) @@ -23,7 +26,7 @@ const { onConnect, addEdges, setViewport, toObject } = useVueFlow({ onConnect(addEdges) function updatePos() { - return elements.value.forEach((el) => { + return nodes.value.forEach((el) => { if (isNode(el)) { el.position = { x: Math.random() * 400, @@ -40,16 +43,23 @@ function resetViewport() { return setViewport({ x: 0, y: 0, zoom: 1 }) } function toggleclass() { - return elements.value.forEach((el) => (el.class = el.class === 'light' ? 'dark' : 'light')) + return nodes.value.forEach((el) => (el.class = el.class === 'light' ? 'dark' : 'light')) } + + diff --git a/packages/core/src/store/actions.ts b/packages/core/src/store/actions.ts index ab8616d1a..83c5520e3 100644 --- a/packages/core/src/store/actions.ts +++ b/packages/core/src/store/actions.ts @@ -73,7 +73,8 @@ export function useActions(state: State, nodeLookup: ComputedRef, ed } const getHandleConnections: Actions['getHandleConnections'] = ({ id, type, nodeId }) => { - return Array.from(state.connectionLookup.get(`${nodeId}-${type}-${id ?? null}`)?.values() ?? []) + const handleSuffix = id ? `-${type}-${id}` : `-${type}` + return Array.from(state.connectionLookup.get(`${nodeId}${handleSuffix}`)?.values() ?? []) } const findNode: Actions['findNode'] = (id) => { 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 {