From 0eb162f6224c8894bef33d71555e40b671bea72c Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sun, 12 Dec 2021 01:00:18 +0100
Subject: [PATCH] fix(types): marker types & flowstate id removed from state

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 src/container/EdgeRenderer/EdgeRenderer.vue | 14 +++++++-------
 src/types/edge.ts                           |  4 ++--
 src/types/store.ts                          |  3 +--
 3 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/src/container/EdgeRenderer/EdgeRenderer.vue b/src/container/EdgeRenderer/EdgeRenderer.vue
index 43f7ef0e..448f83d8 100644
--- a/src/container/EdgeRenderer/EdgeRenderer.vue
+++ b/src/container/EdgeRenderer/EdgeRenderer.vue
@@ -33,7 +33,7 @@ const connectionLineVisible = controlledComputed(
     ),
 )
 const transform = computed(() => `translate(${store.transform[0]},${store.transform[1]}) scale(${store.transform[2]})`)
-const edgeLevels = computed(() => groupEdgesByZLevel(store.getEdges, store.getNodes))
+const groups = computed(() => groupEdgesByZLevel(store.getEdges, store.getNodes))
 </script>
 <script lang="ts">
 export default {
@@ -42,17 +42,17 @@ export default {
 </script>
 <template>
   <svg
-    v-for="level of edgeLevels"
-    :key="level.z"
+    v-for="group of groups"
+    :key="group.level"
     :width="store.dimensions.width"
     :height="store.dimensions.height"
     class="vue-flow__edges vue-flow__container"
-    :style="`z-index: ${parseInt(level.level)}`"
+    :style="`z-index: ${group.level}`"
   >
-    <MarkerDefinitions v-if="level.isMaxLevel" :default-color="store.defaultMarkerColor" />
+    <MarkerDefinitions v-if="group.isMaxLevel" :default-color="store.defaultMarkerColor" />
     <g>
       <EdgeWrapper
-        v-for="edge of level.edges"
+        v-for="edge of group.edges"
         :key="edge.id"
         :edge="edge"
         :component="getType(edge.type)"
@@ -64,7 +64,7 @@ export default {
           <slot :name="`edge-${edge.type}`" v-bind="edgeProps"></slot>
         </template>
       </EdgeWrapper>
-      <ConnectionLine v-if="connectionLineVisible && sourceNode" :source-node="sourceNode">
+      <ConnectionLine v-if="group.isMaxLevel && connectionLineVisible && sourceNode" :source-node="sourceNode">
         <template #default="customConnectionLineProps">
           <slot name="custom-connection-line" v-bind="customConnectionLineProps"></slot>
         </template>
diff --git a/src/types/edge.ts b/src/types/edge.ts
index 99dd33be..3d7fdac1 100644
--- a/src/types/edge.ts
+++ b/src/types/edge.ts
@@ -83,8 +83,8 @@ export interface EdgeProps<Data = any> {
   labelBgBorderRadius?: number
   animated?: boolean
   updatable?: boolean
-  markerStart?: EdgeMarkerType
-  markerEnd?: any
+  markerStart?: string
+  markerEnd?: string
 }
 
 export interface SmoothStepEdgeProps<T = any> extends EdgeProps<T> {
diff --git a/src/types/store.ts b/src/types/store.ts
index 8f3821c6..106f6387 100644
--- a/src/types/store.ts
+++ b/src/types/store.ts
@@ -8,8 +8,7 @@ import { GraphNode, CoordinateExtent, Node } from './node'
 import { D3Selection, D3Zoom, D3ZoomHandler, KeyCode, PanOnScrollMode } from './zoom'
 import { FlowHooks } from './hooks'
 
-export interface FlowState<N = any, E = N> extends FlowOptions<N, E> {
-  id?: never
+export interface FlowState<N = any, E = N> extends Omit<FlowOptions<N, E>, 'id'> {
   hooks: FlowHooks
   instance?: FlowInstance