nicolo/scaenae
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

Move UI logic to Stimulus: toolbar only

Browse Source
This commit is contained in:
Nicolò P.
2026-04-21 15:30:35 +02:00
parent d37e72390d
commit 26bea5daae
9 changed files with 288 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files

157
js/ui.js
View File

@@ -62,161 +62,6 @@ function reset() {
document.querySelector('#clipper-bar')?.classList.add('d-none');
document.querySelector('#clipper')?.classList.remove('border', 'border-2', 'border-white');
}
/**
*
* @param {HTMLElement} target
* @param {NodeListOf<HTMLButtonElement>} btns
* @param {String} axis - One of 'x', 'y', 'z'
*/
function showClipping(target, btns, axis) {
if (axis) {
addClippingPlane(axis, -1);
target.classList.add('border', 'border-2', 'border-warning');
btns.forEach(btn => {
if (btn.id !== target.id) {
btn.classList.remove('border', 'border-2', 'border-warning');
}
});
}
}
/**
* @todo Get clipping button from state? Review logic!!
* @param {String} triggerSelector
* @param {String} targetSelector The selector for the target toolbar to be displayed
*/
function toggleClipperBar(triggerSelector, targetSelector) {
const trigger = document.querySelector(triggerSelector);
const toolbar = document.querySelector(targetSelector);
const btns = toolbar.querySelectorAll('button');
const clipTargets = {
clipX: {axis: 'x'},
clipY: {axis: 'y'},
clipZ: {axis: 'z'},
};
if (!AppState.clipping.listeners.button) {
trigger.addEventListener(
'click',
() => {
toolbar.classList.toggle('d-none');
const aoCurrentState = AppState.ambientOcclusion;
if (!toolbar.classList.contains('d-none')) {
AppState.clipping.enabled = true;
toggleAmbientOcclusion(false);
btns.forEach(btn => {
btn.classList.remove('border', 'border-2', 'border-warning');
});
trigger.className += ' border border-2 border-white';
toolbar.addEventListener('click', event => {
showClipping(event.target, btns, clipTargets[event.target.id]?.axis);
});
} else {
resetClipping();
let noBorder = trigger.className.replace(/ border.*$/g, '');
trigger.className = noBorder;
toggleAmbientOcclusion(aoCurrentState);
}
}
);
AppState.clipping.listeners.button = true;
}
}
/**
* A left side settings panel
* @param {String} triggerId - The settings button id
*/
function toggleSettingsPanel(triggerId) {
const btn = document.querySelector(`#${triggerId}`);
const lightHeading = document.createElement('h2');
lightHeading.className = 'fs-5 ms-2 mb-3 mt-3';
lightHeading.innerHTML = '<i class="bi bi-lightbulb me-1"></i> Direzione luce';
const envHeading = document.createElement('h2');
envHeading.className = 'fs-5 ms-2 mb-3 mt-3';
envHeading.innerHTML = '<i class="bi bi-brightness-high me-1"></i> Ambiente';
btn.addEventListener('click', () => {
ATON.UI.setSidePanelLeft();
ATON.UI.showSidePanel({header: '<i class="bi bi-gear-fill me-1"></i> Impostazioni'});
ATON.UI.elSidePanel.appendChild(lightHeading);
const lightSliderX = createLightSlider('x', 'Asse X', [-2, 2], 0.1);
const lightSliderY = createLightSlider('y', 'Asse Y', [-2, 2], 0.1);
const lightSliderZ = createLightSlider('z', 'Asse Z', [-2, 2], 0.1);
ATON.UI.elSidePanel.appendChild(lightSliderX);
ATON.UI.elSidePanel.appendChild(lightSliderY);
ATON.UI.elSidePanel.appendChild(lightSliderZ);
ATON.UI.elSidePanel.appendChild(envHeading);
const ambientOcclSwitch = document.createElement('div');
ambientOcclSwitch.className = 'form-check form-switch ms-4 mt-2';
ambientOcclSwitch.innerHTML = `
<input class="form-check-input" type="checkbox" role="switch" id="aoSwitch" title="Abilita / disabilita ambient occlusion">
<label class="form-check-label" for="aoSwitch"><em>Ambient occlusion</em> <i class="bi bi-info-circle ms-2 c-hand"></i></label>
`;
const shadowsSwitch = document.createElement('div');
shadowsSwitch.className = 'form-check form-switch ms-4 mt-2';
shadowsSwitch.innerHTML = `
<input class="form-check-input" type="checkbox" role="switch" id="shadowsSwitch" title="Abilita / disabilita ombre">
<label class="form-check-label" for="shadowsSwitch">Ombre <i class="bi bi-info-circle ms-2 c-hand" title=""></i></label>
`;
shadowsSwitch.querySelector('input[type="checkbox"]').checked = AppState.shadows;
ambientOcclSwitch.querySelector('input[type="checkbox"]').checked = AppState.ambientOcclusion;
ATON.UI.elSidePanel.appendChild(ambientOcclSwitch);
ATON.UI.elSidePanel.appendChild(shadowsSwitch);
// TODO: move somewhere else...
document.querySelector('#aoSwitch').addEventListener(
'change',
event => {
toggleAmbientOcclusion(event.target.checked);
AppState.ambientOcclusion = event.target.checked;
}
);
document.querySelector('#shadowsSwitch').addEventListener(
'change',
event => {
const checked = event.target.checked;
ATON.toggleShadows(checked);
AppState.shadows = checked;
}
);
});
}
/**
*
* @param {String} direction - The axis direction, one of 'x','y','z'
* @param {String} label - The slider label
* @param {Number[]} range - The slider's range
* @param {Number} step - The slider's step
*/
function createLightSlider(direction, label, range, step) {
const currentVal = ATON.getMainLightDirection()[direction];
const lightSlider = ATON.UI.createSlider({
range,
label,
value: Number.parseFloat(currentVal).toPrecision(1),
oninput: val => {
const lightDir = ATON.getMainLightDirection();
// Keep existing direction values for the other axes
lightDir[direction] = Number.parseFloat(val);
changeLightDirection(lightDir);
},
});
lightSlider.classList.add('ms-4');
lightSlider.querySelector('input').step = step;
return lightSlider;
}
/**
* Right-side main menu panel
* @param {String} triggerId - The menu button id
@@ -307,7 +152,5 @@ function buildOntologyMenu(ontology, sidePanel) {
* @param {String} ontologyJsonPath
*/
export async function initUI(ontologyJsonPath) {
toggleSettingsPanel('settings');
toggleContentMenu('menu', ontologyJsonPath);
toggleClipperBar('#clipper', '#clipper-bar');
}