marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-02 23:26:44 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'develop' of https://github.com/mermaid-js/mermaid into knsv/new-shapes

Browse Source
This commit is contained in:
omkarht
2024-08-22 16:49:53 +05:30
parent 8d8b6c1c33 0e68788de4
commit abf7ecd2ca
10 changed files with 82 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.cspell/code-terms.txt
View File

@@ -120,6 +120,8 @@ SUBROUTINEEND
SUBROUTINESTART
Subschemas
substr
SVGG
SVGSVG
TAGEND
TAGSTART
techn

98
cypress/integration/rendering/flowchart-handDrawn.spec.js
View File

@@ -12,7 +12,7 @@ describe('Flowchart HandDrawn', () => {
`,
{
look: 'handDrawn',
handDrawnSeed: 0,
handDrawnSeed: 1,
flowchart: { htmlLabels: false },
fontFamily: 'courier',
}
@@ -30,7 +30,7 @@ describe('Flowchart HandDrawn', () => {
`,
{
look: 'handDrawn',
handDrawnSeed: 0,
handDrawnSeed: 1,
flowchart: { htmlLabels: true },
fontFamily: 'courier',
}
@@ -47,7 +47,7 @@ describe('Flowchart HandDrawn', () => {
C -->|Two| E[iPhone]
C -->|Three| F[Car]
`,
{ look: 'handDrawn', handDrawnSeed: 0, fontFamily: 'courier' }
{ look: 'handDrawn', handDrawnSeed: 1, fontFamily: 'courier' }
);
});
@@ -62,7 +62,7 @@ describe('Flowchart HandDrawn', () => {
C -->|Two| E[\\iPhone\\]
C -->|Three| F[Car]
`,
{ look: 'handDrawn', handDrawnSeed: 0, fontFamily: 'courier' }
{ look: 'handDrawn', handDrawnSeed: 1, fontFamily: 'courier' }
);
});
@@ -78,7 +78,7 @@ describe('Flowchart HandDrawn', () => {
classDef processHead fill:#888888,color:white,font-weight:bold,stroke-width:3px,stroke:#001f3f
class 1A,1B,D,E processHead
`,
{ look: 'handDrawn', handDrawnSeed: 0, fontFamily: 'courier' }
{ look: 'handDrawn', handDrawnSeed: 1, fontFamily: 'courier' }
);
});
@@ -107,7 +107,7 @@ describe('Flowchart HandDrawn', () => {
35(SAM.CommonFA.PopulationFME)-->39(SAM.CommonFA.ChargeDetails)
36(SAM.CommonFA.PremetricCost)-->39(SAM.CommonFA.ChargeDetails)
`,
{ look: 'handDrawn', handDrawnSeed: 0, fontFamily: 'courier' }
{ look: 'handDrawn', handDrawnSeed: 1, fontFamily: 'courier' }
);
});
@@ -178,7 +178,7 @@ describe('Flowchart HandDrawn', () => {
9a072290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
9a072290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
`,
{ look: 'handDrawn', handDrawnSeed: 0, fontFamily: 'courier' }
{ look: 'handDrawn', handDrawnSeed: 1, fontFamily: 'courier' }
);
});
@@ -187,7 +187,7 @@ describe('Flowchart HandDrawn', () => {
`
graph TB;subgraph "number as labels";1;end;
`,
{ look: 'handDrawn', handDrawnSeed: 0, fontFamily: 'courier' }
{ look: 'handDrawn', handDrawnSeed: 1, fontFamily: 'courier' }
);
});
@@ -199,7 +199,7 @@ describe('Flowchart HandDrawn', () => {
a1-->a2
end
`,
{ look: 'handDrawn', handDrawnSeed: 0, fontFamily: 'courier' }
{ look: 'handDrawn', handDrawnSeed: 1, fontFamily: 'courier' }
);
});
@@ -211,7 +211,7 @@ describe('Flowchart HandDrawn', () => {
a1-->a2
end
`,
{ look: 'handDrawn', handDrawnSeed: 0, fontFamily: 'courier' }
{ look: 'handDrawn', handDrawnSeed: 1, fontFamily: 'courier' }
);
});
@@ -246,7 +246,7 @@ describe('Flowchart HandDrawn', () => {
style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
`,
{ look: 'handDrawn', handDrawnSeed: 0, fontFamily: 'courier' }
{ look: 'handDrawn', handDrawnSeed: 1, fontFamily: 'courier' }
);
});
@@ -348,7 +348,7 @@ describe('Flowchart HandDrawn', () => {
sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22;
`,
{ look: 'handDrawn', handDrawnSeed: 0, fontFamily: 'courier' }
{ look: 'handDrawn', handDrawnSeed: 1, fontFamily: 'courier' }
);
});
@@ -364,7 +364,7 @@ describe('Flowchart HandDrawn', () => {
`,
{
look: 'handDrawn',
handDrawnSeed: 0,
handDrawnSeed: 1,
listUrl: false,
listId: 'color styling',
fontFamily: 'courier',
@@ -390,7 +390,7 @@ describe('Flowchart HandDrawn', () => {
`,
{
look: 'handDrawn',
handDrawnSeed: 0,
handDrawnSeed: 1,
listUrl: false,
listId: 'color styling',
fontFamily: 'courier',
@@ -411,7 +411,7 @@ describe('Flowchart HandDrawn', () => {
`,
{
look: 'handDrawn',
handDrawnSeed: 0,
handDrawnSeed: 1,
flowchart: { htmlLabels: false },
fontFamily: 'courier',
}
@@ -435,7 +435,7 @@ describe('Flowchart HandDrawn', () => {
`,
{
look: 'handDrawn',
handDrawnSeed: 0,
handDrawnSeed: 1,
flowchart: { htmlLabels: false },
fontFamily: 'courier',
}
@@ -457,7 +457,7 @@ describe('Flowchart HandDrawn', () => {
`,
{
look: 'handDrawn',
handDrawnSeed: 0,
handDrawnSeed: 1,
flowchart: { htmlLabels: false },
fontFamily: 'courier',
}
@@ -471,7 +471,7 @@ describe('Flowchart HandDrawn', () => {
`,
{
look: 'handDrawn',
handDrawnSeed: 0,
handDrawnSeed: 1,
flowchart: { htmlLabels: false },
fontFamily: 'courier',
}
@@ -485,7 +485,7 @@ describe('Flowchart HandDrawn', () => {
`,
{
look: 'handDrawn',
handDrawnSeed: 0,
handDrawnSeed: 1,
flowchart: { htmlLabels: false },
fontFamily: 'courier',
}
@@ -500,7 +500,7 @@ describe('Flowchart HandDrawn', () => {
`,
{
look: 'handDrawn',
handDrawnSeed: 0,
handDrawnSeed: 1,
flowchart: { htmlLabels: false },
fontFamily: 'courier',
}
@@ -527,7 +527,7 @@ describe('Flowchart HandDrawn', () => {
class A someclass;`,
{
look: 'handDrawn',
handDrawnSeed: 0,
handDrawnSeed: 1,
flowchart: { htmlLabels: false },
fontFamily: 'courier',
}
@@ -544,7 +544,7 @@ describe('Flowchart HandDrawn', () => {
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
`,
{ look: 'handDrawn', handDrawnSeed: 0, flowchart: { nodeSpacing: 50 }, fontFamily: 'courier' }
{ look: 'handDrawn', handDrawnSeed: 1, flowchart: { nodeSpacing: 50 }, fontFamily: 'courier' }
);
});
@@ -560,7 +560,7 @@ describe('Flowchart HandDrawn', () => {
`,
{
look: 'handDrawn',
handDrawnSeed: 0,
handDrawnSeed: 1,
flowchart: { rankSpacing: '100' },
fontFamily: 'courier',
}
@@ -578,7 +578,7 @@ describe('Flowchart HandDrawn', () => {
`,
{
look: 'handDrawn',
handDrawnSeed: 0,
handDrawnSeed: 1,
flowchart: { htmlLabels: false },
fontFamily: 'courier',
}
@@ -603,7 +603,7 @@ describe('Flowchart HandDrawn', () => {
click E "notes://do-your-thing/id" "other protocol test"
click F "javascript:alert('test')" "script test"
`,
{ look: 'handDrawn', handDrawnSeed: 0, securityLevel: 'loose', fontFamily: 'courier' }
{ look: 'handDrawn', handDrawnSeed: 1, securityLevel: 'loose', fontFamily: 'courier' }
);
});
@@ -623,7 +623,7 @@ describe('Flowchart HandDrawn', () => {
click B "index.html#link-clicked" "link test"
click D testClick "click test"
`,
{ look: 'handDrawn', handDrawnSeed: 0, flowchart: { htmlLabels: true } }
{ look: 'handDrawn', handDrawnSeed: 1, flowchart: { htmlLabels: true } }
);
});
@@ -645,7 +645,7 @@ describe('Flowchart HandDrawn', () => {
`,
{
look: 'handDrawn',
handDrawnSeed: 0,
handDrawnSeed: 1,
flowchart: { htmlLabels: false },
fontFamily: 'courier',
}
@@ -664,7 +664,7 @@ describe('Flowchart HandDrawn', () => {
class A myClass1
class D myClass2
`,
{ look: 'handDrawn', handDrawnSeed: 0, flowchart: { htmlLabels: true } }
{ look: 'handDrawn', handDrawnSeed: 1, flowchart: { htmlLabels: true } }
);
});
@@ -682,7 +682,7 @@ describe('Flowchart HandDrawn', () => {
`,
{
look: 'handDrawn',
handDrawnSeed: 0,
handDrawnSeed: 1,
flowchart: { htmlLabels: false },
fontFamily: 'courier',
}
@@ -711,7 +711,7 @@ describe('Flowchart HandDrawn', () => {
`,
{
look: 'handDrawn',
handDrawnSeed: 0,
handDrawnSeed: 1,
flowchart: { htmlLabels: false },
fontFamily: 'courier',
}
@@ -728,7 +728,7 @@ describe('Flowchart HandDrawn', () => {
`,
{
look: 'handDrawn',
handDrawnSeed: 0,
handDrawnSeed: 1,
flowchart: { htmlLabels: false },
fontFamily: 'courier',
}
@@ -752,7 +752,7 @@ describe('Flowchart HandDrawn', () => {
`,
{
look: 'handDrawn',
handDrawnSeed: 0,
handDrawnSeed: 1,
flowchart: { htmlLabels: false },
fontFamily: 'courier',
}
@@ -769,7 +769,7 @@ describe('Flowchart HandDrawn', () => {
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
`,
{ look: 'handDrawn', handDrawnSeed: 0, flowchart: { diagramPadding: 0 } }
{ look: 'handDrawn', handDrawnSeed: 1, flowchart: { diagramPadding: 0 } }
);
});
@@ -778,7 +778,7 @@ describe('Flowchart HandDrawn', () => {
`graph TD
A[Christmas]
`,
{ look: 'handDrawn', handDrawnSeed: 0 }
{ look: 'handDrawn', handDrawnSeed: 1 }
);
});
@@ -796,7 +796,7 @@ describe('Flowchart HandDrawn', () => {
C -----> E4
C ======> E5
`,
{ look: 'handDrawn', handDrawnSeed: 0 }
{ look: 'handDrawn', handDrawnSeed: 1 }
);
});
it('FDH36: should render escaped without html labels', () => {
@@ -804,7 +804,7 @@ describe('Flowchart HandDrawn', () => {
`graph TD
a["<strong>Haiya</strong>"]-->b
`,
{ look: 'handDrawn', handDrawnSeed: 0, htmlLabels: false, flowchart: { htmlLabels: false } }
{ look: 'handDrawn', handDrawnSeed: 1, htmlLabels: false, flowchart: { htmlLabels: false } }
);
});
it('FDH37: should render non-escaped with html labels', () => {
@@ -814,7 +814,7 @@ describe('Flowchart HandDrawn', () => {
`,
{
look: 'handDrawn',
handDrawnSeed: 0,
handDrawnSeed: 1,
htmlLabels: true,
flowchart: { htmlLabels: true },
securityLevel: 'loose',
@@ -830,7 +830,7 @@ describe('Flowchart HandDrawn', () => {
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
`,
{ look: 'handDrawn', handDrawnSeed: 0, flowchart: { useMaxWidth: true } }
{ look: 'handDrawn', handDrawnSeed: 1, flowchart: { useMaxWidth: true } }
);
cy.get('svg').should((svg) => {
expect(svg).to.have.attr('width', '100%');
@@ -853,7 +853,7 @@ describe('Flowchart HandDrawn', () => {
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
`,
{ look: 'handDrawn', handDrawnSeed: 0, flowchart: { useMaxWidth: false } }
{ look: 'handDrawn', handDrawnSeed: 1, flowchart: { useMaxWidth: false } }
);
cy.get('svg').should((svg) => {
// const height = parseFloat(svg.attr('height'));
@@ -874,7 +874,7 @@ describe('Flowchart HandDrawn', () => {
`,
{
look: 'handDrawn',
handDrawnSeed: 0,
handDrawnSeed: 1,
htmlLabels: true,
flowchart: { htmlLabels: true },
securityLevel: 'loose',
@@ -904,7 +904,7 @@ describe('Flowchart HandDrawn', () => {
`,
{
look: 'handDrawn',
handDrawnSeed: 0,
handDrawnSeed: 1,
htmlLabels: true,
flowchart: { htmlLabels: true },
securityLevel: 'loose',
@@ -919,7 +919,7 @@ graph TD
`,
{
look: 'handDrawn',
handDrawnSeed: 0,
handDrawnSeed: 1,
htmlLabels: true,
flowchart: { htmlLabels: true },
securityLevel: 'loose',
@@ -937,7 +937,7 @@ graph TD
`,
{
look: 'handDrawn',
handDrawnSeed: 0,
handDrawnSeed: 1,
htmlLabels: true,
flowchart: { htmlLabels: true },
securityLevel: 'loose',
@@ -977,7 +977,7 @@ graph TD
`,
{
look: 'handDrawn',
handDrawnSeed: 0,
handDrawnSeed: 1,
htmlLabels: true,
flowchart: { htmlLabels: true },
securityLevel: 'loose',
@@ -999,7 +999,7 @@ graph TD
`,
{
look: 'handDrawn',
handDrawnSeed: 0,
handDrawnSeed: 1,
htmlLabels: true,
flowchart: { htmlLabels: true },
securityLevel: 'loose',
@@ -1016,7 +1016,7 @@ graph TD
`,
{
look: 'handDrawn',
handDrawnSeed: 0,
handDrawnSeed: 1,
htmlLabels: true,
flowchart: { htmlLabels: true },
securityLevel: 'loose',
@@ -1027,12 +1027,12 @@ graph TD
imgSnapshotTest(
`
graph TD
classDef default fill:#a34,stroke:#000,stroke-width:4px,color:#fff
classDef default fill:#a34,stroke:#000,stroke-width:4px,color:#fff
hello --> default
`,
{
look: 'handDrawn',
handDrawnSeed: 0,
handDrawnSeed: 1,
htmlLabels: true,
flowchart: { htmlLabels: true },
securityLevel: 'loose',
@@ -1051,7 +1051,7 @@ graph TD
`,
{
look: 'handDrawn',
handDrawnSeed: 0,
handDrawnSeed: 1,
flowchart: { htmlLabels: true },
securityLevel: 'loose',
}

21
cypress/platform/knsv2.html
View File

@@ -84,17 +84,20 @@
<div class="flex">
<pre id="diagram" class="mermaid">
---
config:
look: handDrawn
layout: elk
elk:
title: hello2
config:
look: handDrawn
layout: elk
elk:
nodePlacementStrategy: BRANDES_KOEPF
---
flowchart TB
%% A --> C
B -- sdf sdf --> C{"Evaluate"}
C --> n4["salkdfjh akljd lkasdjf lkashj lksjadf klasdh"]
C --> F
flowchart LR
A[Start] --Some text--> B(Continue)
B --> C{Evaluate}
C -- One --> D[Option 1]
C -- Two --> E[Option 2]
C -- Three --> F[fa:fa-car Option 3]
</pre

6
docs/config/setup/interfaces/mermaid.LayoutLoaderDefinition.md
View File

@@ -16,7 +16,7 @@
#### Defined in
[packages/mermaid/src/rendering-util/render.ts:25](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L25)
[packages/mermaid/src/rendering-util/render.ts:24](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L24)
---
@@ -26,7 +26,7 @@
#### Defined in
[packages/mermaid/src/rendering-util/render.ts:24](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L24)
[packages/mermaid/src/rendering-util/render.ts:23](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L23)
---
@@ -36,4 +36,4 @@
#### Defined in
[packages/mermaid/src/rendering-util/render.ts:23](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L23)
[packages/mermaid/src/rendering-util/render.ts:22](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L22)

4
packages/mermaid-layout-elk/src/render.ts
View File

@@ -6,7 +6,6 @@ import { type TreeData, findCommonAncestor } from './find-common-ancestor.js';
export const render = async (
data4Layout: LayoutData,
svg: SVG,
element: any,
{
common,
getConfig,
@@ -377,6 +376,7 @@ export const render = async (
// calculate start and end points of the edge, note that the source and target
// can be modified for shapes that have ports
// @ts-ignore TODO: fix this
const { source, target, sourceId, targetId } = getEdgeStartEndPoint(edge, dir);
log.debug('abc78 source and target', source, target);
// Add the edge to the graph
@@ -739,7 +739,7 @@ export const render = async (
// @ts-ignore - ELK is not typed
const elk = new ELK();
const element = svg.select('g');
// Add the arrowheads to the svg
insertMarkers(element, data4Layout.markers, data4Layout.type, data4Layout.diagramId);

8
packages/mermaid/src/diagrams/flowchart/flowRenderer-v3-unified.ts
View File

@@ -2,7 +2,7 @@ import { select } from 'd3';
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/insertElementsForSize.js';
import { getDiagramElement } from '../../rendering-util/insertElementsForSize.js';
import { getRegisteredLayoutAlgorithm, render } from '../../rendering-util/render.js';
import { setupViewPortForSVG } from '../../rendering-util/setupViewPortForSVG.js';
import type { LayoutData } from '../../rendering-util/types.js';
@@ -35,8 +35,8 @@ export const draw = async function (text: string, id: string, _version: string,
log.debug('Before getData: ');
const data4Layout = diag.db.getData() as LayoutData;
log.debug('Data: ', data4Layout);
// Create the root SVG - the element is the div containing the SVG element
const { element, svg } = getDiagramElements(id, securityLevel);
// Create the root SVG
const svg = getDiagramElement(id, securityLevel);
const direction = getDirection();
data4Layout.type = diag.type;
@@ -53,7 +53,7 @@ export const draw = async function (text: string, id: string, _version: string,
data4Layout.diagramId = id;
log.debug('REF1:', data4Layout);
await render(data4Layout, svg, element);
await render(data4Layout, svg);
const padding = data4Layout.config.flowchart?.padding ?? 8;
utils.insertTitle(
svg,

8
packages/mermaid/src/diagrams/state/stateRenderer-v3-unified.ts
View File

@@ -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/insertElementsForSize.js';
import { getDiagramElement } 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';
@@ -55,7 +55,7 @@ export const draw = async function (text: string, id: string, _version: string,
const data4Layout = diag.db.getData() as LayoutData;
// Create the root SVG - the element is the div containing the SVG element
const { element, svg } = getDiagramElements(id, securityLevel);
const svg = getDiagramElement(id, securityLevel);
data4Layout.type = diag.type;
data4Layout.layoutAlgorithm = layout;
@@ -67,10 +67,10 @@ export const draw = async function (text: string, id: string, _version: string,
data4Layout.markers = ['barb'];
data4Layout.diagramId = id;
// console.log('REF1:', data4Layout);
await render(data4Layout, svg, element);
await render(data4Layout, svg);
const padding = 8;
utils.insertTitle(
element,
svg,
'statediagramTitleText',
conf?.titleTopMargin ?? 25,
diag.db.getDiagramTitle()

6
packages/mermaid/src/rendering-util/insertElementsForSize.js
View File

@@ -1,7 +1,7 @@
import { select } from 'd3';
import { insertNode } from '../dagre-wrapper/nodes.js';
export const getDiagramElements = (id, securityLevel) => {
export const getDiagramElement = (id, securityLevel) => {
let sandboxElement;
if (securityLevel === 'sandbox') {
sandboxElement = select('#i' + id);
@@ -15,9 +15,7 @@ export const getDiagramElements = (id, securityLevel) => {
// Run the renderer. This is what draws the final graph.
// @ts-ignore todo: fix this
const element = root.select('#' + id + ' g');
return { svg, element };
return svg;
};
export function insertElementsForSize(el, data) {

4
packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js
View File

@@ -268,7 +268,7 @@ const recursiveRender = async (_elem, graph, diagramType, id, parentCluster, sit
return { elem, diff };
};
export const render = async (data4Layout, svg, element) => {
export const render = async (data4Layout, svg) => {
const graph = new graphlib.Graph({
multigraph: true,
compound: true,
@@ -289,7 +289,7 @@ export const render = async (data4Layout, svg, element) => {
.setDefaultEdgeLabel(function () {
return {};
});
const element = svg.select('g');
insertMarkers(element, data4Layout.markers, data4Layout.type, data4Layout.diagramId);
clearNodes();
clearEdges();

5
packages/mermaid/src/rendering-util/render.ts
View File

@@ -12,7 +12,6 @@ export interface LayoutAlgorithm {
render(
layoutData: LayoutData,
svg: SVG,
element: any,
helpers: InternalHelpers,
options?: RenderOptions
): Promise<void>;
@@ -45,14 +44,14 @@ const registerDefaultLayoutLoaders = () => {
registerDefaultLayoutLoaders();
export const render = async (data4Layout: LayoutData, svg: SVG, element: any) => {
export const render = async (data4Layout: LayoutData, svg: SVG) => {
if (!(data4Layout.layoutAlgorithm in layoutAlgorithms)) {
throw new Error(`Unknown layout algorithm: ${data4Layout.layoutAlgorithm}`);
}
const layoutDefinition = layoutAlgorithms[data4Layout.layoutAlgorithm];
const layoutRenderer = await layoutDefinition.loader();
return layoutRenderer.render(data4Layout, svg, element, internalHelpers, {
return layoutRenderer.render(data4Layout, svg, internalHelpers, {
algorithm: layoutDefinition.algorithm,
});
};