mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-09-17 06:20:07 +02:00
fix: adjust mindmap circle padding to ensure argos donot break
on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
This commit is contained in:
@@ -223,7 +223,7 @@ export class MindmapDB {
|
|||||||
const getShapeFromType = (type: number) => {
|
const getShapeFromType = (type: number) => {
|
||||||
switch (type) {
|
switch (type) {
|
||||||
case nodeType.CIRCLE:
|
case nodeType.CIRCLE:
|
||||||
return 'circle';
|
return 'mindmap-circle';
|
||||||
case nodeType.RECT:
|
case nodeType.RECT:
|
||||||
return 'rect';
|
return 'rect';
|
||||||
case nodeType.ROUNDED_RECT:
|
case nodeType.ROUNDED_RECT:
|
||||||
|
@@ -64,6 +64,7 @@ import { kanbanItem } from './shapes/kanbanItem.js';
|
|||||||
import { bang } from './shapes/bang.js';
|
import { bang } from './shapes/bang.js';
|
||||||
import { cloud } from './shapes/cloud.js';
|
import { cloud } from './shapes/cloud.js';
|
||||||
import { defaultMindmapNode } from './shapes/defaultMindmapNode.js';
|
import { defaultMindmapNode } from './shapes/defaultMindmapNode.js';
|
||||||
|
import { mindmapCircle } from './shapes/mindmapCircle.js';
|
||||||
|
|
||||||
type ShapeHandler = <T extends SVGGraphicsElement>(
|
type ShapeHandler = <T extends SVGGraphicsElement>(
|
||||||
parent: D3Selection<T>,
|
parent: D3Selection<T>,
|
||||||
@@ -154,6 +155,14 @@ export const shapesDefs = [
|
|||||||
aliases: ['default-mindmap', 'defaultMindmapNode'],
|
aliases: ['default-mindmap', 'defaultMindmapNode'],
|
||||||
handler: defaultMindmapNode,
|
handler: defaultMindmapNode,
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
semanticName: 'Mindmap Circle',
|
||||||
|
name: 'mindmapCircle',
|
||||||
|
shortName: 'mindmap-circle',
|
||||||
|
description: 'mindmapCircle',
|
||||||
|
aliases: ['mindmap-circle'],
|
||||||
|
handler: mindmapCircle,
|
||||||
|
},
|
||||||
{
|
{
|
||||||
semanticName: 'Cloud',
|
semanticName: 'Cloud',
|
||||||
name: 'Cloud',
|
name: 'Cloud',
|
||||||
|
@@ -2,16 +2,20 @@ import rough from 'roughjs';
|
|||||||
import { log } from '../../../logger.js';
|
import { log } from '../../../logger.js';
|
||||||
import type { Bounds, D3Selection, Point } from '../../../types.js';
|
import type { Bounds, D3Selection, Point } from '../../../types.js';
|
||||||
import { handleUndefinedAttr } from '../../../utils.js';
|
import { handleUndefinedAttr } from '../../../utils.js';
|
||||||
import type { Node } from '../../types.js';
|
import type { MindmapOptions, Node, ShapeRenderOptions } from '../../types.js';
|
||||||
import intersect from '../intersect/index.js';
|
import intersect from '../intersect/index.js';
|
||||||
import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
|
import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
|
||||||
import { getNodeClasses, labelHelper, updateNodeBounds } from './util.js';
|
import { getNodeClasses, labelHelper, updateNodeBounds } from './util.js';
|
||||||
|
|
||||||
export async function circle<T extends SVGGraphicsElement>(parent: D3Selection<T>, node: Node) {
|
export async function circle<T extends SVGGraphicsElement>(
|
||||||
|
parent: D3Selection<T>,
|
||||||
|
node: Node,
|
||||||
|
options?: MindmapOptions | ShapeRenderOptions
|
||||||
|
) {
|
||||||
const { labelStyles, nodeStyles } = styles2String(node);
|
const { labelStyles, nodeStyles } = styles2String(node);
|
||||||
node.labelStyle = labelStyles;
|
node.labelStyle = labelStyles;
|
||||||
const { shapeSvg, bbox, halfPadding } = await labelHelper(parent, node, getNodeClasses(node));
|
const { shapeSvg, bbox, halfPadding } = await labelHelper(parent, node, getNodeClasses(node));
|
||||||
const padding = node.padding ?? halfPadding;
|
const padding = options?.padding ?? halfPadding;
|
||||||
const radius = bbox.width / 2 + padding;
|
const radius = bbox.width / 2 + padding;
|
||||||
let circleElem;
|
let circleElem;
|
||||||
const { cssStyles } = node;
|
const { cssStyles } = node;
|
||||||
|
@@ -0,0 +1,13 @@
|
|||||||
|
import { circle } from './circle.js';
|
||||||
|
import type { Node, MindmapOptions } from '../../types.js';
|
||||||
|
import type { D3Selection } from '../../../types.js';
|
||||||
|
|
||||||
|
export async function mindmapCircle<T extends SVGGraphicsElement>(
|
||||||
|
parent: D3Selection<T>,
|
||||||
|
node: Node
|
||||||
|
) {
|
||||||
|
const options = {
|
||||||
|
padding: node.padding ?? 0,
|
||||||
|
} as MindmapOptions;
|
||||||
|
return circle(parent, node, options);
|
||||||
|
}
|
@@ -171,6 +171,10 @@ export interface RectOptions {
|
|||||||
classes: string;
|
classes: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export interface MindmapOptions {
|
||||||
|
padding: number;
|
||||||
|
}
|
||||||
|
|
||||||
// Extending the Node interface for specific types if needed
|
// Extending the Node interface for specific types if needed
|
||||||
export type ClassDiagramNode = Node & {
|
export type ClassDiagramNode = Node & {
|
||||||
memberData: any; // Specific property for class diagram nodes
|
memberData: any; // Specific property for class diagram nodes
|
||||||
@@ -206,6 +210,7 @@ export interface ShapeRenderOptions {
|
|||||||
config: MermaidConfig;
|
config: MermaidConfig;
|
||||||
/** Some shapes render differently if a diagram has a direction `LR` */
|
/** Some shapes render differently if a diagram has a direction `LR` */
|
||||||
dir?: Node['dir'];
|
dir?: Node['dir'];
|
||||||
|
padding?: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
export type KanbanNode = Node & {
|
export type KanbanNode = Node & {
|
||||||
|
Reference in New Issue
Block a user