diff --git a/src/js/parser/javascript/base.js b/src/js/parser/javascript/base.js index 014e3a6..d295b5b 100644 --- a/src/js/parser/javascript/base.js +++ b/src/js/parser/javascript/base.js @@ -47,9 +47,6 @@ export default { } var promise = this._render(); - if (!this._proxy) { - promise = promise.then(this._position.bind(this)); - } return promise.then(_.constant(this)); }, @@ -71,8 +68,6 @@ export default { }); }, - _position() {}, - spaceHorizontally(items, options) { var verticalCenter = 0; diff --git a/src/js/parser/javascript/charset.js b/src/js/parser/javascript/charset.js index cc8b802..3b709d1 100644 --- a/src/js/parser/javascript/charset.js +++ b/src/js/parser/javascript/charset.js @@ -6,23 +6,24 @@ export default _.extend({}, Base, { type: 'charset', _render() { + var partContainer; + 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 part.render(this.partContainer.group()); - }).bind(this))); - }, + return Q.all(_.map(this.parts.elements, part => { + return part.render(partContainer.group()); + })) + .then((() => { + this.spaceVertically(this.parts.elements, { + padding: 5 + }); - _position() { - this.spaceVertically(this.parts.elements, { - padding: 5 - }); - - this.positionLabeledBox(this.partContainer, { - padding: 5 - }); + this.positionLabeledBox(partContainer, { + padding: 5 + }); + }).bind(this)); }, invert() { diff --git a/src/js/parser/javascript/charset_range.js b/src/js/parser/javascript/charset_range.js index 358b950..31ca1ea 100644 --- a/src/js/parser/javascript/charset_range.js +++ b/src/js/parser/javascript/charset_range.js @@ -6,7 +6,7 @@ export default _.extend({}, Base, { type: 'charset-range', _render() { - this.hyphen = this.container.text() + var hyphen = this.container.text() .attr({ text: '-' }); @@ -14,12 +14,11 @@ export default _.extend({}, Base, { return Q.all([ this.first.render(this.container.group()), this.last.render(this.container.group()) - ]); - }, - - _position() { - this.spaceHorizontally([this.first, this.hyphen, this.last], { - padding: 5 - }); + ]) + .then((() => { + this.spaceHorizontally([this.first, hyphen, this.last], { + padding: 5 + }); + }).bind(this)); } }); diff --git a/src/js/parser/javascript/match.js b/src/js/parser/javascript/match.js index 57b4f3a..6fba587 100644 --- a/src/js/parser/javascript/match.js +++ b/src/js/parser/javascript/match.js @@ -27,18 +27,17 @@ export default _.extend({}, Base, { return part.render(this.container.group()); }).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 { return this.proxy(parts[0]); } }, - _position(items) { - this.spaceHorizontally(items, { - padding: 10 - }); - }, - anchorStart() { return this._anchor_start.textValue !== ''; }, diff --git a/src/js/parser/javascript/match_fragment.js b/src/js/parser/javascript/match_fragment.js index fc42862..cc985fe 100644 --- a/src/js/parser/javascript/match_fragment.js +++ b/src/js/parser/javascript/match_fragment.js @@ -8,35 +8,34 @@ export default _.extend({}, Base, { if (this._repeat.textValue === '') { return this.proxy(this._content); } else { - return this._content.render(this.container.group()); - } - }, + return this._content.render(this.container.group()) + .then((() => { + var box, paths = []; - _position() { - var box, paths = []; + this._content.transform(this._repeat.contentPosition()); - 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()) { - 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.hasLoop()) { + 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, + vert: box.height / 2 - 10 + })); + } - if (this._repeat.hasLoop()) { - 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, - vert: box.height / 2 - 10 - })); - } - - if (paths.length) { - this.container.prepend( - this.container.path(paths.join(''))); + if (paths.length) { + this.container.prepend( + this.container.path(paths.join(''))); + } + }).bind(this)); } } }); diff --git a/src/js/parser/javascript/regexp.js b/src/js/parser/javascript/regexp.js index 9211899..6a6e4a9 100644 --- a/src/js/parser/javascript/regexp.js +++ b/src/js/parser/javascript/regexp.js @@ -6,78 +6,76 @@ export default _.extend({}, Base, { type: 'regexp', _render() { - var matches = this.matches(); + var matches = this.matches(), + matchContainer; if (matches.length === 1) { return this.proxy(matches[0]); } else { - this.matchContainer = this.container.group() - .addClass('regexp-matches'); + matchContainer = this.container.group() + .addClass('regexp-matches') + .transform(Snap.matrix() + .translate(20, 0)); - return Q.all(_.map(matches, (match => { - return match.render(this.matchContainer.group()); - }).bind(this))); + return Q.all(_.map(matches, match => { + return match.render(matchContainer.group()); + })) + .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() { return [this._match].concat(_.map(this._alternates.elements, _.property('match'))); } diff --git a/src/js/parser/javascript/root.js b/src/js/parser/javascript/root.js index d305d48..33799e2 100644 --- a/src/js/parser/javascript/root.js +++ b/src/js/parser/javascript/root.js @@ -5,10 +5,6 @@ export default _.extend({}, Base, { type: 'root', _render() { - var promise = this.regexp.render(this.container.group()); - this.regexp.transform(Snap.matrix() - .translate(10, 0)); - this.start = this.container.circle() .addClass('pin') .attr({ r: 5 }); @@ -16,16 +12,20 @@ export default _.extend({}, Base, { .addClass('pin') .attr({ r: 5 }); - return promise; - }, + return this.regexp.render(this.container.group()) + .then((() => { + var contentBox; - _position() { - var contentBox = this.regexp.getBBox(); + this.regexp.transform(Snap.matrix() + .translate(10, 0)); - this.start.transform(Snap.matrix() - .translate(0, contentBox.cy)); - this.end.transform(Snap.matrix() - .translate(contentBox.x2 + 10, contentBox.cy)); + contentBox = this.regexp.getBBox(); + + this.start.transform(Snap.matrix() + .translate(0, contentBox.cy)); + this.end.transform(Snap.matrix() + .translate(contentBox.x2 + 10, contentBox.cy)); + }).bind(this)); }, flags() { diff --git a/src/js/parser/javascript/subexp.js b/src/js/parser/javascript/subexp.js index 0dee3d7..7df4d1a 100644 --- a/src/js/parser/javascript/subexp.js +++ b/src/js/parser/javascript/subexp.js @@ -18,18 +18,17 @@ export default _.extend({}, Base, { if (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 { return this.proxy(this.regexp); } }, - _position() { - this.positionLabeledBox(this.regexp, { - padding: 10 - }); - }, - groupLabel() { if (_.has(this.labelMap, this._capture.textValue)) { return this.labelMap[this._capture.textValue];