fix: replace store id with flow id

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

src/components/Handle/Handle.vue

@@ -11,7 +11,7 @@ interface HandleProps {
   connectable?: boolean
 }
 
-const { store } = useVueFlow()
+const { id } = useVueFlow()
 const props = withDefaults(defineProps<HandleProps>(), {
   id: '',
   type: 'source',
@@ -38,7 +38,7 @@ export default {
     :class="[
       'vue-flow__handle',
       `vue-flow__handle-${props.position}`,
-      `vue-flow__handle-${store.id}`,
+      `vue-flow__handle-${id}`,
       'nodrag',
       {
         source: props.type !== 'target',

src/components/Nodes/NodeWrapper.vue

@@ -19,7 +19,7 @@ interface NodeWrapperProps {
 const props = defineProps<NodeWrapperProps>()
 const emit = defineEmits(['update:node'])
 const node = useVModel(props, 'node', emit)
-const { store } = useVueFlow()
+const { id, store } = useVueFlow()
 provide(NodeId, props.node.id)
 
 const nodeElement = templateRef<HTMLDivElement>('node-element', null)
@@ -97,7 +97,7 @@ onMounted(() => {
     ({ width: w, height: h }) => {
       nextTick(() => {
         if (w > 0 && h > 0) {
-          const handleBounds = getHandleBounds(nodeElement.value, store.transform[2], store.id)
+          const handleBounds = getHandleBounds(nodeElement.value, store.transform[2], id)
 
           node.value.dimensions = {
             width: w,

src/components/NodesSelection/NodesSelection.vue

@@ -3,7 +3,7 @@ import { Draggable, DraggableEventListener } from '@braks/revue-draggable'
 import { useVueFlow } from '../../composables'
 import { getRectOfNodes } from '../../utils'
 
-const { store } = useVueFlow()
+const { id, store } = useVueFlow()
 const selectedNodesBBox = computed(() => getRectOfNodes(store.getSelectedNodes))
 const innerStyle = computed(() => ({
   width: `${selectedNodesBBox.value.width}px`,
@@ -42,7 +42,7 @@ export default {
       @stop="onStop"
     >
       <div
-        :key="`vue-flow-nodesselection-rect-${store.id}`"
+        :key="`vue-flow-nodesselection-rect-${id}`"
         class="vue-flow__nodesselection-rect"
         :style="innerStyle"
         @contextmenu="onContextMenu"

src/container/SelectionPane/SelectionPane.vue

@@ -5,7 +5,7 @@ import { getConnectedEdges } from '../../utils'
 import NodesSelection from '../../components/NodesSelection/NodesSelection.vue'
 import UserSelection from '../../components/UserSelection/UserSelection.vue'
 
-const { store } = useVueFlow()
+const { id, store } = useVueFlow()
 
 const onClick = (event: MouseEvent) => {
   store.hooks.paneClick.trigger(event)
@@ -55,13 +55,13 @@ export default {
 }
 </script>
 <template>
-  <UserSelection v-if="store.selectionActive" :key="`user-selection-${store.id}`" />
+  <UserSelection v-if="store.selectionActive" :key="`user-selection-${id}`" />
   <NodesSelection
     v-if="store.getSelectedNodes.length && !store.selectionActive && store.nodesSelectionActive"
-    :key="`nodes-selction-${store.id}`"
+    :key="`nodes-selction-${id}`"
   />
   <div
-    :key="`flow-pane-${store.id}`"
+    :key="`flow-pane-${id}`"
     class="vue-flow__pane vue-flow__container"
     @click="onClick"
     @contextmenu="onContextMenu"

src/container/TransformationPane/TransformationPane.vue

@@ -3,27 +3,28 @@ import NodeRenderer from '../NodeRenderer/NodeRenderer.vue'
 import EdgeRenderer from '../EdgeRenderer/EdgeRenderer.vue'
 import { useVueFlow } from '../../composables'
 
-const { store } = useVueFlow()
+const { id, store } = useVueFlow()
 </script>
 <template>
   <div
+    :key="`transformation-pane-${id}`"
     class="vue-flow__transformation-pane vue-flow__container"
     :style="{ transform: `translate(${store.transform[0]}px,${store.transform[1]}px) scale(${store.transform[2]})` }"
   >
-    <NodeRenderer :key="`node-renderer-${store.id}`">
+    <NodeRenderer :key="`node-renderer-${id}`">
       <template
         v-for="nodeName of Object.keys(store.getNodeTypes)"
         #[`node-${nodeName}`]="nodeProps"
-        :key="`node-${nodeName}-${store.id}`"
+        :key="`node-${nodeName}-${id}`"
       >
         <slot :name="`node-${nodeName}`" v-bind="nodeProps" />
       </template>
     </NodeRenderer>
-    <EdgeRenderer :key="`edge-renderer-${store.id}`">
+    <EdgeRenderer :key="`edge-renderer-${id}`">
       <template
         v-for="edgeName of Object.keys(store.getEdgeTypes)"
         #[`edge-${edgeName}`]="edgeProps"
-        :key="`edge-${edgeName}-${store.id}`"
+        :key="`edge-${edgeName}-${id}`"
       >
         <slot :name="`edge-${edgeName}`" v-bind="edgeProps" />
       </template>

src/container/VueFlow/VueFlow.vue

@@ -23,7 +23,7 @@ const props = withDefaults(defineProps<FlowProps>(), {
 const emit = defineEmits([...Object.keys(createHooks()), 'update:modelValue', 'update:edges', 'update:nodes'])
 const { modelValue, nodes, edges } = useVModels(props, emit)
 
-const { store } = useVueFlow(props)
+const { id, store } = useVueFlow(props)
 useHooks(store.hooks, emit)
 
 onMounted(() => useWatch(modelValue, nodes, edges, props, store))
@@ -38,18 +38,18 @@ export default {
 </script>
 <template>
   <div class="vue-flow">
-    <ZoomPane :key="`renderer-${store.id}`">
+    <ZoomPane :key="`renderer-${id}`">
       <template
         v-for="nodeName of Object.keys(store.getNodeTypes)"
         #[`node-${nodeName}`]="nodeProps"
-        :key="`node-${nodeName}-${store.id}`"
+        :key="`node-${nodeName}-${id}`"
       >
         <slot :name="`node-${nodeName}`" v-bind="nodeProps" />
       </template>
       <template
         v-for="edgeName of Object.keys(store.getEdgeTypes)"
         #[`edge-${edgeName}`]="edgeProps"
-        :key="`edge-${edgeName}-${store.id}`"
+        :key="`edge-${edgeName}-${id}`"
       >
         <slot :name="`edge-${edgeName}`" v-bind="edgeProps" />
       </template>

src/container/ZoomPane/ZoomPane.vue

@@ -15,7 +15,7 @@ import {
 import SelectionPane from '../SelectionPane/SelectionPane.vue'
 import TransformationPane from '../TransformationPane/TransformationPane.vue'
 
-const { store } = useVueFlow()
+const { id, store } = useVueFlow()
 const zoomPaneEl = templateRef<HTMLDivElement>('zoomPane', null)
 
 const viewChanged = (prevTransform: FlowTransform, eventTransform: ZoomTransform): boolean =>
@@ -226,14 +226,14 @@ export default {
       <template
         v-for="nodeName of Object.keys(store.getNodeTypes)"
         #[`node-${nodeName}`]="nodeProps"
-        :key="`node-${nodeName}-${store.id}`"
+        :key="`node-${nodeName}-${id}`"
       >
         <slot :name="`node-${nodeName}`" v-bind="nodeProps" />
       </template>
       <template
         v-for="edgeName of Object.keys(store.getEdgeTypes)"
         #[`edge-${edgeName}`]="edgeProps"
-        :key="`edge-${edgeName}-${store.id}`"
+        :key="`edge-${edgeName}-${id}`"
       >
         <slot :name="`edge-${edgeName}`" v-bind="edgeProps" />
       </template>
@@ -241,6 +241,6 @@ export default {
         <slot name="connection-line" v-bind="customConnectionLineProps" />
       </template>
     </TransformationPane>
-    <SelectionPane :key="`selection-pane-${store.id}`" />
+    <SelectionPane :key="`selection-pane-${id}`" />
   </div>
 </template>

src/types/connection.ts

@@ -15,17 +15,6 @@ export interface Connection {
   targetHandle?: string
 }
 
-export type ConnectionLineProps = {
-  sourceX: number
-  sourceY: number
-  sourcePosition?: Position
-  targetX: number
-  targetY: number
-  targetPosition?: Position
-  connectionLineStyle?: any
-  connectionLineType: ConnectionLineType
-}
-
 export type OnConnectFunc = (connection: Connection) => void
 export type OnConnectStartParams = {
   nodeId?: string