Added shapes
Added UTF-8 tag to test webpage Added tests for shapes on test webpage Added odd shape Added circle shape Modified diamond shape to always use right angles
This commit is contained in:
parent
d52224194c
commit
c7b44679c1
40
src/main.js
40
src/main.js
|
@ -73,7 +73,10 @@ var addVertices = function (vert, g) {
|
||||||
_shape = 'question';
|
_shape = 'question';
|
||||||
break;
|
break;
|
||||||
case 'odd':
|
case 'odd':
|
||||||
_shape = 'question';
|
_shape = 'rect_left_inv_arrow';
|
||||||
|
break;
|
||||||
|
case 'circle':
|
||||||
|
_shape = 'circle';
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -180,12 +183,13 @@ var draw = function (text, id) {
|
||||||
// Add custom shape for rhombus type of boc (decision)
|
// Add custom shape for rhombus type of boc (decision)
|
||||||
render.shapes().question = function (parent, bbox, node) {
|
render.shapes().question = function (parent, bbox, node) {
|
||||||
var w = bbox.width,
|
var w = bbox.width,
|
||||||
h = bbox.height * 3,
|
h = bbox.height,
|
||||||
|
s = (w + h) * 0.8,
|
||||||
points = [
|
points = [
|
||||||
{x: w / 2, y: 0},
|
{x: s / 2, y: 0},
|
||||||
{x: w, y: -h / 2},
|
{x: s, y: -s / 2},
|
||||||
{x: w / 2, y: -h},
|
{x: s / 2, y: -s},
|
||||||
{x: 0, y: -h / 2}
|
{x: 0, y: -s / 2}
|
||||||
];
|
];
|
||||||
shapeSvg = parent.insert("polygon", ":first-child")
|
shapeSvg = parent.insert("polygon", ":first-child")
|
||||||
.attr("points", points.map(function (d) {
|
.attr("points", points.map(function (d) {
|
||||||
|
@ -195,6 +199,30 @@ var draw = function (text, id) {
|
||||||
.style("stroke", "#333")
|
.style("stroke", "#333")
|
||||||
.attr("rx", 5)
|
.attr("rx", 5)
|
||||||
.attr("ry", 5)
|
.attr("ry", 5)
|
||||||
|
.attr("transform", "translate(" + (-s / 2) + "," + (s * 2 / 4) + ")");
|
||||||
|
node.intersect = function (point) {
|
||||||
|
return dagreD3.intersect.polygon(node, points, point);
|
||||||
|
};
|
||||||
|
return shapeSvg;
|
||||||
|
};
|
||||||
|
|
||||||
|
// Add custom shape for box with inverted arrow on left side
|
||||||
|
render.shapes().rect_left_inv_arrow = function (parent, bbox, node) {
|
||||||
|
var w = bbox.width,
|
||||||
|
h = bbox.height,
|
||||||
|
points = [
|
||||||
|
{x: -h/2, y: 0},
|
||||||
|
{x: w, y: 0},
|
||||||
|
{x: w, y: -h},
|
||||||
|
{x: -h/2, y: -h},
|
||||||
|
{x: 0, y: -h/2},
|
||||||
|
];
|
||||||
|
shapeSvg = parent.insert("polygon", ":first-child")
|
||||||
|
.attr("points", points.map(function (d) {
|
||||||
|
return d.x + "," + d.y;
|
||||||
|
}).join(" "))
|
||||||
|
.style("fill", "#fff")
|
||||||
|
.style("stroke", "#333")
|
||||||
.attr("transform", "translate(" + (-w / 2) + "," + (h * 2 / 4) + ")");
|
.attr("transform", "translate(" + (-w / 2) + "," + (h * 2 / 4) + ")");
|
||||||
node.intersect = function (point) {
|
node.intersect = function (point) {
|
||||||
return dagreD3.intersect.polygon(node, points, point);
|
return dagreD3.intersect.polygon(node, points, point);
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
|
||||||
<script src="../dist/mermaid.full.js"></script>
|
<script src="../dist/mermaid.full.js"></script>
|
||||||
<script>
|
<script>
|
||||||
|
@ -41,6 +42,17 @@
|
||||||
e(orphan);
|
e(orphan);
|
||||||
style eag red;
|
style eag red;
|
||||||
</div>
|
</div>
|
||||||
|
<h1>Shapes</h1>
|
||||||
|
<div class="mermaid">
|
||||||
|
graph TD;
|
||||||
|
sq[Square shape]-->ci(Circle shape);
|
||||||
|
od>Odd shape]---|Two line<br>edge comment|ro;
|
||||||
|
od2>Really long text in an Odd shape]-->od3>Really long text with linebreak<br>in an Odd shape];
|
||||||
|
di[Diamond is broken]-->ro{Rounded<br>square<br>shape};
|
||||||
|
di[Diamond is broken]-->ro2{Rounded square shape};
|
||||||
|
e(Inner circle);
|
||||||
|
style e red;
|
||||||
|
</div>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
Loading…
Reference in New Issue