feat(vue-node-registry): scope vueNodesMap per LogicFlow instance to support nested scenarios

Author: EralChen

packages/vue-node-registry/src/registry.ts

@@ -1,4 +1,4 @@
-import LogicFlow from '@logicflow/core'
+import LogicFlow, { GraphModel } from '@logicflow/core'
 import { VueNodeView } from './view'
 import { VueNodeModel } from './model'
 
@@ -10,13 +10,32 @@ export type VueNodeConfig = {
   effect?: (keyof LogicFlow.PropertiesType)[]
 } & Partial<RegisterConfig>
 
-export const vueNodesMap: Record<
-  string,
-  {
-    component: any
-    effect?: (keyof LogicFlow.PropertiesType)[]
-  }
-> = {}
+type VueNodeEntry = {
+  component: any
+  effect?: (keyof LogicFlow.PropertiesType)[]
+}
+
+// Per-instance map: automatically garbage-collected when the GraphModel is destroyed
+const vueNodesMaps = new WeakMap<GraphModel, Map<string, VueNodeEntry>>()
+
+/**
+ * @deprecated Use {@link getVueNodeConfig} instead for multi-instance support.
+ * This global map is still populated for backward compatibility but does NOT
+ * isolate registrations across different LogicFlow instances.
+ */
+export const vueNodesMap: Record<string, VueNodeEntry> = Object.create(
+  null,
+) as Record<string, VueNodeEntry>
+
+/**
+ * Retrieve the Vue node configuration scoped to a specific LogicFlow instance.
+ */
+export function getVueNodeConfig(
+  type: string,
+  graphModel: GraphModel,
+): VueNodeEntry | undefined {
+  return vueNodesMaps.get(graphModel)?.get(type)
+}
 
 export function register(config: VueNodeConfig, lf: LogicFlow) {
   const {
@@ -30,10 +49,19 @@ export function register(config: VueNodeConfig, lf: LogicFlow) {
   if (!type) {
     throw new Error('You should specify type in config')
   }
-  vueNodesMap[type] = {
-    component,
-    effect,
+
+  const entry: VueNodeEntry = { component, effect }
+
+  // Scope to this LogicFlow instance
+  let map = vueNodesMaps.get(lf.graphModel)
+  if (!map) {
+    map = new Map<string, VueNodeEntry>()
+    vueNodesMaps.set(lf.graphModel, map)
   }
+  map.set(type, entry)
+
+  // Also populate global map for backward compatibility
+  vueNodesMap[type] = entry
 
   lf.register({
     type,

packages/vue-node-registry/src/view.ts

@@ -10,7 +10,7 @@ import {
   isNumber,
 } from 'lodash-es'
 import { HtmlNode } from '@logicflow/core'
-import { vueNodesMap } from './registry'
+import { getVueNodeConfig } from './registry'
 import { isActive, connect, disconnect } from './teleport'
 import { Container } from './components/container'
 
@@ -87,7 +87,9 @@ export class VueNodeView extends HtmlNode {
       })
 
     if (root) {
-      const { component } = vueNodesMap[model.type]
+      const nodeConfig = getVueNodeConfig(model.type, graphModel)
+      if (!nodeConfig) return
+      const { component } = nodeConfig
       if (component) {
         if (isVue2) {
           const Vue = Vue2 as any