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

#3358 Multiple arrows

Browse Source
This commit is contained in:
Knut Sveidqvist 2024-01-04 16:05:19 +01:00
parent 2ed4469029
commit d0eca268ad
6 changed files with 86 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
cypress/platform/knsv2.html
View File

@ -73,8 +73,41 @@ block-beta
<pre id="diagram" class="mermaid">
block-beta
columns 3
A space space:3 B("GORILLA")
A("APA") --o B
A
space
block
E
F
end
E --> A
</pre>
<pre id="diagram" class="mermaid2">
block-beta
columns 3
C space A space B
B --> A
B --> C
block
D
E
end
E --> A
</pre>
<pre id="diagram" class="mermaid2">
block-beta
columns 2
C A B
block
D
E
end
</pre>
<pre id="diagram" class="mermaid2">
block-beta
columns 2
A B C D
A --o B
A --> C
</pre>
<pre id="diagram" class="mermaid2">

6
packages/mermaid/src/dagre-wrapper/edges.js
View File

@ -375,9 +375,9 @@ export const insertEdge = function (elem, e, edge, clusterDb, diagramType, graph
let pointsHasChanged = false;
const tail = graph.node(e.v);
var head = graph.node(e.w);
log.info('abc88 InsertEdge (head & tail): ', head, tail);
log.info('abc88 InsertEdge (head & tail): ', e.v, head, ' --- ', e.w, tail);
if (head.intersect && tail.intersect) {
if (head?.intersect && tail?.intersect) {
points = points.slice(1, edge.points.length - 1);
points.unshift(tail.intersect(points[0]));
log.info(
@ -387,6 +387,8 @@ export const insertEdge = function (elem, e, edge, clusterDb, diagramType, graph
head.intersect(points[points.length - 1])
);
points.push(head.intersect(points[points.length - 1]));
} else {
log.info('abc88 No intersect');
}
if (edge.toCluster) {
log.info('to cluster abc88', clusterDb[edge.toCluster]);

27
packages/mermaid/src/diagrams/block/blockDB.ts
View File

@ -19,7 +19,9 @@ import clone from 'lodash-es/clone.js';
let blockDatabase: Record<string, Block> = {};
let edgeList: Block[] = [];
let edgeCount: Record<string, number> = {};
const populateBlockDatabase = (blockList: Block[], parent: Block): void => {
const populateBlockDatabase = (_blockList: Block[], parent: Block): void => {
const blockList = _blockList.flat();
const children = [];
for (const block of blockList) {
if (block.type === 'column-setting') {
@ -161,10 +163,10 @@ export const generateId = () => {
type ISetHierarchy = (block: Block[]) => void;
const setHierarchy = (block: Block[]): void => {
log.debug('The hierarchy', JSON.stringify(block, null, 2));
log.debug('The document from parsing', JSON.stringify(block, null, 2));
rootBlock.children = block;
populateBlockDatabase(block, rootBlock);
log.debug('The hierarchy', JSON.stringify(rootBlock, null, 2));
log.debug('The document after popuplation', JSON.stringify(rootBlock, null, 2));
blocks = rootBlock.children;
};
@ -190,6 +192,23 @@ const getColumns = (blockid: string): number => {
};
type IGetBlocks = () => Block[];
/**
* Returns all the blocks as a flat array
* @returns
*/
const getBlocksFlat: IGetBlocks = () => {
const result: Block[] = [];
console.log('abc88 getBlocksFlat', blockDatabase);
const keys = Object.keys(blockDatabase);
for (const key of keys) {
result.push(blockDatabase[key]);
}
return result;
};
/**
* Returns the the hirarchy of blocks
* @returns
*/
const getBlocks: IGetBlocks = () => {
return blocks || [];
};
@ -218,6 +237,7 @@ export interface BlockDB extends DiagramDB {
addLink: IAddLink;
getLogger: IGetLogger;
getEdges: IGetEdges;
getBlocksFlat: IGetBlocks;
getBlocks: IGetBlocks;
getBlock: IGetBlock;
setBlock: ISetBlock;
@ -237,6 +257,7 @@ const db: BlockDB = {
edgeTypeStr2Type: edgeTypeStr2Type,
edgeStrToEdgeData,
getLogger, // TODO: remove
getBlocksFlat,
getBlocks,
getEdges,
getLinks,

3
packages/mermaid/src/diagrams/block/blockRenderer.ts
View File

@ -45,6 +45,7 @@ export const draw = async function (
insertMarkers(svg, markers, diagObj.type, true);
const bl = db.getBlocks();
const blArr = db.getBlocksFlat();
const edges = db.getEdges();
const nodes = svg.insert('g').attr('class', 'block');
@ -52,7 +53,7 @@ export const draw = async function (
const bounds = layout(db);
// log.debug('Here be blocks', bl);
await insertBlocks(nodes, bl, db);
await insertEdges(nodes, edges, bl, db);
await insertEdges(nodes, edges, blArr, db);
// log.debug('Here', bl);

22
packages/mermaid/src/diagrams/block/parser/block.jison
View File

@ -18,6 +18,7 @@
%x NODE
%x BLOCK_ARROW
%x ARROW_DIR
%x LLABEL
// as per section 6.1 of RFC 2234 [2]
@ -45,7 +46,7 @@ CRLF \u000D\u000A
<md_string>[`]["] { this.popState();}
["] this.pushState("string");
<string>["] { yy.getLogger().debug('LEX: POPPING STR:', yytext);this.popState();}
<string>[^"]* { yy.getLogger().debug('LEX: STR ebd:', yytext); return "STR";}
<string>[^"]* { yy.getLogger().debug('LEX: STR end:', yytext); return "STR";}
space[:]\d+ { yytext = yytext.replace(/space\:/,'');yy.getLogger().info('SPACE NUM (LEX)', yytext); return 'SPACE_BLOCK'; }
space { yytext = '1'; yy.getLogger().info('COLUMNS (LEX)', yytext); return 'SPACE_BLOCK'; }
"style" return 'STYLE';
@ -130,9 +131,14 @@ accDescr\s*"{"\s* { this.pushState("acc_descr_mul
\s*[xo<]?\=\=+[=xo>]\s* { yy.getLogger().info('Lex: LINK', yytext); return 'LINK'; }
\s*[xo<]?\-?\.+\-[xo>]?\s* { yy.getLogger().info('Lex: LINK', yytext); return 'LINK'; }
\s*\~\~[\~]+\s* { yy.getLogger().info('Lex: LINK', yytext); return 'LINK'; }
\s*[xo<]?\-\-\s* { yy.getLogger().info('Lex: START_LINK', yytext); return 'START_LINK'; }
\s*[xo<]?\=\=\s* { yy.getLogger().info('Lex: START_LINK', yytext); return 'START_LINK'; }
\s*[xo<]?\-\.\s* { yy.getLogger().info('Lex: START_LINK', yytext); return 'START_LINK'; }
\s*[xo<]?\-\-\s* { yy.getLogger().info('Lex: START_LINK', yytext);this.pushState("LLABEL");return 'START_LINK'; }
\s*[xo<]?\=\=\s* { yy.getLogger().info('Lex: START_LINK', yytext);this.pushState("LLABEL");return 'START_LINK'; }
\s*[xo<]?\-\.\s* { yy.getLogger().info('Lex: START_LINK', yytext);this.pushState("LLABEL");return 'START_LINK'; }
<LLABEL>["][`] { this.pushState("md_string");}
<LLABEL>["] { yy.getLogger().info('Lex: Starting string');this.pushState("string"); return "LINK_LABEL";}
<LLABEL>\s*[xo<]?\-\-+[-xo>]\s* { this.popState(); yy.getLogger().info('Lex: LINK', '#'+yytext+'#'); return 'LINK'; }
<LLABEL>\s*[xo<]?\=\=+[=xo>]\s* { this.popState(); yy.getLogger().info('Lex: LINK', yytext); return 'LINK'; }
<LLABEL>\s*[xo<]?\-?\.+\-[xo>]?\s* { this.popState(); yy.getLogger().info('Lex: LINK', yytext); return 'LINK'; }
/lex
@ -177,9 +183,9 @@ document
link
: LINK
{ yy.getLogger().info("Rule: link: ", $1); }
| START_LINK
{ yy.getLogger().info("Rule: link: ", $1); }
{ yy.getLogger().info("Rule: link: ", $1, yytext); }
| START_LINK LINK_LABEL STR LINK
{ yy.getLogger().info("Rule: LABEL link: ", $1, $3, $4); $$=$4; }
;
statement
@ -192,7 +198,7 @@ statement
nodeStatement
: nodeStatement link node {
yy.getLogger().info('Rule: (nodeStatement link node) ', $1, $2, $3, 'abc88 typestr =>',$2);
yy.getLogger().info('Rule: (nodeStatement link node) ', $1, $2, $3, 'abc88 typestr: ',$2);
const edgeData = yy.edgeStrToEdgeData($2)
$$ = [
{id: $1.id, label: $1.label, type:$1.type, directions: $1.directions},

8
packages/mermaid/src/diagrams/block/renderHelpers.ts
View File

@ -134,6 +134,7 @@ function getNodeFromBlock(block: Block, db: BlockDB, positioned = false) {
// props: vertex.props,
padding: padding ?? (getConfig()?.flowchart?.padding || 0),
};
console.log('abc88 return node', vertex.id, node);
return node;
}
type IOperation = (elem: any, block: any, db: any) => Promise<void>;
@ -208,6 +209,7 @@ export async function insertEdges(
for (const block of blocks) {
if (block.size) {
console.log('abc88 block', block, block.id);
g.setNode(block.id, {
width: block.size.width,
height: block.size.height,
@ -216,12 +218,16 @@ export async function insertEdges(
}
}
// log.debug('abc88 edges', edges);
console.log('abc88 edges', edges);
for (const edge of edges) {
// elem, e, edge, clusterDb, diagramType, graph;
if (edge.start && edge.end) {
const startBlock = db.getBlock(edge.start);
const startBlock2 = g.node(edge.start);
const endBlock = db.getBlock(edge.end);
const endBlock2 = g.node(edge.end);
console.log('abc88 startBlock', startBlock2);
console.log('abc88 endBlock', endBlock2);
if (startBlock?.size && endBlock?.size) {
const start = startBlock.size;