Cleanup of initial SVG rendering
This commit is contained in:
parent
b1a615daf0
commit
4decff56e7
@ -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>
|
||||
|
@ -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
|
||||
});
|
||||
});
|
||||
}
|
||||
}());
|
||||
|
@ -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
|
||||
});
|
||||
},
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user