chore: next release

.changeset/twelve-olives-fly.md

@@ -0,0 +1,5 @@
+---
+"@vue-flow/core": patch
+---
+
+Use correct handlesuffix for connection lookup in `getHandleConnections` action.

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<Elements>([
+const nodes = ref<Elements>([
   { 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<Elements>([
   { 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,20 +43,34 @@ 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'))
 }
 </script>
 
 <template>
-  <VueFlow v-model="elements" fit-view-on-init class="vue-flow-basic-example">
+  <VueFlow
+    :nodes="nodes"
+    :edges="edges"
+    :delete-key-code="['Backspace', 'Delete']"
+    fit-view-on-init
+    class="vue-flow-basic-example"
+  >
     <Background />
-    <MiniMap />
+    <MiniMap node-color="red" :nodes="nodes" :edges="edges" />
     <Controls />
     <Panel position="top-right" style="display: flex; gap: 5px">
+      <input />
       <button @click="resetViewport">reset viewport</button>
       <button @click="updatePos">change pos</button>
       <button @click="toggleclass">toggle class</button>
       <button @click="logToObject">toObject</button>
     </Panel>
   </VueFlow>
 </template>
+
+<style>
+.vue-flow__minimap {
+  transform: scale(75%);
+  transform-origin: bottom right;
+}
+</style>

packages/core/src/store/actions.ts

@@ -73,7 +73,8 @@ export function useActions(state: State, nodeLookup: ComputedRef<NodeLookup>, 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) => {

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

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>",

packages/node-resizer/src/NodeResizer.vue

@@ -8,6 +8,7 @@ import { ResizeControlVariant } from './types'
 
 const props = withDefaults(defineProps<NodeResizerProps>(), {
   isVisible: true,
+  autoScale: true,
 })
 
 const emits = defineEmits<NodeResizerEmits>()
@@ -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)"

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<ResizeControlProps>(), {
@@ -14,6 +15,7 @@ const props = withDefaults(defineProps<ResizeControlProps>(), {
   maxWidth: Number.MAX_VALUE,
   maxHeight: Number.MAX_VALUE,
   keepAspectRatio: false,
+  autoScale: true,
 })
 
 const emits = defineEmits<NodeResizerEmits>()
@@ -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 {
 <template>
   <div
     ref="resizeControlRef"
-    class="vue-flow__resize-control nodrag"
-    :class="[...positionClassNames, variant]"
-    :style="controlStyle"
+    class="vue-flow__resize-control"
+    :class="[...positionClassNames, variant, noDragClassName]"
+    :style="{
+      ...controlStyle,
+      scale: variant === ResizeControlVariant.Handle ? `${Math.max(1 / viewport.zoom, 1)}` : undefined,
+    }"
   >
     <slot />
   </div>

packages/node-resizer/src/style.css

@@ -24,8 +24,8 @@
 
 /* handle styles */
 .vue-flow__resize-control.handle {
-  width: 4px;
-  height: 4px;
+  width: 5px;
+  height: 5px;
   border: 1px solid #fff;
   border-radius: 1px;
   background-color: #3367d9;

packages/node-resizer/src/types.ts

@@ -45,6 +45,11 @@ export interface NodeResizerProps {
   maxHeight?: number
   shouldResize?: ShouldResize
   keepAspectRatio?: boolean | number
+  /**
+   * Scale the controls with the zoom level.
+   * @default true
+   */
+  autoScale?: boolean
 }
 
 export interface NodeResizerEmits {
@@ -62,8 +67,8 @@ export enum ResizeControlVariant {
   Handle = 'handle',
 }
 
-export interface ResizeControlProps {
-  nodeId?: string | null
+export interface ResizeControlProps extends NodeResizerProps {
+  nodeId?: string
   color?: string
   minWidth?: number
   minHeight?: number
@@ -73,6 +78,11 @@ export interface ResizeControlProps {
   variant?: ResizeControlVariant
   shouldResize?: ShouldResize
   keepAspectRatio?: boolean | number
+  /**
+   * Scale the controls with the zoom level.
+   * @default true
+   */
+  autoScale?: boolean
 }
 
 export interface ResizeControlLineProps extends ResizeControlProps {