GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-14 06:43:25 +08:00
Code Issues Projects Releases Wiki Activity

Add styling compatibility to shape

Browse Source
This commit is contained in:
yari-dewalt 2024-08-28 11:00:31 -07:00
parent 20a58d6dbb
commit 9ac20a5cb8
1 changed files with 9 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
packages/mermaid/src/rendering-util/rendering-elements/shapes/classBox.ts
View File

@ -1,21 +1,18 @@
import { getNodeClasses } from './util.js'; import { getNodeClasses, updateNodeBounds } from './util.js';
import { getConfig } from '$root/diagram-api/diagramAPI.js'; import { getConfig } from '$root/diagram-api/diagramAPI.js';
import { createText } from '../../createText.js'; import { createText } from '../../createText.js';
import { select } from 'd3'; import { select } from 'd3';
import type { Node } from '$root/rendering-util/types.d.ts'; import type { Node } from '$root/rendering-util/types.d.ts';
import { evaluate } from '$root/diagrams/common/common.js'; import { evaluate } from '$root/diagrams/common/common.js';
import { calculateTextDimensions, calculateTextWidth } from '$root/utils.js'; import { calculateTextDimensions, calculateTextWidth } from '$root/utils.js';
import { styles2String } from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
export const classBox = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => { export const classBox = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => {
const { labelStyles, nodeStyles } = styles2String(node); const styles = node.styles.join(';');
node.labelStyle = labelStyles;
const mainGroup = parent const mainGroup = parent
.insert('g') .insert('g')
.attr('class', getNodeClasses(node)) .attr('class', getNodeClasses(node)) // 'styleClass'
.attr('style', nodeStyles) .attr('id', node.domId ?? node.id);
.attr('id', node.domId || node.id);
let labelGroup = null; let labelGroup = null;
let membersGroup = null; let membersGroup = null;
let methodsGroup = null; let methodsGroup = null;
@ -25,12 +22,11 @@ export const classBox = async (parent: SVGAElement, node: Node): Promise<SVGAEle
const config = getConfig(); const config = getConfig();
const PADDING = config.class.padding; const PADDING = config.class!.padding;
const GAP = PADDING; const GAP = PADDING;
if (node.label) { if (node.label) {
labelGroup = mainGroup.insert('g').attr('class', 'label-group'); labelGroup = mainGroup.insert('g').attr('class', 'label-group');
// TODO: Add Padding
await helper(labelGroup, node, 0); await helper(labelGroup, node, 0);
const labelGroupBBox = labelGroup.node().getBBox(); const labelGroupBBox = labelGroup.node().getBBox();
labelGroupHeight = labelGroupBBox.height; labelGroupHeight = labelGroupBBox.height;
@ -54,7 +50,7 @@ export const classBox = async (parent: SVGAElement, node: Node): Promise<SVGAEle
await helper(methodsGroup, method, methodsYOffset); await helper(methodsGroup, method, methodsYOffset);
methodsYOffset += calculateTextDimensions(method.text, config).height; methodsYOffset += calculateTextDimensions(method.text, config).height;
} }
// TODO: Update transform
methodsGroup.attr( methodsGroup.attr(
'transform', 'transform',
`translate(0, ${labelGroupHeight + (membersGroupHeight ? membersGroupHeight + GAP * 5 : GAP * 3)})` `translate(0, ${labelGroupHeight + (membersGroupHeight ? membersGroupHeight + GAP * 5 : GAP * 3)})`
@ -72,8 +68,7 @@ export const classBox = async (parent: SVGAElement, node: Node): Promise<SVGAEle
// Insert the rectangle around the main group // Insert the rectangle around the main group
mainGroup mainGroup
.insert('rect', ':first-child') .insert('rect', ':first-child')
.attr('class', 'basic label-container') .attr('style', styles)
.attr('style', nodeStyles)
.attr('data-id', 'abc') .attr('data-id', 'abc')
.attr('data-et', 'node') .attr('data-et', 'node')
.attr('x', mainGroupBBox.x - PADDING) .attr('x', mainGroupBBox.x - PADDING)
@ -82,7 +77,7 @@ export const classBox = async (parent: SVGAElement, node: Node): Promise<SVGAEle
.attr('height', mainGroupBBox.height + 2 * PADDING); .attr('height', mainGroupBBox.height + 2 * PADDING);
// Render separating lines. // Render separating lines.
if (node.label) { if (node.label && (node.members.length > 0 || node.methods.length > 0)) {
mainGroup mainGroup
.insert('line') .insert('line')
.attr('x1', 0 - PADDING) .attr('x1', 0 - PADDING)
@ -102,6 +97,7 @@ export const classBox = async (parent: SVGAElement, node: Node): Promise<SVGAEle
.attr('class', 'divider'); .attr('class', 'divider');
} }
updateNodeBounds(node, mainGroup);
return mainGroup; return mainGroup;
}; };