Selected node style

[Dimonka2]

Hi,
Is it possible to define selected node additional CSS classes?
I found that it is possible to play a bit with styles via .vue-flow__node.selected {}, but it is not very optimal..

[bcakmakoglu]

You can pass classes (or styles) to nodes as a property/option.

const elements = ref<Elements>([
  { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 }, class: 'some-class', style: { color: 'red' } },
])

You can change the styles whenever you want (if you want to keep reactivity on your initial elements, don't map over them but use a forEach loop to change properties)

<script setup lang="ts">
const elements = ref([...])
const toggleClasses = () => {
   elements.value.forEach(el => {
     if (el.selected) el.class = 'some-selected-class'
  }
}
</script>
<template>
  <VueFlow v-model="elements">
    <button @click="toggleClasses">Toggle classes</button>
  </VueFlow>
</template>