diff --git a/packages/mermaid/src/diagrams/state/stateRenderer-v3-unified-step-by-step.ts b/packages/mermaid/src/diagrams/state/stateRenderer-v3-unified-step-by-step.ts deleted file mode 100644 index 936375f11..000000000 --- a/packages/mermaid/src/diagrams/state/stateRenderer-v3-unified-step-by-step.ts +++ /dev/null @@ -1,58 +0,0 @@ -import { log } from '../../logger.js'; -import type { DiagramStyleClassDef } from '../../diagram-api/types.js'; -import type { LayoutData, LayoutMethod } from '../../rendering-util/types.js'; -import { getConfig } from '../../diagram-api/diagramAPI.js'; -import doLayout from '../../rendering-util/doLayout.js'; -import performRender from '../../rendering-util/performRender.js'; -import insertElementsForSize, { - getDiagramElements, -} from '../../rendering-util/inserElementsForSize.js'; - -// Configuration -const conf: Record = {}; - -export const setConf = function (cnf: Record) { - const keys = Object.keys(cnf); - for (const key of keys) { - conf[key] = cnf[key]; - } -}; - -export const getClasses = function ( - text: string, - diagramObj: any -): Record { - diagramObj.db.extract(diagramObj.db.getRootDocV2()); - return diagramObj.db.getClasses(); -}; - -export const draw = async function (text: string, id: string, _version: string, diag: any) { - log.info('Drawing state diagram (v2)', id); - const { securityLevel, state: conf } = getConfig(); - - // Extracting the data from the parsed structure into a more usable form - // Not related to the refactoring, but this is the first step in the rendering process - diag.db.extract(diag.db.getRootDocV2()); - - // The getData method provided in all supported diagrams is used to extract the data from the parsed structure - // into the Layout data format - const data4Layout = diag.db.getData() as LayoutData; - // Create the root SVG - const { svg, element } = getDiagramElements(id, securityLevel); - // For some diagrams this call is not needed, but in the state diagram it is - await insertElementsForSize(element, data4Layout); - - console.log('data4Layout:', data4Layout); - - // Now we have layout data with real sizes, we can perform the layout - const data4Rendering = doLayout(data4Layout, id, _version, 'dagre-wrapper'); - - // The performRender method provided in all supported diagrams is used to render the data - performRender(data4Rendering); -}; - -export default { - setConf, - getClasses, - draw, -}; diff --git a/packages/mermaid/src/diagrams/state/stateRenderer-v3-unified.ts b/packages/mermaid/src/diagrams/state/stateRenderer-v3-unified.ts index f87fa254f..ce8ad8f64 100644 --- a/packages/mermaid/src/diagrams/state/stateRenderer-v3-unified.ts +++ b/packages/mermaid/src/diagrams/state/stateRenderer-v3-unified.ts @@ -1,7 +1,7 @@ import { getConfig } from '../../diagram-api/diagramAPI.js'; import type { DiagramStyleClassDef } from '../../diagram-api/types.js'; import { log } from '../../logger.js'; -import { getDiagramElements } from '../../rendering-util/inserElementsForSize.js'; +import { getDiagramElements } from '../../rendering-util/insertElementsForSize.js'; import { render } from '../../rendering-util/render.js'; import { setupViewPortForSVG } from '../../rendering-util/setupViewPortForSVG.js'; import type { LayoutData } from '../../rendering-util/types.js'; @@ -65,12 +65,14 @@ export const draw = async function (text: string, id: string, _version: string, // performRender(data4Rendering); data4Layout.type = diag.type; - // data4Layout.layoutAlgorithm = 'dagre-wrapper'; - // data4Layout.layoutAlgorithm = 'elk'; data4Layout.layoutAlgorithm = layout; data4Layout.direction = DIR; - data4Layout.nodeSpacing = conf.nodeSpacing || 50; - data4Layout.rankSpacing = conf.rankSpacing || 50; + + // TODO: Should we move these two to baseConfig? These types are not there in StateConfig. + // @ts-expect-error + data4Layout.nodeSpacing = conf?.nodeSpacing || 50; + // @ts-expect-error + data4Layout.rankSpacing = conf?.rankSpacing || 50; data4Layout.markers = ['barb']; data4Layout.diagramId = id; console.log('REF1:', data4Layout); @@ -79,10 +81,10 @@ export const draw = async function (text: string, id: string, _version: string, utils.insertTitle( element, 'statediagramTitleText', - conf.titleTopMargin, + conf?.titleTopMargin ?? 25, diag.db.getDiagramTitle() ); - setupViewPortForSVG(svg, padding, CSS_DIAGRAM, conf.useMaxWidth); + setupViewPortForSVG(svg, padding, CSS_DIAGRAM, conf?.useMaxWidth ?? true); }; export default { diff --git a/packages/mermaid/src/rendering-util/inserElementsForSize.js b/packages/mermaid/src/rendering-util/insertElementsForSize.js similarity index 100% rename from packages/mermaid/src/rendering-util/inserElementsForSize.js rename to packages/mermaid/src/rendering-util/insertElementsForSize.js diff --git a/packages/mermaid/src/rendering-util/performRender.ts b/packages/mermaid/src/rendering-util/performRender.ts deleted file mode 100644 index a862c6efb..000000000 --- a/packages/mermaid/src/rendering-util/performRender.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { RenderData } from './types'; -const performRender = (data: RenderData) => { }; -export default performRender; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/choice.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/choice.ts index c9e27cf8a..9c062e722 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/choice.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/choice.ts @@ -23,6 +23,7 @@ export const choice = (parent: SVG, node: Node) => { let choice; if (node.useRough) { + // @ts-ignore const rc = rough.svg(shapeSvg); const pointArr = points.map(function (d) { return [d.x, d.y]; @@ -41,6 +42,7 @@ export const choice = (parent: SVG, node: Node) => { } // center the circle around its coordinate + // @ts-ignore choice.attr('class', 'state-start').attr('r', 7).attr('width', 28).attr('height', 28); node.width = 28; node.height = 28; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/forkJoin.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/forkJoin.ts index 687f18847..01f5c9adc 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/forkJoin.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/forkJoin.ts @@ -1,4 +1,3 @@ -import { log } from '$root/logger.js'; import { updateNodeBounds } from './util.js'; import intersect from '../intersect/index.js'; import type { Node } from '$root/rendering-util/types.d.ts'; @@ -27,6 +26,7 @@ export const forkJoin = (parent: SVG, node: Node, dir: string) => { let shape; if (node.useRough) { + // @ts-ignore const rc = rough.svg(shapeSvg); const roughNode = rc.rectangle(x, y, width, height, solidStateFill(lineColor)); shape = shapeSvg.insert(() => roughNode); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/note.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/note.ts index 5ba4ba451..d85d3f2ca 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/note.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/note.ts @@ -30,6 +30,7 @@ export const note = async (parent: SVGAElement, node: Node) => { if (useRough) { // add the rect + // @ts-ignore const rc = rough.svg(shapeSvg); const roughNode = rc.rectangle(x, y, totalWidth, totalHeight, { roughness: 0.7, diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/rect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/rect.ts index 9ced7ee1f..44a2454f2 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/rect.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/rect.ts @@ -75,8 +75,9 @@ export const rect = async (parent: SVGAElement, node: Node) => { const y = -bbox.height / 2 - halfPadding; let rect; - const { rx, ry, style: cssStyles, useRough } = node; + const { rx, ry, cssStyles, useRough } = node; if (useRough) { + // @ts-ignore const rc = rough.svg(shapeSvg); const options = userNodeOverrides(node, { roughness: 0.7, diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateEnd.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateEnd.ts index 47518a576..a9db83129 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateEnd.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateEnd.ts @@ -18,6 +18,7 @@ export const stateEnd = (parent: SVG, node: Node) => { let circle; let innerCircle; if (node.useRough) { + // @ts-ignore const rc = rough.svg(shapeSvg); const roughNode = rc.circle(0, 0, 14, { ...solidStateFill(lineColor), roughness: 0.5 }); const roughInnerNode = rc.circle(0, 0, 5, { ...solidStateFill(lineColor), fillStyle: 'solid' }); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateStart.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateStart.ts index 9474902fa..12cb3bd3d 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateStart.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateStart.ts @@ -18,6 +18,7 @@ export const stateStart = (parent: SVG, node: Node) => { let circle; if (node.useRough) { + // @ts-ignore const rc = rough.svg(shapeSvg); const roughNode = rc.circle(0, 0, 14, solidStateFill(lineColor)); circle = shapeSvg.insert(() => roughNode); @@ -26,6 +27,7 @@ export const stateStart = (parent: SVG, node: Node) => { } // center the circle around its coordinate + // @ts-ignore circle.attr('class', 'state-start').attr('r', 7).attr('width', 14).attr('height', 14); updateNodeBounds(node, circle);