diff --git a/bower.json b/bower.json index dde660b3..2fee096e 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "gitgraph.js", - "version": "1.12.0", + "version": "1.13.0", "main": ["./build/gitgraph.js", "./build/gitgraph.css"], "ignore": ["**/.*"] } diff --git a/build/gitgraph.d.ts b/build/gitgraph.d.ts index 5214ceb4..cfefba30 100644 --- a/build/gitgraph.d.ts +++ b/build/gitgraph.d.ts @@ -1,801 +1,827 @@ declare namespace GitGraph { - /** - * GitGraph options - */ - interface GitGraphOptions { - /** - * Id of the canvas container - */ - elementId?: string; - - /** - * Template of the graph - */ - template?: GitGraph.Template | string | any; - - /** - * Default author for commits - */ - author?: string; - - /** - * Display mode - */ - mode?: string; - - /** - * DOM canvas (ex: document.getElementById("id")) - */ - canvas?: HTMLElement; - - /** - * Graph orientation - */ - orientation?: string; - - /** - * Make arrows point to ancestors if true - */ - reverseArrow?: boolean; - - /** - * Add custom offsetX to initial commit. - */ - initCommitOffsetX?: number; - - /** - * Add custom offsetY to initial commit. - */ - initCommitOffsetY?: number; - - /** - * HTML Element containing tooltips in compact mode. - */ - tooltipContainer?: HTMLElement; - } - - /** - * Options of branch - */ - interface BranchOptions { - /** - * GitGraph constructor - */ - parent: GitGraph; - - /** - * Parent branch - */ - parentBranch?: GitGraph.Branch; - - /** - * Parent commit - */ - parentCommit?: GitGraph.Commit; - - /** - * Branch name - */ - name?: string; - - /** - * Branch line dash segments - */ - lineDash?: number[]; - - /** - * Default options for commits - */ - commitDefaultOptions?: any; - } - - /** - * Branch - * @constructor - * @param options Options of branch - * @this Branch - **/ - class Branch { - constructor(options: GitGraph.BranchOptions); - - /** - * Create new branch - * @param options Branch name | Options of Branch - * @see Branch - * @this Branch - * @return New Branch - **/ - branch(options: string | GitGraph.BranchOptions): GitGraph.Branch; - - /** - * Render the branch - * @this Branch - **/ - render(): void; - - /** - * Add a commit - * @param [options] Message | Options of commit - * @see Commit - * @this Branch - **/ - commit(options?: string | GitGraph.BranchCommitOptions): void; - - /** - * Tag the last commit of the branch. - * @param [options] Message | Options of the tag - * @see Tag - * @this Branch - * */ - tag(options?: string | GitGraph.TagOptions): void; - - /** - * Checkout onto this branch - * @this Branch - **/ - checkout(): void; - - /** - * Delete this branch - * @this Branch - **/ - delete(): void; - - /** - * Merge branch - * @param [target = this.parent.HEAD] - * @param [commitOptions] Message | Options of commit - * @param [commitOptions.fastForward = false] If true, merge should use fast-forward if possible - * @see Commit - * @this Branch - * @return this - **/ - merge( - target?: GitGraph.Branch, - commitOptions?: string | any - ): GitGraph.Branch; - - /** - * Calcul column - * @this Branch - **/ - calculColumn(): void; - - /** - * Push a new point to path. - * This method will combine duplicate points and reject reversed points. - * @this Branch - */ - pushPath(): void; - } - - /** - * Commit options - */ - interface CommitOptions { - /** - * GitGraph constructor - */ - parent: GitGraph; - - /** - * Position X (dot) - */ - x: number; - - /** - * Position Y (dot) - */ - y: number; - - /** - * Master color (dot & message) - */ - color: string; - - /** - * Add a arrow under commit dot - */ - arrowDisplay: boolean; - - /** - * Author name & email - */ - author?: string; - - /** - * Date of commit, default is now - */ - date?: string; - - /** - * DOM Element of detail part - */ - detail?: string; - - /** - * Sha1, default is a random short sha1 - */ - sha1?: string; - - /** - * Parent commit - */ - parentCommit?: GitGraph.Commit; - - /** - * Type of commit - */ - type?: string; - - /** - * Tag of the commit - */ - tag?: string; - - /** - * Color of the tag - */ - tagColor?: string; - - /** - * Font of the tag - */ - tagFont?: string; - - /** - * If true, display a box around the tag - */ - displayTagBox?: string; - - /** - * Specific dot color - */ - dotColor?: string; - - /** - * Dot size - */ - dotSize?: number; - - /** - * Dot stroke width - */ - dotStrokeWidth?: number; - - /** - * undefined - */ - dotStrokeColor?: string; - - /** - * undefined - */ - lineDash?: number[]; - - /** - * Commit message - */ - message?: string; - - /** - * short commit message (A few chars) to appear on the commit dot - */ - commitDotText?: string; - - /** - * Specific message color - */ - messageColor?: string; - - /** - * Font of the message - */ - messageFont?: string; - - /** - * Commit message display policy - */ - messageDisplay?: boolean; - - /** - * Commit message author policy - */ - messageAuthorDisplay?: boolean; - - /** - * Commit message author policy - */ - messageBranchDisplay?: boolean; - - /** - * Commit message hash policy - */ - messageHashDisplay?: boolean; - - /** - * Specific label color - */ - labelColor?: string; - - /** - * Font used for labels - */ - labelFont?: string; - - /** - * Tooltip message display policy - */ - tooltipDisplay?: boolean; - - /** - * OnClick event for the commit dot - */ - onClick?: GitGraph.CommitCallback; - - /** - * Any object which is related to this commit. Can be used in onClick or the formatter. Useful to bind the commit to external objects such as database id etc. - */ - representedObject?: any; - } - - /** - * Commit - * @constructor - * @param options Commit options - * @this Commit - **/ - class Commit { - constructor(options: GitGraph.CommitOptions); - - /** - * Render the commit - * @this Commit - **/ - render(): void; - - /** - * Render a arrow before commit - * @this Commit - **/ - arrow(): void; - } - - /** - * Tagged commit - */ - interface TagOptions { - /** - * Specific tag color - */ - color?: string; - - /** - * Font of the tag - */ - font?: string; - } - - /** - * Tag - * @constructor - * @param commit Tagged commit - * @param [options] Tag options - * @return - * @this Tag - * */ - class Tag { - constructor(commit: GitGraph.Commit, options?: GitGraph.TagOptions); - } - - /** - * Template options - */ - interface TemplateOptions { - /** - * Colors scheme: One color for each column - */ - colors?: string[]; - arrow?: { - /** - * Arrow color - */ - color?: string; - - /** - * Arrow size - */ - size?: number; - - /** - * Arrow offset - */ - offset?: number; - }; - branch?: { - /** - * Branch color - */ - color?: string; - - /** - * Branch line width - */ - lineWidth?: number; - - /** - * Branch line dash segments - */ - lineDash?: number[]; - - /** - * Branch merge style - */ - mergeStyle?: string; - - /** - * Space between branches - */ - spacingX?: number; - - /** - * Space between branches - */ - spacingY?: number; - }; - commit?: { - /** - * Space between commits - */ - spacingX?: number; - - /** - * Space between commits - */ - spacingY?: number; - - /** - * Additional width to be added to the calculated width - */ - widthExtension?: number; - - /** - * Master commit color (dot & message) - */ - color?: string; - dot?: { - /** - * Commit dot color - */ - color?: string; - - /** - * Commit dot size - */ - size?: number; - - /** - * Commit dot stroke width - */ - strokeWidth?: number; - - /** - * Commit dot stroke color - */ - strokeColor?: string; - - /** - * Commit dot line dash segments - */ - lineDash?: number[]; - }; - message?: { - /** - * Commit message color - */ - color?: string; - - /** - * Commit display policy - */ - display?: boolean; - - /** - * Commit message author policy - */ - displayAuthor?: boolean; - - /** - * Commit message branch policy - */ - displayBranch?: boolean; - - /** - * Commit message hash policy - */ - displayHash?: boolean; - - /** - * Commit message font - */ - font?: string; - }; - - /** - * Tooltips policy - */ - shouldDisplayTooltipsInCompactMode?: boolean; - - /** - * Formatter for the tooltip contents. - */ - tooltipHTMLFormatter?: GitGraph.CommitFormatter; - }; - } - - /** - * Template - * @constructor - * @param options Template options - * @this Template - **/ - class Template { - constructor(options: GitGraph.TemplateOptions); - - /** - * Get a default template from library - * @param name Template name - * @return [template] Template if exist - **/ - get(name: string): GitGraph.Template; - } - - /** - * A callback for each commit - * @callback CommitCallback - * @param commit A commit - * @param mouseOver True, if the mouse is currently hovering over the commit - * @param event The DOM event (e.g. a click event) - */ - type CommitCallback = ( - commit: GitGraph.Commit, - mouseOver: boolean, - event: Event - ) => void; - - /** - * A formatter for commit - * @callback CommitFormatter - * @param commit The commit to format - */ - type CommitFormatter = (commit: GitGraph.Commit) => void; - - /** - * Branch commit options - */ - interface BranchCommitOptions { - /** - * Master color (dot & message) - */ - color?: string; - - /** - * Author name & email - */ - author?: string; - - /** - * Date of commit, default is now - */ - date?: string; - - /** - * DOM Element of detail part - */ - detail?: string; - - /** - * Sha1, default is a random short sha1 - */ - sha1?: string; - - /** - * Parent commit - */ - parentCommit?: GitGraph.Commit; - - /** - * Type of commit - */ - type?: string; - - /** - * Tag of the commit - */ - tag?: string; - - /** - * Color of the tag - */ - tagColor?: string; - - /** - * Font of the tag - */ - tagFont?: string; - - /** - * If true, display a box around the tag - */ - displayTagBox?: string; - - /** - * Specific dot color - */ - dotColor?: string; - - /** - * Dot size - */ - dotSize?: number; - - /** - * Dot stroke width - */ - dotStrokeWidth?: number; - - /** - * undefined - */ - dotStrokeColor?: string; - - /** - * Commit message - */ - message?: string; - - /** - * Specific message color - */ - messageColor?: string; - - /** - * Font of the message - */ - messageFont?: string; - - /** - * Commit message display policy - */ - messageDisplay?: boolean; - - /** - * Commit message author policy - */ - messageAuthorDisplay?: boolean; - - /** - * Commit message author policy - */ - messageBranchDisplay?: boolean; - - /** - * Commit message hash policy - */ - messageHashDisplay?: boolean; - - /** - * Specific label color - */ - labelColor?: string; - - /** - * Font used for labels - */ - labelFont?: string; - - /** - * Tooltip message display policy - */ - tooltipDisplay?: boolean; - - /** - * OnClick event for the commit dot - */ - onClick?: GitGraph.CommitCallback; - - /** - * Any object which is related to this commit. Can be used in onClick or the formatter. Useful to bind the commit to external objects such as database id etc. - */ - representedObject?: any; - } + +/** + * GitGraph options + */ +interface GitGraphOptions { + +/** + * Id of the canvas container + */ +elementId?: string; + +/** + * Template of the graph + */ +template?: GitGraph.Template|string|any; + +/** + * Default author for commits + */ +author?: string; + +/** + * Display mode + */ +mode?: string; + +/** + * DOM canvas (ex: document.getElementById("id")) + */ +canvas?: HTMLElement; + +/** + * Graph orientation + */ +orientation?: string; + +/** + * Make arrows point to ancestors if true + */ +reverseArrow?: boolean; + +/** + * Add custom offsetX to initial commit. + */ +initCommitOffsetX?: number; + +/** + * Add custom offsetY to initial commit. + */ +initCommitOffsetY?: number; + +/** + * HTML Element containing tooltips in compact mode. + */ +tooltipContainer?: HTMLElement; +} + +/** + * Options of branch + */ +interface BranchOptions { + +/** + * GitGraph constructor + */ +parent: GitGraph; + +/** + * Parent branch + */ +parentBranch?: GitGraph.Branch; + +/** + * Parent commit + */ +parentCommit?: GitGraph.Commit; + +/** + * Branch name + */ +name?: string; + +/** + * Branch line dash segments + */ +lineDash?: number[]; + +/** + * Default options for commits + */ +commitDefaultOptions?: any; +} + +/** + * Branch + * @constructor + * @param options Options of branch + * @this Branch + **/ +class Branch { + constructor(options: GitGraph.BranchOptions); + +/** + * Create new branch + * @param options Branch name | Options of Branch + * @see Branch + * @this Branch + * @return New Branch + **/ +branch(options: string|GitGraph.BranchOptions): GitGraph.Branch; + +/** + * Render the branch + * @this Branch + **/ +render(): void; + +/** + * Add a commit + * @param [options] Message | Options of commit + * @see Commit + * @this Branch + **/ +commit(options?: string|GitGraph.BranchCommitOptions): void; + +/** + * Tag the last commit of the branch. + * @param [options] Message | Options of the tag + * @see Tag + * @this Branch + * */ +tag(options?: string|GitGraph.TagOptions): void; + +/** + * Checkout onto this branch + * @this Branch + **/ +checkout(): void; + +/** + * Delete this branch + * @this Branch + **/ +delete(): void; + +/** + * Merge branch + * @param [target = this.parent.HEAD] + * @param [commitOptions] Message | Options of commit + * @param [commitOptions.fastForward = false] If true, merge should use fast-forward if possible + * @see Commit + * @this Branch + * @return this + **/ +merge(target?: GitGraph.Branch,commitOptions?: string|any): GitGraph.Branch; + +/** + * Calcul column + * @this Branch + **/ +calculColumn(): void; + +/** + * Push a new point to path. + * This method will combine duplicate points and reject reversed points. + * @this Branch + */ +pushPath(): void; + +} + +/** + * Commit options + */ +interface CommitOptions { + +/** + * GitGraph constructor + */ +parent: GitGraph; + +/** + * Position X (dot) + */ +x: number; + +/** + * Position Y (dot) + */ +y: number; + +/** + * Master color (dot & message) + */ +color: string; + +/** + * Add a arrow under commit dot + */ +arrowDisplay: boolean; + +/** + * Author name & email + */ +author?: string; + +/** + * Date of commit, default is now + */ +date?: string; + +/** + * DOM Element of detail part + */ +detail?: string; + +/** + * Sha1, default is a random short sha1 + */ +sha1?: string; + +/** + * Parent commit + */ +parentCommit?: GitGraph.Commit; + +/** + * Type of commit + */ +type?: string; + +/** + * Tag of the commit + */ +tag?: string; + +/** + * Color of the tag + */ +tagColor?: string; + +/** + * Font of the tag + */ +tagFont?: string; + +/** + * If true, display a box around the tag + */ +displayTagBox?: string; + +/** + * Font of the dot + */ +dotFont?: string; + +/** + * Specific dot color + */ +dotColor?: string; + +/** + * Dot size + */ +dotSize?: number; + +/** + * Dot stroke width + */ +dotStrokeWidth?: number; + +/** + * undefined + */ +dotStrokeColor?: string; + +/** + * undefined + */ +lineDash?: number[]; + +/** + * Commit message + */ +message?: string; + +/** + * short commit message (A few chars) to appear on the commit dot + */ +commitDotText?: string; + +/** + * Specific message color + */ +messageColor?: string; + +/** + * Font of the message + */ +messageFont?: string; + +/** + * Commit message display policy + */ +messageDisplay?: boolean; + +/** + * Commit message author policy + */ +messageAuthorDisplay?: boolean; + +/** + * Commit message author policy + */ +messageBranchDisplay?: boolean; + +/** + * Commit message hash policy + */ +messageHashDisplay?: boolean; + +/** + * Specific label color + */ +labelColor?: string; + +/** + * Font used for labels + */ +labelFont?: string; + +/** + * Tooltip message display policy + */ +tooltipDisplay?: boolean; + +/** + * OnClick event for the commit dot + */ +onClick?: GitGraph.CommitCallback; + +/** + * Any object which is related to this commit. Can be used in onClick or the formatter. Useful to bind the commit to external objects such as database id etc. + */ +representedObject?: any; +} + +/** + * Commit + * @constructor + * @param options Commit options + + * @this Commit + **/ +class Commit { + constructor(options: GitGraph.CommitOptions); + +/** + * Render the commit + * @this Commit + **/ +render(): void; + +/** + * Render a arrow before commit + * @this Commit + **/ +arrow(): void; + +} + +/** + * Tagged commit + */ +interface TagOptions { + +/** + * Specific tag color + */ +color?: string; + +/** + * Font of the tag + */ +font?: string; +} + +/** + * Tag + * @constructor + * @param commit Tagged commit + * @param [options] Tag options + * @return + * @this Tag + * */ +class Tag { + constructor(commit: GitGraph.Commit,options?: GitGraph.TagOptions); + } /** - * GitGraph - * @constructor - * @param [options] GitGraph options - * @this GitGraph - **/ + * Template options + */ +interface TemplateOptions { + +/** + * Colors scheme: One color for each column + */ +colors?: string[]; +arrow?: { + +/** + * Arrow color + */ + color?: string; + +/** + * Arrow size + */ + size?: number; + +/** + * Arrow offset + */ + offset?: number; +}; +branch?: { + +/** + * Branch color + */ + color?: string; + +/** + * Branch line width + */ + lineWidth?: number; + +/** + * Branch line dash segments + */ + lineDash?: number[]; + +/** + * Branch merge style + */ + mergeStyle?: string; + +/** + * Space between branches + */ + spacingX?: number; + +/** + * Space between branches + */ + spacingY?: number; +}; +commit?: { + +/** + * Space between commits + */ + spacingX?: number; + +/** + * Space between commits + */ + spacingY?: number; + +/** + * Additional width to be added to the calculated width + */ + widthExtension?: number; + +/** + * Master commit color (dot & message) + */ + color?: string; +dot?: { + +/** + * Commit dot color + */ + font?: string; + +/** + * Commit dot color + */ + color?: string; + +/** + * Commit dot size + */ + size?: number; + +/** + * Commit dot stroke width + */ + strokeWidth?: number; + +/** + * Commit dot stroke color + */ + strokeColor?: string; + +/** + * Commit dot line dash segments + */ + lineDash?: number[]; + + }; +message?: { + +/** + * Commit message color + */ + color?: string; + +/** + * Commit display policy + */ + display?: boolean; + +/** + * Commit message author policy + */ + displayAuthor?: boolean; + +/** + * Commit message branch policy + */ + displayBranch?: boolean; + +/** + * Commit message hash policy + */ + displayHash?: boolean; + +/** + * Commit message font + */ + font?: string; + + }; + +/** + * Tooltips policy + */ + shouldDisplayTooltipsInCompactMode?: boolean; + +/** + * Formatter for the tooltip contents. + */ + tooltipHTMLFormatter?: GitGraph.CommitFormatter; +}; +} + +/** + * Template + * @constructor + * @param options Template options + * @this Template + **/ +class Template { + constructor(options: GitGraph.TemplateOptions); + +/** + * Get a default template from library + * @param name Template name + * @return [template] Template if exist + **/ +get(name: string): GitGraph.Template; + +} + +/** + * A callback for each commit + * @callback CommitCallback + * @param commit A commit + * @param mouseOver True, if the mouse is currently hovering over the commit + * @param event The DOM event (e.g. a click event) + */ +type CommitCallback = (commit: GitGraph.Commit,mouseOver: boolean,event: Event) => void; + +/** + * A formatter for commit + * @callback CommitFormatter + * @param commit The commit to format + */ +type CommitFormatter = (commit: GitGraph.Commit) => void; + +/** + * Branch commit options + */ +interface BranchCommitOptions { + +/** + * Master color (dot & message) + */ +color?: string; + +/** + * Author name & email + */ +author?: string; + +/** + * Date of commit, default is now + */ +date?: string; + +/** + * DOM Element of detail part + */ +detail?: string; + +/** + * Sha1, default is a random short sha1 + */ +sha1?: string; + +/** + * Parent commit + */ +parentCommit?: GitGraph.Commit; + +/** + * Type of commit + */ +type?: string; + +/** + * Tag of the commit + */ +tag?: string; + +/** + * Color of the tag + */ +tagColor?: string; + +/** + * Font of the tag + */ +tagFont?: string; + +/** + * If true, display a box around the tag + */ +displayTagBox?: string; + +/** + * Font of the dot + */ +dotFont?: string; + +/** + * Specific dot color + */ +dotColor?: string; + +/** + * Dot size + */ +dotSize?: number; + +/** + * Dot stroke width + */ +dotStrokeWidth?: number; + +/** + * undefined + */ +dotStrokeColor?: string; + +/** + * Commit message + */ +message?: string; + +/** + * Specific message color + */ +messageColor?: string; + +/** + * Font of the message + */ +messageFont?: string; + +/** + * Commit message display policy + */ +messageDisplay?: boolean; + +/** + * Commit message author policy + */ +messageAuthorDisplay?: boolean; + +/** + * Commit message author policy + */ +messageBranchDisplay?: boolean; + +/** + * Commit message hash policy + */ +messageHashDisplay?: boolean; + +/** + * Specific label color + */ +labelColor?: string; + +/** + * Font used for labels + */ +labelFont?: string; + +/** + * Tooltip message display policy + */ +tooltipDisplay?: boolean; + +/** + * OnClick event for the commit dot + */ +onClick?: GitGraph.CommitCallback; + +/** + * Any object which is related to this commit. Can be used in onClick or the formatter. Useful to bind the commit to external objects such as database id etc. + */ +representedObject?: any; +}} + +/** + * GitGraph + * @constructor + * @param [options] GitGraph options + * @this GitGraph + **/ declare class GitGraph { constructor(options?: GitGraph.GitGraphOptions); + +/** + * Disposing canvas event handlers + * @this GitGraph + **/ +dispose(): void; - /** - * Disposing canvas event handlers - * @this GitGraph - **/ - dispose(): void; - - /** - * Create new branch - * @param options Branch name | Options of Branch - * @see Branch - * @this GitGraph - * @return New branch - **/ - branch(options: string | GitGraph.BranchOptions): GitGraph.Branch; - - /** - * Create new orphan branch - * @param options Branch name | Options of Branch - * @see Branch - * @this GitGraph - * @return New branch - **/ - orphanBranch(options: string | GitGraph.BranchOptions): GitGraph.Branch; - - /** - * Commit on HEAD - * @param options Message | Options of commit - * @see Commit - * @this GitGraph - * @return this Return the main object so we can chain - **/ - commit(options: string | GitGraph.BranchCommitOptions): GitGraph; - - /** - * Tag the HEAD - * @param options Options of tag - * @see Tag - * @this GitGraph - * @return this Return the main object so we can chain - **/ - tag(options: GitGraph.TagOptions): GitGraph; - - /** - * Create a new template - * @param options The template name, or the template options - * @see Template - * @this GitGraph - * @return - **/ - newTemplate(options: string | GitGraph.TemplateOptions): GitGraph.Template; - - /** - * Render the canvas - * @this GitGraph - **/ - render(): void; - - /** - * Hover event on commit dot - * @param event Mouse event - * @param callbackFn A callback function that will be called for each commit - * @this GitGraph - **/ - applyCommits(event: MouseEvent, callbackFn: GitGraph.CommitCallback): void; - - /** - * Hover event on commit dot - * @param event Mouse event - * @this GitGraph - **/ - hover(event: MouseEvent): void; - - /** - * Click event on commit dot - * @param event Mouse event - * @this GitGraph - **/ - click(event: MouseEvent): void; +/** + * Create new branch + * @param options Branch name | Options of Branch + * @see Branch + * @this GitGraph + * @return New branch + **/ +branch(options: string|GitGraph.BranchOptions): GitGraph.Branch; + +/** + * Create new orphan branch + * @param options Branch name | Options of Branch + * @see Branch + * @this GitGraph + * @return New branch + **/ +orphanBranch(options: string|GitGraph.BranchOptions): GitGraph.Branch; + +/** + * Commit on HEAD + * @param options Message | Options of commit + * @see Commit + * @this GitGraph + * @return this Return the main object so we can chain + **/ +commit(options: string|GitGraph.BranchCommitOptions): GitGraph; + +/** + * Tag the HEAD + * @param options Options of tag + * @see Tag + * @this GitGraph + * @return this Return the main object so we can chain + **/ +tag(options: GitGraph.TagOptions): GitGraph; + +/** + * Create a new template + * @param options The template name, or the template options + * @see Template + * @this GitGraph + * @return + **/ +newTemplate(options: string|GitGraph.TemplateOptions): GitGraph.Template; + +/** + * Render the canvas + * @this GitGraph + **/ +render(): void; + +/** + * Hover event on commit dot + * @param event Mouse event + * @param callbackFn A callback function that will be called for each commit + * @this GitGraph + **/ +applyCommits(event: MouseEvent,callbackFn: GitGraph.CommitCallback): void; + +/** + * Hover event on commit dot + * @param event Mouse event + * @this GitGraph + **/ +hover(event: MouseEvent): void; + +/** + * Click event on commit dot + * @param event Mouse event + * @this GitGraph + **/ +click(event: MouseEvent): void; } diff --git a/build/gitgraph.js b/build/gitgraph.js index 7b5f9215..0665d422 100644 --- a/build/gitgraph.js +++ b/build/gitgraph.js @@ -1,5 +1,5 @@ /* ========================================================== - * GitGraph v1.12.0 + * GitGraph v1.13.0 * https://github.com/nicoespeon/gitgraph.js * ========================================================== * Copyright (c) 2018 Nicolas CARLO (@nicoespeon) ٩(^‿^)۶ @@ -636,6 +636,7 @@ * @property {string} [tagFont = this.template.commit.tag.font] - Font of the tag * @property {string} [displayTagBox = true] - If true, display a box around the tag * + * @property {string} [dotFont = this.template.commit.dot.font] - Font of the dot * @property {string} [dotColor = color] - Specific dot color * @property {number} [dotSize = this.template.commit.dot.size] - Dot size * @property {number} [dotStrokeWidth = this.template.commit.dot.strokeWidth] - Dot stroke width @@ -1056,6 +1057,8 @@ * @param {string} [options.tagFont = this.template.commit.tag.font] - Font of the tag * @param {string} [options.displayTagBox = true] - If true, display a box around the tag * + + * @param {string} [options.dotFont = this.template.commit.dot.font] - Font of the dot * @param {string} [options.dotColor = options.color] - Specific dot color * @param {number} [options.dotSize = this.template.commit.dot.size] - Dot size * @param {number} [options.dotStrokeWidth = this.template.commit.dot.strokeWidth] - Dot stroke width @@ -1105,6 +1108,7 @@ this.messageHashDisplay = _booleanOptionOr(options.messageHashDisplay, this.template.commit.message.displayHash); this.messageColor = options.messageColor || options.color; this.messageFont = options.messageFont || this.template.commit.message.font; + this.dotFont = options.dotFont || this.template.commit.dot.font; this.dotColor = options.dotColor || options.color; this.dotSize = options.dotSize || this.template.commit.dot.size; this.dotStrokeWidth = options.dotStrokeWidth || this.template.commit.dot.strokeWidth; @@ -1222,6 +1226,7 @@ var previousTextBaseline = this.context.textBaseline; var previousTextAlign = this.context.textAlign; + this.context.font = this.dotFont; this.context.fillStyle = "#000"; this.context.textAlign = "center"; this.context.textBaseline = "middle"; @@ -1402,6 +1407,7 @@ * @param {number} [options.commit.spacingY] - Space between commits * @param {number} [options.commit.widthExtension = 0] - Additional width to be added to the calculated width * @param {string} [options.commit.color] - Master commit color (dot & message) + * @param {string} [options.commit.dot.font] - Commit dot color * @param {string} [options.commit.dot.color] - Commit dot color * @param {number} [options.commit.dot.size] - Commit dot size * @param {number} [options.commit.dot.strokeWidth] - Commit dot stroke width @@ -1476,6 +1482,7 @@ this.commit.dot = {}; // Only one color, if null message takes branch color (only dot) + this.commit.dot.font = options.commit.dot.font || "normal 10pt Calibri"; this.commit.dot.color = options.commit.dot.color || null; this.commit.dot.size = options.commit.dot.size || 3; this.commit.dot.strokeWidth = options.commit.dot.strokeWidth || null; diff --git a/build/gitgraph.min.js b/build/gitgraph.min.js index 2dd8f2d6..b34bbcfe 100644 --- a/build/gitgraph.min.js +++ b/build/gitgraph.min.js @@ -1,5 +1,5 @@ /* ========================================================== - * GitGraph v1.12.0 + * GitGraph v1.13.0 * https://github.com/nicoespeon/gitgraph.js * ========================================================== * Copyright (c) 2018 Nicolas CARLO (@nicoespeon) ٩(^‿^)۶ @@ -7,4 +7,4 @@ * * GitGraph.js may be freely distributed under the MIT Licence * ========================================================== */ -!function(){"use strict";function a(a){switch(a=q(a)?a:{},this.elementId="string"==typeof a.elementId?a.elementId:"gitGraph",this.author="string"==typeof a.author?a.author:"Sergio Flores ",this.reverseArrow=k(a.reverseArrow,!1),"string"==typeof a.template||q(a.template)?this.template=this.newTemplate(a.template):a.template instanceof e?this.template=a.template:this.template=this.newTemplate("metro"),this.mode=a.mode||null,"compact"===this.mode&&(this.template.commit.message.display=!1),a.orientation){case"vertical-reverse":this.template.commit.spacingY*=-1,this.orientation="vertical-reverse",this.template.branch.labelRotation=r(a,"template.branch.labelRotation")?0:a.template.branch.labelRotation,this.template.commit.tag.spacingY*=-1;break;case"horizontal":this.template.commit.message.display=!1,this.template.commit.spacingX=this.template.commit.spacingY,this.template.branch.spacingY=this.template.branch.spacingX,this.template.commit.spacingY=0,this.template.branch.spacingX=0,this.orientation="horizontal",this.template.branch.labelRotation=r(a,"template.branch.labelRotation")?-90:a.template.branch.labelRotation,this.template.commit.tag.spacingX=-this.template.commit.spacingX,this.template.commit.tag.spacingY=this.template.branch.spacingY;break;case"horizontal-reverse":this.template.commit.message.display=!1,this.template.commit.spacingX=-this.template.commit.spacingY,this.template.branch.spacingY=this.template.branch.spacingX,this.template.commit.spacingY=0,this.template.branch.spacingX=0,this.orientation="horizontal-reverse",this.template.branch.labelRotation=r(a,"template.branch.labelRotation")?90:a.template.branch.labelRotation,this.template.commit.tag.spacingX=-this.template.commit.spacingY,this.template.commit.tag.spacingY=this.template.branch.spacingY;break;default:this.orientation="vertical",this.template.branch.labelRotation=r(a,"template.branch.labelRotation")?0:a.template.branch.labelRotation}this.marginX=this.template.branch.spacingX+2*this.template.commit.dot.size,this.marginY=this.template.branch.spacingY+2*this.template.commit.dot.size,this.offsetX=0,this.offsetY=0,this.canvas=document.getElementById(this.elementId)||a.canvas,this.context=this.canvas.getContext("2d"),this.context.textBaseline="center",this.tooltip=document.createElement("div"),this.tooltip.className="gitgraph-tooltip",this.tooltip.style.position="fixed",this.tooltip.style.display="none",(a.tooltipContainer||document.body).appendChild(this.tooltip),this.HEAD=null,this.branches=[],this.commits=[],this.columnMax=0,this.commitOffsetX=a.initCommitOffsetX||0,this.commitOffsetY=a.initCommitOffsetY||0,this.mouseMoveOptions={handleEvent:this.hover,gitgraph:this},this.canvas.addEventListener("mousemove",this.mouseMoveOptions,!1),this.mouseDownOptions={handleEvent:this.click,gitgraph:this},this.canvas.addEventListener("mousedown",this.mouseDownOptions,!1),window.onresize=this.render.bind(this)}function b(b){if(b.parent instanceof a!=!1){if(b=q(b)?b:{},this.parent=b.parent,b.parentCommit&&b.parentBranch){if(b.parentCommit.branch!==b.parentBranch)return;this.parentCommit=b.parentCommit,this.parentBranch=b.parentBranch}else b.parentCommit?(this.parentCommit=b.parentCommit,this.parentBranch=b.parentCommit.branch):b.parentBranch?(this.parentCommit=h(b.parentBranch),this.parentBranch=b.parentBranch):(this.parentCommit=null,this.parentBranch=null);this.name="string"==typeof b.name?b.name:"no-name",this.commitDefaultOptions=q(b.commitDefaultOptions)?b.commitDefaultOptions:{},this.context=this.parent.context,this.template=this.parent.template,this.lineWidth=b.lineWidth||this.template.branch.lineWidth,this.lineDash=b.lineDash||this.template.branch.lineDash,this.showLabel=k(b.showLabel,this.template.branch.showLabel),this.spacingX=this.template.branch.spacingX,this.spacingY=this.template.branch.spacingY,this.size=0,this.height=0,this.width=0,this.commits=[],this.path=[],"number"==typeof b.column?this.column=b.column:(this.column=0,this.calculColumn()),this.parent.columnMax=this.column>this.parent.columnMax?this.column:this.parent.columnMax,this.offsetX=this.column*this.spacingX,this.offsetY=this.column*this.spacingY,this.parentBranch&&this.parentCommit?this.parentCommit===h(this.parentBranch)&&this.commits.length>0?this.startPoint={x:this.parentBranch.offsetX-this.parent.commitOffsetX+this.template.commit.spacingX,y:this.parentBranch.offsetY-this.parent.commitOffsetY+this.template.commit.spacingY,type:"start"}:this.startPoint={x:this.parentCommit.x,y:this.parentCommit.y,type:"start"}:this.startPoint=null;var c=this.column%this.template.colors.length;this.color=b.color||this.template.branch.color||this.template.colors[c],this.checkout()}}function c(b){b.parent instanceof a!=!1&&(b=q(b)?b:{},this.parent=b.parent,this.template=this.parent.template,this.context=this.parent.context,this.branch=b.branch,this.author=b.author||this.parent.author,this.date=b.date||(new Date).toUTCString(),this.detail=b.detail||null,this.sha1=b.sha1||Math.random(100).toString(16).substring(3,10),this.message=b.message||"He doesn't like George Michael! Boooo!",this.commitDotText=b.commitDotText,this.arrowDisplay=b.arrowDisplay,this.messageDisplay=k(b.messageDisplay,this.template.commit.message.display),this.messageAuthorDisplay=k(b.messageAuthorDisplay,this.template.commit.message.displayAuthor),this.messageBranchDisplay=k(b.messageBranchDisplay,this.template.commit.message.displayBranch),this.messageHashDisplay=k(b.messageHashDisplay,this.template.commit.message.displayHash),this.messageColor=b.messageColor||b.color,this.messageFont=b.messageFont||this.template.commit.message.font,this.dotColor=b.dotColor||b.color,this.dotSize=b.dotSize||this.template.commit.dot.size,this.dotStrokeWidth=b.dotStrokeWidth||this.template.commit.dot.strokeWidth,this.dotStrokeColor=b.dotStrokeColor||this.template.commit.dot.strokeColor||b.color,this.lineDash=b.lineDash||this.template.commit.dot.lineDash,this.type=b.type||null,this.tooltipDisplay=k(b.tooltipDisplay,!0),this.onClick=b.onClick||null,this.representedObject=b.representedObject||null,this.parentCommit=b.parentCommit,this.x=b.x,this.y=b.y,this.showLabel=b.showLabel,this.labelColor=b.labelColor||b.color,this.labelFont=b.labelFont||this.template.branch.labelFont,g(this,b),this.parent.commits.push(this))}function d(a,b){if(!q(a))throw new Error("You can't tag a commit that doesn't exist");b=q(b)?b:{},this.color=b.color||a.color,this.font=b.font||a.template.commit.tag.font;var c=a.context.font;a.context.font=this.font;var d=a.context.measureText(a.tag).width;this.width=Math.max(a.template.commit.tag.spacingX,d);var e=0,f=0,g=a.parent.columnMax+1;return p(a.parent)?(e=a.x-a.dotSize/2,f=g*a.template.commit.tag.spacingY-a.template.commit.tag.spacingY/2):(e=g*a.template.commit.tag.spacingX-a.template.commit.tag.spacingX/2+d/2,f=a.y-a.dotSize/2),l(a.context,e,f,a.tag,this.color,this.font,0,a.displayTagBox),a.context.font=c,this}function e(a){a=q(a)?a:{},a.branch=a.branch||{},a.arrow=a.arrow||{},a.commit=a.commit||{},a.commit.dot=a.commit.dot||{},a.commit.tag=a.commit.tag||{},a.commit.message=a.commit.message||{},this.colors=a.colors||["#6963FF","#47E8D4","#6BDB52","#E84BA5","#FFA657"],this.branch={},this.branch.color=a.branch.color||null,this.branch.lineWidth=a.branch.lineWidth||2,this.branch.lineDash=a.branch.lineDash||[],this.branch.showLabel=a.branch.showLabel||!1,this.branch.labelColor=a.branch.labelColor||null,this.branch.labelFont=a.branch.labelFont||"normal 8pt Calibri",this.branch.labelRotation=void 0!==a.branch.labelRotation?a.branch.labelRotation:null,this.branch.mergeStyle=a.branch.mergeStyle||"bezier",this.branch.spacingX="number"==typeof a.branch.spacingX?a.branch.spacingX:20,this.branch.spacingY=a.branch.spacingY||0,this.arrow={},this.arrow.size=a.arrow.size||null,this.arrow.color=a.arrow.color||null,this.arrow.active="number"==typeof this.arrow.size,this.arrow.offset=a.arrow.offset||2,this.commit={},this.commit.spacingX=a.commit.spacingX||0,this.commit.spacingY="number"==typeof a.commit.spacingY?a.commit.spacingY:25,this.commit.widthExtension="number"==typeof a.commit.widthExtension?a.commit.widthExtension:0,this.commit.tooltipHTMLFormatter=a.commit.tooltipHTMLFormatter||null,this.commit.shouldDisplayTooltipsInCompactMode=k(a.commit.shouldDisplayTooltipsInCompactMode,!0),this.commit.color=a.commit.color||null,this.commit.dot={},this.commit.dot.color=a.commit.dot.color||null,this.commit.dot.size=a.commit.dot.size||3,this.commit.dot.strokeWidth=a.commit.dot.strokeWidth||null,this.commit.dot.strokeColor=a.commit.dot.strokeColor||null,this.commit.dot.lineDash=a.commit.dot.lineDash||this.branch.lineDash,this.commit.tag={},this.commit.tag.color=a.commit.tag.color||this.commit.dot.color,this.commit.tag.font=a.commit.tag.font||a.commit.message.font||"normal 10pt Calibri",this.commit.tag.spacingX=this.branch.spacingX,this.commit.tag.spacingY=this.commit.spacingY,this.commit.message={},this.commit.message.display=k(a.commit.message.display,!0),this.commit.message.displayAuthor=k(a.commit.message.displayAuthor,!0),this.commit.message.displayBranch=k(a.commit.message.displayBranch,!0),this.commit.message.displayHash=k(a.commit.message.displayHash,!0),this.commit.message.color=a.commit.message.color||null,this.commit.message.font=a.commit.message.font||"normal 12pt Calibri"}function f(a){return a.slice(-1)[0]}function g(a,b){a.tag=b.tag||null,a.tagColor=b.tagColor||a.messageColor,a.tagFont=b.tagFont||a.template.commit.tag.font,a.displayTagBox=k(b.displayTagBox,!0)}function h(a){return f(a.commits)?f(a.commits):a.parentBranch?h(a.parentBranch):null}function i(a){return JSON.parse(JSON.stringify(a))}function j(a){var b=document.getElementsByTagName("body")[0],c=document.createElement("div"),d=document.createTextNode("Mg");c.appendChild(d),c.setAttribute("style","font: "+a+"; display: inline-block;"),b.appendChild(c);var e=c.offsetHeight;return b.removeChild(c),e}function k(a,b){return"boolean"==typeof a?a:b}function l(a,b,c,d,e,f,g,h){a.save(),a.translate(b,c),a.rotate(g*(Math.PI/180)),a.textAlign="center",a.font=f;var i=a.measureText(d).width,k=j(f);h?(a.beginPath(),a.rect(-i/2-4,-k/2+2,i+8,k+2),a.fillStyle=e,a.fill(),a.lineWidth=2,a.strokeStyle="black",a.stroke(),a.fillStyle="black"):a.fillStyle=e,a.fillText(d,0,k/2),a.restore()}function m(a,b,c){var d;document.createEvent?(d=document.createEvent("HTMLEvents"),d.initEvent(b,!0,!0)):(d=document.createEventObject(),d.eventType=b),d.eventName=b,d.data=c||{},document.createEvent?a.dispatchEvent(d):a.fireEvent("on"+d.eventType,d)}function n(a){var b,c;return c=1,window.devicePixelRatio&&(b=a.webkitBackingStorePixelRatio||a.mozBackingStorePixelRatio||a.msBackingStorePixelRatio||a.oBackingStorePixelRatio||a.backingStorePixelRatio||1,c*=window.devicePixelRatio/b),c}function o(a){return"vertical"===a.orientation||"vertical-reverse"===a.orientation}function p(a){return"horizontal"===a.orientation||"horizontal-reverse"===a.orientation}function q(a){return"object"==typeof a}function r(a,b){return!b.split(".").every(function(b){return"object"==typeof a&&null!==a&&b in a&&(a=a[b],!0)})}a.prototype.dispose=function(){this.canvas.removeEventListener("mousemove",this.mouseMoveOptions,!1),this.canvas.removeEventListener("mousedown",this.mouseDownOptions,!1)},a.prototype.branch=function(a){if("string"==typeof a){var c=a;a={},a.name=c}a=q(a)?a:{},a.parent=this,a.parentBranch=a.parentBranch||this.HEAD;var d=new b(a);return this.branches.push(d),d},a.prototype.orphanBranch=function(a){if("string"==typeof a){var c=a;a={},a.name=c}a=q(a)?a:{},a.parent=this;var d=new b(a);return this.branches.push(d),d},a.prototype.commit=function(a){return this.HEAD.commit(a),this},a.prototype.tag=function(a){return this.HEAD.tag(a),this},a.prototype.newTemplate=function(a){return"string"==typeof a?(new e).get(a):new e(a)},a.prototype.render=function(){this.scalingFactor=n(this.context);var a={x:Math.abs((this.columnMax+1)*this.template.branch.spacingX)+Math.abs(this.commitOffsetX)+2*this.marginX,y:Math.abs((this.columnMax+1)*this.template.branch.spacingY)+Math.abs(this.commitOffsetY)+2*this.marginY};this.template.commit.message.display&&(a.x+=800),a.x+=this.template.commit.widthExtension,this.canvas.style.width=a.x+"px",this.canvas.style.height=a.y+"px",this.canvas.width=a.x*this.scalingFactor,this.canvas.height=a.y*this.scalingFactor,this.context.clearRect(0,0,this.canvas.width,this.canvas.height),this.context.translate(this.marginX,this.marginY),this.template.commit.spacingY>0&&(this.context.translate(0,this.canvas.height-2*this.marginY),this.offsetY=this.canvas.height-2*this.marginY),this.template.commit.spacingX>0&&(this.context.translate(this.canvas.width-2*this.marginX,0),this.offsetX=this.canvas.width-2*this.marginX),this.context.scale(this.scalingFactor,this.scalingFactor);for(var b,c=this.branches.length-1;b=this.branches[c];c--)b.render();for(var d,e=0;d=this.commits[e];e++)d.render();m(this.canvas,"graph:render",{id:this.elementId})},a.prototype.applyCommits=function(a,b){function c(a){var b=document.getElementById(a),c=b.getBoundingClientRect();return{top:c.top+document.body.scrollTop,left:c.left+document.body.scrollLeft}}for(var d,e=a.offsetX||a.pageX-c(this.elementId).left,f=a.offsetY||a.pageY-c(this.elementId).top,g=0;d=this.commits[g];g++){var h=d.x+(this.offsetX+this.marginX)/this.scalingFactor-e,i=d.y+(this.offsetY+this.marginY)/this.scalingFactor-f;b(d,Math.sqrt(Math.pow(h,2)+Math.pow(i,2))Math.abs(this.template.commit.spacingY),k=this.x===this.parentCommit.x;o(this.parent)&&(j||k)&&(i=0);var l=this.template.branch.spacingY*g+this.template.commit.spacingY*h,m=(f||d)&&Math.abs(this.x-this.parentCommit.x)>Math.abs(this.template.commit.spacingX),n=this.y===this.parentCommit.y;p(this.parent)&&(m||n)&&(l=0),e=a(l,i),c=this.parentCommit.branch.color}var q=Math.PI/7,r=d?this.parentCommit.x:this.x,s=d?this.parentCommit.y:this.y,t=this.template.commit.dot.size+this.template.arrow.offset,u=t*Math.cos(e)+r,v=t*Math.sin(e)+s,w=(t+b)*Math.cos(e-q)+r,x=(t+b)*Math.sin(e-q)+s,y=(t+b/2)*Math.cos(e)+r,z=(t+b/2)*Math.sin(e)+s,A=(t+b)*Math.cos(e+q)+r,B=(t+b)*Math.sin(e+q)+s;this.context.beginPath(),this.context.fillStyle=c,this.context.moveTo(u,v),this.context.lineTo(w,x),this.context.quadraticCurveTo(y,z,A,B),this.context.lineTo(A,B),this.context.fill()},e.prototype.get=function(a){var b={};switch(a){case"blackarrow":b={branch:{color:"#000000",lineWidth:4,spacingX:50,mergeStyle:"straight",labelRotation:0},commit:{spacingY:-60,dot:{size:12,strokeColor:"#000000",strokeWidth:7},message:{color:"black"}},arrow:{size:16,offset:2.5}};break;case"metro":default:b={colors:["#979797","#008fb5","#f1c109"],branch:{lineWidth:10,spacingX:50,labelRotation:0},commit:{spacingY:-80,dot:{size:14},message:{font:"normal 14pt Arial"}}}}return new e(b)},Array.prototype.every||(Array.prototype.every=function(a,b){var c,d;if(null===this)throw new TypeError("this is null or not defined");var e=Object(this),f=e.length>>>0;if("function"!=typeof a)throw new TypeError;for(arguments.length>1&&(c=b),d=0;d",this.reverseArrow=k(a.reverseArrow,!1),"string"==typeof a.template||q(a.template)?this.template=this.newTemplate(a.template):a.template instanceof e?this.template=a.template:this.template=this.newTemplate("metro"),this.mode=a.mode||null,"compact"===this.mode&&(this.template.commit.message.display=!1),a.orientation){case"vertical-reverse":this.template.commit.spacingY*=-1,this.orientation="vertical-reverse",this.template.branch.labelRotation=r(a,"template.branch.labelRotation")?0:a.template.branch.labelRotation,this.template.commit.tag.spacingY*=-1;break;case"horizontal":this.template.commit.message.display=!1,this.template.commit.spacingX=this.template.commit.spacingY,this.template.branch.spacingY=this.template.branch.spacingX,this.template.commit.spacingY=0,this.template.branch.spacingX=0,this.orientation="horizontal",this.template.branch.labelRotation=r(a,"template.branch.labelRotation")?-90:a.template.branch.labelRotation,this.template.commit.tag.spacingX=-this.template.commit.spacingX,this.template.commit.tag.spacingY=this.template.branch.spacingY;break;case"horizontal-reverse":this.template.commit.message.display=!1,this.template.commit.spacingX=-this.template.commit.spacingY,this.template.branch.spacingY=this.template.branch.spacingX,this.template.commit.spacingY=0,this.template.branch.spacingX=0,this.orientation="horizontal-reverse",this.template.branch.labelRotation=r(a,"template.branch.labelRotation")?90:a.template.branch.labelRotation,this.template.commit.tag.spacingX=-this.template.commit.spacingY,this.template.commit.tag.spacingY=this.template.branch.spacingY;break;default:this.orientation="vertical",this.template.branch.labelRotation=r(a,"template.branch.labelRotation")?0:a.template.branch.labelRotation}this.marginX=this.template.branch.spacingX+2*this.template.commit.dot.size,this.marginY=this.template.branch.spacingY+2*this.template.commit.dot.size,this.offsetX=0,this.offsetY=0,this.canvas=document.getElementById(this.elementId)||a.canvas,this.context=this.canvas.getContext("2d"),this.context.textBaseline="center",this.tooltip=document.createElement("div"),this.tooltip.className="gitgraph-tooltip",this.tooltip.style.position="fixed",this.tooltip.style.display="none",(a.tooltipContainer||document.body).appendChild(this.tooltip),this.HEAD=null,this.branches=[],this.commits=[],this.columnMax=0,this.commitOffsetX=a.initCommitOffsetX||0,this.commitOffsetY=a.initCommitOffsetY||0,this.mouseMoveOptions={handleEvent:this.hover,gitgraph:this},this.canvas.addEventListener("mousemove",this.mouseMoveOptions,!1),this.mouseDownOptions={handleEvent:this.click,gitgraph:this},this.canvas.addEventListener("mousedown",this.mouseDownOptions,!1),window.onresize=this.render.bind(this)}function b(b){if(b.parent instanceof a!=!1){if(b=q(b)?b:{},this.parent=b.parent,b.parentCommit&&b.parentBranch){if(b.parentCommit.branch!==b.parentBranch)return;this.parentCommit=b.parentCommit,this.parentBranch=b.parentBranch}else b.parentCommit?(this.parentCommit=b.parentCommit,this.parentBranch=b.parentCommit.branch):b.parentBranch?(this.parentCommit=h(b.parentBranch),this.parentBranch=b.parentBranch):(this.parentCommit=null,this.parentBranch=null);this.name="string"==typeof b.name?b.name:"no-name",this.commitDefaultOptions=q(b.commitDefaultOptions)?b.commitDefaultOptions:{},this.context=this.parent.context,this.template=this.parent.template,this.lineWidth=b.lineWidth||this.template.branch.lineWidth,this.lineDash=b.lineDash||this.template.branch.lineDash,this.showLabel=k(b.showLabel,this.template.branch.showLabel),this.spacingX=this.template.branch.spacingX,this.spacingY=this.template.branch.spacingY,this.size=0,this.height=0,this.width=0,this.commits=[],this.path=[],"number"==typeof b.column?this.column=b.column:(this.column=0,this.calculColumn()),this.parent.columnMax=this.column>this.parent.columnMax?this.column:this.parent.columnMax,this.offsetX=this.column*this.spacingX,this.offsetY=this.column*this.spacingY,this.parentBranch&&this.parentCommit?this.parentCommit===h(this.parentBranch)&&this.commits.length>0?this.startPoint={x:this.parentBranch.offsetX-this.parent.commitOffsetX+this.template.commit.spacingX,y:this.parentBranch.offsetY-this.parent.commitOffsetY+this.template.commit.spacingY,type:"start"}:this.startPoint={x:this.parentCommit.x,y:this.parentCommit.y,type:"start"}:this.startPoint=null;var c=this.column%this.template.colors.length;this.color=b.color||this.template.branch.color||this.template.colors[c],this.checkout()}}function c(b){b.parent instanceof a!=!1&&(b=q(b)?b:{},this.parent=b.parent,this.template=this.parent.template,this.context=this.parent.context,this.branch=b.branch,this.author=b.author||this.parent.author,this.date=b.date||(new Date).toUTCString(),this.detail=b.detail||null,this.sha1=b.sha1||Math.random(100).toString(16).substring(3,10),this.message=b.message||"He doesn't like George Michael! Boooo!",this.commitDotText=b.commitDotText,this.arrowDisplay=b.arrowDisplay,this.messageDisplay=k(b.messageDisplay,this.template.commit.message.display),this.messageAuthorDisplay=k(b.messageAuthorDisplay,this.template.commit.message.displayAuthor),this.messageBranchDisplay=k(b.messageBranchDisplay,this.template.commit.message.displayBranch),this.messageHashDisplay=k(b.messageHashDisplay,this.template.commit.message.displayHash),this.messageColor=b.messageColor||b.color,this.messageFont=b.messageFont||this.template.commit.message.font,this.dotFont=b.dotFont||this.template.commit.dot.font,this.dotColor=b.dotColor||b.color,this.dotSize=b.dotSize||this.template.commit.dot.size,this.dotStrokeWidth=b.dotStrokeWidth||this.template.commit.dot.strokeWidth,this.dotStrokeColor=b.dotStrokeColor||this.template.commit.dot.strokeColor||b.color,this.lineDash=b.lineDash||this.template.commit.dot.lineDash,this.type=b.type||null,this.tooltipDisplay=k(b.tooltipDisplay,!0),this.onClick=b.onClick||null,this.representedObject=b.representedObject||null,this.parentCommit=b.parentCommit,this.x=b.x,this.y=b.y,this.showLabel=b.showLabel,this.labelColor=b.labelColor||b.color,this.labelFont=b.labelFont||this.template.branch.labelFont,g(this,b),this.parent.commits.push(this))}function d(a,b){if(!q(a))throw new Error("You can't tag a commit that doesn't exist");b=q(b)?b:{},this.color=b.color||a.color,this.font=b.font||a.template.commit.tag.font;var c=a.context.font;a.context.font=this.font;var d=a.context.measureText(a.tag).width;this.width=Math.max(a.template.commit.tag.spacingX,d);var e=0,f=0,g=a.parent.columnMax+1;return p(a.parent)?(e=a.x-a.dotSize/2,f=g*a.template.commit.tag.spacingY-a.template.commit.tag.spacingY/2):(e=g*a.template.commit.tag.spacingX-a.template.commit.tag.spacingX/2+d/2,f=a.y-a.dotSize/2),l(a.context,e,f,a.tag,this.color,this.font,0,a.displayTagBox),a.context.font=c,this}function e(a){a=q(a)?a:{},a.branch=a.branch||{},a.arrow=a.arrow||{},a.commit=a.commit||{},a.commit.dot=a.commit.dot||{},a.commit.tag=a.commit.tag||{},a.commit.message=a.commit.message||{},this.colors=a.colors||["#6963FF","#47E8D4","#6BDB52","#E84BA5","#FFA657"],this.branch={},this.branch.color=a.branch.color||null,this.branch.lineWidth=a.branch.lineWidth||2,this.branch.lineDash=a.branch.lineDash||[],this.branch.showLabel=a.branch.showLabel||!1,this.branch.labelColor=a.branch.labelColor||null,this.branch.labelFont=a.branch.labelFont||"normal 8pt Calibri",this.branch.labelRotation=void 0!==a.branch.labelRotation?a.branch.labelRotation:null,this.branch.mergeStyle=a.branch.mergeStyle||"bezier",this.branch.spacingX="number"==typeof a.branch.spacingX?a.branch.spacingX:20,this.branch.spacingY=a.branch.spacingY||0,this.arrow={},this.arrow.size=a.arrow.size||null,this.arrow.color=a.arrow.color||null,this.arrow.active="number"==typeof this.arrow.size,this.arrow.offset=a.arrow.offset||2,this.commit={},this.commit.spacingX=a.commit.spacingX||0,this.commit.spacingY="number"==typeof a.commit.spacingY?a.commit.spacingY:25,this.commit.widthExtension="number"==typeof a.commit.widthExtension?a.commit.widthExtension:0,this.commit.tooltipHTMLFormatter=a.commit.tooltipHTMLFormatter||null,this.commit.shouldDisplayTooltipsInCompactMode=k(a.commit.shouldDisplayTooltipsInCompactMode,!0),this.commit.color=a.commit.color||null,this.commit.dot={},this.commit.dot.font=a.commit.dot.font||"normal 10pt Calibri",this.commit.dot.color=a.commit.dot.color||null,this.commit.dot.size=a.commit.dot.size||3,this.commit.dot.strokeWidth=a.commit.dot.strokeWidth||null,this.commit.dot.strokeColor=a.commit.dot.strokeColor||null,this.commit.dot.lineDash=a.commit.dot.lineDash||this.branch.lineDash,this.commit.tag={},this.commit.tag.color=a.commit.tag.color||this.commit.dot.color,this.commit.tag.font=a.commit.tag.font||a.commit.message.font||"normal 10pt Calibri",this.commit.tag.spacingX=this.branch.spacingX,this.commit.tag.spacingY=this.commit.spacingY,this.commit.message={},this.commit.message.display=k(a.commit.message.display,!0),this.commit.message.displayAuthor=k(a.commit.message.displayAuthor,!0),this.commit.message.displayBranch=k(a.commit.message.displayBranch,!0),this.commit.message.displayHash=k(a.commit.message.displayHash,!0),this.commit.message.color=a.commit.message.color||null,this.commit.message.font=a.commit.message.font||"normal 12pt Calibri"}function f(a){return a.slice(-1)[0]}function g(a,b){a.tag=b.tag||null,a.tagColor=b.tagColor||a.messageColor,a.tagFont=b.tagFont||a.template.commit.tag.font,a.displayTagBox=k(b.displayTagBox,!0)}function h(a){return f(a.commits)?f(a.commits):a.parentBranch?h(a.parentBranch):null}function i(a){return JSON.parse(JSON.stringify(a))}function j(a){var b=document.getElementsByTagName("body")[0],c=document.createElement("div"),d=document.createTextNode("Mg");c.appendChild(d),c.setAttribute("style","font: "+a+"; display: inline-block;"),b.appendChild(c);var e=c.offsetHeight;return b.removeChild(c),e}function k(a,b){return"boolean"==typeof a?a:b}function l(a,b,c,d,e,f,g,h){a.save(),a.translate(b,c),a.rotate(g*(Math.PI/180)),a.textAlign="center",a.font=f;var i=a.measureText(d).width,k=j(f);h?(a.beginPath(),a.rect(-i/2-4,-k/2+2,i+8,k+2),a.fillStyle=e,a.fill(),a.lineWidth=2,a.strokeStyle="black",a.stroke(),a.fillStyle="black"):a.fillStyle=e,a.fillText(d,0,k/2),a.restore()}function m(a,b,c){var d;document.createEvent?(d=document.createEvent("HTMLEvents"),d.initEvent(b,!0,!0)):(d=document.createEventObject(),d.eventType=b),d.eventName=b,d.data=c||{},document.createEvent?a.dispatchEvent(d):a.fireEvent("on"+d.eventType,d)}function n(a){var b,c;return c=1,window.devicePixelRatio&&(b=a.webkitBackingStorePixelRatio||a.mozBackingStorePixelRatio||a.msBackingStorePixelRatio||a.oBackingStorePixelRatio||a.backingStorePixelRatio||1,c*=window.devicePixelRatio/b),c}function o(a){return"vertical"===a.orientation||"vertical-reverse"===a.orientation}function p(a){return"horizontal"===a.orientation||"horizontal-reverse"===a.orientation}function q(a){return"object"==typeof a}function r(a,b){return!b.split(".").every(function(b){return"object"==typeof a&&null!==a&&b in a&&(a=a[b],!0)})}a.prototype.dispose=function(){this.canvas.removeEventListener("mousemove",this.mouseMoveOptions,!1),this.canvas.removeEventListener("mousedown",this.mouseDownOptions,!1)},a.prototype.branch=function(a){if("string"==typeof a){var c=a;a={},a.name=c}a=q(a)?a:{},a.parent=this,a.parentBranch=a.parentBranch||this.HEAD;var d=new b(a);return this.branches.push(d),d},a.prototype.orphanBranch=function(a){if("string"==typeof a){var c=a;a={},a.name=c}a=q(a)?a:{},a.parent=this;var d=new b(a);return this.branches.push(d),d},a.prototype.commit=function(a){return this.HEAD.commit(a),this},a.prototype.tag=function(a){return this.HEAD.tag(a),this},a.prototype.newTemplate=function(a){return"string"==typeof a?(new e).get(a):new e(a)},a.prototype.render=function(){this.scalingFactor=n(this.context);var a={x:Math.abs((this.columnMax+1)*this.template.branch.spacingX)+Math.abs(this.commitOffsetX)+2*this.marginX,y:Math.abs((this.columnMax+1)*this.template.branch.spacingY)+Math.abs(this.commitOffsetY)+2*this.marginY};this.template.commit.message.display&&(a.x+=800),a.x+=this.template.commit.widthExtension,this.canvas.style.width=a.x+"px",this.canvas.style.height=a.y+"px",this.canvas.width=a.x*this.scalingFactor,this.canvas.height=a.y*this.scalingFactor,this.context.clearRect(0,0,this.canvas.width,this.canvas.height),this.context.translate(this.marginX,this.marginY),this.template.commit.spacingY>0&&(this.context.translate(0,this.canvas.height-2*this.marginY),this.offsetY=this.canvas.height-2*this.marginY),this.template.commit.spacingX>0&&(this.context.translate(this.canvas.width-2*this.marginX,0),this.offsetX=this.canvas.width-2*this.marginX),this.context.scale(this.scalingFactor,this.scalingFactor);for(var b,c=this.branches.length-1;b=this.branches[c];c--)b.render();for(var d,e=0;d=this.commits[e];e++)d.render();m(this.canvas,"graph:render",{id:this.elementId})},a.prototype.applyCommits=function(a,b){function c(a){var b=document.getElementById(a),c=b.getBoundingClientRect();return{top:c.top+document.body.scrollTop,left:c.left+document.body.scrollLeft}}for(var d,e=a.offsetX||a.pageX-c(this.elementId).left,f=a.offsetY||a.pageY-c(this.elementId).top,g=0;d=this.commits[g];g++){var h=d.x+(this.offsetX+this.marginX)/this.scalingFactor-e,i=d.y+(this.offsetY+this.marginY)/this.scalingFactor-f;b(d,Math.sqrt(Math.pow(h,2)+Math.pow(i,2))Math.abs(this.template.commit.spacingY),k=this.x===this.parentCommit.x;o(this.parent)&&(j||k)&&(i=0);var l=this.template.branch.spacingY*g+this.template.commit.spacingY*h,m=(f||d)&&Math.abs(this.x-this.parentCommit.x)>Math.abs(this.template.commit.spacingX),n=this.y===this.parentCommit.y;p(this.parent)&&(m||n)&&(l=0),e=a(l,i),c=this.parentCommit.branch.color}var q=Math.PI/7,r=d?this.parentCommit.x:this.x,s=d?this.parentCommit.y:this.y,t=this.template.commit.dot.size+this.template.arrow.offset,u=t*Math.cos(e)+r,v=t*Math.sin(e)+s,w=(t+b)*Math.cos(e-q)+r,x=(t+b)*Math.sin(e-q)+s,y=(t+b/2)*Math.cos(e)+r,z=(t+b/2)*Math.sin(e)+s,A=(t+b)*Math.cos(e+q)+r,B=(t+b)*Math.sin(e+q)+s;this.context.beginPath(),this.context.fillStyle=c,this.context.moveTo(u,v),this.context.lineTo(w,x),this.context.quadraticCurveTo(y,z,A,B),this.context.lineTo(A,B),this.context.fill()},e.prototype.get=function(a){var b={};switch(a){case"blackarrow":b={branch:{color:"#000000",lineWidth:4,spacingX:50,mergeStyle:"straight",labelRotation:0},commit:{spacingY:-60,dot:{size:12,strokeColor:"#000000",strokeWidth:7},message:{color:"black"}},arrow:{size:16,offset:2.5}};break;case"metro":default:b={colors:["#979797","#008fb5","#f1c109"],branch:{lineWidth:10,spacingX:50,labelRotation:0},commit:{spacingY:-80,dot:{size:14},message:{font:"normal 14pt Arial"}}}}return new e(b)},Array.prototype.every||(Array.prototype.every=function(a,b){var c,d;if(null===this)throw new TypeError("this is null or not defined");var e=Object(this),f=e.length>>>0;if("function"!=typeof a)throw new TypeError;for(arguments.length>1&&(c=b),d=0;dThis:
Source:
@@ -773,7 +773,7 @@
This:
Source:
@@ -987,7 +987,7 @@
Properties
Source:
@@ -1083,7 +1083,7 @@
This:
Source:
@@ -1350,7 +1350,7 @@
Properties
Source:
@@ -1469,7 +1469,7 @@
This:
Source:
@@ -1871,7 +1871,7 @@
Properties
Source:
@@ -1928,7 +1928,7 @@

Home

Classes

  • diff --git a/docs/Commit.html b/docs/Commit.html index 64860256..e7517fc5 100644 --- a/docs/Commit.html +++ b/docs/Commit.html @@ -687,6 +687,45 @@
    Properties
    + + + dotFont + + + + + +string + + + + + + + + + <optional>
    + + + + + + + + + + + + this.template.commit.dot.font + + + + +

    Font of the dot

    + + + + dotColor @@ -1426,7 +1465,7 @@
    Properties
    Source:
    @@ -1535,7 +1574,7 @@
    This:
    Source:
    @@ -1624,7 +1663,7 @@
    This:
    Source:
    @@ -1674,7 +1713,7 @@

    Home

    Classes

    • diff --git a/docs/GitGraph.html b/docs/GitGraph.html index d1044c19..4a5f1614 100644 --- a/docs/GitGraph.html +++ b/docs/GitGraph.html @@ -2107,7 +2107,7 @@

      Home

      Classes

      • diff --git a/docs/Tag.html b/docs/Tag.html index 6aa4505b..795b75c1 100644 --- a/docs/Tag.html +++ b/docs/Tag.html @@ -296,7 +296,7 @@
        Properties
        Source:
        @@ -380,7 +380,7 @@

        Home

        Classes

        • diff --git a/docs/Template.html b/docs/Template.html index cd302bbf..dcb4fd70 100644 --- a/docs/Template.html +++ b/docs/Template.html @@ -654,6 +654,43 @@
          Properties
          + + + commit.dot.font + + + + + +string + + + + + + + + + <optional>
          + + + + + + + + + + + + + + +

          Commit dot color

          + + + + commit.dot.color @@ -1182,7 +1219,7 @@
          Properties
          Source:
          @@ -1337,7 +1374,7 @@
          Parameters:
          Source:
          @@ -1409,7 +1446,7 @@

          Home

          Classes

          • diff --git a/docs/gitgraph.js.html b/docs/gitgraph.js.html index 5cd78420..25e1f379 100644 --- a/docs/gitgraph.js.html +++ b/docs/gitgraph.js.html @@ -654,6 +654,7 @@

            Source: gitgraph.js

            * @property {string} [tagFont = this.template.commit.tag.font] - Font of the tag * @property {string} [displayTagBox = true] - If true, display a box around the tag * + * @property {string} [dotFont = this.template.commit.dot.font] - Font of the dot * @property {string} [dotColor = color] - Specific dot color * @property {number} [dotSize = this.template.commit.dot.size] - Dot size * @property {number} [dotStrokeWidth = this.template.commit.dot.strokeWidth] - Dot stroke width @@ -1074,6 +1075,8 @@

            Source: gitgraph.js

            * @param {string} [options.tagFont = this.template.commit.tag.font] - Font of the tag * @param {string} [options.displayTagBox = true] - If true, display a box around the tag * + + * @param {string} [options.dotFont = this.template.commit.dot.font] - Font of the dot * @param {string} [options.dotColor = options.color] - Specific dot color * @param {number} [options.dotSize = this.template.commit.dot.size] - Dot size * @param {number} [options.dotStrokeWidth = this.template.commit.dot.strokeWidth] - Dot stroke width @@ -1123,6 +1126,7 @@

            Source: gitgraph.js

            this.messageHashDisplay = _booleanOptionOr(options.messageHashDisplay, this.template.commit.message.displayHash); this.messageColor = options.messageColor || options.color; this.messageFont = options.messageFont || this.template.commit.message.font; + this.dotFont = options.dotFont || this.template.commit.dot.font; this.dotColor = options.dotColor || options.color; this.dotSize = options.dotSize || this.template.commit.dot.size; this.dotStrokeWidth = options.dotStrokeWidth || this.template.commit.dot.strokeWidth; @@ -1240,6 +1244,7 @@

            Source: gitgraph.js

            var previousTextBaseline = this.context.textBaseline; var previousTextAlign = this.context.textAlign; + this.context.font = this.dotFont; this.context.fillStyle = "#000"; this.context.textAlign = "center"; this.context.textBaseline = "middle"; @@ -1420,6 +1425,7 @@

            Source: gitgraph.js

            * @param {number} [options.commit.spacingY] - Space between commits * @param {number} [options.commit.widthExtension = 0] - Additional width to be added to the calculated width * @param {string} [options.commit.color] - Master commit color (dot & message) + * @param {string} [options.commit.dot.font] - Commit dot color * @param {string} [options.commit.dot.color] - Commit dot color * @param {number} [options.commit.dot.size] - Commit dot size * @param {number} [options.commit.dot.strokeWidth] - Commit dot stroke width @@ -1494,6 +1500,7 @@

            Source: gitgraph.js

            this.commit.dot = {}; // Only one color, if null message takes branch color (only dot) + this.commit.dot.font = options.commit.dot.font || "normal 10pt Calibri"; this.commit.dot.color = options.commit.dot.color || null; this.commit.dot.size = options.commit.dot.size || 3; this.commit.dot.strokeWidth = options.commit.dot.strokeWidth || null; @@ -1897,7 +1904,7 @@

            Home

            Classes

            • diff --git a/docs/global.html b/docs/global.html index 8cf3433f..b7d4ad42 100644 --- a/docs/global.html +++ b/docs/global.html @@ -550,6 +550,43 @@
              Properties:
              + + + dotFont + + + + + +string + + + + + + + + + <optional>
              + + + + + + + + + + this.template.commit.dot.font + + + + +

              Font of the dot

              + + + + dotColor @@ -1524,7 +1561,7 @@

              Home

              Classes

              • diff --git a/docs/index.html b/docs/index.html index ab9b443a..3bf41a73 100644 --- a/docs/index.html +++ b/docs/index.html @@ -115,7 +115,7 @@

                Home

                Classes

                • diff --git a/package.json b/package.json index b77c6ec5..b037a408 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "gitgraph.js", - "version": "1.12.0", + "version": "1.13.0", "author": "Nicolas Carlo ", "description": "A JavaScript library to draw pretty git graphs in the browser", "contributors": [ diff --git a/src/gitgraph.js b/src/gitgraph.js index 0ee32097..9452e99b 100644 --- a/src/gitgraph.js +++ b/src/gitgraph.js @@ -626,6 +626,7 @@ * @property {string} [tagFont = this.template.commit.tag.font] - Font of the tag * @property {string} [displayTagBox = true] - If true, display a box around the tag * + * @property {string} [dotFont = this.template.commit.dot.font] - Font of the dot * @property {string} [dotColor = color] - Specific dot color * @property {number} [dotSize = this.template.commit.dot.size] - Dot size * @property {number} [dotStrokeWidth = this.template.commit.dot.strokeWidth] - Dot stroke width @@ -1046,6 +1047,8 @@ * @param {string} [options.tagFont = this.template.commit.tag.font] - Font of the tag * @param {string} [options.displayTagBox = true] - If true, display a box around the tag * + + * @param {string} [options.dotFont = this.template.commit.dot.font] - Font of the dot * @param {string} [options.dotColor = options.color] - Specific dot color * @param {number} [options.dotSize = this.template.commit.dot.size] - Dot size * @param {number} [options.dotStrokeWidth = this.template.commit.dot.strokeWidth] - Dot stroke width @@ -1095,6 +1098,7 @@ this.messageHashDisplay = _booleanOptionOr(options.messageHashDisplay, this.template.commit.message.displayHash); this.messageColor = options.messageColor || options.color; this.messageFont = options.messageFont || this.template.commit.message.font; + this.dotFont = options.dotFont || this.template.commit.dot.font; this.dotColor = options.dotColor || options.color; this.dotSize = options.dotSize || this.template.commit.dot.size; this.dotStrokeWidth = options.dotStrokeWidth || this.template.commit.dot.strokeWidth; @@ -1212,6 +1216,7 @@ var previousTextBaseline = this.context.textBaseline; var previousTextAlign = this.context.textAlign; + this.context.font = this.dotFont; this.context.fillStyle = "#000"; this.context.textAlign = "center"; this.context.textBaseline = "middle"; @@ -1392,6 +1397,7 @@ * @param {number} [options.commit.spacingY] - Space between commits * @param {number} [options.commit.widthExtension = 0] - Additional width to be added to the calculated width * @param {string} [options.commit.color] - Master commit color (dot & message) + * @param {string} [options.commit.dot.font] - Commit dot color * @param {string} [options.commit.dot.color] - Commit dot color * @param {number} [options.commit.dot.size] - Commit dot size * @param {number} [options.commit.dot.strokeWidth] - Commit dot stroke width @@ -1466,6 +1472,7 @@ this.commit.dot = {}; // Only one color, if null message takes branch color (only dot) + this.commit.dot.font = options.commit.dot.font || "normal 10pt Calibri"; this.commit.dot.color = options.commit.dot.color || null; this.commit.dot.size = options.commit.dot.size || 3; this.commit.dot.strokeWidth = options.commit.dot.strokeWidth || null;