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

Draft groups in layers menu

Browse Source 
TODO: don't use Bootstrap's switches!!
This commit is contained in:
Nicolò P
2026-05-15 17:32:06 +02:00
parent 87245233b7
commit 11acecd33d
7 changed files with 88 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
js/controllers/menu_controller.js
View File

@@ -21,7 +21,7 @@ export default class extends Controller {
ATON.UI.setSidePanelRight();
ATON.UI.showSidePanel({header: 'Menu'});
this.#buildMenuPanel(ATON.UI.elSidePanel);
this.#buildLayersMenu(AppState.normalizedNodes, this.layersTarget);
this.#buildLayersMenu(AppState.treeNodes, this.layersTarget);
this.#buildOntologyMenu(await traverseOntology(ontologyJsonPath), this.ontologyTarget);
}
/**
@@ -66,8 +66,6 @@ export default class extends Controller {
`[data-menu-node-param="${child.id}"]`
);
console.debug(checkbox, child.id);
if (checkbox) checkbox.checked = status;
if (child.children.length > 0) {
@@ -95,27 +93,79 @@ export default class extends Controller {
}
/**
* @todo Don't rebuild it every time, use caching, return a container with checkboxes
* @param {Array<import("../state.js").NormalizedSceneNode>} nodes The normalized scene nodes (IDs and status)
* @param {Array<import("../state.js").NormalizedSceneNode>} tree The normalized scene nodes tree
* @param {HTMLElement} tab Tab content element
*/
#buildLayersMenu(nodes, tab) {
for(let node of nodes) {
const menuItem = html`
<div class="form-check form-switch ms-${node.depth} ps-${node.depth} mt-2">
<input class="form-check-input" type="checkbox" ${node.active ? 'checked' : ''} role="switch"
title="Mostra / nascondi layer"
data-menu-node-param="${node.id}"
data-action="change->menu#toggleNode">
<label class="form-check-label">${node.id}</label>
</div>
`;
// Awful?
#buildLayersMenu(tree, tab) {
for (const node of tree) {
tab.appendChild(
domParser.parseFromString(menuItem, 'text/html').querySelector('div')
node.children.length > 0
? this.#createLayerGroup(node)
: this.#createLayerToggle(node)
);
}
}
/**
* @param {import("../state.js").NormalizedSceneNode} node
* @returns {HTMLDivElement}
*/
#createLayerToggle(node) {
const checkbox = html`
<div class="form-check form-switch ms-${node.depth} ps-${node.depth} mt-2">
<input class="form-check-input" type="checkbox" ${node.active ? 'checked' : ''} role="switch"
title="Mostra / nascondi layer"
data-menu-node-param="${node.id}"
data-action="change->menu#toggleNode">
<label class="form-check-label">${node.id}</label>
</div>
`;
return domParser.parseFromString(checkbox, 'text/html').querySelector('div');
}
/**
* @param {import("../state.js").NormalizedSceneNode} node
* @returns {HTMLDetailsElement}
*/
#createLayerGroup(node) {
const { trigger, collapseDiv } = this.#createNodeCollapse(node);
const wrapper = document.createElement('div');
collapseDiv.appendChild(this.#createLayerToggle(node));
for (const child of node.children) {
collapseDiv.appendChild(
child.children.length > 0
? this.#createLayerGroup(child)
: this.#createLayerToggle(child)
);
}
wrapper.appendChild(trigger);
wrapper.appendChild(collapseDiv);
wrapper.classList.add('m-0', 'p-0');
return wrapper;
}
/**
*
* @param {import("../state.js").NormalizedSceneNode} node
* @returns {{trigger: HTMLButtonElement, collapseDiv: HTMLDivElement}}
*/
#createNodeCollapse(node) {
const cleanId = node.id.replace(/[\s\/\-]+/g, '');
const trigger = document.createElement('button');
trigger.className = 'btn btn-link p-0 fs-6 fw-bold text-decoration-none text-reset';
trigger.setAttribute('data-bs-toggle', 'collapse');
trigger.setAttribute('data-bs-target', `#group-${cleanId}`);
trigger.innerHTML = `<i class="bi bi-chevron-down me-1"></i>${node.id}`;
const collapseDiv = document.createElement('div');
collapseDiv.className = 'collapse';
collapseDiv.id = `group-${cleanId}`;
return {trigger, collapseDiv};
}
/**
* Temporary implementation to show domains only
* @todo Don't rebuild it every time, use caching, return a container