mirrors
/
mermaid
mirror of https://github.com/mermaid-js/mermaid.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request #1 from bjowes/master 

Added new shapes!
This commit is contained in:
Knut Sveidqvist 2014-11-27 09:06:53 +01:00
parent d52224194c 28f6b93c16
commit 289329736d
7 changed files with 121 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored Normal file
View File

@ -0,0 +1 @@
node_modules/*

40
dist/mermaid.full.js vendored
View File

@ -735,7 +735,10 @@ var addVertices = function (vert, g) {
_shape = 'question';
break;
case 'odd':
_shape = 'question';
_shape = 'rect_left_inv_arrow';
break;
case 'circle':
_shape = 'circle';
break;
}
@ -842,12 +845,13 @@ var draw = function (text, id) {
// Add custom shape for rhombus type of boc (decision)
render.shapes().question = function (parent, bbox, node) {
var w = bbox.width,
h = bbox.height * 3,
h = bbox.height,
s = (w + h) * 0.8,
points = [
{x: w / 2, y: 0},
{x: w, y: -h / 2},
{x: w / 2, y: -h},
{x: 0, y: -h / 2}
{x: s / 2, y: 0},
{x: s, y: -s / 2},
{x: s / 2, y: -s},
{x: 0, y: -s / 2}
];
shapeSvg = parent.insert("polygon", ":first-child")
.attr("points", points.map(function (d) {
@ -857,6 +861,30 @@ var draw = function (text, id) {
.style("stroke", "#333")
.attr("rx", 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) + ")");
node.intersect = function (point) {
return dagreD3.intersect.polygon(node, points, point);

6
dist/mermaid.full.min.js vendored
View File

File diff suppressed because one or more lines are too long

40
dist/mermaid.slim.js vendored
View File

@ -703,7 +703,10 @@ var addVertices = function (vert, g) {
_shape = 'question';
break;
case 'odd':
_shape = 'question';
_shape = 'rect_left_inv_arrow';
break;
case 'circle':
_shape = 'circle';
break;
}
@ -810,12 +813,13 @@ var draw = function (text, id) {
// Add custom shape for rhombus type of boc (decision)
render.shapes().question = function (parent, bbox, node) {
var w = bbox.width,
h = bbox.height * 3,
h = bbox.height,
s = (w + h) * 0.8,
points = [
{x: w / 2, y: 0},
{x: w, y: -h / 2},
{x: w / 2, y: -h},
{x: 0, y: -h / 2}
{x: s / 2, y: 0},
{x: s, y: -s / 2},
{x: s / 2, y: -s},
{x: 0, y: -s / 2}
];
shapeSvg = parent.insert("polygon", ":first-child")
.attr("points", points.map(function (d) {
@ -825,6 +829,30 @@ var draw = function (text, id) {
.style("stroke", "#333")
.attr("rx", 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) + ")");
node.intersect = function (point) {
return dagreD3.intersect.polygon(node, points, point);

6
dist/mermaid.slim.min.js vendored
View File

File diff suppressed because one or more lines are too long

40
src/main.js
View File

@ -73,7 +73,10 @@ var addVertices = function (vert, g) {
_shape = 'question';
break;
case 'odd':
_shape = 'question';
_shape = 'rect_left_inv_arrow';
break;
case 'circle':
_shape = 'circle';
break;
}
@ -180,12 +183,13 @@ var draw = function (text, id) {
// Add custom shape for rhombus type of boc (decision)
render.shapes().question = function (parent, bbox, node) {
var w = bbox.width,
h = bbox.height * 3,
h = bbox.height,
s = (w + h) * 0.8,
points = [
{x: w / 2, y: 0},
{x: w, y: -h / 2},
{x: w / 2, y: -h},
{x: 0, y: -h / 2}
{x: s / 2, y: 0},
{x: s, y: -s / 2},
{x: s / 2, y: -s},
{x: 0, y: -s / 2}
];
shapeSvg = parent.insert("polygon", ":first-child")
.attr("points", points.map(function (d) {
@ -195,6 +199,30 @@ var draw = function (text, id) {
.style("stroke", "#333")
.attr("rx", 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) + ")");
node.intersect = function (point) {
return dagreD3.intersect.polygon(node, points, point);

12
test/web.html
View File

@ -1,6 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="../dist/mermaid.full.js"></script>
<script>
@ -41,6 +42,17 @@
e(orphan);
style eag red;
</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>
</html>