git push origin master Merge branch 'paulbland-sequence-numbers'
This commit is contained in:
commit
f506c795d6
|
@ -35,7 +35,9 @@ const conf = {
|
|||
activationWidth: 10,
|
||||
|
||||
// text placement as: tspan | fo | old only text as before
|
||||
textPlacement: 'tspan'
|
||||
textPlacement: 'tspan',
|
||||
|
||||
showSequenceNumbers: false
|
||||
}
|
||||
|
||||
export const bounds = {
|
||||
|
@ -205,7 +207,7 @@ const drawNote = function (elem, startx, verticalPos, msg, forceWidth) {
|
|||
* @param txtCenter
|
||||
* @param msg
|
||||
*/
|
||||
const drawMessage = function (elem, startx, stopx, verticalPos, msg) {
|
||||
const drawMessage = function (elem, startx, stopx, verticalPos, msg, sequenceIndex) {
|
||||
const g = elem.append('g')
|
||||
const txtCenter = startx + (stopx - startx) / 2
|
||||
|
||||
|
@ -265,6 +267,20 @@ const drawMessage = function (elem, startx, stopx, verticalPos, msg) {
|
|||
if (msg.type === parser.yy.LINETYPE.SOLID_CROSS || msg.type === parser.yy.LINETYPE.DOTTED_CROSS) {
|
||||
line.attr('marker-end', 'url(' + url + '#crosshead)')
|
||||
}
|
||||
|
||||
// add node number
|
||||
if (conf.showSequenceNumbers) {
|
||||
line.attr('marker-start', 'url(' + url + '#sequencenumber)')
|
||||
g.append('text')
|
||||
.attr('x', startx)
|
||||
.attr('y', verticalPos + 4)
|
||||
.attr('font-family', 'sans-serif')
|
||||
.attr('font-size', '12px')
|
||||
.attr('text-anchor', 'middle')
|
||||
.attr('textLength', '16px')
|
||||
.attr('class', 'sequenceNumber')
|
||||
.text(sequenceIndex)
|
||||
}
|
||||
}
|
||||
|
||||
export const drawActors = function (diagram, actors, actorKeys, verticalPos) {
|
||||
|
@ -337,6 +353,7 @@ export const draw = function (text, id) {
|
|||
// The arrow head definition is attached to the svg once
|
||||
svgDraw.insertArrowHead(diagram)
|
||||
svgDraw.insertArrowCrossHead(diagram)
|
||||
svgDraw.insertSequenceNumber(diagram)
|
||||
|
||||
function activeEnd (msg, verticalPos) {
|
||||
const activationData = bounds.endActivation(msg)
|
||||
|
@ -352,6 +369,7 @@ export const draw = function (text, id) {
|
|||
// const lastMsg
|
||||
|
||||
// Draw the messages/signals
|
||||
let sequenceIndex = 1
|
||||
messages.forEach(function (msg) {
|
||||
let loopData
|
||||
switch (msg.type) {
|
||||
|
@ -446,13 +464,24 @@ export const draw = function (text, id) {
|
|||
stopx = toBounds[toIdx]
|
||||
|
||||
const verticalPos = bounds.getVerticalPos()
|
||||
drawMessage(diagram, startx, stopx, verticalPos, msg)
|
||||
drawMessage(diagram, startx, stopx, verticalPos, msg, sequenceIndex)
|
||||
const allBounds = fromBounds.concat(toBounds)
|
||||
bounds.insert(Math.min.apply(null, allBounds), verticalPos, Math.max.apply(null, allBounds), verticalPos)
|
||||
} catch (e) {
|
||||
logger.error('error while drawing message', e)
|
||||
}
|
||||
}
|
||||
// Increment sequence counter if msg.type is a line (and not another event like activation or note, etc)
|
||||
if ([
|
||||
parser.yy.LINETYPE.SOLID_OPEN,
|
||||
parser.yy.LINETYPE.DOTTED_OPEN,
|
||||
parser.yy.LINETYPE.SOLID,
|
||||
parser.yy.LINETYPE.DOTTED,
|
||||
parser.yy.LINETYPE.SOLID_CROSS,
|
||||
parser.yy.LINETYPE.DOTTED_CROSS
|
||||
].includes(msg.type)) {
|
||||
sequenceIndex++
|
||||
}
|
||||
})
|
||||
|
||||
if (conf.mirrorActors) {
|
||||
|
|
|
@ -181,6 +181,23 @@ export const insertArrowHead = function (elem) {
|
|||
.append('path')
|
||||
.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')
|
||||
.attr('id', 'sequencenumber')
|
||||
.attr('refX', 15)
|
||||
.attr('refY', 15)
|
||||
.attr('markerWidth', 60)
|
||||
.attr('markerHeight', 40)
|
||||
.attr('orient', 'auto')
|
||||
.append('circle')
|
||||
.attr('cx', 15)
|
||||
.attr('cy', 15)
|
||||
.attr('r', 6)
|
||||
// .style("fill", '#f00');
|
||||
}
|
||||
/**
|
||||
* Setup arrow head and define the marker. The result is appended to the svg.
|
||||
*/
|
||||
|
@ -315,6 +332,7 @@ export default {
|
|||
drawActivation,
|
||||
drawLoop,
|
||||
insertArrowHead,
|
||||
insertSequenceNumber,
|
||||
insertArrowCrossHead,
|
||||
getTextObj,
|
||||
getNoteRect
|
||||
|
|
|
@ -173,7 +173,12 @@ const config = {
|
|||
/**
|
||||
* **rightAngles** - this will display arrows that start and begin at the same node as right angles, rather than a curve
|
||||
*/
|
||||
rightAngles: false
|
||||
rightAngles: false,
|
||||
/**
|
||||
* **showSequenceNumbers** - this will show the node numbers
|
||||
*/
|
||||
showSequenceNumbers: false
|
||||
|
||||
},
|
||||
|
||||
/** ### gantt
|
||||
|
|
|
@ -33,6 +33,7 @@ $noteBorderColor: $border2;
|
|||
$noteBkgColor: #fff5ad;
|
||||
$activationBorderColor: #666;
|
||||
$activationBkgColor: #f4f4f4;
|
||||
$sequenceNumberColor: white;
|
||||
|
||||
/* Gantt chart variables */
|
||||
|
||||
|
|
|
@ -31,6 +31,7 @@ $noteBorderColor: $border2;
|
|||
$noteBkgColor: #fff5ad;
|
||||
$activationBorderColor: #666;
|
||||
$activationBkgColor: #f4f4f4;
|
||||
$sequenceNumberColor: white;
|
||||
|
||||
/* Gantt chart variables */
|
||||
|
||||
|
|
|
@ -32,6 +32,7 @@ $noteBorderColor: $border2;
|
|||
$noteBkgColor: #fff5ad;
|
||||
$activationBorderColor: #666;
|
||||
$activationBkgColor: #f4f4f4;
|
||||
$sequenceNumberColor: white;
|
||||
|
||||
/* Gantt chart variables */
|
||||
|
||||
|
|
|
@ -36,6 +36,7 @@ $noteBorderColor: darken($note, 60%);
|
|||
$noteBkgColor: $note;
|
||||
$activationBorderColor: #666;
|
||||
$activationBkgColor: #f4f4f4;
|
||||
$sequenceNumberColor: white;
|
||||
|
||||
/* Gantt chart variables */
|
||||
|
||||
|
|
|
@ -28,6 +28,14 @@ text.actor {
|
|||
fill: $signalColor;
|
||||
}
|
||||
|
||||
.sequenceNumber {
|
||||
fill: $sequenceNumberColor;
|
||||
}
|
||||
|
||||
#sequencenumber {
|
||||
fill: $signalColor;
|
||||
}
|
||||
|
||||
#crosshead path {
|
||||
fill: $signalColor !important;
|
||||
stroke: $signalColor !important;
|
||||
|
|
Loading…
Reference in New Issue