From 693de2996afce999d71a2c49acce749ff098c6ab Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Tue, 23 Feb 2021 20:56:01 +0100 Subject: [PATCH 1/6] #1903 Use central configuration tools --- cypress/platform/knsv.html | 67 ++++---------------- src/defaultConfig.js | 20 ++++-- src/diagrams/user-journey/journeyRenderer.js | 16 +++-- 3 files changed, 40 insertions(+), 63 deletions(-) diff --git a/cypress/platform/knsv.html b/cypress/platform/knsv.html index 5e02863b6..11ebfc7a3 100644 --- a/cypress/platform/knsv.html +++ b/cypress/platform/knsv.html @@ -25,21 +25,17 @@

info below

-
-graph TD - A[Christmas] ==> D - A[Christmas] -->|Get money| B(Go shopping) - A[Christmas] ==> C - subgraph T ["Test"] - A - B - C - end - classDef Test fill:#F84E68,stroke:#333,color:white; - class A,T Test - classDef TestSub fill:green; - class T TestSub - linkStyle 0,1 color:orange, stroke: orange; +
+%%{init: { "logLevel": 1, "journey": {"useMaxWidth": false }} }%% +journey + title My working day + section Go to work + Make tea: 5: Me + Go upstairs: 3: Me + Do work: 1: Me, Cat + section Go home + Go downstairs: 5: Me + Sit down: 5: Me
flowchart TD @@ -94,44 +90,7 @@ flowchart TD C <-...-> E4 C ======> E5
-
- flowchart TB - A - B - subgraph foo[Foo SubGraph] - C - D - end - subgraph bar[Bar SubGraph] - E - F - end - G - - A-->B - B-->C - C-->D - B-->D - D-->E - E-->A - E-->F - F-->D - F-->G - B-->G - G-->D - - style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred - style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue -
-
- flowchart TB - subgraph bar[Bar] - F - end - style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue -
-
- %%{init:{"theme":"base", "themeVariables": {"primaryColor":"#411d4e", "titleColor":"white", "darkMode":true}}}%% +
flowchart LR subgraph A a --> b @@ -154,7 +113,7 @@ A --> B // arrowMarkerAbsolute: true, // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}', logLevel: 0, - flowchart: { curve: 'cardinal', htmlLabels: true }, + flowchart: { nodeSpacing: 10, curve: 'cardinal', htmlLabels: true }, htmlLabels: true, // gantt: { axisFormat: '%m/%d/%Y' }, sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: true }, diff --git a/src/defaultConfig.js b/src/defaultConfig.js index 9fb279bb2..ad18c6875 100644 --- a/src/defaultConfig.js +++ b/src/defaultConfig.js @@ -638,7 +638,7 @@ const config = { ***Notes:** ***Default value 10**.. */ - diagramMarginY: 10, + diagramMarginY: 20, /** *| Parameter | Description |Type | Required | Values| @@ -648,7 +648,7 @@ const config = { ***Notes:** ***Default value 50**. */ - actorMargin: 50, + leftMargin: 150, /** *| Parameter | Description |Type | Required | Values| @@ -668,7 +668,7 @@ const config = { ***Notes:** ***Default value 65**. */ - height: 65, + height: 50, /** *| Parameter | Description |Type | Required | Values| @@ -750,7 +750,19 @@ const config = { ***Notes:**This will display arrows that start and begin at the same node as right angles, rather than a curves ***Default value false**. */ - rightAngles: false + rightAngles: false, + taskFontSize: 14, + taskFontFamily: '"Open-Sans", "sans-serif"', + taskMargin: 50, + // width of activation box + activationWidth: 10, + + // text placement as: tspan | fo | old only text as before + textPlacement: 'fo', + actorColours: ['#8FBC8F', '#7CFC00', '#00FFFF', '#20B2AA', '#B0E0E6', '#FFFFE0'], + + sectionFills: ['#191970', '#8B008B', '#4B0082', '#2F4F4F', '#800000', '#8B4513', '#00008B'], + sectionColours: ['#fff'] }, class: { arrowMarkerAbsolute: false, diff --git a/src/diagrams/user-journey/journeyRenderer.js b/src/diagrams/user-journey/journeyRenderer.js index 854f2ce37..328039347 100644 --- a/src/diagrams/user-journey/journeyRenderer.js +++ b/src/diagrams/user-journey/journeyRenderer.js @@ -2,11 +2,12 @@ import { select } from 'd3'; import { parser } from './parser/journey'; import journeyDb from './journeyDb'; import svgDraw from './svgDraw'; +import { getConfig } from '../../config'; import { configureSvgSize } from '../../utils'; parser.yy = journeyDb; -const conf = { +const conf2 = { leftMargin: 150, diagramMarginX: 50, diagramMarginY: 20, @@ -16,11 +17,12 @@ const conf = { width: 150, // Height of task boxes height: 50, - taskFontSize: 14, - taskFontFamily: '"Open-Sans", "sans-serif"', // Margin around loop boxes boxMargin: 10, boxTextMargin: 5, + + taskFontSize: 14, + taskFontFamily: '"Open-Sans", "sans-serif"', noteMargin: 10, // Space between messages messageMargin: 35, @@ -53,6 +55,7 @@ export const setConf = function(cnf) { const actors = {}; function drawActorLegend(diagram) { + const conf = getConfig().journey; // Draw the actors let yPos = 60; Object.keys(actors).forEach(person => { @@ -79,9 +82,10 @@ function drawActorLegend(diagram) { yPos += 20; }); } - -const LEFT_MARGIN = conf.leftMargin; +const conf = getConfig().journey; +const LEFT_MARGIN = getConfig().journey.leftMargin; export const draw = function(text, id) { + const conf = getConfig().journey; parser.yy.clear(); parser.parse(text + '\n'); @@ -166,6 +170,7 @@ export const bounds = { } }, updateBounds: function(startx, starty, stopx, stopy) { + const conf = getConfig().journey; const _self = this; let cnt = 0; function updateFn(type) { @@ -221,6 +226,7 @@ const fills = conf.sectionFills; const textColours = conf.sectionColours; export const drawTasks = function(diagram, tasks, verticalPos) { + const conf = getConfig().journey; let lastSection = ''; const sectionVHeight = conf.height * 2 + conf.diagramMarginY; const taskPos = verticalPos + sectionVHeight; From 021bc5f0114804b51572b89c91365eb95415f849 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Thu, 25 Feb 2021 10:06:13 +0100 Subject: [PATCH 2/6] Making the font size being configurable and addting the ability set the section font size --- cypress/platform/knsv.html | 43 ++++++++++++++------ src/defaultConfig.js | 11 ++++- src/diagrams/gantt/ganttRenderer.js | 17 ++++---- src/diagrams/gantt/styles.js | 14 +++---- src/diagrams/user-journey/journeyRenderer.js | 1 - 5 files changed, 57 insertions(+), 29 deletions(-) diff --git a/cypress/platform/knsv.html b/cypress/platform/knsv.html index 11ebfc7a3..ab6103ded 100644 --- a/cypress/platform/knsv.html +++ b/cypress/platform/knsv.html @@ -25,17 +25,35 @@

