marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-14 12:59:46 +02:00
Code Issues Packages Projects Releases Wiki Activity

#1783 Apply styles to all types of flowchart node shapes

Browse Source
This commit is contained in:
Marc Faber
2021-01-23 18:10:21 +01:00
parent 7cb46ffa18
commit bf8e7a3590
4 changed files with 140 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/dagre-wrapper/nodes.js
View File

@@ -20,10 +20,10 @@ const question = (parent, node) => {
{ x: 0, y: -s / 2 }
];
logger.info('Question main (Circle)');
const questionElem = insertPolygonShape(shapeSvg, s, s, points);
questionElem.attr('style', node.style);
updateNodeBounds(node, questionElem);
node.intersect = function(point) {
logger.warn('Intersect called');
return intersect.polygon(node, points, point);
@@ -47,7 +47,9 @@ const hexagon = (parent, node) => {
{ x: m, y: -h },
{ x: 0, y: -h / 2 }
];
const hex = insertPolygonShape(shapeSvg, w, h, points);
hex.attr('style', node.style);
updateNodeBounds(node, hex);
node.intersect = function(point) {
@@ -71,6 +73,7 @@ const rect_left_inv_arrow = (parent, node) => {
];
const el = insertPolygonShape(shapeSvg, w, h, points);
el.attr('style', node.style);
updateNodeBounds(node, el);
node.intersect = function(point) {
@@ -79,6 +82,7 @@ const rect_left_inv_arrow = (parent, node) => {
return shapeSvg;
};
const lean_right = (parent, node) => {
const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
@@ -92,6 +96,7 @@ const lean_right = (parent, node) => {
];
const el = insertPolygonShape(shapeSvg, w, h, points);
el.attr('style', node.style);
updateNodeBounds(node, el);
node.intersect = function(point) {
@@ -114,6 +119,7 @@ const lean_left = (parent, node) => {
];
const el = insertPolygonShape(shapeSvg, w, h, points);
el.attr('style', node.style);
updateNodeBounds(node, el);
node.intersect = function(point) {
@@ -134,7 +140,9 @@ const trapezoid = (parent, node) => {
{ x: w - h / 6, y: -h },
{ x: h / 6, y: -h }
];
const el = insertPolygonShape(shapeSvg, w, h, points);
el.attr('style', node.style);
updateNodeBounds(node, el);
node.intersect = function(point) {
@@ -155,7 +163,9 @@ const inv_trapezoid = (parent, node) => {
{ x: w + (2 * h) / 6, y: -h },
{ x: (-2 * h) / 6, y: -h }
];
const el = insertPolygonShape(shapeSvg, w, h, points);
el.attr('style', node.style);
updateNodeBounds(node, el);
node.intersect = function(point) {
@@ -164,6 +174,7 @@ const inv_trapezoid = (parent, node) => {
return shapeSvg;
};
const rect_right_inv_arrow = (parent, node) => {
const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
@@ -176,7 +187,9 @@ const rect_right_inv_arrow = (parent, node) => {
{ x: w + h / 2, y: -h },
{ x: 0, y: -h }
];
const el = insertPolygonShape(shapeSvg, w, h, points);
el.attr('style', node.style);
updateNodeBounds(node, el);
node.intersect = function(point) {
@@ -185,6 +198,7 @@ const rect_right_inv_arrow = (parent, node) => {
return shapeSvg;
};
const cylinder = (parent, node) => {
const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
@@ -222,6 +236,7 @@ const cylinder = (parent, node) => {
const el = shapeSvg
.attr('label-offset-y', ry)
.insert('path', ':first-child')
.attr('style', node.style)
.attr('d', shape)
.attr('transform', 'translate(' + -w / 2 + ',' + -(h / 2 + ry) + ')');
@@ -277,6 +292,7 @@ const rect = (parent, node) => {
return shapeSvg;
};
const rectWithTitle = (parent, node) => {
// const { shapeSvg, bbox, halfPadding } = labelHelper(parent, node, 'node ' + node.classes);
@@ -389,6 +405,7 @@ const stadium = (parent, node) => {
// add the rect
const rect = shapeSvg
.insert('rect', ':first-child')
.attr('style', node.style)
.attr('rx', h / 2)
.attr('ry', h / 2)
.attr('x', -w / 2)
@@ -404,12 +421,14 @@ const stadium = (parent, node) => {
return shapeSvg;
};
const circle = (parent, node) => {
const { shapeSvg, bbox, halfPadding } = labelHelper(parent, node, undefined, true);
const circle = shapeSvg.insert('circle', ':first-child');
// center the circle around its coordinate
circle
.attr('style', node.style)
.attr('rx', node.rx)
.attr('ry', node.ry)
.attr('r', bbox.width / 2 + halfPadding)
@@ -445,7 +464,9 @@ const subroutine = (parent, node) => {
{ x: -8, y: -h },
{ x: -8, y: 0 }
];
const el = insertPolygonShape(shapeSvg, w, h, points);
el.attr('style', node.style);
updateNodeBounds(node, el);
node.intersect = function(point) {