Integrated snap.svg and starting to render content
This commit is contained in:
parent
57c0de7668
commit
301dce5873
@ -68,7 +68,7 @@ gulp.task('browserify', function() {
|
|||||||
|
|
||||||
bundler.add([file.path, es6ify.runtime]);
|
bundler.add([file.path, es6ify.runtime]);
|
||||||
bundler.transform(require('./lib/canopy-transform'));
|
bundler.transform(require('./lib/canopy-transform'));
|
||||||
bundler.transform(es6ify);
|
bundler.transform(es6ify.configure(/^(?!.*node_modules)+.+\.js$/));
|
||||||
|
|
||||||
file.contents = bundler.bundle();
|
file.contents = bundler.bundle();
|
||||||
}))
|
}))
|
||||||
|
@ -23,7 +23,7 @@ module.exports = function(karma) {
|
|||||||
|
|
||||||
bundle.add([es6ify.runtime]);
|
bundle.add([es6ify.runtime]);
|
||||||
bundle.transform(require('./lib/canopy-transform'));
|
bundle.transform(require('./lib/canopy-transform'));
|
||||||
bundle.transform(es6ify);
|
bundle.transform(es6ify.configure(/^(?!.*node_modules)+.+\.js$/));
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
});
|
});
|
||||||
|
@ -28,6 +28,7 @@
|
|||||||
"karma-notify-reporter": "^0.1.1",
|
"karma-notify-reporter": "^0.1.1",
|
||||||
"karma-phantomjs-launcher": "^0.1.4",
|
"karma-phantomjs-launcher": "^0.1.4",
|
||||||
"lodash": "^2.4.1",
|
"lodash": "^2.4.1",
|
||||||
|
"snapsvg": "git://github.com/adobe-webplatform/Snap.svg#dev",
|
||||||
"through": "^2.3.6",
|
"through": "^2.3.6",
|
||||||
"vinyl-transform": "^1.0.0"
|
"vinyl-transform": "^1.0.0"
|
||||||
}
|
}
|
||||||
|
@ -20,5 +20,7 @@
|
|||||||
|
|
||||||
<div id="error"></div>
|
<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>
|
</div>
|
||||||
|
@ -1,3 +1,17 @@
|
|||||||
import parser from './parser/javascript.js';
|
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();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}());
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
grammar JavascriptRegexp
|
grammar JavascriptRegexp
|
||||||
root <- ( ( "/" regexp "/" fl:[igm]* ) / regexp ) <Root>
|
root <- ( ( "/" regexp "/" fl:[igm]* ) / regexp ) <Root>
|
||||||
regexp <- match ( "|" regexp )? <Regexp>
|
regexp <- match ( "|" match )* <Regexp>
|
||||||
match <- anchor_start? ( ( subexp / charset / terminal ) repeat? )* anchor_end?
|
match <- anchor_start? ( ( subexp / charset / terminal ) repeat? )* anchor_end?
|
||||||
anchor_start <- "^"
|
anchor_start <- "^"
|
||||||
anchor_end <- "$"
|
anchor_end <- "$"
|
||||||
|
@ -1,4 +1,37 @@
|
|||||||
export default {
|
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() {
|
flags() {
|
||||||
var flags;
|
var flags;
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user