| 847 | |
| 848 | class TimelineView { |
| 849 | constructor() { |
| 850 | this.element = $("timeline"); |
| 851 | this.canvas = $("timeline-canvas"); |
| 852 | this.legend = $("timeline-legend"); |
| 853 | this.currentCode = $("timeline-currentCode"); |
| 854 | |
| 855 | this.canvas.onmousedown = this.onMouseDown.bind(this); |
| 856 | this.canvas.onmouseup = this.onMouseUp.bind(this); |
| 857 | this.canvas.onmousemove = this.onMouseMove.bind(this); |
| 858 | |
| 859 | this.selectionStart = null; |
| 860 | this.selectionEnd = null; |
| 861 | this.selecting = false; |
| 862 | |
| 863 | this.fontSize = 12; |
| 864 | this.imageOffset = Math.round(this.fontSize * 1.2); |
| 865 | this.functionTimelineHeight = 24; |
| 866 | this.functionTimelineTickHeight = 16; |
| 867 | |
| 868 | this.currentState = null; |
| 869 | |
| 870 | this.showLoggingInput = $("show-logging"); |
| 871 | this.showLoggingInput.onchange = () => { |
| 872 | main.setShowLogging(this.showLoggingInput.checked); |
| 873 | }; |
| 874 | } |
| 875 | |
| 876 | onMouseDown(e) { |
| 877 | this.selectionStart = |