Cmd+Shift+Click to extend selection

webapp/src/components/boardComponent.tsx

@@ -490,14 +490,30 @@ class BoardComponent extends React.Component<Props, State> {
 
     private cardClicked(e: React.MouseEvent, card: Card): void {
         if (e.shiftKey) {
-            // Shift+Click = add to selection
             let selectedCards = this.state.selectedCards.slice()
-            if (selectedCards.includes(card)) {
+            if (selectedCards.length > 0 && (e.metaKey || e.ctrlKey)) {
-                selectedCards = selectedCards.filter((o) => o != card)
+                // Cmd+Shift+Click: Extend the selection
+                const {boardTree} = this.props
+                const orderedCards = boardTree.orderedCards()
+                const lastCard = selectedCards[selectedCards.length-1]
+                const srcIndex = orderedCards.indexOf(lastCard)
+                const destIndex = orderedCards.indexOf(card)
+                const newCards = (srcIndex < destIndex) ? orderedCards.slice(srcIndex, destIndex+1) : orderedCards.slice(destIndex, srcIndex+1)
+                for (const newCard of newCards) {
+                    if (!selectedCards.includes(newCard)) {
+                        selectedCards.push(newCard)
+                    }
+                }
+                this.setState({selectedCards})
             } else {
-                selectedCards.push(card)
+                // Shift+Click: add to selection
+                if (selectedCards.includes(card)) {
+                    selectedCards = selectedCards.filter((o) => o != card)
+                } else {
+                    selectedCards.push(card)
+                }
+                this.setState({selectedCards})
             }
-            this.setState({selectedCards})
         } else {
             this.setState({selectedCards: [], shownCard: card})
         }
@@ -564,7 +580,7 @@ class BoardComponent extends React.Component<Props, State> {
             return
         }
 
-        const cardOrder = boardTree.currentCardOrder()
+        const cardOrder = boardTree.orderedCards().map((o) => o.id)
         for (const draggedCard of draggedCards) {
             if (draggedCard.id === card.id) {
                 continue

webapp/src/components/viewHeader.tsx

@@ -244,7 +244,7 @@ class ViewHeader extends React.Component<Props, State> {
                                         // This sets the manual card order to the currently displayed order
                                         // Note: Perform this as a single update to change both properties correctly
                                         const newView = new MutableBoardView(activeView)
-                                        newView.cardOrder = boardTree.currentCardOrder()
+                                        newView.cardOrder = boardTree.orderedCards().map((o) => o.id)
                                         newView.sortOptions = []
                                         mutator.updateBlock(newView, activeView, 'reorder')
                                     }}

webapp/src/viewModel/boardTree.ts

@@ -27,7 +27,7 @@ interface BoardTree {
     readonly groupByProperty?: IPropertyTemplate
 
     getSearchText(): string | undefined
-    currentCardOrder(): string[]
+    orderedCards(): Card[]
 }
 
 class MutableBoardTree implements BoardTree {
@@ -378,16 +378,16 @@ class MutableBoardTree implements BoardTree {
         return sortedCards
     }
 
-    currentCardOrder(): string[] {
+    orderedCards(): Card[] {
-        const cardOrder: string[] = []
+        const cards: Card[] = []
         for (const group of this.visibleGroups) {
-            cardOrder.push(...group.cards.map((o) => o.id))
+            cards.push(...group.cards)
         }
         for (const group of this.hiddenGroups) {
-            cardOrder.push(...group.cards.map((o) => o.id))
+            cards.push(...group.cards)
         }
 
-        return cardOrder
+        return cards
     }
 }