chore: improve types

mermaid-js · May 4, 2024 · c021f71 · c021f71
1 parent e68125e
commit c021f71
Show file tree

Hide file tree

Showing 7 changed files with 790 additions and 34 deletions.
diff --git a/cypress/helpers/util.ts b/cypress/helpers/util.ts
@@ -55,7 +55,6 @@ export const imgSnapshotTest = (
   const options: CypressMermaidConfig = {
     ..._options,
     fontFamily: _options.fontFamily || 'courier',
-    // @ts-ignore TODO: Fix type of fontSize
     fontSize: _options.fontSize || '16px',
     sequence: {
       ...(_options.sequence || {}),

diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts
@@ -158,7 +158,7 @@ export interface MermaidConfig {
   block?: BlockDiagramConfig;
   dompurifyConfig?: DOMPurifyConfiguration;
   wrap?: boolean;
-  fontSize?: number;
+  fontSize?: string | number;
   markdownAutoWrap?: boolean;
   /**
    * Suppresses inserting 'Syntax error' diagram in the DOM.

diff --git a/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts b/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts
@@ -36,7 +36,6 @@ export const draw = (txt: string, id: string, _version: string, diagObj: Diagram
     .attr('height', chartConfig.height)
     .attr('class', 'background');
 
-  // @ts-ignore: TODO Fix ts errors
   configureSvgSize(svg, chartConfig.height, chartConfig.width, true);
 
   svg.attr('viewBox', `0 0 ${chartConfig.width} ${chartConfig.height}`);

diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts
@@ -10,10 +10,8 @@
  *
  * In addition to the render function, a number of behavioral configuration options are available.
  */
-// @ts-ignore TODO: Investigate D3 issue
 import { select } from 'd3';
 import { compile, serialize, stringify } from 'stylis';
-// @ts-ignore: TODO Fix ts errors
 import { version } from '../package.json';
 import * as configApi from './config.js';
 import { addDiagrams } from './diagram-api/diagram-orchestration.js';

diff --git a/packages/mermaid/src/types.ts b/packages/mermaid/src/types.ts
@@ -1,3 +1,5 @@
+import { interpolateToCurve } from './utils.js';
+
 export interface Point {
   x: number;
   y: number;
@@ -30,7 +32,7 @@ export interface EdgeData {
   arrowTypeEnd: string;
   style: string;
   labelStyle: string;
-  curve: any;
+  curve: ReturnType<typeof interpolateToCurve>;
 }
 
 export type ArrayElement<A> = A extends readonly (infer T)[] ? T : never;
diff --git a/packages/mermaid/src/utils.ts b/packages/mermaid/src/utils.ts
@@ -1,5 +1,5 @@
 import { sanitizeUrl } from '@braintree/sanitize-url';
-import type { CurveFactory } from 'd3';
+import type { CurveFactory, Selection } from 'd3';
 import {
   curveBasis,
   curveBasisClosed,
@@ -233,13 +233,12 @@ export const isSubstringInArray = function (str: string, arr: string[]): number
 export function interpolateToCurve(
   interpolate: string | undefined,
   defaultCurve: CurveFactory
-): CurveFactory {
+) {
   if (!interpolate) {
     return defaultCurve;
   }
   const curveName = `curve${interpolate.charAt(0).toUpperCase() + interpolate.slice(1)}`;
 
-  // @ts-ignore TODO: Fix issue with curve type
   return d3CurveTypes[curveName as keyof typeof d3CurveTypes] ?? defaultCurve;
 }
 
@@ -487,6 +486,25 @@ export const random = (options: { length: number }) => {
   return makeRandomHex(options.length);
 };
 
+interface TextData {
+  text: string;
+  x: number;
+  y: number;
+  anchor: 'start' | 'middle' | 'end';
+  fontFamily?: string;
+  fontSize?: string | number;
+  fontWeight?: string | number;
+  fill?: string;
+  class?: string;
+  textMargin: number;
+  style?: string;
+  width?: number;
+  height?: number;
+  rx?: number;
+  ry?: number;
+  valign?: string;
+}
+
 export const getTextObj = function () {
   return {
     x: 0,
@@ -501,7 +519,7 @@ export const getTextObj = function () {
     ry: 0,
     valign: undefined,
     text: '',
-  };
+  } satisfies TextData;
 };
 
 /**
@@ -512,20 +530,9 @@ export const getTextObj = function () {
  * @returns Text element with given styling and content
  */
 export const drawSimpleText = function (
-  elem: SVGElement,
-  textData: {
-    text: string;
-    x: number;
-    y: number;
-    anchor: 'start' | 'middle' | 'end';
-    fontFamily: string;
-    fontSize: string | number;
-    fontWeight: string | number;
-    fill: string;
-    class: string | undefined;
-    textMargin: number;
-  }
-): SVGTextElement {
+  elem: Selection<SVGSVGElement, any, HTMLElement, any>,
+  textData: TextData
+) {
   // Remove and ignore br:s
   const nText = textData.text.replace(common.lineBreakRegex, ' ');
 
@@ -689,7 +696,7 @@ export const calculateTextDimensions: (
   text: string,
   config: TextDimensionConfig
 ) => TextDimensions = memoize(
-  (text: string, config: TextDimensionConfig): TextDimensions => {
+  (text: string, config: TextDimensionConfig) => {
     const { fontSize = 12, fontFamily = 'Arial', fontWeight = 400 } = config;
     if (!text) {
       return { width: 0, height: 0 };
@@ -719,9 +726,7 @@ export const calculateTextDimensions: (
       for (const line of lines) {
         const textObj = getTextObj();
         textObj.text = line || ZERO_WIDTH_SPACE;
-        // @ts-ignore TODO: Fix D3 types
         const textElem = drawSimpleText(g, textObj)
-          // @ts-ignore TODO: Fix D3 types
           .style('font-size', _fontSizePx)
           .style('font-weight', fontWeight)
           .style('font-family', fontFamily);