From f2a6ba80b5cd6fa1a2fc94ac66d8eea8e64c3b19 Mon Sep 17 00:00:00 2001 From: knsv Date: Thu, 12 Sep 2019 12:54:59 -0700 Subject: [PATCH] #931 Aligning code standard --- src/diagrams/sequence/svgDraw.js | 403 ++++++++++++++------------ src/diagrams/sequence/svgDraw.spec.js | 94 +++--- 2 files changed, 272 insertions(+), 225 deletions(-) diff --git a/src/diagrams/sequence/svgDraw.js b/src/diagrams/sequence/svgDraw.js index c33e470cc..4658f174f 100644 --- a/src/diagrams/sequence/svgDraw.js +++ b/src/diagrams/sequence/svgDraw.js @@ -1,71 +1,87 @@ -export const drawRect = function (elem, rectData) { - const rectElem = elem.append('rect') - rectElem.attr('x', rectData.x) - rectElem.attr('y', rectData.y) - rectElem.attr('fill', rectData.fill) - rectElem.attr('stroke', rectData.stroke) - rectElem.attr('width', rectData.width) - rectElem.attr('height', rectData.height) - rectElem.attr('rx', rectData.rx) - rectElem.attr('ry', rectData.ry) +export const drawRect = function(elem, rectData) { + const rectElem = elem.append('rect'); + rectElem.attr('x', rectData.x); + rectElem.attr('y', rectData.y); + rectElem.attr('fill', rectData.fill); + rectElem.attr('stroke', rectData.stroke); + rectElem.attr('width', rectData.width); + rectElem.attr('height', rectData.height); + rectElem.attr('rx', rectData.rx); + rectElem.attr('ry', rectData.ry); if (typeof rectData.class !== 'undefined') { - rectElem.attr('class', rectData.class) + rectElem.attr('class', rectData.class); } - return rectElem -} + return rectElem; +}; -export const drawText = function (elem, textData, width) { +export const drawText = function(elem, textData, width) { // Remove and ignore br:s - const nText = textData.text.replace(//ig, ' ') + const nText = textData.text.replace(//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) + 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) + 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) + const span = textElem.append('tspan'); + span.attr('x', textData.x + textData.textMargin * 2); + span.attr('fill', textData.fill); + span.text(nText); - return textElem -} + return textElem; +}; -export const drawLabel = function (elem, txtObject) { - function genPoints (x, y, width, height, cut) { - return x + ',' + y + ' ' + - (x + width) + ',' + y + ' ' + - (x + width) + ',' + (y + height - cut) + ' ' + - (x + width - cut * 1.2) + ',' + (y + height) + ' ' + - (x) + ',' + (y + height) +export const drawLabel = function(elem, txtObject) { + function genPoints(x, y, width, height, cut) { + return ( + x + + ',' + + y + + ' ' + + (x + width) + + ',' + + y + + ' ' + + (x + width) + + ',' + + (y + height - cut) + + ' ' + + (x + width - cut * 1.2) + + ',' + + (y + height) + + ' ' + + x + + ',' + + (y + height) + ); } - const polygon = elem.append('polygon') - polygon.attr('points', genPoints(txtObject.x, txtObject.y, 50, 20, 7)) - polygon.attr('class', 'labelBox') + const polygon = elem.append('polygon'); + polygon.attr('points', genPoints(txtObject.x, txtObject.y, 50, 20, 7)); + polygon.attr('class', 'labelBox'); - txtObject.y = txtObject.y + txtObject.labelMargin - txtObject.x = txtObject.x + 0.5 * txtObject.labelMargin - drawText(elem, txtObject) -} + txtObject.y = txtObject.y + txtObject.labelMargin; + txtObject.x = txtObject.x + 0.5 * txtObject.labelMargin; + drawText(elem, txtObject); +}; -let actorCnt = -1 +let actorCnt = -1; /** * 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 drawActor = function (elem, left, verticalPos, description, conf) { - const center = left + (conf.width / 2) - const g = elem.append('g') +export const drawActor = function(elem, left, verticalPos, description, conf) { + const center = left + conf.width / 2; + const g = elem.append('g'); if (verticalPos === 0) { - actorCnt++ + actorCnt++; g.append('line') .attr('id', 'actor' + actorCnt) .attr('x1', center) @@ -74,43 +90,51 @@ export const drawActor = function (elem, left, verticalPos, description, conf) { .attr('y2', 2000) .attr('class', 'actor-line') .attr('stroke-width', '0.5px') - .attr('stroke', '#999') + .attr('stroke', '#999'); } - const rect = getNoteRect() - rect.x = left - rect.y = verticalPos - rect.fill = '#eaeaea' - rect.width = conf.width - rect.height = conf.height - rect.class = 'actor' - rect.rx = 3 - rect.ry = 3 - drawRect(g, rect) + const rect = getNoteRect(); + rect.x = left; + rect.y = verticalPos; + rect.fill = '#eaeaea'; + rect.width = conf.width; + rect.height = conf.height; + rect.class = 'actor'; + rect.rx = 3; + rect.ry = 3; + drawRect(g, rect); - _drawTextCandidateFunc(conf)(description, g, - rect.x, rect.y, rect.width, rect.height, { 'class': 'actor' }, conf) -} + _drawTextCandidateFunc(conf)( + description, + g, + rect.x, + rect.y, + rect.width, + rect.height, + { class: 'actor' }, + conf + ); +}; -export const anchorElement = function (elem) { - return elem.append('g') -} +export const anchorElement = function(elem) { + return elem.append('g'); +}; /** * Draws an actor in the diagram with the attaced line * @param elem - element to append activation rect * @param bounds - activation box bounds * @param verticalPos - precise y cooridnate of bottom activation box edge */ -export const drawActivation = function (elem, bounds, verticalPos, conf, actorActivations) { - const rect = getNoteRect() - const g = bounds.anchored - rect.x = bounds.startx - rect.y = bounds.starty - rect.class = 'activation' + (actorActivations % 3) // Will evaluate to 0, 1 or 2 - rect.width = bounds.stopx - bounds.startx - rect.height = verticalPos - bounds.starty - drawRect(g, rect) -} +export const drawActivation = function(elem, bounds, verticalPos, conf, actorActivations) { + const rect = getNoteRect(); + const g = bounds.anchored; + rect.x = bounds.startx; + rect.y = bounds.starty; + rect.class = 'activation' + (actorActivations % 3); // Will evaluate to 0, 1 or 2 + rect.width = bounds.stopx - bounds.startx; + rect.height = verticalPos - bounds.starty; + drawRect(g, rect); +}; /** * Draws an actor in the diagram with the attaced line @@ -118,60 +142,61 @@ export const drawActivation = function (elem, bounds, verticalPos, conf, actorAc * @param pos The position if the actor in the list of actors * @param description The text in the box */ -export const drawLoop = function (elem, bounds, labelText, conf) { - const g = elem.append('g') - const drawLoopLine = function (startx, starty, stopx, stopy) { - return g.append('line') +export const drawLoop = function(elem, bounds, labelText, conf) { + const g = elem.append('g'); + const drawLoopLine = function(startx, starty, stopx, stopy) { + return g + .append('line') .attr('x1', startx) .attr('y1', starty) .attr('x2', stopx) .attr('y2', stopy) - .attr('class', 'loopLine') - } - drawLoopLine(bounds.startx, bounds.starty, bounds.stopx, bounds.starty) - drawLoopLine(bounds.stopx, bounds.starty, bounds.stopx, bounds.stopy) - drawLoopLine(bounds.startx, bounds.stopy, bounds.stopx, bounds.stopy) - drawLoopLine(bounds.startx, bounds.starty, bounds.startx, bounds.stopy) + .attr('class', 'loopLine'); + }; + drawLoopLine(bounds.startx, bounds.starty, bounds.stopx, bounds.starty); + drawLoopLine(bounds.stopx, bounds.starty, bounds.stopx, bounds.stopy); + drawLoopLine(bounds.startx, bounds.stopy, bounds.stopx, bounds.stopy); + drawLoopLine(bounds.startx, bounds.starty, bounds.startx, bounds.stopy); if (typeof bounds.sections !== 'undefined') { - bounds.sections.forEach(function (item) { - drawLoopLine(bounds.startx, item, bounds.stopx, item).style('stroke-dasharray', '3, 3') - }) + bounds.sections.forEach(function(item) { + drawLoopLine(bounds.startx, item, bounds.stopx, item).style('stroke-dasharray', '3, 3'); + }); } - let txt = getTextObj() - txt.text = labelText - txt.x = bounds.startx - txt.y = bounds.starty - txt.labelMargin = 1.5 * 10 // This is the small box that says "loop" - txt.class = 'labelText' // Its size & position are fixed. + let txt = getTextObj(); + txt.text = labelText; + txt.x = bounds.startx; + txt.y = bounds.starty; + txt.labelMargin = 1.5 * 10; // This is the small box that says "loop" + txt.class = 'labelText'; // Its size & position are fixed. - drawLabel(g, txt) + drawLabel(g, txt); - txt = getTextObj() - txt.text = '[ ' + bounds.title + ' ]' - txt.x = bounds.startx + (bounds.stopx - bounds.startx) / 2 - txt.y = bounds.starty + 1.5 * conf.boxMargin - txt.anchor = 'middle' - txt.class = 'loopText' + txt = getTextObj(); + txt.text = '[ ' + bounds.title + ' ]'; + txt.x = bounds.startx + (bounds.stopx - bounds.startx) / 2; + txt.y = bounds.starty + 1.5 * conf.boxMargin; + txt.anchor = 'middle'; + txt.class = 'loopText'; - drawText(g, txt) + drawText(g, txt); if (typeof bounds.sectionTitles !== 'undefined') { - bounds.sectionTitles.forEach(function (item, idx) { + bounds.sectionTitles.forEach(function(item, idx) { if (item !== '') { - txt.text = '[ ' + item + ' ]' - txt.y = bounds.sections[idx] + 1.5 * conf.boxMargin - drawText(g, txt) + txt.text = '[ ' + item + ' ]'; + txt.y = bounds.sections[idx] + 1.5 * conf.boxMargin; + drawText(g, txt); } - }) + }); } -} +}; /** * Draws a background rectangle * @param color - The fill color for the background */ -export const drawBackgroundRect = function (elem, bounds) { +export const drawBackgroundRect = function(elem, bounds) { const rectElem = drawRect(elem, { x: bounds.startx, y: bounds.starty, @@ -179,14 +204,16 @@ export const drawBackgroundRect = function (elem, bounds) { height: bounds.stopy - bounds.starty, fill: bounds.fill, class: 'rect' - }) - rectElem.lower() -} + }); + rectElem.lower(); +}; /** * Setup arrow head and define the marker. The result is appended to the svg. */ -export const insertArrowHead = function (elem) { - elem.append('defs').append('marker') +export const insertArrowHead = function(elem) { + elem + .append('defs') + .append('marker') .attr('id', 'arrowhead') .attr('refX', 5) .attr('refY', 2) @@ -194,13 +221,15 @@ export const insertArrowHead = function (elem) { .attr('markerHeight', 4) .attr('orient', 'auto') .append('path') - .attr('d', 'M 0,0 V 4 L6,2 Z') // this is actual shape for arrowhead -} + .attr('d', 'M 0,0 V 4 L6,2 Z'); // this is actual shape for arrowhead +}; /** * Setup node number. The result is appended to the svg. */ -export const insertSequenceNumber = function (elem) { - elem.append('defs').append('marker') +export const insertSequenceNumber = function(elem) { + elem + .append('defs') + .append('marker') .attr('id', 'sequencenumber') .attr('refX', 15) .attr('refY', 15) @@ -210,45 +239,48 @@ export const insertSequenceNumber = function (elem) { .append('circle') .attr('cx', 15) .attr('cy', 15) - .attr('r', 6) - // .style("fill", '#f00'); -} + .attr('r', 6); + // .style("fill", '#f00'); +}; /** * Setup arrow head and define the marker. The result is appended to the svg. */ -export const insertArrowCrossHead = function (elem) { - const defs = elem.append('defs') - const marker = defs.append('marker') +export const insertArrowCrossHead = function(elem) { + const defs = elem.append('defs'); + const marker = defs + .append('marker') .attr('id', 'crosshead') .attr('markerWidth', 15) .attr('markerHeight', 8) .attr('orient', 'auto') .attr('refX', 16) - .attr('refY', 4) + .attr('refY', 4); // The arrow - marker.append('path') + marker + .append('path') .attr('fill', 'black') .attr('stroke', '#000000') - .style('stroke-dasharray', ('0, 0')) + .style('stroke-dasharray', '0, 0') .attr('stroke-width', '1px') - .attr('d', 'M 9,2 V 6 L16,4 Z') + .attr('d', 'M 9,2 V 6 L16,4 Z'); // The cross - marker.append('path') + marker + .append('path') .attr('fill', 'none') .attr('stroke', '#000000') - .style('stroke-dasharray', ('0, 0')) + .style('stroke-dasharray', '0, 0') .attr('stroke-width', '1px') - .attr('d', 'M 0,1 L 6,7 M 6,1 L 0,7') + .attr('d', 'M 0,1 L 6,7 M 6,1 L 0,7'); // this is actual shape for arrowhead -} +}; -export const getTextObj = function () { +export const getTextObj = function() { const txt = { x: 0, y: 0, - 'fill': undefined, + fill: undefined, 'text-anchor': 'start', style: '#666', width: 100, @@ -256,11 +288,11 @@ export const getTextObj = function () { textMargin: 0, rx: 0, ry: 0 - } - return txt -} + }; + return txt; +}; -export const getNoteRect = function () { +export const getNoteRect = function() { const rect = { x: 0, y: 0, @@ -271,72 +303,87 @@ export const getNoteRect = function () { height: 100, rx: 0, ry: 0 - } - return rect -} + }; + return rect; +}; -const _drawTextCandidateFunc = (function () { - function byText (content, g, x, y, width, height, textAttrs) { - const text = g.append('text') - .attr('x', x + width / 2).attr('y', y + height / 2 + 5) +const _drawTextCandidateFunc = (function() { + function byText(content, g, x, y, width, height, textAttrs) { + const text = g + .append('text') + .attr('x', x + width / 2) + .attr('y', y + height / 2 + 5) .style('text-anchor', 'middle') - .text(content) - _setTextAttrs(text, textAttrs) + .text(content); + _setTextAttrs(text, textAttrs); } - function byTspan (content, g, x, y, width, height, textAttrs, conf) { - const { actorFontSize, actorFontFamily } = conf + function byTspan(content, g, x, y, width, height, textAttrs, conf) { + const { actorFontSize, actorFontFamily } = conf; - const lines = content.split(//ig) + const lines = content.split(//gi); for (let i = 0; i < lines.length; i++) { - const dy = (i * actorFontSize) - (actorFontSize * (lines.length - 1) / 2) - const text = g.append('text') - .attr('x', x + width / 2).attr('y', y) + const dy = i * actorFontSize - (actorFontSize * (lines.length - 1)) / 2; + const text = g + .append('text') + .attr('x', x + width / 2) + .attr('y', y) .style('text-anchor', 'middle') .style('font-size', actorFontSize) - .style('font-family', actorFontFamily) - text.append('tspan') - .attr('x', x + width / 2).attr('dy', dy) - .text(lines[i]) + .style('font-family', actorFontFamily); + text + .append('tspan') + .attr('x', x + width / 2) + .attr('dy', dy) + .text(lines[i]); - text.attr('y', y + height / 2.0) + text + .attr('y', y + height / 2.0) .attr('dominant-baseline', 'central') - .attr('alignment-baseline', 'central') + .attr('alignment-baseline', 'central'); - _setTextAttrs(text, textAttrs) + _setTextAttrs(text, textAttrs); } } - function byFo (content, g, x, y, width, height, textAttrs, conf) { - const s = g.append('switch') - const f = s.append('foreignObject') - .attr('x', x).attr('y', y) - .attr('width', width).attr('height', height) + function byFo(content, g, x, y, width, height, textAttrs, conf) { + const s = g.append('switch'); + const f = s + .append('foreignObject') + .attr('x', x) + .attr('y', y) + .attr('width', width) + .attr('height', height); - const text = f.append('div').style('display', 'table') - .style('height', '100%').style('width', '100%') + const text = f + .append('div') + .style('display', 'table') + .style('height', '100%') + .style('width', '100%'); - text.append('div').style('display', 'table-cell') - .style('text-align', 'center').style('vertical-align', 'middle') - .text(content) + text + .append('div') + .style('display', 'table-cell') + .style('text-align', 'center') + .style('vertical-align', 'middle') + .text(content); - byTspan(content, s, x, y, width, height, textAttrs, conf) - _setTextAttrs(text, textAttrs) + byTspan(content, s, x, y, width, height, textAttrs, conf); + _setTextAttrs(text, textAttrs); } - function _setTextAttrs (toText, fromTextAttrsDict) { + function _setTextAttrs(toText, fromTextAttrsDict) { for (const key in fromTextAttrsDict) { if (fromTextAttrsDict.hasOwnProperty(key)) { - toText.attr(key, fromTextAttrsDict[key]) + toText.attr(key, fromTextAttrsDict[key]); } } } - return function (conf) { - return conf.textPlacement === 'fo' ? byFo : ( - conf.textPlacement === 'old' ? byText : byTspan) - } -})() + return function(conf) { + return conf.textPlacement === 'fo' ? byFo : conf.textPlacement === 'old' ? byText : byTspan; + }; +})(); export default { drawRect, @@ -352,4 +399,4 @@ export default { insertArrowCrossHead, getTextObj, getNoteRect -} +}; diff --git a/src/diagrams/sequence/svgDraw.spec.js b/src/diagrams/sequence/svgDraw.spec.js index efb541e78..c99b9b95b 100644 --- a/src/diagrams/sequence/svgDraw.spec.js +++ b/src/diagrams/sequence/svgDraw.spec.js @@ -1,11 +1,11 @@ /* eslint-env jasmine */ -const svgDraw = require('./svgDraw') -const { MockD3 } = require('d3') +const svgDraw = require('./svgDraw'); +const { MockD3 } = require('d3'); -describe('svgDraw', function () { - describe('drawRect', function () { - it('it should append a rectangle', function () { - const svg = MockD3('svg') +describe('svgDraw', function() { + describe('drawRect', function() { + it('it should append a rectangle', function() { + const svg = MockD3('svg'); svgDraw.drawRect(svg, { x: 10, y: 10, @@ -16,22 +16,22 @@ describe('svgDraw', function () { rx: '10', ry: '10', class: 'unitTestRectangleClass' - }) - expect(svg.__children.length).toBe(1) - const rect = svg.__children[0] - expect(rect.__name).toBe('rect') - expect(rect.attr).toHaveBeenCalledWith('x', 10) - expect(rect.attr).toHaveBeenCalledWith('y', 10) - expect(rect.attr).toHaveBeenCalledWith('fill', '#ccc') - expect(rect.attr).toHaveBeenCalledWith('stroke', 'red') - expect(rect.attr).toHaveBeenCalledWith('width', '20') - expect(rect.attr).toHaveBeenCalledWith('height', '20') - expect(rect.attr).toHaveBeenCalledWith('rx', '10') - expect(rect.attr).toHaveBeenCalledWith('ry', '10') - expect(rect.attr).toHaveBeenCalledWith('class', 'unitTestRectangleClass') - }) + }); + expect(svg.__children.length).toBe(1); + const rect = svg.__children[0]; + expect(rect.__name).toBe('rect'); + expect(rect.attr).toHaveBeenCalledWith('x', 10); + expect(rect.attr).toHaveBeenCalledWith('y', 10); + expect(rect.attr).toHaveBeenCalledWith('fill', '#ccc'); + expect(rect.attr).toHaveBeenCalledWith('stroke', 'red'); + expect(rect.attr).toHaveBeenCalledWith('width', '20'); + expect(rect.attr).toHaveBeenCalledWith('height', '20'); + expect(rect.attr).toHaveBeenCalledWith('rx', '10'); + expect(rect.attr).toHaveBeenCalledWith('ry', '10'); + expect(rect.attr).toHaveBeenCalledWith('class', 'unitTestRectangleClass'); + }); it('it should not add the class attribute if a class isn`t provided', () => { - const svg = MockD3('svg') + const svg = MockD3('svg'); svgDraw.drawRect(svg, { x: 10, y: 10, @@ -41,17 +41,17 @@ describe('svgDraw', function () { height: '20', rx: '10', ry: '10' - }) - expect(svg.__children.length).toBe(1) - const rect = svg.__children[0] - expect(rect.__name).toBe('rect') - expect(rect.attr).toHaveBeenCalledWith('fill', '#ccc') - expect(rect.attr).not.toHaveBeenCalledWith('class', expect.anything()) - }) - }) - describe('drawBackgroundRect', function () { - it('it should append a rect before the previous element within a given bound', function () { - const svg = MockD3('svg') + }); + expect(svg.__children.length).toBe(1); + const rect = svg.__children[0]; + expect(rect.__name).toBe('rect'); + expect(rect.attr).toHaveBeenCalledWith('fill', '#ccc'); + expect(rect.attr).not.toHaveBeenCalledWith('class', expect.anything()); + }); + }); + describe('drawBackgroundRect', function() { + it('it should append a rect before the previous element within a given bound', function() { + const svg = MockD3('svg'); const boundingRect = { startx: 50, starty: 200, @@ -59,18 +59,18 @@ describe('svgDraw', function () { stopy: 260, title: undefined, fill: '#ccc' - } - svgDraw.drawBackgroundRect(svg, boundingRect) - expect(svg.__children.length).toBe(1) - const rect = svg.__children[0] - expect(rect.__name).toBe('rect') - expect(rect.attr).toHaveBeenCalledWith('x', 50) - expect(rect.attr).toHaveBeenCalledWith('y', 200) - expect(rect.attr).toHaveBeenCalledWith('width', 100) - expect(rect.attr).toHaveBeenCalledWith('height', 60) - expect(rect.attr).toHaveBeenCalledWith('fill', '#ccc') - expect(rect.attr).toHaveBeenCalledWith('class', 'rect') - expect(rect.lower).toHaveBeenCalled() - }) - }) -}) + }; + svgDraw.drawBackgroundRect(svg, boundingRect); + expect(svg.__children.length).toBe(1); + const rect = svg.__children[0]; + expect(rect.__name).toBe('rect'); + expect(rect.attr).toHaveBeenCalledWith('x', 50); + expect(rect.attr).toHaveBeenCalledWith('y', 200); + expect(rect.attr).toHaveBeenCalledWith('width', 100); + expect(rect.attr).toHaveBeenCalledWith('height', 60); + expect(rect.attr).toHaveBeenCalledWith('fill', '#ccc'); + expect(rect.attr).toHaveBeenCalledWith('class', 'rect'); + expect(rect.lower).toHaveBeenCalled(); + }); + }); +});