From 6ec8258f33c37f6816f2e8f44827496bdc1f21b1 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 22 Oct 2021 14:29:27 +0200
Subject: [PATCH] fix: typings

---
 examples/Basic/Basic.vue                      |  7 +++---
 .../CustomConnectionLine.vue                  |  7 +++---
 examples/CustomNode/CustomNode.vue            |  7 +++---
 examples/DragNDrop/DnD.vue                    |  7 +++---
 examples/EdgeTypes/utils.ts                   |  2 +-
 examples/EdgeWithButton/EdgeWithButton.vue    |  7 +++---
 examples/Edges/EdgesExample.vue               |  4 ++--
 examples/Empty/EmptyExample.vue               |  1 -
 examples/Hidden/HiddenExample.vue             |  2 +-
 examples/Interaction/InteractionExample.vue   |  2 +-
 examples/Layouting/initial-elements.ts        |  2 +-
 examples/MultiFlows/Flow.vue                  |  2 +-
 .../NodeTypeChange/NodeTypeChangeExample.vue  |  2 +-
 examples/NodeTypesIdChange/NodeA.vue          |  7 +++++-
 examples/NodeTypesIdChange/NodeB.vue          |  7 +++++-
 examples/Overview/Overview.vue                |  2 +-
 examples/Provider/ProviderExample.vue         |  2 +-
 examples/SaveRestore/SaveRestoreExample.vue   |  2 +-
 examples/Stress/utils.ts                      |  2 +-
 examples/Switch/SwitchExample.vue             |  4 ++--
 .../Unidirectional/UnidirectionalExample.vue  |  4 ++--
 .../UpdatableEdge/UpdatableEdgeExample.vue    |  2 +-
 examples/UpdateNode/UpdateNodeExample.vue     |  2 +-
 .../UpdateNodeInternalsExample.vue            |  6 +++--
 examples/Validation/ValidationExample.vue     |  2 +-
 .../ZoomPanHelper/ZoomPanHelperExample.vue    |  2 +-
 package.json                                  |  4 ++--
 .../Background/Background.vue                 | 20 +++++++---------
 src/additional-components/MiniMap/MiniMap.vue |  9 +++----
 .../MiniMap/MiniMapNode.vue                   |  2 +-
 .../ConnectionLine/ConnectionLine.vue         | 14 ++++++-----
 src/components/Edges/BezierEdge.vue           |  2 +-
 src/components/Edges/Edge.vue                 |  8 +++----
 src/components/Edges/EdgeAnchor.vue           | 12 ++++------
 src/components/Edges/EdgeText.vue             | 24 ++++++++++---------
 src/components/Edges/SmoothStepEdge.vue       |  2 +-
 src/components/Edges/StepEdge.vue             |  2 +-
 src/components/Edges/StraightEdge.vue         |  2 +-
 src/components/Nodes/Node.vue                 | 24 +++++++++----------
 .../NodesSelection/NodesSelection.vue         |  2 +-
 src/composables/useUpdateNodeInternals.ts     |  5 ++--
 src/container/EdgeRenderer/EdgeRenderer.vue   |  2 +-
 src/container/EdgeRenderer/utils.ts           |  8 +++----
 src/index.ts                                  |  2 ++
 src/store/useFlowStore.ts                     | 15 +++++++-----
 src/types/edge.ts                             | 16 ++++++++++---
 src/types/node.ts                             | 22 +++++++++--------
 src/types/types.ts                            |  2 +-
 src/utils/graph.ts                            | 10 ++++----
 tsconfig.json                                 |  2 +-
 50 files changed, 165 insertions(+), 142 deletions(-)

diff --git a/examples/Basic/Basic.vue b/examples/Basic/Basic.vue
index e4ccc33c..5c0ad8bc 100644
--- a/examples/Basic/Basic.vue
+++ b/examples/Basic/Basic.vue
@@ -23,11 +23,10 @@ const elements = ref<Elements>([
   { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 } },
   { id: 'e1-2', source: '1', target: '2', animated: true },
   { id: 'e1-3', source: '1', target: '3' },
-] as Elements)
+])
 const rfInstance = ref<FlowInstance | null>(null)
-const onElementsRemove = (elementsToRemove: Elements) =>
-  (elements.value = removeElements(elementsToRemove, elements.value as Elements))
-const onConnect = (params: Edge | Connection) => (elements.value = addEdge(params, elements.value as Elements))
+const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
+const onConnect = (params: Edge | Connection) => (elements.value = addEdge(params, elements.value))
 const onLoad = (flowInstance: FlowInstance) => {
   flowInstance.fitView({ padding: 0.1 })
   rfInstance.value = flowInstance
diff --git a/examples/CustomConnectionLine/CustomConnectionLine.vue b/examples/CustomConnectionLine/CustomConnectionLine.vue
index 07e2391a..19a31eb9 100644
--- a/examples/CustomConnectionLine/CustomConnectionLine.vue
+++ b/examples/CustomConnectionLine/CustomConnectionLine.vue
@@ -9,10 +9,9 @@ const elements = ref<Elements>([
     data: { label: 'Node 1' },
     position: { x: 250, y: 5 },
   },
-] as Elements)
-const onElementsRemove = (elementsToRemove: Elements) =>
-  (elements.value = removeElements(elementsToRemove, elements.value as Elements))
-const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value as Elements))
+])
+const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
+const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
 </script>
 <template>
   <Flow :elements="elements" @elements-remove="onElementsRemove" @connect="onConnect">
diff --git a/examples/CustomNode/CustomNode.vue b/examples/CustomNode/CustomNode.vue
index 8ad80906..30731a8d 100644
--- a/examples/CustomNode/CustomNode.vue
+++ b/examples/CustomNode/CustomNode.vue
@@ -94,11 +94,10 @@ onMounted(() => {
     { id: 'e1-2', source: '1', target: '2', animated: true, style: { stroke: '#fff' } },
     { id: 'e2a-3', source: '2', sourceHandle: 'a', target: '3', animated: true, style: { stroke: '#fff' } },
     { id: 'e2b-4', source: '2', sourceHandle: 'b', target: '4', animated: true, style: { stroke: '#fff' } },
-  ] as Elements
+  ]
 })
 
-const onElementsRemove = (elementsToRemove: Elements) =>
-  (elements.value = removeElements(elementsToRemove, elements.value as Elements))
+const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
 
 const onConnect = (params: Connection | Edge) =>
   (elements.value = addEdge(
@@ -107,7 +106,7 @@ const onConnect = (params: Connection | Edge) =>
       animated: true,
       style: { stroke: '#fff' },
     } as Edge,
-    elements.value as Elements,
+    elements.value,
   ))
 </script>
 <template>
