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

Fix for icon borders

Browse Source
This commit is contained in:
Knut Sveidqvist
2024-10-29 14:51:55 +01:00
parent 9168d5d1f4
commit 124d2f72dd
5 changed files with 18 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/mermaid/src/diagrams/kanban/kanbanDb.ts
View File

@@ -84,6 +84,7 @@ const getData = function () {
shape: 'kanbanItem', shape: 'kanbanItem',
level: item.level, level: item.level,
rx: 5, rx: 5,
ry: 5,
cssStyles: ['text-align: left'], cssStyles: ['text-align: left'],
} satisfies KanbanNode; } satisfies KanbanNode;
_nodes.push(childNode); _nodes.push(childNode);

6
packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts
View File

@@ -26,16 +26,18 @@ export async function iconCircle<T extends SVGGraphicsElement>(
const topLabel = node.pos === 't'; const topLabel = node.pos === 't';
const { nodeBorder } = themeVariables; const { nodeBorder, mainBkg } = themeVariables;
const { stylesMap } = compileStyles(node); const { stylesMap } = compileStyles(node);
// @ts-expect-error -- Passing a D3.Selection seems to work for some reason // @ts-expect-error -- Passing a D3.Selection seems to work for some reason
const rc = rough.svg(shapeSvg); const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, { stroke: 'transparent' }); const options = userNodeOverrides(node, {});
if (node.look !== 'handDrawn') { if (node.look !== 'handDrawn') {
options.roughness = 0; options.roughness = 0;
options.fillStyle = 'solid'; options.fillStyle = 'solid';
} }
const stroke = stylesMap.get('stroke');
options.stroke = stroke ? stylesMap.get('stroke') : mainBkg;
const iconElem = shapeSvg.append('g'); const iconElem = shapeSvg.append('g');
if (node.icon) { if (node.icon) {

8
packages/mermaid/src/rendering-util/rendering-elements/shapes/iconRounded.ts
View File

@@ -30,7 +30,7 @@ export async function iconRounded<T extends SVGGraphicsElement>(
const height = iconSize + halfPadding * 2; const height = iconSize + halfPadding * 2;
const width = iconSize + halfPadding * 2; const width = iconSize + halfPadding * 2;
const { nodeBorder } = themeVariables; const { nodeBorder, mainBkg } = themeVariables;
const { stylesMap } = compileStyles(node); const { stylesMap } = compileStyles(node);
const x = -width / 2; const x = -width / 2;
@@ -40,12 +40,14 @@ export async function iconRounded<T extends SVGGraphicsElement>(
// @ts-expect-error -- Passing a D3.Selection seems to work for some reason // @ts-expect-error -- Passing a D3.Selection seems to work for some reason
const rc = rough.svg(shapeSvg); const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, { stroke: 'transparent' }); const options = userNodeOverrides(node, {});
if (node.look !== 'handDrawn') { if (node.look !== 'handDrawn') {
options.roughness = 0; options.roughness = 0;
options.fillStyle = 'solid'; 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); const iconNode = rc.path(createRoundedRectPathD(x, y, width, height, 5), options);
@@ -58,7 +60,7 @@ export async function iconRounded<T extends SVGGraphicsElement>(
stroke: 'none', 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); const outerShape = shapeSvg.insert(() => outerNode);
if (node.icon) { if (node.icon) {

9
packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts
View File

@@ -3,6 +3,7 @@ import { log } from '../../../logger.js';
import { getIconSVG } from '../../icons.js'; import { getIconSVG } from '../../icons.js';
import type { Node, ShapeRenderOptions } from '../../types.js'; import type { Node, ShapeRenderOptions } from '../../types.js';
import intersect from '../intersect/index.js'; import intersect from '../intersect/index.js';
import { createRoundedRectPathD } from './roundedRectPath.js';
import { compileStyles, styles2String, userNodeOverrides } from './handDrawnShapeStyles.js'; import { compileStyles, styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import { labelHelper, updateNodeBounds } from './util.js'; import { labelHelper, updateNodeBounds } from './util.js';
import type { D3Selection } from '../../../types.js'; import type { D3Selection } from '../../../types.js';
@@ -29,7 +30,7 @@ export async function iconSquare<T extends SVGGraphicsElement>(
const height = iconSize + halfPadding * 2; const height = iconSize + halfPadding * 2;
const width = iconSize + halfPadding * 2; const width = iconSize + halfPadding * 2;
const { nodeBorder } = themeVariables; const { nodeBorder, mainBkg } = themeVariables;
const { stylesMap } = compileStyles(node); const { stylesMap } = compileStyles(node);
const x = -width / 2; const x = -width / 2;
@@ -39,14 +40,16 @@ export async function iconSquare<T extends SVGGraphicsElement>(
// @ts-expect-error -- Passing a D3.Selection seems to work for some reason // @ts-expect-error -- Passing a D3.Selection seems to work for some reason
const rc = rough.svg(shapeSvg); const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, { stroke: 'transparent' }); const options = userNodeOverrides(node, {});
if (node.look !== 'handDrawn') { if (node.look !== 'handDrawn') {
options.roughness = 0; options.roughness = 0;
options.fillStyle = 'solid'; 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 outerWidth = Math.max(width, bbox.width);
const outerHeight = height + bbox.height + labelPadding; const outerHeight = height + bbox.height + labelPadding;

2
packages/mermaid/src/rendering-util/types.ts
View File

@@ -161,4 +161,6 @@ export interface KanbanNode extends Node {
assigned?: string; assigned?: string;
icon?: string; icon?: string;
level: number; level: number;
rx: number;
ry: number;
} }