Rótulo do Ponto

src/areaDesenho/AreaDeDesenho.js

@@ -1,5 +1,5 @@
-
 import Ponto from '../objetos/Ponto';
+import MenuSuperior from '../menus/MenuSuperior';
 /**
  * Classe AreaDeDesenho
  *
@@ -60,7 +60,7 @@ export default class AreaDeDesenho {
     e.preventDefault();
     e.stopPropagation();
 
-    if (this.app.menuSuperior.selecionado === this.app.menuSuperior.CODE_PONTO) {
+    if (this.app.menuSuperior.selecionado === MenuSuperior.CODE_PONTO) {
       const offset = this.area.getBoundingClientRect();
 
       const x = e.clientX - offset.left;

src/menus/MenuSuperior.js

@@ -28,12 +28,12 @@ export default class MenuSuperior {
         image: btnPonto,
         options: [
           {
-            id: this.CODE_PONTO,
+            id: MenuSuperior.CODE_PONTO,
             title: 'Criar ponto na área de desenho',
             image: btnPonto,
           },
           {
-            id: this.CODE_PONTO_MEDIO,
+            id: MenuSuperior.CODE_PONTO_MEDIO,
             title: 'Criar ponto entre dois pontos',
             image: btnPontoMedio,
           },
@@ -107,16 +107,16 @@ export default class MenuSuperior {
 
     const div = document.getElementById('navbar-bottom');
     const html = `
-            <ul>
-                ${elem.options.map(e => `
-                    <li id="${e.id}">
-                        <a class="btn" title="${e.title}">
-                            <img src="${e.image}">
-                        </a>
-                </li>
-                `).join('')}
-            </ul>
-        `;
+      <ul>
+        ${elem.options.map(e => `
+          <li id="${e.id}">
+            <a class="btn" title="${e.title}">
+              <img src="${e.image}">
+            </a>
+          </li>
+        `).join('')}
+      </ul>
+    `;
     div.innerHTML = html;
     this.acoesSubMenu(elem);
   }
@@ -187,11 +187,11 @@ export default class MenuSuperior {
    * Constante que determina o código do menu Ponto
    * @return {string} Valor da constante
    */
-  static get CODE_PONTO() { return 'ponto'; }
+  static CODE_PONTO() { return 'ponto'; }
 
   /**
    * Constante que determina o código do menu Ponto Médio
    * @return {string} Valor da constante
    */
-  static get CODE_PONTO_MEDIO() { return 'ponto-medio'; }
+  static CODE_PONTO_MEDIO() { return 'ponto-medio'; }
 }

src/objetos/Ponto.js

@@ -1,4 +1,6 @@
 import ObjetoDinamico from './ObjetoDinamico';
