This commit is contained in:
parent
18d3b3545d
commit
39bdf261c6
|
@ -41,14 +41,14 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="mermaid" style="width: 50%; height: 20%;">
|
<div class="mermaid" style="width: 50%; height: 20%;">
|
||||||
flowchart LR
|
flowchart LR
|
||||||
A{{A}}-->B{{B}};
|
A{{A}}-- apa -->B{{B}};
|
||||||
click A callback "Tooltip"
|
click A callback "Tooltip"
|
||||||
click B "http://www.github.com" "This is a link"
|
click B "http://www.github.com" "This is a link"
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="mermaid" style="width: 50%; height: 20%;">
|
<div class="mermaid" style="width: 50%; height: 20%;">
|
||||||
flowchart LR
|
graph LR
|
||||||
A{{A}}-->B{{B}};
|
A{{A}}--apa-->B{{B}};
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="mermaid2" style="width: 50%; height: 20%;">
|
<div class="mermaid2" style="width: 50%; height: 20%;">
|
||||||
|
@ -264,7 +264,7 @@ stateDiagram-v2
|
||||||
// arrowMarkerAbsolute: true,
|
// arrowMarkerAbsolute: true,
|
||||||
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
|
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
|
||||||
logLevel: 0,
|
logLevel: 0,
|
||||||
flowchart: { curve: 'linear', "htmlLabels": false },
|
flowchart: { curve: 'linear', "htmlLabels": true },
|
||||||
// gantt: { axisFormat: '%m/%d/%Y' },
|
// gantt: { axisFormat: '%m/%d/%Y' },
|
||||||
sequence: { actorMargin: 50, showSequenceNumbers: true },
|
sequence: { actorMargin: 50, showSequenceNumbers: true },
|
||||||
// sequenceDiagram: { actorMargin: 300 } // deprecated
|
// sequenceDiagram: { actorMargin: 300 } // deprecated
|
||||||
|
|
|
@ -1,29 +1,117 @@
|
||||||
const createLabel = (vertexText, style, isTitle) => {
|
import { select } from 'd3';
|
||||||
const svgLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');
|
// let vertexNode;
|
||||||
svgLabel.setAttribute('style', style.replace('color:', 'fill:'));
|
// if (getConfig().flowchart.htmlLabels) {
|
||||||
let rows = [];
|
// // TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that?
|
||||||
if (typeof vertexText === 'string') {
|
// const node = {
|
||||||
rows = vertexText.split(/\\n|\n|<br\s*\/?>/gi);
|
// label: vertexText.replace(/fa[lrsb]?:fa-[\w-]+/g, s => `<i class='${s.replace(':', ' ')}'></i>`)
|
||||||
} else if (Array.isArray(vertexText)) {
|
// };
|
||||||
rows = vertexText;
|
// vertexNode = addHtmlLabel(svg, node).node();
|
||||||
} else {
|
// vertexNode.parentNode.removeChild(vertexNode);
|
||||||
rows = [];
|
// } else {
|
||||||
}
|
// const svgLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');
|
||||||
|
// svgLabel.setAttribute('style', styles.labelStyle.replace('color:', 'fill:'));
|
||||||
|
|
||||||
for (let j = 0; j < rows.length; j++) {
|
// const rows = vertexText.split(common.lineBreakRegex);
|
||||||
const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
|
|
||||||
tspan.setAttributeNS('http://www.w3.org/XML/1998/namespace', 'xml:space', 'preserve');
|
// for (let j = 0; j < rows.length; j++) {
|
||||||
tspan.setAttribute('dy', '1em');
|
// const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
|
||||||
tspan.setAttribute('x', '0');
|
// tspan.setAttributeNS('http://www.w3.org/XML/1998/namespace', 'xml:space', 'preserve');
|
||||||
if (isTitle) {
|
// tspan.setAttribute('dy', '1em');
|
||||||
tspan.setAttribute('class', 'title-row');
|
// tspan.setAttribute('x', '1');
|
||||||
} else {
|
// tspan.textContent = rows[j];
|
||||||
tspan.setAttribute('class', 'row');
|
// svgLabel.appendChild(tspan);
|
||||||
}
|
// }
|
||||||
tspan.textContent = rows[j].trim();
|
// vertexNode = svgLabel;
|
||||||
svgLabel.appendChild(tspan);
|
// }
|
||||||
|
import { getConfig } from '../config';
|
||||||
|
|
||||||
|
function applyStyle(dom, styleFn) {
|
||||||
|
if (styleFn) {
|
||||||
|
dom.attr('style', styleFn);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function addHtmlLabel(node) {
|
||||||
|
// var fo = root.append('foreignObject').attr('width', '100000');
|
||||||
|
|
||||||
|
// var div = fo.append('xhtml:div');
|
||||||
|
// div.attr('xmlns', 'http://www.w3.org/1999/xhtml');
|
||||||
|
|
||||||
|
// var label = node.label;
|
||||||
|
// switch (typeof label) {
|
||||||
|
// case 'function':
|
||||||
|
// div.insert(label);
|
||||||
|
// break;
|
||||||
|
// case 'object':
|
||||||
|
// // Currently we assume this is a DOM object.
|
||||||
|
// div.insert(function() {
|
||||||
|
// return label;
|
||||||
|
// });
|
||||||
|
// break;
|
||||||
|
// default:
|
||||||
|
// div.html(label);
|
||||||
|
// }
|
||||||
|
|
||||||
|
// applyStyle(div, node.labelStyle);
|
||||||
|
// div.style('display', 'inline-block');
|
||||||
|
// // Fix for firefox
|
||||||
|
// div.style('white-space', 'nowrap');
|
||||||
|
|
||||||
|
// var client = div.node().getBoundingClientRect();
|
||||||
|
// fo.attr('width', client.width).attr('height', client.height);
|
||||||
|
const fo = select(document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject'));
|
||||||
|
const div = fo.append('xhtml:div');
|
||||||
|
|
||||||
|
const label = node.label;
|
||||||
|
div.html('<span class="edgeLabel">' + label + '</span>');
|
||||||
|
|
||||||
|
applyStyle(div, node.labelStyle);
|
||||||
|
div.style('display', 'inline-block');
|
||||||
|
// Fix for firefox
|
||||||
|
div.style('white-space', 'nowrap');
|
||||||
|
div.attr('xmlns', 'http://www.w3.org/1999/xhtml');
|
||||||
|
return fo.node();
|
||||||
|
}
|
||||||
|
|
||||||
|
const createLabel = (vertexText, style, isTitle) => {
|
||||||
|
if (getConfig().flowchart.htmlLabels) {
|
||||||
|
// TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that?
|
||||||
|
const node = {
|
||||||
|
label: vertexText.replace(
|
||||||
|
/fa[lrsb]?:fa-[\w-]+/g,
|
||||||
|
s => `<i class='${s.replace(':', ' ')}'></i>`
|
||||||
|
)
|
||||||
|
};
|
||||||
|
let vertexNode = addHtmlLabel(node);
|
||||||
|
// vertexNode.parentNode.removeChild(vertexNode);
|
||||||
|
return vertexNode;
|
||||||
|
} else {
|
||||||
|
const svgLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');
|
||||||
|
svgLabel.setAttribute('style', style.replace('color:', 'fill:'));
|
||||||
|
let rows = [];
|
||||||
|
if (typeof vertexText === 'string') {
|
||||||
|
rows = vertexText.split(/\\n|\n|<br\s*\/?>/gi);
|
||||||
|
} else if (Array.isArray(vertexText)) {
|
||||||
|
rows = vertexText;
|
||||||
|
} else {
|
||||||
|
rows = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
for (let j = 0; j < rows.length; j++) {
|
||||||
|
const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
|
||||||
|
tspan.setAttributeNS('http://www.w3.org/XML/1998/namespace', 'xml:space', 'preserve');
|
||||||
|
tspan.setAttribute('dy', '1em');
|
||||||
|
tspan.setAttribute('x', '0');
|
||||||
|
if (isTitle) {
|
||||||
|
tspan.setAttribute('class', 'title-row');
|
||||||
|
} else {
|
||||||
|
tspan.setAttribute('class', 'row');
|
||||||
|
}
|
||||||
|
tspan.textContent = rows[j].trim();
|
||||||
|
svgLabel.appendChild(tspan);
|
||||||
|
}
|
||||||
|
return svgLabel;
|
||||||
}
|
}
|
||||||
return svgLabel;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default createLabel;
|
export default createLabel;
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import { logger } from '../logger'; // eslint-disable-line
|
import { logger } from '../logger'; // eslint-disable-line
|
||||||
import createLabel from './createLabel';
|
import createLabel from './createLabel';
|
||||||
import { line, curveBasis } from 'd3';
|
import { line, curveBasis, select } from 'd3';
|
||||||
import { getConfig } from '../config';
|
import { getConfig } from '../config';
|
||||||
|
|
||||||
let edgeLabels = {};
|
let edgeLabels = {};
|
||||||
|
@ -21,7 +21,14 @@ export const insertEdgeLabel = (elem, edge) => {
|
||||||
label.node().appendChild(labelElement);
|
label.node().appendChild(labelElement);
|
||||||
|
|
||||||
// Center the label
|
// Center the label
|
||||||
const bbox = labelElement.getBBox();
|
let bbox = labelElement.getBBox();
|
||||||
|
if (getConfig().flowchart.htmlLabels) {
|
||||||
|
const div = labelElement.children[0];
|
||||||
|
const dv = select(labelElement);
|
||||||
|
bbox = div.getBoundingClientRect();
|
||||||
|
dv.attr('width', bbox.width);
|
||||||
|
dv.attr('height', bbox.height);
|
||||||
|
}
|
||||||
label.attr('transform', 'translate(' + -bbox.width / 2 + ', ' + -bbox.height / 2 + ')');
|
label.attr('transform', 'translate(' + -bbox.width / 2 + ', ' + -bbox.height / 2 + ')');
|
||||||
|
|
||||||
// Make element accessible by id for positioning
|
// Make element accessible by id for positioning
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
import createLabel from '../createLabel';
|
import createLabel from '../createLabel';
|
||||||
|
import { getConfig } from '../../config';
|
||||||
|
import { select } from 'd3';
|
||||||
export const labelHelper = (parent, node, _classes) => {
|
export const labelHelper = (parent, node, _classes) => {
|
||||||
let classes;
|
let classes;
|
||||||
if (!_classes) {
|
if (!_classes) {
|
||||||
|
@ -19,7 +20,15 @@ export const labelHelper = (parent, node, _classes) => {
|
||||||
const text = label.node().appendChild(createLabel(node.labelText, node.labelStyle));
|
const text = label.node().appendChild(createLabel(node.labelText, node.labelStyle));
|
||||||
|
|
||||||
// Get the size of the label
|
// Get the size of the label
|
||||||
const bbox = text.getBBox();
|
let bbox = text.getBBox();
|
||||||
|
|
||||||
|
if (getConfig().flowchart.htmlLabels) {
|
||||||
|
const div = text.children[0];
|
||||||
|
const dv = select(text);
|
||||||
|
bbox = div.getBoundingClientRect();
|
||||||
|
dv.attr('width', bbox.width);
|
||||||
|
dv.attr('height', bbox.height);
|
||||||
|
}
|
||||||
|
|
||||||
const halfPadding = node.padding / 2;
|
const halfPadding = node.padding / 2;
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue