Merge pull request #30 from ThibWeb/feature/loop-label-tooltip

Loop label tooltip. Fix #14
This commit is contained in:
Jeff Avallone 2016-07-31 11:35:05 -04:00 committed by GitHub
commit a455dc8f66
4 changed files with 105 additions and 1 deletions

View File

@ -265,6 +265,74 @@ describe('parser/javascript/repeat.js', function() {
}); });
describe('tooltip property', function() {
beforeEach(function() {
this.node = new javascript.Parser('*').__consume__repeat();
});
_.each([
{
minimum: 1,
maximum: -1,
tooltip: undefined
},
{
minimum: 0,
maximum: 0,
tooltip: undefined
},
{
minimum: 2,
maximum: -1,
tooltip: 'repeats 2+ times in total'
},
{
minimum: 3,
maximum: -1,
tooltip: 'repeats 3+ times in total'
},
{
minimum: 0,
maximum: 2,
tooltip: 'repeats at most 2 times in total'
},
{
minimum: 0,
maximum: 3,
tooltip: 'repeats at most 3 times in total'
},
{
minimum: 2,
maximum: 2,
tooltip: 'repeats 2 times in total'
},
{
minimum: 3,
maximum: 3,
tooltip: 'repeats 3 times in total'
},
{
minimum: 2,
maximum: 3,
tooltip: 'repeats 2\u20263 times in total'
},
{
minimum: 3,
maximum: 4,
tooltip: 'repeats 3\u20264 times in total'
}
], t => {
it(`is "${t.tooltip}" when minimum=${t.minimum} and maximum=${t.maximum}`, function() {
this.node.minimum = t.minimum;
this.node.maximum = t.maximum;
expect(this.node.tooltip).toEqual(t.tooltip);
});
});
});
describe('#skipPath', function() { describe('#skipPath', function() {
beforeEach(function() { beforeEach(function() {

View File

@ -53,12 +53,19 @@ export default {
// be matched. // be matched.
loopLabel() { loopLabel() {
var labelStr = this.repeat.label, var labelStr = this.repeat.label,
label, labelBox, box; tooltipStr = this.repeat.tooltip,
label, tooltip, labelBox, box;
if (labelStr) { if (labelStr) {
label = this.container.text(0, 0, [labelStr]) label = this.container.text(0, 0, [labelStr])
.addClass('repeat-label'); .addClass('repeat-label');
if (tooltipStr) {
tooltip = Snap().el('title')
.append(this.container.text(0, 0, tooltipStr));
label.append(tooltip);
}
box = this.getBBox(); box = this.getBBox();
labelBox = label.getBBox(); labelBox = label.getBBox();
label.transform(Snap.matrix().translate( label.transform(Snap.matrix().translate(

View File

@ -47,6 +47,31 @@ export default {
} }
} }
} }
},
// Tooltip to place of loop path label to provide further details.
tooltip: {
get: function() {
let repeatCount;
if (this.minimum === this.maximum) {
if (this.minimum === 0) {
repeatCount = undefined;
} else {
repeatCount = formatTimes(this.minimum);
}
} else if (this.minimum <= 1 && this.maximum >= 2) {
repeatCount = `at most ${formatTimes(this.maximum)}`;
} else if (this.minimum >= 2) {
if (this.maximum === -1) {
repeatCount = `${this.minimum}+ times`;
} else {
repeatCount = `${this.minimum}\u2026${formatTimes(this.maximum)}`;
}
}
console.log(repeatCount, this.minimum, this.maximum);
return repeatCount ? `repeats ${repeatCount} in total` : repeatCount;
}
} }
}, },

View File

@ -50,6 +50,10 @@ circle {
font-size: 10px; font-size: 10px;
} }
.repeat-label {
cursor: help;
}
.subexp .subexp-label tspan, .subexp .subexp-label tspan,
.charset .charset-label tspan { .charset .charset-label tspan {
dominant-baseline: text-after-edge; dominant-baseline: text-after-edge;