Replace var with const

This commit is contained in:
Tyler Long 2017-09-14 20:35:00 +08:00
parent 2e0bfaeb74
commit 7c74107f36
3 changed files with 94 additions and 101 deletions

View File

@ -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 })

View File

@ -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))
}

View File

@ -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(/<br\/?>/ig, ' ')
const nText = textData.text.replace(/<br\/?>/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 <text> 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])
}