diff --git a/cypress/integration/rendering/classDiagram.spec.js b/cypress/integration/rendering/classDiagram.spec.js index d1f290436..1e4585149 100644 --- a/cypress/integration/rendering/classDiagram.spec.js +++ b/cypress/integration/rendering/classDiagram.spec.js @@ -58,4 +58,56 @@ describe('Class diagram', () => { ); cy.get('svg'); }); + it('should render multiple class diagrams', () => { + imgSnapshotTest( + [ + ` + classDiagram + Class01 "1" <|--|> "*" AveryLongClass : Cool + <<interface>> Class01 + Class03 "1" *-- "*" Class04 + Class05 "1" o-- "many" Class06 + Class07 "1" .. "*" Class08 + Class09 "1" --> "*" C2 : Where am i? + Class09 "*" --* "*" C3 + Class09 "1" --|> "1" Class07 + Class07 : equals() + Class07 : Object[] elementData + Class01 : size() + Class01 : int chimp + Class01 : int gorilla + Class08 "1" <--> "*" C2: Cool label + class Class10 { + <<service>> + int id + test() + } + `, + ` + classDiagram + Class01 "1" <|--|> "*" AveryLongClass : Cool + <<interface>> Class01 + Class03 "1" *-- "*" Class04 + Class05 "1" o-- "many" Class06 + Class07 "1" .. "*" Class08 + Class09 "1" --> "*" C2 : Where am i? + Class09 "*" --* "*" C3 + Class09 "1" --|> "1" Class07 + Class07 : equals() + Class07 : Object[] elementData + Class01 : size() + Class01 : int chimp + Class01 : int gorilla + Class08 "1" <--> "*" C2: Cool label + class Class10 { + <<service>> + int id + test() + } + `, + ], + {} + ); + cy.get('svg'); + }); }); diff --git a/cypress/platform/viewer.js b/cypress/platform/viewer.js index 76705dfaf..bd156df43 100644 --- a/cypress/platform/viewer.js +++ b/cypress/platform/viewer.js @@ -14,11 +14,22 @@ const contentLoaded = function() { const graphObj = JSON.parse(Base64.decode(graphBase64)); // const graph = 'hello' console.log(graphObj); - const div = document.createElement('div'); - div.id = 'block'; - div.className = 'mermaid'; - div.innerHTML = graphObj.code; - document.getElementsByTagName('body')[0].appendChild(div); + if (Array.isArray(graphObj.code)) { + const numCodes = graphObj.code.length; + for (let i = 0; i < numCodes; i++) { + const div = document.createElement('div'); + div.id = 'block' + i; + div.className = 'mermaid'; + div.innerHTML = graphObj.code[i]; + document.getElementsByTagName('body')[0].appendChild(div); + } + } else { + const div = document.createElement('div'); + div.id = 'block'; + div.className = 'mermaid'; + div.innerHTML = graphObj.code; + document.getElementsByTagName('body')[0].appendChild(div); + } global.mermaid.initialize(graphObj.mermaid); // console.log('graphObj.mermaid', graphObj.mermaid) global.mermaid.init(); @@ -31,18 +42,45 @@ const contentLoadedApi = function() { const graphBase64 = document.location.href.substr(pos); const graphObj = JSON.parse(Base64.decode(graphBase64)); // const graph = 'hello' - const div = document.createElement('div'); - div.id = 'block'; - div.className = 'mermaid'; - // div.innerHTML = graphObj.code - document.getElementsByTagName('body')[0].appendChild(div); - global.mermaid.initialize(graphObj.mermaid); + if (Array.isArray(graphObj.code)) { + const numCodes = graphObj.code.length; + const divs = []; + for (let i = 0; i < numCodes; i++) { + const div = document.createElement('div'); + div.id = 'block' + i; + div.className = 'mermaid'; + // div.innerHTML = graphObj.code + document.getElementsByTagName('body')[0].appendChild(div); + divs[i] = div; + } - mermaid2.render( - 'newid', - graphObj.code, - (svgCode, bindFunctions) => { - div.innerHTML = svgCode; + global.mermaid.initialize(graphObj.mermaid); + + for (let i = 0; i < numCodes; i++) { + mermaid2.render( + 'newid' + i, + graphObj.code[i], + (svgCode, bindFunctions) => { + div.innerHTML = svgCode; + + bindFunctions(div); + }, + divs[i] + ); + } + } else { + const div = document.createElement('div'); + div.id = 'block'; + div.className = 'mermaid'; + // div.innerHTML = graphObj.code + document.getElementsByTagName('body')[0].appendChild(div); + global.mermaid.initialize(graphObj.mermaid); + + mermaid2.render( + 'newid', + graphObj.code, + (svgCode, bindFunctions) => { + div.innerHTML = svgCode; if (bindFunctions) bindFunctions(div); }, diff --git a/src/diagrams/class/classRenderer.js b/src/diagrams/class/classRenderer.js index c61c37744..9814237c4 100644 --- a/src/diagrams/class/classRenderer.js +++ b/src/diagrams/class/classRenderer.js @@ -8,7 +8,7 @@ import { parser } from './parser/classDiagram'; parser.yy = classDb; -const idCache = {}; +let idCache = {}; let classCnt = 0; const conf = { @@ -136,7 +136,6 @@ const insertMarkers = function(elem) { }; let edgeCount = 0; -let total = 0; const drawEdge = function(elem, path, relation) { const getRelationType = function(type) { switch (type) { @@ -291,7 +290,7 @@ const drawClass = function(elem, classDef) { } }; - const id = 'classId' + (classCnt % total); + const id = 'classId' + classCnt; const classInfo = { id: id, label: classDef.id, @@ -411,6 +410,7 @@ export const setConf = function(cnf) { * @param id */ export const draw = function(text, id) { + idCache = {}; parser.yy.clear(); parser.parse(text); @@ -437,7 +437,6 @@ export const draw = function(text, id) { const classes = classDb.getClasses(); const keys = Object.keys(classes); - total = keys.length; for (let i = 0; i < keys.length; i++) { const classDef = classes[keys[i]]; const node = drawClass(diagram, classDef);