fix: start box selection when the area exceeds 1 (#6)

README.md

@@ -76,7 +76,7 @@ pnpm i react-selectable-box
 
 #### 📝 License
 
-Copyright © 2020 - present [Arvin Xu][profile-url]. <br />
+Copyright © 2023 - present [linxianxi][profile-url]. <br />
 This project is [MIT](./LICENSE) licensed.
 
 <!-- LINK GROUP -->

docs/examples/click-to-select.tsx

@@ -36,6 +36,9 @@ export default () => {
   return (
     <Selectable
       value={value}
+      onStart={() => {
+        console.log('start');
+      }}
       onEnd={(selectingValue, { added, removed }) => {
         const result = value.concat(added).filter((i) => !removed.includes(i));
         setValue(result);

docs/examples/reset-at-start.tsx

@@ -0,0 +1,60 @@
+import React, { useState } from 'react';
+import Selectable, { useSelectable } from 'react-selectable-box';
+
+const list: string[] = [];
+for (let i = 0; i < 200; i++) {
+  list.push(String(i));
+}
+
+const Item = ({ value }: { value: string }) => {
+  const { setNodeRef, isSelected, isAdding, isRemoving } = useSelectable({
+    value,
+  });
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: 50,
+        height: 50,
+        border: isAdding ? '1px solid #1677ff' : undefined,
+        background: isRemoving ? 'red' : isSelected ? '#1677ff' : '#ccc',
+      }}
+    >
+      {value}
+    </div>
+  );
+};
+
+export default () => {
+  const [value, setValue] = useState<React.Key[]>([]);
+
+  return (
+    <Selectable
+      value={value}
+      onStart={() => {
+        setValue([]);
+      }}
+      onEnd={(newValue) => {
+        setValue(newValue);
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          flexWrap: 'wrap',
+          gap: 20,
+          padding: 20,
+          border: '1px solid #ccc',
+        }}
+      >
+        {list.map((i) => (
+          <Item key={i} value={i} />
+        ))}
+      </div>
+    </Selectable>
+  );
+};

docs/guides/click-to-select.md

@@ -3,7 +3,7 @@ title: click to select
 group:
   title: examples
   order: 1
-order: 4
+order: 5
 ---
 
 ### click to select

docs/guides/reset-at-end.md

@@ -3,7 +3,7 @@ title: reset at end
 group:
   title: examples
   order: 1
-order: 1
+order: 2
 ---
 
 ### reset at end

docs/guides/reset-at-start.md

@@ -0,0 +1,11 @@
+---
+title: reset at start
+group:
+  title: examples
+  order: 1
+order: 1
+---
+
+### reset at start
+
+<code src="../examples/reset-at-start.tsx"></code>

docs/guides/scroll-container.md

@@ -1,9 +1,9 @@
 ---
-title: scrollContainer
+title: scroll-container
 group:
   title: examples
   order: 1
-order: 2
+order: 3
 ---
 
 ### scrollContainer

docs/guides/shift-remove.md

@@ -3,7 +3,7 @@ title: hold shift to remove
 group:
   title: examples
   order: 1
-order: 3
+order: 4
 ---
 
 ### hold shift to remove

docs/guides/virtual-list.md

@@ -3,7 +3,7 @@ title: virtual-list
 group:
   title: examples
   order: 1
-order: 5
+order: 6
 ---
 
 ### virtual list

src/Selectable.tsx

@@ -52,6 +52,13 @@ const Selectable = forwardRef<SelectableRef, SelectableProps>(
     ref,
   ) => {
     const [isDragging, setIsDragging] = useState(false);
+    const [startCoords, setStartCoords] = useState({ x: 0, y: 0 });
+    const [moveCoords, setMoveCoords] = useState({ x: 0, y: 0 });
+    const isStart = useRef(false);
+    const selectingValue = useRef([]);
+    const [startTarget, setStartTarget] = useState<HTMLElement | null>(null);
+    const startInside = useRef(false);
+    const moveClient = useRef({ x: 0, y: 0 });
     const [value, setValue] = useMergedState(defaultValue || [], {
       value: propsValue,
       onChange: (newValue) => {
@@ -74,17 +81,18 @@ const Selectable = forwardRef<SelectableRef, SelectableProps>(
         }
       },
     });
-    const [startCoords, setStartCoords] = useState({ x: 0, y: 0 });
-    const [moveCoords, setMoveCoords] = useState({ x: 0, y: 0 });
-    const isStart = useRef(false);
-    const selectingValue = useRef([]);
-    const [startTarget, setStartTarget] = useState<HTMLElement | null>(null);
-    const startInside = useRef(false);
-    const moveClient = useRef({ x: 0, y: 0 });
 
+    const startCoordsRef = useRef(startCoords);
+    startCoordsRef.current = startCoords;
     const isDraggingRef = useRef(isDragging);
     isDraggingRef.current = isDragging;
 
+    const top = Math.min(startCoords.y, moveCoords.y);
+    const left = Math.min(startCoords.x, moveCoords.x);
+    const width = isDragging ? Math.abs(startCoords.x - moveCoords.x) : 0;
+    const height = isDragging ? Math.abs(startCoords.y - moveCoords.y) : 0;
+    const boxRect = { top, left, width, height };
+
     const checkScroll = () => {
       if (isDraggingRef.current) {
         const scrollContainer = getContainer();
@@ -122,17 +130,23 @@ const Selectable = forwardRef<SelectableRef, SelectableProps>(
       const onMouseMove = (e: MouseEvent) => {
         const shouldContinue = selectFromInside ? true : !startInside.current;
         if (isStart.current && shouldContinue) {
-          handleStart();
           const { clientX, clientY } = e;
           moveClient.current = { x: clientX, y: clientY };
-          setIsDragging(true);
           const { left, top } = container.getBoundingClientRect();
           const x = clientX - left + container.scrollLeft;
           const y = clientY - top + container.scrollTop;
           setMoveCoords({
             x: Math.min(x, container.scrollWidth),
             y: Math.min(y, container.scrollHeight),
           });
+          const width = Math.abs(startCoordsRef.current.x - x);
+          const height = Math.abs(startCoordsRef.current.y - y);
+          // prevent trigger when click too fast
+          // https://github.com/linxianxi/react-selectable-box/issues/5
+          if (width * height > 1) {
+            setIsDragging(true);
+            handleStart();
+          }
         } else {
           setStartTarget(null);
         }
@@ -184,11 +198,6 @@ const Selectable = forwardRef<SelectableRef, SelectableProps>(
     }, [disabled, selectFromInside]);
 
     const container = getContainer();
-    const top = Math.min(startCoords.y, moveCoords.y);
-    const left = Math.min(startCoords.x, moveCoords.x);
-    const width = isDragging ? Math.abs(startCoords.x - moveCoords.x) : 0;
-    const height = isDragging ? Math.abs(startCoords.y - moveCoords.y) : 0;
-    const boxRect = { top, left, width, height };
 
     const contextValue = useMemo(
       () => ({