mermaid
Version:
Markdown-ish syntax for generating flowcharts, mindmaps, sequence diagrams, class diagrams, gantt charts, git graphs and more.
8 lines (7 loc) • 3.99 kB
Source Map (JSON)
{
"version": 3,
"sources": ["../../../src/rendering-util/insertLookDefs.ts"],
"sourcesContent": ["import type { MermaidConfig } from '../config.type.js';\nimport type { SVG } from '../diagram-api/types.js';\n\n/**\n * Append the `<defs>` that the look-specific stylesheet rules point at.\n *\n * `styles.ts` emits, for `look: neo`, declarations of the form\n * `stroke: url(#<svgId>-gradient)` and `filter: url(#<svgId>-drop-shadow)`. An `url(#\u2026)`\n * paint that resolves to nothing is painted as **none**, not as a fallback colour \u2014 so a\n * diagram that carries `data-look=\"neo\"` without these definitions loses its borders\n * entirely rather than degrading to a plain stroke.\n *\n * Every diagram going through `rendering-util/render.ts` gets them from there. Block\n * diagrams run their own render loop and so have to ask for them; extracted here rather\n * than duplicated so the two cannot drift into producing different gradients.\n *\n * Idempotent by id: calling it twice on one svg would append duplicate definitions, so\n * call it once per render.\n *\n * @param svg - The diagram's root `svg` selection. Its `id` scopes every definition, so\n * several diagrams on one page do not collide.\n * @param config - The merged config, read for `theme` and `themeVariables`.\n */\nexport const insertLookDefs = (svg: SVG, config: MermaidConfig): void => {\n const { theme, themeVariables } = config;\n const { useGradient, gradientStart, gradientStop } = themeVariables ?? {};\n const svgId = svg.attr('id');\n // The shadow is tinted against the background rather than always black: on a dark theme\n // a black shadow is invisible.\n const floodColor = theme?.includes('dark') ? '#FFFFFF' : '#000000';\n\n const dropShadow = (id: string, size: string, offset: string) =>\n svg\n .append('defs')\n .append('filter')\n .attr('id', id)\n .attr('height', size)\n .attr('width', size)\n .append('feDropShadow')\n .attr('dx', offset)\n .attr('dy', offset)\n .attr('stdDeviation', 0)\n .attr('flood-opacity', '0.06')\n .attr('flood-color', floodColor);\n\n dropShadow(`${svgId}-drop-shadow`, '130%', '4');\n dropShadow(`${svgId}-drop-shadow-small`, '150%', '2');\n\n if (!useGradient) {\n return;\n }\n\n const gradient = svg\n .append('linearGradient')\n .attr('id', `${svgId}-gradient`)\n .attr('gradientUnits', 'objectBoundingBox')\n .attr('x1', '0%')\n .attr('y1', '0%')\n .attr('x2', '100%')\n .attr('y2', '0%');\n\n gradient\n .append('svg:stop')\n .attr('offset', '0%')\n .attr('stop-color', gradientStart)\n .attr('stop-opacity', 1);\n\n gradient\n .append('svg:stop')\n .attr('offset', '100%')\n .attr('stop-color', gradientStop)\n .attr('stop-opacity', 1);\n};\n"],
"mappings": "yCAuBO,IAAMA,EAAiBC,EAAA,CAACC,EAAUC,IAAgC,CACvE,GAAM,CAAE,MAAAC,EAAO,eAAAC,CAAe,EAAIF,EAC5B,CAAE,YAAAG,EAAa,cAAAC,EAAe,aAAAC,CAAa,EAAIH,GAAkB,CAAC,EAClEI,EAAQP,EAAI,KAAK,IAAI,EAGrBQ,EAAaN,GAAO,SAAS,MAAM,EAAI,UAAY,UAEnDO,EAAaV,EAAA,CAACW,EAAYC,EAAcC,IAC5CZ,EACG,OAAO,MAAM,EACb,OAAO,QAAQ,EACf,KAAK,KAAMU,CAAE,EACb,KAAK,SAAUC,CAAI,EACnB,KAAK,QAASA,CAAI,EAClB,OAAO,cAAc,EACrB,KAAK,KAAMC,CAAM,EACjB,KAAK,KAAMA,CAAM,EACjB,KAAK,eAAgB,CAAC,EACtB,KAAK,gBAAiB,MAAM,EAC5B,KAAK,cAAeJ,CAAU,EAZhB,cAiBnB,GAHAC,EAAW,GAAGF,CAAK,eAAgB,OAAQ,GAAG,EAC9CE,EAAW,GAAGF,CAAK,qBAAsB,OAAQ,GAAG,EAEhD,CAACH,EACH,OAGF,IAAMS,EAAWb,EACd,OAAO,gBAAgB,EACvB,KAAK,KAAM,GAAGO,CAAK,WAAW,EAC9B,KAAK,gBAAiB,mBAAmB,EACzC,KAAK,KAAM,IAAI,EACf,KAAK,KAAM,IAAI,EACf,KAAK,KAAM,MAAM,EACjB,KAAK,KAAM,IAAI,EAElBM,EACG,OAAO,UAAU,EACjB,KAAK,SAAU,IAAI,EACnB,KAAK,aAAcR,CAAa,EAChC,KAAK,eAAgB,CAAC,EAEzBQ,EACG,OAAO,UAAU,EACjB,KAAK,SAAU,MAAM,EACrB,KAAK,aAAcP,CAAY,EAC/B,KAAK,eAAgB,CAAC,CAC3B,EAjD8B",
"names": ["insertLookDefs", "__name", "svg", "config", "theme", "themeVariables", "useGradient", "gradientStart", "gradientStop", "svgId", "floodColor", "dropShadow", "id", "size", "offset", "gradient"]
}