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

Compare commits

base: nicolo:8ce7492f4e534421b2c1abe00403f8941e40e84b
Branches Tags
nicolo:master nicolo:ontology nicolo:semantic nicolo:grouped-menu nicolo:stimulus nicolo:structure-updates
...
compare: nicolo:master
Branches Tags
nicolo:master nicolo:ontology nicolo:semantic nicolo:grouped-menu nicolo:stimulus nicolo:structure-updates

4 Commits
8ce7492f4e ... master

Author SHA1 Message Date
Nicolò P.
28a34905c7 Minor adjustments 2026-06-10 09:24:42 +02:00
Nicolò P.
8aa3f7cde8 WIP ontology tree in menu 2026-06-10 09:18:03 +02:00
Nicolò P.
0c3a049d12 Rename js to src 2026-05-21 13:25:17 +02:00
Nicolò P.
3305e74776 Add fullscreen option 2026-05-21 13:19:11 +02:00
22 changed files with 3042 additions and 70 deletions
Expand all files Collapse all files

2
index.html
View File

@@ -51,7 +51,7 @@
<script type="text/javascript" src="./vendor/leaflet/dist/leaflet-src.js"></script> <script type="text/javascript" src="./vendor/leaflet/dist/leaflet-src.js"></script>
<!-- Main js entry --> <!-- Main js entry -->
<script type="module" src="js/main.js"></script> <script type="module" src="src/main.js"></script>
</head> </head>
<body data-bs-theme="light"> <body data-bs-theme="light">

43
js/ontology.js
View File

@@ -1,43 +0,0 @@
/**
* @module Ontology
*/
/**
* @todo Temporarily returns domains and ontology labels only
* Traverse an ontology from its JSON description
* @param {String} jsonPath The path (URI) of the ontology JSON file
* @returns {Object}
*/
export async function traverseOntology(jsonPath) {
const ontology = await loadOntology(jsonPath);
const domains = [];
for (const k of Object.keys(ontology)) {
if (k === 'domains') {
for (const domainKey of Object.keys(ontology[k])) {
domains.push({
label: domainKey,
child: ontology[k][domainKey][0].label,
});
}
}
}
return {
ontology: ontology.ontology,
domains
};
}
/**
* Load an ontology from its JSON description
* @param {String} jsonPath The path (URI) of the ontology JSON file
* @returns {Object}
*/
export async function loadOntology(jsonPath) {
const ontology = await fetch(jsonPath)
.then(res => res.json())
.catch(err => console.error(err));
return ontology;
}

2922
scenes/BaroqueTheatreOntology_BT_EN_v1_7_UI_by_domain_v3.json Normal file
View File

File diff suppressed because it is too large Load Diff

8
scenes/salvador/index.js
View File

@@ -1,8 +1,8 @@
import { openScene } from "../../js/scene.js"; import { openScene } from "../../src/scene.js";
import { config } from "../../config.js"; import { config } from "../../config.js";
import AppState from "../../js/state.js"; import AppState from "../../src/state.js";
import { normalizeNodes } from "../../js/utils/nodeUtils.js"; import { normalizeNodes } from "../../src/utils/nodeUtils.js";
import { initStimulus } from "../../js/utils/stimulus.js"; import { initStimulus } from "../../src/utils/stimulus.js";
initStimulus(); initStimulus();

4
scenes/ssgp/index.html
View File

@@ -73,6 +73,10 @@
data-clipper-target="trigger" data-action="clipper#toggleClipper"> data-clipper-target="trigger" data-action="clipper#toggleClipper">
<i class="bi bi-scissors"></i> <i class="bi bi-scissors"></i>
</a> </a>
<a class="btn aton-btn fs-5 p-1 text-white" title="Attiva schermo intero" data-toolbar-target="fullscreen"
data-action="toolbar#toggleFullscreen">
<i class="bi bi-fullscreen"></i>
</a>
</div> </div>
<div class="d-none w-25 <div class="d-none w-25
position-absolute position-absolute

10
scenes/ssgp/index.js
View File

@@ -1,9 +1,9 @@
import { openScene } from "../../js/scene.js"; import { openScene } from "../../src/scene.js";
import { config } from "../../config.js"; import { config } from "../../config.js";
import AppState from "../../js/state.js"; import AppState from "../../src/state.js";
import { normalizeNodes } from "../../js/utils/nodeUtils.js"; import { normalizeNodes } from "../../src/utils/nodeUtils.js";
import { initStimulus } from "../../js/utils/stimulus.js"; import { initStimulus } from "../../src/utils/stimulus.js";
import { initAtonEvents } from "../../js/utils/aton.js"; import { initAtonEvents } from "../../src/utils/aton.js";
initStimulus(); initStimulus();

0
js/controllers/clipper_controller.js → src/controllers/clipper_controller.js
View File

34
js/controllers/menu_controller.js → src/controllers/menu_controller.js
View File

