import { ELK_BUNDLE, ELK_ROUTE, FONT_FACES, FONT_ROUTE, MERMAID_BUNDLE, MERMAID_ROUTE, } from "#configuration/constants/diagram.constants"; import { themeVariables } from "#core/converters/diagram.converter"; const fontFaceRules = function fontFaceRules(): string { return FONT_FACES.map( ([family, weight, file]) => `@font-face{font-family:"${family}";font-weight:${weight};src:url("${FONT_ROUTE}${file}") format("woff2");}`, ).join(""); }; const fontLoads = function fontLoads(): string { return FONT_FACES.map(([family, weight]) => `document.fonts.load('${weight} 16px "${family}"')`).join(","); }; export const stageMarkup = function stageMarkup(tokens: ReadonlyMap): string { const config = JSON.stringify({ elk: { cycleBreakingStrategy: "MODEL_ORDER", nodePlacementStrategy: "BRANDES_KOEPF" }, flowchart: { curve: "basis", htmlLabels: false, useMaxWidth: false }, fontFamily: tokens.get("--font-family-base"), fontSize: 14, layout: "elk", startOnLoad: false, theme: "base", themeVariables: themeVariables(tokens), }); return [ 'diagram stage', ``, '", ].join(""); };