fix: user selection

deps: upgrade to latest revue-draggable

package.json

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

src/components/UserSelection/index.tsx

@@ -30,13 +30,12 @@ const SelectionRect = defineComponent({
       return null;
     }
 
-    console.log('selectionrect');
     return () => (
       <div
         class="revue-flow__selection"
         style={{
-          width: store?.userSelectionRect.width,
+          width: `${store?.userSelectionRect.width}px`,
-          height: store?.userSelectionRect.height,
+          height: `${store?.userSelectionRect.height}px`,
           transform: `translate(${store?.userSelectionRect.x}px, ${store?.userSelectionRect.y}px)`
         }}
       />

src/container/FlowRenderer/index.tsx

@@ -25,57 +25,57 @@ const FlowRenderer = defineComponent({
   components: { UserSelection, ZoomPane, NodesSelection },
   props: {
     onPaneClick: {
-      type: Function() as PropType<FlowRendererProps['onPaneClick']>,
+      type: Function as unknown as PropType<FlowRendererProps['onPaneClick']>,
       required: false,
       default: undefined as any
     },
     onPaneContextMenu: {
-      type: Function() as PropType<FlowRendererProps['onPaneContextMenu']>,
+      type: Function as unknown as PropType<FlowRendererProps['onPaneContextMenu']>,
       required: false,
       default: undefined as any
     },
     onPaneScroll: {
-      type: Function() as PropType<FlowRendererProps['onPaneScroll']>,
+      type: Function as unknown as PropType<FlowRendererProps['onPaneScroll']>,
       required: false,
       default: undefined as any
     },
     onElementsRemove: {
-      type: Function() as PropType<FlowRendererProps['onElementsRemove']>,
+      type: Function as unknown as PropType<FlowRendererProps['onElementsRemove']>,
       required: false,
       default: undefined as any
     },
     onMove: {
-      type: Function() as PropType<FlowRendererProps['onMove']>,
+      type: Function as unknown as PropType<FlowRendererProps['onMove']>,
       required: false,
       default: undefined as any
     },
     onMoveStart: {
-      type: Function() as PropType<FlowRendererProps['onMoveStart']>,
+      type: Function as unknown as PropType<FlowRendererProps['onMoveStart']>,
       required: false,
       default: undefined as any
     },
     onMoveEnd: {
-      type: Function() as PropType<FlowRendererProps['onMoveEnd']>,
+      type: Function as unknown as PropType<FlowRendererProps['onMoveEnd']>,
       required: false,
       default: undefined as any
     },
     onSelectionDragStart: {
-      type: Function() as PropType<FlowRendererProps['onSelectionDragStart']>,
+      type: Function as unknown as PropType<FlowRendererProps['onSelectionDragStart']>,
       required: false,
       default: undefined as any
     },
     onSelectionDrag: {
-      type: Function() as PropType<FlowRendererProps['onSelectionDrag']>,
+      type: Function as unknown as PropType<FlowRendererProps['onSelectionDrag']>,
       required: false,
       default: undefined as any
     },
     onSelectionDragStop: {
-      type: Function() as PropType<FlowRendererProps['onSelectionDragStop']>,
+      type: Function as unknown as PropType<FlowRendererProps['onSelectionDragStop']>,
       required: false,
       default: undefined as any
     },
     onSelectionContextMenu: {
-      type: Function() as PropType<FlowRendererProps['onSelectionContextMenu']>,
+      type: Function as unknown as PropType<FlowRendererProps['onSelectionContextMenu']>,
       required: false,
       default: undefined as any
     },

src/container/GraphView/index.tsx

@@ -1,10 +1,10 @@
+import { defineComponent, inject, onBeforeMount, onMounted, ref, reactive, PropType, CSSProperties } from 'vue';
 import FlowRenderer from '../FlowRenderer';
 import NodeRenderer from '../NodeRenderer';
 import EdgeRenderer from '../EdgeRenderer';
 import { onLoadProject, onLoadGetElements, onLoadToObject } from '../../utils/graph';
 import { RevueFlowProps } from '../RevueFlow';
 import { NodeTypesType, EdgeTypesType, ConnectionLineType, KeyCode, RevueFlowStore } from '../../types';
-import { CSSProperties, defineComponent, inject, onBeforeMount, onMounted, PropType, ref } from 'vue';
 import useZoomPanHelper from '../../hooks/useZoomPanHelper';
 
 export interface GraphViewProps extends Omit<RevueFlowProps, 'onSelectionChange' | 'elements'> {
@@ -337,6 +337,21 @@ const GraphView = defineComponent({
       required: false,
       default: undefined as any
     },
+    onSelectionDragStart: {
+      type: Function as unknown as PropType<GraphViewProps['onSelectionDragStart']>,
+      required: false,
+      default: undefined as any
+    },
+    onSelectionDrag: {
+      type: Function as unknown as PropType<GraphViewProps['onSelectionDrag']>,
+      required: false,
+      default: undefined as any
+    },
+    onSelectionDragStop: {
+      type: Function as unknown as PropType<GraphViewProps['onSelectionDragStop']>,
+      required: false,
+      default: undefined as any
+    },
     edgeUpdaterRadius: {
       type: Number as PropType<GraphViewProps['edgeUpdaterRadius']>,
       required: false,
@@ -344,6 +359,74 @@ const GraphView = defineComponent({
     }
   },
   setup(props) {
+    const {
+      nodeTypes,
+      edgeTypes,
+      onMove,
+      onMoveStart,
+      onMoveEnd,
+      onLoad,
+      onElementClick,
+      onNodeDoubleClick,
+      onEdgeDoubleClick,
+      onNodeMouseEnter,
+      onNodeMouseMove,
+      onNodeMouseLeave,
+      onNodeContextMenu,
+      onNodeDragStart,
+      onNodeDrag,
+      onNodeDragStop,
+      onSelectionDragStart,
+      onSelectionDrag,
+      onSelectionDragStop,
+      onSelectionContextMenu,
+      connectionMode,
+      connectionLineType,
+      connectionLineStyle,
+      connectionLineComponent,
+      selectionKeyCode,
+      multiSelectionKeyCode,
+      zoomActivationKeyCode,
+      onElementsRemove,
+      deleteKeyCode,
+      onConnect,
+      onConnectStart,
+      onConnectStop,
+      onConnectEnd,
+      snapToGrid,
+      snapGrid,
+      onlyRenderVisibleElements,
+      nodesDraggable,
+      nodesConnectable,
+      elementsSelectable,
+      selectNodesOnDrag,
+      minZoom,
+      maxZoom,
+      defaultZoom,
+      defaultPosition,
+      translateExtent,
+      nodeExtent,
+      arrowHeadColor,
+      markerEndId,
+      zoomOnScroll,
+      zoomOnPinch,
+      panOnScroll,
+      panOnScrollSpeed,
+      panOnScrollMode,
+      zoomOnDoubleClick,
+      paneMoveable,
+      onPaneClick,
+      onPaneScroll,
+      onPaneContextMenu,
+      onEdgeUpdate,
+      onEdgeContextMenu,
+      onEdgeMouseEnter,
+      onEdgeMouseMove,
+      onEdgeMouseLeave,
+      edgeUpdaterRadius,
+      onEdgeUpdateStart,
+      onEdgeUpdateEnd
+    } = reactive(props);
     const store = inject<RevueFlowStore>('store');
     const isInitialized = ref<boolean>(false);
 
@@ -351,8 +434,8 @@ const GraphView = defineComponent({
       const { zoomIn, zoomOut, zoomTo, transform, fitView, initialized } = useZoomPanHelper();
 
       if (!isInitialized.value && initialized) {
-        if (props.onLoad && store) {
+        if (onLoad && store) {
-          props.onLoad({
+          onLoad({
             fitView: (params = { padding: 0.1 }) => fitView(params),
             zoomIn,
             zoomOut,
@@ -368,139 +451,139 @@ const GraphView = defineComponent({
     });
 
     onBeforeMount(() => {
-      if (props.onConnect) {
+      if (onConnect) {
-        store?.setOnConnect(props.onConnect);
+        store?.setOnConnect(onConnect);
       }
 
-      if (props.onConnectStart) {
+      if (onConnectStart) {
-        store?.setOnConnectStart(props.onConnectStart);
+        store?.setOnConnectStart(onConnectStart);
       }
 
-      if (props.onConnectStop) {
+      if (onConnectStop) {
-        store?.setOnConnectStop(props.onConnectStop);
+        store?.setOnConnectStop(onConnectStop);
       }
 
-      if (props.onConnectEnd) {
+      if (onConnectEnd) {
-        store?.setOnConnectEnd(props.onConnectEnd);
+        store?.setOnConnectEnd(onConnectEnd);
       }
 
-      if (typeof props.snapToGrid !== 'undefined') {
+      if (typeof snapToGrid !== 'undefined') {
-        store?.setSnapToGrid(props.snapToGrid);
+        store?.setSnapToGrid(snapToGrid);
       }
 
-      if (typeof props.snapGrid !== 'undefined') {
+      if (typeof snapGrid !== 'undefined') {
-        store?.setSnapGrid(props.snapGrid);
+        store?.setSnapGrid(snapGrid);
       }
 
-      if (typeof props.nodesDraggable !== 'undefined') {
+      if (typeof nodesDraggable !== 'undefined') {
-        store?.setNodesDraggable(!!props.nodesDraggable);
+        store?.setNodesDraggable(!!nodesDraggable);
       }
 
-      if (typeof props.nodesConnectable !== 'undefined') {
+      if (typeof nodesConnectable !== 'undefined') {
-        store?.setNodesConnectable(!!props.nodesConnectable);
+        store?.setNodesConnectable(!!nodesConnectable);
       }
 
-      if (typeof props.elementsSelectable !== 'undefined') {
+      if (typeof elementsSelectable !== 'undefined') {
-        store?.setElementsSelectable(!!props.elementsSelectable);
+        store?.setElementsSelectable(!!elementsSelectable);
       }
 
-      if (typeof props.minZoom !== 'undefined') {
+      if (typeof minZoom !== 'undefined') {
-        store?.setMinZoom(props.minZoom as any);
+        store?.setMinZoom(minZoom);
       }
 
-      if (typeof props.maxZoom !== 'undefined') {
+      if (typeof maxZoom !== 'undefined') {
-        store?.setMaxZoom(props.maxZoom as any);
+        store?.setMaxZoom(maxZoom);
       }
 
-      if (typeof props.translateExtent !== 'undefined') {
+      if (typeof translateExtent !== 'undefined') {
-        store?.setTranslateExtent(props.translateExtent as any);
+        store?.setTranslateExtent(translateExtent);
       }
 
-      if (typeof props.nodeExtent !== 'undefined') {
+      if (typeof nodeExtent !== 'undefined') {
-        store?.setNodeExtent(props.nodeExtent as any);
+        store?.setNodeExtent(nodeExtent);
       }
     });
 
     onMounted(() => {
-      if (typeof props.nodesConnectable !== 'undefined') {
+      if (typeof nodesConnectable !== 'undefined') {
-        store?.setNodesConnectable(!!props.nodesConnectable);
+        store?.setNodesConnectable(!!nodesConnectable);
       }
     });
 
     onMounted(() => {
-      if (typeof props.elementsSelectable !== 'undefined') {
+      if (typeof elementsSelectable !== 'undefined') {
-        store?.setElementsSelectable(!!props.elementsSelectable);
+        store?.setElementsSelectable(!!elementsSelectable);
       }
 
-      if (typeof props.connectionMode !== 'undefined') {
+      if (typeof connectionMode !== 'undefined') {
-        store?.setConnectionMode(props.connectionMode as any);
+        store?.setConnectionMode(connectionMode);
       }
     });
 
     return () => (
       <FlowRenderer
-        onPaneClick={props.onPaneClick}
+        onPaneClick={onPaneClick}
-        onPaneContextMenu={props.onPaneContextMenu}
+        onPaneContextMenu={onPaneContextMenu}
-        onPaneScroll={props.onPaneScroll}
+        onPaneScroll={onPaneScroll}
-        onElementsRemove={props.onElementsRemove}
+        onElementsRemove={onElementsRemove}
-        deleteKeyCode={props.deleteKeyCode as any}
+        deleteKeyCode={deleteKeyCode}
-        selectionKeyCode={props.selectionKeyCode as any}
+        selectionKeyCode={selectionKeyCode}
-        multiSelectionKeyCode={props.multiSelectionKeyCode as any}
+        multiSelectionKeyCode={multiSelectionKeyCode}
-        zoomActivationKeyCode={props.zoomActivationKeyCode as any}
+        zoomActivationKeyCode={zoomActivationKeyCode}
-        elementsSelectable={props.elementsSelectable}
+        elementsSelectable={elementsSelectable}
-        onMove={props.onMove}
+        onMove={onMove}
-        onMoveStart={props.onMoveStart}
+        onMoveStart={onMoveStart}
-        onMoveEnd={props.onMoveEnd}
+        onMoveEnd={onMoveEnd}
-        zoomOnScroll={props.zoomOnScroll}
+        zoomOnScroll={zoomOnScroll}
-        zoomOnPinch={props.zoomOnPinch}
+        zoomOnPinch={zoomOnPinch}
-        zoomOnDoubleClick={props.zoomOnDoubleClick}
+        zoomOnDoubleClick={zoomOnDoubleClick}
-        panOnScroll={props.panOnScroll}
+        panOnScroll={panOnScroll}
-        panOnScrollSpeed={props.panOnScrollSpeed}
+        panOnScrollSpeed={panOnScrollSpeed}
-        panOnScrollMode={props.panOnScrollMode}
+        panOnScrollMode={panOnScrollMode}
-        paneMoveable={props.paneMoveable}
+        paneMoveable={paneMoveable}
-        defaultPosition={props.defaultPosition as any}
+        defaultPosition={defaultPosition}
-        defaultZoom={props.defaultZoom as any}
+        defaultZoom={defaultZoom}
-        translateExtent={props.translateExtent}
+        translateExtent={translateExtent}
-        //onSelectionDragStart={props.onSelectionDragStart}
+        onSelectionDragStart={onSelectionDragStart}
-        //onSelectionDrag={props.onSelectionDrag}
+        onSelectionDrag={onSelectionDrag}
-        //onSelectionDragStop={props.onSelectionDragStop}
+        onSelectionDragStop={onSelectionDragStop}
-        onSelectionContextMenu={props.onSelectionContextMenu}
+        onSelectionContextMenu={onSelectionContextMenu}
       >
         <NodeRenderer
-          nodeTypes={props.nodeTypes}
+          nodeTypes={nodeTypes}
-          onElementClick={props.onElementClick}
+          onElementClick={onElementClick}
-          onNodeDoubleClick={props.onNodeDoubleClick}
+          onNodeDoubleClick={onNodeDoubleClick}
-          onNodeMouseEnter={props.onNodeMouseEnter}
+          onNodeMouseEnter={onNodeMouseEnter}
-          onNodeMouseMove={props.onNodeMouseMove}
+          onNodeMouseMove={onNodeMouseMove}
-          onNodeMouseLeave={props.onNodeMouseLeave}
+          onNodeMouseLeave={onNodeMouseLeave}
-          onNodeContextMenu={props.onNodeContextMenu}
+          onNodeContextMenu={onNodeContextMenu}
-          onNodeDragStop={props.onNodeDragStop}
+          onNodeDragStop={onNodeDragStop}
-          onNodeDrag={props.onNodeDrag}
+          onNodeDrag={onNodeDrag}
-          onNodeDragStart={props.onNodeDragStart}
+          onNodeDragStart={onNodeDragStart}
-          selectNodesOnDrag={props.selectNodesOnDrag}
+          selectNodesOnDrag={selectNodesOnDrag}
-          snapToGrid={props.snapToGrid}
+          snapToGrid={snapToGrid}
-          snapGrid={props.snapGrid}
+          snapGrid={snapGrid}
-          onlyRenderVisibleElements={props.onlyRenderVisibleElements}
+          onlyRenderVisibleElements={onlyRenderVisibleElements}
         />
         <EdgeRenderer
-          edgeTypes={props.edgeTypes}
+          edgeTypes={edgeTypes}
-          onElementClick={props.onElementClick}
+          onElementClick={onElementClick}
-          onEdgeDoubleClick={props.onEdgeDoubleClick}
+          onEdgeDoubleClick={onEdgeDoubleClick}
-          connectionLineType={props.connectionLineType}
+          connectionLineType={connectionLineType}
-          connectionLineStyle={props.connectionLineStyle}
+          connectionLineStyle={connectionLineStyle}
-          connectionLineComponent={props.connectionLineComponent}
+          connectionLineComponent={connectionLineComponent}
-          connectionMode={props.connectionMode}
+          connectionMode={connectionMode}
-          arrowHeadColor={props.arrowHeadColor}
+          arrowHeadColor={arrowHeadColor}
-          markerEndId={props.markerEndId}
+          markerEndId={markerEndId}
-          onEdgeUpdate={props.onEdgeUpdate}
+          onEdgeUpdate={onEdgeUpdate}
-          onlyRenderVisibleElements={props.onlyRenderVisibleElements}
+          onlyRenderVisibleElements={onlyRenderVisibleElements}
-          onEdgeContextMenu={props.onEdgeContextMenu}
+          onEdgeContextMenu={onEdgeContextMenu}
-          onEdgeMouseEnter={props.onEdgeMouseEnter}
+          onEdgeMouseEnter={onEdgeMouseEnter}
-          onEdgeMouseMove={props.onEdgeMouseMove}
+          onEdgeMouseMove={onEdgeMouseMove}
-          onEdgeMouseLeave={props.onEdgeMouseLeave}
+          onEdgeMouseLeave={onEdgeMouseLeave}
-          onEdgeUpdateStart={props.onEdgeUpdateStart}
+          onEdgeUpdateStart={onEdgeUpdateStart}
-          onEdgeUpdateEnd={props.onEdgeUpdateEnd}
+          onEdgeUpdateEnd={onEdgeUpdateEnd}
-          edgeUpdaterRadius={props.edgeUpdaterRadius}
+          edgeUpdaterRadius={edgeUpdaterRadius}
         />
       </FlowRenderer>
     );

src/container/RevueFlow/index.tsx

@@ -1,4 +1,14 @@
-import { computed, CSSProperties, defineComponent, HTMLAttributes, onBeforeUnmount, onUpdated, PropType, provide } from 'vue';
+import {
+  computed,
+  CSSProperties,
+  defineComponent,
+  HTMLAttributes,
+  onBeforeUnmount,
+  PropType,
+  provide,
+  reactive,
+  watchEffect
+} from 'vue';
 import GraphView from '../GraphView';
 import DefaultNode from '../../components/Nodes/DefaultNode';
 import InputNode from '../../components/Nodes/InputNode';
@@ -25,7 +35,8 @@ import {
   KeyCode,
   PanOnScrollMode,
   OnEdgeUpdateFunc,
-  NodeExtent
+  NodeExtent,
+  RevueFlowStore
 } from '../../types';
 import '../../style.css';
 import '../../theme-default.css';
@@ -147,104 +158,104 @@ const RevueFlow = defineComponent({
       default: () => defaultEdgeTypes
     },
     onMove: {
-      type: Function() as PropType<RevueFlowProps['onMove']>,
+      type: Function as unknown as PropType<RevueFlowProps['onMove']>,
       required: false,
-      default: undefined as any
+      default: undefined
     },
     onMoveStart: {
-      type: Function() as PropType<RevueFlowProps['onMoveStart']>,
+      type: Function as unknown as PropType<RevueFlowProps['onMoveStart']>,
       required: false,
-      default: undefined as any
+      default: undefined
     },
     onMoveEnd: {
-      type: Function() as PropType<RevueFlowProps['onMoveEnd']>,
+      type: Function as unknown as PropType<RevueFlowProps['onMoveEnd']>,
       required: false,
-      default: undefined as any
+      default: undefined
     },
     onLoad: {
-      type: Function() as PropType<RevueFlowProps['onLoad']>,
+      type: Function as unknown as PropType<RevueFlowProps['onLoad']>,
       required: false,
-      default: undefined as any
+      default: undefined
     },
     onElementClick: {
-      type: Function() as PropType<RevueFlowProps['onElementClick']>,
+      type: Function as unknown as PropType<RevueFlowProps['onElementClick']>,
       required: false,
-      default: undefined as any
+      default: undefined
     },
     onNodeDoubleClick: {
-      type: Function() as PropType<RevueFlowProps['onNodeDoubleClick']>,
+      type: Function as unknown as PropType<RevueFlowProps['onNodeDoubleClick']>,
       required: false,
-      default: undefined as any
+      default: undefined
     },
     onEdgeDoubleClick: {
-      type: Function() as PropType<RevueFlowProps['onEdgeDoubleClick']>,
+      type: Function as unknown as PropType<RevueFlowProps['onEdgeDoubleClick']>,
       required: false,
-      default: undefined as any
+      default: undefined
     },
     onNodeMouseEnter: {
-      type: Function() as PropType<RevueFlowProps['onNodeMouseEnter']>,
+      type: Function as unknown as PropType<RevueFlowProps['onNodeMouseEnter']>,
       required: false,
-      default: undefined as any
+      default: undefined
     },
     onNodeMouseMove: {
-      type: Function() as PropType<RevueFlowProps['onNodeMouseMove']>,
+      type: Function as unknown as PropType<RevueFlowProps['onNodeMouseMove']>,
       required: false,
-      default: undefined as any
+      default: undefined
     },
     onNodeMouseLeave: {
-      type: Function() as PropType<RevueFlowProps['onNodeMouseLeave']>,
+      type: Function as unknown as PropType<RevueFlowProps['onNodeMouseLeave']>,
       required: false,
-      default: undefined as any
+      default: undefined
     },
     onNodeContextMenu: {
-      type: Function() as PropType<RevueFlowProps['onNodeContextMenu']>,
+      type: Function as unknown as PropType<RevueFlowProps['onNodeContextMenu']>,
       required: false,
-      default: undefined as any
+      default: undefined
     },
     onNodeDragStart: {
-      type: Function() as PropType<RevueFlowProps['onNodeDragStart']>,
+      type: Function as unknown as PropType<RevueFlowProps['onNodeDragStart']>,
       required: false,
-      default: undefined as any
+      default: undefined
     },
     onNodeDrag: {
-      type: Function() as PropType<RevueFlowProps['onNodeDrag']>,
+      type: Function as unknown as PropType<RevueFlowProps['onNodeDrag']>,
       required: false,
-      default: undefined as any
+      default: undefined
     },
     onNodeDragStop: {
-      type: Function() as PropType<RevueFlowProps['onNodeDragStop']>,
+      type: Function as unknown as PropType<RevueFlowProps['onNodeDragStop']>,
       required: false,
-      default: undefined as any
+      default: undefined
     },
     onSelectionContextMenu: {
-      type: Function() as PropType<RevueFlowProps['onSelectionContextMenu']>,
+      type: Function as unknown as PropType<RevueFlowProps['onSelectionContextMenu']>,
       required: false,
-      default: undefined as any
+      default: undefined
     },
     onElementsRemove: {
-      type: Function() as PropType<RevueFlowProps['onElementsRemove']>,
+      type: Function as unknown as PropType<RevueFlowProps['onElementsRemove']>,
       required: false,
-      default: undefined as any
+      default: undefined
     },
     onConnect: {
-      type: Function() as PropType<RevueFlowProps['onConnect']>,
+      type: Function as unknown as PropType<RevueFlowProps['onConnect']>,
       required: false,
-      default: undefined as any
+      default: undefined
     },
     onConnectStart: {
-      type: Function() as PropType<RevueFlowProps['onConnectStart']>,
+      type: Function as unknown as PropType<RevueFlowProps['onConnectStart']>,
       required: false,
-      default: undefined as any
+      default: undefined
     },
     onConnectStop: {
-      type: Function() as PropType<RevueFlowProps['onConnectStop']>,
+      type: Function as unknown as PropType<RevueFlowProps['onConnectStop']>,
       required: false,
-      default: undefined as any
+      default: undefined
     },
     onConnectEnd: {
-      type: Function() as PropType<RevueFlowProps['onConnectEnd']>,
+      type: Function as unknown as PropType<RevueFlowProps['onConnectEnd']>,
       required: false,
-      default: undefined as any
+      default: undefined
     },
     connectionMode: {
       type: String as PropType<RevueFlowProps['connectionMode']>,
@@ -264,7 +275,7 @@ const RevueFlow = defineComponent({
     connectionLineComponent: {
       type: Object as PropType<RevueFlowProps['connectionLineComponent']>,
       required: false,
-      default: undefined as any
+      default: undefined
     },
     selectionKeyCode: {
       type: [Number, String] as PropType<RevueFlowProps['selectionKeyCode']>,
@@ -397,147 +408,308 @@ const RevueFlow = defineComponent({
       default: true
     },
     onPaneClick: {
-      type: Function() as PropType<RevueFlowProps['onPaneClick']>,
+      type: Function as unknown as PropType<RevueFlowProps['onPaneClick']>,
       required: false,
-      default: undefined as any
+      default: undefined
     },
     onPaneScroll: {
-      type: Function() as PropType<RevueFlowProps['onPaneScroll']>,
+      type: Function as unknown as PropType<RevueFlowProps['onPaneScroll']>,
       required: false,
-      default: undefined as any
+      default: undefined
     },
     onPaneContextMenu: {
-      type: Function() as PropType<RevueFlowProps['onPaneContextMenu']>,
+      type: Function as unknown as PropType<RevueFlowProps['onPaneContextMenu']>,
       required: false,
-      default: undefined as any
+      default: undefined
     },
     onEdgeUpdate: {
-      type: Function() as PropType<RevueFlowProps['onEdgeUpdate']>,
+      type: Function as unknown as PropType<RevueFlowProps['onEdgeUpdate']>,
       required: false,
-      default: undefined as any
+      default: undefined
     },
     onEdgeMouseEnter: {
       type: Function as unknown as PropType<RevueFlowProps['onEdgeMouseEnter']>,
       required: false,
-      default: undefined as any
+      default: undefined
     },
     onEdgeContextMenu: {
       type: Function as unknown as PropType<RevueFlowProps['onEdgeContextMenu']>,
       required: false,
-      default: undefined as any
+      default: undefined
     },
     onEdgeMouseMove: {
       type: Function as unknown as PropType<RevueFlowProps['onEdgeMouseMove']>,
       required: false,
-      default: undefined as any
+      default: undefined
     },
     onEdgeMouseLeave: {
       type: Function as unknown as PropType<RevueFlowProps['onEdgeMouseLeave']>,
       required: false,
-      default: undefined as any
+      default: undefined
     },
     onEdgeUpdateEnd: {
       type: Function as unknown as PropType<RevueFlowProps['onEdgeUpdateEnd']>,
       required: false,
-      default: undefined as any
+      default: undefined
     },
     onEdgeUpdateStart: {
       type: Function as unknown as PropType<RevueFlowProps['onEdgeUpdateStart']>,
       required: false,
-      default: undefined as any
+      default: undefined
+    },
+    onSelectionDragStart: {
+      type: Function as unknown as PropType<RevueFlowProps['onSelectionDragStart']>,
+      required: false,
+      default: undefined
+    },
+    onSelectionDrag: {
+      type: Function as unknown as PropType<RevueFlowProps['onSelectionDrag']>,
+      required: false,
+      default: undefined
+    },
+    onSelectionDragStop: {
+      type: Function as unknown as PropType<RevueFlowProps['onSelectionDragStop']>,
+      required: false,
+      default: undefined
+    },
+    onSelectionChange: {
+      type: Function as unknown as PropType<RevueFlowProps['onSelectionChange']>,
+      required: false,
+      default: undefined
     },
     edgeUpdaterRadius: {
       type: Number as PropType<RevueFlowProps['edgeUpdaterRadius']>,
       required: false,
       default: 10
+    },
+    onDrop: {
+      type: Function as unknown as PropType<(e: DragEvent) => any>,
+      required: false,
+      default: undefined as any
+    },
+    onDragover: {
+      type: Function as unknown as PropType<(e: DragEvent) => any>,
+      required: false,
+      default: undefined as any
     }
+
+    /*  // focus events
+      onFocus: FocusEvent,
+      onFocusin: FocusEvent,
+      onFocusout: FocusEvent,
+      onBlur: FocusEvent,
+
+      // keyboard events
+      onKeydown: KeyboardEvent,
+      onKeypress: KeyboardEvent,
+      onKeyup: KeyboardEvent,
+
+      // mouse events
+      onAuxclick: MouseEvent,
+      onClick: MouseEvent,
+      onContextmenu: MouseEvent,
+      onDblclick: MouseEvent,
+      onMousedown: MouseEvent,
+      onMouseenter: MouseEvent,
+      onMouseleave: MouseEvent,
+      onMousemove: MouseEvent,
+      onMouseout: MouseEvent,
+      onMouseover: MouseEvent,
+      onMouseup: MouseEvent,
+
+      // selection events
+      onSelect: Event,
+
+      // UI events
+      onScroll: UIEvent,
+
+      // touch events
+      onTouchcancel: TouchEvent,
+      onTouchend: TouchEvent,
+      onTouchmove: TouchEvent,
+      onTouchstart: TouchEvent,
+
+      // pointer events
+      onPointerdown: PointerEvent,
+      onPointermove: PointerEvent,
+      onPointerup: PointerEvent,
+      onPointercancel: PointerEvent,
+      onPointerenter: PointerEvent,
+      onPointerleave: PointerEvent,
+      onPointerover: PointerEvent,
+      onPointerout: PointerEvent,
+
+      // wheel events
+      onWheel: WheelEvent,
+
+      // transition events
+      onTransitionend: TransitionEvent,
+      onTransitionstart: TransitionEvent,
+     */
   },
   setup(props, { slots }) {
+    const {
+      elements = [],
+      nodeTypes = defaultNodeTypes,
+      edgeTypes = defaultEdgeTypes,
+      onElementClick,
+      onLoad,
+      onMove,
+      onMoveStart,
+      onMoveEnd,
+      onElementsRemove,
+      onConnect,
+      onConnectStart,
+      onConnectStop,
+      onConnectEnd,
+      onNodeMouseEnter,
+      onNodeMouseMove,
+      onNodeMouseLeave,
+      onNodeContextMenu,
+      onNodeDoubleClick,
+      onNodeDragStart,
+      onNodeDrag,
+      onNodeDragStop,
+      onSelectionChange,
+      onSelectionDragStart,
+      onSelectionDrag,
+      onSelectionDragStop,
+      onSelectionContextMenu,
+      connectionMode = ConnectionMode.Strict,
+      connectionLineType = ConnectionLineType.Bezier,
+      connectionLineStyle,
+      connectionLineComponent,
+      deleteKeyCode = 'Backspace',
+      selectionKeyCode = 'Shift',
+      multiSelectionKeyCode = 'Meta',
+      zoomActivationKeyCode = 'Meta',
+      snapToGrid = false,
+      snapGrid = [15, 15],
+      onlyRenderVisibleElements = false,
+      selectNodesOnDrag = true,
+      nodesDraggable,
+      nodesConnectable,
+      elementsSelectable,
+      minZoom,
+      maxZoom,
+      defaultZoom = 1,
+      defaultPosition = [0, 0],
+      translateExtent,
+      nodeExtent,
+      arrowHeadColor = '#b1b1b7',
+      markerEndId,
+      zoomOnScroll = true,
+      zoomOnPinch = true,
+      panOnScroll = false,
+      panOnScrollSpeed = 0.5,
+      panOnScrollMode = PanOnScrollMode.Free,
+      zoomOnDoubleClick = true,
+      paneMoveable = true,
+      onPaneClick,
+      onPaneScroll,
+      onPaneContextMenu,
+      onEdgeUpdate,
+      onEdgeContextMenu,
+      onEdgeDoubleClick,
+      onEdgeMouseEnter,
+      onEdgeMouseMove,
+      onEdgeMouseLeave,
+      onEdgeUpdateStart,
+      onEdgeUpdateEnd,
+      edgeUpdaterRadius = 10,
+      nodeTypesId = '1',
+      edgeTypesId = '1',
+      ...rest
+    } = reactive(props);
     const store = configureStore(initialState)();
-    provide('store', store);
+    provide<RevueFlowStore>('store', store);
-    store.setElements(props.elements);
+    store.setElements(elements);
-    onUpdated(() => {
+
-      store.setElements(props.elements);
+    watchEffect(() => {
+      store.setElements(elements);
+      onSelectionChange?.(store.selectedElements);
     });
     onBeforeUnmount(() => {
       store.$reset();
       store.setElements([]);
     });
 
-    const nodeTypesParsed = computed(() => props.nodeTypes && createNodeTypes(props.nodeTypes));
+    const nodeTypesParsed = computed(() => nodeTypes && createNodeTypes(nodeTypes));
-    const edgeTypesParsed = computed(() => props.edgeTypes && createEdgeTypes(props.edgeTypes));
+    const edgeTypesParsed = computed(() => edgeTypes && createEdgeTypes(edgeTypes));
 
     return () => (
-      <div class="revue-flow">
+      <div {...rest} class="revue-flow">
         <GraphView
-          onLoad={props.onLoad}
+          onLoad={onLoad}
-          onMove={props.onMove}
+          onMove={onMove}
-          onMoveStart={props.onMoveStart}
+          onMoveStart={onMoveStart}
-          onMoveEnd={props.onMoveEnd}
+          onMoveEnd={onMoveEnd}
-          onElementClick={props.onElementClick}
+          onElementClick={onElementClick}
-          onNodeMouseEnter={props.onNodeMouseEnter}
+          onNodeMouseEnter={onNodeMouseEnter}
-          onNodeMouseMove={props.onNodeMouseMove}
+          onNodeMouseMove={onNodeMouseMove}
-          onNodeMouseLeave={props.onNodeMouseLeave}
+          onNodeMouseLeave={onNodeMouseLeave}
-          onNodeContextMenu={props.onNodeContextMenu}
+          onNodeContextMenu={onNodeContextMenu}
-          onNodeDoubleClick={props.onNodeDoubleClick}
+          onNodeDoubleClick={onNodeDoubleClick}
-          onNodeDragStart={props.onNodeDragStart}
+          onNodeDragStart={onNodeDragStart}
-          onNodeDrag={props.onNodeDrag}
+          onNodeDrag={onNodeDrag}
-          onNodeDragStop={props.onNodeDragStop}
+          onNodeDragStop={onNodeDragStop}
           nodeTypes={nodeTypesParsed.value}
           edgeTypes={edgeTypesParsed.value}
-          connectionMode={props.connectionMode}
+          connectionMode={connectionMode}
-          connectionLineType={props.connectionLineType}
+          connectionLineType={connectionLineType}
-          connectionLineStyle={props.connectionLineStyle}
+          connectionLineStyle={connectionLineStyle}
-          connectionLineComponent={props.connectionLineComponent}
+          connectionLineComponent={connectionLineComponent}
-          selectionKeyCode={props.selectionKeyCode}
+          selectionKeyCode={selectionKeyCode}
-          onElementsRemove={props.onElementsRemove}
+          onElementsRemove={onElementsRemove}
-          deleteKeyCode={props.deleteKeyCode}
+          deleteKeyCode={deleteKeyCode}
-          multiSelectionKeyCode={props.multiSelectionKeyCode}
+          multiSelectionKeyCode={multiSelectionKeyCode}
-          zoomActivationKeyCode={props.zoomActivationKeyCode}
+          zoomActivationKeyCode={zoomActivationKeyCode}
-          onConnect={props.onConnect}
+          onConnect={onConnect}
-          onConnectStart={props.onConnectStart}
+          onConnectStart={onConnectStart}
-          onConnectStop={props.onConnectStop}
+          onConnectStop={onConnectStop}
-          onConnectEnd={props.onConnectEnd}
+          onConnectEnd={onConnectEnd}
-          snapToGrid={props.snapToGrid}
+          snapToGrid={snapToGrid}
-          snapGrid={props.snapGrid}
+          snapGrid={snapGrid}
-          onlyRenderVisibleElements={props.onlyRenderVisibleElements}
+          onlyRenderVisibleElements={onlyRenderVisibleElements}
-          nodesDraggable={props.nodesDraggable}
+          nodesDraggable={nodesDraggable}
-          nodesConnectable={props.nodesConnectable}
+          nodesConnectable={nodesConnectable}
-          elementsSelectable={props.elementsSelectable}
+          elementsSelectable={elementsSelectable}
-          selectNodesOnDrag={props.selectNodesOnDrag}
+          selectNodesOnDrag={selectNodesOnDrag}
-          minZoom={props.minZoom}
+          minZoom={minZoom}
-          maxZoom={props.maxZoom}
+          maxZoom={maxZoom}
-          defaultZoom={props.defaultZoom}
+          defaultZoom={defaultZoom}
-          defaultPosition={props.defaultPosition}
+          defaultPosition={defaultPosition}
-          translateExtent={props.translateExtent}
+          translateExtent={translateExtent}
-          nodeExtent={props.nodeExtent}
+          nodeExtent={nodeExtent}
-          arrowHeadColor={props.arrowHeadColor}
+          arrowHeadColor={arrowHeadColor}
-          markerEndId={props.markerEndId}
+          markerEndId={markerEndId}
-          zoomOnScroll={props.zoomOnScroll}
+          zoomOnScroll={zoomOnScroll}
-          zoomOnPinch={props.zoomOnPinch}
+          zoomOnPinch={zoomOnPinch}
-          zoomOnDoubleClick={props.zoomOnDoubleClick}
+          zoomOnDoubleClick={zoomOnDoubleClick}
-          panOnScroll={props.panOnScroll}
+          panOnScroll={panOnScroll}
-          panOnScrollSpeed={props.panOnScrollSpeed}
+          panOnScrollSpeed={panOnScrollSpeed}
-          panOnScrollMode={props.panOnScrollMode}
+          panOnScrollMode={panOnScrollMode}
-          paneMoveable={props.paneMoveable}
+          paneMoveable={paneMoveable}
-          onPaneClick={props.onPaneClick}
+          onPaneClick={onPaneClick}
-          onPaneScroll={props.onPaneScroll}
+          onPaneScroll={onPaneScroll}
-          onPaneContextMenu={props.onPaneContextMenu}
+          onPaneContextMenu={onPaneContextMenu}
-          onSelectionContextMenu={props.onSelectionContextMenu}
+          onSelectionDragStart={onSelectionDragStart}
-          onEdgeUpdate={props.onEdgeUpdate}
+          onSelectionDrag={onSelectionDrag}
-          onEdgeContextMenu={props.onEdgeContextMenu}
+          onSelectionDragStop={onSelectionDragStop}
-          onEdgeDoubleClick={props.onEdgeDoubleClick}
+          onSelectionContextMenu={onSelectionContextMenu}
-          onEdgeMouseEnter={props.onEdgeMouseEnter}
+          onEdgeUpdate={onEdgeUpdate}
-          onEdgeMouseMove={props.onEdgeMouseMove}
+          onEdgeContextMenu={onEdgeContextMenu}
-          onEdgeMouseLeave={props.onEdgeMouseLeave}
+          onEdgeDoubleClick={onEdgeDoubleClick}
-          onEdgeUpdateStart={props.onEdgeUpdateStart}
+          onEdgeMouseEnter={onEdgeMouseEnter}
-          onEdgeUpdateEnd={props.onEdgeUpdateEnd}
+          onEdgeMouseMove={onEdgeMouseMove}
-          edgeUpdaterRadius={props.edgeUpdaterRadius}
+          onEdgeMouseLeave={onEdgeMouseLeave}
+          onEdgeUpdateStart={onEdgeUpdateStart}
+          onEdgeUpdateEnd={onEdgeUpdateEnd}
+          edgeUpdaterRadius={edgeUpdaterRadius}
         />
         {slots.default ? slots.default() : ''}
       </div>
     );
   }
 });
-
 export default RevueFlow;

src/store/configure-store.ts

@@ -206,11 +206,9 @@ export default function configureStore(
         this.userSelectionRect.draw = false;
 
         if (!selectedNodes || selectedNodes.length === 0) {
-          console.log('Foo');
           this.selectedElements = null;
           this.nodesSelectionActive = false;
         } else {
-          console.log('bar');
           this.selectedNodesBbox = getRectOfNodes(selectedNodes);
           this.nodesSelectionActive = true;
         }

src/utils/index.ts

@@ -1,7 +1,7 @@
 import { Dimensions, XYPosition, NodeExtent } from '../types';
 import { DraggableEvent } from '@braks/revue-draggable';
 
-export const isInputDOMNode = (e: MouseEvent | DraggableEvent | KeyboardEvent): boolean => {
+export const isInputDOMNode = (e: KeyboardEvent | DraggableEvent['event']): boolean => {
   const target = e.target as HTMLElement;
   return ['INPUT', 'SELECT', 'TEXTAREA', 'BUTTON'].includes(target.nodeName) || target.hasAttribute('contentEditable');
 };

yarn.lock

@@ -262,10 +262,10 @@
     "@babel/helper-validator-identifier" "^7.14.5"
     to-fast-properties "^2.0.0"
 
-"@braks/revue-draggable@^0.1.3":
+"@braks/revue-draggable@^0.1.10":
-  version "0.1.3"
+  version "0.1.10"
-  resolved "https://registry.yarnpkg.com/@braks/revue-draggable/-/revue-draggable-0.1.3.tgz#837a46bde7c87f8f6642ed4fb85697653ee6d068"
+  resolved "https://registry.yarnpkg.com/@braks/revue-draggable/-/revue-draggable-0.1.10.tgz#d6c7de3de44f1fbce09b37ba35a80100418850ba"
-  integrity sha512-9Ad35cUzkuaC7wTXSpJIYAH2kmgIh/VtL062MXTiFZ9OIZxAUMUfCnIgDTWY0sZNoxmO8CPD3XUP/YfbxoMESQ==
+  integrity sha512-m8cXb1NADAYQxhNUqfrzIhlvRPacaBEy/J8FVemkQCZLhzd5lHUMaTv+5hiYRgljXcoRLWO21HF4NtqWZ1kQuw==
   dependencies:
     vue-demi latest