fix: multiple selection fix

Author: zhangmo8

src/decoration/FileNodeDecoration.ts

@@ -17,7 +17,11 @@ export class FileNodeDecorationProvider implements FileDecorationProvider {
     try {
       const params = new URLSearchParams(decodeURIComponent(uri.query))
       const status = params.get('status')
+      const type = params.get('type')
 
+      if (type === 'folder') {
+        return undefined
+      }
       if (!status) {
         logger.warn('No status in URI:', uri.toString())
         return undefined

src/storage.ts

@@ -19,7 +19,7 @@ export const useStorage = createSingletonComposable(() => {
   }
 
   function getCommits(): CommitGraph {
-    return extensionContext.value?.globalState.get<CommitGraph>(COMMITS_KEY) || ({
+    return (extensionContext.value?.globalState.get<CommitGraph>(COMMITS_KEY)) || ({
       operations: [],
       branches: [],
       logResult: {
@@ -31,6 +31,7 @@ export const useStorage = createSingletonComposable(() => {
 
   function getCommit(hash: string): Commit | undefined {
     const { logResult: { all: commits } } = getCommits()
+
     if (!commits)
       return
     return commits.find(commit => commit.hash === hash)

src/views/diff/DiffTreeView.ts

@@ -24,11 +24,11 @@ export const useDiffTreeView = createSingletonComposable(() => {
       if (hashes.length === 0) {
         commitDetailsList.value = []
         files.value = []
-        return
+        return null
       }
 
       const commitList: CommitDetails[] = []
-      const allCommitFiles: Map<string, TreeViewNode[]> = new Map()
+      const allCommitFiles: Map<string, { files: TreeViewNode[], total: number }> = new Map()
       let totalFiles = 0
 
       for (const hash of hashes) {
@@ -51,15 +51,13 @@ export const useDiffTreeView = createSingletonComposable(() => {
 
         const { files: commitFiles, total } = await fileTree.getChildren(hash)
 
-        allCommitFiles.set(hash, commitFiles)
+        allCommitFiles.set(hash, { files: commitFiles, total })
         totalFiles += total
       }
 
       commitDetailsList.value = commitList
 
-      // Aggregate file changes for all selected commits
       if (hashes.length === 1) {
-        // Single commit view - show files directly
         files.value = [
           {
             treeItem: new CommitNode(
@@ -68,7 +66,7 @@ export const useDiffTreeView = createSingletonComposable(() => {
               TreeItemCollapsibleState.Expanded,
               'files',
             ),
-            children: allCommitFiles.get(hashes[0]) || [],
+            children: allCommitFiles.get(hashes[0])?.files || [],
           },
         ]
       }
@@ -81,12 +79,12 @@ export const useDiffTreeView = createSingletonComposable(() => {
           if (!commit)
             continue
 
-          const commitFiles = allCommitFiles.get(hash) || []
+          const { files: commitFiles, total } = allCommitFiles.get(hash) || { files: [], total: 0 }
           const shortHash = hash.substring(0, 7)
 
           commitNodes.push({
             treeItem: new CommitNode(
-              `${commitFiles.length} Files Changed`,
+              `${total} Files Changed`,
               `${shortHash}`,
               TreeItemCollapsibleState.Expanded,
               'git-commit',
@@ -98,8 +96,8 @@ export const useDiffTreeView = createSingletonComposable(() => {
         files.value = [
           {
             treeItem: new CommitNode(
-              'Selected Commits',
-              `${hashes.length} Commits Selected`,
+              'Multiple Commits Selected',
+              `${commitDetailsList.value.length} commits`,
               TreeItemCollapsibleState.Expanded,
               'git-commit',
             ),
@@ -151,16 +149,7 @@ export const useDiffTreeView = createSingletonComposable(() => {
       ]
     }
     else {
-      // Multiple commits view - summary information
       return [
-        {
-          treeItem: new CommitNode(
-            'Multiple Commits Selected',
-            `${commitDetailsList.value.length} commits`,
-            TreeItemCollapsibleState.None,
-            'git-commit',
-          ),
-        },
         ...files.value,
       ]
     }
@@ -174,7 +163,7 @@ export const useDiffTreeView = createSingletonComposable(() => {
     },
   )
 
-  async function refresh(hashes: string[]) {
+  async function refresh(hashes: string[] = []) {
     const currentHashes = new Set(selectedCommitHashes.value)
     const newHashes = new Set(hashes)
 
@@ -187,9 +176,16 @@ export const useDiffTreeView = createSingletonComposable(() => {
     await loadCommitDetails(hashes)
   }
 
+  function clearSelection() {
+    selectedCommitHashes.value = []
+    commitDetailsList.value = []
+    refresh()
+  }
+
   return {
     tree,
-    refresh,
     selectedCommitHashes,
+    refresh,
+    clearSelection,
   }
 })

src/views/history/App.vue

@@ -28,6 +28,8 @@ const error = ref<string>('')
 const vscode = acquireVsCodeApi<State>()
 window.vscode = vscode
 
+const selectedCommitHashes = ref<string[]>([])
+
 // Handle messages from extension
 window.addEventListener('message', (event: { data: any }) => {
   const message = event.data
@@ -36,6 +38,9 @@ window.addEventListener('message', (event: { data: any }) => {
     case CHANNEL.HISTORY:
       commits.value = message.commits as CommitGraph
       break
+    case CHANNEL.CLEAR_SELECTED:
+      selectedCommitHashes.value = []
+      break
     case 'error':
       error.value = message.message
       break
@@ -57,7 +62,7 @@ const transformedCommits = computed(() => {
       <input v-model="filter" type="text" placeholder="Search commits..." class="search-input">
     </div> -->
 
-    <CommitTable :commits="transformedCommits" :graph-data="commits?.operations || []" class="git-graph-container" />
+    <CommitTable v-model="selectedCommitHashes" :commits="transformedCommits" :graph-data="commits?.operations || []" class="git-graph-container" />
 
     <div v-if="error" class="error">
       {{ error }}

src/views/history/components/CommitTable/index.vue

@@ -14,10 +14,11 @@ const props = defineProps<{
 }>()
 
 // Selected commit hash state
-const selectedCommitHashes = ref<string[]>([])
+const selectedCommitHashes = defineModel<string[]>({ default: [] })
+
 const isDragging = ref(false)
-const dragStartIndex = ref<number | null>(null)
-const dragEndIndex = ref<number | null>(null)
+const selectionStart = ref<number | null>(null)
+const dragEndIndex = ref<number>(0)
 
 const ITEMS_PER_PAGE = 45
 const currentPage = ref(1)
@@ -46,8 +47,9 @@ const visibleCommits = computed(() => {
 })
 
 function handleCommitSelected(hash: string, index: number, event: MouseEvent) {
+  isDragging.value = true
+
   if (event.shiftKey && selectedCommitHashes.value.length > 0) {
-    // Range selection with shift key
     const lastSelectedIndex = visibleCommits.value.findIndex(
       commit => commit.hash === selectedCommitHashes.value[selectedCommitHashes.value.length - 1],
     )
@@ -62,21 +64,66 @@ function handleCommitSelected(hash: string, index: number, event: MouseEvent) {
       selectedCommitHashes.value = [...new Set([...selectedCommitHashes.value, ...hashesToSelect])]
     }
   }
+  else if (event.ctrlKey || event.metaKey) {
+    if (selectedCommitHashes.value.includes(hash)) {
+      selectedCommitHashes.value = selectedCommitHashes.value.filter(h => h !== hash)
+    }
+    else {
+      selectedCommitHashes.value.push(hash)
+    }
+  }
   else {
     selectedCommitHashes.value = [hash]
   }
 
-  try {
-    if (window.vscode) {
+  handleMouseUp()
+}
+
+function handleMouseDown(index: number, event: MouseEvent) {
+  const target = event.target as HTMLElement
+  if (target.closest('.copy-button')) {
+    return
+  }
+
+  if (!event.ctrlKey && !event.metaKey && !event.shiftKey) {
+    isDragging.value = true
+    selectionStart.value = index
+    dragEndIndex.value = index
+    selectedCommitHashes.value = [visibleCommits.value[index].hash]
+  }
+}
+
+function handleMouseOver(index: number) {
+  if (isDragging.value && selectionStart.value !== null) {
+    const startIdx = Math.min(selectionStart.value, index)
+    const endIdx = Math.max(selectionStart.value, index)
+    const hashesToSelect = visibleCommits.value
+      .slice(startIdx, endIdx + 1)
+      .map(commit => commit.hash)
+
+    selectedCommitHashes.value = hashesToSelect
+  }
+}
+
+function handleMouseUp() {
+  const wasDragging = isDragging.value
+
+  isDragging.value = false
+
+  if (wasDragging) {
+    try {
       window.vscode.postMessage({
         command: WEBVIEW_CHANNEL.SHOW_COMMIT_DETAILS,
         commitHashes: JSON.stringify(toRaw(selectedCommitHashes.value)),
       })
     }
+    catch (error) {
+      console.error('Error sending commit details:', error)
+    }
   }
-  catch (error) {
-    console.error('Error sending commit details:', error)
-  }
+
+  // 最后重置选择起点
+  selectionStart.value = null
 }
 
 onMounted(() => {
@@ -100,15 +147,20 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div class="git-graph" @mouseleave="isDragging = false">
+  <div class="git-graph" @mouseleave="handleMouseUp" @mouseup="handleMouseUp">
     <ul class="commit-list">
       <ColumnHeader v-model="columnWidths" />
       <ListItem
         v-for="(commit, index) in visibleCommits" :key="commit.hash" :graph-data="graphData[index]"
         :prev-graph-data="index > 0 ? graphData[index - 1] : null"
         :next-graph-data="index < graphData.length - 1 ? graphData[index + 1] : null" :commit="commit"
-        :column-widths="columnWidths" :is-selected="selectedCommitHashes.includes(commit.hash)"
-        @select="(event) => handleCommitSelected(commit.hash, index, event)"
+        :column-widths="columnWidths" :is-selected="selectedCommitHashes.includes(commit.hash)" :class="{
+          'being-dragged': isDragging && selectionStart !== null
+            && ((index >= selectionStart && index <= dragEndIndex)
+              || (index <= selectionStart && index >= dragEndIndex)),
+        }" @select="(event) => handleCommitSelected(commit.hash, index, event)"
+        @mousedown="(event: MouseEvent) => handleMouseDown(index, event)"
+        @mouseover="() => isDragging && handleMouseOver(index)"
       />
       <li ref="loadingTriggerRef" class="loading-trigger">
         <div v-if="visibleCommits.length < commitData.length" class="loading-text">
@@ -124,6 +176,8 @@ onUnmounted(() => {
   width: 100%;
   overflow: auto;
   font-family: var(--vscode-editor-font-family);
+  user-select: none;
+  /* Prevent text selection during drag */
 }
 
 .commit-list {
@@ -145,4 +199,8 @@ onUnmounted(() => {
   font-size: 12px;
   color: var(--vscode-descriptionForeground);
 }
+
+.being-dragged {
+  background-color: var(--vscode-list-activeSelectionBackground, rgba(0, 0, 0, 0.1));
+}
 </style>

src/views/webview.ts

@@ -15,7 +15,7 @@ import { useGitService } from '@/git'
 import { useStorage } from '@/storage'
 import { CHANNEL, EXTENSION_SYMBOL, WEBVIEW_CHANNEL } from '@/constant'
 
-import type { Commit, CommitGraph } from '@/git'
+import type { CommitGraph } from '@/git'
 
 function getNonce() {
   let text = ''
@@ -154,9 +154,16 @@ export const useGitPanelView = createSingletonComposable(() => {
     }
   }
 
+  function clearSelection() {
+    postMessage({ command: CHANNEL.CLEAR_SELECTED })
+    gitChangesProvider.clearSelection()
+  }
+
   return {
     viewType: `${EXTENSION_SYMBOL}.history` as const,
     refreshHistory,
+    postMessage,
     forceRefresh,
+    clearSelection,
   }
 })