Merge pull request #705 from Vrixyz/602-cardinality-not-showing

wip: class diagram  cardinality display

dist/index.html

@@ -350,11 +350,11 @@
  <div class="mermaid">
 classDiagram
 Class01 <|-- AveryLongClass : Cool
-Class03 *-- Class04
-Class05 o-- Class06
+Class03 "0" *-- "0..n" Class04
+Class05 "1" o-- "many" Class06
 Class07 .. Class08
-Class09 --> C2 : Where am i?
-Class09 --* C3
+Class09 "many" --> "1" C2  : Where am i?
+Class09 "0" --* "1..n" C3
 Class09 --|> Class07
 Class07 : equals()
 Class07 : Object[] elementData

src/diagrams/class/classRenderer.js

@@ -164,20 +164,7 @@ const drawEdge = function (elem, path, relation) {
  svgPath.attr('marker-end', 'url(' + url + '#' + getRelationType(relation.relation.type2) + 'End' + ')')
  }
 
- let x, y
- const l = path.points.length
- if ((l % 2) !== 0) {
- const p1 = path.points[Math.floor(l / 2)]
- const p2 = path.points[Math.ceil(l / 2)]
- x = (p1.x + p2.x) / 2
- y = (p1.y + p2.y) / 2
- } else {
- const p = path.points[Math.floor(l / 2)]
- x = p.x
- y = p.y
- }
-
- if (typeof relation.title !== 'undefined') {
+ const writeLabel = function (x, y, title) {
  const g = elem.append('g')
  .attr('class', 'classLabel')
  const label = g.append('text')
@@ -186,7 +173,7 @@ const drawEdge = function (elem, path, relation) {
  .attr('y', y)
  .attr('fill', 'red')
  .attr('text-anchor', 'middle')
- .text(relation.title)
+ .text(title)
 
  window.label = label
  const bounds = label.node().getBBox()
@@ -199,6 +186,54 @@ const drawEdge = function (elem, path, relation) {
  .attr('height', bounds.height + conf.padding)
  }
 
+ const l = path.points.length
+ // title
+ if (typeof relation.title !== 'undefined') {
+ let x, y
+ if ((l % 2) !== 0) {
+ const p1 = path.points[Math.floor(l / 2)]
+ const p2 = path.points[Math.ceil(l / 2)]
+ x = (p1.x + p2.x) / 2
+ y = (p1.y + p2.y) / 2
+ } else {
+ const p = path.points[Math.floor(l / 2)]
+ x = p.x
+ y = p.y
+ }
+
+ writeLabel(x, y, relation.title)
+ }
+
+ const normalize = function (point, scale) {
+ var norm = Math.sqrt(point.x * point.x + point.y * point.y)
+ if (norm !== 0) { // as3 return 0,0 for a point of zero length
+ point.x = scale * point.x / norm
+ point.y = scale * point.y / norm
+ }
+ return point
+ }
+ // Relation title 1
+ if (relation.relationTitle1 !== 'none') {
+ const p = path.points[0]
+ const nextPoint = path.points[1]
+
+ let direction = {x: nextPoint.x - p.x, y: nextPoint.y - p.y}
+ normalize(direction, 10)
+ const offsettedPoint = {x: p.x + direction.x, y: p.y + direction.y}
+
+ writeLabel(offsettedPoint.x, offsettedPoint.y, relation.relationTitle1)
+ }
+ // Relation title 2
+ if (relation.relationTitle2 !== 'none') {
+ const p = path.points[l - 1]
+ const previousPoint = path.points[l - 2]
+
+ let direction = {x: previousPoint.x - p.x, y: previousPoint.y - p.y}
+ normalize(direction, 10)
+ const offsettedPoint = {x: p.x + direction.x, y: p.y + direction.y}
+
+ writeLabel(offsettedPoint.x, offsettedPoint.y, relation.relationTitle2)
+ }
  edgeCount++
 }