fix: create store instance for every revue flow instance

src/components/Edges/BezierEdge.tsx

@@ -35,13 +35,10 @@ export function getBezierPath({
   let path = `M${sourceX},${sourceY} C${sourceX},${cY} ${targetX},${cY} ${targetX},${targetY}`;
 
   if (leftAndRight.includes(sourcePosition) && leftAndRight.includes(targetPosition)) {
-    console.log('foo');
     path = `M${sourceX},${sourceY} C${cX},${sourceY} ${cX},${targetY} ${targetX},${targetY}`;
   } else if (leftAndRight.includes(targetPosition)) {
-    console.log('bar');
     path = `M${sourceX},${sourceY} C${sourceX},${targetY} ${sourceX},${targetY} ${targetX},${targetY}`;
   } else if (leftAndRight.includes(sourcePosition)) {
-    console.log('baz');
     path = `M${sourceX},${sourceY} C${targetX},${sourceY} ${targetX},${sourceY} ${targetX},${targetY}`;
   }
 

src/components/Handle/index.tsx

@@ -1,6 +1,6 @@
 import { Connection, ElementId, Position } from '../../types';
 import { onMouseDown, ValidConnectionFunc } from './handler';
-import { defineComponent, inject, PropType } from 'vue';
+import { computed, defineComponent, inject, PropType } from 'vue';
 import store from '../../store';
 
 const alwaysValid = () => true;
@@ -41,22 +41,23 @@ const Handle = defineComponent({
   setup(props, { slots }) {
     const pinia = store();
     const nodeId = inject<ElementId>('NodeIdContext') as ElementId;
-    const isTarget = props.type === 'target';
+    const isTarget = computed(() => props.type === 'target');
+    const onConnect = computed(() => pinia.onConnect);
 
     const onConnectExtended = (params: Connection) => {
-      pinia.onConnect?.(params);
+      onConnect.value?.(params);
       props.onConnect?.(params);
     };
 
     const onMouseDownHandler = (event: MouseEvent) => {
       onMouseDown(
         event,
-        props.id || '',
+        props.id as string,
         nodeId,
         pinia.setConnectionNodeId,
         pinia.setConnectionPosition,
         onConnectExtended,
-        isTarget,
+        isTarget.value,
         props.isValidConnection,
         pinia.connectionMode,
         undefined,
@@ -67,23 +68,23 @@ const Handle = defineComponent({
       );
     };
 
-    const handleClasses = [
+    const handleClasses = computed(() => [
       'revue-flow__handle',
       `revue-flow__handle-${props.position}`,
       'nodrag',
       {
-        source: !isTarget,
-        target: isTarget,
+        source: !isTarget.value,
+        target: isTarget.value,
         connectable: props.isConnectable
       }
-    ];
+    ]);
 
     return () => (
       <div
         data-handleid={props.id}
         data-nodeid={nodeId}
         data-handlepos={props.position}
-        class={handleClasses}
+        class={handleClasses.value}
         onMousedown={onMouseDownHandler}
       >
         {slots.default ? slots.default() : ''}

src/container/EdgeRenderer/utils.ts

@@ -34,7 +34,6 @@ export function getHandlePosition(position: Position, node: Node, handle: any |
   const width = handle?.width || node.__rf.width;
   const height = handle?.height || node.__rf.height;
 
-  console.log(handle?.x, handle?.y);
   switch (position) {
     case Position.Top:
       return {

src/container/RevueFlow/index.tsx

@@ -1,4 +1,14 @@
-import { computed, CSSProperties, defineComponent, HTMLAttributes, onBeforeUnmount, onUpdated, PropType } from 'vue';
+import {
+  computed,
+  CSSProperties,
+  defineComponent,
+  HTMLAttributes,
+  onBeforeUnmount,
+  onMounted,
+  onUpdated,
+  PropType,
+  watch
+} from 'vue';
 import GraphView from '../GraphView';
 import DefaultNode from '../../components/Nodes/DefaultNode';
 import InputNode from '../../components/Nodes/InputNode';
@@ -29,7 +39,8 @@ import {
 } from '../../types';
 import '../../style.css';
 import '../../theme-default.css';
-import store from '../../store';
+import { initialState } from '../../store';
+import configureStore from '../../store/configure-store';
 
 const defaultNodeTypes = {
   input: InputNode,
@@ -452,14 +463,17 @@ const RevueFlow = defineComponent({
     }
   },
   setup(props, { slots }) {
-    const pinia = store();
-    pinia.setElements(props.elements);
+    const store = configureStore(initialState)();
+    watch(props.elements, () => store.setElements(props.elements));
     onUpdated(() => {
-      pinia.setElements(props.elements);
+      store.setElements(props.elements);
+    });
+    onMounted(() => {
+      store.setElements(props.elements);
     });
-
     onBeforeUnmount(() => {
-      pinia.setElements([]);
+      store.$reset();
+      store.setElements([]);
     });
 
     const nodeTypesParsed = computed(() => props.nodeTypes && createNodeTypes(props.nodeTypes));

src/store/configure-store.ts

@@ -13,12 +13,12 @@ type NextElements = {
 
 export default function configureStore(
   preloadedState: ReactFlowState
-): StoreDefinition<'revue-flow', ReactFlowState, any, RevueFlowActionsTree> {
+): StoreDefinition<any, ReactFlowState, any, RevueFlowActionsTree> {
   const pinia = inject<Pinia>(Symbol('pinia')) ?? createPinia();
   setActivePinia(pinia);
 
   return defineStore({
-    id: 'revue-flow',
+    id: 'revue-flow-' + pinia.state.value.length + 1,
     state: () => preloadedState,
     getters: {},
     actions: {

src/store/index.ts

@@ -1,6 +1,6 @@
 import configureStore from './configure-store';
 
-import { ReactFlowState, ConnectionMode, RevueFlowActionsTree } from '../types';
+import { ReactFlowState, ConnectionMode } from '../types';
 
 export const initialState: ReactFlowState = {
   width: 0,
@@ -58,6 +58,5 @@ export const initialState: ReactFlowState = {
 
 const store = configureStore(initialState);
 
-export type RevueFlowDispatch = RevueFlowActionsTree;
-
+export type StoreType = typeof store;
 export default store;