Merge remote-tracking branch 'upstream/develop' into sidv/fixE2Edev

* upstream/develop: (33 commits) Updated lockfile chore(deps-dev): update vite requirement from ^3.0.9 to ^3.1.4 chore(deps-dev): update typescript requirement from ^4.8.3 to ^4.8.4 chore(deps-dev): update @vitest/coverage-c8 requirement chore(deps-dev): update @typescript-eslint/eslint-plugin requirement chore(deps-dev): update esbuild requirement from ^0.15.8 to ^0.15.10 chore(deps-dev): update @commitlint/config-conventional requirement chore(deps-dev): update eslint-plugin-jest requirement chore(deps-dev): update @applitools/eyes-cypress requirement chore(deps-dev): update jsdom requirement from ^20.0.0 to ^20.0.1 chore(deps-dev): update vitest requirement from ^0.23.1 to ^0.23.4 chore(deps-dev): update lint-staged requirement from ^13.0.0 to ^13.0.3 chore(deps): update @types/node requirement from ^18.7.21 to ^18.8.1 chore(deps-dev): update @typescript-eslint/parser requirement Fix postbuild script #3561 Adding cScale0-11 etc and usage of the colors from the mindmap diagram Fix for broken test Mindmap cleanup Using cose-bilkent layout algorithm for mindmaps chore(deps-dev): update husky requirement from ^8.0.0 to ^8.0.1 ...
mermaid-js · Oct 5, 2022 · 57c2a8f · 57c2a8f
2 parents a017ffc + e4bca33
commit 57c2a8f
Show file tree

Hide file tree

Showing 80 changed files with 12,358 additions and 698 deletions.
diff --git a/.vite/server.ts b/.vite/server.ts
@@ -12,10 +12,10 @@ async function createServer() {
     appType: 'custom', // don't include Vite's default HTML handling middlewares
   });
 
-  app.use(vite.middlewares);
   app.use(express.static('./packages/mermaid/dist'));
   app.use(express.static('./packages/mermaid-example-diagram/dist'));
   app.use(express.static('./packages/mermaid-mindmap/dist'));
+  app.use(vite.middlewares);
   app.use(express.static('demos'));
   app.use(express.static('cypress/platform'));
 

diff --git a/cypress/platform/knsv.html b/cypress/platform/knsv.html
@@ -6,6 +6,10 @@
       rel="stylesheet"
       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
     />
+    <link
+      href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
+      rel="stylesheet"
+    />
     <link
       href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
       rel="stylesheet"

diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
@@ -6,6 +6,10 @@
       rel="stylesheet"
       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
     />
+    <link
+      href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
+      rel="stylesheet"
+    />
     <link
       href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
       rel="stylesheet"