diff --git a/examples/DragNDrop/DnD.vue b/examples/DragNDrop/DnD.vue
index d63d29c9..13fc36d7 100644
--- a/examples/DragNDrop/DnD.vue
+++ b/examples/DragNDrop/DnD.vue
@@ -11,7 +11,7 @@ const elements = ref<Elements>([
     data: { label: 'input node' },
     position: { x: 250, y: 5 },
   },
-] as Elements)
+])
 
 let id = 0
 const getId = (): ElementId => `dndnode_${id++}`
@@ -23,9 +23,8 @@ const onDragOver = (event: DragEvent) => {
   }
 }
 
-const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value as Elements))
-const onElementsRemove = (elementsToRemove: Elements) =>
-  (elements.value = removeElements(elementsToRemove, elements.value as Elements))
+const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
+const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
 const onLoad = (instance: FlowInstance) => (flowInstance.value = instance)
 
 const onDrop = (event: DragEvent) => {
diff --git a/examples/EdgeTypes/utils.ts b/examples/EdgeTypes/utils.ts
index 024b7d58..1a37e8da 100644
--- a/examples/EdgeTypes/utils.ts
+++ b/examples/EdgeTypes/utils.ts
@@ -102,5 +102,5 @@ export function getElements(): Elements {
     }
   }
 
-  return initialElements as Elements
+  return initialElements
 }
diff --git a/examples/EdgeWithButton/EdgeWithButton.vue b/examples/EdgeWithButton/EdgeWithButton.vue
index a36328dc..95968dff 100644
--- a/examples/EdgeWithButton/EdgeWithButton.vue
+++ b/examples/EdgeWithButton/EdgeWithButton.vue
@@ -30,13 +30,12 @@ const elements = ref<Elements>([
     target: 'ewb-2',
     type: 'buttonedge',
   },
-] as Elements)
+])
 
 const onLoad = (flowInstance: FlowInstance) => flowInstance.fitView()
-const onElementsRemove = (elementsToRemove: Elements) =>
-  (elements.value = removeElements(elementsToRemove, elements.value as Elements))
+const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
 const onConnect = (params: Connection | Edge) =>
-  (elements.value = addEdge({ ...params, type: 'buttonedge' } as Edge, elements.value as Elements))
+  (elements.value = addEdge({ ...params, type: 'buttonedge' } as Edge, elements.value))
 </script>
 <template>
   <Flow
diff --git a/examples/Edges/EdgesExample.vue b/examples/Edges/EdgesExample.vue
index b38450da..ba4a047b 100644
--- a/examples/Edges/EdgesExample.vue
+++ b/examples/Edges/EdgesExample.vue
@@ -16,7 +16,7 @@ import Flow, {
   ArrowHeadType,
 } from '~/index'
 
-const initialElements = [
+const initialElements: Elements = [
   { id: '1', type: 'input', data: { label: 'Input 1' }, position: { x: 250, y: 0 } },
   { id: '2', data: { label: 'Node 2' }, position: { x: 150, y: 100 } },
   { id: '2a', data: { label: 'Node 2a' }, position: { x: 0, y: 180 } },
@@ -79,7 +79,7 @@ const edgeTypes: Record<string, any> = {
   custom2: CustomEdge2,
 }
 
-const elements = ref<Elements>(initialElements as Elements)
+const elements = ref<Elements>(initialElements)
 
 const onLoad = (flowInstance: FlowInstance) => flowInstance.fitView()
 const onNodeDragStop = (node: Node) => console.log('drag stop', node)
diff --git a/examples/Empty/EmptyExample.vue b/examples/Empty/EmptyExample.vue
index 71c7ff4f..e3082deb 100644
--- a/examples/Empty/EmptyExample.vue
+++ b/examples/Empty/EmptyExample.vue
@@ -38,7 +38,6 @@ const addRandomNode = () => {
 <template>
   <Flow
     :elements="elements"
-    :only-render-visible-elements="false"
     @load="onLoad"
     @element-click="onElementClick"
     @elements-remove="onElementsRemove"
diff --git a/examples/Hidden/HiddenExample.vue b/examples/Hidden/HiddenExample.vue
index b1f7e7fd..80fe842d 100644
--- a/examples/Hidden/HiddenExample.vue
+++ b/examples/Hidden/HiddenExample.vue
@@ -9,7 +9,7 @@ const initialElements: Elements = [
   { id: 'e1-2', source: '1', target: '2' },
   { id: 'e1-3', source: '1', target: '3' },
   { id: 'e3-4', source: '3', target: '4' },
-] as Elements
+]
 
 const elements = ref<Elements>(initialElements)
 const isHidden = ref<boolean>(false)
diff --git a/examples/Interaction/InteractionExample.vue b/examples/Interaction/InteractionExample.vue
index cac7e44f..32ade891 100644
--- a/examples/Interaction/InteractionExample.vue
+++ b/examples/Interaction/InteractionExample.vue
@@ -19,7 +19,7 @@ const initialElements: Elements = [
   { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 } },
   { id: 'e1-2', source: '1', target: '2', animated: true },
   { id: 'e1-3', source: '1', target: '3' },
-] as Elements
+]
 
 const onNodeDragStart = (_: MouseEvent, node: Node) => console.log('drag start', node)
 const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node)
diff --git a/examples/Layouting/initial-elements.ts b/examples/Layouting/initial-elements.ts
index 4bc1982e..cc473239 100644
--- a/examples/Layouting/initial-elements.ts
+++ b/examples/Layouting/initial-elements.ts
@@ -66,6 +66,6 @@ const elements: Elements = [
   { id: 'e45', source: '4', target: '5', type: 'smoothstep', animated: true },
   { id: 'e56', source: '5', target: '6', type: 'smoothstep', animated: true },
   { id: 'e57', source: '5', target: '7', type: 'smoothstep', animated: true },
-] as Elements
+]
 
 export default elements
diff --git a/examples/MultiFlows/Flow.vue b/examples/MultiFlows/Flow.vue
index 8a4a0bb8..913daf3b 100644
--- a/examples/MultiFlows/Flow.vue
+++ b/examples/MultiFlows/Flow.vue
@@ -7,7 +7,7 @@ const initialElements: Elements = [
   { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 }, className: 'light' },
   { id: 'e1-2', source: '1', target: '2', animated: true },
   { id: 'e1-3', source: '1', target: '3' },
-] as Elements
+]
 
 const elements = ref<Elements>(initialElements)
 const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
