marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-11-06 22:04:16 +01:00
Code Issues Packages Projects Releases Wiki Activity

MC-1730 Styling of the subprocess class with neo

Browse Source
This commit is contained in:
Knut Sveidqvist
2024-06-30 12:24:07 +02:00
parent 0b4dbeda8c
commit 834afef2c0
6 changed files with 337 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

303
cypress/platform/refactor.html Normal file
View File

@@ -0,0 +1,303 @@
<html>
<head>
<script src="//unpkg.com/alpinejs" defer></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link
href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
rel="stylesheet"
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
rel="stylesheet"
/>
<style>
body {
font-family: 'Arial';
}
table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
th,
td {
border: 1px solid black;
padding: 10px;
text-align: center;
vertical-align: middle;
}
.separator {
height: 20px;
background-color: #f0f0f0;
}
.vertical-header {
text-align: center;
}
.collapsible {
background-color: #f9f9f9;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
.active,
.collapsible:hover {
background-color: #ccc;
}
.collapsible:after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 2px;
}
.active:after {
content: '\2212';
}
.content {
padding: 0 5px;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
background-color: #f1f1f1;
}
.content .pre-scrollable {
max-height: 200px;
overflow-y: scroll;
}
</style>
</head>
<body>
<script>
const data = {
shapes: [
{
descr: 'Stadium shape',
code: `
flowchart LR
id1([This is the text in the box])
`,
},
{
descr: 'Sub-Routine shape',
code: `
flowchart LR
id1[[This is the text in the box]]
`,
},
{
descr: 'Cylindrical shape',
code: `
flowchart LR
id1[(Database)]
`,
},
{
descr: 'Circle shape',
code: `
flowchart LR
id1((Circle))
`,
},
{
descr: 'Double Circle shape',
code: `
flowchart LR
id1(((Circle)))
`,
},
{
descr: 'Asymmetric shape',
code: `
flowchart LR
id1>This is the text in the box]
`,
},
{
descr: 'Rhombus/Diamond/Question shape',
code: `
flowchart LR
id1{This is the text in the box}
`,
},
{
descr: 'Hexagon shape',
code: `
flowchart LR
id1{{This is the text in the box}}
`,
},
{
descr: 'Parallelogram shape',
code: `
flowchart TD
id1[/This is the text in the box/]
`,
},
{
descr: 'Parallelogram Alt shape',
code: `
flowchart TD
id1[\This is the text in the box\]
`,
},
{
descr: 'Trapezoid shape',
code: `
flowchart TD
A[/Christmas\\]
`,
},
{
descr: 'Trapezoid Alt shape',
code: `
flowchart TD
id1[\\This is the text in the box\\]
`,
},
{
descr: 'Rect with rounded corner',
code: `
flowchart LR
id1(This is the text in the box)
`,
},
{
descr: 'Rect with sharp corner',
code: `
flowchart LR
id1[This is the text in the box]
`,
},
],
looks: ['classic', 'handdrawn', 'neo'],
// looks: ['classic'],
layouts: ['elk', 'dagre'],
// layouts: ['elk'],
themes: ['default', 'neo'],
// themes: ['default'],
};
function generateMermaidCode(layout, look, theme, shape) {
return `---
config:
layout: ${layout}
look: ${look}
theme: ${theme}
---
${shape.code}
`;
}
</script>
<table x-data="data">
<tr>
<th></th>
<template x-for="layout in layouts">
<template x-for="look in looks">
<template x-for="theme in themes">
<th x-text="layout + '-' + look + '-' + theme "></th>
</template>
</template>
</template>
</tr>
<template x-for="shape in shapes">
<tr>
<th class="vertical-header">
<button class="collapsible" x-text="shape.descr">Sub-Routine shape</button>
<div class="content">
<div class="pre-scrollable">
<pre x-text="shape.code"></pre>
</div>
</div>
</th>
<template x-for="layout in layouts">
<template x-for="look in looks">
<template x-for="theme in themes">
<td>
<pre id="diagram6" class="mermaid" x-text="generateMermaidCode(layout, look, theme, shape)"></pre>
</td>
</template>
</template>
</template>
</template>
</tr>
</table>
<script type="module">
import mermaid from './mermaid.esm.mjs';
import { layouts } from './mermaid-layout-elk.esm.mjs';
mermaid.registerLayoutLoaders(layouts);
mermaid.parseError = function (err, hash) {};
mermaid.initialize({
handdrawn: false,
mergeEdges: true,
layout: 'dagre',
flowchart: { titleTopMargin: 10 },
// fontFamily: 'Caveat',
fontFamily: 'Kalam',
sequence: {
actorFontFamily: 'courier',
noteFontFamily: 'courier',
messageFontFamily: 'courier',
},
fontSize: 16,
logLevel: 0,
});
function callback() {
alert('It worked');
}
mermaid.parseError = function (err, hash) {
console.error('In parse error:');
console.error(err);
};
let coll = document.getElementsByClassName('collapsible');
for (const element of coll) {
element.addEventListener('click', function () {
this.classList.toggle('active');
let content = this.nextElementSibling;
if (content.style.maxHeight) {
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + 'px';
}
});
}
</script>
</body>
</html>

