709030a4ec3d9820f0a4414ba1ae6af50be9de9d-PR-1345

Build # 709030a4ec3d9820f0a4414ba1ae6af50be9de9d-PR-1345

Build Type

github

Committed by GitHub

Commit Message

Merge 530648e93 into 9f8a0234a

Pull Request Pull Request #1345: Add flowchart subroutine node shape

Run Details

1667 of 3422 branches covered (48.71%)

Branch coverage included in aggregate %.

11 of 17 new or added lines in 4 files covered. (64.71%)

146 existing lines in 2 files now uncovered.

3676 of 7443 relevant lines covered (49.39%)

15003.81 hits per line

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

67.48

/src/diagrams/flowchart/flowChartShapes.js

import dagreD3 from 'dagre-d3';

function question(parent, bbox, node) {
  const w = bbox.width;
  const h = bbox.height;
  const s = (w + h) * 0.9;
  const points = [
    { x: s / 2, y: 0 },
    { x: s, y: -s / 2 },
    { x: s / 2, y: -s },
    { x: 0, y: -s / 2 }
  ];
  const shapeSvg = insertPolygonShape(parent, s, s, points);
  node.intersect = function(point) {
    return dagreD3.intersect.polygon(node, points, point);
  };
  return shapeSvg;
}

function hexagon(parent, bbox, node) {
  const f = 4;
  const h = bbox.height;
  const m = h / f;
  const w = bbox.width + 2 * m;
  const points = [
    { x: m, y: 0 },
    { x: w - m, y: 0 },
    { x: w, y: -h / 2 },
    { x: w - m, y: -h },
    { x: m, y: -h },
    { x: 0, y: -h / 2 }
  ];
  const shapeSvg = insertPolygonShape(parent, w, h, points);
  node.intersect = function(point) {
    return dagreD3.intersect.polygon(node, points, point);
  };
  return shapeSvg;
}

function rect_left_inv_arrow(parent, bbox, node) {
  const w = bbox.width;
  const h = bbox.height;
  const points = [
    { x: -h / 2, y: 0 },
    { x: w, y: 0 },
    { x: w, y: -h },
    { x: -h / 2, y: -h },
    { x: 0, y: -h / 2 }
  ];
  const shapeSvg = insertPolygonShape(parent, w, h, points);
  node.intersect = function(point) {
    return dagreD3.intersect.polygon(node, points, point);
  };
  return shapeSvg;
}

function lean_right(parent, bbox, node) {
  const w = bbox.width;
  const h = bbox.height;
  const points = [
    { x: (-2 * h) / 6, y: 0 },
    { x: w - h / 6, y: 0 },
    { x: w + (2 * h) / 6, y: -h },
    { x: h / 6, y: -h }
  ];
  const shapeSvg = insertPolygonShape(parent, w, h, points);
  node.intersect = function(point) {
    return dagreD3.intersect.polygon(node, points, point);
  };
  return shapeSvg;
}

function lean_left(parent, bbox, node) {
  const w = bbox.width;
  const h = bbox.height;
  const points = [
    { x: (2 * h) / 6, y: 0 },
    { x: w + h / 6, y: 0 },
    { x: w - (2 * h) / 6, y: -h },
    { x: -h / 6, y: -h }
  ];
  const shapeSvg = insertPolygonShape(parent, w, h, points);
  node.intersect = function(point) {
    return dagreD3.intersect.polygon(node, points, point);
  };
  return shapeSvg;
}

function trapezoid(parent, bbox, node) {
  const w = bbox.width;
  const h = bbox.height;
  const points = [
    { x: (-2 * h) / 6, y: 0 },
    { x: w + (2 * h) / 6, y: 0 },
    { x: w - h / 6, y: -h },
    { x: h / 6, y: -h }
  ];
  const shapeSvg = insertPolygonShape(parent, w, h, points);
  node.intersect = function(point) {
    return dagreD3.intersect.polygon(node, points, point);
  };
  return shapeSvg;
}

function inv_trapezoid(parent, bbox, node) {
  const w = bbox.width;
  const h = bbox.height;
  const points = [
    { x: h / 6, y: 0 },
    { x: w - h / 6, y: 0 },
    { x: w + (2 * h) / 6, y: -h },
    { x: (-2 * h) / 6, y: -h }
  ];
  const shapeSvg = insertPolygonShape(parent, w, h, points);
  node.intersect = function(point) {
    return dagreD3.intersect.polygon(node, points, point);
  };
  return shapeSvg;
}