diff --git a/examples/NodeTypeChange/NodeTypeChangeExample.vue b/examples/NodeTypeChange/NodeTypeChangeExample.vue
index af248a2c..6f2c64d3 100644
--- a/examples/NodeTypeChange/NodeTypeChangeExample.vue
+++ b/examples/NodeTypeChange/NodeTypeChangeExample.vue
@@ -19,7 +19,7 @@ const initialElements: Elements = [
     position: { x: 250, y: 0 },
   },
   { id: 'e1-2', source: '1', type: 'smoothstep', target: '2', animated: true },
-] as Elements
+]
 
 const buttonStyle: CSSProperties = { position: 'absolute', right: 10, top: 30, zIndex: 4 }
 
diff --git a/examples/NodeTypesIdChange/NodeA.vue b/examples/NodeTypesIdChange/NodeA.vue
index c593294f..f4720473 100644
--- a/examples/NodeTypesIdChange/NodeA.vue
+++ b/examples/NodeTypesIdChange/NodeA.vue
@@ -1,5 +1,10 @@
 <script lang="ts" setup>
-const props = defineProps<{ nodeStyles: Record<string, any> }>()
+import { NodeProps } from '~/index'
+
+interface NodeAProps extends NodeProps {
+  nodeStyles: Record<string, any>
+}
+const props = defineProps<NodeAProps>()
 </script>
 <template>
   <div :style="props.nodeStyles">A</div>
diff --git a/examples/NodeTypesIdChange/NodeB.vue b/examples/NodeTypesIdChange/NodeB.vue
index 0b39877e..f624fac1 100644
--- a/examples/NodeTypesIdChange/NodeB.vue
+++ b/examples/NodeTypesIdChange/NodeB.vue
@@ -1,5 +1,10 @@
 <script lang="ts" setup>
-const props = defineProps<{ nodeStyles: Record<string, any> }>()
+import { NodeProps } from '~/index'
+
+interface NodeBPro extends NodeProps {
+  nodeStyles: Record<string, any>
+}
+const props = defineProps<NodeBPro>()
 </script>
 <template>
   <div :style="props.nodeStyles">B</div>
diff --git a/examples/Overview/Overview.vue b/examples/Overview/Overview.vue
index 53836962..b0c47265 100644
--- a/examples/Overview/Overview.vue
+++ b/examples/Overview/Overview.vue
@@ -112,7 +112,7 @@ const initialElements: Elements = [
     animated: true,
     labelStyle: { fill: '#f6ab6c', fontWeight: 700 },
   },
-] as Elements
+]
 
 const connectionLineStyle: CSSProperties = { stroke: '#ddd' }
 const snapGrid: SnapGrid = [16, 16]
diff --git a/examples/Provider/ProviderExample.vue b/examples/Provider/ProviderExample.vue
index ef1a5113..2c506886 100644
--- a/examples/Provider/ProviderExample.vue
+++ b/examples/Provider/ProviderExample.vue
@@ -25,7 +25,7 @@ const initialElements: Elements = [
   { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 } },
   { id: 'e1-2', source: '1', target: '2', animated: true },
   { id: 'e1-3', source: '1', target: '3' },
-] as Elements
+]
 
 useStore()
 const elements = ref<Elements>(initialElements)
diff --git a/examples/SaveRestore/SaveRestoreExample.vue b/examples/SaveRestore/SaveRestoreExample.vue
index 71c6ceb5..bf52d9ff 100644
--- a/examples/SaveRestore/SaveRestoreExample.vue
+++ b/examples/SaveRestore/SaveRestoreExample.vue
@@ -8,7 +8,7 @@ const initialElements: Elements = [
   { id: '1', data: { label: 'Node 1' }, position: { x: 100, y: 100 } },
   { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 200 } },
   { id: 'e1-2', source: '1', target: '2' },
-] as Elements
+]
 
 const elements = ref(initialElements)
 const flowInstance = ref()
diff --git a/examples/Stress/utils.ts b/examples/Stress/utils.ts
index 8429f4ef..29965620 100644
--- a/examples/Stress/utils.ts
+++ b/examples/Stress/utils.ts
@@ -26,5 +26,5 @@ export function getElements(xElements = 10, yElements = 10): Elements {
     }
   }
 
-  return initialElements as Elements
+  return initialElements
 }
diff --git a/examples/Switch/SwitchExample.vue b/examples/Switch/SwitchExample.vue
index b0c42d00..82f50da1 100644
--- a/examples/Switch/SwitchExample.vue
+++ b/examples/Switch/SwitchExample.vue
@@ -11,7 +11,7 @@ const elementsA: Elements = [
   { id: '4a', data: { label: 'Node 4' }, position: { x: 400, y: 200 }, className: 'light' },
   { id: 'e1-2', source: '1a', target: '2a' },
   { id: 'e1-3', source: '1a', target: '3a' },
-] as Elements
+]
 
 const elementsB: Elements = [
   { id: 'inputb', type: 'input', data: { label: 'Input' }, position: { x: 300, y: 5 }, className: 'light' },
@@ -24,7 +24,7 @@ const elementsB: Elements = [
   { id: 'e2b', source: 'inputb', target: '2b' },
   { id: 'e3b', source: 'inputb', target: '3b' },
   { id: 'e4b', source: 'inputb', target: '4b' },
-] as Elements
+]
 
 const elements = ref(elementsA)
 
diff --git a/examples/Unidirectional/UnidirectionalExample.vue b/examples/Unidirectional/UnidirectionalExample.vue
index 97416447..129ee1e4 100644
--- a/examples/Unidirectional/UnidirectionalExample.vue
+++ b/examples/Unidirectional/UnidirectionalExample.vue
@@ -169,10 +169,10 @@ const initialElements: Elements = [
     type: 'smoothstep',
     arrowHeadType: ArrowHeadType.Arrow,
   },
-] as Elements
+]
 
 const nodeTypes: Record<string, NodeType> = {
-  custom: CustomNode,
+  custom: CustomNode as NodeType,
 }
 
 let id = 4
diff --git a/examples/UpdatableEdge/UpdatableEdgeExample.vue b/examples/UpdatableEdge/UpdatableEdgeExample.vue
index e214393c..d75f429a 100644
--- a/examples/UpdatableEdge/UpdatableEdgeExample.vue
+++ b/examples/UpdatableEdge/UpdatableEdgeExample.vue
@@ -37,7 +37,7 @@ const initialElements: Elements = [
     style: { background: '#D6D5E6', color: '#333', border: '1px solid #222138', width: 180 },
   },
   { id: 'e1-2', source: '1', target: '2', label: 'Updateable edge' },
-] as Elements
+]
 
 const elements = ref(initialElements)
 const onLoad = (flowInstance: FlowInstance) => flowInstance.fitView()