info below

-
-%%{init: { "logLevel": 1, "journey": {"useMaxWidth": false }} }%% -journey - title My working day - section Go to work - Make tea: 5: Me - Go upstairs: 3: Me - Do work: 1: Me, Cat - section Go home - Go downstairs: 5: Me - Sit down: 5: Me +
+%%{init: { "logLevel": 1, "gantt": {"sectionFontSize": 6, "fontSize": 16 }} }%% +gantt + dateFormat :YYYY-MM-DD + title Adding GANTT diagram functionality to mermaid + excludes :excludes the named dates/days from being included in a charted task.. + section A section + Active task :done, des2, 2014-01-09, 3d + Completed task :done, des1, 2014-01-06, 5d + Future task : des3, after des2, 5d + Future task2 : des4, after des3, 5d + + section Critical tasks + Completed task in the critical line :crit, done, 2014-01-06,24h + Implement parser and jison :crit, done, after des1, 2d + Create tests for parser :crit, active, 3d + Future task in critical line :crit, 5d + Create tests for renderer :2d + Add to mermaid :1d + + section Documentation + Describe gantt syntax :active, a1, after des1, 3d + Add gantt diagram to demo page :after a1 , 20h + Add another diagram to demo page :doc1, after a1 , 48h + + section Last section + Describe gantt syntax :after doc1, 3d + Add gantt diagram to demo page :20h + Add another diagram to demo page :48h
flowchart TD @@ -116,13 +134,12 @@ A --> B flowchart: { nodeSpacing: 10, curve: 'cardinal', htmlLabels: true }, htmlLabels: true, // gantt: { axisFormat: '%m/%d/%Y' }, - sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: true }, + sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: false }, // sequenceDiagram: { actorMargin: 300 } // deprecated fontFamily: '"arial", sans-serif', fontFamily: 'courier', curve: 'cardinal', securityLevel: 'loose', - sequence:{mirrorActors:false} }); function callback(){alert('It worked');} diff --git a/src/defaultConfig.js b/src/defaultConfig.js index ad18c6875..773beebb5 100644 --- a/src/defaultConfig.js +++ b/src/defaultConfig.js @@ -537,7 +537,7 @@ const config = { ***Default value 50**. */ topPadding: 50, - + rightPadding: 75, /** *| Parameter | Description |Type | Required | Values| *| --- | --- | --- | --- | --- | @@ -567,6 +567,15 @@ const config = { ***Default value 11**. */ fontSize: 11, + /** + *| Parameter | Description |Type | Required | Values| + *| --- | --- | --- | --- | --- | + *| sectionFontSize | Font size for secions| Integer | Required | Any Positive Value | + * + ***Notes:** + ***Default value 11**. + */ + sectionFontSize: 11, /** *| Parameter | Description |Type | Required | Values| diff --git a/src/diagrams/gantt/ganttRenderer.js b/src/diagrams/gantt/ganttRenderer.js index 82e5634fc..e359c9093 100644 --- a/src/diagrams/gantt/ganttRenderer.js +++ b/src/diagrams/gantt/ganttRenderer.js @@ -11,11 +11,12 @@ import { import { parser } from './parser/gantt'; import common from '../common/common'; import ganttDb from './ganttDb'; +import { getConfig } from '../../config'; import { configureSvgSize } from '../../utils'; parser.yy = ganttDb; -const conf = { +const conf2 = { titleTopMargin: 25, barHeight: 20, barGap: 4, @@ -26,15 +27,15 @@ const conf = { fontSize: 11, fontFamily: '"Open-Sans", "sans-serif"' }; -export const setConf = function(cnf) { - const keys = Object.keys(cnf); - - keys.forEach(function(key) { - conf[key] = cnf[key]; - }); +export const setConf = function() { + // const keys = Object.keys(cnf); + // keys.forEach(function(key) { + // conf[key] = cnf[key]; + // }); }; let w; export const draw = function(text, id) { + const conf = getConfig().gantt; parser.yy.clear(); parser.parse(text); @@ -412,6 +413,8 @@ export const draw = function(text, id) { return (d[1] * theGap) / 2 + theTopPad; } }) + .attr('font-size', conf.sectionFontSize) + .attr('font-size', conf.sectionFontSize) .attr('class', function(d) { for (let i = 0; i < categories.length; i++) { if (d[0] === categories[i]) { diff --git a/src/diagrams/gantt/styles.js b/src/diagrams/gantt/styles.js index 8d0c2d0f2..b76728a4c 100644 --- a/src/diagrams/gantt/styles.js +++ b/src/diagrams/gantt/styles.js @@ -42,8 +42,8 @@ const getStyles = options => .sectionTitle { text-anchor: start; - font-size: 11px; - text-height: 14px; + // font-size: ${options.ganttFontSize}; + // text-height: 14px; font-family: 'trebuchet ms', verdana, arial, sans-serif; font-family: var(--mermaid-font-family); @@ -90,14 +90,14 @@ const getStyles = options => font-family: var(--mermaid-font-family); } - .taskText:not([font-size]) { - font-size: 11px; - } + // .taskText:not([font-size]) { + // font-size: ${options.ganttFontSize}; + // } .taskTextOutsideRight { fill: ${options.taskTextDarkColor}; text-anchor: start; - font-size: 11px; + // font-size: ${options.ganttFontSize}; font-family: 'trebuchet ms', verdana, arial, sans-serif; font-family: var(--mermaid-font-family); @@ -106,7 +106,7 @@ const getStyles = options => .taskTextOutsideLeft { fill: ${options.taskTextDarkColor}; text-anchor: end; - font-size: 11px; + // font-size: ${options.ganttFontSize}; } /* Special case clickable */ diff --git a/src/diagrams/user-journey/journeyRenderer.js b/src/diagrams/user-journey/journeyRenderer.js index 328039347..38c8e5b04 100644 --- a/src/diagrams/user-journey/journeyRenderer.js +++ b/src/diagrams/user-journey/journeyRenderer.js @@ -178,7 +178,6 @@ export const bounds = { cnt++; // The loop sequenceItems is a stack so the biggest margins in the beginning of the sequenceItems const n = _self.sequenceItems.length - cnt + 1; - _self.updateVal(item, 'starty', starty - n * conf.boxMargin, Math.min); _self.updateVal(item, 'stopy', stopy + n * conf.boxMargin, Math.max); From 30b265a425287effb8774c8be2f6241837a0d4be Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Sat, 27 Feb 2021 10:28:15 +0100 Subject: [PATCH 3/6] Removed configuration not used --- cypress/platform/knsv.html | 38 ++++++++++---------------------------- src/defaultConfig.js | 11 ----------- 2 files changed, 10 insertions(+), 39 deletions(-) diff --git a/cypress/platform/knsv.html b/cypress/platform/knsv.html index ab6103ded..577ea1296 100644 --- a/cypress/platform/knsv.html +++ b/cypress/platform/knsv.html @@ -26,34 +26,16 @@

