Merge pull request #4826 from mermaid-js/sidv/cleanupUtils

refactor: Fix typings in utils.ts

cSpell.json

@@ -22,6 +22,7 @@
     "brkt",
     "brolin",
     "brotli",
+    "catmull",
     "città",
     "classdef",
     "codedoc",

package.json

@@ -19,6 +19,7 @@
     "build:mermaid": "pnpm build:vite --mermaid",
     "build:viz": "pnpm build:mermaid --visualize",
     "build:types": "tsc -p ./packages/mermaid/tsconfig.json --emitDeclarationOnly && tsc -p ./packages/mermaid-zenuml/tsconfig.json --emitDeclarationOnly && tsc -p ./packages/mermaid-example-diagram/tsconfig.json --emitDeclarationOnly",
+    "build:types:watch": "tsc -p ./packages/mermaid/tsconfig.json --emitDeclarationOnly --watch",
     "build:watch": "pnpm build:vite --watch",
     "build": "pnpm run -r clean && pnpm build:types && pnpm build:vite",
     "dev": "concurrently \"pnpm build:vite --watch\" \"ts-node-esm .vite/server.ts\"",

packages/mermaid/src/diagrams/quadrant-chart/quadrantBuilder.ts

@@ -4,17 +4,13 @@ import { log } from '../../logger.js';
 import type { BaseDiagramConfig, QuadrantChartConfig } from '../../config.type.js';
 import defaultConfig from '../../defaultConfig.js';
 import { getThemeVariables } from '../../themes/theme-default.js';
+import type { Point } from '../../types.js';
 
 const defaultThemeVariables = getThemeVariables();
 
 export type TextVerticalPos = 'left' | 'center' | 'right';
 export type TextHorizontalPos = 'top' | 'middle' | 'bottom';
 
-export interface Point {
-  x: number;
-  y: number;
-}
-
 export interface QuadrantPointInputType extends Point {
   text: string;
 }

packages/mermaid/src/mermaid.ts

@@ -136,7 +136,7 @@ const runThrowsErrors = async function (
   }
 
   // generate the id of the diagram
-  const idGenerator = new utils.initIdGenerator(conf.deterministicIds, conf.deterministicIDSeed);
+  const idGenerator = new utils.InitIDGenerator(conf.deterministicIds, conf.deterministicIDSeed);
 
   let txt: string;
   const errors: DetailedError[] = [];

packages/mermaid/src/types.ts

@@ -0,0 +1,16 @@
+export interface Point {
+  x: number;
+  y: number;
+}
+
+export interface TextDimensionConfig {
+  fontSize?: number;
+  fontWeight?: number;
+  fontFamily?: string;
+}
+
+export interface TextDimensions {
+  width: number;
+  height: number;
+  lineHeight?: number;
+}

packages/mermaid/src/utils.spec.ts

@@ -1,5 +1,5 @@
 import { vi } from 'vitest';
-import utils, { cleanAndMerge, detectDirective } from './utils.js';
+import utils, { calculatePoint, cleanAndMerge, detectDirective } from './utils.js';
 import assignWithDepth from './assignWithDepth.js';
 import { detectType } from './diagram-api/detectType.js';
 import { addDiagrams } from './diagram-api/diagram-orchestration.js';
