#3358 Some fixes

mermaid-js · Jan 30, 2024 · df9b801 · df9b801
1 parent 4a04ce6
commit df9b801
Show file tree

Hide file tree

Showing 8 changed files with 64 additions and 196 deletions.
diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
@@ -65,7 +65,7 @@
   <body>
     <pre id="diagram" class="mermaid">
       block-beta
-  blockArrowId<["Label"]>(right)
+  blockArrowId<["`Label`"]>(right)
   blockArrowId2<["Label"]>(left)
   blockArrowId3<["Label"]>(up)
   blockArrowId4<["Label"]>(down)

diff --git a/packages/mermaid/src/diagrams/block/blockDB.ts b/packages/mermaid/src/diagrams/block/blockDB.ts
@@ -1,5 +1,5 @@
 import type { DiagramDB } from '../../diagram-api/types.js';
-import type { BlockConfig, BlockType, Block, Link, ClassDef } from './blockTypes.js';
+import type { BlockConfig, BlockType, Block, ClassDef } from './blockTypes.js';
 import * as configApi from '../../config.js';
 import { clear as commonClear } from '../common/commonDb.js';
 import { log } from '../../logger.js';
@@ -240,11 +240,6 @@ const setHierarchy = (block: Block[]): void => {
   blocks = rootBlock.children;
 };
 
-const addLink = (link: Link): Link => {
-  links.push(link);
-  return link;
-};
-
 const getColumns = (blockid: string): number => {
   const block = blockDatabase[blockid];
   if (!block) {
@@ -264,13 +259,6 @@ const getColumns = (blockid: string): number => {
  * @returns
  */
 const getBlocksFlat = () => {
-  // const result: Block[] = [];
-  // // log.debug('abc88 getBlocksFlat', blockDatabase);
-  // const keys = Object.keys(blockDatabase);
-  // for (const key of keys) {
-  //   result.push(blockDatabase[key]);
-  // }
-  // return result;
   return [...Object.values(blockDatabase)];
 };
 /**
@@ -292,11 +280,8 @@ const setBlock = (block: Block) => {
   blockDatabase[block.id] = block;
 };
 
-const getLinks = () => links;
-
 const getLogger = () => console;
 
-// type IGetClasses = () => Record<string, ClassDef>;
 /**
  * Return all of the style classes
  */
@@ -306,15 +291,13 @@ export const getClasses = function () {
 
 const db = {
   getConfig: () => configApi.getConfig().block,
-  addLink: addLink,
   typeStr2Type: typeStr2Type,
   edgeTypeStr2Type: edgeTypeStr2Type,
   edgeStrToEdgeData,
-  getLogger, // TODO: remove
+  getLogger,
   getBlocksFlat,
   getBlocks,
   getEdges,
-  getLinks,
   setHierarchy,
   getBlock,
   setBlock,

diff --git a/packages/mermaid/src/diagrams/block/blockRenderer.ts b/packages/mermaid/src/diagrams/block/blockRenderer.ts
@@ -2,19 +2,17 @@ import type { Diagram } from '../../Diagram.js';
 import * as configApi from '../../config.js';
 import { calculateBlockSizes, insertBlocks, insertEdges } from './renderHelpers.js';
 import { layout } from './layout.js';
-import { setupGraphViewbox } from '../../setupGraphViewbox.js';
+import type { MermaidConfig, BaseDiagramConfig } from '../../config.type.js';
 import insertMarkers from '../../dagre-wrapper/markers.js';
 import {
   select as d3select,
   scaleOrdinal as d3scaleOrdinal,
   schemeTableau10 as d3schemeTableau10,
 } from 'd3';
+import type { ContainerElement } from 'd3';
 import { log } from '../../logger.js';
-
 import type { BlockDB } from './blockDB.js';
 import type { Block } from './blockTypes.js';
-
-// import { diagram as BlockDiagram } from './blockDiagram.js';
 import { configureSvgSize } from '../../setupGraphViewbox.js';
 
 /**
@@ -34,7 +32,7 @@ export const draw = async function (
   _version: string,
   diagObj: Diagram
 ): Promise<void> {
-  const { securityLevel, flowchart: conf } = configApi.getConfig();
+  const { securityLevel, block: conf } = configApi.getConfig();
   const db = diagObj.db as BlockDB;
   let sandboxElement: any;
   if (securityLevel === 'sandbox') {
@@ -65,7 +63,6 @@ export const draw = async function (
   const nodes = svg.insert('g').attr('class', 'block');
   await calculateBlockSizes(nodes, bl, db);
   const bounds = layout(db);
-  // log.debug('Here be blocks', bl);
   await insertBlocks(nodes, bl, db);
   await insertEdges(nodes, edges, blArr, db, id);
 
@@ -80,32 +77,14 @@ export const draw = async function (
     const magicFactor = Math.max(1, Math.round(0.125 * (bounds2.width / bounds2.height)));
     const height = bounds2.height + magicFactor + 10;
     const width = bounds2.width + 10;
-    const useMaxWidth = false;
-    configureSvgSize(svg, height, width, useMaxWidth);
+    const { useMaxWidth } = conf as Exclude<MermaidConfig['block'], undefined>;
+    configureSvgSize(svg, height, width, !!useMaxWidth);
     log.debug('Here Bounds', bounds, bounds2);
     svg.attr(
       'viewBox',
       `${bounds2.x - 5} ${bounds2.y - 5} ${bounds2.width + 10} ${bounds2.height + 10}`
     );
   }
-  // svg.attr('viewBox', `${-200} ${-200} ${400} ${400}`);
-
-  // 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 nodeWidth = 10;
-
-  // Create rectangles for nodes
-  // const db:BlockDB = diagObj.db;
-
-  interface LayedBlock extends Block {
-    children?: LayedBlock[];
-    x?: number;
-    y?: number;
-  }
 
   // Get color scheme for the graph
   const colorScheme = d3scaleOrdinal(d3schemeTableau10);

diff --git a/packages/mermaid/src/diagrams/block/blockTypes.ts b/packages/mermaid/src/diagrams/block/blockTypes.ts
@@ -56,12 +56,7 @@ export interface Block {
   styleClass?: string;
   styles?: string[];
   stylesStr?: string;
-  w?: number;
-}
-
-export interface Link {
-  source: Block;
-  target: Block;
+  widthInColumns?: number;
 }
 
 export interface ClassDef {