de11dc43abc3d388e870ed47ec3a60bdd6bbc15e

Build # de11dc43abc3d388e870ed47ec3a60bdd6bbc15e

Build Type

push

github

Committed by GitHub

Commit Message

Merge pull request #1285 from mermaid-js/bug/1269_fix_label_background_on_safari

Run Details

1537 of 2951 branches covered (52.08%)

Branch coverage included in aggregate %.

0 of 11 new or added lines in 1 file covered. (0.0%)

1 existing line in 1 file now uncovered.

3347 of 6057 relevant lines covered (55.26%)

9156.64 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

5.53

/src/diagrams/state/shapes.js

import * as d3 from 'd3';
import idCache from './id-cache.js';
import stateDb from './stateDb';
import utils from '../../utils';
import common from '../common/common';
import { getConfig } from '../../config';
import { logger } from '../../logger';

// let conf;

/**
 * Draws a start state as a black circle
 */
export const drawStartState = g =>
  g
    .append('circle')
    .style('stroke', 'black')
    .style('fill', 'black')
    .attr('r', getConfig().state.sizeUnit)
    .attr('cx', getConfig().state.padding + getConfig().state.sizeUnit)
    .attr('cy', getConfig().state.padding + getConfig().state.sizeUnit);

/**
 * Draws a start state as a black circle
 */
export const drawDivider = g =>
  g
    .append('line')
    .style('stroke', 'grey')
    .style('stroke-dasharray', '3')
    .attr('x1', getConfig().state.textHeight)
    .attr('class', 'divider')
    .attr('x2', getConfig().state.textHeight * 2)
    .attr('y1', 0)
    .attr('y2', 0);

/**
 * Draws a an end state as a black circle
 */
export const drawSimpleState = (g, stateDef) => {
  const state = g
    .append('text')
    .attr('x', 2 * getConfig().state.padding)
    .attr('y', getConfig().state.textHeight + 2 * getConfig().state.padding)
    .attr('font-size', getConfig().state.fontSize)
    .attr('class', 'state-title')
    .text(stateDef.id);

  const classBox = state.node().getBBox();
  g.insert('rect', ':first-child')
    .attr('x', getConfig().state.padding)
    .attr('y', getConfig().state.padding)
    .attr('width', classBox.width + 2 * getConfig().state.padding)
    .attr('height', classBox.height + 2 * getConfig().state.padding)
    .attr('rx', getConfig().state.radius);

  return state;
};

/**
 * Draws a state with descriptions
 * @param {*} g
 * @param {*} stateDef
 */
export const drawDescrState = (g, stateDef) => {
  const addTspan = function(textEl, txt, isFirst) {
    const tSpan = textEl
      .append('tspan')
      .attr('x', 2 * getConfig().state.padding)
      .text(txt);
    if (!isFirst) {
      tSpan.attr('dy', getConfig().state.textHeight);
    }
  };
  const title = g
    .append('text')
    .attr('x', 2 * getConfig().state.padding)
    .attr('y', getConfig().state.textHeight + 1.3 * getConfig().state.padding)
    .attr('font-size', getConfig().state.fontSize)
    .attr('class', 'state-title')
    .text(stateDef.descriptions[0]);

  const titleBox = title.node().getBBox();
  const titleHeight = titleBox.height;

  const description = g
    .append('text') // text label for the x axis
    .attr('x', getConfig().state.padding)
    .attr(
      'y',
      titleHeight +
        getConfig().state.padding * 0.4 +
        getConfig().state.dividerMargin +
        getConfig().state.textHeight
    )
    .attr('class', 'state-description');

  let isFirst = true;
  let isSecond = true;
  stateDef.descriptions.forEach(function(descr) {
    if (!isFirst) {
      addTspan(description, descr, isSecond);
      isSecond = false;
    }
    isFirst = false;
  });

  const descrLine = g
    .append('line') // text label for the x axis
    .attr('x1', getConfig().state.padding)
    .attr('y1', getConfig().state.padding + titleHeight + getConfig().state.dividerMargin / 2)
    .attr('y2', getConfig().state.padding + titleHeight + getConfig().state.dividerMargin / 2)
    .attr('class', 'descr-divider');
  const descrBox = description.node().getBBox();
  const width = Math.max(descrBox.width, titleBox.width);

  descrLine.attr('x2', width + 3 * getConfig().state.padding);
  // const classBox = title.node().getBBox();

  g.insert('rect', ':first-child')
    .attr('x', getConfig().state.padding)
    .attr('y', getConfig().state.padding)
    .attr('width', width + 2 * getConfig().state.padding)
    .attr('height', descrBox.height + titleHeight + 2 * getConfig().state.padding)
    .attr('rx', getConfig().state.radius);

  return g;
};