+// eslint-disable-next-line import/no-cycle
+import Rotulo from './Rotulo';
 
 /**
  * Classe Ponto
@@ -20,25 +22,25 @@ export default class Ponto extends ObjetoDinamico {
     this.raio = 4;
     this.espessura = 1;
     this.selecionado = false;
-
+    this.rotulo = new Rotulo(this.x, this.y, this);
     this.elemento = this.criaPonto();
   }
 
   /**
-     * Método que devolve o elemento Ponto.
-     * @return {Object} Retorna o elemento que representa um Ponto em formato SVG
-     */
+   * Método que devolve o elemento Ponto.
+   * @return {Object} Retorna o elemento que representa um Ponto em formato SVG
+   */
   draw() {
     return this.elemento;
   }
 
   /**
-     * Verifica se existe um ponto na posição especificada por x e y
-     * @param {number} x - Valor da posição no eixo x
-     * @param {number} y - Valor da posição no eixo y
-     * @return {boolean} Retorna verdadeiro se existe um ponto na posição especificada.
-     * Caso contrário, retorna falso.
-     */
+   * Verifica se existe um ponto na posição especificada por x e y
+   * @param {number} x - Valor da posição no eixo x
+   * @param {number} y - Valor da posição no eixo y
+   * @return {boolean} Retorna verdadeiro se existe um ponto na posição especificada.
+   * Caso contrário, retorna falso.
+   */
   contains(x, y) {
     const xDiff = Math.abs(this.x - x);
     const yDiff = Math.abs(this.y - y);
@@ -51,15 +53,22 @@ export default class Ponto extends ObjetoDinamico {
    * @return {Object} Retorna o elemento SVG criado que representa o Ponto
    */
   criaPonto() {
-    const elemento = document.createElementNS(this.svgNS, 'circle');
-    elemento.setAttribute('id', 'mycircle');
-    elemento.setAttribute('cx', this.x);
-    elemento.setAttribute('cy', this.y);
-    elemento.setAttribute('r', this.raio);
-    elemento.setAttribute('fill', 'lightgreen');
-    elemento.setAttribute('stroke', 'black');
-    elemento.setAttribute('stroke-width', this.espessura);
-    return elemento;
+    const agrupador = document.createElementNS(this.svgNS, 'g');
+
+    const ponto = document.createElementNS(this.svgNS, 'circle');
+    ponto.setAttribute('id', 'mycircle');
+    ponto.setAttribute('cx', this.x);
+    ponto.setAttribute('cy', this.y);
+    ponto.setAttribute('r', this.raio);
+    ponto.setAttribute('fill', 'lightgreen');
+    ponto.setAttribute('stroke', 'black');
+    ponto.setAttribute('stroke-width', this.espessura);
+    agrupador.appendChild(ponto);
+
+    const rotulo = this.rotulo.draw();
+    agrupador.appendChild(rotulo);
+
+    return agrupador;
   }
 
   /**
@@ -68,8 +77,8 @@ export default class Ponto extends ObjetoDinamico {
    * @param {number} y Posição relativa ao eixo y onde o ponto será movimentado
    */
   mover(x, y) {
-    this.x = x;
-    this.y = y;
+    this.setX(x);
+    this.setY(y);
   }
 
   /**

src/objetos/Rotulo.js

@@ -0,0 +1,106 @@
+import ObjetoDinamico from './ObjetoDinamico';
+// eslint-disable-next-line import/no-cycle
+import Ponto from './Ponto';
+
+/**
+ * Classe Rotulo
+ *
+ * Classe utilizada para gerar os rótulos (etiquetas) dos objetos geométricos
+ *
+ * @author Robertino Mendes Santiago Jr <robertino@ufpr.br>
+ */
+export default class Rotulo extends ObjetoDinamico {
+  /**
+   * Método construtor da classe
+   */
+  constructor(x, y, objeto) {
+    super();
+    this.gapX = 5;
+    this.gapY = -5;
+    this.x = x + this.gapX;
+    this.y = y + this.gapY;
+    this.objeto = objeto;
+    this.valor = Rotulo.getRotulo(this.objeto);
+    this.elemento = this.criaTexto();
+  }
+
+  /**
+   * Método que devolve o elemento Rotulo.
+   * @return {Object} Retorna o elemento que representa um Rótulo em formato SVG
+   */
+  draw() {
+    return this.elemento;
+  }
+
+  /**
+   * Método que cria um elemento SVG que representa um texto
+   * @return {Object} Retorna o elemento SVG criado que representa o Rótulo
+   */
+  criaTexto() {
+    const elemento = document.createElementNS(this.svgNS, 'text');
+    elemento.setAttribute('x', this.x);
+    elemento.setAttribute('y', this.y);
+    elemento.setAttribute('fill', '#black');
+    elemento.setAttribute('font-size', '10pt');
+    elemento.textContent = this.valor;
+    return elemento;
+  }
+
+  /**
+   * Método estático que gera o rótulo para o objeto dinâmico
+   * @param {ObjetoDinamico} objeto Objeto que receberá o rótulo
+   * @return {String} Texto do rótulo
+   */
+  static getRotulo(objeto) {
+    if (objeto instanceof Ponto) {
+      const numero = Rotulo.getNumeroPonto();
+      const letra = Rotulo.getLetraPonto();
+      if (Rotulo.getLetraPonto() === 'Z') {
+        Rotulo.setLetraPonto('A');
+        Rotulo.setNumeroPonto(Rotulo.getNumeroPonto() + 1);
+      } else {
+        Rotulo.setLetraPonto(String.fromCharCode(Rotulo.getLetraPonto().charCodeAt(0) + 1));
+      }
+      return `${letra}${numero === 0 ? '' : numero}`;
+    }
+    return null;
+  }
+
+  /**
+   * Método estático que retorna a letra atual utilizada para o rótulo de objeto do tipo Ponto
+   * @return {String} letra atual utilizada para Pontos
+   */
+  static getLetraPonto() {
+    return Rotulo.letraPonto;
+  }
+
+  /**
+   * Atribui um valor recebido por parâmetro à propriedade estática letraPonto
+   * @param {String} letra valor da letra
+   */
+  static setLetraPonto(letra) {
+    Rotulo.letraPonto = letra;
+  }
+
+  /**
+   * Método estático que retorna o número atual utilizado para o rótulo de objeto do tipo Ponto
+   * @return {number} número atual utilizado para Pontos
+   */
+  static getNumeroPonto() {
+    return Rotulo.numeroPonto;
+  }
+
+  /**
+   * Atribui um valor recebido por parâmetro à propriedade estática numeroPonto
+   * @param {number} numero valor do número
+   */
+  static setNumeroPonto(numero) {
+    Rotulo.numeroPonto = numero;
+  }
+}
+
+/**
+ * Atributos estáticos utilizados para definir o valor do rótulo do Ponto
+ */
+Rotulo.letraPonto = 'A';
+Rotulo.numeroPonto = 0;