js/controllers/SettingsController.js - master - Gabryelf/Icons-Customize-Gen

js/controllers/SettingsController.js
147 строк6 KB
Valeev Serj
create_services
10 июл 2026, 21:27
10 июл 2026, 21:272e9672a
export class SettingsController {
    constructor(layerController, eventBus) {
        this.layerController = layerController;
        this.events = eventBus;
        this._elements = {};
        this._bindUI();
        this._bindEvents();
    }

    _bindUI() {
        const container = document.getElementById('paramGroup');
        // Создаём HTML параметров
        container.innerHTML = `
            <div class="param-row">
                <label>Размер</label>
                <input type="range" id="sizeSlider" min="16" max="280" value="80" />
                <span class="value-display" id="sizeValue">80</span>
            </div>
            <div class="param-row">
                <label>Поворот</label>
                <input type="range" id="rotateSlider" min="0" max="360" value="0" />
                <span class="value-display" id="rotateValue">0°</span>
            </div>
            <div class="param-row">
                <label>Прозрачность</label>
                <input type="range" id="opacitySlider" min="5" max="100" value="100" />
                <span class="value-display" id="opacityValue">100%</span>
            </div>
            <div class="param-row">
                <label>Цвет</label>
                <input type="color" id="colorPicker" value="#7c5cfc" />
                <select id="blendSelect">
                    <option value="normal">Нормальный</option>
                    <option value="multiply">Умножение</option>
                    <option value="screen">Экран</option>
                    <option value="overlay">Перекрытие</option>
                    <option value="soft-light">Мягкий свет</option>
                    <option value="hard-light">Жёсткий свет</option>
                    <option value="difference">Разница</option>
                </select>
            </div>
            <div class="param-row">
                <label>Фильтр</label>
                <select id="filterSelect">
                    <option value="none">Нет</option>
                    <option value="grayscale">Ч/б</option>
                    <option value="sepia">Сепия</option>
                    <option value="contrast">Контраст</option>
                    <option value="brightness">Яркость</option>
                    <option value="blur">Размытие</option>
                    <option value="saturate">Насыщенность</option>
                    <option value="hue-rotate">Оттенок</option>
                    <option value="invert">Инверсия</option>
                </select>
            </div>
        `;

        this._elements = {
            sizeSlider: document.getElementById('sizeSlider'),
            sizeValue: document.getElementById('sizeValue'),
            rotateSlider: document.getElementById('rotateSlider'),
            rotateValue: document.getElementById('rotateValue'),
            opacitySlider: document.getElementById('opacitySlider'),
            opacityValue: document.getElementById('opacityValue'),
            colorPicker: document.getElementById('colorPicker'),
            blendSelect: document.getElementById('blendSelect'),
            filterSelect: document.getElementById('filterSelect'),
            selectedLabel: document.getElementById('selectedLabel'),
        };
    }

    _bindEvents() {
        const el = this._elements;

        const onParamChange = () => {
            const layer = this.layerController.project.selectedLayer;
            if (!layer) return;

            const size = parseInt(el.sizeSlider.value);
            const rotation = parseInt(el.rotateSlider.value);
            const opacity = parseInt(el.opacitySlider.value);
            const color = el.colorPicker.value;
            const blend = el.blendSelect.value;
            const filter = el.filterSelect.value;

            el.sizeValue.textContent = size;
            el.rotateValue.textContent = rotation + '°';
            el.opacityValue.textContent = opacity + '%';

            this.layerController.update(layer.id, {
                width: size,
                height: size,
                rotation: rotation,
                opacity: opacity,
                color: color,
                blendMode: blend,
                filter: filter
            });
        };

        el.sizeSlider.addEventListener('input', onParamChange);
        el.rotateSlider.addEventListener('input', onParamChange);
        el.opacitySlider.addEventListener('input', onParamChange);
        el.colorPicker.addEventListener('input', onParamChange);
        el.blendSelect.addEventListener('change', onParamChange);
        el.filterSelect.addEventListener('change', onParamChange);

        this.events.on('layer:selected', (layer) => this._updateUI(layer));
        this.events.on('layer:updated', (layer) => {
            if (layer.id === this.layerController.project.selectedId) {
                this._updateUI(layer);
            }
        });
    }

    _updateUI(layer) {
        const el = this._elements;
        if (!layer) {
            el.sizeSlider.disabled = true;
            el.rotateSlider.disabled = true;
            el.opacitySlider.disabled = true;
            el.colorPicker.disabled = true;
            el.blendSelect.disabled = true;
            el.filterSelect.disabled = true;
            el.selectedLabel.textContent = 'не выбран';
            return;
        }

        el.sizeSlider.disabled = false;
        el.rotateSlider.disabled = false;
        el.opacitySlider.disabled = false;
        el.colorPicker.disabled = false;
        el.blendSelect.disabled = false;
        el.filterSelect.disabled = false;

        el.sizeSlider.value = layer.width;
        el.sizeValue.textContent = layer.width;
        el.rotateSlider.value = layer.rotation;
        el.rotateValue.textContent = layer.rotation + '°';
        el.opacitySlider.value = layer.opacity;
        el.opacityValue.textContent = layer.opacity + '%';
        el.colorPicker.value = layer.color || '#7c5cfc';
        el.blendSelect.value = layer.blendMode || 'normal';
        el.filterSelect.value = layer.filter || 'none';
        el.selectedLabel.textContent = layer.name || `Слой #${layer.id}`;
    }
}