feat(flow): Add setNodes and OnNodesChange / setEdges OnEdgesChange utils to useNode/Edge-state

* add option to apply default change handler

src/container/EdgeRenderer/EdgeRenderer.vue

@@ -64,9 +64,9 @@ export default {
           <slot :name="`edge-${edge.type}`" v-bind="edgeProps"></slot>
         </template>
       </EdgeWrapper>
-      <ConnectionLine v-if="group.isMaxLevel && connectionLineVisible && sourceNode" :source-node="sourceNode">
+      <ConnectionLine v-if="connectionLineVisible && sourceNode" :source-node="sourceNode">
         <template #default="customConnectionLineProps">
-          <slot name="custom-connection-line" v-bind="customConnectionLineProps"></slot>
+          <slot name="connection-line" v-bind="customConnectionLineProps"></slot>
         </template>
       </ConnectionLine>
     </g>

src/container/TransformationPane/TransformationPane.vue

@@ -27,8 +27,8 @@ const { store } = useVueFlow()
       >
         <slot :name="`edge-${edgeName}`" v-bind="edgeProps" />
       </template>
-      <template #custom-connection-line="customConnectionLineProps">
-        <slot name="custom-connection-line" v-bind="customConnectionLineProps" />
+      <template #connection-line="customConnectionLineProps">
+        <slot name="connection-line" v-bind="customConnectionLineProps" />
       </template>
     </EdgeRenderer>
   </div>

src/container/VueFlow/VueFlow.vue

@@ -21,8 +21,9 @@ const props = withDefaults(defineProps<FlowProps>(), {
 })
 const emit = defineEmits([...Object.keys(createHooks())])
 
-const { store } = useVueFlow(props)
+const { store } = useVueFlow()
 useHooks(store, emit)
+nextTick(() => store.setState(props))
 watch(
   () => props,
   (v) => nextTick(() => store.setState(v)),
@@ -51,8 +52,8 @@ export default {
       >
         <slot :name="`edge-${edgeName}`" v-bind="edgeProps" />
       </template>
-      <template #custom-connection-line="customConnectionLineProps">
-        <slot name="custom-connection-line" v-bind="customConnectionLineProps" />
+      <template #connection-line="customConnectionLineProps">
+        <slot name="connection-line" v-bind="customConnectionLineProps" />
       </template>
       <slot name="zoom-pane" />
     </ZoomPane>

src/container/ZoomPane/ZoomPane.vue

@@ -237,8 +237,8 @@ export default {
       >
         <slot :name="`edge-${edgeName}`" v-bind="edgeProps" />
       </template>
-      <template #custom-connection-line="customConnectionLineProps">
-        <slot name="custom-connection-line" v-bind="customConnectionLineProps" />
+      <template #connection-line="customConnectionLineProps">
+        <slot name="connection-line" v-bind="customConnectionLineProps" />
       </template>
     </TransformationPane>
     <SelectionPane :key="`selection-pane-${store.id}`" />