feat(core,nodes): add nodesInitialized event hook

packages/core/src/components/Nodes/NodeWrapper.vue

@@ -17,6 +17,8 @@ const { id, type, name, draggable, selectable, connectable, ...props } = defineP
   resizeObserver: ResizeObserver
 }>()
 
+const nodeEmits = defineEmits(['ready'])
+
 provide(NodeId, id)
 
 const {
@@ -93,6 +95,7 @@ updatePosition(
 
 onMounted(() => {
   props.resizeObserver.observe(nodeElement.value)
+  nodeEmits('ready')
 })
 
 onBeforeUnmount(() => {

packages/core/src/container/NodeRenderer/NodeRenderer.vue

@@ -7,7 +7,9 @@ import { warn } from '../../utils'
 
 const slots = inject(Slots)
 
-const { nodesDraggable, elementsSelectable, nodesConnectable, getNodes, getNodeTypes, updateNodeDimensions } = $(useVueFlow())
+const { nodesDraggable, elementsSelectable, nodesConnectable, getNodes, getNodeTypes, updateNodeDimensions, emits } = $(
+  useVueFlow(),
+)
 
 const draggable = (d?: boolean) => (typeof d === 'undefined' ? nodesDraggable : d)
 const selectable = (s?: boolean) => (typeof s === 'undefined' ? elementsSelectable : s)
@@ -52,6 +54,14 @@ const getType = (type?: string, template?: GraphNode['template']) => {
 
   return slot
 }
+
+const readyNodes = []
+const isReady = (id: string) => {
+  readyNodes.push(id)
+  if (readyNodes.length === getNodes.length) {
+    emits.nodesInitialized()
+  }
+}
 </script>
 
 <script lang="ts">
@@ -74,6 +84,7 @@ export default {
         :selectable="selectable(node.selectable)"
         :connectable="connectable(node.connectable)"
         :node="node"
+        @ready="isReady(node.id)"
       />
     </template>
   </div>

packages/core/src/container/VueFlow/VueFlow.vue

@@ -55,6 +55,7 @@ const emit = defineEmits<{
   (event: 'nodeDragStart', nodeDragEvent: NodeDragEvent): void
   (event: 'nodeDrag', nodeDragEvent: NodeDragEvent): void
   (event: 'nodeDragStop', nodeDragEvent: NodeDragEvent): void
+  (event: 'nodesInitialized'): void
   (event: 'miniMapNodeClick', nodeMouseEvent: NodeMouseEvent): void
   (event: 'miniMapNodeDoubleClick', nodeMouseEvent: NodeMouseEvent): void
   (event: 'miniMapNodeMouseEnter', nodeMouseEvent: NodeMouseEvent): void

packages/core/src/store/hooks.ts

@@ -14,6 +14,7 @@ export const createHooks = (): FlowHooks => ({
   nodeDragStart: createEventHook(),
   nodeDrag: createEventHook(),
   nodeDragStop: createEventHook(),
+  nodesInitialized: createEventHook(),
   miniMapNodeClick: createEventHook(),
   miniMapNodeDoubleClick: createEventHook(),
   miniMapNodeMouseEnter: createEventHook(),

packages/core/src/types/hooks.ts

@@ -45,6 +45,7 @@ export interface FlowEvents {
   nodeDragStart: NodeDragEvent
   nodeDrag: NodeDragEvent
   nodeDragStop: NodeDragEvent
+  nodesInitialized: void
   updateNodeInternals: string[]
   miniMapNodeClick: NodeMouseEvent
   miniMapNodeDoubleClick: NodeMouseEvent
@@ -108,6 +109,7 @@ export interface Emits {
   (event: 'nodeDragStart', nodeDragEvent: NodeDragEvent): void
   (event: 'nodeDrag', nodeDragEvent: NodeDragEvent): void
   (event: 'nodeDragStop', nodeDragEvent: NodeDragEvent): void
+  (event: 'nodesInitialized'): void
   (event: 'miniMapNodeClick', nodeMouseEvent: NodeMouseEvent): void
   (event: 'miniMapNodeDoubleClick', nodeMouseEvent: NodeMouseEvent): void
   (event: 'miniMapNodeMouseEnter', nodeMouseEvent: NodeMouseEvent): void