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

Refactor clipper controls

Browse Source
This commit is contained in:
Nicolò P 2025-04-01 17:13:18 +02:00
parent 8945fcb73b
commit 3422412bbf
3 changed files with 46 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
assets/controllers/clipper_controller.js
View File

@ -3,7 +3,13 @@ import * as THREE from "three"
import BIM from '../bim.js';
export default class extends Controller {
static targets = ['hex'];
static targets = [
'hex',
'color',
'range',
'rangeContainer',
'size'
];
/**
* @param {Event} event
@ -18,11 +24,15 @@ export default class extends Controller {
* @param {Event} event
*/
size(event) {
BIM.clipper.config.size = event.target.value
const value = event.target.value;
BIM.clipper.config.size = value
this.rangeTarget.title = value;
this.sizeTarget.textContent = value;
}
deleteAll() {
BIM.clipper.deleteAll();
this._resetControls();
}
/**
@ -32,5 +42,13 @@ export default class extends Controller {
toggle(event) {
BIM.clipper.enabled = event.target.value;
}
_resetControls() {
this.rangeTarget.value = 10;
this.rangeTarget.title = 10;
this.sizeTarget.textContent = '10';
this.colorTarget.value = '#eaeaea';
this.hexTarget.querySelector('span').textContent = '#eaeaea';
}
}

13
assets/styles/app.css
View File

@ -12,3 +12,16 @@
max-width: 20vw;
z-index: 5;
}
/* Clipper-related styles */
li button {
max-width: 40%;
}
input[type="color"] {
border: none;
}
input[type="range"] {
width: 100%;
}

22
templates/home/index.html.twig
View File

@ -7,7 +7,7 @@
{% include 'partials/navbar.html.twig' %}
<div class="columns">
<div class="column is-full" data-controller="scene" data-action="keydown->scene#keyboard:prevent">
<div class="column is-full" data-controller="scene" data-action="keydown->scene#keyboard">
<div id="scene" data-scene-target="scene"></div>
<div id="ui" data-theme="light" data-controller="form">
<aside class="menu ml-4 mt-3" data-controller="clipper">
@ -67,24 +67,28 @@
Colore piani
<div class="mt-2 p-2 input is-small" data-clipper-target="hex">
<input type="color" data-action="input->clipper#color change->clipper#color"
class="is-small is-clickable mr-2" aria-label="Colore clipper" value="#eaeaea" style="border: none">
data-clipper-target="color" class="is-small is-clickable mr-2"
aria-label="Colore clipper" value="#eaeaea">
<span>#eaeaea</span>
</div>
</li>
<li class="menu-item">
Grandezza piani
<div class="mt-2 input is-small" data-clipper-target="range">
<input class="is-clickable is-small" data-action="change->clipper#size"
type="range" step="0.1" min="5" max="15" style="width: 100%;">
<div class="mt-2 input is-small" data-clipper-target="range-container">
<input class="is-clickable is-small" data-action="change->clipper#size" data-clipper-target="range"
type="range" step="0.1" min="5" max="15" title="10">
<span class="is-size-6 is-small ml-1" data-clipper-target="size">10</span>
</div>
</li>
<li class="menu-item">
<div class="buttons">
<button class="button has-background-danger has-text-centered has-text-dark"
data-action="clipper#deleteAll" title="Elimina tutti i piani">Elimina</button>
</div>
</li>
</ul>
</li>
</ul>
<div class="buttons ml-6">
<button class="button is-danger" data-action="clipper#deleteAll" title="Elimina tutti i piani">Elimina</button>
</div>
</aside>
</div>
</div>