Scene selection improvements (#642)

* Select subsequent scenes on card click

ui/v2.5/src/components/Scenes/SceneCard.tsx

@@ -10,6 +10,7 @@ import { TextUtils } from "src/utils";
 
 interface ISceneCardProps {
   scene: GQL.SlimSceneDataFragment;
+  selecting?: boolean;
   selected: boolean | undefined;
   zoomIndex: number;
   onSelectedChanged: (selected: boolean, shiftKey: boolean) => void;
@@ -221,11 +222,42 @@ export const SceneCard: React.FC<ISceneCardProps> = (
     }
     hoverHandler.onMouseEnter();
   }
+
   function onMouseLeave() {
     hoverHandler.onMouseLeave();
     setPreviewPath("");
   }
 
+  function handleSceneClick(
+    event: React.MouseEvent<HTMLAnchorElement, MouseEvent>
+  ) {
+    const { shiftKey } = event;
+
+    if (props.selecting) {
+      props.onSelectedChanged(!props.selected, shiftKey);
+      event.preventDefault();
+    }
+  }
+
+  function handleDrag(event: React.DragEvent<HTMLAnchorElement>) {
+    if (props.selecting) {
+      event.dataTransfer.setData("text/plain", "");
+      event.dataTransfer.setDragImage(new Image(), 0, 0);
+    }
+  }
+
+  function handleDragOver(event: React.DragEvent<HTMLAnchorElement>) {
+    const ev = event;
+    const shiftKey = false;
+
+    if (props.selecting && !props.selected) {
+      props.onSelectedChanged(true, shiftKey);
+    }
+
+    ev.dataTransfer.dropEffect = "move";
+    ev.preventDefault();
+  }
+
   function isPortrait() {
     const { file } = props.scene;
     const width = file.width ? file.width : 0;
@@ -253,7 +285,14 @@ export const SceneCard: React.FC<ISceneCardProps> = (
         }}
       />
 
-      <Link to={`/scenes/${props.scene.id}`} className="scene-card-link">
+      <Link
+        to={`/scenes/${props.scene.id}`}
+        className="scene-card-link"
+        onClick={handleSceneClick}
+        onDragStart={handleDrag}
+        onDragOver={handleDragOver}
+        draggable={props.selecting}
+      >
         {maybeRenderRatingBanner()}
         {maybeRenderSceneStudioOverlay()}
         {maybeRenderSceneSpecsOverlay()}