From d3ba48a1b79e7fe57ffedb544aa4423efb7acf72 Mon Sep 17 00:00:00 2001 From: Adam Hotait Date: Fri, 1 Apr 2022 19:06:45 +0200 Subject: [PATCH 01/19] fix(sequencediagram): draw arrowheads on top of activation boxes --- demos/sequence.html | 5 +- src/diagrams/sequence/sequenceRenderer.js | 94 +++++++++++++++-------- 2 files changed, 64 insertions(+), 35 deletions(-) diff --git a/demos/sequence.html b/demos/sequence.html index b6930a722..7dab8cad9 100644 --- a/demos/sequence.html +++ b/demos/sequence.html @@ -40,7 +40,8 @@ Note over John: After a few more moments, John
finally snaps out of it. end alt either this - Alice->>John: Yes + Alice->>+John: Yes + John-->>-Alice: OK else or this Alice->>John: No else or this will happen @@ -69,4 +70,4 @@ - \ No newline at end of file + diff --git a/src/diagrams/sequence/sequenceRenderer.js b/src/diagrams/sequence/sequenceRenderer.js index 48507b9f7..0aa459641 100644 --- a/src/diagrams/sequence/sequenceRenderer.js +++ b/src/diagrams/sequence/sequenceRenderer.js @@ -272,20 +272,65 @@ const actorFont = (cnf) => { }; /** - * Draws a message + * Process a message by adding its dimensions to the bound. It returns the Y coordinate of the + * message so it can be drawn later. We do not draw the message at this point so the arrowhead can + * be on top of the activation box. * - * @param {any} g - The parent of the message element + * @param {any} diagram - The parent of the message element * @param {any} msgModel - The model containing fields describing a message + * @returns {number} LineStarty - The Y coordinate at which the message line starts */ -const drawMessage = function (g, msgModel) { +const boundMessage = function (diagram, msgModel) { bounds.bumpVerticalPos(10); - const { startx, stopx, starty, message, type, sequenceIndex } = msgModel; + const { startx, stopx, message } = msgModel; const lines = common.splitBreaks(message).length; let textDims = utils.calculateTextDimensions(message, messageFont(conf)); const lineHeight = textDims.height / lines; msgModel.height += lineHeight; bounds.bumpVerticalPos(lineHeight); + + let lineStarty; + let totalOffset = textDims.height - 10; + let textWidth = textDims.width; + + if (startx === stopx) { + lineStarty = bounds.getVerticalPos() + totalOffset; + if (!conf.rightAngles) { + totalOffset += conf.boxMargin; + lineStarty = bounds.getVerticalPos() + totalOffset; + } + totalOffset += 30; + const dx = Math.max(textWidth / 2, conf.width / 2); + bounds.insert( + startx - dx, + bounds.getVerticalPos() - 10 + totalOffset, + stopx + dx, + bounds.getVerticalPos() + 30 + totalOffset + ); + } else { + totalOffset += conf.boxMargin; + lineStarty = bounds.getVerticalPos() + totalOffset; + bounds.insert(startx, lineStarty - 10, stopx, lineStarty); + } + bounds.bumpVerticalPos(totalOffset); + msgModel.height += totalOffset; + msgModel.stopy = msgModel.starty + msgModel.height; + bounds.insert(msgModel.fromBounds, msgModel.starty, msgModel.toBounds, msgModel.stopy); + + return lineStarty; +}; + +/** + * Draws a message. Note that the bounds have previously been updated by boundMessage. + * + * @param {any} diagram - The parent of the message element + * @param {any} msgModel - The model containing fields describing a message + * @param {float} lineStarty - The Y coordinate at which the message line starts + */ +const drawMessage = function (diagram, msgModel, lineStarty) { + const { startx, stopx, starty, message, type, sequenceIndex } = msgModel; + let textDims = utils.calculateTextDimensions(message, messageFont(conf)); const textObj = svgDraw.getTextObj(); textObj.x = startx; textObj.y = starty + 10; @@ -301,17 +346,14 @@ const drawMessage = function (g, msgModel) { textObj.textMargin = conf.wrapPadding; textObj.tspan = false; - drawText(g, textObj); - - let totalOffset = textDims.height - 10; + drawText(diagram, textObj); let textWidth = textDims.width; - let line, lineStarty; + let line; if (startx === stopx) { - lineStarty = bounds.getVerticalPos() + totalOffset; if (conf.rightAngles) { - line = g + line = diagram .append('path') .attr( 'd', @@ -320,10 +362,7 @@ const drawMessage = function (g, msgModel) { } H ${startx}` ); } else { - totalOffset += conf.boxMargin; - - lineStarty = bounds.getVerticalPos() + totalOffset; - line = g + line = diagram .append('path') .attr( 'd', @@ -345,24 +384,12 @@ const drawMessage = function (g, msgModel) { (lineStarty + 20) ); } - - totalOffset += 30; - const dx = Math.max(textWidth / 2, conf.width / 2); - bounds.insert( - startx - dx, - bounds.getVerticalPos() - 10 + totalOffset, - stopx + dx, - bounds.getVerticalPos() + 30 + totalOffset - ); } else { - totalOffset += conf.boxMargin; - lineStarty = bounds.getVerticalPos() + totalOffset; - line = g.append('line'); + line = diagram.append('line'); line.attr('x1', startx); line.attr('y1', lineStarty); line.attr('x2', stopx); line.attr('y2', lineStarty); - bounds.insert(startx, lineStarty - 10, stopx, lineStarty); } // Make an SVG Container // Draw the line @@ -407,7 +434,8 @@ const drawMessage = function (g, msgModel) { // add node number if (sequenceDb.showSequenceNumbers() || conf.showSequenceNumbers) { line.attr('marker-start', 'url(' + url + '#sequencenumber)'); - g.append('text') + diagram + .append('text') .attr('x', startx) .attr('y', lineStarty + 4) .attr('font-family', 'sans-serif') @@ -417,10 +445,6 @@ const drawMessage = function (g, msgModel) { .attr('class', 'sequenceNumber') .text(sequenceIndex); } - bounds.bumpVerticalPos(totalOffset); - msgModel.height += totalOffset; - msgModel.stopy = msgModel.starty + msgModel.height; - bounds.insert(msgModel.fromBounds, msgModel.starty, msgModel.toBounds, msgModel.stopy); }; export const drawActors = function (diagram, actors, actorKeys, verticalPos) { @@ -613,6 +637,7 @@ export const draw = function (text, id) { // Draw the messages/signals let sequenceIndex = 1; + let messagesToDraw = Array(); messages.forEach(function (msg) { let loopModel, noteModel, msgModel; @@ -722,7 +747,8 @@ export const draw = function (text, id) { msgModel = msg.msgModel; msgModel.starty = bounds.getVerticalPos(); msgModel.sequenceIndex = sequenceIndex; - drawMessage(diagram, msgModel); + let lineStarty = boundMessage(diagram, msgModel); + messagesToDraw.push({ messageModel: msgModel, lineStarty: lineStarty }); bounds.models.addMessage(msgModel); } catch (e) { log.error('error while drawing message', e); @@ -746,6 +772,8 @@ export const draw = function (text, id) { } }); + messagesToDraw.forEach((e) => drawMessage(diagram, e.messageModel, e.lineStarty)); + if (conf.mirrorActors) { // Draw actors below diagram bounds.bumpVerticalPos(conf.boxMargin * 2); From 65b0b8362569f03964fb708230b74f3ae5f4350c Mon Sep 17 00:00:00 2001 From: Adam B Date: Thu, 7 Apr 2022 13:20:58 +0000 Subject: [PATCH 02/19] Adds accDescription, draws tags to svg --- cypress/integration/rendering/gantt.spec.js | 32 ++++++++++++++ demos/gantt.html | 43 +++++++++++++++++++ src/accessibility.js | 10 +++-- src/diagrams/gantt/ganttDb.js | 11 +++++ src/diagrams/gantt/ganttDb.spec.js | 1 + src/diagrams/gantt/ganttRenderer.js | 3 ++ src/diagrams/gantt/parser/gantt.jison | 34 ++++++++------- src/diagrams/gantt/parser/gantt.spec.js | 17 ++++++++ src/diagrams/sequence/sequenceDiagram.spec.js | 2 +- 9 files changed, 133 insertions(+), 20 deletions(-) create mode 100644 demos/gantt.html diff --git a/cypress/integration/rendering/gantt.spec.js b/cypress/integration/rendering/gantt.spec.js index dd521f779..c77c26109 100644 --- a/cypress/integration/rendering/gantt.spec.js +++ b/cypress/integration/rendering/gantt.spec.js @@ -291,4 +291,36 @@ describe('Gantt diagram', () => { { gantt: { topAxis: true } } ); }); + + it('should render accessibility tags', function () { + const expectedTitle = 'Gantt Diagram'; + const expectedAccDescription = 'Tasks for Q4'; + renderGraph( + ` + gantt + title ${expectedTitle} + accDescription ${expectedAccDescription} + dateFormat YYYY-MM-DD + section Section + A task :a1, 2014-01-01, 30d + `, + {} + ); + cy.get('svg').should((svg) => { + const el = svg.get(0); + const children = Array.from(el.children); + + const titleEl = children.find(function (node) { + return node.tagName === 'title'; + }); + const descriptionEl = children.find(function (node) { + return node.tagName === 'desc'; + }); + + expect(titleEl).to.exist; + expect(titleEl.textContent).to.equal(expectedTitle); + expect(descriptionEl).to.exist; + expect(descriptionEl.textContent).to.equal(expectedAccDescription); + }); + }); }); diff --git a/demos/gantt.html b/demos/gantt.html new file mode 100644 index 000000000..68bf4a961 --- /dev/null +++ b/demos/gantt.html @@ -0,0 +1,43 @@ + + + + + + +Mermaid Quick Test Page + + + + + + + +
+gantt + title A Gantt Diagram + + dateFormat YYYY-MM-DD + section Section + A task :a1, 2014-01-01, 30d + Another task :after a1 , 20d + section Another + Task in sec :2014-01-12 , 12d + another task : 24d +
+ + + + + + + diff --git a/src/accessibility.js b/src/accessibility.js index 046fea6ad..05720500b 100644 --- a/src/accessibility.js +++ b/src/accessibility.js @@ -1,17 +1,21 @@ /** * This method will add a basic title and description element to a chart. The yy parser will need to * respond to getTitle and getAccDescription, where the title is the title element on the chart, - * which is not displayed and the accDescription is the description element on the chart, which is - * also not displayed. + * which is generally not displayed and the accDescription is the description element on the chart, + * which is never displayed. + * + * The following charts display their title as a visual and accessibility element: + * gantt * * @param yy_parser * @param svg * @param id */ export default function addSVGAccessibilityFields(yy_parser, svg, id) { - if (typeof svg.insert == 'undefined') { + if (typeof svg.insert === 'undefined') { return; } + let title_string = yy_parser.getTitle(); let description = yy_parser.getAccDescription(); svg.attr('role', 'img').attr('aria-labelledby', 'chart-title-' + id + ' chart-desc-' + id); diff --git a/src/diagrams/gantt/ganttDb.js b/src/diagrams/gantt/ganttDb.js index 88c591520..0d4bd594d 100644 --- a/src/diagrams/gantt/ganttDb.js +++ b/src/diagrams/gantt/ganttDb.js @@ -12,6 +12,7 @@ let includes = []; let excludes = []; let links = {}; let title = ''; +let accDescription = ''; let sections = []; let tasks = []; let currentSection = ''; @@ -115,6 +116,14 @@ export const getTitle = function () { return title; }; +export const setAccDescription = function (txt) { + accDescription = txt; +}; + +export const getAccDescription = function () { + return accDescription; +}; + export const addSection = function (txt) { currentSection = txt; sections.push(txt); @@ -637,6 +646,8 @@ export default { getTodayMarker, setTitle, getTitle, + setAccDescription, + getAccDescription, addSection, getSections, getTasks, diff --git a/src/diagrams/gantt/ganttDb.spec.js b/src/diagrams/gantt/ganttDb.spec.js index b94ba9617..a6960aaf2 100644 --- a/src/diagrams/gantt/ganttDb.spec.js +++ b/src/diagrams/gantt/ganttDb.spec.js @@ -32,6 +32,7 @@ describe('when using the ganttDb', function () { fn | expected ${'getTasks'} | ${[]} ${'getTitle'} | ${''} + ${'getAccDescription'} | ${''} ${'getDateFormat'} | ${''} ${'getAxisFormat'} | ${''} ${'getTodayMarker'} | ${''} diff --git a/src/diagrams/gantt/ganttRenderer.js b/src/diagrams/gantt/ganttRenderer.js index 899c61e02..b9a253ae1 100644 --- a/src/diagrams/gantt/ganttRenderer.js +++ b/src/diagrams/gantt/ganttRenderer.js @@ -15,6 +15,7 @@ import common from '../common/common'; import ganttDb from './ganttDb'; import { getConfig } from '../../config'; import { configureSvgSize } from '../../utils'; +import addSVGAccessibilityFields from '../../accessibility' parser.yy = ganttDb; export const setConf = function () { @@ -114,6 +115,8 @@ export const draw = function (text, id) { .attr('y', conf.titleTopMargin) .attr('class', 'titleText'); + addSVGAccessibilityFields(parser.yy, svg, id); + /** * @param tasks * @param pageWidth diff --git a/src/diagrams/gantt/parser/gantt.jison b/src/diagrams/gantt/parser/gantt.jison index a206da0b1..e6390c250 100644 --- a/src/diagrams/gantt/parser/gantt.jison +++ b/src/diagrams/gantt/parser/gantt.jison @@ -65,22 +65,23 @@ that id. [\s\n] this.popState(); [^\s\n]* return 'click'; -"gantt" return 'gantt'; -"dateFormat"\s[^#\n;]+ return 'dateFormat'; -"inclusiveEndDates" return 'inclusiveEndDates'; -"topAxis" return 'topAxis'; -"axisFormat"\s[^#\n;]+ return 'axisFormat'; -"includes"\s[^#\n;]+ return 'includes'; -"excludes"\s[^#\n;]+ return 'excludes'; -"todayMarker"\s[^\n;]+ return 'todayMarker'; -\d\d\d\d"-"\d\d"-"\d\d return 'date'; -"title"\s[^#\n;]+ return 'title'; -"section"\s[^#:\n;]+ return 'section'; -[^#:\n;]+ return 'taskTxt'; -":"[^#\n;]+ return 'taskData'; -":" return ':'; -<> return 'EOF'; -. return 'INVALID'; +"gantt" return 'gantt'; +"dateFormat"\s[^#\n;]+ return 'dateFormat'; +"inclusiveEndDates" return 'inclusiveEndDates'; +"topAxis" return 'topAxis'; +"axisFormat"\s[^#\n;]+ return 'axisFormat'; +"includes"\s[^#\n;]+ return 'includes'; +"excludes"\s[^#\n;]+ return 'excludes'; +"todayMarker"\s[^\n;]+ return 'todayMarker'; +\d\d\d\d"-"\d\d"-"\d\d return 'date'; +"title"\s[^#\n;]+ return 'title'; +"accDescription"\s[^#\n;]+ return 'accDescription' +"section"\s[^#:\n;]+ return 'section'; +[^#:\n;]+ return 'taskTxt'; +":"[^#\n;]+ return 'taskData'; +":" return ':'; +<> return 'EOF'; +. return 'INVALID'; /lex @@ -116,6 +117,7 @@ statement | includes {yy.setIncludes($1.substr(9));$$=$1.substr(9);} | todayMarker {yy.setTodayMarker($1.substr(12));$$=$1.substr(12);} | title {yy.setTitle($1.substr(6));$$=$1.substr(6);} + | accDescription {yy.setAccDescription($1.substr(15));$$=$1.substr(15);} | section {yy.addSection($1.substr(8));$$=$1.substr(8);} | clickStatement | taskTxt taskData {yy.addTask($1,$2);$$='task';} diff --git a/src/diagrams/gantt/parser/gantt.spec.js b/src/diagrams/gantt/parser/gantt.spec.js index bb2a3a540..ca535ebb8 100644 --- a/src/diagrams/gantt/parser/gantt.spec.js +++ b/src/diagrams/gantt/parser/gantt.spec.js @@ -156,4 +156,21 @@ describe('when parsing a gantt diagram it', function () { '"test0", test1, test2' ); }); + + it('should allow for a title and accDescription', function () { + const expectedTitle = 'Gantt Diagram'; + const expectedAccDescription = 'Tasks for Q4'; + const ganttString = + 'gantt\n' + + `title ${expectedTitle}\n` + + `accDescription ${expectedAccDescription}\n` + + 'dateFormat YYYY-MM-DD\n' + + 'section Section\n' + + 'A task :a1, 2014-01-01, 30d\n'; + + const output = parser.parse(ganttString); + + expect(ganttDb.getTitle()).toBe(expectedTitle); + expect(ganttDb.getAccDescription()).toBe(expectedAccDescription); + }); }); diff --git a/src/diagrams/sequence/sequenceDiagram.spec.js b/src/diagrams/sequence/sequenceDiagram.spec.js index aa73bf28a..06662c8be 100644 --- a/src/diagrams/sequence/sequenceDiagram.spec.js +++ b/src/diagrams/sequence/sequenceDiagram.spec.js @@ -21,7 +21,7 @@ describe('when parsing a sequenceDiagram', function () { parser.yy = sequenceDb; parser.yy.clear(); }); - it('it should handle a sequenceDiagram definition', function () { + it('should handle a sequenceDiagram definition', function () { const str = ` sequenceDiagram Alice->Bob:Hello Bob, how are you? From 3d7cb212c06f15e0d2da76c3830670620e8e3adf Mon Sep 17 00:00:00 2001 From: Cory Gwin Date: Thu, 7 Apr 2022 18:01:44 +0000 Subject: [PATCH 03/19] feat: Add accessibility fields to requirements diagram --- .../integration/rendering/requirement.spec.js | 65 +++++++++++ demos/requirements.html | 106 ++++++++++++++++++ src/diagrams/class/parser/classDiagram.jison | 1 + .../parser/requirementDiagram.jison | 8 +- .../parser/requirementDiagram.spec.js | 23 ++++ src/diagrams/requirement/requirementDb.js | 27 +++++ .../requirement/requirementRenderer.js | 3 + 7 files changed, 232 insertions(+), 1 deletion(-) create mode 100644 demos/requirements.html diff --git a/cypress/integration/rendering/requirement.spec.js b/cypress/integration/rendering/requirement.spec.js index 0bf9014bf..aca990c42 100644 --- a/cypress/integration/rendering/requirement.spec.js +++ b/cypress/integration/rendering/requirement.spec.js @@ -46,4 +46,69 @@ describe('Requirement diagram', () => { ); cy.get('svg'); }); + + it('should render accessibility tags', function () { + const expectedTitle = 'Gantt Diagram'; + const expectedAccDescription = 'Tasks for Q4'; + renderGraph( + ` + requirementDiagram + title: ${expectedTitle} + accDescription: ${expectedAccDescription} + + requirement test_req { + id: 1 + text: the test text. + risk: high + verifymethod: test + } + + functionalRequirement test_req2 { + id: 1.1 + text: the second test text. + risk: low + verifymethod: inspection + } + + performanceRequirement test_req3 { + id: 1.2 + text: the third test text. + risk: medium + verifymethod: demonstration + } + + element test_entity { + type: simulation + } + + element test_entity2 { + type: word doc + docRef: reqs/test_entity + } + + + test_entity - satisfies -> test_req2 + test_req - traces -> test_req2 + test_req - contains -> test_req3 + test_req <- copies - test_entity2 + `, + {} + ); + cy.get('svg').should((svg) => { + const el = svg.get(0); + const children = Array.from(el.children); + + const titleEl = children.find(function (node) { + return node.tagName === 'title'; + }); + const descriptionEl = children.find(function (node) { + return node.tagName === 'desc'; + }); + + expect(titleEl).to.exist; + expect(titleEl.textContent).to.equal(expectedTitle); + expect(descriptionEl).to.exist; + expect(descriptionEl.textContent).to.equal(expectedAccDescription); + }); + }); }); diff --git a/demos/requirements.html b/demos/requirements.html new file mode 100644 index 000000000..e2dfd738a --- /dev/null +++ b/demos/requirements.html @@ -0,0 +1,106 @@ + + + + + + + Mermaid Quick Test Page + + + + + + + +
+ requirementDiagram + title This is a title + requirement test_req { + id: 1 + text: the test text. + risk: high + verifymethod: test + } + + functionalRequirement test_req2 { + id: 1.1 + text: the second test text. + risk: low + verifymethod: inspection + } + + performanceRequirement test_req3 { + id: 1.2 + text: the third test text. + risk: medium + verifymethod: demonstration + } + + interfaceRequirement test_req4 { + id: 1.2.1 + text: the fourth test text. + risk: medium + verifymethod: analysis + } + + physicalRequirement test_req5 { + id: 1.2.2 + text: the fifth test text. + risk: medium + verifymethod: analysis + } + + designConstraint test_req6 { + id: 1.2.3 + text: the sixth test text. + risk: medium + verifymethod: analysis + } + + element test_entity { + type: simulation + } + + element test_entity2 { + type: word doc + docRef: reqs/test_entity + } + + element test_entity3 { + type: "test suite" + docRef: github.com/all_the_tests + } + + + test_entity - satisfies -> test_req2 + test_req - traces -> test_req2 + test_req - contains -> test_req3 + test_req3 - contains -> test_req4 + test_req4 - derives -> test_req5 + test_req5 - refines -> test_req6 + test_entity3 - verifies -> test_req5 + test_req <- copies - test_entity2 +
+ + + + + + + \ No newline at end of file diff --git a/src/diagrams/class/parser/classDiagram.jison b/src/diagrams/class/parser/classDiagram.jison index cd4ff75a2..80b53dd2e 100644 --- a/src/diagrams/class/parser/classDiagram.jison +++ b/src/diagrams/class/parser/classDiagram.jison @@ -185,6 +185,7 @@ Function arguments are optional: 'call ()' simply executes 'callb start : mermaidDoc + | statments | direction | directive start ; diff --git a/src/diagrams/requirement/parser/requirementDiagram.jison b/src/diagrams/requirement/parser/requirementDiagram.jison index b8c14dfc1..b7d3089e1 100644 --- a/src/diagrams/requirement/parser/requirementDiagram.jison +++ b/src/diagrams/requirement/parser/requirementDiagram.jison @@ -21,6 +21,9 @@ \}\%\% { this.popState(); this.popState(); return 'close_directive'; } ((?:(?!\}\%\%).|\n)*) return 'arg_directive'; +"title"\s[^#\n;]+ return 'title'; +"accDescription"\s[^#\n;]+ return 'accDescription'; + (\r?\n)+ return 'NEWLINE'; \s+ /* skip all whitespace */ \#[^\n]* /* skip comments */ @@ -90,7 +93,9 @@ start directive : openDirective typeDirective closeDirective - | openDirective typeDirective ':' argDirective closeDirective; + | openDirective typeDirective ':' argDirective closeDirective + | title {yy.setTitle($1.substring(6));$$=$1.substring(6);} + | accDescription {yy.setAccDescription($1.substring(15));$$=$1.substring(15);}; openDirective : open_directive { yy.parseDirective('%%{', 'open_directive'); }; @@ -191,6 +196,7 @@ relationship | TRACES { $$=yy.Relationships.TRACES;}; + requirementName: unqString | qString; id : unqString | qString; text : unqString | qString; diff --git a/src/diagrams/requirement/parser/requirementDiagram.spec.js b/src/diagrams/requirement/parser/requirementDiagram.spec.js index 715c35bb7..9b651b690 100644 --- a/src/diagrams/requirement/parser/requirementDiagram.spec.js +++ b/src/diagrams/requirement/parser/requirementDiagram.spec.js @@ -72,6 +72,29 @@ describe('when parsing requirement diagram it...', function () { expect(Object.keys(requirementDb.getRelationships()).length).toBe(0); }); + it('will use a title and accDescription', function () { + const expectedTitle = 'test title'; + const expectedAccDescription = 'my chart description'; + const expectedDocRef = 'test_ref'; + + let lines = [ + `requirementDiagram`, + ``, + `title ${expectedTitle}`, + `accDescription ${expectedAccDescription}`, + `element test_name {`, + `type: test_type`, + `docref: test_ref`, + `}`, + ]; + let doc = lines.join('\n'); + + reqDiagram.parser.parse(doc); + + expect(requirementDb.getTitle()).toBe(expectedTitle); + expect(requirementDb.getAccDescription()).toBe(expectedAccDescription); + }); + it('will accept full relationship definition', function () { const expectedSrc = 'a'; const expectedDest = 'b'; diff --git a/src/diagrams/requirement/requirementDb.js b/src/diagrams/requirement/requirementDb.js index a1ae6aae0..2141c2400 100644 --- a/src/diagrams/requirement/requirementDb.js +++ b/src/diagrams/requirement/requirementDb.js @@ -1,12 +1,17 @@ import * as configApi from '../../config'; import { log } from '../../logger'; import mermaidAPI from '../../mermaidAPI'; +import common from '../common/common'; let relations = []; let latestRequirement = {}; let requirements = {}; let latestElement = {}; let elements = {}; +let title = ''; +let accDescription = ''; + +const sanitizeText = (txt) => common.sanitizeText(txt, configApi.getConfig()); const RequirementType = { REQUIREMENT: 'Requirement', @@ -134,6 +139,24 @@ const clear = () => { elements = {}; }; +export const setTitle = function (txt) { + let sanitizedText = sanitizeText(txt, configApi.getConfig()); + title = sanitizedText; +}; + +export const getTitle = function () { + return title; +}; + +export const setAccDescription = function (txt) { + let sanitizedText = sanitizeText(txt, configApi.getConfig()); + accDescription = sanitizedText; +}; + +export const getAccDescription = function () { + return accDescription; +}; + export default { RequirementType, RiskLevel, @@ -149,6 +172,10 @@ export default { setNewReqText, setNewReqRisk, setNewReqVerifyMethod, + setTitle, + getTitle, + setAccDescription, + getAccDescription, addElement, getElements, diff --git a/src/diagrams/requirement/requirementRenderer.js b/src/diagrams/requirement/requirementRenderer.js index 0814b0088..96b2e0ab4 100644 --- a/src/diagrams/requirement/requirementRenderer.js +++ b/src/diagrams/requirement/requirementRenderer.js @@ -9,6 +9,7 @@ import { parser } from './parser/requirementDiagram'; import requirementDb from './requirementDb'; import markers from './requirementMarkers'; import { getConfig } from '../../config'; +import addSVGAccessibilityFields from '../../accessibility'; const conf = {}; let relCnt = 0; @@ -377,6 +378,8 @@ export const draw = (text, id) => { configureSvgSize(svg, height, width, conf.useMaxWidth); svg.attr('viewBox', `${svgBounds.x - padding} ${svgBounds.y - padding} ${width} ${height}`); + // Adds title and description to the flow chart + addSVGAccessibilityFields(parser.yy, svg, id); }; export default { From 8b29fbe98e2a47eb9f27bdf87160abfca2e416f5 Mon Sep 17 00:00:00 2001 From: ashishj Date: Thu, 7 Apr 2022 20:13:15 +0200 Subject: [PATCH 04/19] Updating Gitgraph docs --- cypress/platform/gitgraph.html | 47 ++--- cypress/platform/gitgraph2.html | 10 +- docs/_sidebar.md | 1 + docs/gitgraph.md | 318 +++++++++++++++++++++++++++++++- src/diagrams/git/gitGraphAst.js | 14 +- src/themes/theme-base.js | 16 +- src/themes/theme-dark.js | 16 +- src/themes/theme-default.js | 32 ++-- src/themes/theme-forest.js | 16 +- src/themes/theme-neutral.js | 16 +- 10 files changed, 401 insertions(+), 85 deletions(-) diff --git a/cypress/platform/gitgraph.html b/cypress/platform/gitgraph.html index 89689d86e..4bcd10f5d 100644 --- a/cypress/platform/gitgraph.html +++ b/cypress/platform/gitgraph.html @@ -26,24 +26,28 @@

info below

-
- %%{init: { 'logLevel': 'debug', 'theme': 'neutral' } }%% +
+ %%{init: { "logLevel": "debug", "theme": "default" , "gitGraph" : {"showBranches":"false"},"themeVariables": { + "gitBranchLabel0": "#ff0000", + "gitBranchLabel1": "#00ff00", + "gitBranchLabel2": "#0000ff", + "git0": "#550055" + } } }%% gitGraph - commit "Ashish" - branch newbranch - checkout newbranch - commit id:"1111" - commit tag:"test" + commit + branch develop + commit tag:"v1.0.0" + commit checkout main commit type: HIGHLIGHT commit - merge newbranch + merge develop commit - branch b2 + branch featureA commit
-
+
gitGraph commit type:HIGHLIGHT branch hotfix @@ -101,18 +105,19 @@ // console.error('Mermaid error: ', err); }; mermaid.initialize({ - theme: 'dark', - // themeVariables: { - // primaryColor: '#9400D3', - // darkMode: true, - // background: '#222', - // // textColor: 'white', - // // primaryTextColor: '#f4f4f4', + //theme: 'dark', + themeVariables: { + commitLabelColor: '#9400D3', + commitLabelBackground: '#FFFFFF', + // darkMode: true, + // background: '#222', + // // textColor: 'white', + // // primaryTextColor: '#f4f4f4', - // // // nodeBkg: '#ff0000', - // // // mainBkg: '#0000ff', - // // // tertiaryColor: '#ffffcc', - // }, + // // // nodeBkg: '#ff0000', + // // // mainBkg: '#0000ff', + // // // tertiaryColor: '#ffffcc', + }, // theme: 'forest', // theme: 'neutral', // theme: 'dark', diff --git a/cypress/platform/gitgraph2.html b/cypress/platform/gitgraph2.html index b3ecd7fc5..493efd43a 100644 --- a/cypress/platform/gitgraph2.html +++ b/cypress/platform/gitgraph2.html @@ -43,7 +43,7 @@
- %%{init: { "gitGraph": { "showBranches": false, "mainBranchName": "APA" }}}%% + %%{init: { "gitGraph": { "showBranches": true, "mainBranchName": "APA" }}}%% gitGraph commit branch hotfix @@ -55,14 +55,14 @@ branch featureB checkout featureB commit type:HIGHLIGHT - checkout main + checkout APA checkout hotfix commit type:NORMAL checkout develop commit type:REVERSE checkout featureB commit - checkout main + checkout APA merge hotfix checkout featureB commit @@ -80,10 +80,10 @@ branch release checkout release commit - checkout main + checkout APA commit checkout release - merge main + merge APA checkout develop merge release diff --git a/docs/_sidebar.md b/docs/_sidebar.md index 61eded583..0dfb5352c 100644 --- a/docs/_sidebar.md +++ b/docs/_sidebar.md @@ -14,6 +14,7 @@ - [Gantt](gantt.md) - [Pie Chart](pie.md) - [Requirement Diagram](requirementDiagram.md) + - [Gitgraph (Git) Diagram 🔥🔥🔥](gitgraph.md) - [Other Examples](examples.md) - ⚙️ Deployment and Configuration diff --git a/docs/gitgraph.md b/docs/gitgraph.md index fabdf52bc..fdc23f61c 100644 --- a/docs/gitgraph.md +++ b/docs/gitgraph.md @@ -3,7 +3,7 @@ **Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/gitgraph.md) > A Git Graph is a pictorial representation of git commits and git actions(commands) on various branches. -These kind of diagram are particularyly helpful to developers and devops teams to share their Git branching strategies. For example, it makes it easier to visualize how git flow works. +These kind of diagram are particularly helpful to developers and devops teams to share their Git branching strategies. For example, it makes it easier to visualize how git flow works. Mermaid can render Git diagrams @@ -28,11 +28,11 @@ In Mermaid, we support the basic git operations like: - *merge* : To merge an existing branch onto the current branch. With the help of these key git commands, you will be able to draw a gitgraph in Mermaid very easily and quickly. -Entity names are often capitalised, although there is no accepted standard on this, and it is not required in Mermaid. +Entity names are often capitalized, although there is no accepted standard on this, and it is not required in Mermaid. ## Syntax -Mermaid syntax for Gitgraph is very straigth-forward and simple. It follows a declarative-approach, where each commit is drawn on the timeline in the diagram, in order of its occurance/presence in code. Basically, it follows the insertion order for each command. +Mermaid syntax for Gitgraph is very straight-forward and simple. It follows a declarative-approach, where each commit is drawn on the timeline in the diagram, in order of its occurrences/presence in code. Basically, it follows the insertion order for each command. First thing you do is to declare your diagram type using the **gitgraph** keyword. This `gitgraph` keyword, tells Mermaid that you wish to draw a gitgraph, and parse the diagram code accordingly. @@ -84,7 +84,7 @@ Let us see how these different commit type look with the help of the following d commit commit id: "Reverse" type: REVERSE commit - commit id: "Hightlight" type: HIGHLIGHT + commit id: "Highlight" type: HIGHLIGHT commit ``` @@ -104,7 +104,7 @@ Let us see how this works with the help of the following diagram: commit commit id: "Reverse" type: REVERSE tag: "RC_1" commit - commit id: "Hightlight" type: HIGHLIGHT tag: "8.8.4" + commit id: "Highlight" type: HIGHLIGHT tag: "8.8.4" commit ``` @@ -182,9 +182,145 @@ After this we made use of the `checkout` keyword to set the current branch as `m After this we merge the `develop` branch onto the current branch `main`, resulting in a merge commit. Since the current branch at this point is still `main`, the last two commits are registered against that. +## Gitgraph specific configuration options +In Mermaid, you have the option to configure the gitgraph diagram. You can configure the following options: +- `showBranches` : Boolean, default is `true`. If set to `false`, the branches are not shown in the diagram. +- `showCommitLabel` : Boolean, default is `true`. If set to `false`, the commit labels are not shown in the diagram. +- `mainBranchName` : String, default is `main`. The name of the default/root branch. + +Let's look at them one by one. +## Hiding Branch names and lines +Sometimes you may want to hide the branch names and lines from the diagram. You can do this by using the `showBranches` keyword. Bye default its value is `true`. You can set it to false using directives + +Usage example: +```mermaid-example +%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': false}} }%% + gitGraph + commit + branch hotfix + checkout hotfix + commit + branch develop + checkout develop + commit id:"ash" tag:"abc" + branch featureB + checkout featureB + commit type:HIGHLIGHT + checkout main + checkout hotfix + commit type:NORMAL + checkout develop + commit type:REVERSE + checkout featureB + commit + checkout main + merge hotfix + checkout featureB + commit + checkout develop + branch featureA + commit + checkout develop + merge hotfix + checkout featureA + commit + checkout featureB + commit + checkout develop + merge featureA + branch release + checkout release + commit + checkout main + commit + checkout release + merge main + checkout develop + merge release + ``` + +## Hiding commit labels +Sometimes you may want to hide the commit labels from the diagram. You can do this by using the `showCommitLabel` keyword. By default its value is `true`. You can set it to `false` using directives. + + +Usage example: +```mermaid-example +%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': false,'showCommitLabel': false}} }%% + gitGraph + commit + branch hotfix + checkout hotfix + commit + branch develop + checkout develop + commit id:"ash" + branch featureB + checkout featureB + commit type:HIGHLIGHT + checkout main + checkout hotfix + commit type:NORMAL + checkout develop + commit type:REVERSE + checkout featureB + commit + checkout main + merge hotfix + checkout featureB + commit + checkout develop + branch featureA + commit + checkout develop + merge hotfix + checkout featureA + commit + checkout featureB + commit + checkout develop + merge featureA + branch release + checkout release + commit + checkout main + commit + checkout release + merge main + checkout develop + merge release + ``` + +## Customizing the main/default branch name +Sometimes you may want to customize the name of the main/default branch. You can do this by using the `mainBranchName` keyword. By default its value is `main`. You can set it to any string using directives. + +Usage example: +```mermaid-example +%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': true, 'showCommitLabel':true,'mainBranchName': 'MetroLine1'}} }%% + gitGraph + commit id:"NewYork" + commit id:"Dallas" + branch MetroLine2 + commit id:"LosAngeles" + commit id:"Chicago" + commit id:"Houston" + branch MetroLine3 + commit id:"Phoenix" + commit type: HIGHLIGHT id:"Denver" + commit id:"Boston" + checkout MetroLine1 + commit id:"Atlanta" + merge MetroLine3 + commit id:"Miami" + commit id:"Washington" + merge MetroLine2 + commit id:"Boston" + commit id:"Detroit" + commit type:REVERSE id:"SanFrancisco" + ``` +Looks at the imaginary rail road map created using these Mermaid. Here, we have changed the default main branch name to `MetroLine1`. ## Themes -Mermaid supports a bunch of pre-defined themes which you can use to find the right one for you. PS: you can actually override an existing theme's variable to get your own custom theme going. Learn more about themeing your diagram [here](./theming.md). +Mermaid supports a bunch of pre-defined themes which you can use to find the right one for you. PS: you can actually override an existing theme's variable to get your own custom theme going. Learn more about theming your diagram [here](./theming.md). Following are the different pre-defined theme options: - `base` @@ -434,4 +570,172 @@ Let's put them to use, add see how our sample diagram looks like in different th merge release ``` - ## Customize using Theme Variables +## Customize using Theme Variables +Mermaid allows you to customize your diagram using theme variables which govern the look and feel of various elements of the diagram. + +For understanding let us take a sample diagram with theme `default`, the default values of the theme variables is picked automatically from the theme. Later on we will see how to override the default values of the theme variables. + +See how the default theme is used to set the colors for the branches: + +```mermaid-example +%%{init: { 'logLevel': 'debug', 'theme': 'default' } }%% + gitGraph + commit + branch develop + commit tag:"v1.0.0" + commit + checkout main + commit type: HIGHLIGHT + commit + merge develop + commit + branch featureA + commit +``` + +### Customizing branch colors +You can customize the branch colors using the `git0` to `git7` theme variables. Mermaid allows you to set the colors for up-to 8 branches, where `git0` variable will drive the value of the first branch, `git1` will drive the value of the second branch and so on. + +NOTE: Default values for these theme variables are picked from the selected theme. If you want to override the default values, you can use the `initialize` call to add your custom theme variable values. + +Example: + +Now let's override the default values for the `git0` to `git3` variables: + +```mermaid-example + %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': { + 'git0': '#ff0000', + 'git1': '#00ff00', + 'git2': '#0000ff', + 'git3': '#ff00ff', + 'git4': '#00ffff', + 'git5': '#ffff00', + 'git6': '#ff00ff', + 'git7': '#00ffff' + } } }%% + gitGraph + commit + branch develop + commit tag:"v1.0.0" + commit + checkout main + commit type: HIGHLIGHT + commit + merge develop + commit + branch featureA + commit + +``` +See how the branch colors are changed to the values specified in the theme variables. +### Customizing branch label colors +You can customize the branch label colors using the `gitBranchLabel0` to `gitBranchLabel7` theme variables. Mermaid allows you to set the colors for up-to 8 branches, where `gitBranchLabel0` variable will drive the value of the first branch label, `gitBranchLabel1` will drive the value of the second branch label and so on. + +Lets see how the default theme is used to set the colors for the branch labels: + +Now let's override the default values for the `gitBranchLabel0` to `gitBranchLabel2` variables: + +```mermaid-example + %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': { + 'gitBranchLabel0': '#ff0000', + 'gitBranchLabel1': '#00ff00', + 'gitBranchLabel2': '#0000ff' + } } }%% + gitGraph + commit + branch develop + commit tag:"v1.0.0" + commit + checkout main + commit type: HIGHLIGHT + commit + merge develop + commit + branch featureA + commit + +``` +See how the branch label colors are changed to the values specified in the theme variables. + + +### Customizing Commit colors +You can customize commit using the `commitLabelColor` and `commitLabelBackground` theme variables for changes in the commit label color and background color respectively. + +Example: +Now let's override the default values for the `commitLabelColor` to `commitLabelBackground` variables: + +```mermaid-example + %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': { + 'commitLabelColor': '#ff0000', + 'commitLabelBackground': '#00ff00' + } } }%% + gitGraph + commit + branch develop + commit tag:"v1.0.0" + commit + checkout main + commit type: HIGHLIGHT + commit + merge develop + commit + branch featureA + commit + +``` +See how the commit label color and background color are changed to the values specified in the theme variables. +### Customizing Tag colors +You can customize tag using the `tagLabelColor`,`tagLabelBackground` and `tagLabelBorder` theme variables for changes in the tag label color,tag label background color and tag label border respectively. +Example: +Now let's override the default values for the `tagLabelColor`, `tagLabelBackground` and to `tagLabelBorder` variables: + +```mermaid-example + %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': { + 'tagLabelColor': '#ff0000', + 'tagLabelBackground': '#00ff00', + 'tagLabelBorder': '#0000ff' + } } }%% + gitGraph + commit + branch develop + commit tag:"v1.0.0" + commit + checkout main + commit type: HIGHLIGHT + commit + merge develop + commit + branch featureA + commit + +``` +See how the tag colors are changed to the values specified in the theme variables. +### Customizing Highlight commit colors +You can customize the highlight commit colors in relation to the branch it is on using the `gitInv0` to `gitInv7` theme variables. Mermaid allows you to set the colors for up-to 8 branches specific highlight commit, where `gitInv0` variable will drive the value of the first branch's highlight commits, `gitInv1` will drive the value of the second branch's highlight commit label and so on. + +Example: + +Now let's override the default values for the `git0` to `git3` variables: + +```mermaid-example + %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': { + 'gitInv0': '#ff0000' + } } }%% + gitGraph + commit + branch develop + commit tag:"v1.0.0" + commit + checkout main + commit type: HIGHLIGHT + commit + merge develop + commit + branch featureA + commit + +``` +Se how the highlight commit color on the first branch is changed to the value specified in the theme variable `gitInv0`. + + + diff --git a/src/diagrams/git/gitGraphAst.js b/src/diagrams/git/gitGraphAst.js index 124a877fc..76bd44b4c 100644 --- a/src/diagrams/git/gitGraphAst.js +++ b/src/diagrams/git/gitGraphAst.js @@ -2,11 +2,15 @@ import { log } from '../../logger'; import { random } from '../../utils'; import mermaidAPI from '../../mermaidAPI'; import * as configApi from '../../config'; +import { getConfig } from '../../config'; import common from '../common/common'; + +let mainBranchName = getConfig().gitGraph.mainBranchName; let commits = {}; let head = null; -let branches = { main: head }; -let curBranch = 'main'; +let branches = {}; +branches[mainBranchName] = head; +let curBranch = mainBranchName; let direction = 'LR'; let seq = 0; @@ -316,8 +320,10 @@ export const prettyPrint = function () { export const clear = function () { commits = {}; head = null; - branches = { main: head }; - curBranch = 'main'; + let mainBranch = getConfig().gitGraph.mainBranchName; + branches = {}; + branches[mainBranch] = null; + curBranch = mainBranch; seq = 0; }; diff --git a/src/themes/theme-base.js b/src/themes/theme-base.js index 7bad468ae..7474da898 100644 --- a/src/themes/theme-base.js +++ b/src/themes/theme-base.js @@ -206,14 +206,14 @@ class Theme { this.git6 = darken(this.git6, 25); this.git7 = darken(this.git7, 25); } - this.gitInv0 = invert(this.git0); - this.gitInv1 = invert(this.git1); - this.gitInv2 = invert(this.git2); - this.gitInv3 = invert(this.git3); - this.gitInv4 = invert(this.git4); - this.gitInv5 = invert(this.git5); - this.gitInv6 = invert(this.git6); - this.gitInv7 = invert(this.git7); + this.gitInv0 = this.gitInv0 || invert(this.git0); + this.gitInv1 = this.gitInv1 || invert(this.git1); + this.gitInv2 = this.gitInv2 || invert(this.git2); + this.gitInv3 = this.gitInv3 || invert(this.git3); + this.gitInv4 = this.gitInv4 || invert(this.git4); + this.gitInv5 = this.gitInv5 || invert(this.git5); + this.gitInv6 = this.gitInv6 || invert(this.git6); + this.gitInv7 = this.gitInv7 || invert(this.git7); this.branchLabelColor = this.branchLabelColor || (this.darkMode ? 'black' : this.labelTextColor); this.gitBranchLabel0 = this.gitBranchLabel0 || this.branchLabelColor; diff --git a/src/themes/theme-dark.js b/src/themes/theme-dark.js index dd907dd98..71b9d446c 100644 --- a/src/themes/theme-dark.js +++ b/src/themes/theme-dark.js @@ -197,14 +197,14 @@ class Theme { this.git5 = lighten(this.pie6 || adjust(this.primaryColor, { h: -90 }), 10); this.git6 = lighten(this.pie7 || adjust(this.primaryColor, { h: +60 }), 10); this.git7 = lighten(this.pie8 || adjust(this.primaryColor, { h: +120 }), 20); - this.gitInv0 = invert(this.git0); - this.gitInv1 = invert(this.git1); - this.gitInv2 = invert(this.git2); - this.gitInv3 = invert(this.git3); - this.gitInv4 = invert(this.git4); - this.gitInv5 = invert(this.git5); - this.gitInv6 = invert(this.git6); - this.gitInv7 = invert(this.git7); + this.gitInv0 = this.gitInv0 || invert(this.git0); + this.gitInv1 = this.gitInv1 || invert(this.git1); + this.gitInv2 = this.gitInv2 || invert(this.git2); + this.gitInv3 = this.gitInv3 || invert(this.git3); + this.gitInv4 = this.gitInv4 || invert(this.git4); + this.gitInv5 = this.gitInv5 || invert(this.git5); + this.gitInv6 = this.gitInv6 || invert(this.git6); + this.gitInv7 = this.gitInv7 || invert(this.git7); this.tagLabelColor = this.tagLabelColor || this.primaryTextColor; this.tagLabelBackground = this.tagLabelBackground || this.primaryColor; diff --git a/src/themes/theme-default.js b/src/themes/theme-default.js index 4e3a1bd03..81a07b9b8 100644 --- a/src/themes/theme-default.js +++ b/src/themes/theme-default.js @@ -228,22 +228,22 @@ class Theme { this.git6 = darken(this.git6, 25); this.git7 = darken(this.git7, 25); } - this.gitInv0 = darken(invert(this.git0), 25); - this.gitInv1 = invert(this.git1); - this.gitInv2 = invert(this.git2); - this.gitInv3 = invert(this.git3); - this.gitInv4 = invert(this.git4); - this.gitInv5 = invert(this.git5); - this.gitInv6 = invert(this.git6); - this.gitInv7 = invert(this.git7); - this.gitBranchLabel0 = invert(this.labelTextColor); - this.gitBranchLabel1 = this.labelTextColor; - this.gitBranchLabel2 = this.labelTextColor; - this.gitBranchLabel3 = invert(this.labelTextColor); - this.gitBranchLabel4 = this.labelTextColor; - this.gitBranchLabel5 = this.labelTextColor; - this.gitBranchLabel6 = this.labelTextColor; - this.gitBranchLabel7 = this.labelTextColor; + this.gitInv0 = this.gitInv0 || darken(invert(this.git0), 25); + this.gitInv1 = this.gitInv1 || invert(this.git1); + this.gitInv2 = this.gitInv2 || invert(this.git2); + this.gitInv3 = this.gitInv3 || invert(this.git3); + this.gitInv4 = this.gitInv4 || invert(this.git4); + this.gitInv5 = this.gitInv5 || invert(this.git5); + this.gitInv6 = this.gitInv6 || invert(this.git6); + this.gitInv7 = this.gitInv7 || invert(this.git7); + this.gitBranchLabel0 = this.gitBranchLabel0 || invert(this.labelTextColor); + this.gitBranchLabel1 = this.gitBranchLabel1 || this.labelTextColor; + this.gitBranchLabel2 = this.gitBranchLabel2 || this.labelTextColor; + this.gitBranchLabel3 = this.gitBranchLabel3 || invert(this.labelTextColor); + this.gitBranchLabel4 = this.gitBranchLabel4 || this.labelTextColor; + this.gitBranchLabel5 = this.gitBranchLabel5 || this.labelTextColor; + this.gitBranchLabel6 = this.gitBranchLabel6 || this.labelTextColor; + this.gitBranchLabel7 = this.gitBranchLabel7 || this.labelTextColor; this.tagLabelColor = this.tagLabelColor || this.primaryTextColor; this.tagLabelBackground = this.tagLabelBackground || this.primaryColor; diff --git a/src/themes/theme-forest.js b/src/themes/theme-forest.js index 3689c1f02..b0ec57458 100644 --- a/src/themes/theme-forest.js +++ b/src/themes/theme-forest.js @@ -198,14 +198,14 @@ class Theme { this.git6 = darken(this.git6, 25); this.git7 = darken(this.git7, 25); } - this.gitInv0 = invert(this.git0); - this.gitInv1 = invert(this.git1); - this.gitInv2 = invert(this.git2); - this.gitInv3 = invert(this.git3); - this.gitInv4 = invert(this.git4); - this.gitInv5 = invert(this.git5); - this.gitInv6 = invert(this.git6); - this.gitInv7 = invert(this.git7); + this.gitInv0 = this.gitInv0 || invert(this.git0); + this.gitInv1 = this.gitInv1 || invert(this.git1); + this.gitInv2 = this.gitInv2 || invert(this.git2); + this.gitInv3 = this.gitInv3 || invert(this.git3); + this.gitInv4 = this.gitInv4 || invert(this.git4); + this.gitInv5 = this.gitInv5 || invert(this.git5); + this.gitInv6 = this.gitInv6 || invert(this.git6); + this.gitInv7 = this.gitInv7 || invert(this.git7); this.tagLabelColor = this.tagLabelColor || this.primaryTextColor; this.tagLabelBackground = this.tagLabelBackground || this.primaryColor; diff --git a/src/themes/theme-neutral.js b/src/themes/theme-neutral.js index d46f3029c..af228513a 100644 --- a/src/themes/theme-neutral.js +++ b/src/themes/theme-neutral.js @@ -230,14 +230,14 @@ class Theme { this.git6 = this.pie7 || adjust(this.primaryColor, { h: +60 }); this.git7 = this.pie8 || adjust(this.primaryColor, { h: +120 }); - this.gitInv0 = invert(this.git0); - this.gitInv1 = invert(this.git1); - this.gitInv2 = invert(this.git2); - this.gitInv3 = invert(this.git3); - this.gitInv4 = invert(this.git4); - this.gitInv5 = invert(this.git5); - this.gitInv6 = invert(this.git6); - this.gitInv7 = invert(this.git7); + this.gitInv0 = this.gitInv0 || invert(this.git0); + this.gitInv1 = this.gitInv1 || invert(this.git1); + this.gitInv2 = this.gitInv2 || invert(this.git2); + this.gitInv3 = this.gitInv3 || invert(this.git3); + this.gitInv4 = this.gitInv4 || invert(this.git4); + this.gitInv5 = this.gitInv5 || invert(this.git5); + this.gitInv6 = this.gitInv6 || invert(this.git6); + this.gitInv7 = this.gitInv7 || invert(this.git7); this.branchLabelColor = this.branchLabelColor || this.labelTextColor; this.gitBranchLabel0 = this.branchLabelColor; From 1d269f07e32765ec2f057702a0a347eda39c17e7 Mon Sep 17 00:00:00 2001 From: Cory Gwin Date: Thu, 7 Apr 2022 14:22:47 -0400 Subject: [PATCH 05/19] Update src/diagrams/requirement/requirementRenderer.js Co-authored-by: Lindsey Wild <35239154+lindseywild@users.noreply.github.com> --- src/diagrams/requirement/requirementRenderer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/diagrams/requirement/requirementRenderer.js b/src/diagrams/requirement/requirementRenderer.js index 96b2e0ab4..ee2656529 100644 --- a/src/diagrams/requirement/requirementRenderer.js +++ b/src/diagrams/requirement/requirementRenderer.js @@ -378,7 +378,7 @@ export const draw = (text, id) => { configureSvgSize(svg, height, width, conf.useMaxWidth); svg.attr('viewBox', `${svgBounds.x - padding} ${svgBounds.y - padding} ${width} ${height}`); - // Adds title and description to the flow chart + // Adds title and description to the requirements diagram addSVGAccessibilityFields(parser.yy, svg, id); }; From 7a5149e39eede6965e61c5a5ab061090dcd86b57 Mon Sep 17 00:00:00 2001 From: Lindsey Wild Date: Wed, 6 Apr 2022 16:06:57 -0400 Subject: [PATCH 06/19] feat: adds title and description to flowchart --- README.md | 4 +++ demos/flowchart.html | 8 +++-- demos/index.html | 2 +- src/diagrams/flowchart/flowDb.js | 22 ++++++++++++ src/diagrams/flowchart/flowRenderer-v2.js | 10 ++++-- src/diagrams/flowchart/flowRenderer.js | 8 +++-- src/diagrams/flowchart/parser/flow.jison | 8 +++++ src/diagrams/flowchart/parser/flow.spec.js | 42 +++++++++++++++------- 8 files changed, 82 insertions(+), 22 deletions(-) diff --git a/README.md b/README.md index 0eb534091..cbf50713b 100644 --- a/README.md +++ b/README.md @@ -40,6 +40,8 @@ __The following are some examples of the diagrams, charts and graphs that can be ``` flowchart LR +title Example flow chart +accDescripton Flow chart showing examples of node usage A[Hard] -->|Text| B(Round) B --> C{Decision} C -->|One| D[Result 1] @@ -47,6 +49,8 @@ C -->|Two| E[Result 2] ``` ```mermaid flowchart LR +title Example flow chart +accDescripton Flow chart showing examples of node usage A[Hard] -->|Text| B(Round) B --> C{Decision} C -->|One| D[Result 1] diff --git a/demos/flowchart.html b/demos/flowchart.html index 864fac687..47a9c520f 100644 --- a/demos/flowchart.html +++ b/demos/flowchart.html @@ -3,7 +3,7 @@ - Mermaid Quick Test Page + Mermaid Quick Flowchart Test Page