From a75665c7bfb5c7c6db07b8219439cfd2e6892de5 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Wed, 2 Oct 2024 18:20:35 +0530 Subject: [PATCH] chore: Rename RenderOptions interface to avoid duplication. --- .../rendering-elements/shapes/filledCircle.ts | 12 +++---- .../rendering-elements/shapes/forkJoin.ts | 10 +++--- .../rendering-elements/shapes/icon.ts | 34 +++++++++++++------ .../rendering-elements/shapes/iconCircle.ts | 34 +++++++++++++------ .../rendering-elements/shapes/iconRounded.ts | 34 +++++++++++++------ .../rendering-elements/shapes/iconSquare.ts | 34 +++++++++++++------ .../rendering-elements/shapes/imageSquare.ts | 22 +++++++----- .../rendering-elements/shapes/note.ts | 9 +++-- .../rendering-elements/shapes/stateEnd.ts | 10 +++--- .../rendering-elements/shapes/stateStart.ts | 10 +++--- packages/mermaid/src/rendering-util/types.ts | 2 +- 11 files changed, 132 insertions(+), 79 deletions(-) diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/filledCircle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/filledCircle.ts index ab8f5b9b0..26c0f73c8 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/filledCircle.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/filledCircle.ts @@ -1,15 +1,15 @@ -import { log } from '../../../logger.js'; -import { getNodeClasses, updateNodeBounds } from './util.js'; -import type { Node, RenderOptions } from '../../types.d.ts'; -import type { SVG } from '../../../diagram-api/types.js'; -import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js'; import rough from 'roughjs'; +import type { SVG } from '../../../diagram-api/types.js'; +import { log } from '../../../logger.js'; +import type { Node, ShapeRenderOptions } from '../../types.d.ts'; import intersect from '../intersect/index.js'; +import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js'; +import { getNodeClasses, updateNodeBounds } from './util.js'; export const filledCircle = ( parent: SVG, node: Node, - { config: { themeVariables } }: RenderOptions + { config: { themeVariables } }: ShapeRenderOptions ) => { const { labelStyles, nodeStyles } = styles2String(node); node.label = ''; 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 c6a34e929..84ce897ed 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/forkJoin.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/forkJoin.ts @@ -1,14 +1,14 @@ -import { getNodeClasses, updateNodeBounds } from './util.js'; -import intersect from '../intersect/index.js'; -import type { Node, RenderOptions } from '../../types.js'; -import type { SVG } from '../../../diagram-api/types.js'; import rough from 'roughjs'; +import type { SVG } from '../../../diagram-api/types.js'; +import type { Node, ShapeRenderOptions } from '../../types.js'; +import intersect from '../intersect/index.js'; import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js'; +import { getNodeClasses, updateNodeBounds } from './util.js'; export const forkJoin = ( parent: SVG, node: Node, - { dir, config: { state, themeVariables } }: RenderOptions + { dir, config: { state, themeVariables } }: ShapeRenderOptions ) => { const { nodeStyles } = styles2String(node); node.label = ''; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/icon.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/icon.ts index 67e2acce5..b11395522 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/icon.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/icon.ts @@ -1,16 +1,16 @@ -import { log } from '../../../logger.js'; -import { labelHelper, updateNodeBounds } from './util.js'; -import type { Node, RenderOptions } from '../../types.d.ts'; -import type { SVG } from '../../../diagram-api/types.js'; -import { compileStyles, styles2String, userNodeOverrides } from './handDrawnShapeStyles.js'; import rough from 'roughjs'; -import intersect from '../intersect/index.js'; +import type { SVG } from '../../../diagram-api/types.js'; +import { log } from '../../../logger.js'; import { getIconSVG } from '../../icons.js'; +import type { Node, ShapeRenderOptions } from '../../types.d.ts'; +import intersect from '../intersect/index.js'; +import { compileStyles, styles2String, userNodeOverrides } from './handDrawnShapeStyles.js'; +import { labelHelper, updateNodeBounds } from './util.js'; export const icon = async ( parent: SVG, node: Node, - { config: { themeVariables, flowchart } }: RenderOptions + { config: { themeVariables, flowchart } }: ShapeRenderOptions ) => { const { labelStyles } = styles2String(node); node.labelStyle = labelStyles; @@ -59,7 +59,11 @@ export const icon = async ( if (node.icon) { const iconElem = shapeSvg.append('g'); iconElem.html( - `${await getIconSVG(node.icon, { height: iconSize, width: iconSize, fallbackPrefix: '' })}` + `${await getIconSVG(node.icon, { + height: iconSize, + width: iconSize, + fallbackPrefix: '', + })}` ); const iconBBox = iconElem.node().getBBox(); const iconWidth = iconBBox.width; @@ -68,19 +72,27 @@ export const icon = async ( const iconY = iconBBox.y; iconElem.attr( 'transform', - `translate(${-iconWidth / 2 - iconX},${topLabel ? bbox.height / 2 + labelPadding / 2 - iconHeight / 2 - iconY : -bbox.height / 2 - labelPadding / 2 - iconHeight / 2 - iconY})` + `translate(${-iconWidth / 2 - iconX},${ + topLabel + ? bbox.height / 2 + labelPadding / 2 - iconHeight / 2 - iconY + : -bbox.height / 2 - labelPadding / 2 - iconHeight / 2 - iconY + })` ); iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') || nodeBorder); } label.attr( 'transform', - `translate(${-bbox.width / 2 - (bbox.x - (bbox.left ?? 0))},${topLabel ? -outerHeight / 2 : outerHeight / 2 - bbox.height})` + `translate(${-bbox.width / 2 - (bbox.x - (bbox.left ?? 0))},${ + topLabel ? -outerHeight / 2 : outerHeight / 2 - bbox.height + })` ); iconShape.attr( 'transform', - `translate(${0},${topLabel ? bbox.height / 2 + labelPadding / 2 : -bbox.height / 2 - labelPadding / 2})` + `translate(${0},${ + topLabel ? bbox.height / 2 + labelPadding / 2 : -bbox.height / 2 - labelPadding / 2 + })` ); updateNodeBounds(node, outerShape); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts index 3bef7adb8..5a248b609 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts @@ -1,16 +1,16 @@ -import { log } from '../../../logger.js'; -import { labelHelper, updateNodeBounds } from './util.js'; -import type { Node, RenderOptions } from '../../types.d.ts'; -import type { SVG } from '../../../diagram-api/types.js'; -import { compileStyles, styles2String, userNodeOverrides } from './handDrawnShapeStyles.js'; import rough from 'roughjs'; -import intersect from '../intersect/index.js'; +import type { SVG } from '../../../diagram-api/types.js'; +import { log } from '../../../logger.js'; import { getIconSVG } from '../../icons.js'; +import type { Node, ShapeRenderOptions } from '../../types.d.ts'; +import intersect from '../intersect/index.js'; +import { compileStyles, styles2String, userNodeOverrides } from './handDrawnShapeStyles.js'; +import { labelHelper, updateNodeBounds } from './util.js'; export const iconCircle = async ( parent: SVG, node: Node, - { config: { themeVariables, flowchart } }: RenderOptions + { config: { themeVariables, flowchart } }: ShapeRenderOptions ) => { const { labelStyles } = styles2String(node); node.labelStyle = labelStyles; @@ -40,7 +40,11 @@ export const iconCircle = async ( const iconElem = shapeSvg.append('g'); if (node.icon) { iconElem.html( - `${await getIconSVG(node.icon, { height: iconSize, width: iconSize, fallbackPrefix: '' })}` + `${await getIconSVG(node.icon, { + height: iconSize, + width: iconSize, + fallbackPrefix: '', + })}` ); } const iconBBox = iconElem.node().getBBox(); @@ -65,17 +69,25 @@ export const iconCircle = async ( const outerShape = shapeSvg.insert(() => outerNode); iconElem.attr( 'transform', - `translate(${-iconWidth / 2 - iconX},${topLabel ? bbox.height / 2 + labelPadding / 2 - iconHeight / 2 - iconY : -bbox.height / 2 - labelPadding / 2 - iconHeight / 2 - iconY})` + `translate(${-iconWidth / 2 - iconX},${ + topLabel + ? bbox.height / 2 + labelPadding / 2 - iconHeight / 2 - iconY + : -bbox.height / 2 - labelPadding / 2 - iconHeight / 2 - iconY + })` ); iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') || nodeBorder); label.attr( 'transform', - `translate(${-bbox.width / 2 - (bbox.x - (bbox.left ?? 0))},${topLabel ? -outerHeight / 2 : outerHeight / 2 - bbox.height})` + `translate(${-bbox.width / 2 - (bbox.x - (bbox.left ?? 0))},${ + topLabel ? -outerHeight / 2 : outerHeight / 2 - bbox.height + })` ); iconShape.attr( 'transform', - `translate(${0},${topLabel ? bbox.height / 2 + labelPadding / 2 : -bbox.height / 2 - labelPadding / 2})` + `translate(${0},${ + topLabel ? bbox.height / 2 + labelPadding / 2 : -bbox.height / 2 - labelPadding / 2 + })` ); updateNodeBounds(node, outerShape); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconRounded.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconRounded.ts index 160a3454d..12279afcc 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconRounded.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconRounded.ts @@ -1,17 +1,17 @@ -import { log } from '../../../logger.js'; -import { labelHelper, updateNodeBounds } from './util.js'; -import type { Node, RenderOptions } from '../../types.d.ts'; -import type { SVG } from '../../../diagram-api/types.js'; -import { compileStyles, styles2String, userNodeOverrides } from './handDrawnShapeStyles.js'; import rough from 'roughjs'; -import intersect from '../intersect/index.js'; +import type { SVG } from '../../../diagram-api/types.js'; +import { log } from '../../../logger.js'; import { getIconSVG } from '../../icons.js'; +import type { Node, ShapeRenderOptions } from '../../types.d.ts'; +import intersect from '../intersect/index.js'; +import { compileStyles, styles2String, userNodeOverrides } from './handDrawnShapeStyles.js'; import { createRoundedRectPathD } from './roundedRectPath.js'; +import { labelHelper, updateNodeBounds } from './util.js'; export const iconRounded = async ( parent: SVG, node: Node, - { config: { themeVariables, flowchart } }: RenderOptions + { config: { themeVariables, flowchart } }: ShapeRenderOptions ) => { const { labelStyles } = styles2String(node); node.labelStyle = labelStyles; @@ -64,7 +64,11 @@ export const iconRounded = async ( if (node.icon) { const iconElem = shapeSvg.append('g'); iconElem.html( - `${await getIconSVG(node.icon, { height: iconSize, width: iconSize, fallbackPrefix: '' })}` + `${await getIconSVG(node.icon, { + height: iconSize, + width: iconSize, + fallbackPrefix: '', + })}` ); const iconBBox = iconElem.node().getBBox(); const iconWidth = iconBBox.width; @@ -73,19 +77,27 @@ export const iconRounded = async ( const iconY = iconBBox.y; iconElem.attr( 'transform', - `translate(${-iconWidth / 2 - iconX},${topLabel ? bbox.height / 2 + labelPadding / 2 - iconHeight / 2 - iconY : -bbox.height / 2 - labelPadding / 2 - iconHeight / 2 - iconY})` + `translate(${-iconWidth / 2 - iconX},${ + topLabel + ? bbox.height / 2 + labelPadding / 2 - iconHeight / 2 - iconY + : -bbox.height / 2 - labelPadding / 2 - iconHeight / 2 - iconY + })` ); iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') ?? nodeBorder); } label.attr( 'transform', - `translate(${-bbox.width / 2 - (bbox.x - (bbox.left ?? 0))},${topLabel ? -outerHeight / 2 : outerHeight / 2 - bbox.height})` + `translate(${-bbox.width / 2 - (bbox.x - (bbox.left ?? 0))},${ + topLabel ? -outerHeight / 2 : outerHeight / 2 - bbox.height + })` ); iconShape.attr( 'transform', - `translate(${0},${topLabel ? bbox.height / 2 + labelPadding / 2 : -bbox.height / 2 - labelPadding / 2})` + `translate(${0},${ + topLabel ? bbox.height / 2 + labelPadding / 2 : -bbox.height / 2 - labelPadding / 2 + })` ); updateNodeBounds(node, outerShape); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts index 5033c76ef..c81f61f57 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts @@ -1,16 +1,16 @@ -import { log } from '../../../logger.js'; -import { labelHelper, updateNodeBounds } from './util.js'; -import type { Node, RenderOptions } from '../../types.d.ts'; -import type { SVG } from '../../../diagram-api/types.js'; -import { compileStyles, styles2String, userNodeOverrides } from './handDrawnShapeStyles.js'; import rough from 'roughjs'; -import intersect from '../intersect/index.js'; +import type { SVG } from '../../../diagram-api/types.js'; +import { log } from '../../../logger.js'; import { getIconSVG } from '../../icons.js'; +import type { Node, ShapeRenderOptions } from '../../types.d.ts'; +import intersect from '../intersect/index.js'; +import { compileStyles, styles2String, userNodeOverrides } from './handDrawnShapeStyles.js'; +import { labelHelper, updateNodeBounds } from './util.js'; export const iconSquare = async ( parent: SVG, node: Node, - { config: { themeVariables, flowchart } }: RenderOptions + { config: { themeVariables, flowchart } }: ShapeRenderOptions ) => { const { labelStyles } = styles2String(node); node.labelStyle = labelStyles; @@ -63,7 +63,11 @@ export const iconSquare = async ( if (node.icon) { const iconElem = shapeSvg.append('g'); iconElem.html( - `${await getIconSVG(node.icon, { height: iconSize, width: iconSize, fallbackPrefix: '' })}` + `${await getIconSVG(node.icon, { + height: iconSize, + width: iconSize, + fallbackPrefix: '', + })}` ); const iconBBox = iconElem.node().getBBox(); const iconWidth = iconBBox.width; @@ -72,19 +76,27 @@ export const iconSquare = async ( const iconY = iconBBox.y; iconElem.attr( 'transform', - `translate(${-iconWidth / 2 - iconX},${topLabel ? bbox.height / 2 + labelPadding / 2 - iconHeight / 2 - iconY : -bbox.height / 2 - labelPadding / 2 - iconHeight / 2 - iconY})` + `translate(${-iconWidth / 2 - iconX},${ + topLabel + ? bbox.height / 2 + labelPadding / 2 - iconHeight / 2 - iconY + : -bbox.height / 2 - labelPadding / 2 - iconHeight / 2 - iconY + })` ); iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') ?? nodeBorder); } label.attr( 'transform', - `translate(${-bbox.width / 2 - (bbox.x - (bbox.left ?? 0))},${topLabel ? -outerHeight / 2 : outerHeight / 2 - bbox.height})` + `translate(${-bbox.width / 2 - (bbox.x - (bbox.left ?? 0))},${ + topLabel ? -outerHeight / 2 : outerHeight / 2 - bbox.height + })` ); iconShape.attr( 'transform', - `translate(${0},${topLabel ? bbox.height / 2 + labelPadding / 2 : -bbox.height / 2 - labelPadding / 2})` + `translate(${0},${ + topLabel ? bbox.height / 2 + labelPadding / 2 : -bbox.height / 2 - labelPadding / 2 + })` ); updateNodeBounds(node, outerShape); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/imageSquare.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/imageSquare.ts index eca7bc72b..6ccf8fe3e 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/imageSquare.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/imageSquare.ts @@ -1,15 +1,15 @@ -import { log } from '../../../logger.js'; -import { labelHelper, updateNodeBounds } from './util.js'; -import type { Node, RenderOptions } from '../../types.d.ts'; -import type { SVG } from '../../../diagram-api/types.js'; -import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js'; import rough from 'roughjs'; +import type { SVG } from '../../../diagram-api/types.js'; +import { log } from '../../../logger.js'; +import type { Node, ShapeRenderOptions } from '../../types.d.ts'; import intersect from '../intersect/index.js'; +import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js'; +import { labelHelper, updateNodeBounds } from './util.js'; export const imageSquare = async ( parent: SVG, node: Node, - { config: { flowchart } }: RenderOptions + { config: { flowchart } }: ShapeRenderOptions ) => { const img = new Image(); img.src = node?.img ?? ''; @@ -92,12 +92,18 @@ export const imageSquare = async ( label.attr( 'transform', - `translate(${-bbox.width / 2 - (bbox.x - (bbox.left ?? 0))},${topLabel ? -imageHeight / 2 - bbox.height / 2 - labelPadding / 2 : imageHeight / 2 - bbox.height / 2 + labelPadding / 2})` + `translate(${-bbox.width / 2 - (bbox.x - (bbox.left ?? 0))},${ + topLabel + ? -imageHeight / 2 - bbox.height / 2 - labelPadding / 2 + : imageHeight / 2 - bbox.height / 2 + labelPadding / 2 + })` ); iconShape.attr( 'transform', - `translate(${0},${topLabel ? bbox.height / 2 + labelPadding / 2 : -bbox.height / 2 - labelPadding / 2})` + `translate(${0},${ + topLabel ? bbox.height / 2 + labelPadding / 2 : -bbox.height / 2 - labelPadding / 2 + })` ); updateNodeBounds(node, outerShape); 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 bd36c7261..926a76749 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/note.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/note.ts @@ -1,14 +1,13 @@ -import { getNodeClasses, labelHelper, updateNodeBounds } from './util.js'; -import intersect from '../intersect/index.js'; -import type { Node } from '../../types.js'; import rough from 'roughjs'; +import type { Node, ShapeRenderOptions } from '../../types.js'; +import intersect from '../intersect/index.js'; import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js'; -import type { RenderOptions } from '../../types.js'; +import { getNodeClasses, labelHelper, updateNodeBounds } from './util.js'; export const note = async ( parent: SVGAElement, node: Node, - { config: { themeVariables } }: RenderOptions + { config: { themeVariables } }: ShapeRenderOptions ) => { const { labelStyles, nodeStyles } = styles2String(node); node.labelStyle = labelStyles; 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 9c547f30f..ef83d7c52 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateEnd.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateEnd.ts @@ -1,14 +1,14 @@ -import { updateNodeBounds } from './util.js'; -import intersect from '../intersect/index.js'; -import type { Node, RenderOptions } from '../../types.js'; -import type { SVG } from '../../../diagram-api/types.js'; import rough from 'roughjs'; +import type { SVG } from '../../../diagram-api/types.js'; +import type { Node, ShapeRenderOptions } from '../../types.js'; +import intersect from '../intersect/index.js'; import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js'; +import { updateNodeBounds } from './util.js'; export const stateEnd = ( parent: SVG, node: Node, - { config: { themeVariables } }: RenderOptions + { config: { themeVariables } }: ShapeRenderOptions ) => { const { labelStyles, nodeStyles } = styles2String(node); node.labelStyle = labelStyles; 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 d29b42be4..c17a6edc3 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateStart.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateStart.ts @@ -1,14 +1,14 @@ -import { updateNodeBounds } from './util.js'; -import intersect from '../intersect/index.js'; -import type { Node, RenderOptions } from '../../types.js'; -import type { SVG } from '../../../diagram-api/types.js'; import rough from 'roughjs'; +import type { SVG } from '../../../diagram-api/types.js'; +import type { Node, ShapeRenderOptions } from '../../types.js'; +import intersect from '../intersect/index.js'; import { solidStateFill } from './handDrawnShapeStyles.js'; +import { updateNodeBounds } from './util.js'; export const stateStart = ( parent: SVG, node: Node, - { config: { themeVariables } }: RenderOptions + { config: { themeVariables } }: ShapeRenderOptions ) => { const { lineColor } = themeVariables; diff --git a/packages/mermaid/src/rendering-util/types.ts b/packages/mermaid/src/rendering-util/types.ts index ec4e49b2a..ae6641049 100644 --- a/packages/mermaid/src/rendering-util/types.ts +++ b/packages/mermaid/src/rendering-util/types.ts @@ -144,7 +144,7 @@ export type LayoutMethod = | 'osage' | 'grid'; -export interface RenderOptions { +export interface ShapeRenderOptions { config: MermaidConfig; dir: string; }