@@ -25,6 +29,12 @@
       }
       .mermaid svg {
         /* font-size: 18px !important; */
+        background-color: #eee;
+        background-image: radial-gradient(#fff 1%, transparent 11%),
+          radial-gradient(#fff 1%, transparent 11%);
+        background-size: 20px 20px;
+        background-position: 0 0, 10px 10px;
+        background-repeat: repeat;
       }
       .malware {
         position: fixed;
@@ -52,6 +62,16 @@
     <pre id="diagram" class="mermaid">
 mindmap
   root
+    A
+    B
+    C
+    D
+    E
+    A2
+    B2
+    C2
+    D2
+    E2
     child1((Circle))
         grandchild 1
         grandchild 2
@@ -63,19 +83,22 @@
         ::icon(mdi mdi-fire)
         gc6((grand<br/>child 6))
         ::icon(mdi mdi-fire)
+          gc7((grand<br/>grand<br/>child 8))
         </pre>
-    <script src="./mermaid-mindmap-detector.js"></script>
+    <!-- <div id="cy"></div> -->
+    <script src="http://localhost:9000/packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script>
     <script src="./mermaid-example-diagram-detector.js"></script>
     <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
       };
       mermaid.initialize({
+        theme: 'forest',
         startOnLoad: true,
         logLevel: 0,
         basePath: './packages/',
-        // themeVariables: {relationLabelColor: 'red'}
+        // themeVariables: { darkMode: true },
       });
       function callback() {
         alert('It worked');

diff --git a/docs/n00b-syntaxReference.md b/docs/n00b-syntaxReference.md
@@ -26,18 +26,6 @@ erDiagram
           PRODUCT ||--o{ ORDER-ITEM : "ordered in"
 ```
 
-```mermaid
-erDiagram
-          CUSTOMER }|..|{ DELIVERY-ADDRESS : has
-          CUSTOMER ||--o{ ORDER : places
-          CUSTOMER ||--o{ INVOICE : "liable for"
-          DELIVERY-ADDRESS ||--o{ ORDER : receives
-          INVOICE ||--|{ ORDER : covers
-          ORDER ||--|{ ORDER-ITEM : includes
-          PRODUCT-CATEGORY ||--|{ PRODUCT : contains
-          PRODUCT ||--o{ ORDER-ITEM : "ordered in"
-```
-
 The [Getting Started](./n00b-gettingStarted.md) section can also provide some practical examples of mermaid syntax.
 
 ## Diagram Breaking

diff --git a/package.json b/package.json
@@ -37,6 +37,10 @@
     "todo-postbuild": "documentation build src/mermaidAPI.ts src/config.ts src/defaultConfig.ts --shallow -f md --markdown-toc false > src/docs/Setup.md && prettier --write src/docs/Setup.md",
     "release": "pnpm build",
     "lint": "eslint --cache --ignore-path .gitignore . && pnpm lint:jison && prettier --check .",
+    "vdocs:dev": "vitepress dev vdocs",
+    "vdocs:build": "vitepress build vdocs",
+    "vdocs:serve": "vitepress serve vdocs",
+    "postbuild": "echo 'building docs from code here soon'",
     "lint:fix": "eslint --fix --ignore-path .gitignore . && prettier --write .",
     "lint:jison": "ts-node-esm --transpileOnly packages/mermaid/src/jison/lint.mts",
     "cypress": "cypress run",
@@ -68,7 +72,7 @@
   "dependencies": {
     "@braintree/sanitize-url": "^6.0.0",
     "@types/uuid": "^8.3.4",
-    "@types/node": "^18.7.21",
+    "@types/node": "^18.8.1",
     "d3": "^7.0.0",
     "dagre": "^0.8.5",
     "dagre-d3": "^0.6.4",
@@ -84,54 +88,59 @@
     "uuid": "^9.0.0"
   },
   "devDependencies": {
-    "@applitools/eyes-cypress": "^3.25.7",
+    "@applitools/eyes-cypress": "^3.27.1",
     "@commitlint/cli": "^17.1.2",
-    "@commitlint/config-conventional": "^17.0.0",
+    "@commitlint/config-conventional": "^17.1.0",
     "@types/d3": "^7.4.0",
     "@types/dompurify": "^2.3.4",
     "@types/eslint": "^8.4.6",
-    "@types/express": "^4.17.13",
+    "@types/express": "^4.17.14",
     "@types/jsdom": "^20.0.0",
-    "@types/lodash": "^4.14.185",
+    "@types/lodash": "^4.14.186",
     "@types/prettier": "^2.7.1",
     "@types/stylis": "^4.0.2",
-    "@typescript-eslint/eslint-plugin": "^5.37.0",
-    "@typescript-eslint/parser": "^5.37.0",
-    "@vitest/coverage-c8": "^0.23.2",
-    "@vitest/ui": "^0.23.2",
+    "@typescript-eslint/eslint-plugin": "^5.39.0",
+    "@typescript-eslint/parser": "^5.39.0",
+    "@vitest/coverage-c8": "^0.23.4",
+    "@vitest/ui": "^0.23.4",
     "concurrently": "^7.4.0",
     "coveralls": "^3.1.1",
     "cypress": "^10.0.0",
     "cypress-image-snapshot": "^4.0.1",
+    "esbuild": "^0.15.10",
     "documentation": "13.2.0",
     "eslint": "^8.24.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-cypress": "^2.12.1",
     "eslint-plugin-html": "^7.1.0",
-    "eslint-plugin-jest": "^27.0.4",
+    "eslint-plugin-jest": "^27.1.0",
     "eslint-plugin-jsdoc": "^39.3.6",
     "eslint-plugin-json": "^3.1.0",
     "eslint-plugin-markdown": "^3.0.0",
     "express": "^4.18.1",
     "globby": "^13.1.2",
-    "husky": "^8.0.0",
+    "husky": "^8.0.1",
     "identity-obj-proxy": "^3.0.0",
     "jest": "29.x",
     "jison": "^0.4.18",
-    "jsdom": "^20.0.0",
-    "lint-staged": "^13.0.0",
+    "jsdom": "^20.0.1",
+    "lint-staged": "^13.0.3",
+    "markdown-it": "^13.0.1",
     "moment": "^2.23.0",
     "path-browserify": "^1.0.1",
     "prettier": "^2.7.1",
     "prettier-plugin-jsdoc": "^0.4.2",
     "remark": "^14.0.2",
     "rimraf": "^3.0.2",
-    "start-server-and-test": "^1.12.6",
+    "start-server-and-test": "^1.14.0",
     "ts-node": "^10.9.1",
-    "typescript": "^4.8.3",
+    "typescript": "^4.8.4",
     "unist-util-flatmap": "^1.0.0",
-    "vite": "^3.0.9",
-    "vitest": "^0.23.1"
+    "vitepress": "^1.0.0-alpha.19",
+    "vitepress-plugin-mermaid": "^2.0.8",
+    "vitepress-plugin-search": "^1.0.4-alpha.11",
+    "vite": "^3.1.4",
+    "vitest": "^0.23.4"
   },
   "resolutions": {
     "d3": "^7.0.0"

diff --git a/packages/mermaid-example-diagram/src/exampleDiagram.spec.js b/packages/mermaid-example-diagram/src/exampleDiagram.spec.js
@@ -7,8 +7,8 @@ describe('when parsing an info graph it', function () {
     ex.yy = db;
   });
 
-  it('should handle an info definition', function () {
-    let str = `info
+  it('should handle an example-diagram definition', function () {
+    let str = `example-diagram
     showInfo`;
 
     ex.parse(str);

diff --git a/packages/mermaid-example-diagram/src/exampleDiagramRenderer.js b/packages/mermaid-example-diagram/src/exampleDiagramRenderer.js
@@ -1,6 +1,6 @@
 /** Created by knut on 14-12-11. */
 import { select } from 'd3';
-import { log, getConfig } from './mermaidUtils';
+import { log, getConfig, setupGraphViewbox } from './mermaidUtils';
 
 /**
  * Draws a an info picture in the tag with id: id based on the graph definition in text.
@@ -10,10 +10,11 @@ import { log, getConfig } from './mermaidUtils';
  * @param {any} version
  * @param diagObj
  */
-export const draw = (text, id, version, diagObj) => {
+export const draw = (text, id, version) => {
   try {
-    log.debug('Rendering info diagram\n' + text);
-
+    const conf = getConfig();
+    log.debug('Rendering example diagram\n' + text, 'Conf: ');
+    const THEME_COLOR_LIMIT = getConfig().themeVariables.THEME_COLOR_LIMIT;
     const securityLevel = getConfig().securityLevel;
     // Handle root and Document for when rendering in sanbox mode
     let sandboxElement;
@@ -25,14 +26,34 @@ export const draw = (text, id, version, diagObj) => {
         ? select(sandboxElement.nodes()[0].contentDocument.body)
         : select('body');
 
-    // Parse the graph definition
-    // parser.parse(text);
-    // log.debug('Parsed info diagram');
-    // Fetch the default direction, use TD if none was found
     const svg = root.select('#' + id);
 
     const g = svg.append('g');
 
+    let i;
+    for (i = 0; i < THEME_COLOR_LIMIT; i++) {
+      const section = g.append('g').attr('class', 'section-' + i);
+      section
+        .append('rect')
+        .attr('x', (i % 5) * 110)
+        .attr('y', Math.floor(i / 5) * 90 + 60)
+        .attr('width', 100)
+        .attr('height', 60);
+      section
+        .append('rect')
+        .attr('x', (i % 5) * 110)
+        .attr('y', Math.floor(i / 5) * 90 + 120)
+        .attr('class', 'inverted')
+        .attr('width', 100)
+        .attr('height', 20);
+      section
+        .append('text', 'section-' + i)
+        .text('Section ' + i)
+        .attr('x', (i % 5) * 110 + 15)
+        .attr('y', Math.floor(i / 5) * 90 + 95)
+        .attr('class', 'section-text-' + i);
+    }
+
     g.append('text') // text label for the x axis
       .attr('x', 100)
       .attr('y', 40)
@@ -41,9 +62,8 @@ export const draw = (text, id, version, diagObj) => {
       .style('text-anchor', 'middle')
       .text('v ' + version);
 
-    svg.attr('height', 100);
-    svg.attr('width', 400);
-    // svg.attr('viewBox', '0 0 300 150');
+    // Setup the view box and size of the svg element
+    setupGraphViewbox(undefined, svg, conf.mindmap.padding, conf.mindmap.useMaxWidth);
   } catch (e) {
     log.error('Error while rendering info diagram');
     log.error(e.message);

diff --git a/packages/mermaid-example-diagram/src/mermaidUtils.ts b/packages/mermaid-example-diagram/src/mermaidUtils.ts
@@ -19,7 +19,6 @@ export const log: Record<keyof typeof LEVELS, typeof console.log> = {
   error: warning,
   fatal: warning,
 };
-
 export let setLogLevel: (level: keyof typeof LEVELS | number | string) => void;
 export let getConfig: () => object;
 export let sanitizeText: (str: string) => string;

diff --git a/packages/mermaid-example-diagram/src/styles.js b/packages/mermaid-example-diagram/src/styles.js
@@ -1,3 +1,29 @@
-const getStyles = () => ``;
+import { darken, lighten, isDark } from 'khroma';
 
+const genSections = (options) => {
+  let sections = '';
+
+  for (let i = 0; i < options.THEME_COLOR_LIMIT; i++) {
+    sections += `
+    .section-${i} rect  {
+      fill: ${options['cScale' + i]};
+      stroke: ${options['cScalePeer' + i]};
+      stroke-width: 4;
+    }
+    .section-${i} rect.inverted  {
+      fill: ${options['cScaleInv' + i]};
+    }
+    .section-${i} text {
+     fill: ${options['cScaleLabel' + i]};
+    }
+
+    `;
+  }
+  return sections;
+};
+
+const getStyles = (options) =>
+  `
+  ${genSections(options)}
+`;
 export default getStyles;
diff --git a/packages/mermaid-mindmap/package.json b/packages/mermaid-mindmap/package.json
@@ -55,6 +55,8 @@
   "dependencies": {
     "@braintree/sanitize-url": "^6.0.0",
     "cytoscape": "^3.23.0",
+    "cytoscape-cose-bilkent": "^4.1.0",
+    "cytoscape-fcose": "^2.1.0",
     "d3": "^7.0.0",
     "non-layered-tidy-tree-layout": "^2.0.2"
   },

diff --git a/packages/mermaid-mindmap/src/add-diagram.ts b/packages/mermaid-mindmap/src/add-diagram.ts
@@ -5,12 +5,6 @@ import mindmapRenderer from './mindmapRenderer';
 import mindmapStyles from './styles';
 import { injectUtils } from './mermaidUtils';
 
-// const getBaseFolder = (path: string) => {
-//   const parts = path.split('/');
-//   parts.pop();
-//   return parts.join('/');
-// };
-
 window.mermaid.connectDiagram(
   'mindmap',
   {

diff --git a/packages/mermaid-mindmap/src/mindmapDb.js b/packages/mermaid-mindmap/src/mindmapDb.js
@@ -132,11 +132,7 @@ export const type2Str = (type) => {
   }
 };
 
-export let parseError; // = (str, hash)
-//  => {
-//   const error = { str, hash };
-//   throw error;
-// };
+export let parseError;
 export const setErrorHandler = (handler) => {
   parseError = handler;
 };
@@ -146,17 +142,3 @@ export const getLogger = () => log;
 
 export const getNodeById = (id) => nodes[id];
 export const getElementById = (id) => elements[id];
-// export default {
-// //   getMindmap,
-//   // addNode,
-//   // clear,
-//   // nodeType,
-//   // getType,
-//   // decorateNode,
-//   // setElementForId,
-//   getElementById: (id) => elements[id],
-//   // getNodeById: (id) => nodes.find((node) => node.id === id),
-//   getNodeById: (id) => nodes[id],
-//   // type2Str,
-//   // parseError
-// };
diff --git a/packages/mermaid-mindmap/src/mindmapDetector.old b/packages/mermaid-mindmap/src/mindmapDetector.old