@@ -352,15 +352,15 @@ describe('when initializing the id generator', function () {
   });
 
   it('should return a random number generator based on Date', function () {
-    const idGenerator = new utils.initIdGenerator(false);
+    const idGenerator = new utils.InitIDGenerator(false);
     expect(typeof idGenerator.next).toEqual('function');
     const lastId = idGenerator.next();
     vi.advanceTimersByTime(1000);
     expect(idGenerator.next() > lastId).toBe(true);
   });
 
   it('should return a non random number generator', function () {
-    const idGenerator = new utils.initIdGenerator(true);
+    const idGenerator = new utils.InitIDGenerator(true);
     expect(typeof idGenerator.next).toEqual('function');
     const start = 0;
     const lastId = idGenerator.next();
@@ -369,7 +369,7 @@ describe('when initializing the id generator', function () {
   });
 
   it('should return a non random number generator based on seed', function () {
-    const idGenerator = new utils.initIdGenerator(true, 'thisIsASeed');
+    const idGenerator = new utils.InitIDGenerator(true, 'thisIsASeed');
     expect(typeof idGenerator.next).toEqual('function');
     const start = 11;
     const lastId = idGenerator.next();
@@ -490,3 +490,107 @@ describe('cleanAndMerge', () => {
     expect(inputDeep).toEqual({ a: { b: 1 } });
   });
 });
+
+describe('calculatePoint', () => {
+  it('should calculate a point on a straight line', () => {
+    const points = [
+      { x: 0, y: 0 },
+      { x: 0, y: 10 },
+      { x: 0, y: 20 },
+    ];
+    expect(calculatePoint(points, 0)).toEqual({ x: 0, y: 0 });
+    expect(calculatePoint(points, 5)).toEqual({ x: 0, y: 5 });
+    expect(calculatePoint(points, 10)).toEqual({ x: 0, y: 10 });
+  });
+
+  it('should calculate a point on a straight line with slope', () => {
+    const points = [
+      { x: 0, y: 0 },
+      { x: 10, y: 10 },
+      { x: 20, y: 20 },
+    ];
+    expect(calculatePoint(points, 0)).toMatchInlineSnapshot(`
+      {
+        "x": 0,
+        "y": 0,
+      }
+    `);
+    expect(calculatePoint(points, 5)).toMatchInlineSnapshot(`
+      {
+        "x": 3.53553,
+        "y": 3.53553,
+      }
+    `);
+    expect(calculatePoint(points, 10)).toMatchInlineSnapshot(`
+      {
+        "x": 7.07107,
+        "y": 7.07107,
+      }
+    `);
+  });
+
+  it('should calculate a point on a straight line with negative slope', () => {
+    const points = [
+      { x: 20, y: 20 },
+      { x: 10, y: 10 },
+      { x: 15, y: 15 },
+      { x: 0, y: 0 },
+    ];
+    expect(calculatePoint(points, 0)).toMatchInlineSnapshot(`
+      {
+        "x": 20,
+        "y": 20,
+      }
+    `);
+    expect(calculatePoint(points, 5)).toMatchInlineSnapshot(`
+      {
+        "x": 16.46447,
+        "y": 16.46447,
+      }
+    `);
+    expect(calculatePoint(points, 10)).toMatchInlineSnapshot(`
+      {
+        "x": 12.92893,
+        "y": 12.92893,
+      }
+    `);
+  });
+
+  it('should calculate a point on a curved line', () => {
+    const points = [
+      { x: 0, y: 0 },
+      { x: 10, y: 10 },
+      { x: 20, y: 0 },
+    ];
+    expect(calculatePoint(points, 0)).toMatchInlineSnapshot(`
+      {
+        "x": 0,
+        "y": 0,
+      }
+    `);
+    expect(calculatePoint(points, 15)).toMatchInlineSnapshot(`
+      {
+        "x": 10.6066,
+        "y": 9.3934,
+      }
+    `);
+    expect(calculatePoint(points, 20)).toMatchInlineSnapshot(`
+      {
+        "x": 14.14214,
+        "y": 5.85786,
+      }
+    `);
+  });
+
+  it('should throw an error if the new point cannot be found', () => {
+    const points = [
+      { x: 0, y: 0 },
+      { x: 10, y: 10 },
+      { x: 20, y: 20 },
+    ];
+    const distanceToTraverse = 30;
+    expect(() => calculatePoint(points, distanceToTraverse)).toThrow(
+      'Could not find a suitable point for the given distance'
+    );
+  });
+});