67 lines
1.7 KiB
JavaScript
67 lines
1.7 KiB
JavaScript
// Mode Switcher
|
|
import { Tool } from '../tool.js';
|
|
import {
|
|
MODE_MASS_GENERATION,
|
|
MODE_PAN_VIEW,
|
|
} from '../config.js';
|
|
|
|
export class ModeSwitch extends Tool {
|
|
currentMode = undefined;
|
|
modes = [
|
|
[MODE_MASS_GENERATION, 'Generate Mass'],
|
|
[MODE_PAN_VIEW, 'Pan View'],
|
|
];
|
|
buttons = [];
|
|
|
|
constructor(toolbar) {
|
|
super(toolbar);
|
|
|
|
const [[currentModeID, _]] = this.modes;
|
|
this.currentMode = currentModeID;
|
|
|
|
const modesDiv = document.createElement('div');
|
|
const titleDiv = document.createElement('div');
|
|
|
|
this.div.appendChild(titleDiv);
|
|
this.div.appendChild(modesDiv);
|
|
|
|
titleDiv.innerHTML = `<h2>Modes</h2>`;
|
|
|
|
// Since we have a heading, we need to reduce top padding
|
|
this.div.style.paddingTop = '0px';
|
|
|
|
modesDiv.style.display = 'flex';
|
|
modesDiv.style.flexDirection = 'column';
|
|
|
|
for (let [modeID, modeTitle] of this.modes) {
|
|
const button = document.createElement('button');
|
|
this.buttons.push(button);
|
|
button.modeID = modeID;
|
|
modesDiv.appendChild(button);
|
|
button.innerHTML = `<h3>${modeTitle}</h3>`;
|
|
button.classList.add('wide');
|
|
|
|
button.addEventListener('click', (e) => {
|
|
if (this.currentMode !== modeID) {
|
|
this.currentMode = modeID;
|
|
this.setModesOpacity();
|
|
}
|
|
});
|
|
}
|
|
this.setModesOpacity();
|
|
|
|
// Add global method to get current mode / check mode
|
|
this.sim.getCurrentMode = () => this.currentMode;
|
|
this.sim.isCurrentMode = (modeID) => modeID === this.currentMode;
|
|
}
|
|
|
|
setModesOpacity() {
|
|
for (let button of this.buttons) {
|
|
button.style.opacity = button.modeID === this.currentMode ? '50%' : '100%';
|
|
}
|
|
}
|
|
|
|
// TODO: on enter / on leave mode / some sort of callbacks on mode transitions
|
|
|
|
}
|