parser
This commit is contained in:
Ladd Hoffman
parent
8cb1debb16
commit
4091f476ff
77
draw.js
77
draw.js
|
|
@ -1,6 +1,10 @@
|
|||
class Drawing {
|
||||
constructor(divId) {
|
||||
this.div = document.getElementById(divId);
|
||||
constructor(div) {
|
||||
if (div instanceof HTMLElement) {
|
||||
this.div = div;
|
||||
} else {
|
||||
this.div = document.getElementById(div);
|
||||
}
|
||||
this.div.classList.add('drawing');
|
||||
this.div.classList.add('container');
|
||||
this.buttonsDiv = document.createElement('div');
|
||||
|
|
@ -54,7 +58,9 @@ class Drawing {
|
|||
}
|
||||
|
||||
setTitle(title) {
|
||||
this.titleDiv.innerHTML = title;
|
||||
const h = document.createElement('h4');
|
||||
h.innerHTML = title;
|
||||
this.titleDiv.appendChild(h);
|
||||
}
|
||||
|
||||
setCaption(caption) {
|
||||
|
|
@ -287,4 +293,69 @@ class Drawing {
|
|||
this.ctx.stroke();
|
||||
})
|
||||
}
|
||||
|
||||
static fromText(node) {
|
||||
const div = document.createElement('div');
|
||||
node.parentNode.parentNode.insertBefore(div, node.parentNode);
|
||||
node.style.display = 'none';
|
||||
const d = new Drawing(div);
|
||||
const lines = node.innerText.split('\n');
|
||||
for (let i = 0; i < lines.length; i++) {
|
||||
const line = lines[i];
|
||||
if (line.startsWith("#")) continue;
|
||||
const [cmd, ...args] = line.split(' ');
|
||||
// console.log({cmd, args});
|
||||
switch (cmd) {
|
||||
case 'title': {
|
||||
d.setTitle(args.join(' '));
|
||||
} break;
|
||||
case 'caption': {
|
||||
d.setCaption(args.join(' '));
|
||||
} break;
|
||||
case 'buttons': {
|
||||
d.addButtons();
|
||||
} break;
|
||||
case 'frame': {
|
||||
const [x1, y1, x2, y2] = args.map(x => parseInt(x));
|
||||
d.setFrame([x1, y1], [x2, y2]);
|
||||
} break;
|
||||
case 'axes': {
|
||||
const [x, y] = args.map(x => parseInt(x));
|
||||
d.polyline([0, y], [0, 0], [x, 0]);
|
||||
} break;
|
||||
case 'stroke': {
|
||||
const style = args[0];
|
||||
const width = parseInt(args[1]);
|
||||
d.setStroke(style, width);
|
||||
} break;
|
||||
case 'fill': {
|
||||
const style = args[0];
|
||||
d.setFill(style);
|
||||
} break;
|
||||
case 'point': {
|
||||
const [name, ...rest] = args;
|
||||
let body = rest.join(' ');
|
||||
while (lines[i + 1].startsWith(' ')) {
|
||||
body += lines[i + 1];
|
||||
i += 1;
|
||||
}
|
||||
d.definePoint(name, () => {
|
||||
return (function() {
|
||||
return eval(body);
|
||||
}).call(d);
|
||||
});
|
||||
} break;
|
||||
case 'circle':
|
||||
case 'square': {
|
||||
const p = args[0];
|
||||
const traceAge = args[1] ? parseInt(args[1]) : 0;
|
||||
d[cmd](p, {trace: {age: traceAge}});
|
||||
} break;
|
||||
case 'start': {
|
||||
d.start();
|
||||
} break;
|
||||
}
|
||||
}
|
||||
d.render();
|
||||
}
|
||||
}
|
||||
25
reveal.html
25
reveal.html
|
|
@ -16,17 +16,31 @@
|
|||
<link rel="stylesheet" href="./node_modules/reveal.js/plugin/highlight/monokai.css">
|
||||
</head>
|
||||
<body>
|
||||
<script src="./draw.js"></script>
|
||||
<div class="reveal">
|
||||
<div class="slides">
|
||||
<section>
|
||||
<h2>Slide 1</h2>
|
||||
<p>Content... `a = b / c`</p>
|
||||
<div id="d3"></div>
|
||||
<script>
|
||||
{
|
||||
const d = new Drawing('d3');
|
||||
d.setTitle('Test Drawing');
|
||||
d.line([0, 0], [100, 100]);
|
||||
d.render();
|
||||
}
|
||||
</script>
|
||||
</section>
|
||||
<section data-markdown>
|
||||
<textarea data-template>
|
||||
## Slide 2
|
||||
- Item 1
|
||||
- Item 2
|
||||
### Heading 3
|
||||
#### Heading 4
|
||||
##### Heading 5
|
||||
###### Heading 6
|
||||
<div id="d1"></div>
|
||||
<script>
|
||||
{
|
||||
|
|
@ -48,7 +62,6 @@
|
|||
<script src="./node_modules/reveal.js/plugin/markdown/markdown.js"></script>
|
||||
<script src="./node_modules/reveal.js/plugin/highlight/highlight.js"></script>
|
||||
<script src="./node_modules/reveal.js/plugin/math/math.js"></script>
|
||||
<script src="./draw.js"></script>
|
||||
<script>
|
||||
// More info about initialization & config:
|
||||
// - https://revealjs.com/initialization/
|
||||
|
|
@ -63,7 +76,13 @@
|
|||
},
|
||||
// Learn about plugins: https://revealjs.com/plugins/
|
||||
plugins: [ RevealMarkdown, RevealHighlight, RevealNotes, RevealMath.MathJax3 ]
|
||||
});
|
||||
</script>
|
||||
}).then(() => {
|
||||
const nodes = document.querySelectorAll('code.drawing');
|
||||
for (let node of nodes) {
|
||||
Drawing.fromText(node);
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -23,7 +23,6 @@
|
|||
d1 = d;
|
||||
d.setTitle('Example Animation');
|
||||
d.setCaption('Lissajou figure (skewed)');
|
||||
d.addButtons();
|
||||
d.setStroke('black', 4);
|
||||
d.polyline([0, 100], [0, 0], [100, 0]);
|
||||
d.definePoint('p1', () => d.oscillatingPoint([25, 50], [100, 100], 5000));
|
||||
|
|
|
|||
21
test.md
21
test.md
|
|
@ -1,3 +1,24 @@
|
|||
## Slide 3
|
||||
|
||||
Testing
|
||||
|
||||
<div id="d2"></div>
|
||||
|
||||
```drawing
|
||||
title Test Drawing!
|
||||
caption This is a test
|
||||
buttons
|
||||
frame 0 0 200 100
|
||||
axes 200 100
|
||||
point p1 this.oscillatingPoint([20, 20], [80, 20], 3000)
|
||||
fill cyan
|
||||
square p1 1000
|
||||
point p2 [100, 30]
|
||||
fill red
|
||||
circle p2
|
||||
point p3 [ this.oscillatingValue(20, 80, 3000),
|
||||
this.oscillatingValue(20, 80, 3000, Math.PI/2) ]
|
||||
fill green
|
||||
circle p3 1000
|
||||
start
|
||||
```
|
||||
Loading…
Reference in New Issue