diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html index 856f58d0c..63fffdd35 100644 --- a/cypress/platform/knsv2.html +++ b/cypress/platform/knsv2.html @@ -4,7 +4,7 @@ body { /* background: rgb(221, 208, 208); */ - /* background: #333; */ + /* background:#333; */ font-family: 'Arial'; /* font-size: 18px !important; */ } h1 { color: grey; } - .mermaid { - border: 1px solid #ddd; - margin: 10px; - } .mermaid2 { display: none; } .mermaid svg { /* font-size: 18px !important; */ - /* background-color: #efefef; */ - /* background-color: #333; */ - /* background-image: radial-gradient(#333 51%, transparent 91%), */ - radial-gradient(#333 51%, transparent 91%); + + background-color: #efefef; + background-image: radial-gradient(#fff 51%, transparent 91%), + radial-gradient(#fff 51%, transparent 91%); background-size: 20px 20px; background-position: 0 0, 10px 10px; background-repeat: repeat; - border: 2px solid rgb(131, 142, 205); } .malware { position: fixed; @@ -73,8 +68,8 @@ font-size: 72px; } /* tspan { - font-size: 6px !important; - } */ + font-size: 6px !important; + } */
@@ -165,9 +160,10 @@ flowchartflowchart RL - subgraph "`one`" - id - end + subgraph "`one`" + a1 -- l1 --> a2 + a1 -- l2 --> a2 + end
flowchart RL diff --git a/packages/mermaid/src/diagrams/state/stateDb.js b/packages/mermaid/src/diagrams/state/stateDb.js index f600f4ecb..b33dfa1ef 100644 --- a/packages/mermaid/src/diagrams/state/stateDb.js +++ b/packages/mermaid/src/diagrams/state/stateDb.js @@ -45,6 +45,7 @@ import { PARENT_ID, NOTE, PARENT, + CSS_EDGE_NOTE_EDGE, } from './stateCommon.js'; import { node } from 'stylis'; @@ -704,7 +705,7 @@ const dataFetcher = (parent, parsedItem, diagramStates, nodes, edges, altFlag, u //add parent id to groupData groupData.id = parentNodeId; //add parent id to noteData - noteData.parentId = parentId; + noteData.parentId = parentNodeId; //insert groupData insertOrUpdateNode(nodes, groupData); @@ -754,6 +755,9 @@ const dataFetcher = (parent, parsedItem, diagramStates, nodes, edges, altFlag, u * @param nodeData */ function insertOrUpdateNode(nodes, nodeData) { + if (!nodeData.id || nodeData.id === '') { + return; + } const existingNodeData = nodes.find((node) => node.id === nodeData.id); if (existingNodeData) { //update the existing nodeData diff --git a/packages/mermaid/src/rendering-util/rendering-elements/nodes.js b/packages/mermaid/src/rendering-util/rendering-elements/nodes.js index 008c650c3..4072d717d 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/nodes.js +++ b/packages/mermaid/src/rendering-util/rendering-elements/nodes.js @@ -4,6 +4,7 @@ import { stateStart } from './shapes/stateStart.ts'; import { stateEnd } from './shapes/stateEnd.ts'; import { forkJoin } from './shapes/forkJoin.ts'; import { choice } from './shapes/choice.ts'; +import {note} from './shapes/note.ts'; import { getConfig } from '$root/diagram-api/diagramAPI.js'; const formatClass = (str) => { @@ -20,6 +21,7 @@ const shapes = { fork: forkJoin, join: forkJoin, choice, + note, }; let nodeElems = {}; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/note.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/note.ts new file mode 100644 index 000000000..5acc86c86 --- /dev/null +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/note.ts @@ -0,0 +1,37 @@ +import { log } from '$root/logger.js'; +import { labelHelper, updateNodeBounds } from './util.js'; +import intersect from '../intersect/index.js'; +import type { Node } from '$root/rendering-util/types.d.ts'; + +export const note = async (parent: SVGAElement, node: Node) => { + const useHtmlLabels = node.useHtmlLabels ; + if (!useHtmlLabels) { + node.centerLabel = true; + } + const { shapeSvg, bbox, halfPadding } = await labelHelper( + parent, + node, + 'node ' + node.classes, + true + ); + + log.info('Classes = ', node.classes); + // add the rect + const rect = shapeSvg.insert('rect', ':first-child'); + + rect + .attr('rx', node.rx) + .attr('ry', node.ry) + .attr('x', -bbox.width / 2 - halfPadding) + .attr('y', -bbox.height / 2 - halfPadding) + .attr('width', bbox.width + node.padding) + .attr('height', bbox.height + node.padding); + + updateNodeBounds(node, rect); + + node.intersect = function (point) { + return intersect.rect(node, point); + }; + + return shapeSvg; +}; diff --git a/packages/mermaid/src/rendering-util/types.d.ts b/packages/mermaid/src/rendering-util/types.d.ts index 156936845..4d10498fe 100644 --- a/packages/mermaid/src/rendering-util/types.d.ts +++ b/packages/mermaid/src/rendering-util/types.d.ts @@ -13,13 +13,15 @@ interface Node { label?: string; parentId?: string; position?: string; - styles?: string; - classes?: string; + styles?: string; // Pick one, don't need both `styles` & `style`, or have (nodeStyle + labelStyle) + style?: string; + classes?: string; // Pick one `classes` vs `class` + class?: string; // Flowchart specific properties - labelType?: string; + labelType?: string; // Always use markdown string? domId: string; // Rendering specific properties for both Flowchart and State Diagram nodes - dir?: string; + dir?: string; // Only relevant for isGroup true, i.e. a sub-graph or composite state. haveCallback?: boolean; labelStyle?: string; labelText?: string; @@ -31,16 +33,17 @@ interface Node { ry?: number; shape?: string; tooltip?: string; - type: string; + type: string; // replace with isGroup: boolean, default false width?: number; height?: number; // Specific properties for State Diagram nodes TODO remove and use generic properties intersect?: (point: any) => any; - style?: string; - class?: string; - borders?: string; + + borders?: string; //Maybe have it similar to nodeStyle, labelStyle, have it as borderStyle (check the usage) useRough?: boolean; + useHtmlLabels?: boolean; + centerLabel?: boolean; } // Common properties for any edge in the system