fix: no use of fragments for nodes as it results in warning from vue and we got enough of those as is

* some typing issues

package.json

@@ -28,7 +28,7 @@
     "lint": "yarn lint:js"
   },
   "dependencies": {
-    "@braks/revue-draggable": "^0.1.12",
+    "@braks/revue-draggable": "^0.1.13",
     "@types/d3": "^7.0.0",
     "d3": "^7.0.0",
     "d3-selection": "^3.0.0",

src/components/Nodes/DefaultNode.tsx

@@ -29,11 +29,11 @@ const DefaultNode = defineComponent({
   },
   setup(props) {
     return () => (
-      <>
+      <div>
         <Handle type="target" position={props.targetPosition} isConnectable={props.isConnectable} />
         {props.data?.label}
         <Handle type="source" position={props.sourcePosition} isConnectable={props.isConnectable} />
-      </>
+      </div>
     );
   }
 });

src/components/Nodes/InputNode.tsx

@@ -24,10 +24,10 @@ const InputNode = defineComponent({
   },
   setup(props) {
     return () => (
-      <>
+      <div>
         {props.data?.label}
         <Handle type="source" position={props.sourcePosition} isConnectable={props.isConnectable} />
-      </>
+      </div>
     );
   }
 });

src/components/Nodes/OutputNode.tsx

@@ -24,10 +24,10 @@ const OutputNode = defineComponent({
   },
   setup(props) {
     return () => (
-      <>
+      <div>
         {props.data?.label}
         <Handle type="source" position={props.targetPosition} isConnectable={props.isConnectable} />
-      </>
+      </div>
     );
   }
 });

src/components/Nodes/wrapNode.tsx

@@ -1,8 +1,8 @@
 import { Node, RevueFlowStore, WrapNodeProps } from '../../types';
-import { computed, CSSProperties, defineComponent, inject, onMounted, provide, ref } from 'vue';
+import { computed, CSSProperties, DefineComponent, defineComponent, inject, onMounted, provide, ref } from 'vue';
 import { DraggableCore, DraggableEventHandler } from '@braks/revue-draggable';
 