@@ -6,7 +6,7 @@ import { traverseOntology } from "../ontology.js";
const html = String.raw; const html = String.raw;
const domParser = new DOMParser; const domParser = new DOMParser;
// TODO: hard-coded, but follows a convention... // TODO: hard-coded, but follows a convention...
const ontologyJsonPath = location.pathname + 'ontology.json'; const ontologyJsonPath = '/a/scaenae/scenes/BaroqueTheatreOntology_BT_EN_v1_7_UI_by_domain_v3.json';
export default class extends Controller { export default class extends Controller {
static targets = ['trigger', 'layers', 'ontology']; static targets = ['trigger', 'layers', 'ontology'];
@@ -229,24 +229,26 @@ export default class extends Controller {
* @param {HTMLElement} tab Tab content element * @param {HTMLElement} tab Tab content element
*/ */
#buildOntologyMenu(ontology, tab) { #buildOntologyMenu(ontology, tab) {
console.debug(ontology);
const mainNode = tab.querySelector('#ontology-list'); const mainNode = tab.querySelector('#ontology-list');
mainNode.textContent = ontology.ontology; mainNode.innerHTML = html`
<span class="fs-5 fw-bold">${ontology.ontology}</span>
let domainList = html`
<ul class="list-group mt-2" id="domains-list"></ul>
`; `;
mainNode.classList.add('pb-3');
// Very fragile and ugly!! let domainList = document.createElement('div');
mainNode.innerHTML += domainList;
domainList = tab.querySelector('#domains-list'); for (let domain of ontology.domains) {
const domainItem = document.createElement('div');
for(let domain of ontology.domains) { domainItem.className = 'border-start border-bottom rounded';
const domainItem = html` domainItem.textContent = domain.label;
<li class="list-group-item">${domain.label}</li> // Indentation...
`; domainItem.classList.add(`ms-${domain.depth}`, `ps-${domain.depth}`, 'py-2');
domainList.innerHTML += domainItem;
if (domain.depth === 1) domainItem.classList.add('fw-bold');
domainList.appendChild(domainItem);
} }
mainNode.appendChild(domainList);
} }
} }

0
js/controllers/modal_controller.js → src/controllers/modal_controller.js
View File

0
js/controllers/settings_controller.js → src/controllers/settings_controller.js
View File

0
js/controllers/tabs_controller.js → src/controllers/tabs_controller.js
View File

20
js/controllers/toolbar_controller.js → src/controllers/toolbar_controller.js
View File

@@ -9,7 +9,7 @@ const panelHeader = html`
`; `;
export default class extends Controller { export default class extends Controller {
static targets = ['settings']; static targets = ['settings', 'fullscreen'];
connect() { connect() {
console.log('#toolbar controller connected'); console.log('#toolbar controller connected');
@@ -23,6 +23,24 @@ export default class extends Controller {
ATON.UI.showSidePanel({header: panelHeader}); ATON.UI.showSidePanel({header: panelHeader});
this.#buildSettingsPanel(ATON.UI.elSidePanel); this.#buildSettingsPanel(ATON.UI.elSidePanel);
} }
toggleFullscreen() {
/**
* @type {HTMLAnchorElement}
*/
const target = this.fullscreenTarget;
const icon = target.querySelector('i');
if (!document.fullscreenElement) {
document.body.requestFullscreen();
icon.classList.remove('bi-fullscreen');
icon.classList.add('bi-fullscreen-exit');
target.title = 'Esci da schermo intero';
} else {
document.exitFullscreen();
icon.classList.remove('bi-fullscreen-exit');
icon.classList.add('bi-fullscreen');
target.title = 'Attiva schermo intero';
}
}
/** /**
* Clone a <template> by id * Clone a <template> by id
* @param {String} id * @param {String} id

0
js/main.js → src/main.js
View File

0
js/map.js → src/map.js
View File

69
src/ontology.js Normal file
View File

@@ -0,0 +1,69 @@
/**
* @module Ontology
*/
/**
* @todo Temporarily returns domains and ontology labels only
* Traverse an ontology from its JSON description
* @param {String} jsonPath The path (URI) of the ontology JSON file
* @returns {Object}
*/
export async function traverseOntology(jsonPath) {
const ontology = await loadOntology(jsonPath);
const modules = ontology.modules;
let tree = [];
for (const module of modules) {
if (module.id === 'Architecture') {
console.debug(module.classTrees);
for (const classTree of module.classTrees) {
traverseClasses(classTree, tree);
}
}
}
return {
ontology: "Architecture",
domains: tree
};
}
/**
*
* @param {Object} ontologyClass
* @param {Array<Object>} tree
* @param {Number} depth
*/
function traverseClasses(ontologyClass, tree, depth = 1) {
const ontologyNode = {
id: ontologyClass.id,
label: ontologyClass.label,
depth,
children: [],
};
tree.push(ontologyNode);
if (ontologyClass.children && Array.isArray(ontologyClass.children)) {
for(const child of ontologyClass.children) {
ontologyNode.children.push(
traverseClasses(child, tree, depth + 1)
);
}
}
}
/**
* Load an ontology from its JSON description
* @param {String} jsonPath The path (URI) of the ontology JSON file
* @returns {Object}
*/
export async function loadOntology(jsonPath) {
const ontology = await fetch(jsonPath)
.then(res => res.json())
.catch(err => console.error(err));
return ontology;
}

0
js/scene.js → src/scene.js
View File

0
js/state.js → src/state.js
View File

0
js/utils/aton.js → src/utils/aton.js
View File

0
js/utils/clipping.js → src/utils/clipping.js
View File

0
js/utils/environment.js → src/utils/environment.js
View File

0
js/utils/nodeUtils.js → src/utils/nodeUtils.js
View File

0
js/utils/stimulus.js → src/utils/stimulus.js
View File