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

#1436 Correcting intersection calculations for circles

Browse Source
This commit is contained in:
Knut Sveidqvist
2020-05-30 18:04:46 +02:00
parent 3bdb9f289f
commit b76e833ea5
5 changed files with 24 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
cypress/platform/current.html
View File

@@ -19,17 +19,17 @@
<body> <body>
<h1>info below</h1> <h1>info below</h1>
<div class="mermaid" style="width: 100%; height: 20%;"> <div class="mermaid" style="width: 100%; height: 20%;">
stateDiagram-v2 flowchart TD
db[(PostgreSQL<br/>database)]
[*] --> S1 broker{RabbitMQ<br/>broker}
state "Some long name" as S1: The db --> broker
box --> broker
</div> </div>
<div class="mermaid" style="width: 100%; height: 20%;"> broker --> db
stateDiagram-v2 broker --> box
db --> broker
box --> broker
[*] --> S1
state "Some long name" as S1: The description\nwith multiple lines
</div>
<div class="mermaid2" style="width: 50%; height: 20%;"> <div class="mermaid2" style="width: 50%; height: 20%;">
flowchart LR flowchart LR
A{{A}}-- apa -->B{{B}}; A{{A}}-- apa -->B{{B}};
@@ -59,11 +59,6 @@ graph LR
State4 --> [*] State4 --> [*]
} }
</div> </div>
<div class="mermaid mermaid-apa" style="width: 100%; height: 20%;">
stateDiagram-v2
[*] --> Still
Still --> [*]
</div>
<div class="mermaid2" style="width: 100%; height: 100%;"> <div class="mermaid2" style="width: 100%; height: 100%;">
stateDiagram-v2 stateDiagram-v2
[*] --> Still [*] --> Still

7
src/dagre-wrapper/edges.js
View File

@@ -116,8 +116,13 @@ export const insertEdge = function(elem, e, edge, clusterDb, diagramType, graph)
if (head.intersect && tail.intersect) { if (head.intersect && tail.intersect) {
points = points.slice(1, edge.points.length - 1); points = points.slice(1, edge.points.length - 1);
points.unshift(tail.intersect(points[0])); points.unshift(tail.intersect(points[0]));
logger.info(
'Last point',
points[points.length - 1],
head,
head.intersect(points[points.length - 1])
);
points.push(head.intersect(points[points.length - 1])); points.push(head.intersect(points[points.length - 1]));
} }
if (edge.toCluster) { if (edge.toCluster) {

4
src/dagre-wrapper/index.js
View File

@@ -93,8 +93,8 @@ const recursiveRender = (_elem, graph, diagramtype, parentCluster) => {
// Move the nodes to the correct place // Move the nodes to the correct place
graph.nodes().forEach(function(v) { graph.nodes().forEach(function(v) {
const node = graph.node(v); const node = graph.node(v);
// log.trace('Position ' + v + ': ' + JSON.stringify(graph.node(v))); log.trace('Position ' + v + ': ' + JSON.stringify(graph.node(v)));
log.trace( log.info(
'Position ' + v + ': (' + node.x, 'Position ' + v + ': (' + node.x,
',' + node.y, ',' + node.y,
') width: ', ') width: ',

1
src/dagre-wrapper/intersect/intersect-node.js
View File

@@ -1,5 +1,6 @@
module.exports = intersectNode; module.exports = intersectNode;
function intersectNode(node, point) { function intersectNode(node, point) {
console.info('Intersect Node');
return node.intersect(point); return node.intersect(point);
} }

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

@@ -19,6 +19,8 @@ const question = (parent, node) => {
{ x: 0, y: -s / 2 } { x: 0, y: -s / 2 }
]; ];
logger.info('Question main (Circle)');
const questionElem = insertPolygonShape(shapeSvg, s, s, points); const questionElem = insertPolygonShape(shapeSvg, s, s, points);
updateNodeBounds(node, questionElem); updateNodeBounds(node, questionElem);
node.intersect = function(point) { node.intersect = function(point) {
@@ -412,10 +414,13 @@ const circle = (parent, node) => {
.attr('width', bbox.width + node.padding) .attr('width', bbox.width + node.padding)
.attr('height', bbox.height + node.padding); .attr('height', bbox.height + node.padding);
logger.info('Circle main');
updateNodeBounds(node, circle); updateNodeBounds(node, circle);
node.intersect = function(point) { node.intersect = function(point) {
return intersect.circle(node, node.rx, point); logger.info('Circle intersect', node, bbox.width / 2 + halfPadding, point);
return intersect.circle(node, bbox.width / 2 + halfPadding, point);
}; };
return shapeSvg; return shapeSvg;