From 7c74107f360dee4bceb197a2802bfd89a2a8dc64 Mon Sep 17 00:00:00 2001 From: Tyler Long Date: Thu, 14 Sep 2017 20:35:00 +0800 Subject: [PATCH] Replace var with const --- src/diagrams/sequenceDiagram/sequenceDb.js | 14 +- .../sequenceDiagram/sequenceRenderer.js | 129 +++++++++--------- src/diagrams/sequenceDiagram/svgDraw.js | 52 +++---- 3 files changed, 94 insertions(+), 101 deletions(-) diff --git a/src/diagrams/sequenceDiagram/sequenceDb.js b/src/diagrams/sequenceDiagram/sequenceDb.js index be8f1aac1..665ca820d 100644 --- a/src/diagrams/sequenceDiagram/sequenceDb.js +++ b/src/diagrams/sequenceDiagram/sequenceDb.js @@ -1,13 +1,13 @@ import { logger } from '../../logger' -var actors = {} -var messages = [] -var notes = [] -var title = '' +let actors = {} +let messages = [] +const notes = [] +let title = '' export const addActor = function (id, name, description) { // Don't allow description nulling - var old = actors[id] + const old = actors[id] if (old && name === old.name && description == null) return // Don't allow null descriptions, either @@ -81,10 +81,10 @@ export const PLACEMENT = { } export const addNote = function (actor, placement, message) { - var note = { actor: actor, placement: placement, message: message } + const note = { actor: actor, placement: placement, message: message } // Coerce actor into a [to, from, ...] array - var actors = [].concat(actor, actor) + const actors = [].concat(actor, actor) notes.push(note) messages.push({ from: actors[0], to: actors[1], message: message, type: LINETYPE.NOTE, placement: placement }) diff --git a/src/diagrams/sequenceDiagram/sequenceRenderer.js b/src/diagrams/sequenceDiagram/sequenceRenderer.js index 37335316a..7d2a72a57 100644 --- a/src/diagrams/sequenceDiagram/sequenceRenderer.js +++ b/src/diagrams/sequenceDiagram/sequenceRenderer.js @@ -6,7 +6,7 @@ import sequenceDb from './sequenceDb' parser.yy = sequenceDb -var conf = { +const conf = { diagramMarginX: 50, diagramMarginY: 30, @@ -65,13 +65,13 @@ export const bounds = { } }, updateBounds: function (startx, starty, stopx, stopy) { - var _self = this - var cnt = 0 + const _self = this + let cnt = 0 function updateFn (type) { return function updateItemBounds (item) { cnt++ // The loop sequenceItems is a stack so the biggest margins in the beginning of the sequenceItems - var n = _self.sequenceItems.length - cnt + 1 + const n = _self.sequenceItems.length - cnt + 1 _self.updateVal(item, 'starty', starty - n * conf.boxMargin, Math.min) _self.updateVal(item, 'stopy', stopy + n * conf.boxMargin, Math.max) @@ -93,12 +93,10 @@ export const bounds = { this.activations.forEach(updateFn('activation')) }, insert: function (startx, starty, stopx, stopy) { - var _startx, _starty, _stopx, _stopy - - _startx = Math.min(startx, stopx) - _stopx = Math.max(startx, stopx) - _starty = Math.min(starty, stopy) - _stopy = Math.max(starty, stopy) + const _startx = Math.min(startx, stopx) + const _stopx = Math.max(startx, stopx) + const _starty = Math.min(starty, stopy) + const _stopy = Math.max(starty, stopy) this.updateVal(bounds.data, 'startx', _startx, Math.min) this.updateVal(bounds.data, 'starty', _starty, Math.min) @@ -108,9 +106,9 @@ export const bounds = { this.updateBounds(_startx, _starty, _stopx, _stopy) }, newActivation: function (message, diagram) { - var actorRect = parser.yy.getActors()[message.from.actor] - var stackedSize = actorActivations(message.from.actor).length - var x = actorRect.x + conf.width / 2 + (stackedSize - 1) * conf.activationWidth / 2 + const actorRect = parser.yy.getActors()[message.from.actor] + const stackedSize = actorActivations(message.from.actor).length + const x = actorRect.x + conf.width / 2 + (stackedSize - 1) * conf.activationWidth / 2 this.activations.push({ startx: x, starty: this.verticalPos + 2, @@ -122,21 +120,21 @@ export const bounds = { }, endActivation: function (message) { // find most recent activation for given actor - var lastActorActivationIdx = this.activations + const lastActorActivationIdx = this.activations .map(function (activation) { return activation.actor }) .lastIndexOf(message.from.actor) - var activation = this.activations.splice(lastActorActivationIdx, 1)[0] + const activation = this.activations.splice(lastActorActivationIdx, 1)[0] return activation }, newLoop: function (title) { this.sequenceItems.push({ startx: undefined, starty: this.verticalPos, stopx: undefined, stopy: undefined, title: title }) }, endLoop: function () { - var loop = this.sequenceItems.pop() + const loop = this.sequenceItems.pop() return loop }, addSectionToLoop: function (message) { - var loop = this.sequenceItems.pop() + const loop = this.sequenceItems.pop() loop.sections = loop.sections || [] loop.sectionTitles = loop.sectionTitles || [] loop.sections.push(bounds.getVerticalPos()) @@ -161,17 +159,17 @@ export const bounds = { * @param pos The position if the actor in the liost of actors * @param description The text in the box */ -var drawNote = function (elem, startx, verticalPos, msg, forceWidth) { - var rect = svgDraw.getNoteRect() +const drawNote = function (elem, startx, verticalPos, msg, forceWidth) { + const rect = svgDraw.getNoteRect() rect.x = startx rect.y = verticalPos rect.width = forceWidth || conf.width rect.class = 'note' - var g = elem.append('g') - var rectElem = svgDraw.drawRect(g, rect) + let g = elem.append('g') + const rectElem = svgDraw.drawRect(g, rect) - var textObj = svgDraw.getTextObj() + const textObj = svgDraw.getTextObj() textObj.x = startx - 4 textObj.y = verticalPos - 13 textObj.textMargin = conf.noteMargin @@ -179,9 +177,9 @@ var drawNote = function (elem, startx, verticalPos, msg, forceWidth) { textObj.text = msg.message textObj.class = 'noteText' - var textElem = svgDraw.drawText(g, textObj, rect.width - conf.noteMargin) + let textElem = svgDraw.drawText(g, textObj, rect.width - conf.noteMargin) - var textHeight = textElem[0][0].getBBox().height + let textHeight = textElem[0][0].getBBox().height if (!forceWidth && textHeight > conf.width) { textElem.remove() g = elem.append('g') @@ -207,34 +205,32 @@ var drawNote = function (elem, startx, verticalPos, msg, forceWidth) { * @param txtCenter * @param msg */ -var drawMessage = function (elem, startx, stopx, verticalPos, msg) { - var g = elem.append('g') - var txtCenter = startx + (stopx - startx) / 2 +const drawMessage = function (elem, startx, stopx, verticalPos, msg) { + const g = elem.append('g') + const txtCenter = startx + (stopx - startx) / 2 - var textElem = g.append('text') // text label for the x axis + const textElem = g.append('text') // text label for the x axis .attr('x', txtCenter) .attr('y', verticalPos - 7) .style('text-anchor', 'middle') .attr('class', 'messageText') .text(msg.message) - var textWidth - + let textWidth if (typeof textElem[0][0].getBBox !== 'undefined') { textWidth = textElem[0][0].getBBox().width } else { textWidth = textElem[0][0].getBoundingClientRect() } - var line - + let line if (startx === stopx) { line = g.append('path') .attr('d', 'M ' + startx + ',' + verticalPos + ' C ' + (startx + 60) + ',' + (verticalPos - 10) + ' ' + (startx + 60) + ',' + (verticalPos + 30) + ' ' + startx + ',' + (verticalPos + 20)) bounds.bumpVerticalPos(30) - var dx = Math.max(textWidth / 2, 100) + const dx = Math.max(textWidth / 2, 100) bounds.insert(startx - dx, bounds.getVerticalPos() - 10, stopx + dx, bounds.getVerticalPos()) } else { line = g.append('line') @@ -253,7 +249,7 @@ var drawMessage = function (elem, startx, stopx, verticalPos, msg) { line.attr('class', 'messageLine0') } - var url = '' + let url = '' if (conf.arrowMarkerAbsolute) { url = window.location.protocol + '//' + window.location.host + window.location.pathname + window.location.search url = url.replace(/\(/g, '\\(') @@ -273,10 +269,9 @@ var drawMessage = function (elem, startx, stopx, verticalPos, msg) { } export const drawActors = function (diagram, actors, actorKeys, verticalPos) { - var i // Draw the actors - for (i = 0; i < actorKeys.length; i++) { - var key = actorKeys[i] + for (let i = 0; i < actorKeys.length; i++) { + const key = actorKeys[i] // Add some rendering data to the object actors[key].x = i * conf.actorMargin + i * conf.width @@ -294,26 +289,26 @@ export const drawActors = function (diagram, actors, actorKeys, verticalPos) { } export const setConf = function (cnf) { - var keys = Object.keys(cnf) + const keys = Object.keys(cnf) keys.forEach(function (key) { conf[key] = cnf[key] }) } -var actorActivations = function (actor) { +const actorActivations = function (actor) { return bounds.activations.filter(function (activation) { return activation.actor === actor }) } -var actorFlowVerticaBounds = function (actor) { +const actorFlowVerticaBounds = function (actor) { // handle multiple stacked activations for same actor - var actors = parser.yy.getActors() - var activations = actorActivations(actor) + const actors = parser.yy.getActors() + const activations = actorActivations(actor) - var left = activations.reduce(function (acc, activation) { return Math.min(acc, activation.startx) }, actors[actor].x + conf.width / 2) - var right = activations.reduce(function (acc, activation) { return Math.max(acc, activation.stopx) }, actors[actor].x + conf.width / 2) + const left = activations.reduce(function (acc, activation) { return Math.min(acc, activation.startx) }, actors[actor].x + conf.width / 2) + const right = activations.reduce(function (acc, activation) { return Math.max(acc, activation.stopx) }, actors[actor].x + conf.width / 2) return [left, right] } @@ -327,17 +322,17 @@ export const draw = function (text, id) { parser.parse(text + '\n') bounds.init() - var diagram = d3.select('#' + id) + const diagram = d3.select('#' + id) - var startx - var stopx - var forceWidth + let startx + let stopx + let forceWidth // Fetch data from the parsing - var actors = parser.yy.getActors() - var actorKeys = parser.yy.getActorKeys() - var messages = parser.yy.getMessages() - var title = parser.yy.getTitle() + const actors = parser.yy.getActors() + const actorKeys = parser.yy.getActorKeys() + const messages = parser.yy.getMessages() + const title = parser.yy.getTitle() drawActors(diagram, actors, actorKeys, 0) // The arrow head definition is attached to the svg once @@ -345,7 +340,7 @@ export const draw = function (text, id) { svgDraw.insertArrowCrossHead(diagram) function activeEnd (msg, verticalPos) { - var activationData = bounds.endActivation(msg) + const activationData = bounds.endActivation(msg) if (activationData.starty + 18 > verticalPos) { activationData.starty = verticalPos - 6 verticalPos += 12 @@ -355,12 +350,11 @@ export const draw = function (text, id) { bounds.insert(activationData.startx, verticalPos - 10, activationData.stopx, verticalPos) } - // var lastMsg + // const lastMsg // Draw the messages/signals messages.forEach(function (msg) { - var loopData - + let loopData switch (msg.type) { case parser.yy.LINETYPE.NOTE: bounds.bumpVerticalPos(conf.boxMargin) @@ -445,16 +439,16 @@ export const draw = function (text, id) { try { // lastMsg = msg bounds.bumpVerticalPos(conf.messageMargin) - var fromBounds = actorFlowVerticaBounds(msg.from) - var toBounds = actorFlowVerticaBounds(msg.to) - var fromIdx = fromBounds[0] <= toBounds[0] ? 1 : 0 - var toIdx = fromBounds[0] < toBounds[0] ? 0 : 1 + const fromBounds = actorFlowVerticaBounds(msg.from) + const toBounds = actorFlowVerticaBounds(msg.to) + const fromIdx = fromBounds[0] <= toBounds[0] ? 1 : 0 + const toIdx = fromBounds[0] < toBounds[0] ? 0 : 1 startx = fromBounds[fromIdx] stopx = toBounds[toIdx] - var verticalPos = bounds.getVerticalPos() + const verticalPos = bounds.getVerticalPos() drawMessage(diagram, startx, stopx, verticalPos, msg) - var allBounds = fromBounds.concat(toBounds) + const allBounds = fromBounds.concat(toBounds) bounds.insert(Math.min.apply(null, allBounds), verticalPos, Math.max.apply(null, allBounds), verticalPos) } catch (e) { console.error('error while drawing message', e) @@ -468,20 +462,19 @@ export const draw = function (text, id) { drawActors(diagram, actors, actorKeys, bounds.getVerticalPos()) } - var box = bounds.getBounds() + const box = bounds.getBounds() // Adjust line height of actor lines now that the height of the diagram is known logger.debug('For line height fix Querying: #' + id + ' .actor-line') - var actorLines = d3.selectAll('#' + id + ' .actor-line') + const actorLines = d3.selectAll('#' + id + ' .actor-line') actorLines.attr('y2', box.stopy) - var height = box.stopy - box.starty + 2 * conf.diagramMarginY - + let height = box.stopy - box.starty + 2 * conf.diagramMarginY if (conf.mirrorActors) { height = height - conf.boxMargin + conf.bottomMarginAdj } - var width = (box.stopx - box.startx) + (2 * conf.diagramMarginX) + const width = (box.stopx - box.startx) + (2 * conf.diagramMarginX) if (title) { diagram.append('text') @@ -498,7 +491,7 @@ export const draw = function (text, id) { diagram.attr('height', height) diagram.attr('width', width) } - var extraVertForTitle = title ? 40 : 0 + const extraVertForTitle = title ? 40 : 0 diagram.attr('viewBox', (box.startx - conf.diagramMarginX) + ' -' + (conf.diagramMarginY + extraVertForTitle) + ' ' + width + ' ' + (height + extraVertForTitle)) } diff --git a/src/diagrams/sequenceDiagram/svgDraw.js b/src/diagrams/sequenceDiagram/svgDraw.js index ca5eb9cd7..4660dce8d 100644 --- a/src/diagrams/sequenceDiagram/svgDraw.js +++ b/src/diagrams/sequenceDiagram/svgDraw.js @@ -1,5 +1,5 @@ export const drawRect = function (elem, rectData) { - var rectElem = elem.append('rect') + const rectElem = elem.append('rect') rectElem.attr('x', rectData.x) rectElem.attr('y', rectData.y) rectElem.attr('fill', rectData.fill) @@ -18,9 +18,9 @@ export const drawRect = function (elem, rectData) { export const drawText = function (elem, textData, width) { // Remove and ignore br:s - var nText = textData.text.replace(//ig, ' ') + const nText = textData.text.replace(//ig, ' ') - var textElem = elem.append('text') + const textElem = elem.append('text') textElem.attr('x', textData.x) textElem.attr('y', textData.y) textElem.style('text-anchor', textData.anchor) @@ -29,7 +29,7 @@ export const drawText = function (elem, textData, width) { textElem.attr('class', textData.class) } - var span = textElem.append('tspan') + const span = textElem.append('tspan') span.attr('x', textData.x + textData.textMargin * 2) span.attr('fill', textData.fill) span.text(nText) @@ -53,7 +53,7 @@ export const drawLabel = function (elem, txtObject) { (x + width - cut * 1.2) + ',' + (y + height) + ' ' + (x) + ',' + (y + height) } - var polygon = elem.append('polygon') + const polygon = elem.append('polygon') polygon.attr('points', genPoints(txtObject.x, txtObject.y, 50, 20, 7)) polygon.attr('class', 'labelBox') @@ -61,7 +61,7 @@ export const drawLabel = function (elem, txtObject) { txtObject.x = txtObject.x + 0.5 * txtObject.labelMargin drawText(elem, txtObject) } -var actorCnt = -1 +let actorCnt = -1 /** * Draws an actor in the diagram with the attaced line * @param center - The center of the the actor @@ -69,8 +69,8 @@ var actorCnt = -1 * @param description The text in the box */ export const drawActor = function (elem, left, verticalPos, description, conf) { - var center = left + (conf.width / 2) - var g = elem.append('g') + const center = left + (conf.width / 2) + const g = elem.append('g') if (verticalPos === 0) { actorCnt++ g.append('line') @@ -84,7 +84,7 @@ export const drawActor = function (elem, left, verticalPos, description, conf) { .attr('stroke', '#999') } - var rect = getNoteRect() + const rect = getNoteRect() rect.x = left rect.y = verticalPos rect.fill = '#eaeaea' @@ -109,8 +109,8 @@ export const anchorElement = function (elem) { * @param verticalPos - precise y cooridnate of bottom activation box edge */ export const drawActivation = function (elem, bounds, verticalPos) { - var rect = getNoteRect() - var g = bounds.anchored + const rect = getNoteRect() + const g = bounds.anchored rect.x = bounds.startx rect.y = bounds.starty rect.fill = '#f4f4f4' @@ -126,8 +126,8 @@ export const drawActivation = function (elem, bounds, verticalPos) { * @param description The text in the box */ export const drawLoop = function (elem, bounds, labelText, conf) { - var g = elem.append('g') - var drawLoopLine = function (startx, starty, stopx, stopy) { + const g = elem.append('g') + const drawLoopLine = function (startx, starty, stopx, stopy) { return g.append('line') .attr('x1', startx) .attr('y1', starty) @@ -145,7 +145,7 @@ export const drawLoop = function (elem, bounds, labelText, conf) { }) } - var txt = getTextObj() + let txt = getTextObj() txt.text = labelText txt.x = bounds.startx txt.y = bounds.starty @@ -192,8 +192,8 @@ export const insertArrowHead = function (elem) { * Setup arrow head and define the marker. The result is appended to the svg. */ export const insertArrowCrossHead = function (elem) { - var defs = elem.append('defs') - var marker = defs.append('marker') + const defs = elem.append('defs') + const marker = defs.append('marker') .attr('id', 'crosshead') .attr('markerWidth', 15) .attr('markerHeight', 8) @@ -220,7 +220,7 @@ export const insertArrowCrossHead = function (elem) { } export const getTextObj = function () { - var txt = { + const txt = { x: 0, y: 0, 'fill': 'black', @@ -236,7 +236,7 @@ export const getTextObj = function () { } export const getNoteRect = function () { - var rect = { + const rect = { x: 0, y: 0, fill: '#EDF2AE', @@ -250,9 +250,9 @@ export const getNoteRect = function () { return rect } -var _drawTextCandidateFunc = (function () { +const _drawTextCandidateFunc = (function () { function byText (content, g, x, y, width, height, textAttrs) { - var text = g.append('text') + const text = g.append('text') .attr('x', x + width / 2).attr('y', y + height / 2 + 5) .style('text-anchor', 'middle') .text(content) @@ -260,7 +260,7 @@ var _drawTextCandidateFunc = (function () { } function byTspan (content, g, x, y, width, height, textAttrs) { - var text = g.append('text') + const text = g.append('text') .attr('x', x + width / 2).attr('y', y) .style('text-anchor', 'middle') text.append('tspan') @@ -272,7 +272,7 @@ var _drawTextCandidateFunc = (function () { x: x + width / 2, y: y, width: width, height: height }, 0) // vertical aligment after d3textwrap expans tspan to multiple tspans - var tspans = text.selectAll('tspan') + let tspans = text.selectAll('tspan') if (tspans.length > 0 && tspans[0].length > 0) { tspans = tspans[0] // set y of to the mid y of the first line @@ -285,12 +285,12 @@ var _drawTextCandidateFunc = (function () { } function byFo (content, g, x, y, width, height, textAttrs) { - var s = g.append('switch') - var f = s.append('foreignObject') + const s = g.append('switch') + const f = s.append('foreignObject') .attr('x', x).attr('y', y) .attr('width', width).attr('height', height) - var text = f.append('div').style('display', 'table') + const text = f.append('div').style('display', 'table') .style('height', '100%').style('width', '100%') text.append('div').style('display', 'table-cell') @@ -302,7 +302,7 @@ var _drawTextCandidateFunc = (function () { } function _setTextAttrs (toText, fromTextAttrsDict) { - for (var key in fromTextAttrsDict) { + for (const key in fromTextAttrsDict) { if (fromTextAttrsDict.hasOwnProperty(key)) { toText.attr(key, fromTextAttrsDict[key]) }