Integrated snap.svg and starting to render content

This commit is contained in:
Jeff Avallone 2014-11-30 10:48:33 -05:00
parent 57c0de7668
commit 301dce5873
7 changed files with 55 additions and 5 deletions

View File

@ -68,7 +68,7 @@ gulp.task('browserify', function() {
bundler.add([file.path, es6ify.runtime]);
bundler.transform(require('./lib/canopy-transform'));
bundler.transform(es6ify);
bundler.transform(es6ify.configure(/^(?!.*node_modules)+.+\.js$/));
file.contents = bundler.bundle();
}))

View File

@ -23,7 +23,7 @@ module.exports = function(karma) {
bundle.add([es6ify.runtime]);
bundle.transform(require('./lib/canopy-transform'));
bundle.transform(es6ify);
bundle.transform(es6ify.configure(/^(?!.*node_modules)+.+\.js$/));
}
})
});

View File

@ -28,6 +28,7 @@
"karma-notify-reporter": "^0.1.1",
"karma-phantomjs-launcher": "^0.1.4",
"lodash": "^2.4.1",
"snapsvg": "git://github.com/adobe-webplatform/Snap.svg#dev",
"through": "^2.3.6",
"vinyl-transform": "^1.0.0"
}

View File

@ -20,5 +20,7 @@
<div id="error"></div>
<div id="regexp-render"></div>
<div id="regexp-render">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"></svg>
</div>
</div>

View File

@ -1,3 +1,17 @@
import parser from './parser/javascript.js';
import Snap from 'snapsvg';
window.parser = parser;
// Testing code
(function() {
var result = parser.parse('test expr'),
container = Snap('#regexp-render svg');
if (container) {
document.body.className = 'has-results';
result.render(container);
setTimeout(() => {
result.position();
});
}
}());

View File

@ -1,6 +1,6 @@
grammar JavascriptRegexp
root <- ( ( "/" regexp "/" fl:[igm]* ) / regexp ) <Root>
regexp <- match ( "|" regexp )? <Regexp>
regexp <- match ( "|" match )* <Regexp>
match <- anchor_start? ( ( subexp / charset / terminal ) repeat? )* anchor_end?
anchor_start <- "^"
anchor_end <- "$"

View File

@ -1,4 +1,37 @@
export default {
render(container) {
this.rect = this.container.rect().attr({
x: 5,
y: 5,
rx: 10,
ry: 10,
fill: '#f00'
});
this.text = this.container.text(0, 0, this.textValue).attr({
fill: '#fff',
fontWeight: 'bold'
});
},
position() {
var box = this.text.getBBox();
this.container.attr({
width: box.width + 20,
height: box.height + 20
});
this.text.attr({
x: 10,
y: box.height + 5
});
this.rect.attr({
width: box.width + 10,
height: box.height + 10
});
},
flags() {
var flags;