Skip to content

Commit

Permalink
#7 Add setting to enable auto centering of the commit details view.
Browse files Browse the repository at this point in the history
  • Loading branch information
mhutchie committed Feb 23, 2019
1 parent 84d560e commit 20336c3
Show file tree
Hide file tree
Showing 6 changed files with 114 additions and 89 deletions.
27 changes: 16 additions & 11 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -47,14 +47,20 @@
"type": "object",
"title": "Git Graph",
"properties": {
"git-graph.graphStyle": {
"git-graph.autoCenterCommitDetailsView": {
"type": "boolean",
"default": true,
"description": "Automatically center the commit details view when it is opened."
},
"git-graph.dateFormat": {
"type": "string",
"enum": [
"rounded",
"angular"
"Date & Time",
"Date Only",
"Relative"
],
"default": "rounded",
"description": "Specifies the style of the graph."
"default": "Date & Time",
"description": "Specifies the date format to be used in the date column of the graph."
},
"git-graph.graphColours": {
"type": "array",
Expand All @@ -79,15 +85,14 @@
],
"description": "Specifies the colours used on the graph."
},
"git-graph.dateFormat": {
"git-graph.graphStyle": {
"type": "string",
"enum": [
"Date & Time",
"Date Only",
"Relative"
"rounded",
"angular"
],
"default": "Date & Time",
"description": "Specifies the date format to be used in the date column of the graph."
"default": "rounded",
"description": "Specifies the style of the graph."
},
"git-graph.initialLoadCommits": {
"type": "number",
Expand Down
17 changes: 10 additions & 7 deletions src/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,16 @@ export class Config {
this.workspaceConfiguration = vscode.workspace.getConfiguration('git-graph');
}

public autoCenterCommitDetailsView() {
return this.workspaceConfiguration.get('autoCenterCommitDetailsView', true);
}
public dateFormat(): DateFormat {
return this.workspaceConfiguration.get('dateFormat', 'Date & Time');
}
public graphColours() {
return this.workspaceConfiguration.get('graphColours', ['#0085d9', '#d9008f', '#00d90a', '#d98500', '#a300d9', '#ff0000'])
.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);
}
public graphStyle(): GraphStyle {
return this.workspaceConfiguration.get('graphStyle', 'rounded');
}
Expand All @@ -17,13 +27,6 @@ export class Config {
public loadMoreCommits() {
return this.workspaceConfiguration.get('loadMoreCommits', 75);
}
public graphColours() {
return this.workspaceConfiguration.get('graphColours', ['#0085d9', '#d9008f', '#00d90a', '#d98500', '#a300d9', '#ff0000'])
.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);
}
public dateFormat(): DateFormat {
return this.workspaceConfiguration.get('dateFormat', 'Date & Time');
}
public showStatusBarItem() {
return this.workspaceConfiguration.get('showStatusBarItem', true);
}
Expand Down
7 changes: 4 additions & 3 deletions src/gitGraphView.ts
Original file line number Diff line number Diff line change
Expand Up @@ -143,11 +143,12 @@ export class GitGraphView {
const nonce = getNonce();

let settings: GitGraphViewSettings = {
autoCenterCommitDetailsView: config.autoCenterCommitDetailsView(),
dateFormat: config.dateFormat(),
graphColours: config.graphColours(),
graphStyle: config.graphStyle(),
initialLoadCommits: config.initialLoadCommits(),
loadMoreCommits: config.loadMoreCommits(),
graphColours: config.graphColours(),
dateFormat: config.dateFormat()
loadMoreCommits: config.loadMoreCommits()
};

let colourStyles = '';
Expand Down
3 changes: 2 additions & 1 deletion src/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -43,11 +43,12 @@ export interface GitUnsavedChanges {
}

export interface GitGraphViewSettings {
autoCenterCommitDetailsView: boolean;
dateFormat: DateFormat;
graphColours: string[];
graphStyle: GraphStyle;
initialLoadCommits: number;
loadMoreCommits: number;
dateFormat: DateFormat;
}

export interface GitFileChange{
Expand Down
131 changes: 66 additions & 65 deletions web/global.d.ts
Original file line number Diff line number Diff line change
@@ -1,74 +1,75 @@
import {
GitCommandStatus as GitCommandStatusX,
GitCommitDetails as GitCommitDetailsX,
GitCommitNode as GitCommitNodeX,
GitFileChange as GitFileChangeX,
GitFileChangeType as GitFileChangeTypeX,
GitGraphViewSettings as GitGraphViewSettingsX,
GitResetMode as GitResetModeX,
RequestMessage as RequestMessageX,
ResponseMessage as ResponseMessageX
GitCommandStatus as GitCommandStatusX,
GitCommitDetails as GitCommitDetailsX,
GitCommitNode as GitCommitNodeX,
GitFileChange as GitFileChangeX,
GitFileChangeType as GitFileChangeTypeX,
GitGraphViewSettings as GitGraphViewSettingsX,
GitResetMode as GitResetModeX,
RequestMessage as RequestMessageX,
ResponseMessage as ResponseMessageX
} from "../out/types";

declare global {
/* Types from Backend */
type GitCommandStatus = GitCommandStatusX;
type GitCommitDetails = GitCommitDetailsX;
type GitCommitNode = GitCommitNodeX;
type GitFileChange = GitFileChangeX;
type GitFileChangeType = GitFileChangeTypeX;
type GitGraphViewSettings = GitGraphViewSettingsX;
type GitResetMode = GitResetModeX;
type RequestMessage = RequestMessageX;
type ResponseMessage = ResponseMessageX;
/* Types from Backend */
type GitCommandStatus = GitCommandStatusX;
type GitCommitDetails = GitCommitDetailsX;
type GitCommitNode = GitCommitNodeX;
type GitFileChange = GitFileChangeX;
type GitFileChangeType = GitFileChangeTypeX;
type GitGraphViewSettings = GitGraphViewSettingsX;
type GitResetMode = GitResetModeX;
type RequestMessage = RequestMessageX;
type ResponseMessage = ResponseMessageX;

/* Globals defined in Webview HTML content */
function acquireVsCodeApi(): any;
var settings: GitGraphViewSettings;
/* Globals defined in Webview HTML content */
function acquireVsCodeApi(): any;
var settings: GitGraphViewSettings;

/* Graph Interfaces */
interface Point {
x: number;
y: number;
}
interface Line {
p1: Point;
p2: Point;
isCommitted: boolean;
}
interface Config {
grid: { x: number, y: number, offsetX: number, offsetY: number };
colours: string[];
graphStyle: 'rounded' | 'angular';
initialLoadCommits: number;
loadMoreCommits: number;
}
interface ContextMenuItem {
title: string;
onClick: () => void;
}
interface ExpandedCommit {
id: number;
hash: string;
srcElem: HTMLElement | null;
commitDetails: GitCommitDetails | null;
fileTree: GitFolder | null;
}
/* Graph Interfaces */
interface Point {
x: number;
y: number;
}
interface Line {
p1: Point;
p2: Point;
isCommitted: boolean;
}
interface Config {
autoCenterCommitDetailsView: boolean;
colours: string[];
graphStyle: 'rounded' | 'angular';
grid: { x: number, y: number, offsetX: number, offsetY: number };
initialLoadCommits: number;
loadMoreCommits: number;
}
interface ContextMenuItem {
title: string;
onClick: () => void;
}
interface ExpandedCommit {
id: number;
hash: string;
srcElem: HTMLElement | null;
commitDetails: GitCommitDetails | null;
fileTree: GitFolder | null;
}

/* Git Interfaces / Types */
interface GitFolder {
type: 'folder';
name: string;
folderPath: string;
contents: GitFolderContents;
open: boolean;
}
interface GitFile {
type: 'file';
name: string;
index: number;
}
type GitFolderOrFile = GitFolder | GitFile;
type GitFolderContents = { [name: string]: GitFolderOrFile };
/* Git Interfaces / Types */
interface GitFolder {
type: 'folder';
name: string;
folderPath: string;
contents: GitFolderContents;
open: boolean;
}
interface GitFile {
type: 'file';
name: string;
index: number;
}
type GitFolderOrFile = GitFolder | GitFile;
type GitFolderContents = { [name: string]: GitFolderOrFile };

}
18 changes: 16 additions & 2 deletions web/main.ts
Original file line number Diff line number Diff line change
Expand Up @@ -651,7 +651,20 @@
this.renderGraph();
insertAfter(newElem, this.expandedCommit.srcElem);

window.scrollTo(0, newElem.offsetTop + 177 - window.innerHeight / 2);
if(this.config.autoCenterCommitDetailsView){
// Center Commit Detail View setting is enabled
// control menu height [40px] + newElem.y + (commit details view height [250px] + commit height [24px]) / 2 - (window height) / 2
window.scrollTo(0, newElem.offsetTop + 177 - window.innerHeight / 2);
}else if(newElem.offsetTop + 8 < window.pageYOffset){
// Commit Detail View is opening above what is visible on screen
// control menu height [40px] + newElem y - commit height [24px] - desired gap from top [8px] < pageYOffset
window.scrollTo(0, newElem.offsetTop + 8);
}else if(newElem.offsetTop + expandedCommitHeight - window.innerHeight + 48 > window.pageYOffset){
// Commit Detail View is opening below what is visible on screen
// control menu height [40px] + newElem y + commit details view height [250px] + desired gap from bottom [8px] - window height > pageYOffset
window.scrollTo(0, newElem.offsetTop + expandedCommitHeight - window.innerHeight + 48);
}

document.getElementById('commitDetailsClose')!.addEventListener('click', () => {
this.hideCommitDetails();
});
Expand All @@ -675,9 +688,10 @@


let gitGraph = new GitGraph({
grid: { x: 16, y: 24, offsetX: 8, offsetY: 12 },
autoCenterCommitDetailsView: settings.autoCenterCommitDetailsView,
colours: settings.graphColours,
graphStyle: settings.graphStyle,
grid: { x: 16, y: 24, offsetX: 8, offsetY: 12 },
initialLoadCommits: settings.initialLoadCommits,
loadMoreCommits: settings.loadMoreCommits
}, vscode.getState());
Expand Down

0 comments on commit 20336c3

Please sign in to comment.