marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-19 07:19:41 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2133 from mermaid-js/2132_style_journey_diagram

Browse Source 
FIX: Added new theme user journey diagram specific theme variables
This commit is contained in:
Knut Sveidqvist
2021-06-25 10:28:00 +02:00
committed by GitHub
parent 3a65551746 8b55b83256
commit c1335955f4
3 changed files with 33 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/diagrams/user-journey/journeyRenderer.js
View File

@@ -22,14 +22,15 @@ function drawActorLegend(diagram) {
// Draw the actors // Draw the actors
let yPos = 60; let yPos = 60;
Object.keys(actors).forEach(person => { Object.keys(actors).forEach(person => {
const colour = actors[person]; const colour = actors[person].color;
const circleData = { const circleData = {
cx: 20, cx: 20,
cy: yPos, cy: yPos,
r: 7, r: 7,
fill: colour, fill: colour,
stroke: '#000' stroke: '#000',
pos: actors[person].position
}; };
svgDraw.drawCircle(diagram, circleData); svgDraw.drawCircle(diagram, circleData);
@@ -65,7 +66,10 @@ export const draw = function(text, id) {
for (let member in actors) delete actors[member]; for (let member in actors) delete actors[member];
let actorPos = 0; let actorPos = 0;
actorNames.forEach(actorName => { actorNames.forEach(actorName => {
actors[actorName] = conf.actorColours[actorPos % conf.actorColours.length]; actors[actorName] = {
color: conf.actorColours[actorPos % conf.actorColours.length],
position: actorPos
};
actorPos++; actorPos++;
}); });

23
src/diagrams/user-journey/styles.js
View File

@@ -24,7 +24,7 @@ const getStyles = options =>
} }
.face { .face {
fill: #FFF8DC; ${options.faceColor ? `fill: ${options.faceColor}` : 'fill: #FFF8DC'};
stroke: #999; stroke: #999;
} }
@@ -113,6 +113,27 @@ const getStyles = options =>
.task-type-7, .section-type-7 { .task-type-7, .section-type-7 {
${options.fillType0 ? `fill: ${options.fillType7}` : ''}; ${options.fillType0 ? `fill: ${options.fillType7}` : ''};
} }
.actor-0 {
${options.actor0 ? `fill: ${options.actor0}` : ''};
}
.actor-1 {
${options.actor1 ? `fill: ${options.actor1}` : ''};
}
.actor-2 {
${options.actor2 ? `fill: ${options.actor2}` : ''};
}
.actor-3 {
${options.actor3 ? `fill: ${options.actor3}` : ''};
}
.actor-4 {
${options.actor4 ? `fill: ${options.actor4}` : ''};
}
.actor-5 {
${options.actor5 ? `fill: ${options.actor5}` : ''};
}
}
`; `;
export default getStyles; export default getStyles;

6
src/diagrams/user-journey/svgDraw.js
View File

@@ -108,6 +108,7 @@ export const drawCircle = function(element, circleData) {
const circleElement = element.append('circle'); const circleElement = element.append('circle');
circleElement.attr('cx', circleData.cx); circleElement.attr('cx', circleData.cx);
circleElement.attr('cy', circleData.cy); circleElement.attr('cy', circleData.cy);
circleElement.attr('class', 'actor-' + circleData.pos);
circleElement.attr('fill', circleData.fill); circleElement.attr('fill', circleData.fill);
circleElement.attr('stroke', circleData.stroke); circleElement.attr('stroke', circleData.stroke);
circleElement.attr('r', circleData.r); circleElement.attr('r', circleData.r);
@@ -247,7 +248,7 @@ export const drawTask = function(elem, task, conf) {
let xPos = task.x + 14; let xPos = task.x + 14;
task.people.forEach(person => { task.people.forEach(person => {
const colour = task.actors[person]; const colour = task.actors[person].color;
const circle = { const circle = {
cx: xPos, cx: xPos,
@@ -255,7 +256,8 @@ export const drawTask = function(elem, task, conf) {
r: 7, r: 7,
fill: colour, fill: colour,
stroke: '#000', stroke: '#000',
title: person title: person,
pos: task.actors[person].position
}; };
drawCircle(g, circle); drawCircle(g, circle);