fix: inject store instance components

chore: update revue-draggable to next tag

src/components/Edges/wrapEdge.tsx

@@ -1,11 +1,9 @@
-import { Component, computed, defineComponent, PropType, ref } from 'vue';
-
-import store from '../../store';
-import { Edge, EdgeProps, Position, WrapEdgeProps } from '../../types';
+import { computed, DefineComponent, defineComponent, inject, PropType, ref } from 'vue';
+import { Edge, EdgeProps, Position, RevueFlowStore, WrapEdgeProps } from '../../types';
 import { onMouseDown } from '../Handle/handler';
 import { EdgeAnchor } from './EdgeAnchor';
 
-export default (EdgeComponent: any): Component<EdgeProps> => {
+export default (EdgeComponent: DefineComponent<EdgeProps>) => {
   return defineComponent({
     components: { EdgeComponent },
     props: {
@@ -187,7 +185,7 @@ export default (EdgeComponent: any): Component<EdgeProps> => {
       }
     },
     setup(props) {
-      const pinia = store();
+      const store = inject<RevueFlowStore>('store')!;
       const updating = ref<boolean>(false);
       const inactive = computed(() => !props.elementsSelectable && !props.onClick);
       const edgeClasses = computed(() => [
@@ -221,8 +219,8 @@ export default (EdgeComponent: any): Component<EdgeProps> => {
 
       const onEdgeClick = (event: MouseEvent) => {
         if (props.elementsSelectable) {
-          pinia.unsetNodesSelection();
-          pinia.addSelectedElements(edgeElement.value as any);
+          store.unsetNodesSelection();
+          store.addSelectedElements(edgeElement.value as any);
         }
 
         if (typeof props.onClick === 'function') props.onClick(event, edgeElement.value);
@@ -262,12 +260,12 @@ export default (EdgeComponent: any): Component<EdgeProps> => {
           event,
           handleId,
           nodeId,
-          pinia.setConnectionNodeId,
-          pinia.setConnectionPosition,
+          store.setConnectionNodeId,
+          store.setConnectionPosition,
           props.onConnectEdge as any,
           isTarget,
           isValidConnection,
-          pinia.connectionMode,
+          store.connectionMode,
           isSourceHandle ? 'target' : 'source',
           _onEdgeUpdate
         );

src/components/Nodes/wrapNode.tsx

@@ -1,12 +1,12 @@
 import { Node, RevueFlowStore, WrapNodeProps } from '../../types';
-import { computed, CSSProperties, DefineComponent, defineComponent, inject, onMounted, provide, ref } from 'vue';
-import { DraggableCore, DraggableEventHandler } from '@braks/revue-draggable';
+import { computed, CSSProperties, DefineComponent, defineComponent, inject, onMounted, provide, ref, watchEffect } from 'vue';
+import { DraggableEventHandler, DraggableCore } from '@braks/revue-draggable';
 
 export default (NodeComponent: DefineComponent<WrapNodeProps>) => {
   return defineComponent({
     props: WrapNodeProps,
     setup(props) {
-      const store = inject<RevueFlowStore>('store');
+      const store = inject<RevueFlowStore>('store')!;
       provide('NodeIdContext', props.id);
 
       const nodeElement = ref<HTMLDivElement | undefined>();
@@ -134,7 +134,7 @@ export default (NodeComponent: DefineComponent<WrapNodeProps>) => {
         props.onNodeDragStop?.(event as MouseEvent, node.value as Node);
       };
 
-      onMounted(() => {
+      watchEffect(() => {
         if (nodeElement.value && !props.isHidden) {
           store?.updateNodeDimensions([{ id: props.id || '', nodeElement: nodeElement.value, forceUpdate: true }]);
         }
@@ -164,14 +164,13 @@ export default (NodeComponent: DefineComponent<WrapNodeProps>) => {
 
       return () => (
         <DraggableCore
-          onStart={onDragStart}
-          onDrag={onDrag}
-          onStop={onDragStop}
-          scale={props.scale}
+          start={onDragStart}
+          move={onDrag}
+          stop={onDragStop}
+          scale={store.transform[2]}
           disabled={!props.isDraggable}
           cancel=".nodrag"
           grid={grid.value}
-          nodeRef={nodeElement.value}
           enableUserSelectHack={false}
         >
           <div

src/components/NodesSelection/index.tsx

@@ -4,8 +4,8 @@
  */
 import { isNode } from '../../utils/graph';
 import { Node, RevueFlowStore } from '../../types';
-import { computed, defineComponent, inject, PropType, ref } from 'vue';
-import Draggable, { DraggableEventHandler } from '@braks/revue-draggable';
+import { computed, defineComponent, inject, PropType } from 'vue';
+import { Draggable, DraggableEventHandler } from '@braks/revue-draggable';
 
 export interface NodesSelectionProps {
   onSelectionDragStart?: (event: MouseEvent, nodes: Node[]) => void;
@@ -39,7 +39,6 @@ const NodesSelection = defineComponent({
   },
   setup(props) {
     const store = inject<RevueFlowStore>('store')!;
-    const nodeRef = ref<HTMLElement | undefined>();
     const grid = computed(() => (store.snapToGrid ? store.snapGrid : [1, 1])! as [number, number]);
 
     const selectedNodes = computed(() =>
@@ -67,10 +66,12 @@ const NodesSelection = defineComponent({
     }));
 
     const onStart: DraggableEventHandler = (event: MouseEvent) => {
+      console.log('ondragstart');
       props.onSelectionDragStart?.(event, selectedNodes.value);
     };
 
     const onDrag: DraggableEventHandler = (event, data) => {
+      console.log('ondrag');
       props.onSelectionDrag?.(event, selectedNodes.value);
 
       store.updateNodePosDiff({
@@ -83,6 +84,7 @@ const NodesSelection = defineComponent({
     };
 
     const onStop: DraggableEventHandler = (event: MouseEvent) => {
+      console.log('ondragend');
       store.updateNodePosDiff({
         isDragging: false
       });
@@ -104,16 +106,14 @@ const NodesSelection = defineComponent({
       ) : (
         <div class="revue-flow__nodesselection" style={style.value}>
           <Draggable
+            start={onStart}
+            move={onDrag}
+            stop={onStop}
             scale={store.transform[2]}
             grid={grid.value}
-            onStart={onStart}
-            onDrag={onDrag}
-            onStop={onStop}
-            nodeRef={nodeRef.value}
             enableUserSelectHack={false}
-            nodeRef={nodeRef.value}
           >
-            <div ref={nodeRef} class="revue-flow__nodesselection-rect" onContextmenu={onContextMenu} style={innerStyle.value} />
+            <div class="revue-flow__nodesselection-rect" onContextmenu={onContextMenu} style={innerStyle.value} />
           </Draggable>
         </div>
       );