diff --git a/examples/UpdateNode/UpdateNodeExample.vue b/examples/UpdateNode/UpdateNodeExample.vue
index bbbaa866..e4b980cb 100644
--- a/examples/UpdateNode/UpdateNodeExample.vue
+++ b/examples/UpdateNode/UpdateNodeExample.vue
@@ -7,7 +7,7 @@ const initialElements: Elements = [
   { id: '1', data: { label: '-' }, position: { x: 100, y: 100 } },
   { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 200 } },
   { id: 'e1-2', source: '1', target: '2' },
-] as Elements
+]
 
 const elements = ref<Elements>(initialElements)
 const nodeName = ref<string>('Node 1')
diff --git a/examples/UpdateNodeInternals/UpdateNodeInternalsExample.vue b/examples/UpdateNodeInternals/UpdateNodeInternalsExample.vue
index 82bbd633..aa267fdd 100644
--- a/examples/UpdateNodeInternals/UpdateNodeInternalsExample.vue
+++ b/examples/UpdateNodeInternals/UpdateNodeInternalsExample.vue
@@ -24,7 +24,7 @@ const initialElements: Elements = [
     data: { label: 'Node 1', handleCount: initialHandleCount, handlePosition: 0 },
     position: { x: 250, y: 5 },
   },
-] as Elements
+]
 
 const buttonWrapperStyles: CSSProperties = { position: 'absolute', right: 10, top: 10, zIndex: 10 }
 
@@ -68,13 +68,15 @@ const onLoad = (instance: FlowInstance) => {
   instance.fitView()
   flowInstance.value = instance
 }
+
+const updateNodeInternals = () => flowInstance.value?.updateNodeInternals('1')
 </script>
 <template>
   <Flow :elements="elements" :node-types="nodeTypes" @connect="onConnect" @pane-click="onPaneClick" @load="onLoad">
     <div :style="buttonWrapperStyles">
       <button @click="toggleHandleCount">toggle handle count</button>
       <button @click="toggleHandlePosition">toggle handle position</button>
-      <button @click="() => flowInstance.updateNodeInternals('1')">update node internals</button>
+      <button @click="updateNodeInternals">update node internals</button>
     </div>
   </Flow>
 </template>
diff --git a/examples/Validation/ValidationExample.vue b/examples/Validation/ValidationExample.vue
index 688c6e16..55507bf9 100644
--- a/examples/Validation/ValidationExample.vue
+++ b/examples/Validation/ValidationExample.vue
@@ -21,7 +21,7 @@ const initialElements: Elements = [
   { id: 'A', type: 'customnode', position: { x: 250, y: 0 } },
   { id: 'B', type: 'customnode', position: { x: 250, y: 150 } },
   { id: 'C', type: 'customnode', position: { x: 250, y: 300 } },
-] as Elements
+]
 
 const onLoad = (reactFlowInstance: FlowInstance) => reactFlowInstance.fitView()
 const onConnectStart = ({ nodeId, handleType }: OnConnectStartParams) => console.log('on connect start', { nodeId, handleType })
diff --git a/examples/ZoomPanHelper/ZoomPanHelperExample.vue b/examples/ZoomPanHelper/ZoomPanHelperExample.vue
index 65cc6b11..5789ec2a 100644
--- a/examples/ZoomPanHelper/ZoomPanHelperExample.vue
+++ b/examples/ZoomPanHelper/ZoomPanHelperExample.vue
@@ -19,7 +19,7 @@ const initialElements: Elements = [
   { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 }, className: 'light' },
   { id: 'e1-2', source: '1', target: '2', animated: true },
   { id: 'e1-3', source: '1', target: '3' },
-] as Elements
+]
 
 let id = 5
 const getId = (): ElementId => `${id++}`
