fix drag selection in editor

raheeliftikhar5 · raheeliftikhar5 · commit 0a147b4ffdaf · 2025-05-29T16:38:01.000+05:00
diff --git a/client/packages/lowcoder/src/comps/comps/gridLayoutComp/canvasView.tsx b/client/packages/lowcoder/src/comps/comps/gridLayoutComp/canvasView.tsx
@@ -98,6 +98,7 @@ export const CanvasView = React.memo((props: ContainerBaseProps) => {
   const isPreviewTheme = useContext(ThemeContext)?.themeId === 'preview-theme';
   const editorState = useContext(EditorContext);
   const [dragSelectedComps, setDragSelectedComp] = useState<Set<string>>(new Set());
+  const currentSelectionRef = useRef<Set<string>>(new Set());
   const scrollContainerRef = useRef<HTMLDivElement>(null);
   const mountedRef = useRef(true);
   const appSettings = editorState.getAppSettings();
@@ -108,9 +109,15 @@ export const CanvasView = React.memo((props: ContainerBaseProps) => {
     return () => {
       mountedRef.current = false;
       setDragSelectedComp(new Set());
+      currentSelectionRef.current = new Set();
     };
   }, []);
 
+  // Keep ref in sync with state
+  useEffect(() => {
+    currentSelectionRef.current = dragSelectedComps;
+  }, [dragSelectedComps]);
+
   // Memoized drag selection handler
   const handleDragSelection = useCallback((checkSelectFunc?: CheckSelectFn) => {
     if (!mountedRef.current) return new Set<string>();
@@ -135,6 +142,25 @@ export const CanvasView = React.memo((props: ContainerBaseProps) => {
     return selectedComps;
   }, [props.items, props.layout]);
 
+  const handleMouseMove = useCallback((checkSelectFunc: CheckSelectFn) => {
+    if (mountedRef.current) {
+      const selectedName = handleDragSelection(checkSelectFunc);
+      setDragSelectedComp(new Set(selectedName));
+    }
+  }, [handleDragSelection]);
+
+  const handleMouseUp = useCallback(() => {
+    if (mountedRef.current) {
+      const currentSelection = new Set(currentSelectionRef.current);
+      setDragSelectedComp(new Set());
+      editorState.setSelectedCompNames(currentSelection);
+    }
+  }, [editorState]);
+
+  const handleMouseDown = useCallback(() => {
+    setDragSelectedComp(new Set());
+  }, []);
+
   const maxWidth = useMemo(
     () => appSettings.maxWidth ?? maxWidthFromHook,
     [appSettings, maxWidthFromHook]
@@ -277,25 +303,6 @@ export const CanvasView = React.memo((props: ContainerBaseProps) => {
     rowHeight: parseInt(defaultRowHeight),
   }), [props.positionParams, defaultGrid, defaultRowHeight]);
 
-  // Memoized mouse event handlers
-  const handleMouseDown = useCallback(() => {
-    setDragSelectedComp(new Set());
-  }, []);
-
-  const handleMouseUp = useCallback(() => {
-    if (mountedRef.current) {
-      editorState.setSelectedCompNames(dragSelectedComps);
-      setDragSelectedComp(new Set());
-    }
-  }, [editorState, dragSelectedComps]);
-
-  const handleMouseMove = useCallback((checkSelectFunc: CheckSelectFn) => {
-    if (mountedRef.current) {
-      const selectedName = handleDragSelection(checkSelectFunc);
-      setDragSelectedComp(selectedName);
-    }
-  }, [handleDragSelection]);
-
   if (readOnly) {
     return (
       <UICompContainer
diff --git a/client/packages/lowcoder/src/comps/comps/gridLayoutComp/dragSelector.tsx b/client/packages/lowcoder/src/comps/comps/gridLayoutComp/dragSelector.tsx
@@ -1,5 +1,5 @@
 import { Layers } from "constants/Layers";
-import React, { ReactNode, useCallback, useRef, useState, useEffect } from "react";
+import React, { ReactNode, useCallback, useRef, useEffect } from "react";
 
 export type CheckSelectFn = (
   item?: HTMLDivElement | null,
@@ -41,7 +41,7 @@ const createInitialState = (): SectionState => ({
 
 export const DragSelector = React.memo((props: SectionProps) => {
   const selectAreaRef = useRef<HTMLDivElement>(null);
-  const [state, setState] = useState<SectionState>(createInitialState());
+  const stateRef = useRef<SectionState>(createInitialState());
   const mountedRef = useRef(true);
 
   // Cleanup on unmount
@@ -54,18 +54,62 @@ export const DragSelector = React.memo((props: SectionProps) => {
     };
   }, []);
 
+  const rectIntersect = useCallback((
+    selectionBox: Rect | undefined,
+    item: HTMLElement | null | undefined
+  ): boolean => {
+    if (!selectionBox || !item || !selectAreaRef.current) return false;
+
+    const containerRect = selectAreaRef.current.getBoundingClientRect();
+    const itemBox = {
+      top: item.getBoundingClientRect().top - containerRect.top,
+      left: item.getBoundingClientRect().left - containerRect.left,
+      width: item.getBoundingClientRect().width,
+      height: item.getBoundingClientRect().height,
+    };
+
+    return (
+      selectionBox.left <= itemBox.left + itemBox.width &&
+      selectionBox.left + selectionBox.width >= itemBox.left &&
+      selectionBox.top <= itemBox.top + itemBox.height &&
+      selectionBox.top + selectionBox.height >= itemBox.top
+    );
+  }, []);
+
+  const calculateSelectionBox = useCallback((startPoint: Point | undefined, endPoint: Point) => {
+    if (!stateRef.current.mouseDown || !startPoint || !endPoint) return undefined;
+
+    return {
+      left: Math.min(startPoint.x, endPoint.x),
+      top: Math.min(startPoint.y, endPoint.y),
+      width: Math.abs(startPoint.x - endPoint.x),
+      height: Math.abs(startPoint.y - endPoint.y),
+    };
+  }, []);
+
+  const childrenViewCheckFunc = useCallback((
+    item?: HTMLDivElement | null,
+    afterCheck?: (checkResult: boolean) => void
+  ) => {
+    const result = rectIntersect(stateRef.current.selectionBox, item);
+    if (afterCheck) {
+      afterCheck(result);
+    }
+    return result;
+  }, [rectIntersect]);
+
   const handleMouseMove = useCallback((e: MouseEvent) => {
-    if (!mountedRef.current || !state.mouseDown) return;
+    if (!mountedRef.current || !stateRef.current.mouseDown) return;
 
     const endPoint = {
       x: e.pageX - (selectAreaRef.current?.getBoundingClientRect().left ?? 0),
       y: e.pageY - (selectAreaRef.current?.getBoundingClientRect().top ?? 0),
     };
 
-    setState(prevState => ({
-      ...prevState,
-      selectionBox: calculateSelectionBox(prevState.startPoint, endPoint),
-    }));
+    stateRef.current = {
+      ...stateRef.current,
+      selectionBox: calculateSelectionBox(stateRef.current.startPoint, endPoint),
+    };
 
     // Clean up selection properly
     const selection = window.getSelection();
@@ -74,83 +118,37 @@ export const DragSelector = React.memo((props: SectionProps) => {
     }
 
     props.onMouseMove(childrenViewCheckFunc);
-  }, [state.mouseDown, state.startPoint, props.onMouseMove]);
+  }, [props.onMouseMove, calculateSelectionBox, childrenViewCheckFunc]);
 
   const handleMouseUp = useCallback(() => {
-    if (!mountedRef.current) return;
-
     window.document.removeEventListener("mousemove", handleMouseMove);
     window.document.removeEventListener("mouseup", handleMouseUp);
     props.onMouseUp();
-    setState(createInitialState());
+    stateRef.current = createInitialState();
   }, [handleMouseMove, props.onMouseUp]);
 
   const handleMouseDown = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
-    if (!mountedRef.current || e.button === 2 || e.nativeEvent.which === 2) return;
+    if (e.button === 2 || e.nativeEvent.which === 2) return;
 
     const startPoint = {
       x: e.pageX - (selectAreaRef.current?.getBoundingClientRect().left ?? 0),
       y: e.pageY - (selectAreaRef.current?.getBoundingClientRect().top ?? 0),
     };
 
-    setState({
+    stateRef.current = {
       mouseDown: true,
       startPoint,
       selectionBox: undefined,
       appendMode: false,
-    });
+    };
 
     window.document.addEventListener("mousemove", handleMouseMove);
     window.document.addEventListener("mouseup", handleMouseUp);
     props.onMouseDown();
   }, [handleMouseMove, handleMouseUp, props.onMouseDown]);
 
-  const rectIntersect = useCallback((
-    selectionBox: Rect | undefined,
-    item: HTMLElement | null | undefined
-  ): boolean => {
-    if (!selectionBox || !item || !selectAreaRef.current) return false;
-
-    const containerRect = selectAreaRef.current.getBoundingClientRect();
-    const itemBox = {
-      top: item.getBoundingClientRect().top - containerRect.top,
-      left: item.getBoundingClientRect().left - containerRect.left,
-      width: item.getBoundingClientRect().width,
-      height: item.getBoundingClientRect().height,
-    };
-
-    return (
-      selectionBox.left <= itemBox.left + itemBox.width &&
-      selectionBox.left + selectionBox.width >= itemBox.left &&
-      selectionBox.top <= itemBox.top + itemBox.height &&
-      selectionBox.top + selectionBox.height >= itemBox.top
-    );
-  }, []);
-
-  const childrenViewCheckFunc = useCallback((
-    item?: HTMLDivElement | null,
-    afterCheck?: (checkResult: boolean) => void
-  ) => {
-    const result = rectIntersect(state.selectionBox, item);
-    if (afterCheck) {
-      afterCheck(result);
-    }
-    return result;
-  }, [state.selectionBox, rectIntersect]);
-
-  const calculateSelectionBox = useCallback((startPoint: Point | undefined, endPoint: Point) => {
-    if (!state.mouseDown || !startPoint || !endPoint) return undefined;
-
-    return {
-      left: Math.min(startPoint.x, endPoint.x),
-      top: Math.min(startPoint.y, endPoint.y),
-      width: Math.abs(startPoint.x - endPoint.x),
-      height: Math.abs(startPoint.y - endPoint.y),
-    };
-  }, [state.mouseDown]);
-
   const renderSelectionBox = useCallback(() => {
-    if (!state.mouseDown || !state.startPoint || !state.selectionBox || !selectAreaRef.current) {
+    if (!stateRef.current.mouseDown || !stateRef.current.startPoint || !stateRef.current.selectionBox || !selectAreaRef.current) {
       return null;
     }
 
@@ -160,14 +158,14 @@ export const DragSelector = React.memo((props: SectionProps) => {
           background: "rgba(51, 119, 255, 0.1)",
           position: "absolute",
           zIndex: Layers.dragSelectBox,
-          left: state.selectionBox.left,
-          top: state.selectionBox.top,
-          height: state.selectionBox.height,
-          width: state.selectionBox.width,
+          left: stateRef.current.selectionBox.left,
+          top: stateRef.current.selectionBox.top,
+          height: stateRef.current.selectionBox.height,
+          width: stateRef.current.selectionBox.width,
         }}
       />
     );
-  }, [state.mouseDown, state.startPoint, state.selectionBox]);
+  }, []);
 
   return (
     <div