2
packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts
View File

@@ -55,7 +55,7 @@ export const drawRect = async (parent: SVGAElement, node: Node, options: RectOpt
.attr('class', rectClass) .attr('class', rectClass)
.attr('style', nodeStyles) .attr('style', nodeStyles)
.attr('rx', rx) .attr('rx', rx)
.attr('data-id', 'abc') .attr('data-id', node.id)
.attr('data-et', 'node') .attr('data-et', 'node')
.attr('ry', ry) .attr('ry', ry)
.attr('x', x) .attr('x', x)

2
packages/mermaid/src/rendering-util/rendering-elements/shapes/roundedRect.ts
View File

@@ -13,7 +13,5 @@ export const roundedRect = async (parent: SVGAElement, node: Node) => {
classes: '', classes: '',
} as RectOptions; } as RectOptions;
console.log('Perra1, node, options: ', node, options);
return drawRect(parent, node, options); return drawRect(parent, node, options);
}; };

33
packages/mermaid/src/rendering-util/rendering-elements/shapes/subroutine.ts
View File

@@ -1,6 +1,7 @@
import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js'; import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
import intersect from '../intersect/index.js'; import intersect from '../intersect/index.js';
import type { Node } from '$root/rendering-util/types.d.ts'; import type { Node } from '$root/rendering-util/types.d.ts';
import { getConfig } from '$root/diagram-api/diagramAPI.js';
import { import {
styles2String, styles2String,
userNodeOverrides, userNodeOverrides,
@@ -35,14 +36,19 @@ export const createSubroutinePathD = (
}; };
export const subroutine = async (parent: SVGAElement, node: Node) => { export const subroutine = async (parent: SVGAElement, node: Node) => {
const { themeVariables } = getConfig();
const { useGradient, mainBkg } = themeVariables;
const { labelStyles, nodeStyles } = styles2String(node); const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles; node.labelStyle = labelStyles;
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node)); const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
const halfPadding = (node?.padding || 0) / 2; const halfPadding = (node?.padding || 8) / 2;
const labelPaddingX = node.look === 'neo' ? node.padding * 3 : node.padding; const nodePadding = node?.padding || 8;
const labelPaddingY = node.look === 'neo' ? node.padding * 1.5 : node.padding; // const labelPaddingX = node.padding;
const w = bbox.width + labelPaddingY; // const labelPaddingY = node.padding;
const h = bbox.height + labelPaddingX; const labelPaddingX = node.look === 'neo' ? nodePadding * 3 : nodePadding;
const labelPaddingY = node.look === 'neo' ? nodePadding * 1.5 : nodePadding;
const w = bbox.width + labelPaddingX;
const h = bbox.height + labelPaddingY;
const x = -bbox.width / 2 - labelPaddingX / 2; const x = -bbox.width / 2 - labelPaddingX / 2;
const y = -bbox.height / 2 - labelPaddingY / 2; const y = -bbox.height / 2 - labelPaddingY / 2;
let rect; let rect;
@@ -60,20 +66,29 @@ export const subroutine = async (parent: SVGAElement, node: Node) => {
{ x: -8, y: 0 }, { x: -8, y: 0 },
]; ];
if (node.look === 'handdrawn') { if (node.look === 'handdrawn' || (node.look === 'neo' && !useGradient)) {
// @ts-ignore - rough is not typed // @ts-ignore - rough is not typed
const rc = rough.svg(shapeSvg); const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, {}); const options = userNodeOverrides(node, {});
if (node.look === 'neo') {
options.roughness = 0;
options.fillStyle = 'solid';
// options.stroke = 'none';
// options.strokeWidth = 0
}
const roughNode = rc.rectangle(x - 8, y, w + 16, h, options); const roughNode = rc.rectangle(x - 8, y, w + 16, h, options);
const l1 = rc.line(x, y, x, y + h, options); const l1 = rc.line(x, y, x, y + h, options);
const l2 = rc.line(x + w, y, x + w, y + h, options); const l2 = rc.line(x + w, y, x + w, y + h, options);
shapeSvg.insert(() => l1, ':first-child'); const l1El = shapeSvg.insert(() => l1, ':first-child');
shapeSvg.insert(() => l2, ':first-child'); const l2El = shapeSvg.insert(() => l2, ':first-child');
l1El.attr('class', 'neo-line');
l2El.attr('class', 'neo-line');
rect = shapeSvg.insert(() => roughNode, ':first-child'); rect = shapeSvg.insert(() => roughNode, ':first-child');
rect.attr('class', 'basic label-container').attr('style', cssStyles); // rect.attr('class', 'basic label-container').attr('style', cssStyles);
} else { } else {
const el = insertPolygonShape(shapeSvg, w, h, points); const el = insertPolygonShape(shapeSvg, w, h, points);
if (nodeStyles) { if (nodeStyles) {

7
packages/mermaid/src/styles.ts
View File

@@ -85,10 +85,15 @@ const getStyles = (
[data-look="neo"].node rect, [data-look="neo"].node polygon , [data-look="neo"].node path { [data-look="neo"].node rect, [data-look="neo"].node polygon , [data-look="neo"].node path {
stroke: ${options.useGradient ? 'url(' + svgId + '-gradient)' : options.nodeBorder}; stroke: ${options.useGradient ? 'url(' + svgId + '-gradient)' : 'none'};
filter: ${options.dropShadow}; filter: ${options.dropShadow};
} }
[data-look="neo"].node .neo-line path {
stroke: ${options.primaryBorderColor};
filter: none;
}
[data-look="neo"].node circle{ [data-look="neo"].node circle{
stroke: ${options.useGradient ? 'url(' + svgId + '-gradient)' : options.nodeBorder}; stroke: ${options.useGradient ? 'url(' + svgId + '-gradient)' : options.nodeBorder};
filter: ${options.dropShadow}; filter: ${options.dropShadow};

4
packages/mermaid/src/themes/theme-default.js
View File

@@ -30,6 +30,7 @@ class Theme {
this.secondBkg = '#ffffde'; this.secondBkg = '#ffffde';
this.lineColor = '#333333'; this.lineColor = '#333333';
this.border1 = '#9370DB'; this.border1 = '#9370DB';
this.primaryBorderColor = mkBorder(this.primaryColor, this.darkMode);
this.border2 = '#aaaa33'; this.border2 = '#aaaa33';
this.arrowheadColor = '#333333'; this.arrowheadColor = '#333333';
this.fontFamily = '"trebuchet ms", verdana, arial, sans-serif'; this.fontFamily = '"trebuchet ms", verdana, arial, sans-serif';
@@ -117,7 +118,8 @@ class Theme {
this.labelColor = 'black'; this.labelColor = 'black';
this.errorBkgColor = '#552222'; this.errorBkgColor = '#552222';
this.errorTextColor = '#552222'; this.errorTextColor = '#552222';
this.useGradient = true;
this.useGradient = false;
this.gradientStart = this.primaryBorderColor; this.gradientStart = this.primaryBorderColor;
this.gradientStop = this.secondaryBorderColor; this.gradientStop = this.secondaryBorderColor;
this.dropShadow = 'drop-shadow( 1px 2px 2px rgba(185,185,185,1))'; this.dropShadow = 'drop-shadow( 1px 2px 2px rgba(185,185,185,1))';