From 46de343785775928d308ee8a1176f985068622ad Mon Sep 17 00:00:00 2001 From: Reda Al Sulais Date: Thu, 10 Aug 2023 22:00:24 +0300 Subject: [PATCH 1/2] standardized `error` diagram' * remove empty `styles.js` * use named imports/exports instead of default * remove unnecessary data in diagram definition --- .../src/diagram-api/diagram-orchestration.ts | 2 +- .../src/diagrams/error/errorDiagram.ts | 22 +-- .../src/diagrams/error/errorRenderer.ts | 143 ++++++++---------- packages/mermaid/src/diagrams/error/styles.js | 3 - packages/mermaid/src/mermaidAPI.ts | 2 +- packages/mermaid/src/styles.spec.ts | 2 - 6 files changed, 69 insertions(+), 105 deletions(-) delete mode 100644 packages/mermaid/src/diagrams/error/styles.js diff --git a/packages/mermaid/src/diagram-api/diagram-orchestration.ts b/packages/mermaid/src/diagram-api/diagram-orchestration.ts index 9c03e27f31..8bec8b7002 100644 --- a/packages/mermaid/src/diagram-api/diagram-orchestration.ts +++ b/packages/mermaid/src/diagram-api/diagram-orchestration.ts @@ -14,7 +14,7 @@ import classDiagramV2 from '../diagrams/class/classDetector-V2.js'; import state from '../diagrams/state/stateDetector.js'; import stateV2 from '../diagrams/state/stateDetector-V2.js'; import journey from '../diagrams/user-journey/journeyDetector.js'; -import errorDiagram from '../diagrams/error/errorDiagram.js'; +import { diagram as errorDiagram } from '../diagrams/error/errorDiagram.js'; import flowchartElk from '../diagrams/flowchart/elk/detector.js'; import timeline from '../diagrams/timeline/detector.js'; import mindmap from '../diagrams/mindmap/detector.js'; diff --git a/packages/mermaid/src/diagrams/error/errorDiagram.ts b/packages/mermaid/src/diagrams/error/errorDiagram.ts index 76efdb0ae5..8f0fcdf28c 100644 --- a/packages/mermaid/src/diagrams/error/errorDiagram.ts +++ b/packages/mermaid/src/diagrams/error/errorDiagram.ts @@ -1,23 +1,13 @@ -import { DiagramDefinition } from '../../diagram-api/types.js'; -import styles from './styles.js'; -import renderer from './errorRenderer.js'; +import type { DiagramDefinition } from '../../diagram-api/types.js'; +import { renderer } from './errorRenderer.js'; + export const diagram: DiagramDefinition = { - db: { - clear: () => { - // Quite ok, clear needs to be there for error to work as a regular diagram - }, - }, - styles, + db: {}, renderer, parser: { parser: { yy: {} }, - parse: () => { - // no op + parse: (): void => { + return; }, }, - init: () => { - // no op - }, }; - -export default diagram; diff --git a/packages/mermaid/src/diagrams/error/errorRenderer.ts b/packages/mermaid/src/diagrams/error/errorRenderer.ts index aa0e9e8164..b7049d4b79 100644 --- a/packages/mermaid/src/diagrams/error/errorRenderer.ts +++ b/packages/mermaid/src/diagrams/error/errorRenderer.ts @@ -1,100 +1,79 @@ -/** Created by knut on 14-12-11. */ -// @ts-ignore TODO: Investigate D3 issue -import { select } from 'd3'; import { log } from '../../logger.js'; -import { getErrorMessage } from '../../utils.js'; - -/** - * Merges the value of `conf` with the passed `cnf` - * - * @param cnf - Config to merge - */ -export const setConf = function () { - // no-op -}; +import type { Group, SVG } from '../../diagram-api/types.js'; +import { selectSvgElement } from '../../rendering-util/selectSvgElement.js'; +import { configureSvgSize } from '../../setupGraphViewbox.js'; /** * Draws a an info picture in the tag with id: id based on the graph definition in text. * * @param _text - Mermaid graph definition. * @param id - The text for the error - * @param mermaidVersion - The version + * @param version - The version */ -export const draw = (_text: string, id: string, mermaidVersion: string) => { - try { - log.debug('Renering svg for syntax error\n'); - - const svg = select('#' + id); +export const draw = (_text: string, id: string, version: string) => { + log.debug('renering svg for syntax error\n'); - const g = svg.append('g'); + const svg: SVG = selectSvgElement(id); + svg.attr('viewBox', '768 0 912 512'); + configureSvgSize(svg, 100, 500, true); - g.append('path') - .attr('class', 'error-icon') - .attr( - 'd', - 'm411.313,123.313c6.25-6.25 6.25-16.375 0-22.625s-16.375-6.25-22.625,0l-32,32-9.375,9.375-20.688-20.688c-12.484-12.5-32.766-12.5-45.25,0l-16,16c-1.261,1.261-2.304,2.648-3.31,4.051-21.739-8.561-45.324-13.426-70.065-13.426-105.867,0-192,86.133-192,192s86.133,192 192,192 192-86.133 192-192c0-24.741-4.864-48.327-13.426-70.065 1.402-1.007 2.79-2.049 4.051-3.31l16-16c12.5-12.492 12.5-32.758 0-45.25l-20.688-20.688 9.375-9.375 32.001-31.999zm-219.313,100.687c-52.938,0-96,43.063-96,96 0,8.836-7.164,16-16,16s-16-7.164-16-16c0-70.578 57.422-128 128-128 8.836,0 16,7.164 16,16s-7.164,16-16,16z' - ); + const g: Group = svg.append('g'); + g.append('path') + .attr('class', 'error-icon') + .attr( + 'd', + 'm411.313,123.313c6.25-6.25 6.25-16.375 0-22.625s-16.375-6.25-22.625,0l-32,32-9.375,9.375-20.688-20.688c-12.484-12.5-32.766-12.5-45.25,0l-16,16c-1.261,1.261-2.304,2.648-3.31,4.051-21.739-8.561-45.324-13.426-70.065-13.426-105.867,0-192,86.133-192,192s86.133,192 192,192 192-86.133 192-192c0-24.741-4.864-48.327-13.426-70.065 1.402-1.007 2.79-2.049 4.051-3.31l16-16c12.5-12.492 12.5-32.758 0-45.25l-20.688-20.688 9.375-9.375 32.001-31.999zm-219.313,100.687c-52.938,0-96,43.063-96,96 0,8.836-7.164,16-16,16s-16-7.164-16-16c0-70.578 57.422-128 128-128 8.836,0 16,7.164 16,16s-7.164,16-16,16z' + ); - g.append('path') - .attr('class', 'error-icon') - .attr( - 'd', - 'm459.02,148.98c-6.25-6.25-16.375-6.25-22.625,0s-6.25,16.375 0,22.625l16,16c3.125,3.125 7.219,4.688 11.313,4.688 4.094,0 8.188-1.563 11.313-4.688 6.25-6.25 6.25-16.375 0-22.625l-16.001-16z' - ); + g.append('path') + .attr('class', 'error-icon') + .attr( + 'd', + 'm459.02,148.98c-6.25-6.25-16.375-6.25-22.625,0s-6.25,16.375 0,22.625l16,16c3.125,3.125 7.219,4.688 11.313,4.688 4.094,0 8.188-1.563 11.313-4.688 6.25-6.25 6.25-16.375 0-22.625l-16.001-16z' + ); - g.append('path') - .attr('class', 'error-icon') - .attr( - 'd', - 'm340.395,75.605c3.125,3.125 7.219,4.688 11.313,4.688 4.094,0 8.188-1.563 11.313-4.688 6.25-6.25 6.25-16.375 0-22.625l-16-16c-6.25-6.25-16.375-6.25-22.625,0s-6.25,16.375 0,22.625l15.999,16z' - ); + g.append('path') + .attr('class', 'error-icon') + .attr( + 'd', + 'm340.395,75.605c3.125,3.125 7.219,4.688 11.313,4.688 4.094,0 8.188-1.563 11.313-4.688 6.25-6.25 6.25-16.375 0-22.625l-16-16c-6.25-6.25-16.375-6.25-22.625,0s-6.25,16.375 0,22.625l15.999,16z' + ); - g.append('path') - .attr('class', 'error-icon') - .attr( - 'd', - 'm400,64c8.844,0 16-7.164 16-16v-32c0-8.836-7.156-16-16-16-8.844,0-16,7.164-16,16v32c0,8.836 7.156,16 16,16z' - ); + g.append('path') + .attr('class', 'error-icon') + .attr( + 'd', + 'm400,64c8.844,0 16-7.164 16-16v-32c0-8.836-7.156-16-16-16-8.844,0-16,7.164-16,16v32c0,8.836 7.156,16 16,16z' + ); - g.append('path') - .attr('class', 'error-icon') - .attr( - 'd', - 'm496,96.586h-32c-8.844,0-16,7.164-16,16 0,8.836 7.156,16 16,16h32c8.844,0 16-7.164 16-16 0-8.836-7.156-16-16-16z' - ); + g.append('path') + .attr('class', 'error-icon') + .attr( + 'd', + 'm496,96.586h-32c-8.844,0-16,7.164-16,16 0,8.836 7.156,16 16,16h32c8.844,0 16-7.164 16-16 0-8.836-7.156-16-16-16z' + ); - g.append('path') - .attr('class', 'error-icon') - .attr( - 'd', - 'm436.98,75.605c3.125,3.125 7.219,4.688 11.313,4.688 4.094,0 8.188-1.563 11.313-4.688l32-32c6.25-6.25 6.25-16.375 0-22.625s-16.375-6.25-22.625,0l-32,32c-6.251,6.25-6.251,16.375-0.001,22.625z' - ); + g.append('path') + .attr('class', 'error-icon') + .attr( + 'd', + 'm436.98,75.605c3.125,3.125 7.219,4.688 11.313,4.688 4.094,0 8.188-1.563 11.313-4.688l32-32c6.25-6.25 6.25-16.375 0-22.625s-16.375-6.25-22.625,0l-32,32c-6.251,6.25-6.251,16.375-0.001,22.625z' + ); - g.append('text') // text label for the x axis - .attr('class', 'error-text') - .attr('x', 1440) - .attr('y', 250) - .attr('font-size', '150px') - .style('text-anchor', 'middle') - .text('Syntax error in text'); - g.append('text') // text label for the x axis - .attr('class', 'error-text') - .attr('x', 1250) - .attr('y', 400) - .attr('font-size', '100px') - .style('text-anchor', 'middle') - .text('mermaid version ' + mermaidVersion); - - svg.attr('height', 100); - svg.attr('width', 500); - svg.attr('viewBox', '768 0 912 512'); - } catch (e) { - log.error('Error while rendering info diagram'); - log.error(getErrorMessage(e)); - } + g.append('text') // text label for the x axis + .attr('class', 'error-text') + .attr('x', 1440) + .attr('y', 250) + .attr('font-size', '150px') + .style('text-anchor', 'middle') + .text('Syntax error in text'); + g.append('text') // text label for the x axis + .attr('class', 'error-text') + .attr('x', 1250) + .attr('y', 400) + .attr('font-size', '100px') + .style('text-anchor', 'middle') + .text(`mermaid version ${version}`); }; -export default { - setConf, - draw, -}; +export const renderer = { draw }; diff --git a/packages/mermaid/src/diagrams/error/styles.js b/packages/mermaid/src/diagrams/error/styles.js deleted file mode 100644 index 0b0729813d..0000000000 --- a/packages/mermaid/src/diagrams/error/styles.js +++ /dev/null @@ -1,3 +0,0 @@ -const getStyles = () => ``; - -export default getStyles; diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts index 70b314daa5..e0c280f630 100644 --- a/packages/mermaid/src/mermaidAPI.ts +++ b/packages/mermaid/src/mermaidAPI.ts @@ -18,7 +18,7 @@ import { version } from '../package.json'; import * as configApi from './config.js'; import { addDiagrams } from './diagram-api/diagram-orchestration.js'; import { Diagram, getDiagramFromText } from './Diagram.js'; -import errorRenderer from './diagrams/error/errorRenderer.js'; +import { renderer as errorRenderer } from './diagrams/error/errorRenderer.js'; import { attachFunctions } from './interactionDb.js'; import { log, setLogLevel } from './logger.js'; import getStyles from './styles.js'; diff --git a/packages/mermaid/src/styles.spec.ts b/packages/mermaid/src/styles.spec.ts index 51951f190a..9353416410 100644 --- a/packages/mermaid/src/styles.spec.ts +++ b/packages/mermaid/src/styles.spec.ts @@ -19,7 +19,6 @@ import classDiagram from './diagrams/class/styles.js'; import flowchart from './diagrams/flowchart/styles.js'; import flowchartElk from './diagrams/flowchart/elk/styles.js'; import er from './diagrams/er/styles.js'; -import error from './diagrams/error/styles.js'; import git from './diagrams/git/styles.js'; import gantt from './diagrams/gantt/styles.js'; import pie from './diagrams/pie/styles.js'; @@ -86,7 +85,6 @@ describe('styles', () => { c4, classDiagram, er, - error, flowchart, flowchartElk, gantt, From 9ab048c7e9e193080cf00aba531863a9cae92ae7 Mon Sep 17 00:00:00 2001 From: Reda Al Sulais Date: Fri, 11 Aug 2023 00:55:31 +0300 Subject: [PATCH 2/2] use default export in `error` diagram --- packages/mermaid/src/diagram-api/diagram-orchestration.ts | 2 +- packages/mermaid/src/diagrams/error/errorDiagram.ts | 4 +++- packages/mermaid/src/diagrams/error/errorRenderer.ts | 2 ++ packages/mermaid/src/mermaidAPI.ts | 2 +- 4 files changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/mermaid/src/diagram-api/diagram-orchestration.ts b/packages/mermaid/src/diagram-api/diagram-orchestration.ts index 8bec8b7002..9c03e27f31 100644 --- a/packages/mermaid/src/diagram-api/diagram-orchestration.ts +++ b/packages/mermaid/src/diagram-api/diagram-orchestration.ts @@ -14,7 +14,7 @@ import classDiagramV2 from '../diagrams/class/classDetector-V2.js'; import state from '../diagrams/state/stateDetector.js'; import stateV2 from '../diagrams/state/stateDetector-V2.js'; import journey from '../diagrams/user-journey/journeyDetector.js'; -import { diagram as errorDiagram } from '../diagrams/error/errorDiagram.js'; +import errorDiagram from '../diagrams/error/errorDiagram.js'; import flowchartElk from '../diagrams/flowchart/elk/detector.js'; import timeline from '../diagrams/timeline/detector.js'; import mindmap from '../diagrams/mindmap/detector.js'; diff --git a/packages/mermaid/src/diagrams/error/errorDiagram.ts b/packages/mermaid/src/diagrams/error/errorDiagram.ts index 8f0fcdf28c..284dfd7447 100644 --- a/packages/mermaid/src/diagrams/error/errorDiagram.ts +++ b/packages/mermaid/src/diagrams/error/errorDiagram.ts @@ -1,7 +1,7 @@ import type { DiagramDefinition } from '../../diagram-api/types.js'; import { renderer } from './errorRenderer.js'; -export const diagram: DiagramDefinition = { +const diagram: DiagramDefinition = { db: {}, renderer, parser: { @@ -11,3 +11,5 @@ export const diagram: DiagramDefinition = { }, }, }; + +export default diagram; diff --git a/packages/mermaid/src/diagrams/error/errorRenderer.ts b/packages/mermaid/src/diagrams/error/errorRenderer.ts index b7049d4b79..ebe0d0d73f 100644 --- a/packages/mermaid/src/diagrams/error/errorRenderer.ts +++ b/packages/mermaid/src/diagrams/error/errorRenderer.ts @@ -77,3 +77,5 @@ export const draw = (_text: string, id: string, version: string) => { }; export const renderer = { draw }; + +export default renderer; diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts index e0c280f630..70b314daa5 100644 --- a/packages/mermaid/src/mermaidAPI.ts +++ b/packages/mermaid/src/mermaidAPI.ts @@ -18,7 +18,7 @@ import { version } from '../package.json'; import * as configApi from './config.js'; import { addDiagrams } from './diagram-api/diagram-orchestration.js'; import { Diagram, getDiagramFromText } from './Diagram.js'; -import { renderer as errorRenderer } from './diagrams/error/errorRenderer.js'; +import errorRenderer from './diagrams/error/errorRenderer.js'; import { attachFunctions } from './interactionDb.js'; import { log, setLogLevel } from './logger.js'; import getStyles from './styles.js';