diff --git a/package.json b/package.json
index db7bb5dc..a44b6ad1 100644
--- a/package.json
+++ b/package.json
@@ -25,8 +25,8 @@
     "dist"
   ],
   "scripts": {
-    "dev": "vite",
-    "build": "vite build",
+    "dev": "vue-tsc --noEmit && vite",
+    "build": "vue-tsc --noEmit && vite build",
     "build:dist": "rollup -c --environment NODE_ENV:production",
     "serve": "vite preview",
     "prepublishOnly": "yarn build:dist",
diff --git a/src/additional-components/Background/Background.vue b/src/additional-components/Background/Background.vue
index 41d3c341..024e519e 100644
--- a/src/additional-components/Background/Background.vue
+++ b/src/additional-components/Background/Background.vue
@@ -40,15 +40,15 @@ const background = computed(() => {
 // when there are multiple flows on a page we need to make sure that every background gets its own pattern.
 const patternId = `pattern-${Math.floor(Math.random() * 100000)}`
 const bgColor = computed(() => (props.color ? props.color : defaultColors[props.variant || BackgroundVariant.Dots]))
+const d = computed(
+  () =>
+    `M${background.value.scaledGap / 2} 0 V${background.value.scaledGap} M0 ${background.value.scaledGap / 2} H${
+      background.value.scaledGap
+    }`,
+)
 </script>
 <template>
-  <svg
-    class="vue-flow__background"
-    :style="{
-      width: '100%',
-      height: '100%',
-    }"
-  >
+  <svg class="vue-flow__background" style="width: 100%; height: 100%">
     <pattern
       :id="patternId"
       :x="background.xOffset"
@@ -58,11 +58,7 @@ const bgColor = computed(() => (props.color ? props.color : defaultColors[props.
       patternUnits="userSpaceOnUse"
     >
       <template v-if="props.variant === BackgroundVariant.Lines">
-        <path
-          :stroke="bgColor"
-          :stroke-width="props.size"
-          :d="`M${background.scaledGap / 2} 0 V${background.scaledGap} M0 ${background.scaledGap / 2} H${background.scaledGap}`"
-        />
+        <path :stroke="bgColor" :stroke-width="props.size" :d="d" />
       </template>
       <template v-else>
         <circle :cx="background.size" :cy="background.size" :r="background.size" :fill="bgColor" />
diff --git a/src/additional-components/MiniMap/MiniMap.vue b/src/additional-components/MiniMap/MiniMap.vue
index 9e06055d..4aea27e0 100644
--- a/src/additional-components/MiniMap/MiniMap.vue
+++ b/src/additional-components/MiniMap/MiniMap.vue
@@ -6,6 +6,7 @@ import { Node } from '~/types'
 import { useStore } from '~/composables'
 
 type StringFunc = (node: Node) => string
+type ShapeRendering = 'inherit' | 'auto' | 'geometricPrecision' | 'optimizeSpeed' | 'crispEdges' | undefined
 
 export interface MiniMapProps extends HTMLAttributes {
   nodeColor?: string | StringFunc
@@ -34,13 +35,13 @@ const store = useStore()
 
 const elementWidth = attrs.style?.width ?? defaultWidth
 const elementHeight = attrs.style?.height ?? defaultHeight
-const nodeColorFunc = props.nodeColor instanceof Function ? props.nodeColor : () => props.nodeColor as StringFunc
-const nodeStrokeColorFunc =
-  props.nodeStrokeColor instanceof Function ? props.nodeStrokeColor : () => props.nodeStrokeColor as StringFunc
+const nodeColorFunc: StringFunc = props.nodeColor instanceof Function ? props.nodeColor : () => props.nodeColor as string
+const nodeStrokeColorFunc: StringFunc =
+  props.nodeStrokeColor instanceof Function ? props.nodeStrokeColor : () => props.nodeStrokeColor as string
 
 const nodeClassNameFunc = props.nodeClassName instanceof Function ? props.nodeClassName : () => props.nodeClassName as StringFunc
 
-const shapeRendering = typeof window === 'undefined' || !!window.chrome ? 'crispEdges' : 'geometricPrecision'
+const shapeRendering: ShapeRendering = typeof window === 'undefined' || !!window.chrome ? 'crispEdges' : 'geometricPrecision'
 
 const viewBox = computed(() => {
   const bb = getRectOfNodes(store.nodes)
diff --git a/src/additional-components/MiniMap/MiniMapNode.vue b/src/additional-components/MiniMap/MiniMapNode.vue
index 954a1f65..62615fd1 100644
--- a/src/additional-components/MiniMap/MiniMapNode.vue
+++ b/src/additional-components/MiniMap/MiniMapNode.vue
@@ -18,7 +18,7 @@ const props = withDefaults(defineProps<MiniMapNodeProps>(), {
 const attrs = useAttrs()
 
 const styles = (attrs.style ?? {}) as CSSProperties
-const fill = computed(() => props.color || styles.background || styles.backgroundColor)
+const fill = computed(() => props.color || (styles.background as string) || styles.backgroundColor)
 </script>
 <template>
   <rect
diff --git a/src/components/ConnectionLine/ConnectionLine.vue b/src/components/ConnectionLine/ConnectionLine.vue
index f7ffc5da..cedee598 100644
--- a/src/components/ConnectionLine/ConnectionLine.vue
+++ b/src/components/ConnectionLine/ConnectionLine.vue
@@ -19,12 +19,14 @@ const store = useStore()
 
 const sourceHandle =
   store.connectionHandleId && store.connectionHandleType
-    ? props.sourceNode.__rf.handleBounds[store.connectionHandleType].find((d: HandleElement) => d.id === store.connectionHandleId)
-    : store.connectionHandleType && props.sourceNode.__rf.handleBounds[store.connectionHandleType][0]
-const sourceHandleX = sourceHandle ? sourceHandle.x + sourceHandle.width / 2 : (props.sourceNode.__rf.width as number) / 2
-const sourceHandleY = sourceHandle ? sourceHandle.y + sourceHandle.height / 2 : props.sourceNode.__rf.height
-const sourceX = props.sourceNode.__rf.position.x + sourceHandleX
-const sourceY = props.sourceNode.__rf.position.y + sourceHandleY
+    ? props.sourceNode.__rf?.handleBounds[store.connectionHandleType].find(
+        (d: HandleElement) => d.id === store.connectionHandleId,
+      )
+    : store.connectionHandleType && props.sourceNode.__rf?.handleBounds[store.connectionHandleType][0]
+const sourceHandleX = sourceHandle ? sourceHandle.x + sourceHandle.width / 2 : (props.sourceNode.__rf?.width as number) / 2
+const sourceHandleY = sourceHandle ? sourceHandle.y + sourceHandle.height / 2 : props.sourceNode.__rf?.height
+const sourceX = props.sourceNode.__rf?.position?.x + sourceHandleX
+const sourceY = props.sourceNode.__rf?.position?.y + sourceHandleY
 
 const isRightOrLeft = sourceHandle.position === Position.Left || sourceHandle.position === Position.Right
 const targetPosition = isRightOrLeft ? Position.Left : Position.Top
diff --git a/src/components/Edges/BezierEdge.vue b/src/components/Edges/BezierEdge.vue
index e2e9d5f9..117eff39 100644
--- a/src/components/Edges/BezierEdge.vue
+++ b/src/components/Edges/BezierEdge.vue
@@ -19,7 +19,7 @@ interface BezierEdgeProps<T = any> {
   label?:
     | string
     | {
-        component: VNode
+        component: any
         props?: any
       }
   labelStyle?: any
diff --git a/src/components/Edges/Edge.vue b/src/components/Edges/Edge.vue
index 088f1d71..d293393a 100644
--- a/src/components/Edges/Edge.vue
+++ b/src/components/Edges/Edge.vue
@@ -93,12 +93,12 @@ const nodes = computed(() => {
 // when connection type is loose we can define all handles as sources
 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.target ?? nodes.value.targetNode?.__rf?.handleBounds.source,
 )
 
 const sourceHandle = computed(
-  () => nodes.value.sourceNode && getHandle(nodes.value.sourceNode.__rf.handleBounds.source, props.edge.sourceHandle || null),
+  () => nodes.value.sourceNode && getHandle(nodes.value.sourceNode.__rf?.handleBounds.source, props.edge.sourceHandle || null),
 )
 const targetHandle = computed(() => getHandle(targetNodeHandles.value, props.edge.targetHandle || null))
 const sourcePosition = computed(() => (sourceHandle.value ? sourceHandle.value.position : Position.Bottom))
@@ -126,7 +126,7 @@ const edgePos = computed(() =>
         selected: isSelected,
         animated: props.edge.animated,
         inactive: !store.elementsSelectable,
-        updating: updating.value,
+        updating,
       },
     ]"
     @click="onEdgeClick"
diff --git a/src/components/Edges/EdgeAnchor.vue b/src/components/Edges/EdgeAnchor.vue
index 15ce6878..38850c91 100644
--- a/src/components/Edges/EdgeAnchor.vue
+++ b/src/components/Edges/EdgeAnchor.vue
@@ -24,14 +24,10 @@ interface EdgeAnchorProps extends HTMLAttributes {
 const props = withDefaults(defineProps<EdgeAnchorProps>(), {
   radius: 10,
 })
+
+const cx = computed(() => shiftX(props.centerX, props.radius, props.position))
+const cy = computed(() => shiftY(props.centerY, props.radius, props.position))
 </script>
 <template>
-  <circle
-    class="vue-flow__edgeupdater"
-    :cx="shiftX(props.centerX, props.radius, props.position)"
-    :cy="shiftY(props.centerY, props.radius, props.position)"
-    :r="props.radius"
-    stroke="transparent"
-    fill="transparent"
-  />
+  <circle class="vue-flow__edgeupdater" :cx="cx" :cy="cy" :r="props.radius" stroke="transparent" fill="transparent" />
 </template>
diff --git a/src/components/Edges/EdgeText.vue b/src/components/Edges/EdgeText.vue
index 6a6b254b..a73454e7 100644
--- a/src/components/Edges/EdgeText.vue
+++ b/src/components/Edges/EdgeText.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { HTMLAttributes, VNode } from 'vue'
+import { CSSProperties, HTMLAttributes } from 'vue'
 
 interface EdgeTextProps extends HTMLAttributes {
   x: number
@@ -7,10 +7,11 @@ interface EdgeTextProps extends HTMLAttributes {
   label?:
     | string
     | {
-        component: VNode
+        component: any
         props?: any
       }
-  labelStyle?: any
+    | any
+  labelStyle?: CSSProperties
   labelShowBg?: boolean
   labelBgStyle?: any
   labelBgPadding?: [number, number]
@@ -26,17 +27,18 @@ const props = withDefaults(defineProps<EdgeTextProps>(), {
 })
 
 const edgeRef = templateRef<SVGTextElement>('edge-text', null)
-// @ts-ignore
-const { width = 0, height = 0, x = 0, y = 0 } = useElementBounding(edgeRef)
+const { width, height, x, y } = useElementBounding(edgeRef)
+const transform = computed(() => `translate(${props.x - width.value / 2} ${props.y - height.value / 2})`)
+const bgPadding = computed(() => [props.labelBgPadding[0], props.labelBgPadding[1]])
 </script>
 <template>
-  <g :transform="`translate(${props.x - width / 2} ${props.y - height / 2})`" class="vue-flow__edge-textwrapper">
+  <g :transform="transform" class="vue-flow__edge-textwrapper">
     <rect
       v-if="props.labelShowBg"
-      :width="width + 2 * props.labelBgPadding[0] + 'px'"
-      :height="height + 2 * props.labelBgPadding[1] + 'px'"
-      :x="-props.labelBgPadding[0]"
-      :y="-props.labelBgPadding[1]"
+      :width="width + 2 * bgPadding[0] + 'px'"
+      :height="height + 2 * bgPadding[1] + 'px'"
+      :x="-bgPadding[0]"
+      :y="-bgPadding[1]"
       class="vue-flow__edge-textbg"
       :style="props.labelBgStyle"
       :rx="props.labelBgBorderRadius"
@@ -46,7 +48,7 @@ const { width = 0, height = 0, x = 0, y = 0 } = useElementBounding(edgeRef)
       <component
         :is="props.label.component"
         v-if="typeof props.label.component !== 'undefined'"
-        v-bind="{ ...props, ...props.label.props, width, height, x, y }"
+        v-bind="{ ...props, ...props.label?.props, width, height, x, y }"
       />
       <template v-else v-html="props.label">
         {{ props.label }}
diff --git a/src/components/Edges/SmoothStepEdge.vue b/src/components/Edges/SmoothStepEdge.vue
index b93acb44..ea142eb5 100644
--- a/src/components/Edges/SmoothStepEdge.vue
+++ b/src/components/Edges/SmoothStepEdge.vue
@@ -19,7 +19,7 @@ export interface EdgeSmoothStepProps<T = any> {
   label?:
     | string
     | {
-        component: VNode
+        component: any
         props?: any
       }
   labelStyle?: any
diff --git a/src/components/Edges/StepEdge.vue b/src/components/Edges/StepEdge.vue
index a75389d4..d54f723d 100644
--- a/src/components/Edges/StepEdge.vue
+++ b/src/components/Edges/StepEdge.vue
@@ -18,7 +18,7 @@ export interface EdgeStepProps<T = any> {
   label?:
     | string
     | {
-        component: VNode
+        component: any
         props?: any
       }
   labelStyle?: any
diff --git a/src/components/Edges/StraightEdge.vue b/src/components/Edges/StraightEdge.vue
index f3353281..0945c6f1 100644
--- a/src/components/Edges/StraightEdge.vue
+++ b/src/components/Edges/StraightEdge.vue
@@ -19,7 +19,7 @@ interface StraightEdgeProps<T = any> {
   label?:
     | string
     | {
-        component: VNode
+        component: any
         props?: any
       }
   labelStyle?: any
diff --git a/src/components/Nodes/Node.vue b/src/components/Nodes/Node.vue
index 4096b485..8f8cd33f 100644
--- a/src/components/Nodes/Node.vue
+++ b/src/components/Nodes/Node.vue
@@ -28,13 +28,13 @@ const draggable = computed(() => props.node.draggable ?? store.nodesDraggable)
 const connectable = computed(() => props.node.connectable ?? store.nodesConnectable)
 
 const onMouseEnterHandler = () =>
-  props.node.__rf.isDragging && ((event: MouseEvent) => hooks.nodeMouseEnter.trigger({ event, node: props.node }))
+  props.node.__rf?.isDragging && ((event: MouseEvent) => hooks.nodeMouseEnter.trigger({ event, node: props.node }))
 
 const onMouseMoveHandler = () =>
-  props.node.__rf.isDragging && ((event: MouseEvent) => hooks.nodeMouseMove.trigger({ event, node: props.node }))
+  props.node.__rf?.isDragging && ((event: MouseEvent) => hooks.nodeMouseMove.trigger({ event, node: props.node }))
 
 const onMouseLeaveHandler = () =>
-  props.node.__rf.isDragging && ((event: MouseEvent) => hooks.nodeMouseLeave.trigger({ event, node: props.node }))
+  props.node.__rf?.isDragging && ((event: MouseEvent) => hooks.nodeMouseLeave.trigger({ event, node: props.node }))
 
 const onContextMenuHandler = () => (event: MouseEvent) => hooks.nodeContextMenu.trigger({ event, node: props.node })
 
@@ -84,7 +84,7 @@ const onDragStop: DraggableEventListener = ({ event }) => {
   const n = props.node
   // onDragStop also gets called when user just clicks on a node.
   // Because of that we set dragging to true inside the onDrag handler and handle the click here
-  if (!props.node.__rf.isDragging) {
+  if (!props.node.__rf?.isDragging) {
     if (selectable && !props.selectNodesOnDrag && !props.selected) {
       store.addSelectedElements([n])
     }
@@ -165,9 +165,9 @@ watch(
       ]"
       :style="{
         zIndex: props.selected ? 10 : 3,
-        transform: `translate(${props.node.__rf.position.x}px,${props.node.__rf.position.y}px)`,
+        transform: `translate(${props.node.__rf?.position?.x}px,${props.node.__rf?.position?.y}px)`,
         pointerEvents: selectable || draggable ? 'all' : 'none',
-        opacity: props.node.__rf.width !== null && props.node.__rf.height !== null ? 1 : 0,
+        opacity: props.node.__rf?.width !== null && props.node.__rf?.height !== null ? 1 : 0,
         ...props.node.style,
       }"
       :data-id="props.node.id"
@@ -182,13 +182,13 @@ watch(
           id: props.node.id,
           data: props.node.data,
           type: props.node.type,
-          xPos: props.node.__rf.position.x,
-          yPos: props.node.__rf.position.y,
+          xPos: props.node.__rf?.position?.x,
+          yPos: props.node.__rf?.position?.y,
           selected: props.selected,
           connectable,
           sourcePosition: props.node.sourcePosition,
           targetPosition: props.node.targetPosition,
-          dragging: props.node.__rf.isDragging,
+          dragging: props.node.__rf?.isDragging,
         }"
       >
         <component
@@ -197,13 +197,13 @@ watch(
             id: props.node.id,
             data: props.node.data,
             type: props.node.type,
-            xPos: props.node.__rf.position.x,
-            yPos: props.node.__rf.position.y,
+            xPos: props.node.__rf?.position?.x,
+            yPos: props.node.__rf?.position?.y,
             selected: props.selected,
             connectable,
             sourcePosition: props.node.sourcePosition,
             targetPosition: props.node.targetPosition,
-            dragging: props.node.__rf.isDragging,
+            dragging: props.node.__rf?.isDragging,
           }"
         />
       </slot>
diff --git a/src/components/NodesSelection/NodesSelection.vue b/src/components/NodesSelection/NodesSelection.vue
index 3eb01dfc..bdecd523 100644
--- a/src/components/NodesSelection/NodesSelection.vue
+++ b/src/components/NodesSelection/NodesSelection.vue
@@ -13,7 +13,7 @@ const selectedNodes = store.selectedElements
 
       return {
         ...matchingNode,
-        position: matchingNode?.__rf.position,
+        position: matchingNode?.__rf?.position,
       } as Node
     })
   : []
diff --git a/src/composables/useUpdateNodeInternals.ts b/src/composables/useUpdateNodeInternals.ts
index 97b46095..432eaedf 100644
--- a/src/composables/useUpdateNodeInternals.ts
+++ b/src/composables/useUpdateNodeInternals.ts
@@ -1,6 +1,7 @@
-import { ElementId, FlowStore, UpdateNodeInternals } from '~/types'
+import { ElementId, UpdateNodeInternals } from '~/types'
+import useStore from '~/composables/useStore'
 
-export default (store: FlowStore): UpdateNodeInternals =>
+export default (store = useStore()): UpdateNodeInternals =>
   (id: ElementId) => {
     const nodeElement: HTMLDivElement | null = document.querySelector(`.vue-flow__node[data-id="${id}"]`)
 
diff --git a/src/container/EdgeRenderer/EdgeRenderer.vue b/src/container/EdgeRenderer/EdgeRenderer.vue
index 986d0d7d..2fe1fd3f 100644
--- a/src/container/EdgeRenderer/EdgeRenderer.vue
+++ b/src/container/EdgeRenderer/EdgeRenderer.vue
@@ -48,7 +48,7 @@ const edges = computed(() => store.edges.filter((edge) => !edge.isHidden))
         </Edge>
       </template>
       <ConnectionLine
-        v-if="connectionLineVisible"
+        v-if="connectionLineVisible && sourceNode"
         :source-node="sourceNode"
         :connection-line-style="props.connectionLineStyle"
         :connection-line-type="props.connectionLineType"
diff --git a/src/container/EdgeRenderer/utils.ts b/src/container/EdgeRenderer/utils.ts
index 974dd4f6..e646e542 100644
--- a/src/container/EdgeRenderer/utils.ts
+++ b/src/container/EdgeRenderer/utils.ts
@@ -26,10 +26,10 @@ export function createEdgeTypes(edgeTypes: Record<string, EdgeType>): Record<str
 }
 
 export function getHandlePosition(position: Position, node: Node, handle: any | null = null): XYPosition {
-  const x = (handle?.x || 0) + node.__rf.position.x
-  const y = (handle?.y || 0) + node.__rf.position.y
-  const width = handle?.width || node.__rf.width
-  const height = handle?.height || node.__rf.height
+  const x = (handle?.x || 0) + node.__rf?.position?.x
+  const y = (handle?.y || 0) + node.__rf?.position?.y
+  const width = handle?.width || node.__rf?.width
+  const height = handle?.height || node.__rf?.height
 
   switch (position) {
     case Position.Top:
diff --git a/src/index.ts b/src/index.ts
index 8fa5a793..3f2bc34d 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -15,8 +15,10 @@ export {
   getTransformForBounds,
   getRectOfNodes,
   isInputDOMNode,
+  graphPosToZoomedPos,
 } from './utils/graph'
 export { default as useZoomPanHelper } from './composables/useZoomPanHelper'
+export { default as useUpdateNodeInternals } from './composables/useUpdateNodeInternals'
 export { default as useStore } from './composables/useStore'
 export { default as useHooks } from './composables/useHooks'
 export { default as useHandle } from './composables/useHandle'
diff --git a/src/store/useFlowStore.ts b/src/store/useFlowStore.ts
index 5ab7f774..0bcbcc1d 100644
--- a/src/store/useFlowStore.ts
+++ b/src/store/useFlowStore.ts
@@ -35,6 +35,7 @@ export default function useFlowStore(preloadedState: FlowState): StoreDefinition
                 ...storeNode,
                 ...propElement,
               }
+              if (!updatedNode.__rf) updatedNode.__rf = {}
 
               if (storeNode.position.x !== propElement.position.x || storeNode.position.y !== propElement.position.y) {
                 updatedNode.__rf.position = propElement.position
@@ -43,7 +44,7 @@ export default function useFlowStore(preloadedState: FlowState): StoreDefinition
               if (typeof propElement.type !== 'undefined' && propElement.type !== storeNode.type) {
                 // we reset the elements dimensions here in order to force a re-calculation of the bounds.
                 // When the type of a node changes it is possible that the number or positions of handles changes too.
-                updatedNode.__rf.width = null
+                updatedNode.__rf.width = undefined
               }
 
               res.nextNodes.push(updatedNode)
@@ -73,6 +74,8 @@ export default function useFlowStore(preloadedState: FlowState): StoreDefinition
         const i = this.nodes.map((x) => x.id).indexOf(id)
         const node = this.nodes[i]
         const dimensions = getDimensions(nodeElement)
+
+        if (!node.__rf) node.__rf = {}
         const doUpdate =
           dimensions.width &&
           dimensions.height &&
@@ -123,8 +126,8 @@ export default function useFlowStore(preloadedState: FlowState): StoreDefinition
 
           if (diff) {
             updatedNode.__rf.position = {
-              x: node.__rf.position.x + diff.x,
-              y: node.__rf.position.y + diff.y,
+              x: (node.__rf?.position?.x as number) + diff.x,
+              y: (node.__rf?.position?.y as number) + diff.y,
             }
           }
 
@@ -135,7 +138,7 @@ export default function useFlowStore(preloadedState: FlowState): StoreDefinition
         }
 
         if (!id) {
-          const selectedNodes = this.nodes.filter((x) => this.selectedElements?.find((sNode) => sNode.id === x.id))
+          const selectedNodes = this.nodes.filter((x) => this.selectedElements?.find((sNode) => sNode?.id === x.id))
           selectedNodes.forEach((node) => {
             const i = this.nodes.map((x) => x.id).indexOf((node as Node).id)
             update(node as Node, i)
@@ -178,7 +181,7 @@ export default function useFlowStore(preloadedState: FlowState): StoreDefinition
         this.selectedElements = nextSelectedElements
       },
       unsetUserSelection() {
-        const selectedNodes = this.selectedElements?.filter((node) => isNode(node) && node.__rf) as Node[]
+        const selectedNodes = this.selectedElements?.filter((node) => node && isNode(node) && node.__rf) as Node[]
 
         this.selectionActive = false
         this.userSelectionRect.draw = false
@@ -220,7 +223,7 @@ export default function useFlowStore(preloadedState: FlowState): StoreDefinition
             ...node,
             __rf: {
               ...node.__rf,
-              position: clampPosition(node.__rf.position, nodeExtent),
+              position: node.__rf?.position && clampPosition(node.__rf.position, nodeExtent),
             },
           }
         })
diff --git a/src/types/edge.ts b/src/types/edge.ts
index c8dc99a2..377756fb 100644
--- a/src/types/edge.ts
+++ b/src/types/edge.ts
@@ -9,7 +9,12 @@ export interface Edge<T = any> {
   target: ElementId
   sourceHandle?: ElementId | null
   targetHandle?: ElementId | null
-  label?: string | VNode
+  label?:
+    | string
+    | {
+        component: any
+        props?: any
+      }
   labelStyle?: any
   labelShowBg?: boolean
   labelBgStyle?: any
@@ -20,7 +25,7 @@ export interface Edge<T = any> {
   arrowHeadType?: ArrowHeadType
   isHidden?: boolean
   data?: T
-  className?: string
+  class?: string
 }
 
 export interface EdgeProps<T = any> {
@@ -35,7 +40,12 @@ export interface EdgeProps<T = any> {
   animated?: boolean
   sourcePosition: Position
   targetPosition: Position
-  label?: string | VNode
+  label?:
+    | string
+    | {
+        component: any
+        props?: any
+      }
   labelStyle?: any
   labelShowBg?: boolean
   labelBgStyle?: any
diff --git a/src/types/node.ts b/src/types/node.ts
index f023a647..c5729cef 100644
--- a/src/types/node.ts
+++ b/src/types/node.ts
@@ -6,13 +6,15 @@ export interface Node<T = any> {
   id: ElementId
   position: XYPosition
   type?: string
-  __rf: {
-    position: XYPosition
-    isDragging?: boolean
-    width: number | null
-    height: number | null
-    handleBounds?: any
-  }
+  __rf?:
+    | {
+        position?: XYPosition
+        isDragging?: boolean
+        width?: number
+        height?: number
+        handleBounds?: any
+      }
+    | any
   data?: T
   style?: any
   className?: string
@@ -45,8 +47,8 @@ export type NodeDimensionUpdate = {
 }
 
 export interface NodeProps<T = any> {
-  id: ElementId
-  type: string
+  id?: ElementId
+  type?: string
   data?: T
   selected?: boolean
   connectable?: boolean
@@ -57,4 +59,4 @@ export interface NodeProps<T = any> {
   dragging?: boolean
 }
 
-export type NodeType = DefineComponent<NodeProps>
+export type NodeType = DefineComponent<NodeProps, any, any, any, any>
diff --git a/src/types/types.ts b/src/types/types.ts
index b4e5bab6..9976363c 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -8,7 +8,7 @@ export type ElementId = string
 
 export type FlowElement<T = any> = Node<T> | Edge<T>
 
-export type Elements<T = any> = Array<FlowElement<T>>
+export type Elements<T = any> = FlowElement<T>[]
 
 export type Transform = [number, number, number]
 
diff --git a/src/utils/graph.ts b/src/utils/graph.ts
index 73e64903..f5136614 100644
--- a/src/utils/graph.ts
+++ b/src/utils/graph.ts
@@ -169,8 +169,8 @@ export const parseNode = (node: Node, nodeExtent: NodeExtent): Node => ({
   type: node.type || 'default',
   __rf: {
     position: clampPosition(node.position, nodeExtent),
-    width: null,
-    height: null,
+    width: undefined,
+    height: undefined,
     handleBounds: {},
     isDragging: false,
   },
@@ -240,7 +240,9 @@ export const getNodesInside = (nodes: Node[], rect: Rect, [tx, ty, tScale]: Tran
     height: rect.height / tScale,
   })
 
-  return nodes.filter(({ __rf: { position, width, height, isDragging } }) => {
+  return nodes.filter((node) => {
+    if (!node.__rf) return false
+    const { position = { x: 0, y: 0 }, width = 0, height = 0, isDragging = false } = node.__rf
     const nBox = rectToBox({ ...position, width, height } as any)
     const xOverlap = Math.max(0, Math.min(rBox.x2, nBox.x2) - Math.max(rBox.x, nBox.x))
     const yOverlap = Math.max(0, Math.min(rBox.y2, nBox.y2) - Math.max(rBox.y, nBox.y))
@@ -271,7 +273,7 @@ const parseElements = (nodes: Node[], edges: Edge[]): Elements => [
   ...nodes.map((node) => {
     const n = { ...node }
 
-    n.position = n.__rf.position
+    if (n.__rf?.position) n.position = n.__rf?.position
 
     return n
   }),
diff --git a/tsconfig.json b/tsconfig.json
index 27c103d3..73f6dfac 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -13,7 +13,7 @@
     "skipLibCheck": true,
     "moduleResolution": "node",
     "resolveJsonModule": true,
-    "noUnusedLocals": true,
+    "noUnusedLocals": false,
     "strictNullChecks": true,
     "forceConsistentCasingInFileNames": true,
     "types": [