From 124d2f72dd20e3441aeaa5cf1cb64947d95a3590 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Tue, 29 Oct 2024 14:51:55 +0100 Subject: [PATCH] Fix for icon borders --- packages/mermaid/src/diagrams/kanban/kanbanDb.ts | 1 + .../rendering-elements/shapes/iconCircle.ts | 6 ++++-- .../rendering-elements/shapes/iconRounded.ts | 8 +++++--- .../rendering-elements/shapes/iconSquare.ts | 9 ++++++--- packages/mermaid/src/rendering-util/types.ts | 2 ++ 5 files changed, 18 insertions(+), 8 deletions(-) diff --git a/packages/mermaid/src/diagrams/kanban/kanbanDb.ts b/packages/mermaid/src/diagrams/kanban/kanbanDb.ts index e6f57ef79..260b1d32a 100644 --- a/packages/mermaid/src/diagrams/kanban/kanbanDb.ts +++ b/packages/mermaid/src/diagrams/kanban/kanbanDb.ts @@ -84,6 +84,7 @@ const getData = function () { shape: 'kanbanItem', level: item.level, rx: 5, + ry: 5, cssStyles: ['text-align: left'], } satisfies KanbanNode; _nodes.push(childNode); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts index 313e5c7af..785a3d219 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts @@ -26,16 +26,18 @@ export async function iconCircle( const topLabel = node.pos === 't'; - const { nodeBorder } = themeVariables; + const { nodeBorder, mainBkg } = themeVariables; const { stylesMap } = compileStyles(node); // @ts-expect-error -- Passing a D3.Selection seems to work for some reason const rc = rough.svg(shapeSvg); - const options = userNodeOverrides(node, { stroke: 'transparent' }); + const options = userNodeOverrides(node, {}); if (node.look !== 'handDrawn') { options.roughness = 0; options.fillStyle = 'solid'; } + const stroke = stylesMap.get('stroke'); + options.stroke = stroke ? stylesMap.get('stroke') : mainBkg; const iconElem = shapeSvg.append('g'); if (node.icon) { diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconRounded.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconRounded.ts index ab778de71..cfb13c35c 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconRounded.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconRounded.ts @@ -30,7 +30,7 @@ export async function iconRounded( const height = iconSize + halfPadding * 2; const width = iconSize + halfPadding * 2; - const { nodeBorder } = themeVariables; + const { nodeBorder, mainBkg } = themeVariables; const { stylesMap } = compileStyles(node); const x = -width / 2; @@ -40,12 +40,14 @@ export async function iconRounded( // @ts-expect-error -- Passing a D3.Selection seems to work for some reason const rc = rough.svg(shapeSvg); - const options = userNodeOverrides(node, { stroke: 'transparent' }); + const options = userNodeOverrides(node, {}); if (node.look !== 'handDrawn') { options.roughness = 0; options.fillStyle = 'solid'; } + const stroke = stylesMap.get('stroke'); + options.stroke = stroke ? stylesMap.get('stroke') : mainBkg; const iconNode = rc.path(createRoundedRectPathD(x, y, width, height, 5), options); @@ -58,7 +60,7 @@ export async function iconRounded( stroke: 'none', }); - const iconShape = shapeSvg.insert(() => iconNode, ':first-child'); + const iconShape = shapeSvg.insert(() => iconNode, ':first-child').attr('class', 'icon-shape2'); const outerShape = shapeSvg.insert(() => outerNode); if (node.icon) { diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts index 8cbccb74d..97d5da1d1 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts @@ -3,6 +3,7 @@ import { log } from '../../../logger.js'; import { getIconSVG } from '../../icons.js'; import type { Node, ShapeRenderOptions } from '../../types.js'; import intersect from '../intersect/index.js'; +import { createRoundedRectPathD } from './roundedRectPath.js'; import { compileStyles, styles2String, userNodeOverrides } from './handDrawnShapeStyles.js'; import { labelHelper, updateNodeBounds } from './util.js'; import type { D3Selection } from '../../../types.js'; @@ -29,7 +30,7 @@ export async function iconSquare( const height = iconSize + halfPadding * 2; const width = iconSize + halfPadding * 2; - const { nodeBorder } = themeVariables; + const { nodeBorder, mainBkg } = themeVariables; const { stylesMap } = compileStyles(node); const x = -width / 2; @@ -39,14 +40,16 @@ export async function iconSquare( // @ts-expect-error -- Passing a D3.Selection seems to work for some reason const rc = rough.svg(shapeSvg); - const options = userNodeOverrides(node, { stroke: 'transparent' }); + const options = userNodeOverrides(node, {}); if (node.look !== 'handDrawn') { options.roughness = 0; options.fillStyle = 'solid'; } + const stroke = stylesMap.get('stroke'); + options.stroke = stroke ? stylesMap.get('stroke') : mainBkg; - const iconNode = rc.rectangle(x, y, width, height, options); + const iconNode = rc.path(createRoundedRectPathD(x, y, width, height, 0.1), options); const outerWidth = Math.max(width, bbox.width); const outerHeight = height + bbox.height + labelPadding; diff --git a/packages/mermaid/src/rendering-util/types.ts b/packages/mermaid/src/rendering-util/types.ts index e49218f71..f8e9c31b5 100644 --- a/packages/mermaid/src/rendering-util/types.ts +++ b/packages/mermaid/src/rendering-util/types.ts @@ -161,4 +161,6 @@ export interface KanbanNode extends Node { assigned?: string; icon?: string; level: number; + rx: number; + ry: number; }