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

56
scenes/ssgp/index.html
View File

@@ -46,19 +46,30 @@
<script type="text/javascript" src="../../vendor/three/examples/js/controls/DragControls.js"></script>
<script type="text/javascript" src="/dist/ATON.min.js"></script>
<script type="importmap">
{
"imports": {
"@hotwired/stimulus": "../../vendor/@hotwired/stimulus/dist/stimulus.js"
}
}
</script>
<!-- Main js entry -->
<script type="module" src="./index.js"></script>
</head>
<body data-bs-theme="light">
<div id="toolbar" class="aton-toolbar-top w-100">
<div id="toolbar" class="aton-toolbar-top w-100"
data-controller="toolbar clipper" data-clipper-enabled-value="false">
<a class="btn aton-btn fs-5" href="/a/scaenae" id="back" title="Torna alla mappa">
<i class="bi bi-map-fill"></i>
</a>
<a class="btn aton-btn fs-5" id="settings" title="Impostazioni">
<a class="btn aton-btn fs-5" title="Impostazioni" data-toolbar-target="settings"
data-action="toolbar#toggleSettings">
<i class="bi bi-gear-fill"></i>
</a>
<a class="btn aton-btn fs-5" id="clipper" title="Attiva / disattiva sezionamento">
<a class="btn aton-btn fs-5" title="Attiva / disattiva sezionamento"
data-clipper-target="trigger" data-action="clipper#toggleClipper">
<i class="bi bi-scissors"></i>
</a>
<div class="d-none w-25
@@ -68,17 +79,48 @@
px-4 pt-2 pb-2 bg-opacity-50
rounded-bottom-3
mt-4 text-dark text-center"
id="clipper-bar">
id="clipper-bar"
data-clipper-target="clipper">
<span class="pt-5 pb-2 d-block fw-bold">Sezionamento</span>
<button class="btn aton-btn d-inline px-4 py-4 me-5" id="clipX" title="Sezione X"></button>
<button class="btn aton-btn d-inline px-4 py-4 me-5" id="clipY" title="Sezione Y"></button>
<button class="btn aton-btn d-inline px-4 py-4" id="clipZ" title="Sezione Z"></button>
<button class="btn aton-btn d-inline px-4 py-4 me-5" id="clipX"
data-clipper-target="axis" data-clipper-axis-param="x" data-action="clipper#clip" title="Sezione X"></button>
<button class="btn aton-btn d-inline px-4 py-4 me-5" id="clipY"
data-clipper-target="axis" data-clipper-axis-param="y" data-action="clipper#clip" title="Sezione Y"></button>
<button class="btn aton-btn d-inline px-4 py-4" id="clipZ"
data-clipper-target="axis" data-clipper-axis-param="z" data-action="clipper#clip" title="Sezione Z"></button>
</div>
<a class="btn aton-btn fs-5 float-end" id="menu" title="Menu">
<i class="bi bi-list"></i>
</a>
</div>
<!-- Settings menu template (except dynamic light sliders) -->
<template id="tmpl-settings">
<div data-controller="settings">
<h2 class="fs-5 ms-2 mb-3 mt-3">
<i class="bi bi-lightbulb me-1"></i> Direzione luce
</h2>
<div data-sliders-container></div>
<h2 class="fs-5 ms-2 mb-3 mt-3">
<i class="bi bi-brightness-high me-1"></i> Ambiente
</h2>
<div class="form-check form-switch ms-4 mt-2">
<input class="form-check-input" type="checkbox" role="switch"
data-settings-target="ao" data-action="change->settings#toggleAO">
<label class="form-check-label" for="aoSwitch">Ambient occlusion</label>
</div>
<div class="form-check form-switch ms-4 mt-2">
<input class="form-check-input" type="checkbox" role="switch"
data-settings-target="shadows" data-action="change->settings#toggleShadows">
<label class="form-check-label" for="shadowsSwitch">Ombre</label>
</div>
</div>
</template>
<template id="tmpl-menu-tabs">
<ul class="nav nav-pills" id="content-tabs">...</ul>
<div class="tab-content ...">...</div>
</template>
<!-- TODO CSS-only popover -->
<div class="card d-none" id="shadows-popover" popover>Disabilitare le ombre può migliorare le prestazioni</div>

3
scenes/ssgp/index.js
View File

@@ -3,6 +3,9 @@ import { config } from "../../config.js";
import AppState from "../../js/state.js";
import { normalizeNodes } from "../../js/utils/nodeUtils.js";
import { initUI } from "../../js/ui.js";
import { initStimulus } from "../../js/utils/stimulus.js";
initStimulus();
AppState.currentScene = 'ssgp';
const marker = config.markers.find(m => m.id === 'ssgp');