From cd02dd0444421346bf844b477876e326f488cf52 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 21 Oct 2021 16:23:23 +0200
Subject: [PATCH] fix: node type change not triggering recalculation of node
 dimensions

---
 examples/NodeTypeChange/NodeTypeChangeExample.vue |  8 +++++---
 src/components/Edges/Edge.vue                     |  2 +-
 src/components/Nodes/Node.vue                     | 12 ++++++++++++
 src/container/Flow/Flow.vue                       |  4 ++--
 src/store/index.ts                                |  3 ++-
 src/types/store.ts                                |  1 +
 6 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/examples/NodeTypeChange/NodeTypeChangeExample.vue b/examples/NodeTypeChange/NodeTypeChangeExample.vue
index da2f933e..06a378ee 100644
--- a/examples/NodeTypeChange/NodeTypeChangeExample.vue
+++ b/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
diff --git a/src/components/Edges/Edge.vue b/src/components/Edges/Edge.vue
index 048eb0ed..2f28fd10 100644
--- a/src/components/Edges/Edge.vue
+++ b/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(
diff --git a/src/components/Nodes/Node.vue b/src/components/Nodes/Node.vue
index c45d759d..1b9c6273 100644
--- a/src/components/Nodes/Node.vue
+++ b/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>
diff --git a/src/container/Flow/Flow.vue b/src/container/Flow/Flow.vue
index 672bf9ca..a1b4fc69 100644
--- a/src/container/Flow/Flow.vue
+++ b/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>
diff --git a/src/store/index.ts b/src/store/index.ts
index 614f6c33..8279caa4 100644
--- a/src/store/index.ts
+++ b/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,
diff --git a/src/types/store.ts b/src/types/store.ts
index 253a6036..81f6f9fe 100644
--- a/src/types/store.ts
+++ b/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