info below

-%%{init: { "logLevel": 1, "gantt": {"sectionFontSize": 6, "fontSize": 16 }} }%% -gantt - dateFormat :YYYY-MM-DD - title Adding GANTT diagram functionality to mermaid - excludes :excludes the named dates/days from being included in a charted task.. - section A section - Active task :done, des2, 2014-01-09, 3d - Completed task :done, des1, 2014-01-06, 5d - Future task : des3, after des2, 5d - Future task2 : des4, after des3, 5d - - section Critical tasks - Completed task in the critical line :crit, done, 2014-01-06,24h - Implement parser and jison :crit, done, after des1, 2d - Create tests for parser :crit, active, 3d - Future task in critical line :crit, 5d - Create tests for renderer :2d - Add to mermaid :1d - - section Documentation - Describe gantt syntax :active, a1, after des1, 3d - Add gantt diagram to demo page :after a1 , 20h - Add another diagram to demo page :doc1, after a1 , 48h - - section Last section - Describe gantt syntax :after doc1, 3d - Add gantt diagram to demo page :20h - Add another diagram to demo page :48h +%%{init: { "logLevel": 1, "er": {"fontSize":18 }} }%% + erDiagram + CUSTOMER }|..|{ DELIVERY-ADDRESS : has + CUSTOMER ||--o{ ORDER : places + CUSTOMER ||--o{ INVOICE : "liable for" + DELIVERY-ADDRESS ||--o{ ORDER : receives + INVOICE ||--|{ ORDER : covers + ORDER ||--|{ ORDER-ITEM : includes + PRODUCT-CATEGORY ||--|{ PRODUCT : contains + PRODUCT ||--o{ ORDER-ITEM : "ordered in"
flowchart TD diff --git a/src/defaultConfig.js b/src/defaultConfig.js index 773beebb5..6701209a8 100644 --- a/src/defaultConfig.js +++ b/src/defaultConfig.js @@ -577,17 +577,6 @@ const config = { */ sectionFontSize: 11, - /** - *| Parameter | Description |Type | Required | Values| - *| --- | --- | --- | --- | --- | - *| fontFamily | font Family | string | required |"Open-Sans", "sans-serif" | - * - ***Notes:** - * - ***Default value '"Open-Sans", "sans-serif"'**. - */ - fontFamily: '"Open-Sans", "sans-serif"', - /** *| Parameter | Description |Type | Required | Values| *| --- | --- | --- | --- | --- | From 184351c932cd316cf0448e2231f6dc78647d728d Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Sat, 27 Feb 2021 13:05:12 +0100 Subject: [PATCH 4/6] Lint fix, removed unsued variable --- src/diagrams/user-journey/journeyRenderer.js | 37 -------------------- 1 file changed, 37 deletions(-) diff --git a/src/diagrams/user-journey/journeyRenderer.js b/src/diagrams/user-journey/journeyRenderer.js index 328039347..cf34fef31 100644 --- a/src/diagrams/user-journey/journeyRenderer.js +++ b/src/diagrams/user-journey/journeyRenderer.js @@ -7,43 +7,6 @@ import { configureSvgSize } from '../../utils'; parser.yy = journeyDb; -const conf2 = { - leftMargin: 150, - diagramMarginX: 50, - diagramMarginY: 20, - // Margin between tasks - taskMargin: 50, - // Width of task boxes - width: 150, - // Height of task boxes - height: 50, - // Margin around loop boxes - boxMargin: 10, - boxTextMargin: 5, - - taskFontSize: 14, - taskFontFamily: '"Open-Sans", "sans-serif"', - noteMargin: 10, - // Space between messages - messageMargin: 35, - // Multiline message alignment - messageAlign: 'center', - // Depending on css styling this might need adjustment - // Projects the edge of the diagram downwards - bottomMarginAdj: 1, - - // width of activation box - activationWidth: 10, - - // text placement as: tspan | fo | old only text as before - textPlacement: 'fo', - - actorColours: ['#8FBC8F', '#7CFC00', '#00FFFF', '#20B2AA', '#B0E0E6', '#FFFFE0'], - - sectionFills: ['#191970', '#8B008B', '#4B0082', '#2F4F4F', '#800000', '#8B4513', '#00008B'], - sectionColours: ['#fff'] -}; - export const setConf = function(cnf) { const keys = Object.keys(cnf); From f2e75e730b6228b4220f30974972aca7fb935d28 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Sat, 27 Feb 2021 13:09:23 +0100 Subject: [PATCH 5/6] Merge branch '1903_journey_config' into 1906_gantt_font --- src/diagrams/gantt/ganttRenderer.js | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/src/diagrams/gantt/ganttRenderer.js b/src/diagrams/gantt/ganttRenderer.js index 2de39510d..d2eb621c7 100644 --- a/src/diagrams/gantt/ganttRenderer.js +++ b/src/diagrams/gantt/ganttRenderer.js @@ -15,18 +15,6 @@ import { getConfig } from '../../config'; import { configureSvgSize } from '../../utils'; parser.yy = ganttDb; - -const conf2 = { - titleTopMargin: 25, - barHeight: 20, - barGap: 4, - topPadding: 50, - rightPadding: 75, - leftPadding: 75, - gridLineStartPadding: 35, - fontSize: 11, - fontFamily: '"Open-Sans", "sans-serif"' -}; export const setConf = function() { // const keys = Object.keys(cnf); // keys.forEach(function(key) { From 623056fe2073b0eaadd4557a28fe27e5f9801608 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Sat, 27 Feb 2021 13:24:54 +0100 Subject: [PATCH 6/6] Reverting unintentional config change --- src/defaultConfig.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/defaultConfig.js b/src/defaultConfig.js index eb655afe4..5b9b1e02b 100644 --- a/src/defaultConfig.js +++ b/src/defaultConfig.js @@ -636,7 +636,7 @@ const config = { ***Notes:** ***Default value 10**.. */ - diagramMarginY: 20, + diagramMarginY: 10, /** *| Parameter | Description |Type | Required | Values|