possible bug with removeNodes() or its v-model

[ghiscoding]

Hello, I think I discovered a bug with removeNodes() which is that it doesn't seem to delete the last node when there's only 1 node left in the canvas. I also replicated the same bug in the Save & Restore - Example by using the following code from the Example.

So in our use case, we use GUID as Id and when I delete the last Node and then add a new Node, it adds 2 Nodes to the canvas instead of 1 as it's supposed to do because the last node in still somehow in memory

App.vue

<script lang="ts" setup>
import { VueFlow } from '@vue-flow/core'
import { ref, watch } from 'vue'
import SaveRestoreControls from './Controls.vue'

const elements = ref([{ id: '1', label: 'Node 1', position: { x: 100, y: 100 } }])

// NEW: adding a value count & display it below
const count = ref(1)
watch(elements, (newValue) => {
  count.value = newValue.length;
})
</script>

<template>
  Elements count: {{count}}
  <VueFlow v-model="elements">
    <SaveRestoreControls />
  </VueFlow>
</template>

Controls.vue

<script setup>
import { Panel, PanelPosition } from '@vue-flow/additional-components'
import { useVueFlow } from '@vue-flow/core'

const flowKey = 'example-flow'

const { nodes, addNodes, setNodes, setEdges, dimensions, setTransform, toObject,getNodes, removeNodes } = useVueFlow()

const onSave = () => {
  localStorage.setItem(flowKey, JSON.stringify(toObject()))
}

const onRestore = () => {
  const flow = JSON.parse(localStorage.getItem(flowKey))

  if (flow) {
    const [x = 0, y = 0] = flow.position
    setNodes(flow.nodes)
    setEdges(flow.edges)
    setTransform({ x, y, zoom: flow.zoom || 0 })
  }
}

const onAdd = () => {
  const id = nodes.value.length + 1

  const newNode = {
    id: `${id}`,
    label: `Node ${id}`,
    position: { x: Math.random() * dimensions.value.width, y: Math.random() * dimensions.value.height },
  }

  addNodes([newNode])
}

function onDeleteLast() {
  removeNodes([`${getNodes.value.length}`]);
}
</script>

<template>
  <Panel :position="PanelPosition.TopRight" class="save-restore-controls">
    <button style="background-color: #33a6b8" @click="onSave">save</button>
    <button style="background-color: #113285" @click="onRestore">restore</button>
    <button style="background-color: #6f3381" @click="onAdd">add node</button>
    <button style="background-color: #6f3381" @click="onDeleteLast">delete last node</button>
  </Panel>
</template>

see animated gif

[bcakmakoglu]

Did you check if the element is actually still in the state? (like logging getNodes.value)
or is your watcher just not triggering properly?^^

Try watching it deeply, i.e. watch(value, () => {}, { deep: true }) and see if that triggers it properly.

[ghiscoding]

sure take your time for a release, next day or week is fine, we're still in POC mode 😉

thanks for the note about experimental, it seems that only the 2nd option works with TS, the 1st option throws a TS type error. I'm not sure if you exposed it in your interface? I'm on latest v1.5.0.. and that experimental flag doesn't seem to help so far, but that type of features will be implemented later so that can wait too

[bcakmakoglu]

It's because you're passing an incomplete object.
There is no "options".
The options are simply an object that you pass as the first argument :)

// no `options: {}`
useVueFlow({
  __experimentalFeatures: {
    nestedFlow: true,
  },
})

[bcakmakoglu]

Or is that just your IDE making it look like that? because on my end it works with TS without any issue whatsoever 🤔

[ghiscoding]

you can try this docs link to see the fix in action: https://vue-flow-docs-git-fix-update-model-value-bcakmakoglu.vercel.app/
The docs always use the PR build so the fix is already available in the examples for that link

indeed that seem to do the work, you are amazingly quick in replying and fixing these issues. You are like a 🚀 😄

[ghiscoding]

Or is that just your IDE making it look like that? because on my end it works with TS without any issue whatsoever 🤔

ahh nevermind, it was just ESLint complaining about a linting issue (indentation). my bad 😅

[bcakmakoglu]

The fix is released with 1.5.1 @ghiscoding

[ghiscoding]

great thanks 😄