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

js/controllers/DragController.js
80 строк3 KB
Valeev Serj
create_services
10 июл 2026, 21:27
10 июл 2026, 21:272e9672a
export class DragController {
    constructor(canvasService, layerController, eventBus) {
        this.canvasService = canvasService;
        this.layerController = layerController;
        this.events = eventBus;
        this._dragTarget = null;
        this._offsetX = 0;
        this._offsetY = 0;
        this._isDragging = false;
        this._bindEvents();
    }

    _bindEvents() {
        const canvas = this.canvasService.canvas;

        canvas.addEventListener('mousedown', (e) => this._onMouseDown(e));
        window.addEventListener('mousemove', (e) => this._onMouseMove(e));
        window.addEventListener('mouseup', () => this._onMouseUp());

        canvas.addEventListener('touchstart', (e) => {
            const touch = e.touches[0];
            const mouseEvent = new MouseEvent('mousedown', {
                clientX: touch.clientX,
                clientY: touch.clientY
            });
            this._onMouseDown(mouseEvent);
        }, { passive: true });

        window.addEventListener('touchmove', (e) => {
            if (!this._isDragging) return;
            const touch = e.touches[0];
            const mouseEvent = new MouseEvent('mousemove', {
                clientX: touch.clientX,
                clientY: touch.clientY
            });
            this._onMouseMove(mouseEvent);
        }, { passive: true });

        window.addEventListener('touchend', () => {
            this._onMouseUp();
        }, { passive: true });
    }

    _onMouseDown(e) {
        const pos = this.canvasService.getMousePos(e);
        const project = this.layerController.project;
        const sorted = [...project.layers]
            .filter(l => l.visible)
            .sort((a, b) => b.zIndex - a.zIndex);

        for (const layer of sorted) {
            if (this.canvasService.hitTest(layer, pos.x, pos.y)) {
                this._dragTarget = layer;
                this._offsetX = pos.x - layer.x;
                this._offsetY = pos.y - layer.y;
                this._isDragging = true;
                this.layerController.select(layer.id);
                this.canvasService.canvas.style.cursor = 'grabbing';
                break;
            }
        }
    }

    _onMouseMove(e) {
        if (!this._isDragging || !this._dragTarget) return;
        const pos = this.canvasService.getMousePos(e);
        const newX = Math.min(Math.max(pos.x - this._offsetX, 0), this.canvasService.width);
        const newY = Math.min(Math.max(pos.y - this._offsetY, 0), this.canvasService.height);
        this.layerController.update(this._dragTarget.id, { x: newX, y: newY });
    }

    _onMouseUp() {
        if (this._isDragging && this._dragTarget) {
            this.events.emit('project:changed');
        }
        this._isDragging = false;
        this._dragTarget = null;
        this.canvasService.canvas.style.cursor = 'grab';
    }
}