2020-03-29 14:20:49 +02:00
|
|
|
import createLabel from '../createLabel';
|
2020-05-27 19:38:30 +02:00
|
|
|
import { getConfig } from '../../config';
|
2021-10-21 19:37:48 +02:00
|
|
|
import { decodeEntities } from '../../mermaidAPI';
|
2020-05-27 19:38:30 +02:00
|
|
|
import { select } from 'd3';
|
2021-10-21 19:37:48 +02:00
|
|
|
import { evaluate, sanitizeText } from '../../diagrams/common/common';
|
2020-05-27 20:41:59 +02:00
|
|
|
export const labelHelper = (parent, node, _classes, isNode) => {
|
2020-03-29 14:20:49 +02:00
|
|
|
let classes;
|
|
|
|
if (!_classes) {
|
|
|
|
classes = 'node default';
|
|
|
|
} else {
|
|
|
|
classes = _classes;
|
|
|
|
}
|
|
|
|
// Add outer g element
|
|
|
|
const shapeSvg = parent
|
|
|
|
.insert('g')
|
|
|
|
.attr('class', classes)
|
2020-09-10 20:58:16 +02:00
|
|
|
.attr('id', node.domId || node.id);
|
2020-03-29 14:20:49 +02:00
|
|
|
|
|
|
|
// Create the label and insert it after the rect
|
2021-07-15 11:35:12 +02:00
|
|
|
const label = shapeSvg.insert('g').attr('class', 'label').attr('style', node.labelStyle);
|
2020-03-29 14:20:49 +02:00
|
|
|
|
2022-10-02 20:32:50 +02:00
|
|
|
// Replace labelText with default value if undefined
|
|
|
|
let labelText;
|
|
|
|
if (typeof node.labelText === 'undefined') {
|
|
|
|
labelText = '';
|
|
|
|
} else {
|
|
|
|
labelText = typeof node.labelText === 'string' ? node.labelText : node.labelText[0];
|
|
|
|
}
|
2021-11-30 20:28:51 +01:00
|
|
|
|
2020-05-27 20:41:59 +02:00
|
|
|
const text = label
|
|
|
|
.node()
|
2021-10-21 19:37:48 +02:00
|
|
|
.appendChild(
|
|
|
|
createLabel(
|
2021-11-30 20:28:51 +01:00
|
|
|
sanitizeText(decodeEntities(labelText), getConfig()),
|
2021-10-21 19:37:48 +02:00
|
|
|
node.labelStyle,
|
|
|
|
false,
|
|
|
|
isNode
|
|
|
|
)
|
|
|
|
);
|
2020-03-29 14:20:49 +02:00
|
|
|
|
|
|
|
// Get the size of the label
|
2020-05-27 19:38:30 +02:00
|
|
|
let bbox = text.getBBox();
|
|
|
|
|
2021-06-03 20:47:24 +02:00
|
|
|
if (evaluate(getConfig().flowchart.htmlLabels)) {
|
2020-05-27 19:38:30 +02:00
|
|
|
const div = text.children[0];
|
|
|
|
const dv = select(text);
|
|
|
|
bbox = div.getBoundingClientRect();
|
|
|
|
dv.attr('width', bbox.width);
|
|
|
|
dv.attr('height', bbox.height);
|
|
|
|
}
|
2020-03-29 14:20:49 +02:00
|
|
|
|
|
|
|
const halfPadding = node.padding / 2;
|
|
|
|
|
|
|
|
// Center the label
|
|
|
|
label.attr('transform', 'translate(' + -bbox.width / 2 + ', ' + -bbox.height / 2 + ')');
|
|
|
|
|
|
|
|
return { shapeSvg, bbox, halfPadding, label };
|
|
|
|
};
|
|
|
|
|
|
|
|
export const updateNodeBounds = (node, element) => {
|
|
|
|
const bbox = element.node().getBBox();
|
|
|
|
node.width = bbox.width;
|
|
|
|
node.height = bbox.height;
|
|
|
|
};
|
|
|
|
|
2021-11-08 22:06:24 +01:00
|
|
|
/**
|
|
|
|
* @param parent
|
|
|
|
* @param w
|
|
|
|
* @param h
|
|
|
|
* @param points
|
|
|
|
*/
|
2020-03-29 14:20:49 +02:00
|
|
|
export function insertPolygonShape(parent, w, h, points) {
|
|
|
|
return parent
|
|
|
|
.insert('polygon', ':first-child')
|
|
|
|
.attr(
|
|
|
|
'points',
|
|
|
|
points
|
2021-07-15 11:35:12 +02:00
|
|
|
.map(function (d) {
|
2020-03-29 14:20:49 +02:00
|
|
|
return d.x + ',' + d.y;
|
|
|
|
})
|
|
|
|
.join(' ')
|
|
|
|
)
|
2020-05-06 18:51:12 +02:00
|
|
|
.attr('class', 'label-container')
|
2020-03-29 14:20:49 +02:00
|
|
|
.attr('transform', 'translate(' + -w / 2 + ',' + h / 2 + ')');
|
|
|
|
}
|