function rect_right_inv_arrow(parent, bbox, node) {
  const w = bbox.width;
  const h = bbox.height;
  const points = [
    { x: 0, y: 0 },
    { x: w + h / 2, y: 0 },
    { x: w, y: -h / 2 },
    { x: w + h / 2, y: -h },
    { x: 0, y: -h }
  ];
  const shapeSvg = insertPolygonShape(parent, w, h, points);
  node.intersect = function(point) {
    return dagreD3.intersect.polygon(node, points, point);
  };
  return shapeSvg;
}

function stadium(parent, bbox, node) {
  const h = bbox.height;
  const w = bbox.width + h / 4;

  const shapeSvg = parent
    .insert('rect', ':first-child')
    .attr('rx', h / 2)
    .attr('ry', h / 2)
    .attr('x', -w / 2)
    .attr('y', -h / 2)
    .attr('width', w)
    .attr('height', h);

  node.intersect = function(point) {
    return dagreD3.intersect.rect(node, point);
  };
  return shapeSvg;
}

function subroutine(parent, bbox, node) {
  const w = bbox.width;
  const h = bbox.height;
  const points = [
    { x: 0, y: 0 },
    { x: w, y: 0 },
    { x: w, y: -h },
    { x: 0, y: -h },
    { x: 0, y: 0 },
    { x: -8, y: 0 },
    { x: w + 8, y: 0 },
    { x: w + 8, y: -h },
    { x: -8, y: -h },
    { x: -8, y: 0 }
  ];
  const shapeSvg = insertPolygonShape(parent, w, h, points);
  node.intersect = function(point) {
    return dagreD3.intersect.polygon(node, points, point);
  };
  return shapeSvg;
}

function cylinder(parent, bbox, node) {
  const w = bbox.width;
  const rx = w / 2;
  const ry = rx / (2.5 + w / 50);
  const h = bbox.height + ry;

  const shape =
    'M 0,' +
    ry +
    ' a ' +
    rx +
    ',' +
    ry +
    ' 0,0,0 ' +
    w +
    ' 0 a ' +
    rx +
    ',' +
    ry +
    ' 0,0,0 ' +
    -w +
    ' 0 l 0,' +
    h +
    ' a ' +
    rx +
    ',' +
    ry +
    ' 0,0,0 ' +
    w +
    ' 0 l 0,' +
    -h;

  const shapeSvg = parent
    .attr('label-offset-y', ry)
    .insert('path', ':first-child')
    .attr('d', shape)
    .attr('transform', 'translate(' + -w / 2 + ',' + -(h / 2 + ry) + ')');

  node.intersect = function(point) {
    const pos = dagreD3.intersect.rect(node, point);
    const x = pos.x - node.x;

    if (
      rx != 0 &&
      (Math.abs(x) < node.width / 2 ||
        (Math.abs(x) == node.width / 2 && Math.abs(pos.y - node.y) > node.height / 2 - ry))
    ) {
      // ellipsis equation: x*x / a*a + y*y / b*b = 1
      // solve for y to get adjustion value for pos.y
      let y = ry * ry * (1 - (x * x) / (rx * rx));
      if (y != 0) y = Math.sqrt(y);
      y = ry - y;
      if (point.y - node.y > 0) y = -y;

      pos.y += y;
    }

    return pos;
  };

  return shapeSvg;
}

export function addToRender(render) {
  render.shapes().question = question;
  render.shapes().hexagon = hexagon;
  render.shapes().stadium = stadium;
  render.shapes().subroutine = subroutine;
  render.shapes().cylinder = cylinder;

  // Add custom shape for box with inverted arrow on left side
  render.shapes().rect_left_inv_arrow = rect_left_inv_arrow;

  // Add custom shape for box with inverted arrow on left side
  render.shapes().lean_right = lean_right;

  // Add custom shape for box with inverted arrow on left side
  render.shapes().lean_left = lean_left;

  // Add custom shape for box with inverted arrow on left side
  render.shapes().trapezoid = trapezoid;

  // Add custom shape for box with inverted arrow on left side
  render.shapes().inv_trapezoid = inv_trapezoid;

  // Add custom shape for box with inverted arrow on right side
  render.shapes().rect_right_inv_arrow = rect_right_inv_arrow;
}