/**
 * Adds the creates a box around the existing content and adds a
 * panel for the id on top of the content.
 */
/**
 * Function that creates an title row and a frame around a substate for a composit state diagram.
 * The function returns a new d3 svg object with updated width and height properties;
 * @param {*} g The d3 svg object for the substate to framed
 * @param {*} stateDef The info about the
 */
export const addTitleAndBox = (g, stateDef, altBkg) => {
  const pad = getConfig().state.padding;
  const dblPad = 2 * getConfig().state.padding;
  const orgBox = g.node().getBBox();
  const orgWidth = orgBox.width;
  const orgX = orgBox.x;

  const title = g
    .append('text')
    .attr('x', 0)
    .attr('y', getConfig().state.titleShift)
    .attr('font-size', getConfig().state.fontSize)
    .attr('class', 'state-title')
    .text(stateDef.id);

  const titleBox = title.node().getBBox();
  const titleWidth = titleBox.width + dblPad;
  let width = Math.max(titleWidth, orgWidth); // + dblPad;
  if (width === orgWidth) {
    width = width + dblPad;
  }
  let startX;
  // const lineY = 1 - getConfig().state.textHeight;
  // const descrLine = g
  //   .append('line') // text label for the x axis
  //   .attr('x1', 0)
  //   .attr('y1', lineY)
  //   .attr('y2', lineY)
  //   .attr('class', 'descr-divider');

  const graphBox = g.node().getBBox();
  // console.warn(width / 2, titleWidth / 2, getConfig().state.padding, orgBox);
  // descrLine.attr('x2', graphBox.width + getConfig().state.padding);

  if (stateDef.doc) {
    // cnsole.warn(
    //   stateDef.id,
    //   'orgX: ',
    //   orgX,
    //   'width: ',
    //   width,
    //   'titleWidth: ',
    //   titleWidth,
    //   'orgWidth: ',
    //   orgWidth,
    //   'width',
    //   width
    // );
  }

  startX = orgX - pad;
  if (titleWidth > orgWidth) {
    startX = (orgWidth - width) / 2 + pad;
  }
  if (Math.abs(orgX - graphBox.x) < pad) {
    if (titleWidth > orgWidth) {
      startX = orgX - (titleWidth - orgWidth) / 2;
    }
  }

  const lineY = 1 - getConfig().state.textHeight;
  // White color
  g.insert('rect', ':first-child')
    .attr('x', startX)
    .attr('y', lineY)
    .attr('class', altBkg ? 'alt-composit' : 'composit')
    .attr('width', width)
    .attr(
      'height',
      graphBox.height + getConfig().state.textHeight + getConfig().state.titleShift + 1
    )
    .attr('rx', '0');

  title.attr('x', startX + pad);
  if (titleWidth <= orgWidth) title.attr('x', orgX + (width - dblPad) / 2 - titleWidth / 2 + pad);

  // Title background
  g.insert('rect', ':first-child')
    .attr('x', startX)
    .attr(
      'y',
      getConfig().state.titleShift - getConfig().state.textHeight - getConfig().state.padding
    )
    .attr('width', width)
    // Just needs to be higher then the descr line, will be clipped by the white color box
    .attr('height', getConfig().state.textHeight * 3)
    .attr('rx', getConfig().state.radius);

  // Full background
  g.insert('rect', ':first-child')
    .attr('x', startX)
    .attr(
      'y',
      getConfig().state.titleShift - getConfig().state.textHeight - getConfig().state.padding
    )
    .attr('width', width)
    .attr('height', graphBox.height + 3 + 2 * getConfig().state.textHeight)
    .attr('rx', getConfig().state.radius);

  return g;
};

const drawEndState = g => {
  g.append('circle')
    .style('stroke', 'black')
    .style('fill', 'white')
    .attr('r', getConfig().state.sizeUnit + getConfig().state.miniPadding)
    .attr(
      'cx',
      getConfig().state.padding + getConfig().state.sizeUnit + getConfig().state.miniPadding
    )
    .attr(
      'cy',
      getConfig().state.padding + getConfig().state.sizeUnit + getConfig().state.miniPadding
    );

  return g
    .append('circle')
    .style('stroke', 'black')
    .style('fill', 'black')
    .attr('r', getConfig().state.sizeUnit)
    .attr('cx', getConfig().state.padding + getConfig().state.sizeUnit + 2)
    .attr('cy', getConfig().state.padding + getConfig().state.sizeUnit + 2);
};
const drawForkJoinState = (g, stateDef) => {
  let width = getConfig().state.forkWidth;
  let height = getConfig().state.forkHeight;

  if (stateDef.parentId) {
    let tmp = width;
    width = height;
    height = tmp;
  }
  return g
    .append('rect')
    .style('stroke', 'black')
    .style('fill', 'black')
    .attr('width', width)
    .attr('height', height)
    .attr('x', getConfig().state.padding)
    .attr('y', getConfig().state.padding);
};

