99 lines
2.6 KiB
JavaScript
99 lines
2.6 KiB
JavaScript
import {TOOL_INFO_CLASSNAME, WIDE_CLASSNAME} from '../config.js';
|
|
import {Tool} from '../tool.js';
|
|
|
|
export class PlayPause extends Tool {
|
|
playHTML = 'Play';
|
|
pauseHTML = 'Pause';
|
|
clearTracesText = 'Clear Traces';
|
|
currentTimeEl = undefined;
|
|
pauseButton = undefined;
|
|
playButton = undefined;
|
|
clearTracesEl = undefined;
|
|
|
|
get timeText() {
|
|
let time = this.sim.time;
|
|
// Time in seconds
|
|
const s = time % 60;
|
|
time = (time - s) / 60;
|
|
const m = time % 60;
|
|
time = (time - m) / 60;
|
|
const h = time % 24;
|
|
time = (time - h) / 24;
|
|
const d = time;
|
|
time -= m * 60;
|
|
|
|
const ms = (s - Math.floor(s)) * 1000;
|
|
return [
|
|
d || undefined,
|
|
h.toString().padStart(2, '0'),
|
|
m.toString().padStart(2, '0'),
|
|
[
|
|
s.toFixed(0).padStart(2, '0'),
|
|
ms.toFixed(0).padStart(3, '0'),
|
|
].join('.')
|
|
].filter(x => x !== undefined).join(':');
|
|
}
|
|
|
|
frame() {
|
|
if (this.currentTimeEl) {
|
|
this.currentTimeEl.innerHTML = this.timeText;
|
|
}
|
|
}
|
|
|
|
updateButtons() {
|
|
this.pauseButton.style.opacity = this.sim.playing ? '100%' : '50%';
|
|
this.playButton.style.opacity = this.sim.playing ? '50%' : '100%';
|
|
}
|
|
|
|
constructor(toolbar) {
|
|
super(toolbar);
|
|
|
|
const currentTime = document.createElement('button');
|
|
const pauseButton = document.createElement('button');
|
|
const playButton = document.createElement('button');
|
|
const clearTraces = document.createElement('button');
|
|
this.pauseButton = pauseButton;
|
|
this.playButton = playButton;
|
|
this.clearTracesEl = clearTraces;
|
|
this.currentTimeEl = currentTime;
|
|
|
|
this.div.appendChild(currentTime);
|
|
this.div.appendChild(pauseButton);
|
|
this.div.appendChild(playButton);
|
|
this.div.appendChild(clearTraces);
|
|
|
|
currentTime.classList.add(TOOL_INFO_CLASSNAME);
|
|
currentTime.classList.add(WIDE_CLASSNAME);
|
|
clearTraces.classList.add(WIDE_CLASSNAME);
|
|
|
|
pauseButton.innerHTML = this.pauseHTML;
|
|
playButton.innerHTML = this.playHTML;
|
|
currentTime.innerHTML = this.timeText;
|
|
clearTraces.innerHTML = this.clearTracesText;
|
|
|
|
this.updateButtons();
|
|
|
|
pauseButton.addEventListener('click', () => {
|
|
this.sim.pointer.panning = undefined;
|
|
if (this.sim.playing) {
|
|
this.sim.playing = false;
|
|
this.updateButtons();
|
|
}
|
|
});
|
|
|
|
playButton.addEventListener('click', () => {
|
|
if (!this.sim.playing) {
|
|
this.sim.playing = true;
|
|
this.updateButtons();
|
|
}
|
|
});
|
|
|
|
clearTraces.addEventListener('click', () => {
|
|
// Obliterate object histories
|
|
this.sim.objects.forEachObject(obj => {
|
|
obj.history = [];
|
|
}, {alive: null});
|
|
});
|
|
}
|
|
}
|