updated rough js hachureGap and shapes

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

View File

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

View File

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

View File

@ -54,7 +54,7 @@ export const multiRect = async (parent: SVGAElement, node: Node) => {
const outerPath = createPathFromPoints(outerPathPoints);
const outerNode = rc.path(outerPath, options);
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');
multiRect.insert(() => outerNode, ':first-child');

View File

@ -45,7 +45,7 @@ export const taggedRect = async (parent: SVGAElement, node: Node) => {
const rectNode = rc.path(rectPath, options);
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');
taggedRect.insert(() => rectNode, ':first-child');

View File

@ -67,7 +67,10 @@ export const taggedWaveEdgedRectangle = async (parent: SVGAElement, node: Node)
const waveEdgeRectNode = rc.path(waveEdgeRectPath, options);
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');
waveEdgeRect.insert(() => waveEdgeRectNode, ':first-child');