Label background fix
This commit is contained in:
parent
bd616e0ef5
commit
5bfe32524d
|
@ -82,6 +82,19 @@ const getStyles = (options: FlowChartStyleOptions) =>
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
/* For html labels only */
|
||||
.labelBkg {
|
||||
background-color: ${options.edgeLabelBackground};
|
||||
background-color: ${options.edgeLabelBackground};
|
||||
opacity: 0.5;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.cluster rect {
|
||||
fill: ${options.clusterBkg};
|
||||
stroke: ${options.clusterBorder};
|
||||
|
|
|
@ -16,9 +16,10 @@ function applyStyle(dom, styleFn) {
|
|||
* @param {any} node
|
||||
* @param width
|
||||
* @param classes
|
||||
* @param addBackground
|
||||
* @returns {SVGForeignObjectElement} Node
|
||||
*/
|
||||
function addHtmlSpan(element, node, width, classes) {
|
||||
function addHtmlSpan(element, node, width, classes, addBackground = false) {
|
||||
const fo = element.append('foreignObject');
|
||||
// const newEl = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');
|
||||
// const newEl = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');
|
||||
|
@ -28,12 +29,15 @@ function addHtmlSpan(element, node, width, classes) {
|
|||
|
||||
const label = node.label;
|
||||
const labelClass = node.isNode ? 'nodeLabel' : 'edgeLabel';
|
||||
const bkgHtml = addBackground ? '<span class="labelBkg"></span>' : '';
|
||||
div.html(
|
||||
`<span class="${labelClass} ${classes}" ` +
|
||||
`<span>
|
||||
${bkgHtml}
|
||||
<span class="${labelClass} ${classes}" ` +
|
||||
(node.labelStyle ? 'style="' + node.labelStyle + '"' : '') +
|
||||
'>' +
|
||||
label +
|
||||
'</span>'
|
||||
'</span></span>'
|
||||
);
|
||||
|
||||
applyStyle(div, node.labelStyle);
|
||||
|
@ -200,7 +204,7 @@ export const createText = (
|
|||
),
|
||||
labelStyle: style.replace('fill:', 'color:'),
|
||||
};
|
||||
let vertexNode = addHtmlSpan(el, node, width, classes);
|
||||
let vertexNode = addHtmlSpan(el, node, width, classes, addSvgBackground);
|
||||
return vertexNode;
|
||||
} else {
|
||||
const structuredText = markdownToLines(text);
|
||||
|
|
Loading…
Reference in New Issue