diff --git a/demos/block.html b/demos/block.html new file mode 100644 index 000000000..141d13970 --- /dev/null +++ b/demos/block.html @@ -0,0 +1,93 @@ + + + + + + States Mermaid Quick Test Page + + + + + +

Block diagram demos

+

TCI IP

+ 
+      block-beta
+
+      block TCP_IP["TCP/IP"]
+
+ + + + + + diff --git a/demos/index.html b/demos/index.html index 24c4fbf3b..113d67433 100644 --- a/demos/index.html +++ b/demos/index.html @@ -78,6 +78,9 @@

  • Sankey

    • +
  • +

    Layered Blocks

    +
    • diff --git a/packages/mermaid/src/diagrams/block/blockDB.ts b/packages/mermaid/src/diagrams/block/blockDB.ts index db216160a..de332e19b 100644 --- a/packages/mermaid/src/diagrams/block/blockDB.ts +++ b/packages/mermaid/src/diagrams/block/blockDB.ts @@ -1,4 +1,6 @@ -import type { BlockDB } from './blockTypes.js'; +// import type { BlockDB } from './blockTypes.js'; +import type { DiagramDB } from '../../diagram-api/types.js'; +import { BlockConfig } from './blockTypes.js'; import * as configApi from '../../config.js'; // import common from '../common/common.js'; @@ -12,20 +14,54 @@ import { clear as commonClear, } from '../../commonDb.js'; -type Block = { +export type TBlockColumnsDefaultValue = 'H'; // Do we support something else, like 'auto' | 0? + +interface Block { ID: string; -}; + label?: string; + parent?: Block; + children?: Block[]; + columns: number | TBlockColumnsDefaultValue; +} + +interface Link { + source: Block; + target: Block; +} let blocks: Block[] = []; +let links: Link[] = []; const clear = (): void => { blocks = []; commonClear(); }; +type IAddBlock = (block: Block) => Block; +const addBlock: IAddBlock = (block: Block): Block => { + blocks.push(block); + return block; +}; + +type IAddLink = (link: Link) => Link; +const addLink: IAddLink = (link: Link): Link => { + links.push(link); + return link; +}; + +export interface BlockDB extends DiagramDB { + clear: () => void; + getConfig: () => BlockConfig | undefined; + addBlock: IAddBlock; + addLink: IAddLink; + getLogger: () => Console; +} + const db: BlockDB = { getConfig: () => configApi.getConfig().block, - + addBlock: addBlock, + addLink: addLink, + getLogger: () => console, // TODO: remove // getAccTitle, // setAccTitle, // getAccDescription, @@ -35,4 +71,4 @@ const db: BlockDB = { clear, }; -export default db; \ No newline at end of file +export default db; diff --git a/packages/mermaid/src/diagrams/block/blockDiagram.ts b/packages/mermaid/src/diagrams/block/blockDiagram.ts index 667783f49..e098360f4 100644 --- a/packages/mermaid/src/diagrams/block/blockDiagram.ts +++ b/packages/mermaid/src/diagrams/block/blockDiagram.ts @@ -3,10 +3,12 @@ import { DiagramDefinition } from '../../diagram-api/types.js'; import parser from './parser/block.jison'; import db from './blockDB.js'; import renderer from './blockRenderer.js'; -import { prepareTextForParsing } from './blockUtils.js'; -const originalParse = parser.parse.bind(parser); -parser.parse = (text: string) => originalParse(prepareTextForParsing(text)); +// TODO: do we need this? +// import { prepareTextForParsing } from './blockUtils.js'; +// const originalParse = parser.parse.bind(parser); +// parser.parse = (text: string) => originalParse(prepareTextForParsing(text)); +// parser.yy.getLogger = () => console; export const diagram: DiagramDefinition = { parser, diff --git a/packages/mermaid/src/diagrams/block/blockRenderer.ts b/packages/mermaid/src/diagrams/block/blockRenderer.ts index cfa9cc522..8896b272d 100644 --- a/packages/mermaid/src/diagrams/block/blockRenderer.ts +++ b/packages/mermaid/src/diagrams/block/blockRenderer.ts @@ -11,11 +11,6 @@ import { configureSvgSize } from '../../setupGraphViewbox.js'; import { Uid } from '../../rendering-util/uid.js'; export const draw = function (text: string, id: string, _version: string, diagObj: Diagram): void { - // TODO: - // This code repeats for every diagram - // Figure out what is happening there, probably it should be separated - // The main thing is svg object that is a d3 wrapper for svg operations - // const { securityLevel } = configApi.getConfig(); let sandboxElement: any; if (securityLevel === 'sandbox') { @@ -25,28 +20,27 @@ export const draw = function (text: string, id: string, _version: string, diagOb securityLevel === 'sandbox' ? d3select(sandboxElement.nodes()[0].contentDocument.body) : d3select('body'); + // @ts-ignore TODO root.select is not callable const svg = securityLevel === 'sandbox' ? root.select(`[id="${id}"]`) : d3select(`[id="${id}"]`); // Establish svg dimensions and get width and height - // - - // FIX: using max width prevents height from being set, is it intended? - // to add height directly one can use `svg.attr('height', height)` - // - // @ts-ignore TODO: svg type vs selection mismatch + // + const height = 400; + const width = 600; + const useMaxWidth = false; configureSvgSize(svg, height, width, useMaxWidth); // Prepare data for construction based on diagObj.db // This must be a mutable object with `nodes` and `links` properties: // // @ts-ignore TODO: db type - const graph = diagObj.db.getGraph(); + // const graph = diagObj.db.getGraph(); - const nodeWidth = 10; + // const nodeWidth = 10; // Get color scheme for the graph - const colorScheme = d3scaleOrdinal(d3schemeTableau10); + // const colorScheme = d3scaleOrdinal(d3schemeTableau10); }; export default { diff --git a/packages/mermaid/src/diagrams/block/blockTypes.ts b/packages/mermaid/src/diagrams/block/blockTypes.ts index 014e6b7cb..c190c5779 100644 --- a/packages/mermaid/src/diagrams/block/blockTypes.ts +++ b/packages/mermaid/src/diagrams/block/blockTypes.ts @@ -1,11 +1,5 @@ -import type { DiagramDB } from '../../diagram-api/types.js'; import type { BaseDiagramConfig } from '../../config.type.js'; export interface BlockConfig extends BaseDiagramConfig { padding?: number; } - -export interface BlockDB extends DiagramDB { - clear: () => void; - getConfig: () => BlockConfig | undefined; -} diff --git a/packages/mermaid/src/diagrams/block/parser/block.jison b/packages/mermaid/src/diagrams/block/parser/block.jison index ba58a6097..687085939 100644 --- a/packages/mermaid/src/diagrams/block/parser/block.jison +++ b/packages/mermaid/src/diagrams/block/parser/block.jison @@ -33,10 +33,10 @@ CRLF \u000D\u000A [\n]+ {yy.getLogger().info('_', yytext); /* skip all whitespace */ } // [\n] return 'NL'; ({CRLF}|{LF}) { return 'NL' } -["][`] { this.begin("md_string");} +["][`] { this.pushState("md_string");} [^`"]+ { return "MD_STR";} [`]["] { this.popState();} -["] this.begin("string"); +["] this.pushState("string"); ["] this.popState(); [^"]* return "STR"; "style" return 'STYLE'; @@ -45,11 +45,11 @@ CRLF \u000D\u000A "interpolate" return 'INTERPOLATE'; "classDef" return 'CLASSDEF'; "class" return 'CLASS'; -accTitle\s*":"\s* { this.begin("acc_title");return 'acc_title'; } +accTitle\s*":"\s* { this.pushState("acc_title");return 'acc_title'; } (?!\n|;|#)*[^\n]* { this.popState(); return "acc_title_value"; } -accDescr\s*":"\s* { this.begin("acc_descr");return 'acc_descr'; } +accDescr\s*":"\s* { this.pushState("acc_descr");return 'acc_descr'; } (?!\n|;|#)*[^\n]* { this.popState(); return "acc_descr_value"; } -accDescr\s*"{"\s* { this.begin("acc_descr_multiline");} +accDescr\s*"{"\s* { this.pushState("acc_descr_multiline");} [\}] { this.popState(); } [^\}]* return "acc_descr_multiline_value"; "subgraph" return 'subgraph'; @@ -60,32 +60,32 @@ accDescr\s*"{"\s* { this.begin("acc_descr_multili .*direction\s+LR[^\n]* return 'direction_lr'; // Start of nodes with shapes and description -"-)" { yy.getLogger().info('Lex: -)'); this.begin('NODE');return 'NODE_D START'; } -"(-" { yy.getLogger().info('Lex: (-'); this.begin('NODE');return 'NODE_DSTART'; } -"))" { yy.getLogger().info('Lex: ))'); this.begin('NODE');return 'NODE_DSTART'; } -")" { yy.getLogger().info('Lex: )'); this.begin('NODE');return 'NODE_DSTART'; } -"((" { yy.getLogger().info('Lex: )'); this.begin('NODE');return 'NODE_DSTART'; } -"{{" { yy.getLogger().info('Lex: )'); this.begin('NODE');return 'NODE_DSTART'; } -"(" { yy.getLogger().info('Lex: )'); this.begin('NODE');return 'NODE_DSTART'; } -"[" { yy.getLogger().info('Lex: ['); this.begin('NODE');return 'NODE_DSTART'; } -"([" { yy.getLogger().info('Lex: )'); this.begin('NODE');return 'NODE_DSTART'; } -"[[" { this.begin('NODE');return 'NODE_DSTART'; } -"[|" { this.begin('NODE');return 'NODE_DSTART'; } -"[(" { this.begin('NODE');return 'NODE_DSTART'; } -"(((" { this.begin('NODE');return 'NODE_DSTART'; } -")))" { this.begin('NODE');return 'NODE_DSTART'; } -"[/" { this.begin('NODE');return 'NODE_DSTART'; } -"[\\" { this.begin('NODE');return 'NODE_DSTART'; } +"-)" { yy.getLogger().info('Lex: -)'); this.pushState('NODE');return 'NODE_D START'; } +"(-" { yy.getLogger().info('Lex: (-'); this.pushState('NODE');return 'NODE_DSTART'; } +"))" { yy.getLogger().info('Lex: ))'); this.pushState('NODE');return 'NODE_DSTART'; } +")" { yy.getLogger().info('Lex: )'); this.pushState('NODE');return 'NODE_DSTART'; } +"((" { yy.getLogger().info('Lex: )'); this.pushState('NODE');return 'NODE_DSTART'; } +"{{" { yy.getLogger().info('Lex: )'); this.pushState('NODE');return 'NODE_DSTART'; } +"(" { yy.getLogger().info('Lex: )'); this.pushState('NODE');return 'NODE_DSTART'; } +"[" { yy.getLogger().info('Lex: ['); this.pushState('NODE');return 'NODE_DSTART'; } +"([" { yy.getLogger().info('Lex: )'); this.pushState('NODE');return 'NODE_DSTART'; } +"[[" { this.pushState('NODE');return 'NODE_DSTART'; } +"[|" { this.pushState('NODE');return 'NODE_DSTART'; } +"[(" { this.pushState('NODE');return 'NODE_DSTART'; } +"(((" { this.pushState('NODE');return 'NODE_DSTART'; } +")))" { this.pushState('NODE');return 'NODE_DSTART'; } +"[/" { this.pushState('NODE');return 'NODE_DSTART'; } +"[\\" { this.pushState('NODE');return 'NODE_DSTART'; } [^\(\[\n\-\)\{\}]+ { yy.getLogger().info('Lex: NODE_ID', yytext);return 'NODE_ID'; } <> { yy.getLogger().info('Lex: EOF', yytext);return 'EOF'; } // Handling of strings in node -["][`] { this.begin("md_string");} +["][`] { this.pushState("md_string");} [^`"]+ { return "NODE_DESCR";} [`]["] { this.popState();} -["] { yy.getLogger().info('Lex: Starting string');this.begin("string");} +["] { yy.getLogger().info('Lex: Starting string');this.pushState("string");} [^"]+ { yy.getLogger().info('Lex: NODE_DESCR:', yytext); return "NODE_DESCR";} ["] {this.popState();} diff --git a/packages/mermaid/src/diagrams/block/parser/block.spec.ts b/packages/mermaid/src/diagrams/block/parser/block.spec.ts index 4713b57c0..2c575aeba 100644 --- a/packages/mermaid/src/diagrams/block/parser/block.spec.ts +++ b/packages/mermaid/src/diagrams/block/parser/block.spec.ts @@ -6,7 +6,7 @@ import { prepareTextForParsing } from '../blockUtils.js'; import * as fs from 'fs'; import * as path from 'path'; -describe('Sankey diagram', function () { +describe('Block diagram', function () { describe('when parsing an block diagram graph it should handle > ', function () { beforeEach(function () { block.parser.yy = db;