Merge branch 'refs/heads/master' into release/2.0.0

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)

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/[email protected]/+esm',
     },
   },

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,29 +41,29 @@ 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)
 
 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;

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

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: {

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.
 

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>