Cleanup of initial SVG rendering

This commit is contained in:
Jeff Avallone 2014-11-30 13:14:31 -05:00
parent b1a615daf0
commit 4decff56e7
3 changed files with 60 additions and 24 deletions

View File

@ -21,6 +21,28 @@
<div id="error"></div>
<div id="regexp-render">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"></svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<style type="text/css">
text {
font: 12px Arial;
dominant-baseline: text-after-edge;
}
.placeholder text {
fill: #fff;
font-weight: bold;
}
.placeholder rect {
fill: #f00;
}
rect.bounding-box {
fill: transparent;
stroke: #000;
stroke-dasharray: 5,2;
}
</style>
</svg>
</div>
</div>

View File

@ -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
});
});
}
}());

View File

@ -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
});
},