refactor(types): Remove internal __vf field

* fields are merged into the GraphNode / Node interface
* Remove passing props from VueFlow container, use injected state

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>

src/container/EdgeRenderer/EdgeRenderer.vue

@@ -1,75 +1,37 @@
 <script lang="ts" setup>
-import { CSSProperties } from 'vue'
-import {
-  ConnectionLineType,
-  ConnectionMode,
-  Dimensions,
-  EdgeComponent,
-  GraphEdge,
-  GraphNode,
-  HandleType,
-  Transform,
-  XYPosition,
-} from '../../types'
 import EdgeWrapper from '../../components/Edges/EdgeWrapper.vue'
 import ConnectionLine from '../../components/ConnectionLine/ConnectionLine.vue'
+import { useStore } from '../../composables'
 import MarkerDefinitions from './MarkerDefinitions.vue'
 
-interface EdgeRendererProps {
-  edges: GraphEdge[]
-  nodes: GraphNode[]
-  edgeTypes: Record<string, EdgeComponent>
-  transform: Transform
-  dimensions: Dimensions
-  connectionLineType?: ConnectionLineType
-  connectionLineStyle?: CSSProperties
-  arrowHeadColor?: string
-  markerEndId?: string
-  elementsSelectable?: boolean
-  edgeUpdaterRadius?: number
-  connectionNodeId?: string
-  connectionHandleType?: HandleType
-  connectionHandleId?: string
-  connectionPosition?: XYPosition
-  connectionMode: ConnectionMode
-  nodesConnectable?: boolean
-  edgesUpdatable?: boolean
-}
-
-const props = withDefaults(defineProps<EdgeRendererProps>(), {
-  arrowHeadColor: '#b1b1b7',
-  connectionLineType: ConnectionLineType.Bezier,
-  edgeUpdaterRadius: 10,
-  handleEdgeUpdate: false,
-})
-
+const store = useStore()
 const getType = (type?: string) => {
   const t = type ?? 'default'
-  let edgeType = props.edgeTypes[t]
+  let edgeType = store.getEdgeTypes[t]
   if (!edgeType) {
-    edgeType = props.edgeTypes.default
+    edgeType = store.getEdgeTypes.default
     console.warn(`Edge type "${type}" not found. Using fallback type "default".`)
   }
   return edgeType
 }
 
 const sourceNode = controlledComputed(
-  () => props.connectionNodeId,
+  () => store.connectionNodeId,
   () => {
-    if (props.connectionNodeId) return props.nodes[props.nodes.map((n) => n.id).indexOf(props.connectionNodeId)]
+    if (store.connectionNodeId) return store.getNodes[store.getNodes.map((n) => n.id).indexOf(store.connectionNodeId)]
   },
 )
 const connectionLineVisible = controlledComputed(
-  () => props.connectionNodeId,
+  () => store.connectionNodeId,
   () =>
     !!(
       sourceNode.value &&
-      (typeof sourceNode.value.connectable === 'undefined' ? props.nodesConnectable : sourceNode.value.connectable) &&
-      props.connectionNodeId &&
-      props.connectionHandleType
+      (typeof sourceNode.value.connectable === 'undefined' ? store.nodesConnectable : sourceNode.value.connectable) &&
+      store.connectionNodeId &&
+      store.connectionHandleType
     ),
 )
-const transform = computed(() => `translate(${props.transform[0]},${props.transform[1]}) scale(${props.transform[2]})`)
+const transform = computed(() => `translate(${store.transform[0]},${store.transform[1]}) scale(${store.transform[2]})`)
 </script>
 <script lang="ts">
 export default {
@@ -77,37 +39,25 @@ export default {
 }
 </script>
 <template>
-  <svg :width="props.dimensions.width" :height="props.dimensions.height" class="vue-flow__edges">
-    <MarkerDefinitions :color="props.arrowHeadColor" />
+  <svg :width="store.dimensions.width" :height="store.dimensions.height" class="vue-flow__edges">
+    <MarkerDefinitions :color="store.arrowHeadColor" />
     <g :transform="transform">
       <EdgeWrapper
-        v-for="(edge, i) of props.edges"
+        v-for="(edge, i) of store.getEdges"
         :key="`${edge.id}-${i}`"
         :edge="edge"
         :component="getType(edge.type)"
-        :selectable="props.elementsSelectable"
-        :updatable="typeof edge.updatable === 'undefined' ? props.edgesUpdatable : edge.updatable"
-        :edge-updater-radius="props.edgeUpdaterRadius"
-        :dimensions="props.dimensions"
-        :transform="props.transform"
+        :selectable="store.elementsSelectable"
+        :updatable="typeof edge.updatable === 'undefined' ? store.edgesUpdatable : edge.updatable"
+        :edge-updater-radius="store.edgeUpdaterRadius"
+        :dimensions="store.dimensions"
+        :transform="store.transform"
       >
         <template #default="edgeProps">
           <slot :name="`edge-${edge.type}`" v-bind="edgeProps"></slot>
         </template>
       </EdgeWrapper>
-      <ConnectionLine
-        v-if="connectionLineVisible && sourceNode"
-        :source-node="sourceNode"
-        :connection-line-style="props.connectionLineStyle"
-        :connection-line-type="props.connectionLineType"
-        :connection-handle-id="props.connectionHandleId"
-        :connection-node-id="props.connectionNodeId"
-        :connection-handle-type="props.connectionHandleType"
-        :connection-position="props.connectionPosition"
-        :connection-mode="props.connectionMode"
-        :nodes="props.nodes"
-        :transform="props.transform"
-      >
+      <ConnectionLine v-if="connectionLineVisible && sourceNode" :source-node="sourceNode">
         <template #default="customConnectionLineProps">
           <slot name="custom-connection-line" v-bind="customConnectionLineProps"></slot>
         </template>