From f8f7d94d5ad0295e11a0065d8197c27cffffe546 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Tue, 28 Feb 2023 19:34:54 +0530 Subject: [PATCH 1/9] fix: Class with members and styles --- .../src/diagrams/class/classDiagram.spec.ts | 33 +++++++++++++++++++ .../diagrams/class/parser/classDiagram.jison | 2 +- 2 files changed, 34 insertions(+), 1 deletion(-) diff --git a/packages/mermaid/src/diagrams/class/classDiagram.spec.ts b/packages/mermaid/src/diagrams/class/classDiagram.spec.ts index 5ff193186..24fbc41ea 100644 --- a/packages/mermaid/src/diagrams/class/classDiagram.spec.ts +++ b/packages/mermaid/src/diagrams/class/classDiagram.spec.ts @@ -190,6 +190,37 @@ describe('class diagram, ', function () { parser.parse(str); }); + it('should handle cssClass shorthand with members', () => { + parser.parse(`classDiagram-v2 + class Class10:::exClass2 { + int[] id + List~int~ ids + test(List~int~ ids) List~bool~ + testArray() bool[] + }`); + + expect(classDb.getClass('Class10')).toMatchInlineSnapshot(` + { + "annotations": [], + "cssClasses": [ + "exClass2", + ], + "domId": "classId-Class10-27", + "id": "Class10", + "label": "Class10", + "members": [ + "int[] id", + "List~int~ ids", + ], + "methods": [ + "test(List~int~ ids) List~bool~", + "testArray() bool[]", + ], + "type": "", + } + `); + }); + it('should handle method statements', function () { const str = 'classDiagram\n' + @@ -1023,6 +1054,7 @@ C1 --> C2 const c1 = classDb.getClass('C1'); expect(c1.label).toBe('Class 1 with text label'); expect(c1.cssClasses.length).toBe(1); + expect(c1.members[0]).toBe('+member1'); expect(c1.cssClasses[0]).toBe('styleClass'); }); @@ -1038,6 +1070,7 @@ cssClass "C1" styleClass const c1 = classDb.getClass('C1'); expect(c1.label).toBe('Class 1 with text label'); expect(c1.cssClasses.length).toBe(1); + expect(c1.members[0]).toBe('+member1'); expect(c1.cssClasses[0]).toBe('styleClass'); }); diff --git a/packages/mermaid/src/diagrams/class/parser/classDiagram.jison b/packages/mermaid/src/diagrams/class/parser/classDiagram.jison index e98b0253b..0c9ad2f2a 100644 --- a/packages/mermaid/src/diagrams/class/parser/classDiagram.jison +++ b/packages/mermaid/src/diagrams/class/parser/classDiagram.jison @@ -283,7 +283,7 @@ classStatement : classIdentifier | classIdentifier STYLE_SEPARATOR alphaNumToken {yy.setCssClass($1, $3);} | classIdentifier STRUCT_START members STRUCT_STOP {yy.addMembers($1,$3);} - | classIdentifier STYLE_SEPARATOR alphaNumToken STRUCT_START members STRUCT_STOP {yy.setCssClass($1, $3);yy.addMembers($1,$3);} + | classIdentifier STYLE_SEPARATOR alphaNumToken STRUCT_START members STRUCT_STOP {yy.setCssClass($1, $3);yy.addMembers($1,$5);} ; classIdentifier From b8b8c4740a00e208672a3c319c19a5c83c87168e Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Tue, 28 Feb 2023 20:31:03 +0530 Subject: [PATCH 2/9] Revert "Split cytoscape" This reverts commit f81f9f7c958848758d26e1e2bf05a98808152a25. --- .../src/diagrams/mindmap/mindmapRenderer.js | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.js b/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.js index 0d814212e..0e68a1015 100644 --- a/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.js +++ b/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.js @@ -4,9 +4,13 @@ import { log } from '../../logger'; import { getConfig } from '../../config'; import { setupGraphViewbox } from '../../setupGraphViewbox'; import svgDraw from './svgDraw'; +import cytoscape from 'cytoscape'; +import coseBilkent from 'cytoscape-cose-bilkent'; import * as db from './mindmapDb'; -let cytoscape; +// Inject the layout algorithm into cytoscape +cytoscape.use(coseBilkent); + /** * @param {any} svg The svg element to draw the diagram onto * @param {object} mindmap The mindmap data and hierarchy @@ -89,14 +93,7 @@ function addNodes(mindmap, cy, conf, level) { * @param conf * @param cy */ -async function layoutMindmap(node, conf) { - if (!cytoscape) { - cytoscape = (await import('cytoscape')).default; - const coseBilkent = (await import('cytoscape-cose-bilkent')).default; - // Inject the layout algorithm into cytoscape - cytoscape.use(coseBilkent); - } - +function layoutMindmap(node, conf) { return new Promise((resolve) => { // Add temporary render element const renderEl = select('body').append('div').attr('id', 'cy').attr('style', 'display:none'); From 65f5f9dc450a8b539fc495ab0220e1b8076d1da3 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Tue, 28 Feb 2023 20:39:06 +0530 Subject: [PATCH 3/9] Revert "chore: Defer elk loading" This reverts commit 037504785c26dd18ee797cfdf93a5e9f5f551f6a. --- .../src/diagrams/flowchart/elk/flowRenderer-elk.js | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js b/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js index b8458efeb..0a92af1b3 100644 --- a/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js +++ b/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js @@ -9,8 +9,8 @@ import { log } from '../../../logger'; import { setupGraphViewbox } from '../../../setupGraphViewbox'; import common, { evaluate } from '../../common/common'; import { interpolateToCurve, getStylesFromArray } from '../../../utils'; - -let elk; +import ELK from 'elkjs/lib/elk.bundled.js'; +const elk = new ELK(); const portPos = {}; @@ -765,10 +765,6 @@ const insertChildren = (nodeArray, parentLookupDb) => { */ export const draw = async function (text, id, _version, diagObj) { - if (!elk) { - const ELK = (await import('elkjs/lib/elk.bundled.js')).default; - elk = new ELK(); - } // Add temporary render element diagObj.db.clear(); nodeDb = {}; From 807e1f303d34fe5820ffbe744f70ecb7d72281ac Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Tue, 28 Feb 2023 20:40:56 +0530 Subject: [PATCH 4/9] Use cytoscape esm --- packages/mermaid/src/diagrams/mindmap/mindmapRenderer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.js b/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.js index 0e68a1015..e82239123 100644 --- a/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.js +++ b/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.js @@ -4,7 +4,7 @@ import { log } from '../../logger'; import { getConfig } from '../../config'; import { setupGraphViewbox } from '../../setupGraphViewbox'; import svgDraw from './svgDraw'; -import cytoscape from 'cytoscape'; +import cytoscape from 'cytoscape/dist/cytoscape.esm.js'; import coseBilkent from 'cytoscape-cose-bilkent'; import * as db from './mindmapDb'; From c0dba713c55bfa6c13b145cc9e84f5a8c2482a37 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Wed, 1 Mar 2023 09:29:59 +0100 Subject: [PATCH 5/9] Updated import of cytoscape for consistent behavior --- packages/mermaid/package.json | 2 +- packages/mermaid/src/diagrams/mindmap/mindmapRenderer.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json index b20a8e6eb..248092f6e 100644 --- a/packages/mermaid/package.json +++ b/packages/mermaid/package.json @@ -1,6 +1,6 @@ { "name": "mermaid", - "version": "10.0.0", + "version": "10.0.1-rc.3", "description": "Markdown-ish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.", "type": "module", "module": "./dist/mermaid.core.mjs", diff --git a/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.js b/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.js index e82239123..c5b5fede1 100644 --- a/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.js +++ b/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.js @@ -4,7 +4,7 @@ import { log } from '../../logger'; import { getConfig } from '../../config'; import { setupGraphViewbox } from '../../setupGraphViewbox'; import svgDraw from './svgDraw'; -import cytoscape from 'cytoscape/dist/cytoscape.esm.js'; +import cytoscape from 'cytoscape/dist/cytoscape.umd.js'; import coseBilkent from 'cytoscape-cose-bilkent'; import * as db from './mindmapDb'; From a65fb3b9794c5d07bae48e1082cd1e6fdaa7e8b6 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Wed, 1 Mar 2023 13:38:26 +0100 Subject: [PATCH 6/9] #4168 Adding the correct offset for the edges --- packages/mermaid/package.json | 2 +- .../diagrams/flowchart/elk/flowRenderer-elk.js | 15 +++++++++++---- 2 files changed, 12 insertions(+), 5 deletions(-) diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json index 248092f6e..4606ad57e 100644 --- a/packages/mermaid/package.json +++ b/packages/mermaid/package.json @@ -1,6 +1,6 @@ { "name": "mermaid", - "version": "10.0.1-rc.3", + "version": "10.0.1-rc.4", "description": "Markdown-ish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.", "type": "module", "module": "./dist/mermaid.core.mjs", diff --git a/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js b/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js index 0a92af1b3..426d22dbb 100644 --- a/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js +++ b/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js @@ -371,6 +371,10 @@ const getEdgeStartEndPoint = (edge, dir) => { let source = edge.start; let target = edge.end; + // Save the original source and target + const sourceId = source; + const targetId = target; + const startNode = nodeDb[source]; const endNode = nodeDb[target]; @@ -387,7 +391,7 @@ const getEdgeStartEndPoint = (edge, dir) => { } // Add the edge to the graph - return { source, target }; + return { source, target, sourceId, targetId }; }; /** @@ -530,14 +534,17 @@ export const addEdges = function (edges, diagObj, graph, svg) { const labelEl = insertEdgeLabel(labelsEl, edgeData); - // calculate start and end points of the edge - const { source, target } = getEdgeStartEndPoint(edge, dir); + // calculate start and end points of the edge, note that the source and target + // can be modified for shapes that have ports + const { source, target, sourceId, targetId } = getEdgeStartEndPoint(edge, dir); log.debug('abc78 source and target', source, target); // Add the edge to the graph graph.edges.push({ id: 'e' + edge.start + edge.end, sources: [source], targets: [target], + sourceId, + targetId, labelEl: labelEl, labels: [ { @@ -698,7 +705,7 @@ const calcOffset = function (src, dest, parentLookupDb) { }; const insertEdge = function (edgesEl, edge, edgeData, diagObj, parentLookupDb) { - const offset = calcOffset(edge.sources[0], edge.targets[0], parentLookupDb); + const offset = calcOffset(edge.sourceId, edge.targetId, parentLookupDb); const src = edge.sections[0].startPoint; const dest = edge.sections[0].endPoint; From 4a9d96aaba6c5a1ebb295d085b421d9102d83e96 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Wed, 1 Mar 2023 14:04:03 +0100 Subject: [PATCH 7/9] Setting version to 10.0.1 --- packages/mermaid/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json index 4606ad57e..90646a785 100644 --- a/packages/mermaid/package.json +++ b/packages/mermaid/package.json @@ -1,6 +1,6 @@ { "name": "mermaid", - "version": "10.0.1-rc.4", + "version": "10.0.1", "description": "Markdown-ish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.", "type": "module", "module": "./dist/mermaid.core.mjs", From 6f3077c8562499b82c981d27533dc8e9ef1127b7 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Wed, 1 Mar 2023 23:16:24 +0530 Subject: [PATCH 8/9] fix: dayjs import extension --- packages/mermaid/package.json | 2 +- packages/mermaid/src/diagrams/gantt/ganttDb.js | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json index 90646a785..496656bd4 100644 --- a/packages/mermaid/package.json +++ b/packages/mermaid/package.json @@ -1,6 +1,6 @@ { "name": "mermaid", - "version": "10.0.1", + "version": "10.0.2-rc.1", "description": "Markdown-ish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.", "type": "module", "module": "./dist/mermaid.core.mjs", diff --git a/packages/mermaid/src/diagrams/gantt/ganttDb.js b/packages/mermaid/src/diagrams/gantt/ganttDb.js index 27ad1a0b8..475ee4de4 100644 --- a/packages/mermaid/src/diagrams/gantt/ganttDb.js +++ b/packages/mermaid/src/diagrams/gantt/ganttDb.js @@ -1,8 +1,8 @@ import { sanitizeUrl } from '@braintree/sanitize-url'; import dayjs from 'dayjs'; -import dayjsIsoWeek from 'dayjs/plugin/isoWeek'; -import dayjsCustomParseFormat from 'dayjs/plugin/customParseFormat'; -import dayjsAdvancedFormat from 'dayjs/plugin/advancedFormat'; +import dayjsIsoWeek from 'dayjs/plugin/isoWeek.js'; +import dayjsCustomParseFormat from 'dayjs/plugin/customParseFormat.js'; +import dayjsAdvancedFormat from 'dayjs/plugin/advancedFormat.js'; import { log } from '../../logger'; import * as configApi from '../../config'; import utils from '../../utils'; From 20298d243ad1bf0447800a3ec24851d6bac8b6fa Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Thu, 2 Mar 2023 13:45:56 +0100 Subject: [PATCH 9/9] v10.0.2 --- package.json | 2 +- packages/mermaid/package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 8e4c50118..7b2114746 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "mermaid-monorepo", "private": true, - "version": "9.4.0", + "version": "10.0.2", "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.", "type": "module", "packageManager": "pnpm@7.27.0", diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json index 496656bd4..fbf8c0d2d 100644 --- a/packages/mermaid/package.json +++ b/packages/mermaid/package.json @@ -1,6 +1,6 @@ { "name": "mermaid", - "version": "10.0.2-rc.1", + "version": "10.0.2", "description": "Markdown-ish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.", "type": "module", "module": "./dist/mermaid.core.mjs",