diff --git a/CHANGELOG.md b/CHANGELOG.md
index 44b3adfa3..29af86f8a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,52 @@
 
 All notable changes to this project will be documented in this file.
 
+## [1.40.0] - 2024-08-19
+
+[809a9a4](809a9a4e16ba4b8cae4159c259ec6a9da0f42954)...[538b03e](538b03ef6b94d252410cca563428eb8288eba711)
+
+### Bug Fixes
+
+- Correct controlled flow docs and replace `applyChanges` with `applyDefault` (#1574) ([876c198](876c19868f6b21f600c33b16192a5d2c1fb9256f))
+- Simplify event emit definitions to avoid hitting complexity limit of TS (#1585) ([ebc604d](ebc604d9803d53b8eb78ae68b727aa7b216ad6b3))
+- Only display grab cursor when panOnDrag is on left mouse button (#1586) ([e90f4cc](e90f4cca57415ad068eec777fa1bbe2f8b70bd75))
+
+### Documentation
+
+- Update layouting example (#1576) ([2976b11](2976b1102528a88f7b367d9c660130f2b9d078b9))
+
+### Refactor
+
+- Remove null as return type of data in `useNodesData` (#1575) ([1d772af](1d772af4a4c6424af570672372025617bebbc686))
+
+## [1.39.3] - 2024-08-06
+
+[faeed3d](faeed3d6be9fe29c30a71ae09dbd056cc9445ad2)...[809a9a4](809a9a4e16ba4b8cae4159c259ec6a9da0f42954)
+
+### Bug Fixes
+
+- Push into changes arr instead of using index (#1569) ([afa8861](afa88610edcf573d339c13f06d20c1a94d4572b1))
+
+## [1.39.2] - 2024-08-05
+
+[90a289e](90a289ebbd29812657a64f9268ef23ce851d8462)...[faeed3d](faeed3d6be9fe29c30a71ae09dbd056cc9445ad2)
+
+### Bug Fixes
+
+- Only capture pointer if valid selection has started (#1565) ([a8d837b](a8d837bf93fb201b1805a2a8be79ed1084f7aad1))
+
+## [1.39.1] - 2024-07-27
+
+[d9a133b](d9a133bd0169be8c4d5fb4ea5807d83b24df291e)...[90a289e](90a289ebbd29812657a64f9268ef23ce851d8462)
+
+### Bug Fixes
+
+- Check if injected state matches options and scope id (#1562) ([fff558f](fff558fbc313d422716d8e5c9ec7255360cbb102))
+
+### Miscellaneous Tasks
+
+- Enable sitemaps (#1554) ([6d9535a](6d9535a1a938382aafb9ad94db7a1bb9e2e51aba))
+
 ## [1.39.0] - 2024-07-15
 
 [f2ecf29](f2ecf29cf8fe0f308768e5db6e28020ea3decd82)...[d9a133b](d9a133bd0169be8c4d5fb4ea5807d83b24df291e)
diff --git a/docs/examples/index.ts b/docs/examples/index.ts
index 7dbf7a8c0..0ba4d3b7f 100644
--- a/docs/examples/index.ts
+++ b/docs/examples/index.ts
@@ -137,9 +137,6 @@ export const exampleImports = {
     'useLayout.js': useLayout,
     'Icon.vue': LayoutIcon,
     'additionalImports': {
-      '@vueuse/core': 'https://cdn.jsdelivr.net/npm/@vueuse/core@latest/index.mjs',
-      '@vueuse/shared': 'https://cdn.jsdelivr.net/npm/@vueuse/shared@latest/index.mjs',
-      'vue-demi': 'https://cdn.jsdelivr.net/npm/vue-demi@latest/lib/index.mjs',
       '@dagrejs/dagre': 'https://cdn.jsdelivr.net/npm/@dagrejs/dagre@1.1.2/+esm',
     },
   },
diff --git a/docs/examples/layout/AnimationEdge.vue b/docs/examples/layout/AnimationEdge.vue
index 50699dcbf..5a9d6d183 100644
--- a/docs/examples/layout/AnimationEdge.vue
+++ b/docs/examples/layout/AnimationEdge.vue
@@ -1,7 +1,6 @@
 <script setup>
-import { computed, nextTick, ref, toRef, watch } from 'vue'
+import { computed, ref, toRef, watch } from 'vue'
 import { BaseEdge, EdgeLabelRenderer, Position, getSmoothStepPath, useNodesData, useVueFlow } from '@vue-flow/core'
-import { TransitionPresets, executeTransition } from '@vueuse/core'
 
 const props = defineProps({
   id: {
@@ -42,21 +41,17 @@ const props = defineProps({
   },
 })
 
-const { findEdge } = useVueFlow()
+const { updateEdgeData } = useVueFlow()
 
 const nodesData = useNodesData([props.target, props.source])
 
-const edgePoint = ref(0)
+const labelRef = ref()
 
 const edgeRef = ref()
 
-const labelPosition = ref({ x: 0, y: 0 })
+const targetNodeData = computed(() => nodesData.value[0].data)
 
-const currentLength = ref(0)
-
-const targetNodeData = toRef(() => nodesData.value[0].data)
-
-const sourceNodeData = toRef(() => nodesData.value[1].data)
+const sourceNodeData = computed(() => nodesData.value[1].data)
 
 const isFinished = toRef(() => sourceNodeData.value.isFinished)
 
@@ -64,7 +59,11 @@ const isCancelled = toRef(() => targetNodeData.value.isCancelled)
 
 const isAnimating = ref(false)
 
-const edgeColor = toRef(() => {
+let animation = null
+
+const path = computed(() => getSmoothStepPath(props))
+
+const edgeColor = computed(() => {
   if (targetNodeData.value.hasError) {
     return '#f87171'
   }
@@ -84,42 +83,14 @@ const edgeColor = toRef(() => {
   return '#6b7280'
 })
 
-const path = computed(() => getSmoothStepPath(props))
-
 watch(isCancelled, (isCancelled) => {
   if (isCancelled) {
-    reset()
+    animation?.cancel()
   }
 })
 
 watch(isAnimating, (isAnimating) => {
-  const edge = findEdge(props.id)
-
-  if (edge) {
-    // we set the `isAnimating` flag, so we can wait until the next node gets executed
-    edge.data = {
-      ...edge.data,
-      isAnimating,
-    }
-  }
-})
-
-watch(edgePoint, (point) => {
-  const pathEl = edgeRef.value?.pathEl
-
-  if (!pathEl || point === 0 || !isAnimating.value) {
-    return
-  }
-
-  const nextLength = pathEl.getTotalLength()
-
-  // if length changed, restart animation
-  if (currentLength.value !== nextLength) {
-    runAnimation()
-    return
-  }
-
-  labelPosition.value = pathEl.getPointAtLength(point)
+  updateEdgeData(props.id, { isAnimating })
 })
 
 watch(isFinished, (isFinished) => {
@@ -128,7 +99,7 @@ watch(isFinished, (isFinished) => {
   }
 })
 
-async function runAnimation() {
+function runAnimation() {
   const pathEl = edgeRef.value?.pathEl
 
   if (!pathEl) {
@@ -137,35 +108,26 @@ async function runAnimation() {
 
   const totalLength = pathEl.getTotalLength()
 
-  // if animation restarted, use last edgePoint value to continue from
-  const from = edgePoint.value || 0
-
-  // update initial label position
-  labelPosition.value = pathEl.getPointAtLength(from)
-
   isAnimating.value = true
 
-  // update currentLength value, so we can check if the path length changed during animation
-  if (currentLength.value !== totalLength) {
-    currentLength.value = totalLength
-  }
+  const keyframes = [{ offsetDistance: '0%' }, { offsetDistance: '100%' }]
 
-  await executeTransition(edgePoint, from, totalLength, {
-    transition: TransitionPresets.easeInOutCubic,
-    duration: Math.max(1500, totalLength / 2),
-    abort: () => !isAnimating.value,
+  // use path length as a possible measure for the animation duration
+  const pathLengthDuration = totalLength * 10
+
+  animation = labelRef.value.animate(keyframes, {
+    duration: Math.min(Math.max(pathLengthDuration, 1500), 3000), // clamp duration between 1.5s and 3s
+    direction: 'normal',
+    easing: 'ease-in-out',
+    iterations: 1,
   })
 
-  reset()
+  animation.onfinish = handleAnimationEnd
+  animation.oncancel = handleAnimationEnd
 }
 
-function reset() {
-  nextTick(() => {
-    edgePoint.value = 0
-    currentLength.value = 0
-    labelPosition.value = { x: 0, y: 0 }
-    isAnimating.value = false
-  })
+function handleAnimationEnd() {
+  isAnimating.value = false
 }
 </script>
 
@@ -179,10 +141,18 @@ export default {
 <template>
   <BaseEdge :id="id" ref="edgeRef" :path="path[0]" :style="{ stroke: edgeColor }" />
 
-  <EdgeLabelRenderer v-if="isAnimating">
+  <EdgeLabelRenderer>
     <div
-      :style="{ transform: `translate(-50%, -50%) translate(${labelPosition.x}px,${labelPosition.y}px)` }"
-      class="nodrag nopan animated-edge-label"
+      ref="labelRef"
+      :style="{
+        visibility: isAnimating ? 'visible' : 'hidden',
+        position: 'absolute',
+        zIndex: 1,
+        offsetPath: `path('${path[0]}')`,
+        offsetRotate: '0deg',
+        offsetAnchor: 'center',
+      }"
+      class="animated-edge-label"
     >
       <span class="truck">
         <span class="box">📦</span>
@@ -192,12 +162,7 @@ export default {
   </EdgeLabelRenderer>
 </template>
 
-<style>
-.animated-edge-label {
-  position: absolute;
-  z-index: 100;
-}
-
+<style scoped>
 .truck {
   position: relative;
   display: inline-block;
diff --git a/docs/examples/layout/ProcessNode.vue b/docs/examples/layout/ProcessNode.vue
index 9ebea32a3..7641d8743 100644
--- a/docs/examples/layout/ProcessNode.vue
+++ b/docs/examples/layout/ProcessNode.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { toRef } from 'vue'
+import { computed, toRef } from 'vue'
 import { Handle, useHandleConnections } from '@vue-flow/core'
 
 const props = defineProps({
@@ -27,7 +27,7 @@ const isSender = toRef(() => sourceConnections.value.length <= 0)
 
 const isReceiver = toRef(() => targetConnections.value.length <= 0)
 
-const bgColor = toRef(() => {
+const bgColor = computed(() => {
   if (isSender.value) {
     return '#2563eb'
   }
@@ -47,7 +47,7 @@ const bgColor = toRef(() => {
   return '#4b5563'
 })
 
-const processLabel = toRef(() => {
+const processLabel = computed(() => {
   if (props.data.hasError) {
     return '❌'
   }
@@ -77,6 +77,7 @@ const processLabel = toRef(() => {
     <Handle v-if="!isSender" type="target" :position="targetPosition">
       <span v-if="!data.isRunning && !data.isFinished && !data.isCancelled && !data.isSkipped && !data.hasError">📥 </span>
     </Handle>
+
     <Handle v-if="!isReceiver" type="source" :position="sourcePosition" />
 
     <div v-if="!isSender && data.isRunning" class="spinner" />
diff --git a/docs/src/.vitepress/config.mts b/docs/src/.vitepress/config.mts
index 2d09af968..5ede9bd0b 100644
--- a/docs/src/.vitepress/config.mts
+++ b/docs/src/.vitepress/config.mts
@@ -99,6 +99,10 @@ export default defineConfigWithTheme<DefaultTheme.Config>({
     ],
   },
 
+  sitemap: {
+    hostname: 'https://vueflow.dev'
+  },
+
   themeConfig: {
     logo: '/favicons/android-chrome-512x512.png',
     footer: {
diff --git a/docs/src/guide/controlled-flow.md b/docs/src/guide/controlled-flow.md
index 158f0a9b9..568d5f528 100644
--- a/docs/src/guide/controlled-flow.md
+++ b/docs/src/guide/controlled-flow.md
@@ -82,23 +82,23 @@ removeNodes('1')
 </script>
 ```
 
-## The `applyChanges` option
+## The `applyDefault` option
 
-The `applyChanges` option is a prop that can be passed to the `<VueFlow>` component to enable or disable automatic change handling.
+The `applyDefault` option is a prop that can be passed to the `<VueFlow>` component to enable or disable automatic change handling.
 
 By setting this option to `false`, we tell Vue Flow to not apply changes automatically anymore, 
 that way we can take control of changes and apply them manually.
 
 ```vue
 <template>
-  <VueFlow :nodes="nodes" :edges="edges" :apply-changes="false" />
+  <VueFlow :nodes="nodes" :edges="edges" :apply-default="false" />
 </template>
 ```
 
 ## `onNodesChange` / `onEdgesChange` events
 
 Vue Flow provides two events that can be used to listen to changes on nodes and edges.
-These events are emitted regardless of the `applyChanges` option, so you can use them to listen to changes even if you have automatic changes enabled.
+These events are emitted regardless of the `applyDefault` option, so you can use them to listen to changes even if you have automatic changes enabled.
 
 ```vue
 <script setup>
@@ -150,7 +150,7 @@ const onChange = (changes) => {
 
 Using what we just learned, we can now take control of changes and apply them manually.
 
-In this example, we will first disable automatic change handlers with `applyChanges`, 
+In this example, we will first disable automatic change handlers with `applyDefault`, 
 then use the `onNodesChange` event to listen to changes and validate delete changes and, 
 if they are valid, use `applyNodeChanges` to apply them.
 
diff --git a/examples/vite/src/Basic/Basic.vue b/examples/vite/src/Basic/Basic.vue
index 078ed1e6d..c5be8653d 100644
--- a/examples/vite/src/Basic/Basic.vue
+++ b/examples/vite/src/Basic/Basic.vue
@@ -15,7 +15,7 @@ const elements = ref<Elements>([
   { id: 'e1-3', source: '1', target: '3' },
 ])
 
-const { onConnect, addEdges, setTransform, toObject } = useVueFlow({
+const { onConnect, addEdges, setViewport, toObject } = useVueFlow({
   minZoom: 0.2,
   maxZoom: 4,
 })
@@ -36,8 +36,8 @@ function updatePos() {
 function logToObject() {
   return console.log(toObject())
 }
-function resetTransform() {
-  return setTransform({ x: 0, y: 0, zoom: 1 })
+function resetViewport() {
+  return setViewport({ x: 0, y: 0, zoom: 1 })
 }
 function toggleclass() {
   return elements.value.forEach((el) => (el.class = el.class === 'light' ? 'dark' : 'light'))
@@ -50,7 +50,7 @@ function toggleclass() {
     <MiniMap />
     <Controls />
     <Panel position="top-right" style="display: flex; gap: 5px">
-      <button @click="resetTransform">reset transform</button>
+      <button @click="resetViewport">reset viewport</button>
       <button @click="updatePos">change pos</button>
       <button @click="toggleclass">toggle class</button>
       <button @click="logToObject">toObject</button>
diff --git a/examples/vite/src/Layouting/AnimationEdge.vue b/examples/vite/src/Layouting/AnimationEdge.vue
index f099b8fef..f060ffac7 100644
--- a/examples/vite/src/Layouting/AnimationEdge.vue
+++ b/examples/vite/src/Layouting/AnimationEdge.vue
@@ -1,94 +1,70 @@
 <script setup lang="ts">
-import type { EdgeProps } from '@vue-flow/core'
+import type { EdgeProps, Node } from '@vue-flow/core'
 import { BaseEdge, EdgeLabelRenderer, getSmoothStepPath, useNodesData } from '@vue-flow/core'
-import { TransitionPresets, executeTransition } from '@vueuse/core'
+import type { ProcessNodeData } from './types'
 
 const props = defineProps<EdgeProps>()
 
-const edgePoint = ref(0)
+const labelRef = ref<HTMLDivElement>()
 
-const sourceNodeData = useNodesData(() => props.source)
+const sourceNodeData = useNodesData<Node<ProcessNodeData>>(() => props.source)
 
-const isFinished = toRef(() => sourceNodeData.value.isFinished)
+const isFinished = toRef(() => sourceNodeData.value?.data.isFinished)
 
 const isAnimating = ref(false)
 
 const edgeColor = toRef(() => {
-  if (sourceNodeData.value.hasError) {
+  if (sourceNodeData.value?.data.hasError) {
     return '#f87171'
   }
 
-  if (sourceNodeData.value.isFinished) {
+  if (sourceNodeData.value?.data.isFinished) {
     return '#10b981'
   }
 
-  if (sourceNodeData.value.isCancelled) {
+  if (sourceNodeData.value?.data.isCancelled) {
     return '#fbbf24'
   }
 
-  if (sourceNodeData.value.isSkipped) {
+  if (sourceNodeData.value?.data.isSkipped) {
     return '#f59e0b'
   }
 
   return '#6b7280'
 })
 
-const edgeRef = ref<InstanceType<typeof BaseEdge>>()
-
-const circlePosition = ref({ x: 0, y: 0 })
-
-const currentLength = ref(0)
-
 const path = computed(() => getSmoothStepPath(props))
 
-watch(edgePoint, (point) => {
-  const pathEl = edgeRef.value?.pathEl
-
-  if (!pathEl || point === 0) {
-    return
-  }
-
-  const currLength = pathEl.getTotalLength()
-
-  if (currentLength.value !== currLength) {
-    return runAnimation()
-  }
-
-  circlePosition.value = pathEl.getPointAtLength(point)
-})
-
-watch(isFinished, async (isFinished, _, onCleanup) => {
-  if (isFinished) {
-    await runAnimation()
-
-    edgePoint.value = 0
-    currentLength.value = 0
-    circlePosition.value = { x: 0, y: 0 }
-  }
-})
-
-async function runAnimation() {
-  const pathEl = edgeRef.value?.pathEl
-
-  if (!pathEl) {
-    return
-  }
-
+watch(
+  isFinished,
+  (isFinished) => {
+    if (isFinished) {
+      runAnimation()
+    }
+  },
+  { immediate: true },
+)
+
+function runAnimation() {
   isAnimating.value = true
 
-  const totalLength = pathEl.getTotalLength()
-
-  const from = edgePoint.value || 0
-
-  if (currentLength.value !== totalLength) {
-    currentLength.value = totalLength
-  }
-
-  await executeTransition(edgePoint, from, totalLength, {
-    transition: TransitionPresets.easeInOutCubic,
+  // defer to next tick so the labelRef is available
+  nextTick(() => {
+    const keyframes = [{ offsetDistance: '0%' }, { offsetDistance: '100%' }]
+
+    const animation = labelRef.value?.animate(keyframes, {
+      duration: 1500,
+      direction: 'normal',
+      easing: 'ease-in-out',
+      iterations: 1,
+    })
+
+    if (animation) {
+      animation.onfinish = () => {
+        isAnimating.value = false
+      }
+    }
   })
-
-  isAnimating.value = false
 }
 </script>
 
@@ -100,16 +76,17 @@ export default {
 </script>
 
 <template>
-  <BaseEdge v-bind="$attrs" :id="id" ref="edgeRef" :path="path[0]" :marker-end="markerEnd" :style="{ stroke: edgeColor }" />
+  <BaseEdge v-bind="$attrs" :id="id" :path="path[0]" :marker-end="markerEnd" :style="{ stroke: edgeColor }" />
 
   <EdgeLabelRenderer v-if="isAnimating">
     <div
+      ref="labelRef"
       :style="{
         position: 'absolute',
-        transform: `translate(-50%, -50%) translate(${circlePosition.x}px,${circlePosition.y}px)`,
-        pointerEvents: 'all',
+        offsetPath: `path('${path[0]}')`,
+        offsetRotate: '0deg',
+        offsetAnchor: 'center',
       }"
-      class="nodrag nopan"
     >
       📦
     </div>
diff --git a/examples/vite/src/Layouting/ProcessNode.vue b/examples/vite/src/Layouting/ProcessNode.vue
index 445ddf7a2..b3110e53a 100644
--- a/examples/vite/src/Layouting/ProcessNode.vue
+++ b/examples/vite/src/Layouting/ProcessNode.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import type { NodeProps } from '@vue-flow/core'
 import { Handle, useHandleConnections } from '@vue-flow/core'
+import type { ProcessNodeData } from './types'
 
-const props = defineProps<NodeProps>()
+const props = defineProps<NodeProps<ProcessNodeData>>()
 
 const sourceConnections = useHandleConnections({
   type: 'target',
diff --git a/examples/vite/src/Layouting/types.ts b/examples/vite/src/Layouting/types.ts
new file mode 100644
index 000000000..87451bb4a
--- /dev/null
+++ b/examples/vite/src/Layouting/types.ts
@@ -0,0 +1,7 @@
+export interface ProcessNodeData {
+  hasError: boolean
+  isSkipped: boolean
+  isCancelled: boolean
+  isFinished: boolean
+  isRunning: boolean
+}
diff --git a/examples/vite/src/SaveRestore/Controls.vue b/examples/vite/src/SaveRestore/Controls.vue
index 338ddaa3e..ceb3c7905 100644
--- a/examples/vite/src/SaveRestore/Controls.vue
+++ b/examples/vite/src/SaveRestore/Controls.vue
@@ -1,21 +1,20 @@
 <script lang="ts" setup>
-import type { FlowExportObject } from '@vue-flow/core'
+import type { Edge, FlowExportObject, Node } from '@vue-flow/core'
 import { useVueFlow } from '@vue-flow/core'
 
 const flowKey = 'example-flow'
 
-const state = useStorage<FlowExportObject | null>(flowKey, {
-  nodes: [],
-  edges: [],
-  position: [NaN, NaN],
-  zoom: 1,
-})
+const state = useStorage(flowKey, {
+  nodes: [] as Node[],
+  edges: [] as Edge[],
+  viewport: { x: 0, y: 0, zoom: 1 },
+} as FlowExportObject)
 
 function getNodeId() {
   return `randomnode_${+new Date()}`
 }
 
-const { addNodes, setNodes, setEdges, toObject, dimensions, setTransform } = useVueFlow()
+const { addNodes, setNodes, setEdges, toObject, dimensions, setViewport } = useVueFlow()
 
 function onSave() {
   state.value = toObject()
@@ -31,7 +30,7 @@ function onRestore() {
 
     setEdges(flow.edges)
 
-    setTransform({ x, y, zoom: flow.zoom || 0 })
+    setViewport({ x, y, zoom: flow.zoom || 0 })
   }
 }
 
diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md
index eba93e2f3..e5b064fa6 100644
--- a/packages/core/CHANGELOG.md
+++ b/packages/core/CHANGELOG.md
@@ -1,5 +1,37 @@
 # @vue-flow/core
 
+## 1.40.0
+
+### Minor Changes
+
+- [#1575](https://github.com/bcakmakoglu/vue-flow/pull/1575) [`7aa49f4`](https://github.com/bcakmakoglu/vue-flow/commit/7aa49f4f6da9643797743cddb4074dbad85d0aa8) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Remove `null` as possible return type of data in `useNodesData`
+
+### Patch Changes
+
+- [#1586](https://github.com/bcakmakoglu/vue-flow/pull/1586) [`f2ed6a3`](https://github.com/bcakmakoglu/vue-flow/commit/f2ed6a3b3daeb526156173a8913dcc3785b4b999) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Only display grab cursor when panOnDrag is on left mouse button
+
+- [#1585](https://github.com/bcakmakoglu/vue-flow/pull/1585) [`d7a51f8`](https://github.com/bcakmakoglu/vue-flow/commit/d7a51f8014c02043ca1c6c1e96210a0f6545175a) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Simplify event emits definitions to avoid hitting complexity limit of TS.
+
+## 1.39.3
+
+### Patch Changes
+
+- [#1569](https://github.com/bcakmakoglu/vue-flow/pull/1569) [`f6b394f`](https://github.com/bcakmakoglu/vue-flow/commit/f6b394f0b8ad698fead4f91eaed8650b5b5d2cc9) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Push into dimensions changes array instead of using index access.
+
+## 1.39.2
+
+### Patch Changes
+
+- [#1565](https://github.com/bcakmakoglu/vue-flow/pull/1565) [`90f573a`](https://github.com/bcakmakoglu/vue-flow/commit/90f573a4e56a1ad92e1d15f7a45a8f5600dc6307) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Only capture pointer when a valid selection has started
+
+## 1.39.1
+
+### Patch Changes
+
+- [#1562](https://github.com/bcakmakoglu/vue-flow/pull/1562) [`e83b1ef`](https://github.com/bcakmakoglu/vue-flow/commit/e83b1ef9be83df10be9d4c8a35d6d0caff26e6b9) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Check if injected vue flow state matches options id, otherwise create new state
+
+- [#1562](https://github.com/bcakmakoglu/vue-flow/pull/1562) [`e83b1ef`](https://github.com/bcakmakoglu/vue-flow/commit/e83b1ef9be83df10be9d4c8a35d6d0caff26e6b9) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Prefer options id over scope id when finding vue flow internal state by id
+
 ## 1.39.0
 
 ### Minor Changes
diff --git a/packages/core/package.json b/packages/core/package.json
index 76135d0ee..b0d8741cc 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vue-flow/core",
-  "version": "1.39.0",
+  "version": "1.40.0",
   "private": false,
   "license": "MIT",
   "author": "Burak Cakmakoglu<78412429+bcakmakoglu@users.noreply.github.com>",
diff --git a/packages/core/src/composables/useNodesData.ts b/packages/core/src/composables/useNodesData.ts
index 9c1e8ca21..337beb1af 100644
--- a/packages/core/src/composables/useNodesData.ts
+++ b/packages/core/src/composables/useNodesData.ts
@@ -7,7 +7,7 @@ import { useVueFlow } from './useVueFlow'
 interface NodeData<NodeType extends Node = GraphNode> {
   id: string
   type: NodeType['type']
-  data: NonNullable<NodeType['data']> | null
+  data: NonNullable<NodeType['data']>
 }
 
 /**
@@ -42,7 +42,7 @@ export function useNodesData(_nodeIds: any): any {
           return {
             id: node.id,
             type: node.type,
-            data: node.data ?? null,
+            data: node.data,
           }
         }
 
@@ -58,7 +58,7 @@ export function useNodesData(_nodeIds: any): any {
           data.push({
             id: node.id,
             type: node.type,
-            data: node.data ?? null,
+            data: node.data,
           })
         }
       }
diff --git a/packages/core/src/composables/useVueFlow.ts b/packages/core/src/composables/useVueFlow.ts
index c4f7427a0..5368a7f95 100644
--- a/packages/core/src/composables/useVueFlow.ts
+++ b/packages/core/src/composables/useVueFlow.ts
@@ -33,7 +33,7 @@ export function useVueFlow(idOrOpts?: any): VueFlowStore {
   const options = isOptsObj ? idOrOpts : { id: idOrOpts }
 
   const id = options.id
-  const vueFlowId = scope?.vueFlowId || id
+  const vueFlowId = id ?? scope?.vueFlowId
 
   let vueFlow: Injection
 
@@ -42,9 +42,9 @@ export function useVueFlow(idOrOpts?: any): VueFlowStore {
    * this should be the regular way after initialization
    */
   if (scope) {
-    const injection = inject(VueFlow, null)
-    if (typeof injection !== 'undefined' && injection !== null) {
-      vueFlow = injection
+    const injectedState = inject(VueFlow, null)
+    if (typeof injectedState !== 'undefined' && injectedState !== null && (!vueFlowId || injectedState.id === vueFlowId)) {
+      vueFlow = injectedState
     }
   }
 
@@ -63,7 +63,7 @@ export function useVueFlow(idOrOpts?: any): VueFlowStore {
    * _or_ if the store instance we found does not match up with provided ids
    * create a new store instance and register it in storage
    */
-  if (!vueFlow || (vueFlow && id && id !== vueFlow.id)) {
+  if (!vueFlow || (vueFlowId && vueFlow.id !== vueFlowId)) {
     const name = id ?? storage.getId()
 
     const state = storage.create(name, options)
diff --git a/packages/core/src/container/Pane/Pane.vue b/packages/core/src/container/Pane/Pane.vue
index 4661d97af..52d2db5ba 100644
--- a/packages/core/src/container/Pane/Pane.vue
+++ b/packages/core/src/container/Pane/Pane.vue
@@ -115,7 +115,6 @@ function onWheel(event: WheelEvent) {
 
 function onPointerDown(event: PointerEvent) {
   containerBounds.value = vueFlowRef.value?.getBoundingClientRect()
-  ;(event.target as Element)?.setPointerCapture?.(event.pointerId)
 
   if (
     !elementsSelectable.value ||
@@ -127,6 +126,8 @@ function onPointerDown(event: PointerEvent) {
     return
   }
 
+  ;(event.target as Element)?.setPointerCapture?.(event.pointerId)
+
   const { x, y } = getMousePosition(event, containerBounds.value)
 
   selectionStarted = true
diff --git a/packages/core/src/container/Viewport/Viewport.vue b/packages/core/src/container/Viewport/Viewport.vue
index 98e3b3996..1571777aa 100644
--- a/packages/core/src/container/Viewport/Viewport.vue
+++ b/packages/core/src/container/Viewport/Viewport.vue
@@ -408,7 +408,11 @@ export default {
     <Pane
       :is-selecting="isSelecting"
       :selection-key-pressed="selectionKeyPressed"
-      :class="{ connecting: !!connectionStartHandle, dragging: paneDragging, draggable: shouldPanOnDrag }"
+      :class="{
+        connecting: !!connectionStartHandle,
+        dragging: paneDragging,
+        draggable: panOnDrag === true || (Array.isArray(panOnDrag) && panOnDrag.includes(0)),
+      }"
     >
       <Transform>
         <slot />
diff --git a/packages/core/src/store/actions.ts b/packages/core/src/store/actions.ts
index 89564847d..61e0a1f5a 100644
--- a/packages/core/src/store/actions.ts
+++ b/packages/core/src/store/actions.ts
@@ -156,11 +156,11 @@ export function useActions(state: State, nodeLookup: ComputedRef<NodeLookup>, ed
           node.handleBounds.source = getHandleBounds('.source', update.nodeElement, nodeBounds, zoom)
           node.handleBounds.target = getHandleBounds('.target', update.nodeElement, nodeBounds, zoom)
 
-          changes[i] = {
+          changes.push({
             id: node.id,
             type: 'dimensions',
             dimensions,
-          }
+          })
         }
       }
     }
diff --git a/packages/core/src/types/flow.ts b/packages/core/src/types/flow.ts
index 85fef24e0..0c6c14e8e 100644
--- a/packages/core/src/types/flow.ts
+++ b/packages/core/src/types/flow.ts
@@ -237,15 +237,46 @@ export interface FlowProps {
  */
 export type FlowOptions = FlowProps
 
+export type EdgeMouseEvents =
+  | 'edgeContextMenu'
+  | 'edgeMouseEnter'
+  | 'edgeMouseMove'
+  | 'edgeMouseLeave'
+  | 'edgeDoubleClick'
+  | 'edgeClick'
+  | 'edgeUpdateStart'
+  | 'edgeUpdateEnd'
+
+export type NodeMouseEvents =
+  | 'nodeContextMenu'
+  | 'nodeMouseEnter'
+  | 'nodeMouseMove'
+  | 'nodeMouseLeave'
+  | 'nodeDoubleClick'
+  | 'nodeClick'
+
+export type NodeDragEvents = 'nodeDragStart' | 'nodeDrag' | 'nodeDragStop'
+
+export type MiniMapNodeEvents =
+  | 'miniMapNodeClick'
+  | 'miniMapNodeDoubleClick'
+  | 'miniMapNodeMouseEnter'
+  | 'miniMapNodeMouseMove'
+  | 'miniMapNodeMouseLeave'
+
+export type PaneMouseEvents = 'paneClick' | 'paneContextMenu' | 'paneMouseEnter' | 'paneMouseMove' | 'paneMouseLeave'
+
 export interface FlowEmits {
   (event: 'nodesChange', changes: NodeChange[]): void
   (event: 'edgesChange', changes: EdgeChange[]): void
   (event: 'nodesInitialized'): void
-  (event: 'miniMapNodeClick', nodeMouseEvent: NodeMouseEvent): void
-  (event: 'miniMapNodeDoubleClick', nodeMouseEvent: NodeMouseEvent): void
-  (event: 'miniMapNodeMouseEnter', nodeMouseEvent: NodeMouseEvent): void
-  (event: 'miniMapNodeMouseMove', nodeMouseEvent: NodeMouseEvent): void
-  (event: 'miniMapNodeMouseLeave', nodeMouseEvent: NodeMouseEvent): void
+
+  /** @deprecated use `init` instead */
+  (event: 'paneReady', paneEvent: VueFlowStore): void
+  (event: 'init', paneEvent: VueFlowStore): void
+  (event: 'updateNodeInternals'): void
+  (event: 'error', error: VueFlowError): void
+
   (event: 'connect', connectionEvent: Connection): void
   (
     event: 'connectStart',
@@ -261,49 +292,33 @@ export interface FlowEmits {
     } & OnConnectStartParams,
   ): void
   (event: 'clickConnectEnd', connectionEvent?: MouseEvent): void
+
   (event: 'moveStart', moveEvent: { event: D3ZoomEvent<HTMLDivElement, any>; flowTransform: ViewportTransform }): void
   (event: 'move', moveEvent: { event: D3ZoomEvent<HTMLDivElement, any>; flowTransform: ViewportTransform }): void
   (event: 'moveEnd', moveEvent: { event: D3ZoomEvent<HTMLDivElement, any>; flowTransform: ViewportTransform }): void
+
   (event: 'selectionDragStart', selectionEvent: NodeDragEvent): void
   (event: 'selectionDrag', selectionEvent: NodeDragEvent): void
   (event: 'selectionDragStop', selectionEvent: NodeDragEvent): void
   (event: 'selectionContextMenu', selectionEvent: { event: MouseEvent; nodes: GraphNode[] }): void
   (event: 'selectionStart', selectionEvent: MouseEvent): void
   (event: 'selectionEnd', selectionEvent: MouseEvent): void
+
   (event: 'viewportChangeStart', viewport: ViewportTransform): void
   (event: 'viewportChange', viewport: ViewportTransform): void
   (event: 'viewportChangeEnd', viewport: ViewportTransform): void
-  /** @deprecated use `init` instead */
-  (event: 'paneReady', paneEvent: VueFlowStore): void
-  (event: 'init', paneEvent: VueFlowStore): void
-  (event: 'paneScroll', paneEvent: WheelEvent | undefined): void
-  (event: 'paneClick', paneEvent: MouseEvent): void
-  (event: 'paneContextMenu', paneEvent: MouseEvent): void
-  (event: 'paneMouseEnter', paneEvent: MouseEvent): void
-  (event: 'paneMouseMove', paneEvent: MouseEvent): void
-  (event: 'paneMouseLeave', paneEvent: MouseEvent): void
-  (event: 'updateNodeInternals'): void
-  (event: 'error', error: VueFlowError): void
 
-  (event: 'edgeContextMenu', edgeMouseEvent: EdgeMouseEvent): void
-  (event: 'edgeMouseEnter', edgeMouseEvent: EdgeMouseEvent): void
-  (event: 'edgeMouseMove', edgeMouseEvent: EdgeMouseEvent): void
-  (event: 'edgeMouseLeave', edgeMouseEvent: EdgeMouseEvent): void
-  (event: 'edgeDoubleClick', edgeMouseEvent: EdgeMouseEvent): void
-  (event: 'edgeClick', edgeMouseEvent: EdgeMouseEvent): void
-  (event: 'edgeUpdateStart', edgeMouseEvent: EdgeMouseEvent): void
+  (event: 'paneScroll', paneScrollEvent: WheelEvent | undefined): void
+  (event: PaneMouseEvents, paneMouseEvent: MouseEvent): void
+
   (event: 'edgeUpdate', edgeUpdateEvent: EdgeUpdateEvent): void
-  (event: 'edgeUpdateEnd', edgeMouseEvent: EdgeMouseEvent): void
-
-  (event: 'nodeDoubleClick', nodeMouseEvent: NodeMouseEvent): void
-  (event: 'nodeClick', nodeMouseEvent: NodeMouseEvent): void
-  (event: 'nodeMouseEnter', nodeMouseEvent: NodeMouseEvent): void
-  (event: 'nodeMouseMove', nodeMouseEvent: NodeMouseEvent): void
-  (event: 'nodeMouseLeave', nodeMouseEvent: NodeMouseEvent): void
-  (event: 'nodeContextMenu', nodeMouseEvent: NodeMouseEvent): void
-  (event: 'nodeDragStart', nodeDragEvent: NodeDragEvent): void
-  (event: 'nodeDrag', nodeDragEvent: NodeDragEvent): void
-  (event: 'nodeDragStop', nodeDragEvent: NodeDragEvent): void
+  (event: EdgeMouseEvents, edgeMouseEvent: EdgeMouseEvent): void
+
+  (event: NodeMouseEvents, nodeMouseEvent: NodeMouseEvent): void
+
+  (event: NodeDragEvents, nodeDragEvent: NodeDragEvent): void
+
+  (event: MiniMapNodeEvents, nodeMouseEvent: NodeMouseEvent): void
 
   /** v-model event definitions */
   (event: 'update:modelValue', value: FlowElements): void