iGeomH/src/areaDesenho/AreaDeDesenho.js

import Ponto from '../objetos/Ponto.js';
/**
 * Classe AreaDeDesenho
 * 
 * Esta classe é utilizada para receber os elementos que serão desenhados na tela
 * 
 * @author Robertino Mendes Santiago Jr <robertino@ufpr.br>
 */
export default class AreaDeDesenho {

    /**
     * Método construtor da classe AreaDeDesenho.
     * São criadas duas áreas de desenho. A área mais inferior é utilizada para
     * receber o Objetos. A área mais superior é utilizar para controlar as
     * interações com o mouse.
     * @param {App} app Instância da classe App
     */
    constructor(app) {
        this.app = app;       

        this._area = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
        this._area.setAttribute('id', 'main-svg');
        this._area.setAttribute('preserveAspectRatio', 'none');

        this._areaTop = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
        this._areaTop.setAttribute('id', 'top-svg');
        this._areaTop.setAttribute('preserveAspectRatio', 'none');
        
        this._areaTop.onmouseup = (e) => this.mouseup(e);
        this._areaTop.onmousedown = (e) => this.mousedown(e);
        this._areaTop.onmousemove = (e) => this.mousemove(e);

        let div = document.getElementById('app');
        div.append(this._area);
        div.append(this._areaTop);

        this.resizeArea();
        window.addEventListener('resize', this.resizeArea.bind(this));

        this._selecionado = null;
        
    }

    /**
     * Método que redimensiona a área de desenho ao tamanho da tela
     */
    resizeArea() {
        let offset = this.area.getBoundingClientRect();
        this._area.setAttribute('width', window.innerWidth - offset.left + 'px');
        this._area.setAttribute('height', window.innerHeight - offset.top + 'px');

        this._areaTop.setAttribute('width', window.innerWidth - offset.left + 'px');
        this._areaTop.setAttribute('height', window.innerHeight - offset.top + 'px');
    }

    /**
     * Método que trata quando o botão esquerdo do mouse é pressionado na área de desenho
     * @param {Object} e - Objeto com os valores o evento disparado pelo mouse
     */
    mousedown(e) {
        e.preventDefault();
        e.stopPropagation();
        
        if (this.app.menuSuperior.selecionado == this.app.menuSuperior.CODE_PONTO) {
            let offset = this.area.getBoundingClientRect();

            let x = e.clientX - offset.left;
            let y = e.clientY - offset.top;

            this.adicionaObjetos(new Ponto(x, y));
            
        }

        // let offset = this.area.getBoundingClientRect();

        // let x = e.clientX - offset.left;
        // let y = e.clientY - offset.top;

        // if (this.selecionado) {
        //     this.selecionado.selecionado = false;
        //     this.selecionado = null;    
        // } else {
        //     this.app.objetos.map(objeto => {
        //         if (objeto.contains(x, y)) {
        //             this.selecionado = objeto;
        //             this.selecionado.selecionado = true;
        //         }
        //     });
        // }
        
    }

    /**
     * Método que trata quando o botão esquerdo do mouse é solto na área de desenho
     * @param {Object} e - Objeto com os valores o evento disparado pelo mouse
     */
    mouseup(e) {
        
    }

    /**
     * Método que trata quando o mouse é movimentado pela área de desenho
     * @param {Object} e - Objeto com os valores o evento disparado pelo mouse
     */
    mousemove(e) {
        if (this.selecionado) {
            let offset = this.area.getBoundingClientRect();

            let x = e.clientX - offset.left;
            let y = e.clientY - offset.top;

            this.selecionado.mover(x, y);
        }
    }

    /**
     * Adiciona um objeto à área de desenho
     * @param {ObjetoDinamico} objeto Objeto a ser inserido na área de desenho
     */
    adicionaObjetos(objeto) {
        this.app.objetos.push(objeto);
        this._area.append(objeto.draw());
    }

    /**
     * Devolve o valor da propriedade area
     * @return {Object} Valor da propriedade area
     */
    get area() {
        return this._area;
    }

    /**
     * Devolve o valor da propriedade selecionado
     * @return {Object} Valor da propriedade selecionado
     */
    get selecionado() {
        return this._selecionado;
    }

    /**
     * Atribui um valor recebido por parâmetro à propriedade selecionado
     * @param {ObjetoDinamico} selecionado Objeto selecionado na area de desenho
     */
    set selecionado(selecionado) {
        this._selecionado = selecionado;
    }
    
}