Also hide connections when hiding contents of container

raimohanska · Mar 16, 2024 · 401a7ea · 401a7ea
1 parent a07e1b5
commit 401a7ea
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 14 deletions.
diff --git a/common/src/board-reducer.ts b/common/src/board-reducer.ts
@@ -18,6 +18,7 @@ import {
     isBoardHistoryEntry,
     isContainedBy,
     isContainer,
+    isItem,
     isItemEndPoint,
     isTextItem,
     Item,
@@ -226,7 +227,7 @@ export function boardReducer(
             ]
         case "item.update": {
             const updatedConnections = updateConnections(board, event.connections || [])
-            const updatedItems = updateItems(board, event.items, inplace)
+            const updatedItems = updateItems(board, event.items, updatedConnections, inplace)
             return [
                 {
                     ...board,
@@ -384,7 +385,12 @@ function updateConnections(board: Board, updates: ConnectionUpdate[]): Connectio
     })
 }
 
-function updateItems(board: Board, updateList: ItemUpdate[], inplace: boolean): Record<Id, Item> {
+function updateItems(
+    board: Board,
+    updateList: ItemUpdate[],
+    updatedConnections: Connection[],
+    inplace: boolean,
+): Record<Id, Item> {
     updateList = filterItemUpdatesByPermissions(updateList, board)
     const updatedItems: Item[] = updateList.map((update) => ({ ...board.items[update.id], ...update } as Item))
 
@@ -427,11 +433,32 @@ function updateItems(board: Board, updateList: ItemUpdate[], inplace: boolean):
         })
     }
 
+    function adjustConnectionVisibility() {
+        updatedConnections.forEach((c, i) => {
+            let shouldHide: boolean
+            if (c.containerId) {
+                // When a connection has containerId, it should be hidden if the container is hidden (or has contentsHidden)
+                // A connection practically has containerId in case its endpoints are not attached to an item and it's contained by a container
+                const container = resultItems[c.containerId]
+                shouldHide = (container?.hidden || (isContainer(container) && container.contentsHidden)) ?? false
+            } else {
+                // In other cases, hide connections in case either end is connected to a hidden item
+                const from = resolveEndpoint(c.from, resultItems)
+                const to = resolveEndpoint(c.to, resultItems)
+                shouldHide = ((isItem(from) && from.hidden) || (isItem(to) && to.hidden)) ?? false
+            }
+            if (shouldHide !== c.hidden ?? false) {
+                updatedConnections[i] = { ...c, hidden: shouldHide }
+            }
+        })
+    }
+
     updateList.forEach((update) => {
         if ("contentsHidden" in update) {
             const container = board.items[update.id]
             if (container) {
                 setVisibilityRecursively(container, update.contentsHidden ?? false)
+                adjustConnectionVisibility()
             }
         }
     })

diff --git a/common/src/domain.ts b/common/src/domain.ts
@@ -173,6 +173,7 @@ export type Connection = {
     toStyle: ConnectionEndStyle
     pointStyle: "none" | "black-dot"
     action: "connect" | "line"
+    hidden?: boolean
 }
 export type ConnectionEndPoint = Point | ConnectionEndPointToItem
 export type ConnectionEndPointToItem = Id | ConectionEndPointDirectedToItem

diff --git a/frontend/src/board/ConnectionsView.tsx b/frontend/src/board/ConnectionsView.tsx
@@ -50,18 +50,20 @@ export const ConnectionsView = ({
         focus,
         L.view(zoom, "zoom"),
         ({ is, cs }, f, z) => {
-            return cs.map((c) => {
-                const fromItem: Point = resolveEndpoint(c.from, is)
-                const toItemOrPoint = resolveEndpoint(c.to, is)
-                const firstControlPoint = c.controlPoints[0] || fromItem
-                const lastControlPoint = c.controlPoints[c.controlPoints.length - 1] || toItemOrPoint
-                return {
-                    ...c,
-                    from: determineAttachmenLocation(c.from, firstControlPoint, is),
-                    to: determineAttachmenLocation(c.to, lastControlPoint, is),
-                    selected: getSelectedConnectionIds(f).has(c.id),
-                }
-            })
+            return cs
+                .filter((c) => !c.hidden)
+                .map((c) => {
+                    const fromItem: Point = resolveEndpoint(c.from, is)
+                    const toItemOrPoint = resolveEndpoint(c.to, is)
+                    const firstControlPoint = c.controlPoints[0] || fromItem
+                    const lastControlPoint = c.controlPoints[c.controlPoints.length - 1] || toItemOrPoint
+                    return {
+                        ...c,
+                        from: determineAttachmenLocation(c.from, firstControlPoint, is),
+                        to: determineAttachmenLocation(c.to, lastControlPoint, is),
+                        selected: getSelectedConnectionIds(f).has(c.id),
+                    }
+                })
         },
     )