Add keyboard shortcut for hiding area contents

README.md

@@ -59,6 +59,7 @@ N                   Create new note
 T                   Create new text box
 C                   Select the Connect tool
 Esc                 Select the default tool
+H                   Hide contents of an area
 Command-A           Select all items
 Command-V           Paste
 Command-C           Copy

frontend/src/board/BoardView.tsx

@@ -59,6 +59,7 @@ import { VideoView } from "./VideoView"
 import { startConnecting } from "./item-connect"
 import { emptySet } from "../../../common/src/sets"
 import { installZoomKeyboardShortcuts } from "./zoom-shortcuts"
+import { itemHideContentsHandler } from "./item-hide-contents"
 
 const emptyNote = newNote("")
 
@@ -167,6 +168,7 @@ export const BoardView = ({
     itemCreateHandler(board, focus, latestNote, boardElement, onAdd)
     itemDeleteHandler(boardId, dispatch, focus)
     itemDuplicateHandler(board, boardStore.crdtStore, dispatch, focus)
+    itemHideContentsHandler(board, focus, dispatch)
     itemMoveWithArrowKeysHandler(board, dispatch, focus)
     itemUndoHandler(dispatch)
     itemSelectAllHandler(board, focus)

frontend/src/board/contextmenu/hideContents.tsx

@@ -1,10 +1,10 @@
 import { h } from "harmaja"
 import * as L from "lonna"
-import { Board, Container, isContainer, Item } from "../../../../common/src/domain"
+import { isContainer } from "../../../../common/src/domain"
+import { VisibilityIcon, VisibilityOffIcon } from "../../components/Icons"
 import { canChangeVisibility } from "../board-permissions"
+import { hasContentHidden, toggleContentsHidden } from "../item-hide-contents"
 import { SubmenuProps } from "./ContextMenuView"
-import { getIfSame } from "./textAlignments"
-import { VisibilityIcon, VisibilityOffIcon } from "../../components/Icons"
 
 export function hideContentsMenu({ board, focusedItems, dispatch }: SubmenuProps) {
     const containers = L.view(focusedItems, (items) => items.items.filter(isContainer))
@@ -16,26 +16,17 @@ export function hideContentsMenu({ board, focusedItems, dispatch }: SubmenuProps
     const enabled = L.view(containersOrContained, (items) => items.some(canChangeVisibility))
 
     const className = enabled.pipe(L.map((e) => (e ? "icon" : "icon disabled")))
-    const currentlyHidden = L.view(containers, (items) => {
-        return getIfSame(items, (item) => item.contentsHidden ?? false, false)
-    })
+    const currentlyHidden = L.view(containers, hasContentHidden)
 
-    return L.view(hasContainers, currentlyHidden, (all, hidden) => {
-        return !all
+    return L.view(hasContainers, currentlyHidden, (hasContainers, hidden) => {
+        return !hasContainers
             ? []
             : [
                   <div className="icon-group visibility">
                       <span
                           className={className}
                           onClick={() => {
-                              dispatch({
-                                  action: "item.update",
-                                  boardId: board.get().id,
-                                  items: findContainers(focusedItems.get().items, board.get()).map((c) => ({
-                                      id: c.id,
-                                      contentsHidden: !hidden,
-                                  })),
-                              })
+                              toggleContentsHidden(focusedItems.get().items, board.get(), dispatch)
                           }}
                           title={hidden ? "Show contents" : "Hide contents"}
                       >
@@ -45,12 +36,3 @@ export function hideContentsMenu({ board, focusedItems, dispatch }: SubmenuProps
               ]
     })
 }
-
-function findContainers(items: Item[], board: Board): Item[] {
-    const containers = items.filter(isContainer)
-    const leftOverItems = items.filter((i) => !isContainer(i) && !containers.some((c) => c.id === i.containerId))
-    const containersForLeftOverItems = leftOverItems
-        .map((i) => board.items[i.containerId ?? ""])
-        .filter((i) => i && !containers.some((c) => c.id === i.id))
-    return [...containers, ...containersForLeftOverItems]
-}

frontend/src/board/item-hide-contents.ts

@@ -0,0 +1,38 @@
+import { Board, isContainer, Item, Note } from "../../../common/src/domain"
+import { Dispatch } from "../store/board-store"
+import { BoardFocus, getSelectedItems } from "./board-focus"
+import { getIfSame } from "./contextmenu/textAlignments"
+import * as L from "lonna"
+import { installKeyboardShortcut, plainKey } from "./keyboard-shortcuts"
+
+export function itemHideContentsHandler(board: L.Property<Board>, focus: L.Property<BoardFocus>, dispatch: Dispatch) {
+    installKeyboardShortcut(plainKey("h"), () =>
+        toggleContentsHidden(getSelectedItems(board.get())(focus.get()), board.get(), dispatch),
+    )
+}
+
+export function hasContentHidden(items: Item[]) {
+    return getIfSame(items, (item) => (isContainer(item) && item.contentsHidden) ?? false, false)
+}
+
+export function toggleContentsHidden(items: Item[], board: Board, dispatch: Dispatch) {
+    const hidden = hasContentHidden(items)
+
+    dispatch({
+        action: "item.update",
+        boardId: board.id,
+        items: findContainers(items, board).map((c) => ({
+            id: c.id,
+            contentsHidden: !hidden,
+        })),
+    })
+}
+
+function findContainers(items: Item[], board: Board): Item[] {
+    const containers = items.filter(isContainer)
+    const leftOverItems = items.filter((i) => !isContainer(i) && !containers.some((c) => c.id === i.containerId))
+    const containersForLeftOverItems = leftOverItems
+        .map((i) => board.items[i.containerId ?? ""])
+        .filter((i) => i && !containers.some((c) => c.id === i.id))
+    return [...containers, ...containersForLeftOverItems]
+}