Is there a way to dynamically hide the Toolbar?

[sdr0x07b6]

I can click a node to show the toolbar, and then click anywhere else to hide the toolbar.

However, there are probably many situations where the Toolbar is no longer needed after clicking a button on the Toolbar. I would like to hide the Toolbar when the button is clicked.

Even in that case, it seems I still have to click the pane to hide it myself.

<NodeToolbar> has an is-visible attribute, but when I set this to false when I wanted to hide it, the Toolbar never appeared again.

[bcakmakoglu]

You can control the visibility using is-visible but once you do that you take over the visibility completely and the Toolbar will not use it's default behavior anymore where it will toggle on/off when a node is selected/unselected.

One way around that would be to pass undefined to the is-visible prop, which would enable the default Toolbar behavior again.

[sdr0x07b6]

It's not working...🤔
Does this mean something like this in code?

Parent.vue

const elements = ref<Elements>([
  {
    id: '1',
    position: { x: 0, y: 0 },
    type: 'custom',

    // It doesn't matter whether add toolbarVisible here or not,
    // also, when adding, the result will be the same whether specify true, false, or undefined.
    data: { hello: 'world' },
  },
]);

<VueFlow v-model="elements" ...>
  <template #node-custom="props">
    <CustomNode v-bind="props" />
  </template>
</VueFlow>

CustomNode.vue

const props = withDefaults(
  defineProps<{
    id: string;
    data: any;
  }>(),
  {}
);

function close() {
  props.data.toolbarVisible = false;

  setTimeout(() => {
    props.data.toolbarVisible = undefined;
  }, 1000);
}


<NodeToolbar
  :is-visible="props.data.toolbarVisible"
  :position="props.data.toolbarPosition"
>
  <button @click="close">Close</button>
</NodeToolbar>

The toolbar will be removed when toolbarVisible is set to false.
However, after one second the toolbar reappears rather than becoming available.

(Regarding the direct modification of props in the child component,
we are currently looking for a way to dynamically hide it, and will implement it correctly once we find a way.)

[bcakmakoglu]

Works exactly as expected tbh.

1. You set it to false so the toolbar disappears (you have taken over the visibility)
2. You set it to undefined and the toolbar stays hidden until the node is clicked again (the default behavior is enabled again)

<script setup>
import { Handle, Position, useVueFlow } from '@vue-flow/core'
import { NodeToolbar } from '@vue-flow/node-toolbar'

const props = defineProps(['id', 'data'])

const actions = ['👎', '✋', '👍']

const { updateNodeData } = useVueFlow()

function close() {
  updateNodeData(props.id, { toolbarVisible: false })
  
  setTimeout(() => {
    alert('timeout ended')
    updateNodeData(props.id, { toolbarVisible: undefined })
  }, 1000);
}
</script> 

<template>
  <NodeToolbar :is-visible="data.toolbarVisible" :position="data.toolbarPosition">
    <button
      v-for="action of actions"
      :key="action"
      type="button"
      :class="{ selected: action === data.action }"
      @click="close"
    >
      {{ action }}
    </button>
  </NodeToolbar>

  <div>
    {{ data.label }}
  </div>

  <Handle type="target" :position="Position.Left" />
  <Handle type="source" :position="Position.Right" />
</template>

[sdr0x07b6]

Thank you for your kind explanation.
However, it did not work as I intended.

I prepared Stackblitz. Click [Custom Node] to display the toolbar.
https://stackblitz.com/edit/vitejs-vite-a54mix?file=package.json,src%2FApp.vue,src%2Fcomponents%2FCustomNode.vue&terminal=dev

updateNodeData(props.id, { toolbarVisible: false });

setTimeout(() => {
  updateNodeData(props.id, { toolbarVisible: undefined });
}, 1000);

If you do this, the toolbar will indeed be hidden when { toolbarVisible: false } is executed.

However, the toolbar will be displayed again when { toolbarVisible: undefined } is executed.
It seems that rather than the state of toolbarVisible being initialized, it is returned to the way it should be (displayed).

I don't want to hide the toolbar temporarily, but rather I want to close the toolbar in the same way as closing a modal, as I no longer need it when the button is clicked.
Is there any way to do that?

[bcakmakoglu]

I don't want to hide the toolbar temporarily, but rather I want to close the toolbar in the same way as closing a modal, as I no longer need it when the button is clicked.

Set is-visible to false then? What's the issue with that?^^

[bcakmakoglu]

However, the toolbar will be displayed again when { toolbarVisible: undefined } is executed.

That's not correct as can be observed by the example I provided you. The toolbar won't just magically appear when setting to undefined, as I stated it will revert back to it's default behavior which is showing the toolbar when the node is selected.

[sdr0x07b6]

I do not want to just temporarily hide the toolbar; I want to completely close it.
I do not want the toolbar to be visible again until the node is clicked again.
Once a button on the toolbar is clicked, the toolbar is no longer needed. I want to close the toolbar in the same way as closing a modal.
Is there a way to achieve this behavior?

Sorry for my poor English...

[sdr0x07b6]

I can hide it by executing { toolbarVisible: false }.

However, if I execute { toolbarVisible: undefined } it will reappear.

However, if I don't execute { toolbarVisible: undefined }, I won't be able to display the toolbar even if I click on the node after that.

My goal is not to "hide" toolbar, but to "close" toolbar.

[sdr0x07b6]

Doing this I was able to get it to work similarly to what I wanted.
https://stackblitz.com/edit/vitejs-vite-5qhemr?file=package.json,src%2FApp.vue,src%2Fcomponents%2FCustomNode.vue&terminal=dev

<template>
  <div @click="updateNodeData(props.id, { toolbarVisible: undefined })">
    <NodeToolbar
      :is-visible="data.toolbarVisible"
      :position="data.toolbarPosition"
    >
      <button
        v-for="action of actions"
        :key="action"
        @click="updateNodeData(props.id, { toolbarVisible: false })"
      >
        {{ action }}
      </button>
    </NodeToolbar>
    Custom Node
  </div>
</template>

Does this implementation match your expectations?

To begin with, I feel that the approach of controlling with is-visible is not what I intended.
It would be easier to understand if there was a way to simply use close().