Merge branch 'main' into feat/multiselect

src/store/index.ts

@@ -1,6 +1,6 @@
 import { createStore, Action, action, Thunk, thunk, computed, Computed } from 'easy-peasy';
 import isEqual from 'fast-deep-equal';
-import { Selection as D3Selection, ZoomBehavior } from 'd3';
+import { Selection as D3Selection, ZoomBehavior, ValueFn } from 'd3';
 import { zoom, zoomIdentity } from 'd3-zoom';
 import { select } from 'd3-selection';
 
@@ -61,6 +61,7 @@ export interface StoreModel {
 
   d3Zoom: ZoomBehavior<Element, unknown> | null;
   d3Selection: D3Selection<Element, unknown, null, undefined> | null;
+  d3ZoomHandler: ValueFn<Element, unknown, void> | undefined;
   d3Initialised: boolean;
   minZoom: number;
   maxZoom: number;
@@ -72,6 +73,7 @@ export interface StoreModel {
   userSelectionRect: SelectionRect;
 
   connectionNodeId: ElementId | null;
+  connectionHandleId: ElementId | null;
   connectionHandleType: HandleType | null;
   connectionPosition: XYPosition;
 
@@ -163,6 +165,7 @@ export const storeModel: StoreModel = {
   d3Zoom: null,
   d3Selection: null,
   d3Initialised: false,
+  d3ZoomHandler: () => {},
   minZoom: 0.5,
   maxZoom: 2,
   translateExtent: [
@@ -183,6 +186,7 @@ export const storeModel: StoreModel = {
     draw: false,
   },
   connectionNodeId: null,
+  connectionHandleId: null,
   connectionHandleType: 'source',
   connectionPosition: { x: 0, y: 0 },
 
@@ -314,9 +318,9 @@ export const storeModel: StoreModel = {
   }),
 
   unsetUserSelection: action((state) => {
-    const selectedNodes = state.selectedElements?.filter(isNode);
+    const selectedNodes = state.selectedElements?.filter((node) => isNode(node) && node.__rf) as Node[];
 
-    if (!selectedNodes) {
+    if (!selectedNodes || selectedNodes.length === 0) {
       state.selectionActive = false;
       state.userSelectionRect.draw = false;
       state.nodesSelectionActive = false;
@@ -405,11 +409,14 @@ export const storeModel: StoreModel = {
     const updatedTransform = zoomIdentity.translate(clampedX, clampedY).scale(clampedZoom);
     selection.property('__zoom', updatedTransform);
 
+    const defaultHandler = selection.on('wheel.zoom');
+
     state.transform[0] = clampedX;
     state.transform[1] = clampedY;
     state.transform[2] = clampedZoom;
     state.d3Zoom = d3ZoomInstance;
     state.d3Selection = selection;
+    state.d3ZoomHandler = defaultHandler;
     state.d3Initialised = true;
   }),
 
@@ -441,8 +448,9 @@ export const storeModel: StoreModel = {
     state.connectionPosition = position;
   }),
 
-  setConnectionNodeId: action((state, { connectionNodeId, connectionHandleType }) => {
+  setConnectionNodeId: action((state, { connectionNodeId, connectionHandleId, connectionHandleType }) => {
     state.connectionNodeId = connectionNodeId;
+    state.connectionHandleId = connectionHandleId;
     state.connectionHandleType = connectionHandleType;
   }),
 
@@ -540,7 +548,7 @@ export const storeModel: StoreModel = {
   })
 };
 
-const nodeEnv: string = process.env.NODE_ENV as string;
+const nodeEnv: string = (typeof __ENV__ !== 'undefined' && __ENV__) as string;
 const store = createStore(storeModel, { devTools: nodeEnv === 'development' });
 
 export default store;