fix: nodes as fragments

feat: accept vnode as edge text

src/container/Flow/Flow.vue

@@ -114,19 +114,19 @@ const defaultEdgeTypes: Record<string, EdgeType> = {
 const store = useStore(props)
 const hooks = useHooks(emit)
 
-const init = () => {
-  store.$state = { ...store.$state, ...props }
-  store.setElements(props.elements)
-  store.setMinZoom(props.minZoom)
-  store.setMaxZoom(props.maxZoom)
-  store.setTranslateExtent(props.translateExtent)
-  store.setNodeExtent(props.nodeExtent)
+const init = (opts: typeof props) => {
+  store.$state = { ...store.$state, ...opts }
+  store.setElements(opts.elements)
+  store.setMinZoom(opts.minZoom)
+  store.setMaxZoom(opts.maxZoom)
+  store.setTranslateExtent(opts.translateExtent)
+  store.setNodeExtent(opts.nodeExtent)
 }
 
 onBeforeUnmount(() => store?.$dispose())
 
-onUpdated(() => init())
-init()
+watch(props, (val) => init(val))
+init(props)
 
 const nodeTypes = createNodeTypes({ ...defaultNodeTypes, ...props.nodeTypes })
 const edgeTypes = createEdgeTypes({ ...defaultEdgeTypes, ...props.edgeTypes })

src/container/NodeRenderer/NodeRenderer.vue

@@ -37,8 +37,6 @@ const type = (node: TNode) => {
   }
   return type
 }
-
-const selected = (nodeId: string) => store.selectedElements?.some(({ id }) => id === nodeId)
 </script>
 <template>
   <div
@@ -52,7 +50,7 @@ const selected = (nodeId: string) => store.selectedElements?.some(({ id }) => id
         :type="type(node)"
         :scale="store.transform[2]"
         :snap-grid="store.snapToGrid ? store.snapGrid : undefined"
-        :selected="selected(node.id)"
+        :selected="store.selectedElements?.some(({ id }) => id === node.id)"
         :selectable="node.selectable || store.elementsSelectable"
         :connectable="node.connectable || store.nodesConnectable"
         :draggable="node.draggable || store.nodesDraggable"