fix: node type change not triggering recalculation of node dimensions

examples/NodeTypeChange/NodeTypeChangeExample.vue

@@ -1,8 +1,6 @@
 <script lang="ts" setup>
 import { CSSProperties } from 'vue'
-import Flow, { addEdge, Connection, Elements, OnLoadParams, Position, Edge, isEdge } from '~/index'
-
-const onLoad = (reactFlowInstance: OnLoadParams) => reactFlowInstance.fitView()
+import Flow, { addEdge, Connection, Edge, Elements, isEdge, OnLoadParams, Position } from '~/index'
 
 const initialElements: Elements = [
   {
@@ -26,7 +24,11 @@ const initialElements: Elements = [
 const buttonStyle: CSSProperties = { position: 'absolute', right: 10, top: 30, zIndex: 4 }
 
 const elements = ref<Elements>(initialElements)
+
 const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
+
+const onLoad = (reactFlowInstance: OnLoadParams) => reactFlowInstance.fitView()
+
 const changeType = () => {
   elements.value = elements.value.map((el) => {
     if (isEdge(el) || el.type === 'input') return el

src/components/Edges/Edge.vue

@@ -96,7 +96,7 @@ const isVisible = ({ sourceX, sourceY, targetX, targetY }: ReturnType<typeof get
 const targetNodeHandles = computed(() =>
   store.connectionMode === ConnectionMode.Strict
     ? nodes.value.targetNode?.__rf.handleBounds.target
-    : nodes.value.targetNode?.__rf.handleBounds.target || nodes.value.targetNode?.__rf.handleBounds.source,
+    : nodes.value.targetNode?.__rf.handleBounds.target ?? nodes.value.targetNode?.__rf.handleBounds.source,
 )
 
 const sourceHandle = computed(

src/components/Nodes/Node.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { DraggableEventListener } from '@braks/revue-draggable'
+import { watchPostEffect } from 'vue'
 import { Node, NodeType, SnapGrid } from '~/types'
 import { NodeIdContextKey } from '~/context'
 import { useHooks, useStore } from '~/composables'
@@ -122,6 +123,17 @@ onMounted(() => {
     }),
   )
 })
+
+watch(
+  () => props.node.type,
+  () => {
+    store.updateNodeDimensions({
+      id: props.node.id,
+      nodeElement: nodeElement.value,
+      forceUpdate: true,
+    })
+  },
+)
 </script>
 
 <template>

src/container/Flow/Flow.vue

@@ -64,7 +64,7 @@ export interface FlowProps extends FlowOptions {
 
 const props = withDefaults(defineProps<FlowProps>(), {
   elements: () => [],
-  connectionMode: ConnectionMode.Strict,
+  connectionMode: ConnectionMode.Loose,
   connectionLineType: ConnectionLineType.Bezier,
   selectionKeyCode: 'Shift',
   multiSelectionKeyCode: 'Meta',
@@ -175,6 +175,6 @@ const edgeTypes = createEdgeTypes({ ...defaultEdgeTypes, ...props.edgeTypes })
         </EdgeRenderer>
       </SelectionPane>
     </ZoomPane>
-    <slot v-bind="{ flowProps: props, store, hooks }"></slot>
+    <slot v-bind="{ ...props, store, hooks }"></slot>
   </div>
 </template>

src/store/index.ts

@@ -6,6 +6,7 @@ export const initialState = (): FlowState => ({
     height: 0,
   },
   transform: [0, 0, 1],
+  elements: [],
   nodes: [],
   edges: [],
   selectedElements: undefined,
@@ -42,7 +43,7 @@ export const initialState = (): FlowState => ({
   connectionHandleId: undefined,
   connectionHandleType: 'source',
   connectionPosition: { x: NaN, y: NaN },
-  connectionMode: ConnectionMode.Strict,
+  connectionMode: ConnectionMode.Loose,
 
   snapGrid: [15, 15],
   snapToGrid: false,

src/types/store.ts

@@ -10,6 +10,7 @@ import { D3Selection, D3Zoom, D3ZoomHandler } from '~/types/panel'
 export interface FlowState {
   dimensions: Dimensions
   transform: Transform
+  elements: Elements
   nodes: Node[]
   edges: Edge[]
   selectedElements?: Elements