Viewport Transition

import type { InjectionKey, Ref } from 'vue';
import { inject, provide, shallowRef } from 'vue';
 
// Broadcasts the last double-clicked node id from <VueFlow> down to the transition edge. A fresh object
// per click means re-clicking the same node still triggers the edge's watcher.
export type DblClickSignal = { nodeId: string } | null;
 
const DblClickKey: InjectionKey<Ref<DblClickSignal>> = Symbol('dblclick-signal');
 
export function provideDblClick() {
  const signal = shallowRef<DblClickSignal>(null);
 
  provide(DblClickKey, signal);
 
  return (nodeId: string) => {
    signal.value = { nodeId };
  };
}
 
export function useDblClick(): Ref<DblClickSignal> {
  const signal = inject(DblClickKey);
 
  if (!signal) {
    throw new Error('useDblClick() must be used under a component that called provideDblClick()');
  }
 
  return signal;
}