Adding ability to easily render demo images
This commit is contained in:
parent
e466e7e548
commit
55ee380817
@ -60,12 +60,18 @@ describe('parser/javascript.js', function() {
|
||||
this.parser.parsed = jasmine.createSpyObj('parsed', ['render']);
|
||||
this.parser.parsed.render.and.returnValue(this.renderPromise.promise);
|
||||
|
||||
this.svgStyles = 'example styles';
|
||||
this.svg = Snap(document.createElement('svg'));
|
||||
spyOn(this.svg, 'group').and.returnValue('example group');
|
||||
});
|
||||
|
||||
it('adds the svg styles to the svg element', function() {
|
||||
this.parser.render(this.svg, this.svgStyles);
|
||||
expect(this.svg.innerHTML).toEqual('<style type="text/css">example styles</style>');
|
||||
});
|
||||
|
||||
it('render the parsed expression', function() {
|
||||
this.parser.render(this.svg, 10);
|
||||
this.parser.render(this.svg, this.svgStyles);
|
||||
expect(this.parser.parsed.render).toHaveBeenCalledWith('example group');
|
||||
});
|
||||
|
||||
@ -82,7 +88,7 @@ describe('parser/javascript.js', function() {
|
||||
|
||||
spyOn(this.svg, 'attr');
|
||||
|
||||
this.parser.render(this.svg, 10);
|
||||
this.parser.render(this.svg, this.svgStyles);
|
||||
this.renderPromise.resolve(this.result);
|
||||
|
||||
setTimeout(done, 10);
|
||||
|
@ -378,10 +378,6 @@ describe('regexper.js', function() {
|
||||
expect(this.regexper._trackEvent).toHaveBeenCalledWith('visualization', 'start');
|
||||
});
|
||||
|
||||
it('adds the svg styles to the svg element', function() {
|
||||
expect(this.regexper.svg.innerHTML).toEqual('<style type="text/css">example styles</style>');
|
||||
});
|
||||
|
||||
it('keeps a copy of the running parser', function() {
|
||||
expect(this.regexper.runningParser).toBeTruthy();
|
||||
});
|
||||
@ -422,7 +418,7 @@ describe('regexper.js', function() {
|
||||
});
|
||||
|
||||
it('renders the expression', function() {
|
||||
expect(this.parser.render).toHaveBeenCalledWith(this.regexper.snap, this.regexper.padding);
|
||||
expect(this.parser.render).toHaveBeenCalledWith(this.regexper.svg, this.regexper.svgStyles);
|
||||
});
|
||||
|
||||
});
|
||||
|
@ -1,3 +1,7 @@
|
||||
<div class="copy documentation">
|
||||
TODO: Write documentation
|
||||
|
||||
<svg data-expr="test?" xmlns="http://www.w3.org/2000/svg" version="1.1"></svg>
|
||||
</div>
|
||||
|
||||
<script src="/js/main.js" async defer></script>
|
||||
|
@ -1,14 +1,24 @@
|
||||
import util from './util.js';
|
||||
import Regexper from './regexper.js';
|
||||
import Parser from './parser/javascript.js';
|
||||
import _ from 'lodash';
|
||||
|
||||
(function() {
|
||||
var regexper = new Regexper(document.body);
|
||||
if (document.body.querySelector('#content .container')) {
|
||||
var regexper = new Regexper(document.body);
|
||||
|
||||
if (document.body.querySelector('#content')) {
|
||||
regexper.bindListeners();
|
||||
|
||||
setTimeout(() => {
|
||||
window.dispatchEvent(util.customEvent('hashchange'));
|
||||
});
|
||||
}
|
||||
|
||||
_.each(document.querySelectorAll('svg[data-expr]'), element => {
|
||||
var parser = new Parser();
|
||||
|
||||
parser.parse(element.getAttribute('data-expr'))
|
||||
.invoke('render', element, document.querySelector('#svg-styles').innerHTML)
|
||||
.done();
|
||||
});
|
||||
}());
|
||||
|
@ -1,4 +1,5 @@
|
||||
import Q from 'q';
|
||||
import Snap from 'snapsvg';
|
||||
|
||||
import javascript from './javascript/parser.js';
|
||||
|
||||
@ -30,18 +31,26 @@ export default class Parser {
|
||||
return deferred.promise;
|
||||
}
|
||||
|
||||
render(svg, padding) {
|
||||
svg.selectAll('g').remove();
|
||||
render(svgElement, styles) {
|
||||
var svg;
|
||||
|
||||
svgElement.innerHTML = [
|
||||
'<style type="text/css">',
|
||||
styles,
|
||||
'</style>'
|
||||
].join('');
|
||||
|
||||
svg = Snap(svgElement);
|
||||
|
||||
return this.parsed.render(svg.group())
|
||||
.then(result => {
|
||||
var box = result.getBBox();
|
||||
|
||||
result.transform(Snap.matrix()
|
||||
.translate(padding - box.x, padding - box.y));
|
||||
.translate(10 - box.x, 10 - box.y));
|
||||
svg.attr({
|
||||
width: box.width + padding * 2,
|
||||
height: box.height + padding * 2
|
||||
width: box.width + 20,
|
||||
height: box.height + 20
|
||||
});
|
||||
});
|
||||
}
|
||||
|
@ -1,6 +1,5 @@
|
||||
import util from './util.js';
|
||||
import Parser from './parser/javascript.js';
|
||||
import Snap from 'snapsvg';
|
||||
import Q from 'q';
|
||||
|
||||
export default class Regexper {
|
||||
@ -13,9 +12,7 @@ export default class Regexper {
|
||||
this.download = root.querySelector('a[data-glyph="data-transfer-download"]');
|
||||
this.percentage = root.querySelector('#progress div');
|
||||
this.svg = root.querySelector('#regexp-render svg');
|
||||
|
||||
this.padding = 10;
|
||||
this.snap = Snap(this.svg);
|
||||
this.svgStyles = this.root.querySelector('#svg-styles').innerHTML;
|
||||
|
||||
this.gaq = (typeof window._gaq === 'undefined') ? [] : window._gaq;
|
||||
}
|
||||
@ -141,12 +138,6 @@ export default class Regexper {
|
||||
this.state = 'is-loading';
|
||||
this._trackEvent('visualization', 'start');
|
||||
|
||||
this.svg.innerHTML = [
|
||||
'<style type="text/css">',
|
||||
this.root.querySelector('#svg-styles').innerHTML,
|
||||
'</style>'
|
||||
].join('');
|
||||
|
||||
this.runningParser = new Parser();
|
||||
|
||||
return this.runningParser.parse(expression)
|
||||
@ -159,7 +150,7 @@ export default class Regexper {
|
||||
|
||||
throw message;
|
||||
})
|
||||
.invoke('render', this.snap, this.padding)
|
||||
.invoke('render', this.svg, this.svgStyles)
|
||||
.then(() => {
|
||||
this.state = 'has-results';
|
||||
this.updateLinks();
|
||||
|
@ -1,5 +1,9 @@
|
||||
@import 'base';
|
||||
|
||||
svg {
|
||||
background-color: $white;
|
||||
}
|
||||
|
||||
text, tspan {
|
||||
font: 12px Arial;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user