75 lines
2.0 KiB
JavaScript
75 lines
2.0 KiB
JavaScript
// Global ATON
|
|
import { Controller } from "@hotwired/stimulus"
|
|
import AppState from "../state.js";
|
|
import { addClippingPlane, resetClipping } from "../utils/clipping.js";
|
|
import { toggleAmbientOcclusion } from "../utils/environment.js";
|
|
|
|
/**
|
|
* Handle events for the clipper toolbar,
|
|
* related to the clipping module
|
|
*/
|
|
export default class extends Controller {
|
|
static targets = ['trigger', 'clipper', 'axis'];
|
|
static values = { enabled: Boolean };
|
|
|
|
connect() {
|
|
console.log('#clipper controller connected');
|
|
}
|
|
|
|
clip(event) {
|
|
/**
|
|
* @type {string}
|
|
*/
|
|
const label = event.params.axis;
|
|
/**
|
|
* @type {HTMLButtonElement}
|
|
*/
|
|
const target = event.target;
|
|
/**
|
|
* @type {NodeListOf<HTMLButtonElement>}
|
|
*/
|
|
const axes = this.axisTargets;
|
|
const classes = ['border', 'border-2', 'border-warning'];
|
|
|
|
addClippingPlane(label, -1);
|
|
target.classList.add(...classes);
|
|
|
|
for (const btn of axes) {
|
|
if (btn.id !== target.id) {
|
|
btn.classList.remove(...classes);
|
|
}
|
|
}
|
|
}
|
|
/**
|
|
* Toggle clipper toolbar
|
|
*/
|
|
toggleClipper() {
|
|
/**
|
|
* @type {HTMLElement}
|
|
*/
|
|
const trigger = this.triggerTarget;
|
|
this.clipperTarget.classList.toggle('d-none');
|
|
// If the toolbar is shown, clipping is enabled and vice versa
|
|
this.enabledValue = !this.clipperTarget.classList.contains('d-none');
|
|
|
|
this.axisTargets.forEach(btn => {
|
|
btn.classList.remove('border', 'border-2', 'border-warning');
|
|
});
|
|
|
|
// AO should be turned off if clipping is enabled
|
|
toggleAmbientOcclusion(!this.enabledValue);
|
|
|
|
if (this.enabledValue) {
|
|
trigger.className += ' border border-2 border-white';
|
|
}
|
|
|
|
if (!this.enabledValue) {
|
|
resetClipping();
|
|
trigger.className = trigger.className.replace(/ border.*$/g, '');
|
|
}
|
|
|
|
AppState.clipping.enabled = this.enabledValue;
|
|
}
|
|
}
|
|
|