From 4decff56e7fdabf1a945ae06862499b58dfab268 Mon Sep 17 00:00:00 2001 From: Jeff Avallone Date: Sun, 30 Nov 2014 13:14:31 -0500 Subject: [PATCH] Cleanup of initial SVG rendering --- src/index.html | 24 +++++++++++++++++++++- src/js/main.js | 26 ++++++++++++++++++++++-- src/js/parser/javascript/root.js | 34 ++++++++++++-------------------- 3 files changed, 60 insertions(+), 24 deletions(-) diff --git a/src/index.html b/src/index.html index 9b60486..be4b1c4 100644 --- a/src/index.html +++ b/src/index.html @@ -21,6 +21,28 @@
- + + +
diff --git a/src/js/main.js b/src/js/main.js index 816b46a..6f31c34 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -4,14 +4,36 @@ import Snap from 'snapsvg'; // Testing code (function() { var result = parser.parse('test expr'), - container = Snap('#regexp-render svg'); + svg = Snap('#regexp-render svg'), + container; + + if (svg) { + container = svg.group(); - if (container) { document.body.className = 'has-results'; result.render(container); setTimeout(() => { + var box; + result.position(); + + container.transform(Snap.matrix() + .translate(5, 5)); + + box = container.getBBox(); + svg.attr({ + width: box.width + 10, + height: box.height + 10 + }); + + svg.rect().attr({ + 'class': 'bounding-box', + x: box.x, + y: box.y, + width: box.width, + height: box.height + }); }); } }()); diff --git a/src/js/parser/javascript/root.js b/src/js/parser/javascript/root.js index 39b3131..8f5e6fc 100644 --- a/src/js/parser/javascript/root.js +++ b/src/js/parser/javascript/root.js @@ -1,35 +1,27 @@ export default { render(container) { - this.container = container; - this.rect = this.container.rect().attr({ - x: 5, - y: 5, + container.attr({ 'class': 'placeholder' }); + + this.rect = container.rect().attr({ rx: 10, - ry: 10, - fill: '#f00' + ry: 10 }); - this.text = this.container.text(0, 0, this.textValue).attr({ - fill: '#fff', - fontWeight: 'bold' + + this.text = container.text().attr({ + text: this.textValue }); }, position() { - var box = this.text.getBBox(); + var box = this.text.getBBox(), + margin = 5; - this.container.attr({ - width: box.width + 20, - height: box.height + 20 - }); - - this.text.attr({ - x: 10, - y: box.height + 5 - }); + this.text.transform(Snap.matrix() + .translate(margin, box.height + margin)); this.rect.attr({ - width: box.width + 10, - height: box.height + 10 + width: box.width + 2 * margin, + height: box.height + 2 * margin }); },