From cd11b7e6e540abbcf59aa8b34acd88f7a19693f4 Mon Sep 17 00:00:00 2001 From: Jeff Avallone Date: Tue, 9 Dec 2014 19:02:31 -0500 Subject: [PATCH] Centralizing some of the layout code --- src/js/parser/javascript/base.js | 36 ++++++++++++++++++++ src/js/parser/javascript/charset.js | 4 +-- src/js/parser/javascript/charset_range.js | 10 ++---- src/js/parser/javascript/match.js | 38 +++++++++++----------- src/js/parser/javascript/match_fragment.js | 2 +- src/js/parser/javascript/regexp.js | 8 ++--- src/js/parser/javascript/root.js | 2 +- src/js/parser/javascript/subexp.js | 4 +-- src/js/regexper.js | 2 +- 9 files changed, 69 insertions(+), 37 deletions(-) diff --git a/src/js/parser/javascript/base.js b/src/js/parser/javascript/base.js index 0cad1ac..8b9963e 100644 --- a/src/js/parser/javascript/base.js +++ b/src/js/parser/javascript/base.js @@ -1,4 +1,10 @@ +import _ from 'lodash'; + export default { + getBBox() { + return this.container.getBBox(); + }, + renderLabel(container, text) { var group = container.group(); @@ -46,5 +52,35 @@ export default { position() { this.positionLabel(this.label); + }, + + spaceHorizontally(items, options) { + var verticalCenter = 0; + + _.defaults(options, { + padding: 0 + }); + + _.reduce(items, (offset, item) => { + var element = item.container || item, + box; + + element.transform(Snap.matrix() + .translate(offset, 0)); + + box = item.getBBox(); + + verticalCenter = Math.max(verticalCenter, box.cy); + + return offset + options.padding + box.width; + }, 0); + + _.each(items, item => { + var element = item.container || item; + + element.transform(Snap.matrix() + .add(element.transform().localMatrix) + .translate(0, verticalCenter - item.getBBox().cy)); + }); } }; diff --git a/src/js/parser/javascript/charset.js b/src/js/parser/javascript/charset.js index 12cefca..1b382e5 100644 --- a/src/js/parser/javascript/charset.js +++ b/src/js/parser/javascript/charset.js @@ -38,7 +38,7 @@ export default _.extend({}, Base, { part.container.transform(Snap.matrix() .translate(0, offset)); - box = part.container.getBBox(); + box = part.getBBox(); offset += box.height + 5; }).bind(this)); @@ -46,7 +46,7 @@ export default _.extend({}, Base, { box = this.partContainer.getBBox(); _.each(this.parts.elements, (part => { - var partBox = part.container.getBBox(); + var partBox = part.getBBox(); part.container.transform(Snap.matrix() .add(part.container.transform().localMatrix) diff --git a/src/js/parser/javascript/charset_range.js b/src/js/parser/javascript/charset_range.js index 228d455..4849ed4 100644 --- a/src/js/parser/javascript/charset_range.js +++ b/src/js/parser/javascript/charset_range.js @@ -23,12 +23,8 @@ export default _.extend({}, Base, { this.first.position(); this.last.position(); - box = this.first.container.getBBox(); - this.hyphen.transform(Snap.matrix() - .translate(box.x2 + 5, box.cy - this.hyphen.getBBox().cy)); - - box = this.hyphen.getBBox(); - this.last.container.transform(Snap.matrix() - .translate(box.x2 + 5, 0)); + this.spaceHorizontally([this.first, this.hyphen, this.last], { + padding: 5 + }); } }); diff --git a/src/js/parser/javascript/match.js b/src/js/parser/javascript/match.js index 32d0de7..dfdffa1 100644 --- a/src/js/parser/javascript/match.js +++ b/src/js/parser/javascript/match.js @@ -27,34 +27,34 @@ export default _.extend({}, Base, { }, position() { - var offset = 0, - path = []; + var items, paths; if (this.anchorStart()) { this.positionLabel(this.contents.anchor_start); - offset += this.contents.anchor_start.getBBox().width + 10; - path.push(Snap.format('M{x2},{cy}h10', this.contents.anchor_start.getBBox())); } - _.each(this.contents.parts, function(part) { - part.position(); - part.container.transform(Snap.matrix() - .translate(offset, 0)); - offset += part.container.getBBox().width + 10; - path.push(Snap.format('M{x2},{cy}h10', part.container.getBBox())); - }); - if (this.anchorEnd()) { this.positionLabel(this.contents.anchor_end); - this.contents.anchor_end.transform(Snap.matrix() - .translate(offset, 0)); - } else { - path.pop(); } - this.container.prepend( - this.container.path(path.join('')) - ); + _.invoke(this.contents.parts, 'position'); + + items = _(this.contents).values().flatten().value(); + this.spaceHorizontally(items, { + padding: 10 + }); + + // NOTE: + // item.cy won't work for this in the long run once vertical centers can be + // offset. + paths = _.map(items, item => { + return Snap.format('M{item.x2},{item.cy}h10', { + item: item.getBBox() + }); + }); + paths.pop(); + + this.container.prepend(this.container.path(paths.join(''))); }, anchorStart() { diff --git a/src/js/parser/javascript/match_fragment.js b/src/js/parser/javascript/match_fragment.js index 233543b..a99f8d8 100644 --- a/src/js/parser/javascript/match_fragment.js +++ b/src/js/parser/javascript/match_fragment.js @@ -17,7 +17,7 @@ export default _.extend({}, Base, { if (this._repeat.textValue !== '') { this._content.container.transform(this._repeat.contentPosition()); - box = this._content.container.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({ diff --git a/src/js/parser/javascript/regexp.js b/src/js/parser/javascript/regexp.js index f6adb90..ed4e177 100644 --- a/src/js/parser/javascript/regexp.js +++ b/src/js/parser/javascript/regexp.js @@ -29,8 +29,8 @@ export default _.extend({}, Base, { positions = _.chain(matches) .map(match => { return { - box: match.container.getBBox(), - content: match.container + match, + box: match.getBBox() }; }); center = positions.reduce((center, pos) => { @@ -38,7 +38,7 @@ export default _.extend({}, Base, { }, 0).value(); totalHeight = positions.reduce((offset, pos) => { - pos.content.transform(Snap.matrix() + pos.match.container.transform(Snap.matrix() .translate(center - pos.box.cx + (includeLines ? 20 : 0), offset)); return offset + pos.box.height + 5; @@ -48,7 +48,7 @@ export default _.extend({}, Base, { if (includeLines) { positions.each(pos => { - var box = pos.content.getBBox(), + var box = pos.match.getBBox(), direction = box.cy > verticalCenter ? 1 : -1, pathStr; diff --git a/src/js/parser/javascript/root.js b/src/js/parser/javascript/root.js index da71f49..c9b7ba3 100644 --- a/src/js/parser/javascript/root.js +++ b/src/js/parser/javascript/root.js @@ -22,7 +22,7 @@ export default _.extend({}, Base, { this.regexp.position(); - contentBox = this.regexp.container.getBBox(); + contentBox = this.regexp.getBBox(); this.container.prepend( this.container.path(Snap.format('M0,{cy}h10M{x2},{cy}h10', contentBox)) diff --git a/src/js/parser/javascript/subexp.js b/src/js/parser/javascript/subexp.js index d6a64c0..483b7dc 100644 --- a/src/js/parser/javascript/subexp.js +++ b/src/js/parser/javascript/subexp.js @@ -44,7 +44,7 @@ export default _.extend({}, Base, { this.regexp.position(); if (this.outline) { - box = this.regexp.container.getBBox(); + box = this.regexp.getBBox(); this.outline.attr({ width: box.width + 20, @@ -52,7 +52,7 @@ export default _.extend({}, Base, { }); this.container.path(Snap.format('M0,{content.cy}h10M{content.x2},{content.cy}H{container.x2}', { - container: this.container.getBBox(), + container: this.getBBox(), content: box })); } diff --git a/src/js/regexper.js b/src/js/regexper.js index 83371df..6079a51 100644 --- a/src/js/regexper.js +++ b/src/js/regexper.js @@ -98,7 +98,7 @@ export default class Regexper { result.position(); - box = result.container.getBBox(); + box = result.getBBox(); result.container.transform(Snap.matrix() .translate(padding - box.x, padding - box.y)); snap.attr({