chore: next release

package.json

@@ -17,7 +17,8 @@
     "lint": "turbo lint --filter='./packages/*'",
     "typedocs": "pnpm build && pnpm --dir docs typedocs",
     "ci:version": "changeset version",
-    "ci:publish": "pnpm lint && pnpm build && pnpm test && changeset publish"
+    "ci:publish": "pnpm lint && pnpm build && pnpm test && changeset publish",
+    "changeset:add": "pnpm changeset && git add .changeset && git commit -m 'chore(changeset): add'"
   },
   "devDependencies": {
     "@changesets/changelog-github": "^0.5.0",

packages/core/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @vue-flow/core
 
+## 1.43.0
+
+### Minor Changes
+
+- [#1820](https://github.com/bcakmakoglu/vue-flow/pull/1820) [`2201cdd`](https://github.com/bcakmakoglu/vue-flow/commit/2201cdda386b75a8c52c9cb37e0ccbe6ffcd5830) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Allow passing null or undefined to `useNodeConnections` options
+
+### Patch Changes
+
+- [#1829](https://github.com/bcakmakoglu/vue-flow/pull/1829) [`a4ea4f7`](https://github.com/bcakmakoglu/vue-flow/commit/a4ea4f7735d7f65d1085d8d70a559c85303cd857) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Subtract container bounds when calculating pointer position.
+
+- [#1817](https://github.com/bcakmakoglu/vue-flow/pull/1817) [`0cc4c99`](https://github.com/bcakmakoglu/vue-flow/commit/0cc4c99d13eae3d766579ed18d92404a976e4a9d) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Add aria-hidden to markers
+
+- [#1830](https://github.com/bcakmakoglu/vue-flow/pull/1830) [`110acf1`](https://github.com/bcakmakoglu/vue-flow/commit/110acf1f730271e87e88147cde308d00ad3aac04) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Fall back to using changedTouches when passing a touchend or touchcancel event to getEventPosition.
+
 ## 1.42.5
 
 ### Patch Changes

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue-flow/core",
-  "version": "1.42.5",
+  "version": "1.43.0",
   "private": false,
   "license": "MIT",
   "author": "Burak Cakmakoglu<78412429+bcakmakoglu@users.noreply.github.com>",

packages/core/src/components/ConnectionLine/index.ts

@@ -55,19 +55,19 @@ const ConnectionLine = defineComponent({
       const handleType = connectionStartHandle.value.type
 
       const fromHandleBounds = fromNode.value.handleBounds
-      let handleBounds = fromHandleBounds?.[handleType] || []
+      let handleBounds = fromHandleBounds?.[handleType] ?? []
 
       if (connectionMode.value === ConnectionMode.Loose) {
-        const oppositeBounds = fromHandleBounds?.[handleType === 'source' ? 'target' : 'source'] || []
-        handleBounds = [...handleBounds, ...oppositeBounds] || oppositeBounds
+        const oppositeBounds = fromHandleBounds?.[handleType === 'source' ? 'target' : 'source'] ?? []
+        handleBounds = [...handleBounds, ...oppositeBounds]
       }
 
       if (!handleBounds) {
         return null
       }
 
       const fromHandle = (startHandleId ? handleBounds.find((d) => d.id === startHandleId) : handleBounds[0]) ?? null
-      const fromPosition = fromHandle?.position || Position.Top
+      const fromPosition = fromHandle?.position ?? Position.Top
       const { x: fromX, y: fromY } = getHandlePosition(fromNode.value, fromHandle, fromPosition)
 
       let toHandle: HandleElement | null = null
@@ -81,7 +81,7 @@ const ConnectionLine = defineComponent({
         } else {
           // if connection mode is loose, look for the handle in both source and target bounds
           toHandle =
-            [...(toNode.value.handleBounds.source || []), ...(toNode.value.handleBounds.target || [])]?.find(
+            [...(toNode.value.handleBounds.source ?? []), ...(toNode.value.handleBounds.target ?? [])]?.find(
               (d) => d.id === connectionEndHandle.value?.id,
             ) || null
         }

packages/core/src/composables/useGetPointerPosition.ts

@@ -9,17 +9,18 @@ import type { UseDragEvent } from './useDrag'
  * @internal
  */
 export function useGetPointerPosition() {
-  const { viewport, snapGrid, snapToGrid } = useVueFlow()
+  const { viewport, snapGrid, snapToGrid, vueFlowRef } = useVueFlow()
 
   // returns the pointer position projected to the VF coordinate system
   return (event: UseDragEvent | MouseTouchEvent) => {
+    const containerBounds = vueFlowRef.value?.getBoundingClientRect() ?? { left: 0, top: 0 }
     const evt = isUseDragEvent(event) ? event.sourceEvent : event
 
-    const { x, y } = getEventPosition(evt)
+    const { x, y } = getEventPosition(evt, containerBounds as DOMRect)
     const pointerPos = pointToRendererPoint({ x, y }, viewport.value)
     const { x: xSnapped, y: ySnapped } = snapToGrid.value ? snapPosition(pointerPos, snapGrid.value) : pointerPos
 
-    // we need the snapped position in order to be able to skip unnecessary drag events
+    // we need the snapped position to be able to skip unnecessary drag events
     return {
       xSnapped,
       ySnapped,

packages/core/src/composables/useNodeConnections.ts

@@ -6,9 +6,9 @@ import { useNodeId } from './useNodeId'
 import { useVueFlow } from './useVueFlow'
 
 export interface UseNodeConnectionsParams {
-  handleType?: MaybeRefOrGetter<HandleType>
-  handleId?: MaybeRefOrGetter<string | null>
-  nodeId?: MaybeRefOrGetter<string | null>
+  handleType?: MaybeRefOrGetter<HandleType | null | undefined>
+  handleId?: MaybeRefOrGetter<string | null | undefined>
+  nodeId?: MaybeRefOrGetter<string | null | undefined>
   onConnect?: (connections: NodeConnection[]) => void
   onDisconnect?: (connections: NodeConnection[]) => void
 }
@@ -42,9 +42,12 @@ export function useNodeConnections(params: UseNodeConnectionsParams = {}) {
     const currentHandleType = toValue(handleType)
     const currHandleId = toValue(handleId)
 
-    return `${currNodeId}${
-      currentHandleType ? (currHandleId ? `-${currentHandleType}-${currHandleId}` : `-${currentHandleType}`) : ''
-    }`
+    let handleSuffix = ''
+    if (currentHandleType) {
+      handleSuffix = currHandleId ? `-${currentHandleType}-${currHandleId}` : `-${currentHandleType}`
+    }
+
+    return `${currNodeId}${handleSuffix}`
   })
 
   watch(

packages/core/src/container/EdgeRenderer/MarkerDefinitions.vue

@@ -49,7 +49,7 @@ export default {
 </script>
 
 <template>
-  <svg class="vue-flow__marker vue-flow__container">
+  <svg class="vue-flow__marker" aria-hidden="true">
     <defs>
       <MarkerSymbols
         v-for="marker of markers"

packages/core/src/store/actions.ts

@@ -140,8 +140,8 @@ export function useActions(state: State, nodeLookup: ComputedRef<NodeLookup>, ed
 
     const changes: NodeDimensionChange[] = []
 
-    for (let i = 0; i < updates.length; ++i) {
-      const update = updates[i]
+    for (const element of updates) {
+      const update = element
 
       const node = findNode(update.id)
 
@@ -157,8 +157,8 @@ export function useActions(state: State, nodeLookup: ComputedRef<NodeLookup>, ed
         if (doUpdate) {
           const nodeBounds = update.nodeElement.getBoundingClientRect()
           node.dimensions = dimensions
-          node.handleBounds.source = getHandleBounds('source', update.nodeElement, nodeBounds, zoom)
-          node.handleBounds.target = getHandleBounds('target', update.nodeElement, nodeBounds, zoom)
+          node.handleBounds.source = getHandleBounds('source', update.nodeElement, nodeBounds, zoom, node.id)
+          node.handleBounds.target = getHandleBounds('target', update.nodeElement, nodeBounds, zoom, node.id)
 
           changes.push({
             id: node.id,

packages/core/src/types/node.ts

@@ -19,8 +19,8 @@ export interface CoordinateExtentRange {
 }
 
 export interface NodeHandleBounds {
-  source?: HandleElement[]
-  target?: HandleElement[]
+  source: HandleElement[] | null
+  target: HandleElement[] | null
 }
 
 /** @deprecated will be removed in next major release */

packages/core/src/utils/edge.ts

@@ -30,7 +30,7 @@ export function getHandlePosition(
   }
 }
 
-export function getEdgeHandle(bounds: HandleElement[] | undefined, handleId?: string | null): HandleElement | null {
+export function getEdgeHandle(bounds: HandleElement[] | null, handleId?: string | null): HandleElement | null {
   if (!bounds) {
     return null
   }

packages/core/src/utils/general.ts

@@ -12,8 +12,23 @@ export function isUseDragEvent(event: any): event is UseDragEvent {
 export function getEventPosition(event: MouseEvent | TouchEvent, bounds?: DOMRect) {
   const isMouse = isMouseEvent(event)
 
-  const evtX = isMouse ? event.clientX : event.touches?.[0].clientX
-  const evtY = isMouse ? event.clientY : event.touches?.[0].clientY
+  let evtX: number
+  let evtY: number
+
+  if (isMouse) {
+    evtX = event.clientX
+    evtY = event.clientY
+  } else if ('touches' in event && event.touches.length > 0) {
+    evtX = event.touches[0].clientX
+    evtY = event.touches[0].clientY
+  } else if ('changedTouches' in event && event.changedTouches.length > 0) {
+    evtX = event.changedTouches[0].clientX
+    evtY = event.changedTouches[0].clientY
+  } else {
+    // fallback for other cases
+    evtX = 0
+    evtY = 0
+  }
 
   return {
     x: evtX - (bounds?.left ?? 0),

packages/core/src/utils/handle.ts

@@ -122,7 +122,7 @@ export function getClosestHandle(
   return closestHandles[0]
 }
 
-// checks if  and returns connection in form of an object { source: 123, target: 312 }
+// checks if and returns connection in form of an object { source: 123, target: 312 }
 export function isValidHandle(
   event: MouseEvent | TouchEvent,
   {

packages/core/src/utils/node.ts

@@ -8,22 +8,25 @@ export function getHandleBounds(
   nodeElement: HTMLDivElement,
   nodeBounds: DOMRect,
   zoom: number,
-): HandleElement[] {
+  nodeId: string,
+): HandleElement[] | null {
   const handles = nodeElement.querySelectorAll(`.vue-flow__handle.${type}`)
 
-  const handlesArray = Array.from(handles) as HTMLDivElement[]
+  if (!handles?.length) {
+    return null
+  }
 
-  return handlesArray.map((handle): HandleElement => {
+  return Array.from(handles).map((handle): HandleElement => {
     const handleBounds = handle.getBoundingClientRect()
 
     return {
       id: handle.getAttribute('data-handleid'),
-      position: handle.getAttribute('data-handlepos') as unknown as Position,
-      nodeId: handle.getAttribute('data-nodeid') as string,
       type,
+      nodeId,
+      position: handle.getAttribute('data-handlepos') as unknown as Position,
       x: (handleBounds.left - nodeBounds.left) / zoom,
       y: (handleBounds.top - nodeBounds.top) / zoom,
-      ...getDimensions(handle),
+      ...getDimensions(handle as HTMLDivElement),
     }
   })
 }