export const drawText = function(elem, textData) {
  // Remove and ignore br:s
  const nText = textData.text.replace(/<br\s*\/?>/gi, ' ');

  const textElem = elem.append('text');
  textElem.attr('x', textData.x);
  textElem.attr('y', textData.y);
  textElem.style('text-anchor', textData.anchor);
  textElem.attr('fill', textData.fill);
  if (typeof textData.class !== 'undefined') {
    textElem.attr('class', textData.class);
  }

  const span = textElem.append('tspan');
  span.attr('x', textData.x + textData.textMargin * 2);
  span.attr('fill', textData.fill);
  span.text(nText);

  return textElem;
};

const _drawLongText = (_text, x, y, g) => {
  let textHeight = 0;

  const textElem = g.append('text');
  textElem.style('text-anchor', 'start');
  textElem.attr('class', 'noteText');

  let text = _text.replace(/\r\n/g, '<br/>');
  text = text.replace(/\n/g, '<br/>');
  const lines = text.split(/<br\s*\/?>/gi);

  let tHeight = 1.25 * getConfig().state.noteMargin;
  for (const line of lines) {
    const txt = line.trim();

    if (txt.length > 0) {
      const span = textElem.append('tspan');
      span.text(txt);
      if (tHeight === 0) {
        const textBounds = span.node().getBBox();
        tHeight += textBounds.height;
      }
      // console.warn('textBounds', textBounds);
      textHeight += tHeight;
      span.attr('x', x + getConfig().state.noteMargin);
      span.attr('y', y + textHeight + 1.25 * getConfig().state.noteMargin);
    }
  }
  return { textWidth: textElem.node().getBBox().width, textHeight };
};

/**
 * Draws an actor in the diagram with the attaced line
 * @param center - The center of the the actor
 * @param pos The position if the actor in the liost of actors
 * @param description The text in the box
 */

export const drawNote = (text, g) => {
  g.attr('class', 'state-note');
  const note = g
    .append('rect')
    .attr('x', 0)
    .attr('y', getConfig().state.padding);
  const rectElem = g.append('g');

  const { textWidth, textHeight } = _drawLongText(text, 0, 0, rectElem);
  note.attr('height', textHeight + 2 * getConfig().state.noteMargin);
  note.attr('width', textWidth + getConfig().state.noteMargin * 2);

  return note;
};

/**
 * Starting point for drawing a state. The function finds out the specifics
 * about the state and renders with approprtiate function.
 * @param {*} elem
 * @param {*} stateDef
 */

export const drawState = function(elem, stateDef) {
  const id = stateDef.id;
  const stateInfo = {
    id: id,
    label: stateDef.id,
    width: 0,
    height: 0
  };

  const g = elem
    .append('g')
    .attr('id', id)
    .attr('class', 'stateGroup');

  if (stateDef.type === 'start') drawStartState(g);
  if (stateDef.type === 'end') drawEndState(g);
  if (stateDef.type === 'fork' || stateDef.type === 'join') drawForkJoinState(g, stateDef);
  if (stateDef.type === 'note') drawNote(stateDef.note.text, g);
  if (stateDef.type === 'divider') drawDivider(g);
  if (stateDef.type === 'default' && stateDef.descriptions.length === 0)
    drawSimpleState(g, stateDef);
  if (stateDef.type === 'default' && stateDef.descriptions.length > 0) drawDescrState(g, stateDef);

  const stateBox = g.node().getBBox();
  stateInfo.width = stateBox.width + 2 * getConfig().state.padding;
  stateInfo.height = stateBox.height + 2 * getConfig().state.padding;

  idCache.set(id, stateInfo);
  // stateCnt++;
  return stateInfo;
};

