From 291bec7e902765117fb6f956609168efcae46ca7 Mon Sep 17 00:00:00 2001 From: eajenkins Date: Fri, 27 Aug 2021 10:56:56 -0700 Subject: [PATCH] Initial implementation for Issue#2249. Includes changes to sequence diagram code to enable popup menus and individualized styling of actors Includes unit and e2e tests. Includes updates to the md file for sequencediagrams. --- .gitignore | 1 + .../rendering/sequencediagram.spec.js | 40 +++ docs/sequenceDiagram.md | 52 ++++ src/defaultConfig.js | 11 + .../sequence/parser/sequenceDiagram.jison | 27 ++ src/diagrams/sequence/sequenceDb.js | 100 ++++++- src/diagrams/sequence/sequenceDiagram.spec.js | 43 +++ src/diagrams/sequence/sequenceRenderer.js | 63 ++++- src/diagrams/sequence/svgDraw.js | 258 +++++++++++++++++- src/themes/sequence.scss | 11 + 10 files changed, 590 insertions(+), 16 deletions(-) diff --git a/.gitignore b/.gitignore index 460fca169..efe4e39ac 100644 --- a/.gitignore +++ b/.gitignore @@ -24,3 +24,4 @@ local/ _site Gemfile.lock +/.vs diff --git a/cypress/integration/rendering/sequencediagram.spec.js b/cypress/integration/rendering/sequencediagram.spec.js index 0ec283c16..b74a5d980 100644 --- a/cypress/integration/rendering/sequencediagram.spec.js +++ b/cypress/integration/rendering/sequencediagram.spec.js @@ -550,6 +550,46 @@ context('Sequence diagram', () => { ); }); }); + context('links', () => { + it('should support actor links and properties', () => { + imgSnapshotTest( + ` + %%{init: { "config": { "mirrorActors": true, "forceMenus": true }}}%% + sequenceDiagram + participant a as Alice + participant j as John + note right of a: Hello world! + properties a: {"class": "internal-service-actor", "type": "@clock"} + properties j: {"class": "external-service-actor", "type": "@computer"} + links a: {"Repo": "https://www.contoso.com/repo", "Swagger": "https://www.contoso.com/swagger"} + links j: {"Repo": "https://www.contoso.com/repo"} + links a: {"Dashboard": "https://www.contoso.com/dashboard", "On-Call": "https://www.contoso.com/oncall"} + a->>j: Hello John, how are you? + j-->>a: Great! + `, + { logLevel: 0, sequence: { mirrorActors: true, noteFontSize: 18, noteFontFamily: 'Arial' } } + ); + }); + it('should support actor links and properties when not mirrored', () => { + imgSnapshotTest( + ` + %%{init: { "config": { "mirrorActors": false, "forceMenus": true, "wrap": true }}}%% + sequenceDiagram + participant a as Alice + participant j as John + note right of a: Hello world! + properties a: {"class": "internal-service-actor", "type": "@clock"} + properties j: {"class": "external-service-actor", "type": "@computer"} + links a: {"Repo": "https://www.contoso.com/repo", "Swagger": "https://www.contoso.com/swagger"} + links j: {"Repo": "https://www.contoso.com/repo"} + links a: {"Dashboard": "https://www.contoso.com/dashboard", "On-Call": "https://www.contoso.com/oncall"} + a->>j: Hello John, how are you? + j-->>a: Great! + `, + { logLevel: 0, sequence: { mirrorActors: false, noteFontSize: 18, noteFontFamily: 'Arial' } } + ); + }); + }); context('svg size', () => { it('should render a sequence diagram when useMaxWidth is true (default)', () => { renderGraph( diff --git a/docs/sequenceDiagram.md b/docs/sequenceDiagram.md index 0df416dad..f83a73ffd 100644 --- a/docs/sequenceDiagram.md +++ b/docs/sequenceDiagram.md @@ -406,6 +406,58 @@ sequenceDiagram Bob-->>John: Jolly good! ``` +## Actor Menus + +Actors can have popup-menus containing individualized links to external pages. For example, if an actor represented a web service, useful links might include a link to the service health dashboard, repo containing the code for the service, or a wiki page describing the service. +This can be configured by adding the links lines with the format: + + links : + +An example is below: + +``` +sequenceDiagram + participant Alice + participant John + links Alice: {"Dashboard": "https://dashboard.contoso.com/alice", "Wiki": "https://wiki.contoso.com/alice"} + links John: {"Dashboard": "https://dashboard.contoso.com/john", "Wiki": "https://wiki.contoso.com/john"} + Alice->>John: Hello John, how are you? + John-->>Alice: Great! + Alice-)John: See you later! +``` + +## Actor Individualized Styles & Icons + +Actors can have individualized styling including an embedded icon. +This can be configured by adding the properties lines with this format: + + properties : { "class": "", "icon": @ -or- +> + +``` +sequenceDiagram + participant Alice + participant John + properties Alice: {"class": "scheduled-job-actor", "icon": "@clock"} + properties John: {"class": "database-service-actor", "icon": "https://icons.contoso.com/database.svg"} + Alice->>John: Hello John, how are you? + John-->>Alice: Great! + Alice-)John: See you later! +``` + +```mermaid +sequenceDiagram + participant Alice + participant John + properties Alice: {"icon": "@clock"} + properties John: {"icon": "@database"} + Alice->>John: Hello John, how are you? + John-->>Alice: Great! + Alice-)John: See you later! +``` + +Built-in icon names include @clock, @database, @computer. + ## Styling Styling of a sequence diagram is done by defining a number of css classes. During rendering these classes are extracted from the file located at src/themes/sequence.scss diff --git a/src/defaultConfig.js b/src/defaultConfig.js index 634a43eb0..06f112fbe 100644 --- a/src/defaultConfig.js +++ b/src/defaultConfig.js @@ -329,6 +329,17 @@ const config = { */ mirrorActors: true, + /** + *| Parameter | Description |Type | Required | Values| + *| --- | --- | --- | --- | --- | + *| forceMenus | forces actor popup menus to always be visible (to support E2E testing). | Boolean| Required | True, False | + * + * **Notes:** + * + * Default value: false. + */ + forceMenus: false, + /** *| Parameter | Description |Type | Required | Values| *| --- | --- | --- | --- | --- | diff --git a/src/diagrams/sequence/parser/sequenceDiagram.jison b/src/diagrams/sequence/parser/sequenceDiagram.jison index 5ffd4b276..7130adedb 100644 --- a/src/diagrams/sequence/parser/sequenceDiagram.jison +++ b/src/diagrams/sequence/parser/sequenceDiagram.jison @@ -47,6 +47,9 @@ "end" return 'end'; "left of" return 'left_of'; "right of" return 'right_of'; +"links" return 'links'; +"properties" return 'properties'; +"details" return 'details'; "over" return 'over'; "note" return 'note'; "activate" { this.begin('ID'); return 'activate'; } @@ -110,6 +113,9 @@ statement | 'activate' actor 'NEWLINE' {$$={type: 'activeStart', signalType: yy.LINETYPE.ACTIVE_START, actor: $2};} | 'deactivate' actor 'NEWLINE' {$$={type: 'activeEnd', signalType: yy.LINETYPE.ACTIVE_END, actor: $2};} | note_statement 'NEWLINE' + | links_statement 'NEWLINE' + | properties_statement 'NEWLINE' + | details_statement 'NEWLINE' | title text2 'NEWLINE' {$$=[{type:'setTitle', text:$2}]} | 'loop' restOfLine document end { @@ -170,6 +176,27 @@ note_statement $$ = [$3, {type:'addNote', placement:yy.PLACEMENT.OVER, actor:$2.slice(0, 2), text:$4}];} ; +links_statement + : 'links' actor text2 + { + $$ = [$2, {type:'addLinks', actor:$2.actor, text:$3}]; + } + ; + +properties_statement + : 'properties' actor text2 + { + $$ = [$2, {type:'addProperties', actor:$2.actor, text:$3}]; + } + ; + +details_statement + : 'details' actor text2 + { + $$ = [$2, {type:'addDetails', actor:$2.actor, text:$3}]; + } + ; + spaceList : SPACE spaceList | SPACE diff --git a/src/diagrams/sequence/sequenceDb.js b/src/diagrams/sequence/sequenceDb.js index ee68624a4..cb146a715 100644 --- a/src/diagrams/sequence/sequenceDb.js +++ b/src/diagrams/sequence/sequenceDb.js @@ -29,7 +29,11 @@ export const addActor = function(id, name, description) { name: name, description: description.text, wrap: (description.wrap === undefined && autoWrap()) || !!description.wrap, - prevActor: prevActor + prevActor: prevActor, + links: {}, + properties: {}, + actorCnt: null, + rectData: null, }; if (prevActor && actors[prevActor]) { actors[prevActor].nextActor = id; @@ -206,6 +210,87 @@ export const addNote = function(actor, placement, message) { }); }; +export const addLinks = function (actorId, text) { + // find the actor + const actor = getActor(actorId); + // JSON.parse the text + try { + const links = JSON.parse(text.text); + // add the deserialized text to the actor's links field. + insertLinks(actor, links); + } + catch (e) { + log.error('error while parsing actor link text', e); + } +}; + +function insertLinks(actor, links) { + if (actor.links == null) { + actor.links = links; + } + else { + for (let key in links) { + actor.links[key] = links[key]; + } + } +} + +export const addProperties = function (actorId, text) { + // find the actor + const actor = getActor(actorId); + // JSON.parse the text + try { + const properties = JSON.parse(text.text); + // add the deserialized text to the actor's property field. + insertProperties(actor, properties); + } + catch (e) { + log.error('error while parsing actor properties text', e); + } +}; + +function insertProperties(actor, properties) { + if (actor.properties == null) { + actor.properties = properties; + } + else { + for (let key in properties) { + actor.properties[key] = properties[key]; + } + } +} + +export const addDetails = function (actorId, text) { + // find the actor + const actor = getActor(actorId); + const elem = document.getElementById(text.text); + + // JSON.parse the text + try { + const text = elem.innerHTML; + const details = JSON.parse(text); + // add the deserialized text to the actor's property field. + if (details["properties"]) { + insertProperties(actor, details["properties"]); + } + + if (details["links"]) { + insertLinks(actor, details["links"]); + } + } + catch (e) { + log.error('error while parsing actor details text', e); + } +}; + +export const getActorProperty = function (actor, key) { + if (typeof actor !== 'undefined' && typeof actor.properties !== 'undefined') { + return actor.properties[key]; + } + + return undefined; +} + export const setTitle = function(titleWrap) { title = titleWrap.text; titleWrapped = (titleWrap.wrap === undefined && autoWrap()) || !!titleWrap.wrap; @@ -230,6 +315,15 @@ export const apply = function(param) { case 'addNote': addNote(param.actor, param.placement, param.text); break; + case 'addLinks': + addLinks(param.actor, param.text); + break; + case 'addProperties': + addProperties(param.actor, param.text); + break; + case 'addDetails': + addDetails(param.actor, param.text); + break; case 'addMessage': addSignal(param.from, param.to, param.msg, param.signalType); break; @@ -280,6 +374,9 @@ export default { addActor, addMessage, addSignal, + addLinks, + addDetails, + addProperties, autoWrap, setWrap, enableSequenceNumbers, @@ -288,6 +385,7 @@ export default { getActors, getActor, getActorKeys, + getActorProperty, getTitle, parseDirective, getConfig: () => configApi.getConfig().sequence, diff --git a/src/diagrams/sequence/sequenceDiagram.spec.js b/src/diagrams/sequence/sequenceDiagram.spec.js index 8cb1b9a9e..ac480d2f3 100644 --- a/src/diagrams/sequence/sequenceDiagram.spec.js +++ b/src/diagrams/sequence/sequenceDiagram.spec.js @@ -898,6 +898,49 @@ end`; expect(messages[3].message).toBe(''); expect(messages[4].message).toBe('I am good thanks!'); }); + + it('it should handle links', function () { + const str = ` +sequenceDiagram +participant a as Alice +participant b as Bob +participant c as Charlie +links a: { "Repo": "https://repo.contoso.com/", "Dashboard": "https://dashboard.contoso.com/" } +links b: { "Dashboard": "https://dashboard.contoso.com/" } +links a: { "On-Call": "https://oncall.contoso.com/?svc=alice" } +`; + console.log(str); + + mermaidAPI.parse(str); + const actors = parser.yy.getActors(); + expect(actors.a.links["Repo"]).toBe("https://repo.contoso.com/"); + expect(actors.b.links["Repo"]).toBe(undefined); + expect(actors.a.links["Dashboard"]).toBe("https://dashboard.contoso.com/"); + expect(actors.b.links["Dashboard"]).toBe("https://dashboard.contoso.com/"); + expect(actors.a.links["On-Call"]).toBe("https://oncall.contoso.com/?svc=alice"); + expect(actors.c.links["Dashboard"]).toBe(undefined); + }); + + it('it should handle properties', function () { + const str = ` +sequenceDiagram +participant a as Alice +participant b as Bob +participant c as Charlie +properties a: {"class": "internal-service-actor", "icon": "@clock"} +properties b: {"class": "external-service-actor", "icon": "@computer"} +`; + console.log(str); + + mermaidAPI.parse(str); + const actors = parser.yy.getActors(); + expect(actors.a.properties["class"]).toBe("internal-service-actor"); + expect(actors.b.properties["class"]).toBe("external-service-actor"); + expect(actors.a.properties["icon"]).toBe("@clock"); + expect(actors.b.properties["icon"]).toBe("@computer"); + expect(actors.c.properties["class"]).toBe(undefined); + }); + }); describe('when checking the bounds in a sequenceDiagram', function() { diff --git a/src/diagrams/sequence/sequenceRenderer.js b/src/diagrams/sequence/sequenceRenderer.js index 78d54b119..10122c4b7 100644 --- a/src/diagrams/sequence/sequenceRenderer.js +++ b/src/diagrams/sequence/sequenceRenderer.js @@ -230,7 +230,9 @@ const drawNote = function(elem, noteModel) { let textElem = drawText(g, textObj); let textHeight = Math.round( - textElem.map(te => (te._groups || te)[0][0].getBBox().height).reduce((acc, curr) => acc + curr) + textElem + .map(te => (te._groups || te)[0][0].getBBox().height) + .reduce((acc, curr) => acc + curr) ); rectElem.attr('height', textHeight + 2 * conf.noteMargin); @@ -253,7 +255,7 @@ const noteFont = cnf => { return { fontFamily: cnf.noteFontFamily, fontSize: cnf.noteFontSize, - fontWeight: cnf.noteFontWeight + fontWeight: cnf.noteFontWeight, }; }; const actorFont = cnf => { @@ -308,7 +310,7 @@ const drawMessage = function(g, msgModel) { .attr( 'd', `M ${startx},${lineStarty} H ${startx + - Math.max(conf.width / 2, textWidth / 2)} V ${lineStarty + 25} H ${startx}` + Math.max(conf.width / 2, textWidth / 2)} V ${lineStarty + 25} H ${startx}` ); } else { totalOffset += conf.boxMargin; @@ -443,6 +445,24 @@ export const drawActors = function(diagram, actors, actorKeys, verticalPos) { bounds.bumpVerticalPos(conf.height); }; +export const drawActorsPopup = function(diagram, actors, actorKeys) { + var maxHeight = 0; + var maxWidth = 0; + for (let i = 0; i < actorKeys.length; i++) { + const actor = actors[actorKeys[i]]; + const minMenuWidth = getRequiredPopupWidth(actor); + var menuDimensions = svgDraw.drawPopup(diagram, actor, minMenuWidth, conf, conf.forceMenus); + if (menuDimensions.height > maxHeight) { + maxHeight = menuDimensions.height; + } + if (menuDimensions.width + actor.x > maxWidth) { + maxWidth = menuDimensions.width + actor.x; + } + } + + return { maxHeight: maxHeight, maxWidth: maxWidth }; +}; + export const setConf = function(cnf) { assignWithDepth(conf, cnf); @@ -521,6 +541,10 @@ export const draw = function(text, id) { const maxMessageWidthPerActor = getMaxMessageWidthPerActor(actors, messages); conf.height = calculateActorMargins(actors, maxMessageWidthPerActor); + svgDraw.insertComputerIcon(diagram); + svgDraw.insertDatabaseIcon(diagram); + svgDraw.insertClockIcon(diagram); + drawActors(diagram, actors, actorKeys, 0); const loopWidths = calculateLoopBounds(messages, actors, maxMessageWidthPerActor); @@ -687,6 +711,9 @@ export const draw = function(text, id) { drawActors(diagram, actors, actorKeys, bounds.getVerticalPos()); } + // only draw popups for the top row of actors. + var requiredBoxSize = drawActorsPopup(diagram, actors, actorKeys); + const { bounds: box } = bounds.getBounds(); // Adjust line height of actor lines now that the height of the diagram is known @@ -694,12 +721,23 @@ export const draw = function(text, id) { const actorLines = selectAll('#' + id + ' .actor-line'); actorLines.attr('y2', box.stopy); - let height = box.stopy - box.starty + 2 * conf.diagramMarginY; + // Make sure the height of the diagram supports long menus. + let boxHeight = box.stopy - box.starty; + if (boxHeight < requiredBoxSize.maxHeight) { + boxHeight = requiredBoxSize.maxHeight; + } + + let height = boxHeight + 2 * conf.diagramMarginY; if (conf.mirrorActors) { height = height - conf.boxMargin + conf.bottomMarginAdj; } - const width = box.stopx - box.startx + 2 * conf.diagramMarginX; + // Make sure the width of the diagram supports wide menus. + let boxWidth = box.stopx - box.startx; + if (boxWidth < requiredBoxSize.maxWidth) { + boxWidth = requiredBoxSize.maxWidth; + } + const width = boxWidth + 2 * conf.diagramMarginX; if (title) { diagram @@ -831,6 +869,20 @@ const getMaxMessageWidthPerActor = function(actors, messages) { return maxMessageWidthPerActor; }; +const getRequiredPopupWidth = function(actor) { + let requiredPopupWidth = 0; + const textFont = actorFont(conf); + for (let key in actor.links) { + let labelDimensions = utils.calculateTextDimensions(key, textFont); + let labelWidth = labelDimensions.width + 2 * conf.wrapPadding + 2 * conf.boxMargin; + if (requiredPopupWidth < labelWidth) { + requiredPopupWidth = labelWidth; + } + } + + return requiredPopupWidth; +} + /** * This will calculate the optimal margin for each given actor, for a given * actor->messageWidth map. @@ -1111,6 +1163,7 @@ const calculateLoopBounds = function(messages, actors) { export default { bounds, drawActors, + drawActorsPopup, setConf, draw }; diff --git a/src/diagrams/sequence/svgDraw.js b/src/diagrams/sequence/svgDraw.js index 88ba29b21..625b131f0 100644 --- a/src/diagrams/sequence/svgDraw.js +++ b/src/diagrams/sequence/svgDraw.js @@ -18,7 +18,95 @@ export const drawRect = function(elem, rectData) { return rectElem; }; -export const drawText = function(elem, textData) { +export const drawPopup = function (elem, actor, minMenuWidth, textAttrs, forceMenus) { + + if (actor.links === undefined || actor.links === null || Object.keys(actor.links).length === 0) { + return { height: 0, width: 0 }; + } + + const links = actor.links; + const actorCnt = actor.actorCnt; + const rectData = actor.rectData; + + var displayValue = 'none'; + if (forceMenus) { + displayValue = 'block !important'; + } + + const g = elem.append('g'); + g.attr('id', 'actor' + actorCnt + '_popup'); + g.attr('class', 'actorPopupMenu'); + g.attr('display', displayValue); + g.attr('onmouseover', popupMenu('actor' + actorCnt + '_popup')); + g.attr('onmouseout', popdownMenu('actor' + actorCnt + '_popup')); + + var actorClass = ''; + if (typeof rectData.class !== 'undefined') { + actorClass = ' ' + rectData.class; + } + + let menuWidth = rectData.width > minMenuWidth ? rectData.width : minMenuWidth; + + const rectElem = g.append('rect'); + rectElem.attr('class', 'actorPopupMenuPanel' + actorClass); + rectElem.attr('x', rectData.x); + rectElem.attr('y', rectData.height); + rectElem.attr('fill', rectData.fill); + rectElem.attr('stroke', rectData.stroke); + rectElem.attr('width', menuWidth); + rectElem.attr('height', rectData.height); + rectElem.attr('rx', rectData.rx); + rectElem.attr('ry', rectData.ry); + if (links != null) { + var linkY = 20; + for (let key in links) { + var linkElem = g.append('a'); + linkElem.attr('xlink:href', links[key]); + linkElem.attr('target', '_blank'); + + _drawMenuItemTextCandidateFunc(textAttrs)( + key, + linkElem, + rectData.x + 10, + rectData.height + linkY, + menuWidth, + 20, + { class: 'actor' }, + textAttrs + ); + + linkY += 30; + } + } + + rectElem.attr('height', linkY); + + return { height: rectData.height + linkY, width: menuWidth }; +}; + +export const drawImage = function (elem, x, y, link) { + const imageElem = elem.append('image'); + imageElem.attr('x', x); + imageElem.attr('y', y); + imageElem.attr('xlink:href', link); +} + +export const drawEmbeddedImage = function (elem, x, y, link) { + const imageElem = elem.append('use'); + imageElem.attr('x', x); + imageElem.attr('y', y); + imageElem.attr('xlink:href', '#' + link); +} + +export const popupMenu = function (popid) { + return "var pu = document.getElementById('" + popid + "'); if (pu != null) { pu.style.display = 'block'; }"; +} + +export const popdownMenu = function (popid) { + return "var pu = document.getElementById('" + popid + "'); if (pu != null) { pu.style.display = 'none'; }"; +} + +export const drawText = function (elem, textData) { let prevTextHeight = 0, textHeight = 0; const lines = textData.text.split(common.lineBreakRegex); @@ -190,7 +278,9 @@ let actorCnt = -1; export const drawActor = function(elem, actor, conf) { const center = actor.x + actor.width / 2; - const g = elem.append('g'); + const boxpluslineGroup = elem.append('g'); + var g = boxpluslineGroup; + if (actor.y === 0) { actorCnt++; g.append('line') @@ -202,18 +292,42 @@ export const drawActor = function(elem, actor, conf) { .attr('class', 'actor-line') .attr('stroke-width', '0.5px') .attr('stroke', '#999'); + + g = boxpluslineGroup.append('g'); + actor.actorCnt = actorCnt; + if (actor.links != null) { + g.attr('onmouseover', popupMenu('actor' + actorCnt + '_popup')); + g.attr('onmouseout', popdownMenu('actor' + actorCnt + '_popup')); + } } const rect = getNoteRect(); + var cssclass = 'actor'; + if (actor.properties != null && actor.properties["class"]) { + cssclass = actor.properties["class"]; + } + else { + rect.fill = '#eaeaea'; + } rect.x = actor.x; rect.y = actor.y; - rect.fill = '#eaeaea'; rect.width = actor.width; rect.height = actor.height; - rect.class = 'actor'; + rect.class = cssclass; rect.rx = 3; rect.ry = 3; - drawRect(g, rect); + var rectElem = drawRect(g, rect); + actor.rectData = rect; + + if (actor.properties != null && actor.properties["icon"]) { + const iconSrc = actor.properties["icon"].trim(); + if (iconSrc.charAt(0) === '@') { + drawEmbeddedImage(g, rect.x + rect.width - 20, rect.y + 10, iconSrc.substr(1)); + } + else { + drawImage(g, rect.x + rect.width - 20, rect.y + 10, iconSrc); + } + } _drawTextCandidateFunc(conf)( actor.description, @@ -256,7 +370,7 @@ export const drawActivation = function(elem, bounds, verticalPos, conf, actorAct * @param labelText - Text within the loop. * @param conf - diagrom configuration */ -export const drawLoop = function(elem, loopModel, labelText, conf) { +export const drawLoop = function (elem, loopModel, labelText, conf) { const { boxMargin, boxTextMargin, @@ -361,10 +475,47 @@ export const drawBackgroundRect = function(elem, bounds) { width: bounds.stopx - bounds.startx, height: bounds.stopy - bounds.starty, fill: bounds.fill, - class: 'rect' + class: 'rect', }); rectElem.lower(); }; + +export const insertDatabaseIcon = function (elem) { + elem + .append('defs') + .append('symbol') + .attr('id', 'database') + .attr('fill-rule', 'evenodd') + .attr('clip-rule', 'evenodd') + .append('path') + .attr('transform', 'scale(.5)') + .attr('d', 'M12.258.001l.256.004.255.005.253.008.251.01.249.012.247.015.246.016.242.019.241.02.239.023.236.024.233.027.231.028.229.031.225.032.223.034.22.036.217.038.214.04.211.041.208.043.205.045.201.046.198.048.194.05.191.051.187.053.183.054.18.056.175.057.172.059.168.06.163.061.16.063.155.064.15.066.074.033.073.033.071.034.07.034.069.035.068.035.067.035.066.035.064.036.064.036.062.036.06.036.06.037.058.037.058.037.055.038.055.038.053.038.052.038.051.039.05.039.048.039.047.039.045.04.044.04.043.04.041.04.04.041.039.041.037.041.036.041.034.041.033.042.032.042.03.042.029.042.027.042.026.043.024.043.023.043.021.043.02.043.018.044.017.043.015.044.013.044.012.044.011.045.009.044.007.045.006.045.004.045.002.045.001.045v17l-.001.045-.002.045-.004.045-.006.045-.007.045-.009.044-.011.045-.012.044-.013.044-.015.044-.017.043-.018.044-.02.043-.021.043-.023.043-.024.043-.026.043-.027.042-.029.042-.03.042-.032.042-.033.042-.034.041-.036.041-.037.041-.039.041-.04.041-.041.04-.043.04-.044.04-.045.04-.047.039-.048.039-.05.039-.051.039-.052.038-.053.038-.055.038-.055.038-.058.037-.058.037-.06.037-.06.036-.062.036-.064.036-.064.036-.066.035-.067.035-.068.035-.069.035-.07.034-.071.034-.073.033-.074.033-.15.066-.155.064-.16.063-.163.061-.168.06-.172.059-.175.057-.18.056-.183.054-.187.053-.191.051-.194.05-.198.048-.201.046-.205.045-.208.043-.211.041-.214.04-.217.038-.22.036-.223.034-.225.032-.229.031-.231.028-.233.027-.236.024-.239.023-.241.02-.242.019-.246.016-.247.015-.249.012-.251.01-.253.008-.255.005-.256.004-.258.001-.258-.001-.256-.004-.255-.005-.253-.008-.251-.01-.249-.012-.247-.015-.245-.016-.243-.019-.241-.02-.238-.023-.236-.024-.234-.027-.231-.028-.228-.031-.226-.032-.223-.034-.22-.036-.217-.038-.214-.04-.211-.041-.208-.043-.204-.045-.201-.046-.198-.048-.195-.05-.19-.051-.187-.053-.184-.054-.179-.056-.176-.057-.172-.059-.167-.06-.164-.061-.159-.063-.155-.064-.151-.066-.074-.033-.072-.033-.072-.034-.07-.034-.069-.035-.068-.035-.067-.035-.066-.035-.064-.036-.063-.036-.062-.036-.061-.036-.06-.037-.058-.037-.057-.037-.056-.038-.055-.038-.053-.038-.052-.038-.051-.039-.049-.039-.049-.039-.046-.039-.046-.04-.044-.04-.043-.04-.041-.04-.04-.041-.039-.041-.037-.041-.036-.041-.034-.041-.033-.042-.032-.042-.03-.042-.029-.042-.027-.042-.026-.043-.024-.043-.023-.043-.021-.043-.02-.043-.018-.044-.017-.043-.015-.044-.013-.044-.012-.044-.011-.045-.009-.044-.007-.045-.006-.045-.004-.045-.002-.045-.001-.045v-17l.001-.045.002-.045.004-.045.006-.045.007-.045.009-.044.011-.045.012-.044.013-.044.015-.044.017-.043.018-.044.02-.043.021-.043.023-.043.024-.043.026-.043.027-.042.029-.042.03-.042.032-.042.033-.042.034-.041.036-.041.037-.041.039-.041.04-.041.041-.04.043-.04.044-.04.046-.04.046-.039.049-.039.049-.039.051-.039.052-.038.053-.038.055-.038.056-.038.057-.037.058-.037.06-.037.061-.036.062-.036.063-.036.064-.036.066-.035.067-.035.068-.035.069-.035.07-.034.072-.034.072-.033.074-.033.151-.066.155-.064.159-.063.164-.061.167-.06.172-.059.176-.057.179-.056.184-.054.187-.053.19-.051.195-.05.198-.048.201-.046.204-.045.208-.043.211-.041.214-.04.217-.038.22-.036.223-.034.226-.032.228-.031.231-.028.234-.027.236-.024.238-.023.241-.02.243-.019.245-.016.247-.015.249-.012.251-.01.253-.008.255-.005.256-.004.258-.001.258.001zm-9.258 20.499v.01l.001.021.003.021.004.022.005.021.006.022.007.022.009.023.01.022.011.023.012.023.013.023.015.023.016.024.017.023.018.024.019.024.021.024.022.025.023.024.024.025.052.049.056.05.061.051.066.051.07.051.075.051.079.052.084.052.088.052.092.052.097.052.102.051.105.052.11.052.114.051.119.051.123.051.127.05.131.05.135.05.139.048.144.049.147.047.152.047.155.047.16.045.163.045.167.043.171.043.176.041.178.041.183.039.187.039.19.037.194.035.197.035.202.033.204.031.209.03.212.029.216.027.219.025.222.024.226.021.23.02.233.018.236.016.24.015.243.012.246.01.249.008.253.005.256.004.259.001.26-.001.257-.004.254-.005.25-.008.247-.011.244-.012.241-.014.237-.016.233-.018.231-.021.226-.021.224-.024.22-.026.216-.027.212-.028.21-.031.205-.031.202-.034.198-.034.194-.036.191-.037.187-.039.183-.04.179-.04.175-.042.172-.043.168-.044.163-.045.16-.046.155-.046.152-.047.148-.048.143-.049.139-.049.136-.05.131-.05.126-.05.123-.051.118-.052.114-.051.11-.052.106-.052.101-.052.096-.052.092-.052.088-.053.083-.051.079-.052.074-.052.07-.051.065-.051.06-.051.056-.05.051-.05.023-.024.023-.025.021-.024.02-.024.019-.024.018-.024.017-.024.015-.023.014-.024.013-.023.012-.023.01-.023.01-.022.008-.022.006-.022.006-.022.004-.022.004-.021.001-.021.001-.021v-4.127l-.077.055-.08.053-.083.054-.085.053-.087.052-.09.052-.093.051-.095.05-.097.05-.1.049-.102.049-.105.048-.106.047-.109.047-.111.046-.114.045-.115.045-.118.044-.12.043-.122.042-.124.042-.126.041-.128.04-.13.04-.132.038-.134.038-.135.037-.138.037-.139.035-.142.035-.143.034-.144.033-.147.032-.148.031-.15.03-.151.03-.153.029-.154.027-.156.027-.158.026-.159.025-.161.024-.162.023-.163.022-.165.021-.166.02-.167.019-.169.018-.169.017-.171.016-.173.015-.173.014-.175.013-.175.012-.177.011-.178.01-.179.008-.179.008-.181.006-.182.005-.182.004-.184.003-.184.002h-.37l-.184-.002-.184-.003-.182-.004-.182-.005-.181-.006-.179-.008-.179-.008-.178-.01-.176-.011-.176-.012-.175-.013-.173-.014-.172-.015-.171-.016-.17-.017-.169-.018-.167-.019-.166-.02-.165-.021-.163-.022-.162-.023-.161-.024-.159-.025-.157-.026-.156-.027-.155-.027-.153-.029-.151-.03-.15-.03-.148-.031-.146-.032-.145-.033-.143-.034-.141-.035-.14-.035-.137-.037-.136-.037-.134-.038-.132-.038-.13-.04-.128-.04-.126-.041-.124-.042-.122-.042-.12-.044-.117-.043-.116-.045-.113-.045-.112-.046-.109-.047-.106-.047-.105-.048-.102-.049-.1-.049-.097-.05-.095-.05-.093-.052-.09-.051-.087-.052-.085-.053-.083-.054-.08-.054-.077-.054v4.127zm0-5.654v.011l.001.021.003.021.004.021.005.022.006.022.007.022.009.022.01.022.011.023.012.023.013.023.015.024.016.023.017.024.018.024.019.024.021.024.022.024.023.025.024.024.052.05.056.05.061.05.066.051.07.051.075.052.079.051.084.052.088.052.092.052.097.052.102.052.105.052.11.051.114.051.119.052.123.05.127.051.131.05.135.049.139.049.144.048.147.048.152.047.155.046.16.045.163.045.167.044.171.042.176.042.178.04.183.04.187.038.19.037.194.036.197.034.202.033.204.032.209.03.212.028.216.027.219.025.222.024.226.022.23.02.233.018.236.016.24.014.243.012.246.01.249.008.253.006.256.003.259.001.26-.001.257-.003.254-.006.25-.008.247-.01.244-.012.241-.015.237-.016.233-.018.231-.02.226-.022.224-.024.22-.025.216-.027.212-.029.21-.03.205-.032.202-.033.198-.035.194-.036.191-.037.187-.039.183-.039.179-.041.175-.042.172-.043.168-.044.163-.045.16-.045.155-.047.152-.047.148-.048.143-.048.139-.05.136-.049.131-.05.126-.051.123-.051.118-.051.114-.052.11-.052.106-.052.101-.052.096-.052.092-.052.088-.052.083-.052.079-.052.074-.051.07-.052.065-.051.06-.05.056-.051.051-.049.023-.025.023-.024.021-.025.02-.024.019-.024.018-.024.017-.024.015-.023.014-.023.013-.024.012-.022.01-.023.01-.023.008-.022.006-.022.006-.022.004-.021.004-.022.001-.021.001-.021v-4.139l-.077.054-.08.054-.083.054-.085.052-.087.053-.09.051-.093.051-.095.051-.097.05-.1.049-.102.049-.105.048-.106.047-.109.047-.111.046-.114.045-.115.044-.118.044-.12.044-.122.042-.124.042-.126.041-.128.04-.13.039-.132.039-.134.038-.135.037-.138.036-.139.036-.142.035-.143.033-.144.033-.147.033-.148.031-.15.03-.151.03-.153.028-.154.028-.156.027-.158.026-.159.025-.161.024-.162.023-.163.022-.165.021-.166.02-.167.019-.169.018-.169.017-.171.016-.173.015-.173.014-.175.013-.175.012-.177.011-.178.009-.179.009-.179.007-.181.007-.182.005-.182.004-.184.003-.184.002h-.37l-.184-.002-.184-.003-.182-.004-.182-.005-.181-.007-.179-.007-.179-.009-.178-.009-.176-.011-.176-.012-.175-.013-.173-.014-.172-.015-.171-.016-.17-.017-.169-.018-.167-.019-.166-.02-.165-.021-.163-.022-.162-.023-.161-.024-.159-.025-.157-.026-.156-.027-.155-.028-.153-.028-.151-.03-.15-.03-.148-.031-.146-.033-.145-.033-.143-.033-.141-.035-.14-.036-.137-.036-.136-.037-.134-.038-.132-.039-.13-.039-.128-.04-.126-.041-.124-.042-.122-.043-.12-.043-.117-.044-.116-.044-.113-.046-.112-.046-.109-.046-.106-.047-.105-.048-.102-.049-.1-.049-.097-.05-.095-.051-.093-.051-.09-.051-.087-.053-.085-.052-.083-.054-.08-.054-.077-.054v4.139zm0-5.666v.011l.001.02.003.022.004.021.005.022.006.021.007.022.009.023.01.022.011.023.012.023.013.023.015.023.016.024.017.024.018.023.019.024.021.025.022.024.023.024.024.025.052.05.056.05.061.05.066.051.07.051.075.052.079.051.084.052.088.052.092.052.097.052.102.052.105.051.11.052.114.051.119.051.123.051.127.05.131.05.135.05.139.049.144.048.147.048.152.047.155.046.16.045.163.045.167.043.171.043.176.042.178.04.183.04.187.038.19.037.194.036.197.034.202.033.204.032.209.03.212.028.216.027.219.025.222.024.226.021.23.02.233.018.236.017.24.014.243.012.246.01.249.008.253.006.256.003.259.001.26-.001.257-.003.254-.006.25-.008.247-.01.244-.013.241-.014.237-.016.233-.018.231-.02.226-.022.224-.024.22-.025.216-.027.212-.029.21-.03.205-.032.202-.033.198-.035.194-.036.191-.037.187-.039.183-.039.179-.041.175-.042.172-.043.168-.044.163-.045.16-.045.155-.047.152-.047.148-.048.143-.049.139-.049.136-.049.131-.051.126-.05.123-.051.118-.052.114-.051.11-.052.106-.052.101-.052.096-.052.092-.052.088-.052.083-.052.079-.052.074-.052.07-.051.065-.051.06-.051.056-.05.051-.049.023-.025.023-.025.021-.024.02-.024.019-.024.018-.024.017-.024.015-.023.014-.024.013-.023.012-.023.01-.022.01-.023.008-.022.006-.022.006-.022.004-.022.004-.021.001-.021.001-.021v-4.153l-.077.054-.08.054-.083.053-.085.053-.087.053-.09.051-.093.051-.095.051-.097.05-.1.049-.102.048-.105.048-.106.048-.109.046-.111.046-.114.046-.115.044-.118.044-.12.043-.122.043-.124.042-.126.041-.128.04-.13.039-.132.039-.134.038-.135.037-.138.036-.139.036-.142.034-.143.034-.144.033-.147.032-.148.032-.15.03-.151.03-.153.028-.154.028-.156.027-.158.026-.159.024-.161.024-.162.023-.163.023-.165.021-.166.02-.167.019-.169.018-.169.017-.171.016-.173.015-.173.014-.175.013-.175.012-.177.01-.178.01-.179.009-.179.007-.181.006-.182.006-.182.004-.184.003-.184.001-.185.001-.185-.001-.184-.001-.184-.003-.182-.004-.182-.006-.181-.006-.179-.007-.179-.009-.178-.01-.176-.01-.176-.012-.175-.013-.173-.014-.172-.015-.171-.016-.17-.017-.169-.018-.167-.019-.166-.02-.165-.021-.163-.023-.162-.023-.161-.024-.159-.024-.157-.026-.156-.027-.155-.028-.153-.028-.151-.03-.15-.03-.148-.032-.146-.032-.145-.033-.143-.034-.141-.034-.14-.036-.137-.036-.136-.037-.134-.038-.132-.039-.13-.039-.128-.041-.126-.041-.124-.041-.122-.043-.12-.043-.117-.044-.116-.044-.113-.046-.112-.046-.109-.046-.106-.048-.105-.048-.102-.048-.1-.05-.097-.049-.095-.051-.093-.051-.09-.052-.087-.052-.085-.053-.083-.053-.08-.054-.077-.054v4.153zm8.74-8.179l-.257.004-.254.005-.25.008-.247.011-.244.012-.241.014-.237.016-.233.018-.231.021-.226.022-.224.023-.22.026-.216.027-.212.028-.21.031-.205.032-.202.033-.198.034-.194.036-.191.038-.187.038-.183.04-.179.041-.175.042-.172.043-.168.043-.163.045-.16.046-.155.046-.152.048-.148.048-.143.048-.139.049-.136.05-.131.05-.126.051-.123.051-.118.051-.114.052-.11.052-.106.052-.101.052-.096.052-.092.052-.088.052-.083.052-.079.052-.074.051-.07.052-.065.051-.06.05-.056.05-.051.05-.023.025-.023.024-.021.024-.02.025-.019.024-.018.024-.017.023-.015.024-.014.023-.013.023-.012.023-.01.023-.01.022-.008.022-.006.023-.006.021-.004.022-.004.021-.001.021-.001.021.001.021.001.021.004.021.004.022.006.021.006.023.008.022.01.022.01.023.012.023.013.023.014.023.015.024.017.023.018.024.019.024.02.025.021.024.023.024.023.025.051.05.056.05.06.05.065.051.07.052.074.051.079.052.083.052.088.052.092.052.096.052.101.052.106.052.11.052.114.052.118.051.123.051.126.051.131.05.136.05.139.049.143.048.148.048.152.048.155.046.16.046.163.045.168.043.172.043.175.042.179.041.183.04.187.038.191.038.194.036.198.034.202.033.205.032.21.031.212.028.216.027.22.026.224.023.226.022.231.021.233.018.237.016.241.014.244.012.247.011.25.008.254.005.257.004.26.001.26-.001.257-.004.254-.005.25-.008.247-.011.244-.012.241-.014.237-.016.233-.018.231-.021.226-.022.224-.023.22-.026.216-.027.212-.028.21-.031.205-.032.202-.033.198-.034.194-.036.191-.038.187-.038.183-.04.179-.041.175-.042.172-.043.168-.043.163-.045.16-.046.155-.046.152-.048.148-.048.143-.048.139-.049.136-.05.131-.05.126-.051.123-.051.118-.051.114-.052.11-.052.106-.052.101-.052.096-.052.092-.052.088-.052.083-.052.079-.052.074-.051.07-.052.065-.051.06-.05.056-.05.051-.05.023-.025.023-.024.021-.024.02-.025.019-.024.018-.024.017-.023.015-.024.014-.023.013-.023.012-.023.01-.023.01-.022.008-.022.006-.023.006-.021.004-.022.004-.021.001-.021.001-.021-.001-.021-.001-.021-.004-.021-.004-.022-.006-.021-.006-.023-.008-.022-.01-.022-.01-.023-.012-.023-.013-.023-.014-.023-.015-.024-.017-.023-.018-.024-.019-.024-.02-.025-.021-.024-.023-.024-.023-.025-.051-.05-.056-.05-.06-.05-.065-.051-.07-.052-.074-.051-.079-.052-.083-.052-.088-.052-.092-.052-.096-.052-.101-.052-.106-.052-.11-.052-.114-.052-.118-.051-.123-.051-.126-.051-.131-.05-.136-.05-.139-.049-.143-.048-.148-.048-.152-.048-.155-.046-.16-.046-.163-.045-.168-.043-.172-.043-.175-.042-.179-.041-.183-.04-.187-.038-.191-.038-.194-.036-.198-.034-.202-.033-.205-.032-.21-.031-.212-.028-.216-.027-.22-.026-.224-.023-.226-.022-.231-.021-.233-.018-.237-.016-.241-.014-.244-.012-.247-.011-.25-.008-.254-.005-.257-.004-.26-.001-.26.001z'); // this is actual shape for database symbol +}; + +export const insertComputerIcon = function (elem) { + elem + .append('defs') + .append('symbol') + .attr('id', 'computer') + .attr('width', '24') + .attr('height', '24') + .append('path') + .attr('transform', 'scale(.5)') + .attr('d', 'M2 2v13h20v-13h-20zm18 11h-16v-9h16v9zm-10.228 6l.466-1h3.524l.467 1h-4.457zm14.228 3h-24l2-6h2.104l-1.33 4h18.45l-1.297-4h2.073l2 6zm-5-10h-14v-7h14v7z'); +}; + +export const insertClockIcon = function (elem) { + elem + .append('defs') + .append('symbol') + .attr('id', 'clock') + .attr('width', '24') + .attr('height', '24') + .append('path') + .attr('transform', 'scale(.5)') + .attr('d', 'M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm5.848 12.459c.202.038.202.333.001.372-1.907.361-6.045 1.111-6.547 1.111-.719 0-1.301-.582-1.301-1.301 0-.512.77-5.447 1.125-7.445.034-.192.312-.181.343.014l.985 6.238 5.394 1.011z'); +}; + /** * Setup arrow head and define the marker. The result is appended to the svg. */ @@ -532,7 +683,7 @@ const _drawTextCandidateFunc = (function() { .attr('height', height); const text = f - .append('div') + .append('xhtml:div') .style('display', 'table') .style('height', '100%') .style('width', '100%'); @@ -556,7 +707,86 @@ const _drawTextCandidateFunc = (function() { } } - return function(conf) { + return function (conf) { + return conf.textPlacement === 'fo' ? byFo : conf.textPlacement === 'old' ? byText : byTspan; + }; +})(); + +const _drawMenuItemTextCandidateFunc = (function () { + function byText(content, g, x, y, width, height, textAttrs) { + const text = g + .append('text') + .attr('x', x) + .attr('y', y) + .style('text-anchor', 'start') + .text(content); + _setTextAttrs(text, textAttrs); + } + + function byTspan(content, g, x, y, width, height, textAttrs, conf) { + const { actorFontSize, actorFontFamily, actorFontWeight } = conf; + + const lines = content.split(common.lineBreakRegex); + for (let i = 0; i < lines.length; i++) { + const dy = i * actorFontSize - (actorFontSize * (lines.length - 1)) / 2; + const text = g + .append('text') + .attr('x', x) + .attr('y', y) + .style('text-anchor', 'start') + .style('font-size', actorFontSize) + .style('font-weight', actorFontWeight) + .style('font-family', actorFontFamily); + text + .append('tspan') + .attr('x', x) + .attr('dy', dy) + .text(lines[i]); + + text + .attr('y', y + height / 2.0) + .attr('dominant-baseline', 'central') + .attr('alignment-baseline', 'central'); + + _setTextAttrs(text, textAttrs); + } + } + + function byFo(content, g, x, y, width, height, textAttrs, conf) { + const s = g.append('switch'); + const f = s + .append('foreignObject') + .attr('x', x) + .attr('y', y) + .attr('width', width) + .attr('height', height); + + const text = f + .append('xhtml:div') + .style('display', 'table') + .style('height', '100%') + .style('width', '100%'); + + text + .append('div') + .style('display', 'table-cell') + .style('text-align', 'center') + .style('vertical-align', 'middle') + .text(content); + + byTspan(content, s, x, y, width, height, textAttrs, conf); + _setTextAttrs(text, textAttrs); + } + + function _setTextAttrs(toText, fromTextAttrsDict) { + for (const key in fromTextAttrsDict) { + if (fromTextAttrsDict.hasOwnProperty(key)) { // eslint-disable-line + toText.attr(key, fromTextAttrsDict[key]); + } + } + } + + return function (conf) { return conf.textPlacement === 'fo' ? byFo : conf.textPlacement === 'old' ? byText : byTspan; }; })(); @@ -566,6 +796,9 @@ export default { drawText, drawLabel, drawActor, + drawPopup, + drawImage, + drawEmbeddedImage, anchorElement, drawActivation, drawLoop, @@ -574,6 +807,11 @@ export default { insertArrowFilledHead, insertSequenceNumber, insertArrowCrossHead, + insertDatabaseIcon, + insertComputerIcon, + insertClockIcon, getTextObj, - getNoteRect + getNoteRect, + popupMenu, + popdownMenu }; diff --git a/src/themes/sequence.scss b/src/themes/sequence.scss index 1d2a2dbeb..bf52dd010 100644 --- a/src/themes/sequence.scss +++ b/src/themes/sequence.scss @@ -94,3 +94,14 @@ text.actor > tspan { fill: $activationBkgColor; stroke: $activationBorderColor; } + +.actorPopupMenu { + position: absolute; +} + +.actorPopupMenuPanel { + position: absolute; + fill: $actorBkg; + box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); + filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4)); +}