New shape, text labels
Added support to configure mermaid to use plain text labels for better SVG compatibility Added a reverse asymmetric shape, not in the graph syntax yet
This commit is contained in:
parent
1abb53ce00
commit
8e9890d6e1
|
@ -61,7 +61,7 @@ exports.addVertices = function (vert, g) {
|
|||
}
|
||||
|
||||
var labelTypeStr = '';
|
||||
if(equals('html',mermaid_config.labelType)) {
|
||||
if(global.mermaid.htmlLabels) {
|
||||
labelTypeStr = 'html';
|
||||
} else {
|
||||
verticeText = verticeText.replace(/<br>/g, "\n");
|
||||
|
@ -86,6 +86,9 @@ exports.addVertices = function (vert, g) {
|
|||
case 'odd':
|
||||
_shape = 'rect_left_inv_arrow';
|
||||
break;
|
||||
case 'odd_right':
|
||||
_shape = 'rect_left_inv_arrow';
|
||||
break;
|
||||
case 'circle':
|
||||
_shape = 'circle';
|
||||
break;
|
||||
|
@ -155,11 +158,14 @@ exports.addEdges = function (edges, g) {
|
|||
else {
|
||||
var edgeText = edge.text.replace(/<br>/g, "\n");
|
||||
if(typeof edge.style === 'undefined'){
|
||||
//g.setEdge(edge.start, edge.end,{labelType: "text", style: "stroke: #333; stroke-width: 1.5px;fill:none", labelpos:'c', label: edgeText, arrowheadStyle: "fill: #333", arrowhead: aHead},cnt);
|
||||
g.setEdge(edge.start, edge.end,{labelType: "html",style: style, labelpos:'c', label: '<span style="background:#e8e8e8">'+edge.text+'</span>', arrowheadStyle: "fill: #333", arrowhead: aHead},cnt);
|
||||
}else{
|
||||
if (global.mermaid.htmlLabels){
|
||||
g.setEdge(edge.start, edge.end,{labelType: "html",style: style, labelpos:'c', label: '<span style="background:#e8e8e8">'+edge.text+'</span>', arrowheadStyle: "fill: #333", arrowhead: aHead},cnt);
|
||||
}else{
|
||||
g.setEdge(edge.start, edge.end,{labelType: "text", style: "stroke: #333; stroke-width: 1.5px;fill:none", labelpos:'c', label: edgeText, arrowheadStyle: "fill: #333", arrowhead: aHead},cnt);
|
||||
}
|
||||
}else{
|
||||
g.setEdge(edge.start, edge.end, {
|
||||
labelType: "text",style: style, arrowheadStyle: "fill: #333", label: edgeText, arrowhead: aHead
|
||||
labelType: "text", style: style, arrowheadStyle: "fill: #333", label: edgeText, arrowhead: aHead
|
||||
},cnt);
|
||||
}
|
||||
}
|
||||
|
@ -192,7 +198,7 @@ exports.getClasses = function (text, isDot) {
|
|||
// Add default class if undefined
|
||||
if(typeof(classes.default) === 'undefined') {
|
||||
classes.default = {id:'default'};
|
||||
classes.default.styles = ['fill:#eaeaea','stroke:#666','stroke-width:1.5px'];
|
||||
classes.default.styles = ['fill:#ffa','stroke:#666','stroke-width:3px'];
|
||||
classes.default.nodeLabelStyles = ['fill:#000','stroke:none','font-weight:300','font-family:"Helvetica Neue",Helvetica,Arial,sans-serf','font-size:14px'];
|
||||
classes.default.edgeLabelStyles = ['fill:#000','stroke:none','font-weight:300','font-family:"Helvetica Neue",Helvetica,Arial,sans-serf','font-size:14px'];
|
||||
}
|
||||
|
@ -321,6 +327,28 @@ exports.draw = function (text, id,isDot) {
|
|||
return shapeSvg;
|
||||
};
|
||||
|
||||
// Add custom shape for box with inverted arrow on right side
|
||||
render.shapes().rect_right_inv_arrow = function (parent, bbox, node) {
|
||||
var w = bbox.width,
|
||||
h = bbox.height,
|
||||
points = [
|
||||
{x: 0, y: 0},
|
||||
{x: w+h/2, y: 0},
|
||||
{x: w, y: -h/2},
|
||||
{x: w+h/2, y: -h},
|
||||
{x: 0, y: -h},
|
||||
];
|
||||
var shapeSvg = parent.insert("polygon", ":first-child")
|
||||
.attr("points", points.map(function (d) {
|
||||
return d.x + "," + d.y;
|
||||
}).join(" "))
|
||||
.attr("transform", "translate(" + (-w / 2) + "," + (h * 2 / 4) + ")");
|
||||
node.intersect = function (point) {
|
||||
return dagreD3.intersect.polygon(node, points, point);
|
||||
};
|
||||
return shapeSvg;
|
||||
};
|
||||
|
||||
// Add our custom arrow - an empty arrowhead
|
||||
render.arrows().none = function normal(parent, id, edge, type) {
|
||||
var marker = parent.append("marker")
|
||||
|
|
Loading…
Reference in New Issue