12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152 |
- const cephes = require('../');
- const d3 = require('./d3.js');
- const LazyGraphs = require('./lib/lazy-graphs.js');
- const Walkthrough = require('./lib/walkthrough.js');
- const LineGraph = require('./lib/line-graph.js');
- const colors = d3.schemeCategory10;
- async function setupDiagram() {
- const graphs = new LazyGraphs();
- const walkthrough = new Walkthrough({
- container: document.querySelector('#ar-walkthrough')
- });
- const lineGraph = new LineGraph({
- container: document.querySelector('#ar-line-graph'),
- height: 400,
- colors: colors
- });
- walkthrough.select(1);
- lineGraph.setData(graphs.get(1));
- lineGraph.draw();
- walkthrough.draw();
- walkthrough.on('click', function (pageNumber) {
- walkthrough.select(pageNumber);
- lineGraph.setData(graphs.get(pageNumber));
- walkthrough.draw();
- lineGraph.draw();
- });
- window.addEventListener('resize', function () {
- lineGraph.resize();
- });
- }
- async function main() {
- // Render LaTeX elements first, as their size is unknown.
- var elements = document.querySelectorAll('math-latex');
- Array.from(elements).forEach(function processElement(element) {
- window.katex.render(element.getAttribute('latex'), element, {
- displayMode: element.hasAttribute('display-mode')
- });
- });
- await cephes.compiled;
- await setupDiagram();
- }
- document.addEventListener('DOMContentLoaded', main);
|