Fix filmstrip additive multi-range selection

Author: savukadoo

src/App.tsx

@@ -292,6 +292,7 @@ function App() {
     selectedImagePathRef.current = selectedImage?.path ?? null;
   }, [selectedImage?.path]);
   const [multiSelectedPaths, setMultiSelectedPaths] = useState<Array<string>>([]);
+  const [selectionAnchorPath, setSelectionAnchorPath] = useState<string | null>(null);
   const [libraryActivePath, setLibraryActivePath] = useState<string | null>(null);
   const [libraryActiveAdjustments, setLibraryActiveAdjustments] = useState<Adjustments>(INITIAL_ADJUSTMENTS);
   const [finalPreviewUrl, setFinalPreviewUrl] = useState<string | null>(null);
@@ -3820,17 +3821,18 @@ function App() {
     const { shiftAnchor, onSimpleClick, updateLibraryActivePath } = options;
 
     if (shiftKey && shiftAnchor) {
-      const lastIndex = sortedImageList.findIndex((f) => f.path === shiftAnchor);
+      const anchorIndex = sortedImageList.findIndex((f) => f.path === shiftAnchor);
       const currentIndex = sortedImageList.findIndex((f) => f.path === path);
 
-      if (lastIndex !== -1 && currentIndex !== -1) {
-        const start = Math.min(lastIndex, currentIndex);
-        const end = Math.max(lastIndex, currentIndex);
+      if (anchorIndex !== -1 && currentIndex !== -1) {
+        const start = Math.min(anchorIndex, currentIndex);
+        const end = Math.max(anchorIndex, currentIndex);
         const range = sortedImageList.slice(start, end + 1).map((f: ImageFile) => f.path);
-        const baseSelection = isCtrlPressed ? multiSelectedPaths : [shiftAnchor];
+        const baseSelection = isCtrlPressed ? multiSelectedPaths : [];
         const newSelection = Array.from(new Set([...baseSelection, ...range]));
 
         setMultiSelectedPaths(newSelection);
+        setSelectionAnchorPath(path);
         if (updateLibraryActivePath) {
           setLibraryActivePath(path);
         }
@@ -3845,6 +3847,7 @@ function App() {
 
       const newSelectionArray = Array.from(newSelection);
       setMultiSelectedPaths(newSelectionArray);
+      setSelectionAnchorPath(path);
 
       if (updateLibraryActivePath) {
         if (newSelectionArray.includes(path)) {
@@ -3857,26 +3860,31 @@ function App() {
       }
     } else {
       onSimpleClick(path);
+    setSelectionAnchorPath(path);
     }
   };
 
   const handleLibraryImageSingleClick = (path: string, event: any) => {
     handleMultiSelectClick(path, event, {
-      shiftAnchor: libraryActivePath,
+      shiftAnchor: selectionAnchorPath ?? libraryActivePath,
       updateLibraryActivePath: true,
       onSimpleClick: (p: any) => {
         setMultiSelectedPaths([p]);
         setLibraryActivePath(p);
+      setSelectionAnchorPath(p);
       },
     });
   };
 
   const handleImageClick = (path: string, event: any) => {
     const inEditor = !!selectedImage;
     handleMultiSelectClick(path, event, {
-      shiftAnchor: inEditor ? selectedImage.path : libraryActivePath,
+      shiftAnchor: selectionAnchorPath ?? (inEditor ? selectedImage.path : libraryActivePath),
       updateLibraryActivePath: !inEditor,
-      onSimpleClick: handleImageSelect,
+      onSimpleClick: (p: string) => {
+        handleImageSelect(p);
+        setSelectionAnchorPath(p);
+      },
     });
   };