main.js 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. const cephes = require('../');
  2. const d3 = require('./d3.js');
  3. const LazyGraphs = require('./lib/lazy-graphs.js');
  4. const Walkthrough = require('./lib/walkthrough.js');
  5. const LineGraph = require('./lib/line-graph.js');
  6. const colors = d3.schemeCategory10;
  7. async function setupDiagram() {
  8. const graphs = new LazyGraphs();
  9. const walkthrough = new Walkthrough({
  10. container: document.querySelector('#ar-walkthrough')
  11. });
  12. const lineGraph = new LineGraph({
  13. container: document.querySelector('#ar-line-graph'),
  14. height: 400,
  15. colors: colors
  16. });
  17. walkthrough.select(1);
  18. lineGraph.setData(graphs.get(1));
  19. lineGraph.draw();
  20. walkthrough.draw();
  21. walkthrough.on('click', function (pageNumber) {
  22. walkthrough.select(pageNumber);
  23. lineGraph.setData(graphs.get(pageNumber));
  24. walkthrough.draw();
  25. lineGraph.draw();
  26. });
  27. window.addEventListener('resize', function () {
  28. lineGraph.resize();
  29. });
  30. }
  31. async function main() {
  32. // Render LaTeX elements first, as their size is unknown.
  33. var elements = document.querySelectorAll('math-latex');
  34. Array.from(elements).forEach(function processElement(element) {
  35. window.katex.render(element.getAttribute('latex'), element, {
  36. displayMode: element.hasAttribute('display-mode')
  37. });
  38. });
  39. await cephes.compiled;
  40. await setupDiagram();
  41. }
  42. document.addEventListener('DOMContentLoaded', main);