Skip to content

Commit 20336c3

Browse files
mhutchiemhutchie
committed
#7 Add setting to enable auto centering of the commit details view.
1 parent 84d560e commit 20336c3

File tree

6 files changed

+114
-89
lines changed

6 files changed

+114
-89
lines changed

‎package.json‎

Lines changed: 16 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -47,14 +47,20 @@
4747
"type": "object",
4848
"title": "Git Graph",
4949
"properties": {
50-
"git-graph.graphStyle": {
50+
"git-graph.autoCenterCommitDetailsView": {
51+
"type": "boolean",
52+
"default": true,
53+
"description": "Automatically center the commit details view when it is opened."
54+
},
55+
"git-graph.dateFormat": {
5156
"type": "string",
5257
"enum": [
53-
"rounded",
54-
"angular"
58+
"Date & Time",
59+
"Date Only",
60+
"Relative"
5561
],
56-
"default": "rounded",
57-
"description": "Specifies the style of the graph."
62+
"default": "Date & Time",
63+
"description": "Specifies the date format to be used in the date column of the graph."
5864
},
5965
"git-graph.graphColours": {
6066
"type": "array",
@@ -79,15 +85,14 @@
7985
],
8086
"description": "Specifies the colours used on the graph."
8187
},
82-
"git-graph.dateFormat": {
88+
"git-graph.graphStyle": {
8389
"type": "string",
8490
"enum": [
85-
"Date & Time",
86-
"Date Only",
87-
"Relative"
91+
"rounded",
92+
"angular"
8893
],
89-
"default": "Date & Time",
90-
"description": "Specifies the date format to be used in the date column of the graph."
94+
"default": "rounded",
95+
"description": "Specifies the style of the graph."
9196
},
9297
"git-graph.initialLoadCommits": {
9398
"type": "number",

‎src/config.ts‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,16 @@ export class Config {
88
this.workspaceConfiguration = vscode.workspace.getConfiguration('git-graph');
99
}
1010

11+
public autoCenterCommitDetailsView() {
12+
return this.workspaceConfiguration.get('autoCenterCommitDetailsView', true);
13+
}
14+
public dateFormat(): DateFormat {
15+
return this.workspaceConfiguration.get('dateFormat', 'Date & Time');
16+
}
17+
public graphColours() {
18+
return this.workspaceConfiguration.get('graphColours', ['#0085d9', '#d9008f', '#00d90a', '#d98500', '#a300d9', '#ff0000'])
19+
.filter((v) => v.match(/^\s*(#[0-9a-fA-F]{6}|#[0-9a-fA-F]{8}|rgb[a]?\s*\(\d{1,3},\s*\d{1,3},\s*\d{1,3}\))\s*$/) !== null);
20+
}
1121
public graphStyle(): GraphStyle {
1222
return this.workspaceConfiguration.get('graphStyle', 'rounded');
1323
}
@@ -17,13 +27,6 @@ export class Config {
1727
public loadMoreCommits() {
1828
return this.workspaceConfiguration.get('loadMoreCommits', 75);
1929
}
20-
public graphColours() {
21-
return this.workspaceConfiguration.get('graphColours', ['#0085d9', '#d9008f', '#00d90a', '#d98500', '#a300d9', '#ff0000'])
22-
.filter((v) => v.match(/^\s*(#[0-9a-fA-F]{6}|#[0-9a-fA-F]{8}|rgb[a]?\s*\(\d{1,3},\s*\d{1,3},\s*\d{1,3}\))\s*$/) !== null);
23-
}
24-
public dateFormat(): DateFormat {
25-
return this.workspaceConfiguration.get('dateFormat', 'Date & Time');
26-
}
2730
public showStatusBarItem() {
2831
return this.workspaceConfiguration.get('showStatusBarItem', true);
2932
}

‎src/gitGraphView.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -143,11 +143,12 @@ export class GitGraphView {
143143
const nonce = getNonce();
144144

145145
let settings: GitGraphViewSettings = {
146+
autoCenterCommitDetailsView: config.autoCenterCommitDetailsView(),
147+
dateFormat: config.dateFormat(),
148+
graphColours: config.graphColours(),
146149
graphStyle: config.graphStyle(),
147150
initialLoadCommits: config.initialLoadCommits(),
148-
loadMoreCommits: config.loadMoreCommits(),
149-
graphColours: config.graphColours(),
150-
dateFormat: config.dateFormat()
151+
loadMoreCommits: config.loadMoreCommits()
151152
};
152153

153154
let colourStyles = '';

‎src/types.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,11 +43,12 @@ export interface GitUnsavedChanges {
4343
}
4444

4545
export interface GitGraphViewSettings {
46+
autoCenterCommitDetailsView: boolean;
47+
dateFormat: DateFormat;
4648
graphColours: string[];
4749
graphStyle: GraphStyle;
4850
initialLoadCommits: number;
4951
loadMoreCommits: number;
50-
dateFormat: DateFormat;
5152
}
5253

5354
export interface GitFileChange{

‎web/global.d.ts‎

Lines changed: 66 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,75 @@
11
import {
2-
GitCommandStatus as GitCommandStatusX,
3-
GitCommitDetails as GitCommitDetailsX,
4-
GitCommitNode as GitCommitNodeX,
5-
GitFileChange as GitFileChangeX,
6-
GitFileChangeType as GitFileChangeTypeX,
7-
GitGraphViewSettings as GitGraphViewSettingsX,
8-
GitResetMode as GitResetModeX,
9-
RequestMessage as RequestMessageX,
10-
ResponseMessage as ResponseMessageX
2+
GitCommandStatus as GitCommandStatusX,
3+
GitCommitDetails as GitCommitDetailsX,
4+
GitCommitNode as GitCommitNodeX,
5+
GitFileChange as GitFileChangeX,
6+
GitFileChangeType as GitFileChangeTypeX,
7+
GitGraphViewSettings as GitGraphViewSettingsX,
8+
GitResetMode as GitResetModeX,
9+
RequestMessage as RequestMessageX,
10+
ResponseMessage as ResponseMessageX
1111
} from "../out/types";
1212

1313
declare global {
14-
/* Types from Backend */
15-
type GitCommandStatus = GitCommandStatusX;
16-
type GitCommitDetails = GitCommitDetailsX;
17-
type GitCommitNode = GitCommitNodeX;
18-
type GitFileChange = GitFileChangeX;
19-
type GitFileChangeType = GitFileChangeTypeX;
20-
type GitGraphViewSettings = GitGraphViewSettingsX;
21-
type GitResetMode = GitResetModeX;
22-
type RequestMessage = RequestMessageX;
23-
type ResponseMessage = ResponseMessageX;
14+
/* Types from Backend */
15+
type GitCommandStatus = GitCommandStatusX;
16+
type GitCommitDetails = GitCommitDetailsX;
17+
type GitCommitNode = GitCommitNodeX;
18+
type GitFileChange = GitFileChangeX;
19+
type GitFileChangeType = GitFileChangeTypeX;
20+
type GitGraphViewSettings = GitGraphViewSettingsX;
21+
type GitResetMode = GitResetModeX;
22+
type RequestMessage = RequestMessageX;
23+
type ResponseMessage = ResponseMessageX;
2424

25-
/* Globals defined in Webview HTML content */
26-
function acquireVsCodeApi(): any;
27-
var settings: GitGraphViewSettings;
25+
/* Globals defined in Webview HTML content */
26+
function acquireVsCodeApi(): any;
27+
var settings: GitGraphViewSettings;
2828

29-
/* Graph Interfaces */
30-
interface Point {
31-
x: number;
32-
y: number;
33-
}
34-
interface Line {
35-
p1: Point;
36-
p2: Point;
37-
isCommitted: boolean;
38-
}
39-
interface Config {
40-
grid: { x: number, y: number, offsetX: number, offsetY: number };
41-
colours: string[];
42-
graphStyle: 'rounded' | 'angular';
43-
initialLoadCommits: number;
44-
loadMoreCommits: number;
45-
}
46-
interface ContextMenuItem {
47-
title: string;
48-
onClick: () => void;
49-
}
50-
interface ExpandedCommit {
51-
id: number;
52-
hash: string;
53-
srcElem: HTMLElement | null;
54-
commitDetails: GitCommitDetails | null;
55-
fileTree: GitFolder | null;
56-
}
29+
/* Graph Interfaces */
30+
interface Point {
31+
x: number;
32+
y: number;
33+
}
34+
interface Line {
35+
p1: Point;
36+
p2: Point;
37+
isCommitted: boolean;
38+
}
39+
interface Config {
40+
autoCenterCommitDetailsView: boolean;
41+
colours: string[];
42+
graphStyle: 'rounded' | 'angular';
43+
grid: { x: number, y: number, offsetX: number, offsetY: number };
44+
initialLoadCommits: number;
45+
loadMoreCommits: number;
46+
}
47+
interface ContextMenuItem {
48+
title: string;
49+
onClick: () => void;
50+
}
51+
interface ExpandedCommit {
52+
id: number;
53+
hash: string;
54+
srcElem: HTMLElement | null;
55+
commitDetails: GitCommitDetails | null;
56+
fileTree: GitFolder | null;
57+
}
5758

58-
/* Git Interfaces / Types */
59-
interface GitFolder {
60-
type: 'folder';
61-
name: string;
62-
folderPath: string;
63-
contents: GitFolderContents;
64-
open: boolean;
65-
}
66-
interface GitFile {
67-
type: 'file';
68-
name: string;
69-
index: number;
70-
}
71-
type GitFolderOrFile = GitFolder | GitFile;
72-
type GitFolderContents = { [name: string]: GitFolderOrFile };
59+
/* Git Interfaces / Types */
60+
interface GitFolder {
61+
type: 'folder';
62+
name: string;
63+
folderPath: string;
64+
contents: GitFolderContents;
65+
open: boolean;
66+
}
67+
interface GitFile {
68+
type: 'file';
69+
name: string;
70+
index: number;
71+
}
72+
type GitFolderOrFile = GitFolder | GitFile;
73+
type GitFolderContents = { [name: string]: GitFolderOrFile };
7374

7475
}

‎web/main.ts‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -651,7 +651,20 @@
651651
this.renderGraph();
652652
insertAfter(newElem, this.expandedCommit.srcElem);
653653

654-
window.scrollTo(0, newElem.offsetTop + 177 - window.innerHeight / 2);
654+
if(this.config.autoCenterCommitDetailsView){
655+
// Center Commit Detail View setting is enabled
656+
// control menu height [40px] + newElem.y + (commit details view height [250px] + commit height [24px]) / 2 - (window height) / 2
657+
window.scrollTo(0, newElem.offsetTop + 177 - window.innerHeight / 2);
658+
}else if(newElem.offsetTop + 8 < window.pageYOffset){
659+
// Commit Detail View is opening above what is visible on screen
660+
// control menu height [40px] + newElem y - commit height [24px] - desired gap from top [8px] < pageYOffset
661+
window.scrollTo(0, newElem.offsetTop + 8);
662+
}else if(newElem.offsetTop + expandedCommitHeight - window.innerHeight + 48 > window.pageYOffset){
663+
// Commit Detail View is opening below what is visible on screen
664+
// control menu height [40px] + newElem y + commit details view height [250px] + desired gap from bottom [8px] - window height > pageYOffset
665+
window.scrollTo(0, newElem.offsetTop + expandedCommitHeight - window.innerHeight + 48);
666+
}
667+
655668
document.getElementById('commitDetailsClose')!.addEventListener('click', () => {
656669
this.hideCommitDetails();
657670
});
@@ -675,9 +688,10 @@
675688

676689

677690
let gitGraph = new GitGraph({
678-
grid: { x: 16, y: 24, offsetX: 8, offsetY: 12 },
691+
autoCenterCommitDetailsView: settings.autoCenterCommitDetailsView,
679692
colours: settings.graphColours,
680693
graphStyle: settings.graphStyle,
694+
grid: { x: 16, y: 24, offsetX: 8, offsetY: 12 },
681695
initialLoadCommits: settings.initialLoadCommits,
682696
loadMoreCommits: settings.loadMoreCommits
683697
}, vscode.getState());

0 commit comments

Comments
 (0)