let edgeCount = 0;
export const drawEdge = function(elem, path, relation) {
  const getRelationType = function(type) {
    switch (type) {
      case stateDb.relationType.AGGREGATION:
        return 'aggregation';
      case stateDb.relationType.EXTENSION:
        return 'extension';
      case stateDb.relationType.COMPOSITION:
        return 'composition';
      case stateDb.relationType.DEPENDENCY:
        return 'dependency';
    }
  };

  path.points = path.points.filter(p => !Number.isNaN(p.y));

  // The data for our line
  const lineData = path.points;

  // This is the accessor function we talked about above
  const lineFunction = d3
    .line()
    .x(function(d) {
      return d.x;
    })
    .y(function(d) {
      return d.y;
    })
    .curve(d3.curveBasis);

  const svgPath = elem
    .append('path')
    .attr('d', lineFunction(lineData))
    .attr('id', 'edge' + edgeCount)
    .attr('class', 'transition');
  let url = '';
  if (getConfig().state.arrowMarkerAbsolute) {
    url =
      window.location.protocol +
      '//' +
      window.location.host +
      window.location.pathname +
      window.location.search;
    url = url.replace(/\(/g, '\\(');
    url = url.replace(/\)/g, '\\)');
  }

  svgPath.attr(
    'marker-end',
    'url(' + url + '#' + getRelationType(stateDb.relationType.DEPENDENCY) + 'End' + ')'
  );

  if (typeof relation.title !== 'undefined') {
    const label = elem.append('g').attr('class', 'stateLabel');

    const { x, y } = utils.calcLabelPosition(path.points);

    const rows = common.getRows(relation.title);

    // console.warn(rows);

    let titleHeight = 0;
    const titleRows = [];
    let maxWidth = 0;
    let minX = 0;

    for (let i = 0; i <= rows.length; i++) {
      const title = label
        .append('text')
        .attr('text-anchor', 'middle')
        .text(rows[i])
        .attr('x', x)
        .attr('y', y + titleHeight);

      const boundstmp = title.node().getBBox();
      maxWidth = Math.max(maxWidth, boundstmp.width);
      minX = Math.min(minX, boundstmp.x);

      logger.info(boundstmp.x, x, y + titleHeight);

      if (titleHeight === 0) {
        const titleBox = title.node().getBBox();
        titleHeight = titleBox.height;
        logger.info('Title height', titleHeight, y);
      }
      titleRows.push(title);
    }

    let boxHeight = titleHeight * rows.length;
    if (rows.length > 1) {
      const heightAdj = (rows.length - 1) * titleHeight * 0.5;

      titleRows.forEach((title, i) => title.attr('y', y + i * titleHeight - heightAdj));
      boxHeight = titleHeight * rows.length;
    }

    const bounds = label.node().getBBox();

    label
      .insert('rect', ':first-child')
      .attr('class', 'box')
      .attr('x', x - maxWidth / 2 - getConfig().state.padding / 2)
      .attr('y', y - boxHeight / 2 - getConfig().state.padding / 2 - 3.5)
      .attr('width', maxWidth + getConfig().state.padding)
      .attr('height', boxHeight + getConfig().state.padding);

    logger.info(bounds);

    //label.attr('transform', '0 -' + (bounds.y / 2));

    // Debug points
    // path.points.forEach(point => {
    //   g.append('circle')
    //     .style('stroke', 'red')
    //     .style('fill', 'red')
    //     .attr('r', 1)
    //     .attr('cx', point.x)
    //     .attr('cy', point.y);
    // });
    // g.append('circle')
    //   .style('stroke', 'blue')
    //   .style('fill', 'blue')
    //   .attr('r', 1)
    //   .attr('cx', x)
    //   .attr('cy', y);
  }

  edgeCount++;
};

