GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-28 07:03:17 +08:00
Code Issues Projects Releases Wiki Activity

updated rough js hachureGap and shapes

Browse Source
This commit is contained in:
saurabhg772244 2024-09-02 13:35:33 +05:30
parent f4d4c784e4
commit 336c3127ed
5 changed files with 20 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
cypress/platform/saurabh.html
View File

@ -62,22 +62,18 @@
<body> <body>
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid">
---
config:
flowchart:
htmlLabels: true
---
flowchart flowchart
A classDef customClazz fill:#bbf,stroke:#f66,stroke-width:4px,color:#000,stroke-dasharray: 5 5
B@{ shape: multiRect, label: "title aduwab whgdawhbd wajhdbawj" }@ A1 --> B1@{ shape: taggedWaveEdgedRectangle, label: "test augfuyfavf yafuabffaev ydvaubfuac" }@ --> C1
F@{ shape: multiRect, label: "title " }@ A2 --> B2@{ shape: taggedRect, label: "test augfuyfavf yafuabffaev ydvaubfuac" }@ --> C2
G@{ shape: multiRect, label: "title \n duawd \n duawd \n duawd \n duawd" }@ B1:::customClazz
C
D
E
C -->B
B --> D
B --> E
F --> A
A --> F
</pre </pre
> >
<script type="module"> <script type="module">
import mermaid from './mermaid.esm.mjs'; import mermaid from './mermaid.esm.mjs';
import layouts from './mermaid-layout-elk.esm.mjs'; import layouts from './mermaid-layout-elk.esm.mjs';
@ -91,7 +87,7 @@ A
mermaid.initialize({ mermaid.initialize({
// theme: 'base', // theme: 'base',
// handdrawnSeed: 12, // handdrawnSeed: 12,
look: 'classic', look: 'handDrawn',
// 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX', // 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
// 'elk.nodePlacement.strategy': 'SIMPLE', // 'elk.nodePlacement.strategy': 'SIMPLE',
// 'elk.nodePlacement.strategy': 'LAYERED', // 'elk.nodePlacement.strategy': 'LAYERED',
@ -100,7 +96,7 @@ A
// layout: 'elk', // layout: 'elk',
// layout: 'fixed', // layout: 'fixed',
// htmlLabels: false, // htmlLabels: false,
flowchart: { titleTopMargin: 100, padding: 50 }, flowchart: { titleTopMargin: 10, padding: 5 },
// fontFamily: 'Caveat', // fontFamily: 'Caveat',
fontFamily: 'Kalam', fontFamily: 'Kalam',
// fontFamily: 'courier', // fontFamily: 'courier',

3
packages/mermaid/src/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.ts
View File

@ -97,9 +97,10 @@ export const userNodeOverrides = (node: Node, options: any) => {
fill: stylesMap.get('fill') || mainBkg, fill: stylesMap.get('fill') || mainBkg,
fillStyle: 'hachure', // solid fill fillStyle: 'hachure', // solid fill
fillWeight: 4, fillWeight: 4,
hachureGap: 5.2,
stroke: stylesMap.get('stroke') || nodeBorder, stroke: stylesMap.get('stroke') || nodeBorder,
seed: handDrawnSeed, seed: handDrawnSeed,
strokeWidth: 1.3, strokeWidth: stylesMap.get('stroke-width')?.replace('px', '') || 1.3,
fillLineDash: [0, 0], fillLineDash: [0, 0],
}, },
options options

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

@ -54,7 +54,7 @@ export const multiRect = async (parent: SVGAElement, node: Node) => {
const outerPath = createPathFromPoints(outerPathPoints); const outerPath = createPathFromPoints(outerPathPoints);
const outerNode = rc.path(outerPath, options); const outerNode = rc.path(outerPath, options);
const innerPath = createPathFromPoints(innerPathPoints); const innerPath = createPathFromPoints(innerPathPoints);
const innerNode = rc.path(innerPath, options); const innerNode = rc.path(innerPath, { ...options, fill: 'none' });
const multiRect = shapeSvg.insert(() => innerNode, ':first-child'); const multiRect = shapeSvg.insert(() => innerNode, ':first-child');
multiRect.insert(() => outerNode, ':first-child'); multiRect.insert(() => outerNode, ':first-child');

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

@ -45,7 +45,7 @@ export const taggedRect = async (parent: SVGAElement, node: Node) => {
const rectNode = rc.path(rectPath, options); const rectNode = rc.path(rectPath, options);
const tagPath = createPathFromPoints(tagPoints); const tagPath = createPathFromPoints(tagPoints);
const tagNode = rc.path(tagPath, options); const tagNode = rc.path(tagPath, { ...options, fillStyle: 'solid' });
const taggedRect = shapeSvg.insert(() => tagNode, ':first-child'); const taggedRect = shapeSvg.insert(() => tagNode, ':first-child');
taggedRect.insert(() => rectNode, ':first-child'); taggedRect.insert(() => rectNode, ':first-child');

5
packages/mermaid/src/rendering-util/rendering-elements/shapes/taggedWaveEdgedRectangle.ts
View File

@ -67,7 +67,10 @@ export const taggedWaveEdgedRectangle = async (parent: SVGAElement, node: Node)
const waveEdgeRectNode = rc.path(waveEdgeRectPath, options); const waveEdgeRectNode = rc.path(waveEdgeRectPath, options);
const taggedWaveEdgeRectPath = createPathFromPoints(tagPoints); const taggedWaveEdgeRectPath = createPathFromPoints(tagPoints);
const taggedWaveEdgeRectNode = rc.path(taggedWaveEdgeRectPath, options); const taggedWaveEdgeRectNode = rc.path(taggedWaveEdgeRectPath, {
...options,
fillStyle: 'solid',
});
const waveEdgeRect = shapeSvg.insert(() => taggedWaveEdgeRectNode, ':first-child'); const waveEdgeRect = shapeSvg.insert(() => taggedWaveEdgeRectNode, ':first-child');
waveEdgeRect.insert(() => waveEdgeRectNode, ':first-child'); waveEdgeRect.insert(() => waveEdgeRectNode, ':first-child');