feat: git graph & branchName

Author: zhangmo8

demo2.html

@@ -120,7 +120,7 @@
     "pack": "vsce package",
     "test": "vitest",
     "typecheck": "tsc --noEmit",
-    "release": "bumpp && nr publish"
+    "release": "nr prepare && bumpp && nr publish"
   },
   "dependencies": {
     "simple-git": "^3.27.0",

package.json

@@ -3,7 +3,7 @@ import { createSingletonComposable, useWorkspaceFolders } from 'reactive-vscode'
 
 import type { SimpleGit } from 'simple-git'
 import type { Commit, CommitGraph, ExtendedLogResult, GitOperation } from './types'
-import { logger } from '@/utils'
+import { getBranchColor, logger } from '@/utils'
 
 export * from './types'
 
@@ -44,6 +44,7 @@ export const useGitService = createSingletonComposable(() => {
         const { author_email, author_name } = commit
         commit.authorEmail = author_email
         commit.authorName = author_name
+
         commit.children = []
         hashToCommit[commit.hash] = commit
 
@@ -195,11 +196,15 @@ export const useGitService = createSingletonComposable(() => {
 
       if (isMerge) {
         const sourceBranches: string[] = []
+        const sourceBranchColors: Record<string, string> = {}
+
         if (commit.parents) {
           for (let i = 1; i < commit.parents.length; i++) {
-            const parentHash = commit.parents[i]
+            const parentHash: string = commit.parents[i]
             if (commitToBranch[parentHash]) {
-              sourceBranches.push(commitToBranch[parentHash])
+              const sourceBranch = commitToBranch[parentHash]
+              sourceBranches.push(sourceBranch)
+              sourceBranchColors[sourceBranch] = getBranchColor(sourceBranch)
             }
           }
         }
@@ -212,15 +217,32 @@ export const useGitService = createSingletonComposable(() => {
           sourceBranches,
           targetBranch: branch,
           branchChanged: branchChanged[commit.hash],
+          branchColor: getBranchColor(branch),
+          targetBranchColor: getBranchColor(branch),
+          sourceBranchColors,
         }
       }
       else {
+        let targetBranch: string | undefined
+        let targetBranchColor: string | undefined
+
+        if (branchChanged[commit.hash] && commit.parents && commit.parents.length > 0) {
+          const parentHash = commit.parents[0]
+          if (commitToBranch[parentHash] && commitToBranch[parentHash] !== branch) {
+            targetBranch = commitToBranch[parentHash]
+            targetBranchColor = getBranchColor(targetBranch)
+          }
+        }
+
         return {
           type: 'commit',
           branch,
           hash: commit.hash,
           message: commit.message,
           branchChanged: branchChanged[commit.hash],
+          branchColor: getBranchColor(branch),
+          targetBranch,
+          targetBranchColor,
         }
       }
     })

src/git/index.ts

@@ -26,11 +26,14 @@ export interface BaseOperation {
   hash: string
   message: string
   branchChanged: boolean
+  branchColor?: string
 }
 
 export interface CommitOperation extends BaseOperation {
   sourceBranches?: string[]
   targetBranch?: string
+  sourceBranchColors?: Record<string, string>
+  targetBranchColor?: string
 }
 
 export type GitOperation = CommitOperation

src/git/types.ts

@@ -5,6 +5,10 @@ import type { Uri } from 'vscode'
 
 import { displayName } from './generated/meta'
 
+const branchColorCache = new Map<string, string>()
+let colorCounter = 0
+const goldenRatio = 0.618033988749895
+
 export const logger = useLogger(displayName)
 
 export async function getGitPath() {
@@ -49,3 +53,32 @@ export function parseGitStatus(status: string): { type: string, similarity?: num
   }
   return { type: status }
 }
+
+/**
+ * @param branchName
+ * @returns HSL color string
+ */
+export function getBranchColor(branchName: string): string {
+  if (branchColorCache.has(branchName)) {
+    return branchColorCache.get(branchName)!
+  }
+
+  let hash = 0
+  for (let i = 0; i < branchName.length; i++) {
+    hash = branchName.charCodeAt(i) + ((hash << 5) - hash)
+  }
+
+  const baseHue = Math.abs(hash) % 360
+
+  const hue = (baseHue + colorCounter * goldenRatio * 360) % 360
+  colorCounter++
+
+  const saturation = 75
+  const lightness = 50
+
+  const color = `hsl(${Math.round(hue)}, ${saturation}%, ${lightness}%)`
+
+  branchColorCache.set(branchName, color)
+
+  return color
+}

src/utils.ts

@@ -62,7 +62,12 @@ const transformedCommits = computed(() => {
       <input v-model="filter" type="text" placeholder="Search commits..." class="search-input">
     </div> -->
 
-    <CommitTable v-model="selectedCommitHashes" :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/App.vue

@@ -4,6 +4,7 @@ import ResizeHandle from '../ResizeHandle/index.vue'
 
 interface ColumnWidths {
   branch: number
+  branchName: number
   hash: number
   message: number
   stats: number
@@ -67,10 +68,14 @@ function handleDragEnd() {
 
 <template>
   <li class="commit-header">
-    <!-- <span class="column-header" :style="{ width: `${modelValue?.branch}px` }">
-      Branch
+    <span class="column-header" :style="{ width: `${modelValue?.branchName}px` }">
+      Branch/Tag
+      <ResizeHandle :is-active="currentColumn === 'branchName'" @mousedown="handleDragStart($event, 'branchName')" />
+    </span>
+    <span class="column-header" :style="{ width: `${modelValue?.branch}px` }">
+      Graph
       <ResizeHandle :is-active="currentColumn === 'branch'" @mousedown="handleDragStart($event, 'branch')" />
-    </span> -->
+    </span>
     <span class="hash-col column-header" :style="{ width: `${modelValue?.hash}px` }">
       CommitId
       <ResizeHandle :is-active="currentColumn === 'hash'" @mousedown="handleDragStart($event, 'hash')" />