SCM - support multiple colors on the same column (#216708)

microsoft · Jun 20, 2024 · 05bd928 · 05bd928
1 parent 07dcb7a
commit 05bd928
Showing 1 changed file with 23 additions and 17 deletions.
diff --git a/src/vs/workbench/contrib/scm/browser/scmHistory.ts b/src/vs/workbench/contrib/scm/browser/scmHistory.ts
@@ -19,6 +19,17 @@ function getNextColorIndex(colorIndex: number): number {
 	return colorIndex < graphColors.length - 1 ? colorIndex + 1 : 1;
 }
 
+function getLabelColorIndex(historyItem: ISCMHistoryItem, colorMap: Map<string, number>): number | undefined {
+	for (const label of historyItem.labels ?? []) {
+		const colorIndex = colorMap.get(label.title);
+		if (colorIndex !== undefined) {
+			return colorIndex;
+		}
+	}
+
+	return undefined;
+}
+
 function createPath(stroke: string): SVGPathElement {
 	const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
 	path.setAttribute('fill', 'none');
@@ -65,10 +76,12 @@ export function renderSCMHistoryItemGraph(historyItemViewModel: ISCMHistoryItemV
 	const outputSwimlanes = historyItemViewModel.outputSwimlanes;
 
 	const inputIndex = inputSwimlanes.findIndex(node => node.id === historyItem.id);
-	const outputIndex = historyItem.parentIds.length === 0 ? -1 : outputSwimlanes.findIndex(node => node.id === historyItem.parentIds[0]);
+	const outputIndex = historyItem.parentIds.length === 0 ? -1 : findLastIndex(outputSwimlanes, historyItem.parentIds[0]);
 
 	const circleIndex = inputIndex !== -1 ? inputIndex : inputSwimlanes.length;
-	const circleColorIndex = inputIndex !== -1 ? inputSwimlanes[inputIndex].color : outputSwimlanes[circleIndex]?.color ?? 0;
+	const circleColorIndex =
+		outputIndex !== -1 ? outputSwimlanes[outputIndex].color :
+			inputIndex !== -1 ? inputSwimlanes[inputIndex].color : 0;
 
 	for (let index = 0; index < inputSwimlanes.length; index++) {
 		const node = inputSwimlanes[index];
@@ -158,15 +171,15 @@ export function renderSCMHistoryItemGraph(historyItemViewModel: ISCMHistoryItemV
 		svg.append(path);
 	}
 
-	// Draw | to circle
+	// Draw | to *
 	if (inputIndex !== -1) {
-		const path = drawVerticalLine(SWIMLANE_WIDTH * (circleIndex + 1), 0, SWIMLANE_HEIGHT / 2, graphColors[circleColorIndex]);
+		const path = drawVerticalLine(SWIMLANE_WIDTH * (circleIndex + 1), 0, SWIMLANE_HEIGHT / 2, graphColors[inputSwimlanes[inputIndex].color]);
 		svg.append(path);
 	}
 
-	// Draw | from circle
+	// Draw | from *
 	if (outputIndex !== -1) {
-		const path = drawVerticalLine(SWIMLANE_WIDTH * (circleIndex + 1), SWIMLANE_HEIGHT / 2, SWIMLANE_HEIGHT, graphColors[circleColorIndex]);
+		const path = drawVerticalLine(SWIMLANE_WIDTH * (circleIndex + 1), SWIMLANE_HEIGHT / 2, SWIMLANE_HEIGHT, graphColors[outputSwimlanes[outputIndex].color]);
 		svg.append(path);
 	}
 
@@ -217,8 +230,8 @@ export function toISCMHistoryItemViewModelArray(historyItems: ISCMHistoryItem[],
 				if (node.id === historyItem.id) {
 					if (!firstParentAdded) {
 						outputSwimlanes.push({
-							...deepClone(node),
-							id: historyItem.parentIds[0]
+							id: historyItem.parentIds[0],
+							color: getLabelColorIndex(historyItem, colorMap) ?? node.color
 						});
 						firstParentAdded = true;
 					}
@@ -231,16 +244,9 @@ export function toISCMHistoryItemViewModelArray(historyItems: ISCMHistoryItem[],
 
 			// Add unprocessed parent(s) to the output
 			for (let i = firstParentAdded ? 1 : 0; i < historyItem.parentIds.length; i++) {
-				// Get color index based on the label
-				let labelColorIndex: number | undefined = undefined;
-				for (const label of historyItem.labels ?? []) {
-					labelColorIndex = colorMap.get(label.title);
-					if (labelColorIndex !== undefined) {
-						break;
-					}
-				}
+				// Color index (label -> next color)
+				colorIndex = getLabelColorIndex(historyItem, colorMap) ?? getNextColorIndex(colorIndex);
 
-				colorIndex = labelColorIndex ?? getNextColorIndex(colorIndex);
 				outputSwimlanes.push({
 					id: historyItem.parentIds[i],
 					color: colorIndex