Folding _position methods into render method promises
This commit is contained in:
parent
29316bb2aa
commit
cb9785de91
@ -47,9 +47,6 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
var promise = this._render();
|
var promise = this._render();
|
||||||
if (!this._proxy) {
|
|
||||||
promise = promise.then(this._position.bind(this));
|
|
||||||
}
|
|
||||||
return promise.then(_.constant(this));
|
return promise.then(_.constant(this));
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -71,8 +68,6 @@ export default {
|
|||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
_position() {},
|
|
||||||
|
|
||||||
spaceHorizontally(items, options) {
|
spaceHorizontally(items, options) {
|
||||||
var verticalCenter = 0;
|
var verticalCenter = 0;
|
||||||
|
|
||||||
|
@ -6,23 +6,24 @@ export default _.extend({}, Base, {
|
|||||||
type: 'charset',
|
type: 'charset',
|
||||||
|
|
||||||
_render() {
|
_render() {
|
||||||
|
var partContainer;
|
||||||
|
|
||||||
this.renderLabeledBox(this.invert() ? 'None of:' : 'One of:');
|
this.renderLabeledBox(this.invert() ? 'None of:' : 'One of:');
|
||||||
|
|
||||||
this.partContainer = this.container.group();
|
partContainer = this.container.group();
|
||||||
|
|
||||||
return Q.all(_.map(this.parts.elements, (part => {
|
return Q.all(_.map(this.parts.elements, part => {
|
||||||
return part.render(this.partContainer.group());
|
return part.render(partContainer.group());
|
||||||
}).bind(this)));
|
}))
|
||||||
},
|
.then((() => {
|
||||||
|
this.spaceVertically(this.parts.elements, {
|
||||||
|
padding: 5
|
||||||
|
});
|
||||||
|
|
||||||
_position() {
|
this.positionLabeledBox(partContainer, {
|
||||||
this.spaceVertically(this.parts.elements, {
|
padding: 5
|
||||||
padding: 5
|
});
|
||||||
});
|
}).bind(this));
|
||||||
|
|
||||||
this.positionLabeledBox(this.partContainer, {
|
|
||||||
padding: 5
|
|
||||||
});
|
|
||||||
},
|
},
|
||||||
|
|
||||||
invert() {
|
invert() {
|
||||||
|
@ -6,7 +6,7 @@ export default _.extend({}, Base, {
|
|||||||
type: 'charset-range',
|
type: 'charset-range',
|
||||||
|
|
||||||
_render() {
|
_render() {
|
||||||
this.hyphen = this.container.text()
|
var hyphen = this.container.text()
|
||||||
.attr({
|
.attr({
|
||||||
text: '-'
|
text: '-'
|
||||||
});
|
});
|
||||||
@ -14,12 +14,11 @@ export default _.extend({}, Base, {
|
|||||||
return Q.all([
|
return Q.all([
|
||||||
this.first.render(this.container.group()),
|
this.first.render(this.container.group()),
|
||||||
this.last.render(this.container.group())
|
this.last.render(this.container.group())
|
||||||
]);
|
])
|
||||||
},
|
.then((() => {
|
||||||
|
this.spaceHorizontally([this.first, hyphen, this.last], {
|
||||||
_position() {
|
padding: 5
|
||||||
this.spaceHorizontally([this.first, this.hyphen, this.last], {
|
});
|
||||||
padding: 5
|
}).bind(this));
|
||||||
});
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
@ -27,18 +27,17 @@ export default _.extend({}, Base, {
|
|||||||
return part.render(this.container.group());
|
return part.render(this.container.group());
|
||||||
}).bind(this));
|
}).bind(this));
|
||||||
|
|
||||||
return Q.all(_([start, partPromises, end]).flatten().compact().value());
|
return Q.all(_([start, partPromises, end]).flatten().compact().value())
|
||||||
|
.then(((items) => {
|
||||||
|
this.spaceHorizontally(items, {
|
||||||
|
padding: 10
|
||||||
|
});
|
||||||
|
}).bind(this));
|
||||||
} else {
|
} else {
|
||||||
return this.proxy(parts[0]);
|
return this.proxy(parts[0]);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
_position(items) {
|
|
||||||
this.spaceHorizontally(items, {
|
|
||||||
padding: 10
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
anchorStart() {
|
anchorStart() {
|
||||||
return this._anchor_start.textValue !== '';
|
return this._anchor_start.textValue !== '';
|
||||||
},
|
},
|
||||||
|
@ -8,35 +8,34 @@ export default _.extend({}, Base, {
|
|||||||
if (this._repeat.textValue === '') {
|
if (this._repeat.textValue === '') {
|
||||||
return this.proxy(this._content);
|
return this.proxy(this._content);
|
||||||
} else {
|
} else {
|
||||||
return this._content.render(this.container.group());
|
return this._content.render(this.container.group())
|
||||||
}
|
.then((() => {
|
||||||
},
|
var box, paths = [];
|
||||||
|
|
||||||
_position() {
|
this._content.transform(this._repeat.contentPosition());
|
||||||
var box, paths = [];
|
|
||||||
|
|
||||||
this._content.transform(this._repeat.contentPosition());
|
box = this._content.getBBox();
|
||||||
|
|
||||||
box = this._content.getBBox();
|
if (this._repeat.hasSkip()) {
|
||||||
|
paths.push(Snap.format('M0,{box.cy}q10,0 10,-10v-{vert}q0,-10 10,-10h{horiz}q10,0 10,10v{vert}q0,10 10,10', {
|
||||||
|
box,
|
||||||
|
vert: box.height / 2 - 10,
|
||||||
|
horiz: box.width - 10
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
if (this._repeat.hasSkip()) {
|
if (this._repeat.hasLoop()) {
|
||||||
paths.push(Snap.format('M0,{box.cy}q10,0 10,-10v-{vert}q0,-10 10,-10h{horiz}q10,0 10,10v{vert}q0,10 10,10', {
|
paths.push(Snap.format('M{box.x},{box.cy}q-10,0 -10,10v{vert}q0,10 10,10h{box.width}q10,0 10,-10v-{vert}q0,-10 -10,-10', {
|
||||||
box,
|
box,
|
||||||
vert: box.height / 2 - 10,
|
vert: box.height / 2 - 10
|
||||||
horiz: box.width - 10
|
}));
|
||||||
}));
|
}
|
||||||
}
|
|
||||||
|
|
||||||
if (this._repeat.hasLoop()) {
|
if (paths.length) {
|
||||||
paths.push(Snap.format('M{box.x},{box.cy}q-10,0 -10,10v{vert}q0,10 10,10h{box.width}q10,0 10,-10v-{vert}q0,-10 -10,-10', {
|
this.container.prepend(
|
||||||
box,
|
this.container.path(paths.join('')));
|
||||||
vert: box.height / 2 - 10
|
}
|
||||||
}));
|
}).bind(this));
|
||||||
}
|
|
||||||
|
|
||||||
if (paths.length) {
|
|
||||||
this.container.prepend(
|
|
||||||
this.container.path(paths.join('')));
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
@ -6,78 +6,76 @@ export default _.extend({}, Base, {
|
|||||||
type: 'regexp',
|
type: 'regexp',
|
||||||
|
|
||||||
_render() {
|
_render() {
|
||||||
var matches = this.matches();
|
var matches = this.matches(),
|
||||||
|
matchContainer;
|
||||||
|
|
||||||
if (matches.length === 1) {
|
if (matches.length === 1) {
|
||||||
return this.proxy(matches[0]);
|
return this.proxy(matches[0]);
|
||||||
} else {
|
} else {
|
||||||
this.matchContainer = this.container.group()
|
matchContainer = this.container.group()
|
||||||
.addClass('regexp-matches');
|
.addClass('regexp-matches')
|
||||||
|
.transform(Snap.matrix()
|
||||||
|
.translate(20, 0));
|
||||||
|
|
||||||
return Q.all(_.map(matches, (match => {
|
return Q.all(_.map(matches, match => {
|
||||||
return match.render(this.matchContainer.group());
|
return match.render(matchContainer.group());
|
||||||
}).bind(this)));
|
}))
|
||||||
|
.then((() => {
|
||||||
|
var containerBox,
|
||||||
|
paths;
|
||||||
|
|
||||||
|
this.spaceVertically(matches, {
|
||||||
|
padding: 5
|
||||||
|
});
|
||||||
|
|
||||||
|
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('');
|
||||||
|
}
|
||||||
|
|
||||||
|
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
|
||||||
|
}));
|
||||||
|
|
||||||
|
this.container.prepend(
|
||||||
|
this.container.path(paths.join('')));
|
||||||
|
}).bind(this));
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
_position() {
|
|
||||||
var matches = this.matches(),
|
|
||||||
containerBox,
|
|
||||||
paths;
|
|
||||||
|
|
||||||
this.spaceVertically(matches, {
|
|
||||||
padding: 5
|
|
||||||
});
|
|
||||||
|
|
||||||
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;
|
|
||||||
|
|
||||||
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
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
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('')));
|
|
||||||
},
|
|
||||||
|
|
||||||
matches() {
|
matches() {
|
||||||
return [this._match].concat(_.map(this._alternates.elements, _.property('match')));
|
return [this._match].concat(_.map(this._alternates.elements, _.property('match')));
|
||||||
}
|
}
|
||||||
|
@ -5,10 +5,6 @@ export default _.extend({}, Base, {
|
|||||||
type: 'root',
|
type: 'root',
|
||||||
|
|
||||||
_render() {
|
_render() {
|
||||||
var promise = this.regexp.render(this.container.group());
|
|
||||||
this.regexp.transform(Snap.matrix()
|
|
||||||
.translate(10, 0));
|
|
||||||
|
|
||||||
this.start = this.container.circle()
|
this.start = this.container.circle()
|
||||||
.addClass('pin')
|
.addClass('pin')
|
||||||
.attr({ r: 5 });
|
.attr({ r: 5 });
|
||||||
@ -16,16 +12,20 @@ export default _.extend({}, Base, {
|
|||||||
.addClass('pin')
|
.addClass('pin')
|
||||||
.attr({ r: 5 });
|
.attr({ r: 5 });
|
||||||
|
|
||||||
return promise;
|
return this.regexp.render(this.container.group())
|
||||||
},
|
.then((() => {
|
||||||
|
var contentBox;
|
||||||
|
|
||||||
_position() {
|
this.regexp.transform(Snap.matrix()
|
||||||
var contentBox = this.regexp.getBBox();
|
.translate(10, 0));
|
||||||
|
|
||||||
this.start.transform(Snap.matrix()
|
contentBox = this.regexp.getBBox();
|
||||||
.translate(0, contentBox.cy));
|
|
||||||
this.end.transform(Snap.matrix()
|
this.start.transform(Snap.matrix()
|
||||||
.translate(contentBox.x2 + 10, contentBox.cy));
|
.translate(0, contentBox.cy));
|
||||||
|
this.end.transform(Snap.matrix()
|
||||||
|
.translate(contentBox.x2 + 10, contentBox.cy));
|
||||||
|
}).bind(this));
|
||||||
},
|
},
|
||||||
|
|
||||||
flags() {
|
flags() {
|
||||||
|
@ -18,18 +18,17 @@ export default _.extend({}, Base, {
|
|||||||
if (label) {
|
if (label) {
|
||||||
this.renderLabeledBox(label);
|
this.renderLabeledBox(label);
|
||||||
|
|
||||||
return this.regexp.render(this.container.group());
|
return this.regexp.render(this.container.group())
|
||||||
|
.then((() => {
|
||||||
|
this.positionLabeledBox(this.regexp, {
|
||||||
|
padding: 10
|
||||||
|
});
|
||||||
|
}).bind(this));
|
||||||
} else {
|
} else {
|
||||||
return this.proxy(this.regexp);
|
return this.proxy(this.regexp);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
_position() {
|
|
||||||
this.positionLabeledBox(this.regexp, {
|
|
||||||
padding: 10
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
groupLabel() {
|
groupLabel() {
|
||||||
if (_.has(this.labelMap, this._capture.textValue)) {
|
if (_.has(this.labelMap, this._capture.textValue)) {
|
||||||
return this.labelMap[this._capture.textValue];
|
return this.labelMap[this._capture.textValue];
|
||||||
|
Loading…
Reference in New Issue
Block a user