fix: node selection rect not properly rendering on key press and mousemove

* issue came from some reactivity problems; a component shouldn't return null, else it'll basically do nothing ever again if it's not completely remounted
* some type fixes, removed some any's

src/container/FlowRenderer/index.tsx

@@ -27,57 +27,57 @@ const FlowRenderer = defineComponent({
     onPaneClick: {
       type: Function as unknown as PropType<FlowRendererProps['onPaneClick']>,
       required: false,
-      default: undefined as any
+      default: undefined
     },
     onPaneContextMenu: {
       type: Function as unknown as PropType<FlowRendererProps['onPaneContextMenu']>,
       required: false,
-      default: undefined as any
+      default: undefined
     },
     onPaneScroll: {
       type: Function as unknown as PropType<FlowRendererProps['onPaneScroll']>,
       required: false,
-      default: undefined as any
+      default: undefined
     },
     onElementsRemove: {
       type: Function as unknown as PropType<FlowRendererProps['onElementsRemove']>,
       required: false,
-      default: undefined as any
+      default: undefined
     },
     onMove: {
       type: Function as unknown as PropType<FlowRendererProps['onMove']>,
       required: false,
-      default: undefined as any
+      default: undefined
     },
     onMoveStart: {
       type: Function as unknown as PropType<FlowRendererProps['onMoveStart']>,
       required: false,
-      default: undefined as any
+      default: undefined
     },
     onMoveEnd: {
       type: Function as unknown as PropType<FlowRendererProps['onMoveEnd']>,
       required: false,
-      default: undefined as any
+      default: undefined
     },
     onSelectionDragStart: {
       type: Function as unknown as PropType<FlowRendererProps['onSelectionDragStart']>,
       required: false,
-      default: undefined as any
+      default: undefined
     },
     onSelectionDrag: {
       type: Function as unknown as PropType<FlowRendererProps['onSelectionDrag']>,
       required: false,
-      default: undefined as any
+      default: undefined
     },
     onSelectionDragStop: {
       type: Function as unknown as PropType<FlowRendererProps['onSelectionDragStop']>,
       required: false,
-      default: undefined as any
+      default: undefined
     },
     onSelectionContextMenu: {
       type: Function as unknown as PropType<FlowRendererProps['onSelectionContextMenu']>,
       required: false,
-      default: undefined as any
+      default: undefined
     },
     deleteKeyCode: {
       type: [Number, String] as PropType<FlowRendererProps['deleteKeyCode']>,
@@ -184,7 +184,7 @@ const FlowRenderer = defineComponent({
         onMove={props.onMove}
         onMoveStart={props.onMoveStart}
         onMoveEnd={props.onMoveEnd}
-        selectionKeyPressed={false}
+        selectionKeyPressed={keyPressed.value}
         elementsSelectable={props.elementsSelectable}
         zoomOnScroll={props.zoomOnScroll}
         zoomOnPinch={props.zoomOnPinch}
@@ -199,7 +199,7 @@ const FlowRenderer = defineComponent({
         zoomActivationKeyCode={props.zoomActivationKeyCode}
       >
         {slots.default ? slots.default() : ''}
-        {keyPressed.value ? <UserSelection selectionKeyPressed={keyPressed.value} /> : ''}
+        {keyPressed.value ? <UserSelection track-by={'selection'} /> : ''}
         {store?.nodesSelectionActive && (
           <NodesSelection
             onSelectionDragStart={props.onSelectionDragStart}

src/container/RevueFlow/index.tsx

@@ -485,12 +485,12 @@ const RevueFlow = defineComponent({
     onDrop: {
       type: Function as unknown as PropType<(e: DragEvent) => any>,
       required: false,
-      default: undefined as any
+      default: undefined
     },
     onDragover: {
       type: Function as unknown as PropType<(e: DragEvent) => any>,
       required: false,
-      default: undefined as any
+      default: undefined
     }
 
     /*  // focus events

src/container/ZoomPane/index.tsx

@@ -3,7 +3,7 @@ import { select, pointer } from 'd3-selection';
 
 import { clamp } from '../../utils';
 import { FlowTransform, TranslateExtent, PanOnScrollMode, KeyCode } from '../../types';
-import { defineComponent, onMounted, PropType, ref, watch } from 'vue';
+import { defineComponent, onMounted, PropType, ref, watch, watchEffect } from 'vue';
 import store from '../../store';
 import useKeyPress from '../../hooks/useKeyPress';
 import useResizeHandler from '../../hooks/useResizeHandler';
@@ -193,7 +193,7 @@ const ZoomPane = defineComponent({
       }
     });
 
-    onMounted(() => {
+    watchEffect(() => {
       if (pinia.d3Zoom) {
         if (props.selectionKeyPressed) {
           pinia.d3Zoom.on('zoom', null);
@@ -210,7 +210,7 @@ const ZoomPane = defineComponent({
       }
     });
 
-    onMounted(() => {
+    watchEffect(() => {
       if (pinia.d3Zoom) {
         if (props.onMoveStart) {
           pinia.d3Zoom.on('start', (event: any) => {
@@ -227,7 +227,7 @@ const ZoomPane = defineComponent({
       }
     });
 
-    onMounted(() => {
+    watchEffect(() => {
       if (pinia.d3Zoom) {
         if (props.onMoveEnd) {
           pinia.d3Zoom.on('end', (event: any) => {
@@ -244,7 +244,7 @@ const ZoomPane = defineComponent({
       }
     });
 
-    onMounted(() => {
+    watchEffect(() => {
       if (pinia.d3Zoom) {
         pinia.d3Zoom.filter((event: any) => {
           const zoomScroll = props.zoomOnScroll;