1	import * as d3 from 'd3';
2	import idCache from './id-cache.js';
3	import stateDb from './stateDb';
4	import utils from '../../utils';
5	import common from '../common/common';
6	import { getConfig } from '../../config';
7	import { logger } from '../../logger';
8
9	// let conf;
10
11	/**
12	* Draws a start state as a black circle
13	*/
14	export const drawStartState = g =>	2✔
15	g	×
16	.append('circle')
17	.style('stroke', 'black')
18	.style('fill', 'black')
19	.attr('r', getConfig().state.sizeUnit)
20	.attr('cx', getConfig().state.padding + getConfig().state.sizeUnit)
21	.attr('cy', getConfig().state.padding + getConfig().state.sizeUnit);
22
23	/**
24	* Draws a start state as a black circle
25	*/
26	export const drawDivider = g =>	2✔
27	g	×
28	.append('line')
29	.style('stroke', 'grey')
30	.style('stroke-dasharray', '3')
31	.attr('x1', getConfig().state.textHeight)
32	.attr('class', 'divider')
33	.attr('x2', getConfig().state.textHeight * 2)
34	.attr('y1', 0)
35	.attr('y2', 0);
36
37	/**
38	* Draws a an end state as a black circle
39	*/
40	export const drawSimpleState = (g, stateDef) => {	2✔
41	const state = g	×
42	.append('text')
43	.attr('x', 2 * getConfig().state.padding)
44	.attr('y', getConfig().state.textHeight + 2 * getConfig().state.padding)
45	.attr('font-size', getConfig().state.fontSize)
46	.attr('class', 'state-title')
47	.text(stateDef.id);
48
49	const classBox = state.node().getBBox();	×
50	g.insert('rect', ':first-child')	×
51	.attr('x', getConfig().state.padding)
52	.attr('y', getConfig().state.padding)
53	.attr('width', classBox.width + 2 * getConfig().state.padding)
54	.attr('height', classBox.height + 2 * getConfig().state.padding)
55	.attr('rx', getConfig().state.radius);
56
57	return state;	×
58	};
59
60	/**
61	* Draws a state with descriptions
62	* @param {*} g
63	* @param {*} stateDef
64	*/
65	export const drawDescrState = (g, stateDef) => {	2✔
66	const addTspan = function(textEl, txt, isFirst) {	×
67	const tSpan = textEl	×
68	.append('tspan')
69	.attr('x', 2 * getConfig().state.padding)
70	.text(txt);
71	if (!isFirst) {	×
72	tSpan.attr('dy', getConfig().state.textHeight);	×
73	}
74	};
75	const title = g	×
76	.append('text')
77	.attr('x', 2 * getConfig().state.padding)
78	.attr('y', getConfig().state.textHeight + 1.3 * getConfig().state.padding)
79	.attr('font-size', getConfig().state.fontSize)
80	.attr('class', 'state-title')
81	.text(stateDef.descriptions[0]);
82
83	const titleBox = title.node().getBBox();	×
84	const titleHeight = titleBox.height;	×
85
86	const description = g	×
87	.append('text') // text label for the x axis
88	.attr('x', getConfig().state.padding)
89	.attr(
90	'y',
91	titleHeight +
92	getConfig().state.padding * 0.4 +
93	getConfig().state.dividerMargin +
94	getConfig().state.textHeight
95	)
96	.attr('class', 'state-description');
97
98	let isFirst = true;	×
99	let isSecond = true;	×
100	stateDef.descriptions.forEach(function(descr) {	×
101	if (!isFirst) {	×
102	addTspan(description, descr, isSecond);	×
103	isSecond = false;	×
104	}
105	isFirst = false;	×
106	});
107
108	const descrLine = g	×
109	.append('line') // text label for the x axis
110	.attr('x1', getConfig().state.padding)
111	.attr('y1', getConfig().state.padding + titleHeight + getConfig().state.dividerMargin / 2)
112	.attr('y2', getConfig().state.padding + titleHeight + getConfig().state.dividerMargin / 2)
113	.attr('class', 'descr-divider');
114	const descrBox = description.node().getBBox();	×
115	const width = Math.max(descrBox.width, titleBox.width);	×
116
117	descrLine.attr('x2', width + 3 * getConfig().state.padding);	×
118	// const classBox = title.node().getBBox();
119
120	g.insert('rect', ':first-child')	×
121	.attr('x', getConfig().state.padding)
122	.attr('y', getConfig().state.padding)
123	.attr('width', width + 2 * getConfig().state.padding)
124	.attr('height', descrBox.height + titleHeight + 2 * getConfig().state.padding)
125	.attr('rx', getConfig().state.radius);
126
127	return g;	×
128	};
129
130	/**
131	* Adds the creates a box around the existing content and adds a
132	* panel for the id on top of the content.
133	*/
134	/**
135	* Function that creates an title row and a frame around a substate for a composit state diagram.
136	* The function returns a new d3 svg object with updated width and height properties;
137	* @param {*} g The d3 svg object for the substate to framed
138	* @param {*} stateDef The info about the
139	*/
140	export const addTitleAndBox = (g, stateDef, altBkg) => {	2✔
141	const pad = getConfig().state.padding;	×
142	const dblPad = 2 * getConfig().state.padding;	×
143	const orgBox = g.node().getBBox();	×
144	const orgWidth = orgBox.width;	×
145	const orgX = orgBox.x;	×
146
147	const title = g	×
148	.append('text')
149	.attr('x', 0)
150	.attr('y', getConfig().state.titleShift)
151	.attr('font-size', getConfig().state.fontSize)
152	.attr('class', 'state-title')
153	.text(stateDef.id);
154
155	const titleBox = title.node().getBBox();	×
156	const titleWidth = titleBox.width + dblPad;	×
157	let width = Math.max(titleWidth, orgWidth); // + dblPad;	×
158	if (width === orgWidth) {	×
159	width = width + dblPad;	×
160	}
161	let startX;
162	// const lineY = 1 - getConfig().state.textHeight;
163	// const descrLine = g
164	// .append('line') // text label for the x axis
165	// .attr('x1', 0)
166	// .attr('y1', lineY)
167	// .attr('y2', lineY)
168	// .attr('class', 'descr-divider');
169
170	const graphBox = g.node().getBBox();	×
171	// console.warn(width / 2, titleWidth / 2, getConfig().state.padding, orgBox);
172	// descrLine.attr('x2', graphBox.width + getConfig().state.padding);
173
174	if (stateDef.doc) {	×
175	// cnsole.warn(
176	// stateDef.id,
177	// 'orgX: ',
178	// orgX,
179	// 'width: ',
180	// width,
181	// 'titleWidth: ',
182	// titleWidth,
183	// 'orgWidth: ',
184	// orgWidth,
185	// 'width',
186	// width
187	// );
188	}
189
190	startX = orgX - pad;	×
191	if (titleWidth > orgWidth) {	×
192	startX = (orgWidth - width) / 2 + pad;	×
193	}
194	if (Math.abs(orgX - graphBox.x) < pad) {	×
195	if (titleWidth > orgWidth) {	×
196	startX = orgX - (titleWidth - orgWidth) / 2;	×
197	}
198	}
199
200	const lineY = 1 - getConfig().state.textHeight;	×
201	// White color
202	g.insert('rect', ':first-child')	×
203	.attr('x', startX)
204	.attr('y', lineY)
205	.attr('class', altBkg ? 'alt-composit' : 'composit')	×
206	.attr('width', width)
207	.attr(
208	'height',
209	graphBox.height + getConfig().state.textHeight + getConfig().state.titleShift + 1
210	)
211	.attr('rx', '0');
212
213	title.attr('x', startX + pad);	×
214	if (titleWidth <= orgWidth) title.attr('x', orgX + (width - dblPad) / 2 - titleWidth / 2 + pad);	×
215
216	// Title background
217	g.insert('rect', ':first-child')	×
218	.attr('x', startX)
219	.attr(
220	'y',
221	getConfig().state.titleShift - getConfig().state.textHeight - getConfig().state.padding
222	)
223	.attr('width', width)
224	// Just needs to be higher then the descr line, will be clipped by the white color box
225	.attr('height', getConfig().state.textHeight * 3)
226	.attr('rx', getConfig().state.radius);
227
228	// Full background
229	g.insert('rect', ':first-child')	×
230	.attr('x', startX)
231	.attr(
232	'y',
233	getConfig().state.titleShift - getConfig().state.textHeight - getConfig().state.padding
234	)
235	.attr('width', width)
236	.attr('height', graphBox.height + 3 + 2 * getConfig().state.textHeight)
237	.attr('rx', getConfig().state.radius);
238
239	return g;	×
240	};
241
242	const drawEndState = g => {	2✔
243	g.append('circle')	×
244	.style('stroke', 'black')
245	.style('fill', 'white')
246	.attr('r', getConfig().state.sizeUnit + getConfig().state.miniPadding)
247	.attr(
248	'cx',
249	getConfig().state.padding + getConfig().state.sizeUnit + getConfig().state.miniPadding
250	)
251	.attr(
252	'cy',
253	getConfig().state.padding + getConfig().state.sizeUnit + getConfig().state.miniPadding
254	);
255
256	return g	×
257	.append('circle')
258	.style('stroke', 'black')
259	.style('fill', 'black')
260	.attr('r', getConfig().state.sizeUnit)
261	.attr('cx', getConfig().state.padding + getConfig().state.sizeUnit + 2)
262	.attr('cy', getConfig().state.padding + getConfig().state.sizeUnit + 2);
263	};
264	const drawForkJoinState = (g, stateDef) => {	2✔
265	let width = getConfig().state.forkWidth;	×
266	let height = getConfig().state.forkHeight;	×
267
268	if (stateDef.parentId) {	×
269	let tmp = width;	×
270	width = height;	×
271	height = tmp;	×
272	}
273	return g	×
274	.append('rect')
275	.style('stroke', 'black')
276	.style('fill', 'black')
277	.attr('width', width)
278	.attr('height', height)
279	.attr('x', getConfig().state.padding)
280	.attr('y', getConfig().state.padding);
281	};
282
283	export const drawText = function(elem, textData) {	2✔
284	// Remove and ignore br:s
285	const nText = textData.text.replace(/<br\s*\/?>/gi, ' ');	×
286
287	const textElem = elem.append('text');	×
288	textElem.attr('x', textData.x);	×
289	textElem.attr('y', textData.y);	×
290	textElem.style('text-anchor', textData.anchor);	×
291	textElem.attr('fill', textData.fill);	×
292	if (typeof textData.class !== 'undefined') {	×
293	textElem.attr('class', textData.class);	×
294	}
295
296	const span = textElem.append('tspan');	×
297	span.attr('x', textData.x + textData.textMargin * 2);	×
298	span.attr('fill', textData.fill);	×
299	span.text(nText);	×
300
301	return textElem;	×
302	};
303
304	const _drawLongText = (_text, x, y, g) => {	2✔
305	let textHeight = 0;	×
306
307	const textElem = g.append('text');	×
308	textElem.style('text-anchor', 'start');	×
309	textElem.attr('class', 'noteText');	×
310
311	let text = _text.replace(/\r\n/g, '<br/>');	×
312	text = text.replace(/\n/g, '<br/>');	×
313	const lines = text.split(/<br\s*\/?>/gi);	×
314
315	let tHeight = 1.25 * getConfig().state.noteMargin;	×
316	for (const line of lines) {	×
317	const txt = line.trim();	×
318
319	if (txt.length > 0) {	×
320	const span = textElem.append('tspan');	×
321	span.text(txt);	×
322	if (tHeight === 0) {	×
323	const textBounds = span.node().getBBox();	×
324	tHeight += textBounds.height;	×
325	}
326	// console.warn('textBounds', textBounds);
327	textHeight += tHeight;	×
328	span.attr('x', x + getConfig().state.noteMargin);	×
329	span.attr('y', y + textHeight + 1.25 * getConfig().state.noteMargin);	×
330	}
331	}
332	return { textWidth: textElem.node().getBBox().width, textHeight };	×
333	};
334
335	/**
336	* Draws an actor in the diagram with the attaced line
337	* @param center - The center of the the actor
338	* @param pos The position if the actor in the liost of actors
339	* @param description The text in the box
340	*/
341
342	export const drawNote = (text, g) => {	2✔
343	g.attr('class', 'state-note');	×
344	const note = g	×
345	.append('rect')
346	.attr('x', 0)
347	.attr('y', getConfig().state.padding);
348	const rectElem = g.append('g');	×
349
350	const { textWidth, textHeight } = _drawLongText(text, 0, 0, rectElem);	×
351	note.attr('height', textHeight + 2 * getConfig().state.noteMargin);	×
352	note.attr('width', textWidth + getConfig().state.noteMargin * 2);	×
353
354	return note;	×
355	};
356
357	/**
358	* Starting point for drawing a state. The function finds out the specifics
359	* about the state and renders with approprtiate function.
360	* @param {*} elem
361	* @param {*} stateDef
362	*/
363
364	export const drawState = function(elem, stateDef) {	2✔
365	const id = stateDef.id;	×
366	const stateInfo = {	×
367	id: id,
368	label: stateDef.id,
369	width: 0,
370	height: 0
371	};
372
373	const g = elem	×
374	.append('g')
375	.attr('id', id)
376	.attr('class', 'stateGroup');
377
378	if (stateDef.type === 'start') drawStartState(g);	×
379	if (stateDef.type === 'end') drawEndState(g);	×
380	if (stateDef.type === 'fork' \|\| stateDef.type === 'join') drawForkJoinState(g, stateDef);	×
381	if (stateDef.type === 'note') drawNote(stateDef.note.text, g);	×
382	if (stateDef.type === 'divider') drawDivider(g);	×
383	if (stateDef.type === 'default' && stateDef.descriptions.length === 0)	×
384	drawSimpleState(g, stateDef);	×
385	if (stateDef.type === 'default' && stateDef.descriptions.length > 0) drawDescrState(g, stateDef);	×
386
387	const stateBox = g.node().getBBox();	×
388	stateInfo.width = stateBox.width + 2 * getConfig().state.padding;	×
389	stateInfo.height = stateBox.height + 2 * getConfig().state.padding;	×
390
391	idCache.set(id, stateInfo);	×
392	// stateCnt++;
393	return stateInfo;	×
394	};
395
396	let edgeCount = 0;	2✔
397	export const drawEdge = function(elem, path, relation) {	2✔
398	const getRelationType = function(type) {	×
399	switch (type) {	×
400	case stateDb.relationType.AGGREGATION:
401	return 'aggregation';	×
402	case stateDb.relationType.EXTENSION:
403	return 'extension';	×
404	case stateDb.relationType.COMPOSITION:
405	return 'composition';	×
406	case stateDb.relationType.DEPENDENCY:
407	return 'dependency';	×
408	}
409	};
410
411	path.points = path.points.filter(p => !Number.isNaN(p.y));	×
412
413	// The data for our line
414	const lineData = path.points;	×
415
416	// This is the accessor function we talked about above
417	const lineFunction = d3	×
418	.line()
419	.x(function(d) {
420	return d.x;	×
421	})
422	.y(function(d) {
423	return d.y;	×
424	})
425	.curve(d3.curveBasis);
426
427	const svgPath = elem	×
428	.append('path')
429	.attr('d', lineFunction(lineData))
430	.attr('id', 'edge' + edgeCount)
431	.attr('class', 'transition');
432	let url = '';	×
433	if (getConfig().state.arrowMarkerAbsolute) {	×
434	url =	×
435	window.location.protocol +
436	'//' +
437	window.location.host +
438	window.location.pathname +
439	window.location.search;
440	url = url.replace(/\(/g, '\\(');	×
441	url = url.replace(/\)/g, '\\)');	×
442	}
443
444	svgPath.attr(	×
445	'marker-end',
446	'url(' + url + '#' + getRelationType(stateDb.relationType.DEPENDENCY) + 'End' + ')'
447	);
448
449	if (typeof relation.title !== 'undefined') {	×
450	const label = elem.append('g').attr('class', 'stateLabel');	×
451
452	const { x, y } = utils.calcLabelPosition(path.points);	×
453
454	const rows = common.getRows(relation.title);	×
455
456	// console.warn(rows);
457
458	let titleHeight = 0;	×
459	const titleRows = [];	×
NEW 460	let maxWidth = 0;	×
NEW 461	let minX = 0;	×
462
463	for (let i = 0; i <= rows.length; i++) {	×
464	const title = label	×
465	.append('text')
466	.attr('text-anchor', 'middle')
467	.text(rows[i])
468	.attr('x', x)
469	.attr('y', y + titleHeight);
470
NEW 471	const boundstmp = title.node().getBBox();	×
NEW 472	maxWidth = Math.max(maxWidth, boundstmp.width);	×
NEW 473	minX = Math.min(minX, boundstmp.x);	×
474
NEW 475	logger.info(boundstmp.x, x, y + titleHeight);	×
476
477	if (titleHeight === 0) {	×
478	const titleBox = title.node().getBBox();	×
479	titleHeight = titleBox.height;	×
NEW 480	logger.info('Title height', titleHeight, y);	×
481	}
482	titleRows.push(title);	×
483	}
484
NEW 485	let boxHeight = titleHeight * rows.length;	×
486	if (rows.length > 1) {	×
NEW 487	const heightAdj = (rows.length - 1) * titleHeight * 0.5;	×
488
489	titleRows.forEach((title, i) => title.attr('y', y + i * titleHeight - heightAdj));	×
NEW 490	boxHeight = titleHeight * rows.length;	×
491	}
492
493	const bounds = label.node().getBBox();	×
494
UNCOV 495	label	×
496	.insert('rect', ':first-child')
497	.attr('class', 'box')
498	.attr('x', x - maxWidth / 2 - getConfig().state.padding / 2)
499	.attr('y', y - boxHeight / 2 - getConfig().state.padding / 2 - 3.5)
500	.attr('width', maxWidth + getConfig().state.padding)
501	.attr('height', boxHeight + getConfig().state.padding);
502
NEW 503	logger.info(bounds);	×
504
505	//label.attr('transform', '0 -' + (bounds.y / 2));
506
507	// Debug points
508	// path.points.forEach(point => {
509	// g.append('circle')
510	// .style('stroke', 'red')
511	// .style('fill', 'red')
512	// .attr('r', 1)
513	// .attr('cx', point.x)
514	// .attr('cy', point.y);
515	// });
516	// g.append('circle')
517	// .style('stroke', 'blue')
518	// .style('fill', 'blue')
519	// .attr('r', 1)
520	// .attr('cx', x)
521	// .attr('cy', y);
522	}
523
524	edgeCount++;	×
525	};

mermaid-js / mermaid / de11dc43abc3d388e870ed47ec3a60bdd6bbc15e

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous