From e793fe5c051650e1cf454a1f8b3e1d517d6ae8a6 Mon Sep 17 00:00:00 2001
From: Quang Tran <16215255+trmquang93@users.noreply.github.com>
Date: Mon, 13 Apr 2026 21:30:15 +0700
Subject: [PATCH] feat: support shift/meta multi-select and multi-drag on
 screen image area

---
 src/components/ScreenNode.jsx | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/components/ScreenNode.jsx b/src/components/ScreenNode.jsx
index 94866aa..2de3ef3 100644
--- a/src/components/ScreenNode.jsx
+++ b/src/components/ScreenNode.jsx
@@ -363,7 +363,7 @@ export function ScreenNode({
       {/* Image */}
       <div
         className="screen-image-area"
-        style={{ position: "relative", minHeight: DEFAULT_IMAGE_HEIGHT, background: COLORS.imageAreaBg }}
+        style={{ position: "relative", minHeight: DEFAULT_IMAGE_HEIGHT, background: COLORS.imageAreaBg, cursor: "default" }}
         onMouseDown={(e) => {
           if (isSpaceHeld?.current) return;
           if (e.target.closest(".hotspot-area") || e.target.closest(".hotspot-drag-handle") || e.target.closest(".resize-handle") || e.target.closest(".comment-pin")) return;
@@ -375,6 +375,18 @@ export function ScreenNode({
             onCommentImageClick(e, screen.id, xPct, yPct);
             return;
           }
+          if (!isReadOnly) {
+            if (e.shiftKey || e.metaKey) {
+              e.stopPropagation();
+              onToggleSelect?.("screen", screen.id);
+              return;
+            }
+            if (isMultiSelected) {
+              onMultiDragStart?.(e);
+              return;
+            }
+          }
+          onSelect(screen.id);
           if (screen.imageData && onImageAreaMouseDown) {
             onImageAreaMouseDown(e, screen.id);
           }