feat: hints and shortcuts help around deep selection (#4502)

src/components/HelpDialog.tsx

@@ -260,6 +260,18 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
                   label={t("labels.multiSelect")}
                   shortcuts={[getShortcutKey(`Shift+${t("helpDialog.click")}`)]}
                 />
+                <Shortcut
+                  label={t("helpDialog.deepSelect")}
+                  shortcuts={[
+                    getShortcutKey(`CtrlOrCmd+${t("helpDialog.click")}`),
+                  ]}
+                />
+                <Shortcut
+                  label={t("helpDialog.deepBoxSelect")}
+                  shortcuts={[
+                    getShortcutKey(`CtrlOrCmd+${t("helpDialog.drag")}`),
+                  ]}
+                />
                 <Shortcut
                   label={t("labels.moveCanvas")}
                   shortcuts={[

src/components/HintViewer.tsx

@@ -61,6 +61,27 @@ const getHints = ({ appState, elements, isMobile }: HintViewerProps) => {
     return t("hints.rotate");
   }
 
+  if (selectedElements.length === 1 && isTextElement(selectedElements[0])) {
+    return t("hints.text_selected");
+  }
+
+  if (appState.editingElement && isTextElement(appState.editingElement)) {
+    return t("hints.text_editing");
+  }
+
+  if (elementType === "selection") {
+    if (
+      appState.draggingElement?.type === "selection" &&
+      !appState.editingElement &&
+      !appState.editingLinearElement
+    ) {
+      return t("hints.deepBoxSelect");
+    }
+    if (!selectedElements.length && !isMobile) {
+      return t("hints.canvasPanning");
+    }
+  }
+
   if (selectedElements.length === 1) {
     if (isLinearElement(selectedElements[0])) {
       if (appState.editingLinearElement) {
@@ -75,18 +96,6 @@ const getHints = ({ appState, elements, isMobile }: HintViewerProps) => {
     }
   }
 
-  if (selectedElements.length === 1 && isTextElement(selectedElements[0])) {
-    return t("hints.text_selected");
-  }
-
-  if (appState.editingElement && isTextElement(appState.editingElement)) {
-    return t("hints.text_editing");
-  }
-
-  if (elementType === "selection" && !selectedElements.length && !isMobile) {
-    return t("hints.canvasPanning");
-  }
-
   return null;
 };
 

src/locales/en.json

@@ -208,7 +208,8 @@
     "lineEditor_nothingSelected": "Select a point to edit (hold SHIFT to select multiple),\nor hold Alt and click to add new points",
     "placeImage": "Click to place the image, or click and drag to set its size manually",
     "publishLibrary": "Publish your own library",
-    "bindTextToElement": "Press enter to add text"
+    "bindTextToElement": "Press enter to add text",
+    "deepBoxSelect": "Hold CtrlOrCmd to deep select, and to prevent dragging"
   },
   "canvasError": {
     "cannotShowPreview": "Cannot show preview",
@@ -255,6 +256,8 @@
   "helpDialog": {
     "blog": "Read our blog",
     "click": "click",
+    "deepSelect": "Deep select",
+    "deepBoxSelect": "Deep select within box, and prevent dragging",
     "curvedArrow": "Curved arrow",
     "curvedLine": "Curved line",
     "documentation": "Documentation",