fix: inject store instance components

chore: update revue-draggable to next tag

src/additional-components/Background/index.tsx

@@ -1,7 +1,6 @@
-import { BackgroundVariant } from '../../types';
+import { BackgroundVariant, RevueFlowStore } from '../../types';
 import { createGridDotsPath, createGridLinesPath } from './utils';
-import { computed, defineComponent, HTMLAttributes, PropType } from 'vue';
-import store from '../../store';
+import { computed, defineComponent, HTMLAttributes, inject, PropType } from 'vue';
 
 export interface BackgroundProps extends HTMLAttributes {
   variant?: BackgroundVariant;
@@ -26,7 +25,7 @@ const Background = defineComponent({
     gap: {
       type: Number as PropType<BackgroundProps['gap']>,
       required: false,
-      default: 15
+      default: 10
     },
     color: {
       type: String as PropType<BackgroundProps['color']>,
@@ -40,8 +39,8 @@ const Background = defineComponent({
     }
   },
   setup(props) {
-    const pinia = store();
-    const transform = computed(() => pinia.transform);
+    const store = inject<RevueFlowStore>('store')!;
+    const transform = computed(() => store.transform);
     // 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)}`;
 
@@ -50,12 +49,12 @@ const Background = defineComponent({
     const xOffset = computed(() => scaledGap.value && transform.value[0] % scaledGap.value);
     const yOffset = computed(() => scaledGap.value && transform.value[1] % scaledGap.value);
 
-    const isLines = props.variant === BackgroundVariant.Lines;
-    const bgColor = props.color ? props.color : defaultColors[props.variant || BackgroundVariant.Dots];
+    const isLines = computed(() => props.variant === BackgroundVariant.Lines);
+    const bgColor = computed(() => (props.color ? props.color : defaultColors[props.variant || BackgroundVariant.Dots]));
     const path = computed(() =>
-      isLines
-        ? scaledGap.value && props.size && createGridLinesPath(scaledGap.value, props.size, bgColor)
-        : createGridDotsPath(props.size || 0.4 * transform.value[2], bgColor)
+      isLines.value
+        ? scaledGap.value && props.size && createGridLinesPath(scaledGap.value, props.size, bgColor.value)
+        : createGridDotsPath(props.size || 0.4 * transform.value[2], bgColor.value)
     );
 
     return () => (

src/additional-components/Controls/index.tsx

@@ -1,7 +1,6 @@
-import { defineComponent, HTMLAttributes, onMounted, PropType, ref } from 'vue';
+import { defineComponent, HTMLAttributes, inject, onMounted, PropType, ref } from 'vue';
 import useZoomPanHelper from '../../hooks/useZoomPanHelper';
-import { FitViewParams } from '../../types';
-import store from '../../store';
+import { FitViewParams, RevueFlowStore } from '../../types';
 import PlusIcon from '../../../assets/icons/plus.svg';
 import MinusIcon from '../../../assets/icons/minus.svg';
 import Fitview from '../../../assets/icons/fitview.svg';
@@ -88,7 +87,7 @@ const Controls = defineComponent({
     }
   },
   setup(props, { slots }) {
-    const pinia = store();
+    const store = inject<RevueFlowStore>('store')!;
     const isVisible = ref<boolean>(false);
     const zoomHelper = ref(useZoomPanHelper());
 
@@ -96,7 +95,7 @@ const Controls = defineComponent({
       zoomHelper.value = useZoomPanHelper();
     });
 
-    const isInteractive = pinia.nodesDraggable && pinia.nodesConnectable && pinia.elementsSelectable;
+    const isInteractive = store.nodesDraggable && store.nodesConnectable && store.elementsSelectable;
     const mapClasses = ['revue-flow__controls'];
 
     const onZoomInHandler = () => {
@@ -115,7 +114,7 @@ const Controls = defineComponent({
     };
 
     const onInteractiveChangeHandler = () => {
-      pinia.setInteractive?.(!isInteractive);
+      store.setInteractive?.(!isInteractive);
       props.onInteractiveChange?.(!isInteractive);
     };
 

src/additional-components/MiniMap/index.tsx

@@ -1,8 +1,7 @@
 import { getRectOfNodes, getBoundsofRects } from '../../utils/graph';
-import { Node, Rect } from '../../types';
+import { Node, Rect, RevueFlowStore } from '../../types';
 import MiniMapNode from './MiniMapNode';
-import { computed, defineComponent, HTMLAttributes, PropType } from 'vue';
-import store from '../../store';
+import { computed, defineComponent, HTMLAttributes, inject, PropType } from 'vue';
 
 type StringFunc = (node: Node) => string;
 
@@ -55,8 +54,8 @@ const MiniMap = defineComponent({
     }
   },
   setup(props, { attrs }: { attrs: Record<string, any> }) {
-    const pinia = store();
-    const transform = computed(() => pinia.transform);
+    const store = inject<RevueFlowStore>('store')!;
+    const transform = computed(() => store.transform);
     const elementWidth = computed(() => (attrs.style?.width || defaultWidth)! as number);
     const elementHeight = computed(() => (attrs.style?.height || defaultHeight)! as number);
     const nodeColorFunc = computed(() => (props.nodeColor instanceof Function ? props.nodeColor : () => props.nodeColor) as StringFunc);
@@ -66,13 +65,13 @@ const MiniMap = defineComponent({
     const nodeClassNameFunc = computed(
       () => (props.nodeClassName instanceof Function ? props.nodeClassName : () => props.nodeClassName) as StringFunc
     );
-    const hasNodes = computed(() => pinia.nodes && pinia.nodes.length);
-    const bb = computed(() => getRectOfNodes(pinia.nodes));
+    const hasNodes = computed(() => store.nodes && store.nodes.length);
+    const bb = computed(() => getRectOfNodes(store.nodes));
     const viewBB = computed<Rect>(() => ({
       x: -transform.value[0] / transform.value[2],
       y: -transform.value[1] / transform.value[2],
-      width: pinia.width / transform.value[2],
-      height: pinia.height / transform.value[2]
+      width: store.width / transform.value[2],
+      height: store.height / transform.value[2]
     }));
     const boundingRect = computed(() => (hasNodes.value ? getBoundsofRects(bb.value, viewBB.value) : viewBB.value));
     const scaledWidth = computed(() => boundingRect.value.width / elementWidth.value);
@@ -94,7 +93,7 @@ const MiniMap = defineComponent({
         viewBox={`${x.value} ${y.value} ${width.value} ${height.value}`}
         class="revue-flow__minimap"
       >
-        {pinia.nodes
+        {store.nodes
           .filter((node) => !node.isHidden)
           .map((node) => (
             <MiniMapNode