From 8681e78e50ca48462cfe8677551455ea1e397d41 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Wed, 20 Jul 2022 14:39:01 +0200 Subject: [PATCH] Fixes for rendering tests --- cypress/fixtures/example.json | 5 ++ cypress/helpers/util.js | 3 +- .../rendering/sequencediagram.spec.js | 2 +- cypress/platform/knsv.html | 51 ++++++++++++++----- docs/Setup.md | 41 +++++++-------- src/diagram-api/diagram-orchestration.js | 21 ++++---- src/diagram-api/diagramAPI.js | 2 +- src/diagrams/sequence/sequenceDb.js | 2 +- src/diagrams/sequence/svgDraw.js | 5 +- src/mermaidAPI.js | 3 +- 10 files changed, 81 insertions(+), 54 deletions(-) create mode 100644 cypress/fixtures/example.json diff --git a/cypress/fixtures/example.json b/cypress/fixtures/example.json new file mode 100644 index 0000000000..02e4254378 --- /dev/null +++ b/cypress/fixtures/example.json @@ -0,0 +1,5 @@ +{ + "name": "Using fixtures to represent data", + "email": "hello@cypress.io", + "body": "Fixtures are a great way to mock data for responses to routes" +} diff --git a/cypress/helpers/util.js b/cypress/helpers/util.js index dd3fdd2c92..0a52a335b2 100644 --- a/cypress/helpers/util.js +++ b/cypress/helpers/util.js @@ -42,7 +42,8 @@ export const imgSnapshotTest = (graphStr, _options, api = false, validation) => if (!options.fontSize) { options.fontSize = '16px'; } - const useAppli = Cypress.env('useAppli'); + // const useAppli = Cypress.env('useAppli'); + const useAppli = false; const branch = Cypress.env('codeBranch'); cy.log('Hello ' + useAppli ? 'Appli' : 'image-snapshot'); const name = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-'); diff --git a/cypress/integration/rendering/sequencediagram.spec.js b/cypress/integration/rendering/sequencediagram.spec.js index c110f05ada..aaf5e94ceb 100644 --- a/cypress/integration/rendering/sequencediagram.spec.js +++ b/cypress/integration/rendering/sequencediagram.spec.js @@ -80,7 +80,7 @@ context('Sequence diagram', () => { loop Loopy Bob->>Alice: Pasten end `, - {} + { wrap: true } ); }); context('font settings', () => { diff --git a/cypress/platform/knsv.html b/cypress/platform/knsv.html index f9d75eb234..0d870e1a36 100644 --- a/cypress/platform/knsv.html +++ b/cypress/platform/knsv.html @@ -64,7 +64,7 @@ commit commit -
+
sequenceDiagram title: My Sequence Diagram Title accTitle: My Acc Sequence Diagram @@ -218,20 +218,41 @@ }
-graph LR - A[[subroutine shape test]] - A -->|Get money| B[[Go shopping]] - B --> C[[Let me think...
Do I want something for work,
something to spend every free second with,
or something to get around?]] - C -->|One| D[[Laptop]] - C -->|Two| E[[iPhone]] - C -->|Three| F[[Car
wroom wroom]] - click A "index.html#link-clicked" "link test" - click B testClick "click test" - classDef someclass fill:#f96; - class A someclass; - class C someclass; +%%{init: {'config': {'wrap': true }}}%% + sequenceDiagram + participant A as Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be + A->>Bob: Hola + Bob-->A: Pasten !
+ gitGraph + commit id: "ZERO" + branch develop + commit id:"A" + checkout main + commit id:"ONE" + checkout develop + commit id:"B" + branch featureA + commit id:"FIX" + commit id: "FIX-2" + checkout main + commit id:"TWO" + cherry-pick id:"A" + commit id:"THREE" + cherry-pick id:"FIX" + checkout develop + commit id:"C" + merge featureA +
+
+flowchart TD + A[Christmas] -->|Get money| B(Go shopping) + B --> C{Let me think} + C -->|One| D[Laptop] + C -->|Two| E[iPhone] + C -->|Three| F[fa:fa-car Car] +
classDiagram Animal "1" <|-- Duck Animal <|-- Fish @@ -292,7 +313,8 @@ htmlLabels: true, }, sequence: { - mirrorActors: false, + // mirrorActors: false,' + wrap: false, }, // gantt: { axisFormat: '%m/%d/%Y' }, // sequence: { @@ -315,6 +337,7 @@ curve: 'cardinal', // securityLevel: 'sandbox', // themeVariables: {relationLabelColor: 'red'} + wrap: true, }); function callback() { alert('It worked'); diff --git a/docs/Setup.md b/docs/Setup.md index 9408b8e90e..85070a1e72 100644 --- a/docs/Setup.md +++ b/docs/Setup.md @@ -1429,15 +1429,6 @@ function _Default value: At default, will mirror Global Config_ Returns **[object][5]** The siteConfig -## parse - -### Parameters - -- `text` -- `dia` - -Returns **any** - ## getSiteConfig ## getSiteConfig @@ -1480,21 +1471,6 @@ Returns **any** The currentConfig merged with the sanitized conf Returns **any** The currentConfig -## sanitize - -## sanitize - -| Function | Description | Type | Values | -| -------- | -------------------------------------- | ----------- | ------ | -| sanitize | Sets the siteConfig to desired values. | Put Request | None | - -Ensures options parameter does not attempt to override siteConfig secure keys **Notes**: modifies -options in-place - -### Parameters - -- `options` **any** The potential setConfig parameter - ## render Function that renders an svg with a graph from a chart definition. Usage example below. @@ -1523,6 +1499,21 @@ $(function () { Returns **any** +## sanitize + +## sanitize + +| Function | Description | Type | Values | +| -------- | -------------------------------------- | ----------- | ------ | +| sanitize | Sets the siteConfig to desired values. | Put Request | None | + +Ensures options parameter does not attempt to override siteConfig secure keys **Notes**: modifies +options in-place + +### Parameters + +- `options` **any** The potential setConfig parameter + ## addDirective Pushes in a directive to the configuration @@ -1533,6 +1524,8 @@ Pushes in a directive to the configuration ## reset +## reset + | Function | Description | Type | Required | Values | | -------- | ---------------------------- | ----------- | -------- | ------ | | reset | Resets currentConfig to conf | Put Request | Required | None | diff --git a/src/diagram-api/diagram-orchestration.js b/src/diagram-api/diagram-orchestration.js index 51f1c43db9..d73bc1bbba 100644 --- a/src/diagram-api/diagram-orchestration.js +++ b/src/diagram-api/diagram-orchestration.js @@ -19,13 +19,14 @@ import gitGraphDetector from '../diagrams/git/gitGraphDetector'; // mindmapRenderer, // mindmapDetector // ); -registerDiagram( - 'gitGraph', - gitGraphParser, - gitGraphDb, - gitGraphRenderer, - undefined, - gitGraphDetector -); -const apa = { apa: 1 }; -export default apa; +const addDiagrams = () => { + registerDiagram( + 'gitGraph', + gitGraphParser, + gitGraphDb, + gitGraphRenderer, + undefined, + gitGraphDetector + ); +}; +export default addDiagrams; diff --git a/src/diagram-api/diagramAPI.js b/src/diagram-api/diagramAPI.js index 176a2bef9d..62c8843682 100644 --- a/src/diagram-api/diagramAPI.js +++ b/src/diagram-api/diagramAPI.js @@ -79,7 +79,7 @@ const diagrams = { flowDb.setGen('gen-1'); }, }, - flowchartV2: { + 'flowchart-v2': { db: flowDb, renderer: flowRendererV2, parser: flowParser, diff --git a/src/diagrams/sequence/sequenceDb.js b/src/diagrams/sequence/sequenceDb.js index 8ae5fe8f10..7d03091277 100644 --- a/src/diagrams/sequence/sequenceDb.js +++ b/src/diagrams/sequence/sequenceDb.js @@ -19,7 +19,7 @@ const notes = []; let diagramTitle = ''; let description = ''; let sequenceNumbersEnabled = false; -let wrapEnabled = false; +let wrapEnabled; export const parseDirective = function (statement, context, type) { mermaidAPI.parseDirective(this, statement, context, type); diff --git a/src/diagrams/sequence/svgDraw.js b/src/diagrams/sequence/svgDraw.js index a00d10169f..cbd4244a5e 100644 --- a/src/diagrams/sequence/svgDraw.js +++ b/src/diagrams/sequence/svgDraw.js @@ -847,9 +847,12 @@ const _drawTextCandidateFunc = (function () { function byTspan(content, g, x, y, width, height, textAttrs, conf) { const { actorFontSize, actorFontFamily, actorFontWeight } = conf; + let _actorFontSize = + actorFontSize && actorFontSize.replace ? actorFontSize.replace('px', '') : actorFontSize; + const lines = content.split(common.lineBreakRegex); for (let i = 0; i < lines.length; i++) { - const dy = i * actorFontSize - (actorFontSize * (lines.length - 1)) / 2; + const dy = i * _actorFontSize - (_actorFontSize * (lines.length - 1)) / 2; const text = g .append('text') .attr('x', x + width / 2) diff --git a/src/mermaidAPI.js b/src/mermaidAPI.js index 9c45a2bf2e..5b16c609a4 100644 --- a/src/mermaidAPI.js +++ b/src/mermaidAPI.js @@ -19,7 +19,7 @@ import { select } from 'd3'; import { compile, serialize, stringify } from 'stylis'; import pkg from '../package.json'; import * as configApi from './config'; -import apa from './diagram-api/diagram-orchestration'; +import addDiagrams from './diagram-api/diagram-orchestration'; import classDb from './diagrams/class/classDb'; import flowDb from './diagrams/flowchart/flowDb'; import flowRenderer from './diagrams/flowchart/flowRenderer'; @@ -515,6 +515,7 @@ function initialize(options) { updateRendererConfigs(config); setLogLevel(config.logLevel); + addDiagrams(); } const mermaidAPI = Object.freeze({