-export default (NodeComponent: any) => {
+export default (NodeComponent: DefineComponent<WrapNodeProps>) => {
   return defineComponent({
     props: WrapNodeProps,
     setup(props) {

src/components/NodesSelection/index.tsx

@@ -71,9 +71,7 @@ const NodesSelection = defineComponent({
     };
 
     const onDrag: DraggableEventHandler = (event, data) => {
-      if (props.onSelectionDrag) {
+      props.onSelectionDrag?.(event, selectedNodes.value);
-        props.onSelectionDrag(event, selectedNodes.value);
-      }
 
       store.updateNodePosDiff({
         diff: {
@@ -111,6 +109,7 @@ const NodesSelection = defineComponent({
             onStart={onStart}
             onDrag={onDrag}
             onStop={onStop}
+            nodeRef={nodeRef.value}
             enableUserSelectHack={false}
             nodeRef={nodeRef.value}
           >

src/components/UserSelection/index.tsx

@@ -56,11 +56,11 @@ export default defineComponent({
         return;
       }
 
-      store?.setUserSelection(mousePos);
+      store.setUserSelection(mousePos);
     };
 
     const onMouseMove = (event: MouseEvent): void => {
-      if (!store?.selectionActive) {
+      if (!store.selectionActive) {
         return;
       }
       const mousePos = getMousePosition(event);
@@ -69,16 +69,14 @@ export default defineComponent({
         return;
       }
 
-      store?.updateUserSelection(mousePos);
+      store.updateUserSelection(mousePos);
     };
 
-    const onMouseUp = () => {
+    const onMouseUp = () => store.unsetUserSelection();
-      store?.unsetUserSelection();
-    };
 
     const onMouseLeave = () => {
-      store?.unsetUserSelection();
+      store.unsetUserSelection();
-      store?.unsetNodesSelection();
+      store.unsetNodesSelection();
     };
 
     return () => (

src/container/NodeRenderer/index.tsx

@@ -50,47 +50,47 @@ const NodeRenderer = defineComponent({
     onElementClick: {
       type: Function as unknown as PropType<NodeRendererProps['onElementClick']>,
       required: false,
-      default: undefined
+      default: () => {}
     },
     onNodeDoubleClick: {
       type: Function as unknown as PropType<NodeRendererProps['onNodeDoubleClick']>,
       required: false,
-      default: undefined
+      default: () => {}
     },
     onNodeMouseEnter: {
       type: Function as unknown as PropType<NodeRendererProps['onNodeMouseEnter']>,
       required: false,
-      default: undefined
+      default: () => {}
     },
     onNodeMouseMove: {
       type: Function as unknown as PropType<NodeRendererProps['onNodeMouseMove']>,
       required: false,
-      default: undefined
+      default: () => {}
     },
     onNodeMouseLeave: {
       type: Function as unknown as PropType<NodeRendererProps['onNodeMouseLeave']>,
       required: false,
-      default: undefined
+      default: () => {}
     },
     onNodeContextMenu: {
       type: Function as unknown as PropType<NodeRendererProps['onNodeContextMenu']>,
       required: false,
-      default: undefined
+      default: () => {}
     },
     onNodeDrag: {
       type: Function as unknown as PropType<NodeRendererProps['onNodeDrag']>,
       required: false,
-      default: undefined
+      default: () => {}
     },
     onNodeDragStart: {
       type: Function as unknown as PropType<NodeRendererProps['onNodeDragStart']>,
       required: false,
-      default: undefined
+      default: () => {}
     },
     onNodeDragStop: {
       type: Function as unknown as PropType<NodeRendererProps['onNodeDragStop']>,
       required: false,
-      default: undefined
+      default: () => {}
     }
   },
   setup(props) {
@@ -137,7 +137,7 @@ const NodeRenderer = defineComponent({
         {visibleNodes.value?.map((node) => {
           const nodeType = node.type || 'default';
           if (props.nodeTypes) {
-            const NodeComponent: any = props.nodeTypes[nodeType] || props.nodeTypes.default;
+            const NodeComponent = (props.nodeTypes[nodeType] || props.nodeTypes.default);
             if (!props.nodeTypes[nodeType]) {
               console.warn(`Node type "${nodeType}" not found. Using fallback type "default".`);
             }
@@ -150,8 +150,6 @@ const NodeRenderer = defineComponent({
               <NodeComponent
                 key={node.id}
                 id={node.id}
-                className={node.className}
-                style={node.style}
                 type={nodeType}
                 data={node.data}
                 sourcePosition={node.sourcePosition}

src/container/RevueFlow/index.tsx

@@ -1,14 +1,4 @@
-import {
+import { computed, CSSProperties, defineComponent, HTMLAttributes, onBeforeUnmount, PropType, provide, watchEffect } from 'vue';
-  computed,
-  CSSProperties,
-  defineComponent,
-  HTMLAttributes,
-  inject,
-  onBeforeUnmount,
-  PropType,
-  provide,
-  watchEffect
-} from 'vue';
 import GraphView from '../GraphView';
 import DefaultNode from '../../components/Nodes/DefaultNode';
 import InputNode from '../../components/Nodes/InputNode';
@@ -548,7 +538,7 @@ const RevueFlow = defineComponent({
      */
   },
   setup(props, { slots }) {
-    const store = typeof inject('store') !== 'undefined' ? inject<RevueFlowStore>('store')! : configureStore(initialState)();
+    const store = configureStore(initialState)();
     provide<RevueFlowStore>('store', store);
     store.setElements(props.elements);
 

src/types/index.ts

@@ -1,5 +1,5 @@
 import { Selection as D3Selection, ZoomBehavior } from 'd3';
-import { Component, HTMLAttributes, PropType, VNode } from 'vue';
+import { DefineComponent, HTMLAttributes, PropType, VNode } from 'vue';
 import { Store } from 'pinia';
 
 export type ElementId = string;
@@ -85,7 +85,7 @@ export enum BackgroundVariant {
 
 export type HandleType = 'source' | 'target';
 
-export type NodeTypesType = { [key: string]: Component };
+export type NodeTypesType = { [key: string]: DefineComponent<WrapNodeProps> };
 
 export type EdgeTypesType = NodeTypesType;
 
@@ -667,7 +667,6 @@ export interface WrapNodeProps<T = any> {
   onNodeDrag?: (event: MouseEvent, node: Node) => void;
   onNodeDragStop?: (event: MouseEvent, node: Node) => void;
   style?: any;
-  className?: string;
   sourcePosition?: Position;
   targetPosition?: Position;
   isHidden?: boolean;
@@ -738,7 +737,7 @@ export type ConnectionLineComponentProps = {
   connectionLineType: ConnectionLineType;
 };
 
-export type ConnectionLineComponent = Component<ConnectionLineComponentProps>;
+export type ConnectionLineComponent = DefineComponent<ConnectionLineComponentProps>;
 
 export type OnConnectFunc = (connection: Connection) => void;
 export type OnConnectStartParams = {

yarn.lock

@@ -262,10 +262,10 @@
     "@babel/helper-validator-identifier" "^7.14.5"
     to-fast-properties "^2.0.0"
 
-"@braks/revue-draggable@^0.1.12":
+"@braks/revue-draggable@^0.1.13":
-  version "0.1.12"
+  version "0.1.13"
-  resolved "https://registry.yarnpkg.com/@braks/revue-draggable/-/revue-draggable-0.1.12.tgz#6ccf57c1954f1bcc3e66e3956f7205dc57841deb"
+  resolved "https://registry.yarnpkg.com/@braks/revue-draggable/-/revue-draggable-0.1.13.tgz#cff5a9ac21c488de5b0c3fef6cdbd3f8f828dd21"
-  integrity sha512-eq2uj6t3GKmIej5RcDBSun94ZKs1wmEDvMMx/uz+m7EzeffXYIDyo8Zk1Nkmb3MdOcvp4BHpnzuAxUbPnZnEMA==
+  integrity sha512-unczSXZNK3ZnHoIj5w45a4eN7iQH6s0Ot33G2s7zkdMRHcoGh8Cc0ltw5m5XlrEgk4ch0vAEIU+MQiS8/D27uw==
   dependencies:
     vue-demi latest