Simplifying code related to passing rendering through to nested node

This commit is contained in:
Jeff Avallone 2014-12-10 19:01:57 -05:00
parent ff7525a6e4
commit f0c25dfc41
11 changed files with 115 additions and 113 deletions

View File

@ -4,7 +4,7 @@ import Base from './base.js';
export default _.extend({}, Base, {
type: 'any-character',
render() {
_render() {
this.label = this.renderLabel(this.container, 'any character');
}
});

View File

@ -39,6 +39,24 @@ export default {
},
render() {
this._render();
},
position() {
if (this._proxy) {
this._proxy.position();
} else {
this._position();
}
},
proxy(node) {
this._proxy = node;
this._proxy.setContainer(this.container);
this._proxy.render();
},
_render() {
console.log(this);
this.container.addClass('placeholder');
@ -51,7 +69,7 @@ export default {
});
},
position() {
_position() {
this.positionLabel(this.label);
},

View File

@ -4,7 +4,7 @@ import Base from './base.js';
export default _.extend({}, Base, {
type: 'charset',
render() {
_render() {
this.renderLabeledBox(this.invert() ? 'None of:' : 'One of:');
this.partContainer = this.container.group();
@ -15,7 +15,7 @@ export default _.extend({}, Base, {
}).bind(this));
},
position() {
_position() {
_.invoke(this.parts.elements, 'position');
this.spaceVertically(this.parts.elements, {

View File

@ -4,7 +4,7 @@ import Base from './base.js';
export default _.extend({}, Base, {
type: 'charset-range',
render() {
_render() {
this.first.setContainer(this.container.group());
this.first.render();
@ -17,7 +17,7 @@ export default _.extend({}, Base, {
});
},
position() {
_position() {
var box;
this.first.position();

View File

@ -12,7 +12,7 @@ export default _.extend({}, Base, {
return this.esc.arg.textValue;
},
render() {
_render() {
this.label = this.renderLabel(this.container, _.result(this, this.code()));
this.label.select('rect').attr({

View File

@ -4,7 +4,7 @@ import Base from './base.js';
export default _.extend({}, Base, {
type: 'literal',
render() {
_render() {
this.label = this.renderLabel(this.container, '"' + this.literal.textValue + '"');
this.label.select('rect').attr({

View File

@ -4,7 +4,7 @@ import Base from './base.js';
export default _.extend({}, Base, {
type: 'match',
render() {
_render() {
var parts = this.parts();
if (this.anchorStart() || this.anchorEnd() || parts.length !== 1) {
@ -26,33 +26,27 @@ export default _.extend({}, Base, {
.addClass('anchor');
}
} else {
this.content = parts[0];
this.content.setContainer(this.container);
this.content.render();
this.proxy(parts[0]);
}
},
position() {
_position() {
var items;
if (this.contents) {
if (this.contents.anchor_start) {
this.positionLabel(this.contents.anchor_start);
}
if (this.contents.anchor_end) {
this.positionLabel(this.contents.anchor_end);
}
_.invoke(this.contents.parts, 'position');
items = _(this.contents).values().flatten().value();
this.spaceHorizontally(items, {
padding: 10
});
} else {
this.content.position();
if (this.contents.anchor_start) {
this.positionLabel(this.contents.anchor_start);
}
if (this.contents.anchor_end) {
this.positionLabel(this.contents.anchor_end);
}
_.invoke(this.contents.parts, 'position');
items = _(this.contents).values().flatten().value();
this.spaceHorizontally(items, {
padding: 10
});
},
anchorStart() {

View File

@ -4,41 +4,38 @@ import Base from './base.js';
export default _.extend({}, Base, {
type: 'match-fragment',
render() {
_render() {
if (this._repeat.textValue === '') {
this._content.setContainer(this.container);
this.proxy(this._content);
} else {
this._content.setContainer(this.container.group());
this._content.render();
}
this._content.render();
},
position() {
_position() {
var box, paths = [];
this._content.position();
this._content.container.transform(this._repeat.contentPosition());
if (this._repeat.textValue !== '') {
this._content.container.transform(this._repeat.contentPosition());
box = this._content.getBBox();
box = this._content.getBBox();
if (this._repeat.hasSkip()) {
paths.push(Snap.format('M0,{cy}q10,0 10,-10v-{vert}q0,-10 10,-10h{horiz}q10,0 10,10v{vert}q0,10 10,10', _.extend({
vert: box.height / 2 - 10,
horiz: box.width - 10
}, box)));
}
if (this._repeat.hasSkip()) {
paths.push(Snap.format('M0,{cy}q10,0 10,-10v-{vert}q0,-10 10,-10h{horiz}q10,0 10,10v{vert}q0,10 10,10', _.extend({
vert: box.height / 2 - 10,
horiz: box.width - 10
}, box)));
}
if (this._repeat.hasLoop()) {
paths.push(Snap.format('M{x},{cy}q-10,0 -10,10v{vert}q0,10 10,10h{width}q10,0 10,-10v-{vert}q0,-10 -10,-10', _.extend({
vert: box.height / 2 - 10
}, box)));
}
if (this._repeat.hasLoop()) {
paths.push(Snap.format('M{x},{cy}q-10,0 -10,10v{vert}q0,10 10,10h{width}q10,0 10,-10v-{vert}q0,-10 -10,-10', _.extend({
vert: box.height / 2 - 10
}, box)));
}
if (paths.length) {
this.container.path(paths.join(''));
}
if (paths.length) {
this.container.path(paths.join(''));
}
}
});

View File

@ -4,12 +4,11 @@ import Base from './base.js';
export default _.extend({}, Base, {
type: 'regexp',
render() {
_render() {
var matches = this.matches();
if (matches.length === 1) {
matches[0].setContainer(this.container);
matches[0].render();
this.proxy(matches[0]);
} else {
this.matchContainer = this.container.group()
.addClass('regexp-matches');
@ -22,66 +21,63 @@ export default _.extend({}, Base, {
}
},
position() {
_position() {
var matches = this.matches(),
includeLines = (matches.length > 1),
containerBox,
paths;
_.invoke(matches, 'position');
if (includeLines) {
this.spaceVertically(matches, {
padding: 5
});
this.spaceVertically(matches, {
padding: 5
});
this.matchContainer.transform(Snap.matrix()
.translate(20, 0));
this.matchContainer.transform(Snap.matrix()
.translate(20, 0));
containerBox = this.getBBox();
paths = _.map(matches, match => {
var box = match.getBBox(),
direction = box.cy > containerBox.cy ? 1 : -1,
distance = Math.abs(box.cy - containerBox.cy),
pathStr;
containerBox = this.getBBox();
paths = _.map(matches, match => {
var box = match.getBBox(),
direction = box.cy > containerBox.cy ? 1 : -1,
distance = Math.abs(box.cy - containerBox.cy),
pathStr;
if (distance >= 15) {
pathStr = [
'M10,{box.cy}m0,{shift}q0,{curve} 10,{curve}',
'M{containerBox.width},{box.cy}m30,{shift}q0,{curve} -10,{curve}'
].join('');
} else {
pathStr = [
'M0,{containerBox.cy}c10,0 10,{anchor.y} 20,{anchor.y}',
'M{containerBox.width},{containerBox.cy}m40,0c-10,0 -10,{anchor.y} -20,{anchor.y}'
].join('');
if (distance >= 15) {
pathStr = [
'M10,{box.cy}m0,{shift}q0,{curve} 10,{curve}',
'M{containerBox.width},{box.cy}m30,{shift}q0,{curve} -10,{curve}'
].join('');
} else {
pathStr = [
'M0,{containerBox.cy}c10,0 10,{anchor.y} 20,{anchor.y}',
'M{containerBox.width},{containerBox.cy}m40,0c-10,0 -10,{anchor.y} -20,{anchor.y}'
].join('');
}
return Snap.format(pathStr, {
containerBox,
box,
shift: -10 * direction,
curve: 10 * direction,
anchor: {
x: box.x + 20,
y: box.cy - containerBox.cy
}
return Snap.format(pathStr, {
containerBox,
box,
shift: -10 * direction,
curve: 10 * direction,
anchor: {
x: box.x + 20,
y: box.cy - containerBox.cy
}
});
});
});
paths.push(Snap.format([
'M0,{box.cy}q10,0 10,-10V{top}',
'M0,{box.cy}q10,0 10,10V{bottom}',
'M{box.width},{box.cy}m40,0q-10,0 -10,-10V{top}',
'M{box.width},{box.cy}m40,0q-10,0 -10,10V{bottom}'
].join(''), {
box: containerBox,
top: _.first(matches).getBBox().cy + 10,
bottom: _.last(matches).getBBox().cy - 10
}));
paths.push(Snap.format([
'M0,{box.cy}q10,0 10,-10V{top}',
'M0,{box.cy}q10,0 10,10V{bottom}',
'M{box.width},{box.cy}m40,0q-10,0 -10,-10V{top}',
'M{box.width},{box.cy}m40,0q-10,0 -10,10V{bottom}'
].join(''), {
box: containerBox,
top: _.first(matches).getBBox().cy + 10,
bottom: _.last(matches).getBBox().cy - 10
}));
this.container.prepend(this.container.path(paths.join('')));
}
this.container.prepend(this.container.path(paths.join('')));
},
matches() {

View File

@ -4,7 +4,7 @@ import Base from './base.js';
export default _.extend({}, Base, {
type: 'root',
render() {
_render() {
this.regexp.setContainer(this.container.group().transform(Snap.matrix()
.translate(10, 0)));
this.regexp.render();
@ -17,7 +17,7 @@ export default _.extend({}, Base, {
.attr({ r: 5 });
},
position() {
_position() {
var contentBox;
this.regexp.position();

View File

@ -12,7 +12,7 @@ export default _.extend({}, Base, {
'?!': 'negative lookahead'
},
render() {
_render() {
var label = this.groupLabel();
if (label) {
@ -21,19 +21,16 @@ export default _.extend({}, Base, {
this.regexp.setContainer(this.container.group());
this.regexp.render();
} else {
this.regexp.setContainer(this.container);
this.regexp.render();
this.proxy(this.regexp);
}
},
position() {
_position() {
this.regexp.position();
if (this.groupLabel()) {
this.positionLabeledBox(this.regexp.container, {
padding: 10
});
}
this.positionLabeledBox(this.regexp.container, {
padding: 10
});
},
groupLabel() {