Adding rendering for Subexp

This commit is contained in:
Jeff Avallone 2014-12-07 21:16:23 -05:00
parent 52a0863449
commit ae064b2b8e
3 changed files with 75 additions and 2 deletions

View File

@ -64,6 +64,17 @@
fill: #cbcbba;
}
.subexp .subexp-label {
font-size: 10px;
}
.subexp .subexp-outline {
stroke: #a0a0a0;
stroke-dasharray: 6,2;
stroke-width: 2px;
fill: transparent;
}
.placeholder text {
fill: #fff;
font-weight: bold;

View File

@ -16,7 +16,7 @@ grammar JavascriptRegexp
/ "{" _min:[0-9]+ ",}"
/ "{" _exact:[0-9]+ "}" ) <RepeatSpec>
repeat_greedy <- "?"
subexp <- "(" ( subexp_no_capture / subexp_positive_lookahead / subexp_negative_lookahead )? regexp ")" <Subexp>
subexp <- "(" _capture:( subexp_no_capture / subexp_positive_lookahead / subexp_negative_lookahead )? regexp ")" <Subexp>
subexp_no_capture <- "?:"
subexp_positive_lookahead <- "?="
subexp_negative_lookahead <- "?!"

View File

@ -2,5 +2,67 @@ import _ from 'lodash';
import Base from './base.js';
export default _.extend({}, Base, {
type: 'subexp'
type: 'subexp',
labelMap: {
'?:': '',
'?=': 'positive lookahead',
'?!': 'negative lookahead'
},
render() {
var label = this.groupLabel();
if (label) {
this.container.addClass('subexp');
this.label = this.container.text()
.addClass('subexp-label')
.attr({
text: label
});
this.outline = this.container.rect()
.addClass('subexp-outline')
.attr({
rx: 3,
ry: 3
});
this.regexp.container = this.container.group().transform(Snap.matrix()
.translate(10, 10));
this.regexp.render();
} else {
this.regexp.container = this.container;
this.regexp.render();
}
},
position() {
var box;
this.regexp.position();
if (this.outline) {
box = this.regexp.container.getBBox();
this.outline.attr({
width: box.width + 20,
height: box.height + 20
});
this.container.path(Snap.format('M0,{content.cy}h10M{content.x2},{content.cy}H{container.x2}', {
container: this.container.getBBox(),
content: box
}));
}
},
groupLabel() {
if (_.has(this.labelMap, this._capture.textValue)) {
return this.labelMap[this._capture.textValue];
} else {
return 'group #TBA';
}
}
});