export function addToRenderV2(addShape) {
  addShape({ question });
  addShape({ hexagon });
  addShape({ stadium });
  addShape({ subroutine });
  addShape({ cylinder });

  // Add custom shape for box with inverted arrow on left side
  addShape({ rect_left_inv_arrow });

  // Add custom shape for box with inverted arrow on left side
  addShape({ lean_right });

  // Add custom shape for box with inverted arrow on left side
  addShape({ lean_left });

  // Add custom shape for box with inverted arrow on left side
  addShape({ trapezoid });

  // Add custom shape for box with inverted arrow on left side
  addShape({ inv_trapezoid });

  // Add custom shape for box with inverted arrow on right side
  addShape({ rect_right_inv_arrow });
}

function insertPolygonShape(parent, w, h, points) {
  return parent
    .insert('polygon', ':first-child')
    .attr(
      'points',
      points
        .map(function(d) {
          return d.x + ',' + d.y;
        })
        .join(' ')
    )
    .attr('transform', 'translate(' + -w / 2 + ',' + h / 2 + ')');
}

export default {
  addToRender,
  addToRenderV2
};

1	import dagreD3 from 'dagre-d3';
2
3	function question(parent, bbox, node) {
4	const w = bbox.width;	6✔
5	const h = bbox.height;	6✔
6	const s = (w + h) * 0.9;	6✔
7	const points = [	6✔
8	{ x: s / 2, y: 0 },
9	{ x: s, y: -s / 2 },
10	{ x: s / 2, y: -s },
11	{ x: 0, y: -s / 2 }
12	];
13	const shapeSvg = insertPolygonShape(parent, s, s, points);	6✔
14	node.intersect = function(point) {	6✔
15	return dagreD3.intersect.polygon(node, points, point);	×
16	};
17	return shapeSvg;	6✔
18	}
19
20	function hexagon(parent, bbox, node) {
21	const f = 4;	6✔
22	const h = bbox.height;	6✔
23	const m = h / f;	6✔
24	const w = bbox.width + 2 * m;	6✔
25	const points = [	6✔
26	{ x: m, y: 0 },
27	{ x: w - m, y: 0 },
28	{ x: w, y: -h / 2 },
29	{ x: w - m, y: -h },
30	{ x: m, y: -h },
31	{ x: 0, y: -h / 2 }
32	];
33	const shapeSvg = insertPolygonShape(parent, w, h, points);	6✔
34	node.intersect = function(point) {	6✔
35	return dagreD3.intersect.polygon(node, points, point);	×
36	};
37	return shapeSvg;	6✔
38	}
39
40	function rect_left_inv_arrow(parent, bbox, node) {
41	const w = bbox.width;	6✔
42	const h = bbox.height;	6✔
43	const points = [	6✔
44	{ x: -h / 2, y: 0 },
45	{ x: w, y: 0 },
46	{ x: w, y: -h },
47	{ x: -h / 2, y: -h },
48	{ x: 0, y: -h / 2 }
49	];
50	const shapeSvg = insertPolygonShape(parent, w, h, points);	6✔
51	node.intersect = function(point) {	6✔
52	return dagreD3.intersect.polygon(node, points, point);	×
53	};
54	return shapeSvg;	6✔
55	}
56
57	function lean_right(parent, bbox, node) {
58	const w = bbox.width;	6✔
59	const h = bbox.height;	6✔
60	const points = [	6✔
61	{ x: (-2 * h) / 6, y: 0 },
62	{ x: w - h / 6, y: 0 },
63	{ x: w + (2 * h) / 6, y: -h },
64	{ x: h / 6, y: -h }
65	];
66	const shapeSvg = insertPolygonShape(parent, w, h, points);	6✔
67	node.intersect = function(point) {	6✔
68	return dagreD3.intersect.polygon(node, points, point);	×
69	};
70	return shapeSvg;	6✔
71	}
72
73	function lean_left(parent, bbox, node) {
74	const w = bbox.width;	6✔
75	const h = bbox.height;	6✔
76	const points = [	6✔
77	{ x: (2 * h) / 6, y: 0 },
78	{ x: w + h / 6, y: 0 },
79	{ x: w - (2 * h) / 6, y: -h },
80	{ x: -h / 6, y: -h }
81	];
82	const shapeSvg = insertPolygonShape(parent, w, h, points);	6✔
83	node.intersect = function(point) {	6✔
84	return dagreD3.intersect.polygon(node, points, point);	×
85	};
86	return shapeSvg;	6✔
87	}
88
89	function trapezoid(parent, bbox, node) {
90	const w = bbox.width;	6✔
91	const h = bbox.height;	6✔
92	const points = [	6✔
93	{ x: (-2 * h) / 6, y: 0 },
94	{ x: w + (2 * h) / 6, y: 0 },
95	{ x: w - h / 6, y: -h },
96	{ x: h / 6, y: -h }
97	];
98	const shapeSvg = insertPolygonShape(parent, w, h, points);	6✔
99	node.intersect = function(point) {	6✔
100	return dagreD3.intersect.polygon(node, points, point);	×
101	};
102	return shapeSvg;	6✔
103	}
104
105	function inv_trapezoid(parent, bbox, node) {
106	const w = bbox.width;	6✔
107	const h = bbox.height;	6✔
108	const points = [	6✔
109	{ x: h / 6, y: 0 },
110	{ x: w - h / 6, y: 0 },
111	{ x: w + (2 * h) / 6, y: -h },
112	{ x: (-2 * h) / 6, y: -h }
113	];
114	const shapeSvg = insertPolygonShape(parent, w, h, points);	6✔
115	node.intersect = function(point) {	6✔
116	return dagreD3.intersect.polygon(node, points, point);	×
117	};
118	return shapeSvg;	6✔
119	}
120
121	function rect_right_inv_arrow(parent, bbox, node) {
122	const w = bbox.width;	6✔
123	const h = bbox.height;	6✔
124	const points = [	6✔
125	{ x: 0, y: 0 },
126	{ x: w + h / 2, y: 0 },
127	{ x: w, y: -h / 2 },
128	{ x: w + h / 2, y: -h },
129	{ x: 0, y: -h }
130	];
131	const shapeSvg = insertPolygonShape(parent, w, h, points);	6✔
132	node.intersect = function(point) {	6✔
133	return dagreD3.intersect.polygon(node, points, point);	×
134	};
135	return shapeSvg;	6✔
136	}
137
138	function stadium(parent, bbox, node) {
139	const h = bbox.height;	6✔
140	const w = bbox.width + h / 4;	6✔
141
142	const shapeSvg = parent	6✔
143	.insert('rect', ':first-child')
144	.attr('rx', h / 2)
145	.attr('ry', h / 2)
146	.attr('x', -w / 2)
147	.attr('y', -h / 2)
148	.attr('width', w)
149	.attr('height', h);
150
151	node.intersect = function(point) {	6✔
152	return dagreD3.intersect.rect(node, point);	×
153	};
154	return shapeSvg;	6✔
155	}
156
157	function subroutine(parent, bbox, node) {
158	const w = bbox.width;	6✔
159	const h = bbox.height;	6✔
160	const points = [	6✔
161	{ x: 0, y: 0 },
162	{ x: w, y: 0 },
163	{ x: w, y: -h },
164	{ x: 0, y: -h },
165	{ x: 0, y: 0 },
166	{ x: -8, y: 0 },
167	{ x: w + 8, y: 0 },
168	{ x: w + 8, y: -h },
169	{ x: -8, y: -h },
170	{ x: -8, y: 0 }
171	];
172	const shapeSvg = insertPolygonShape(parent, w, h, points);	6✔
173	node.intersect = function(point) {	6✔
NEW 174	return dagreD3.intersect.polygon(node, points, point);	×
175	};
176	return shapeSvg;	6✔
177	}
178
179	function cylinder(parent, bbox, node) {
180	const w = bbox.width;	6✔
181	const rx = w / 2;	6✔
182	const ry = rx / (2.5 + w / 50);	6✔
183	const h = bbox.height + ry;	6✔
184
185	const shape =
186	'M 0,' +	6✔
187	ry +
188	' a ' +
189	rx +
190	',' +
191	ry +
192	' 0,0,0 ' +
193	w +
194	' 0 a ' +
195	rx +
196	',' +
197	ry +
198	' 0,0,0 ' +
199	-w +
200	' 0 l 0,' +
201	h +
202	' a ' +
203	rx +
204	',' +
205	ry +
206	' 0,0,0 ' +
207	w +
208	' 0 l 0,' +
209	-h;
210
211	const shapeSvg = parent	6✔
212	.attr('label-offset-y', ry)
213	.insert('path', ':first-child')
214	.attr('d', shape)
215	.attr('transform', 'translate(' + -w / 2 + ',' + -(h / 2 + ry) + ')');
216
217	node.intersect = function(point) {	6✔
218	const pos = dagreD3.intersect.rect(node, point);	×
219	const x = pos.x - node.x;	×
220
221	if (	×
222	rx != 0 &&	×
223	(Math.abs(x) < node.width / 2 \|\|
224	(Math.abs(x) == node.width / 2 && Math.abs(pos.y - node.y) > node.height / 2 - ry))
225	) {
226	// ellipsis equation: xx / aa + yy / bb = 1
227	// solve for y to get adjustion value for pos.y
228	let y = ry * ry * (1 - (x * x) / (rx * rx));	×
229	if (y != 0) y = Math.sqrt(y);	×
230	y = ry - y;	×
231	if (point.y - node.y > 0) y = -y;	×
232
233	pos.y += y;	×
234	}
235
236	return pos;	×
237	};
238
239	return shapeSvg;	6✔
240	}
241
242	export function addToRender(render) {
243	render.shapes().question = question;	22✔
244	render.shapes().hexagon = hexagon;	22✔
245	render.shapes().stadium = stadium;	22✔
246	render.shapes().subroutine = subroutine;	22✔
247	render.shapes().cylinder = cylinder;	22✔
248
249	// Add custom shape for box with inverted arrow on left side
250	render.shapes().rect_left_inv_arrow = rect_left_inv_arrow;	22✔
251
252	// Add custom shape for box with inverted arrow on left side
253	render.shapes().lean_right = lean_right;	22✔
254
255	// Add custom shape for box with inverted arrow on left side
256	render.shapes().lean_left = lean_left;	22✔
257
258	// Add custom shape for box with inverted arrow on left side
259	render.shapes().trapezoid = trapezoid;	22✔
260
261	// Add custom shape for box with inverted arrow on left side
262	render.shapes().inv_trapezoid = inv_trapezoid;	22✔
263
264	// Add custom shape for box with inverted arrow on right side
265	render.shapes().rect_right_inv_arrow = rect_right_inv_arrow;	22✔
266	}
267
268	export function addToRenderV2(addShape) {
269	addShape({ question });	×
270	addShape({ hexagon });	×
271	addShape({ stadium });	×
NEW 272	addShape({ subroutine });	×
UNCOV 273	addShape({ cylinder });	×
274
275	// Add custom shape for box with inverted arrow on left side
276	addShape({ rect_left_inv_arrow });	×
277
278	// Add custom shape for box with inverted arrow on left side
279	addShape({ lean_right });	×
280
281	// Add custom shape for box with inverted arrow on left side
282	addShape({ lean_left });	×
283
284	// Add custom shape for box with inverted arrow on left side
285	addShape({ trapezoid });	×
286
287	// Add custom shape for box with inverted arrow on left side
288	addShape({ inv_trapezoid });	×
289
290	// Add custom shape for box with inverted arrow on right side
291	addShape({ rect_right_inv_arrow });	×
292	}
293
294	function insertPolygonShape(parent, w, h, points) {
295	return parent	54✔
296	.insert('polygon', ':first-child')
297	.attr(
298	'points',
299	points
300	.map(function(d) {
301	return d.x + ',' + d.y;	276✔
302	})
303	.join(' ')
304	)
305	.attr('transform', 'translate(' + -w / 2 + ',' + h / 2 + ')');
306	}
307
308	export default {
309	addToRender,
310	addToRenderV2
311	};

mermaid-js / mermaid / 709030a4ec3d9820f0a4414ba1ae6af50be9de9d-PR-1345

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