poc-igeom-karla/src/app/components/point-component/drawers/point-drawer.js

/*
 iGeom
 LInE  www.usp.br/line
 */

import { ELEMENTS_CLASS } from "../../../core/enums/elements-class-enum";
import { label as Label } from "../../../component-registry/label";
import { app as App } from "../../../app";
import { PointModel } from "../models/point-model";
import { DrawerAggregator } from "../../../core/drawers/drawer-aggregator";
import { objects } from "../../../core/application/objects";
import { SelectableDrawer } from "../../../core/drawers/selectable-drawer";

const STYLE = {
  fill: "#9bc364",
  fill2: "#828783",
  strokeWidth: 1,
  stroke: "#9bc364"
  };

export class PointDrawer extends SelectableDrawer {

  constructor () {
    super();
    this.point;
    this.label;
    this.text;
    this.states = ["center"];
    super.setElementClass(ELEMENTS_CLASS.POINT);
    }

  draw (e) {
    if (e != undefined && e.attrs != undefined && e.attrs.genericObject != undefined) {
      const aggregator = this.drawPoint(e.attrs.genericObject);
      return aggregator;
      }
    if (this.state == undefined) {
      super.setState(this.states[0]);
      App.setStatus("Selecione o centro do Ponto");
      }
    if (this.state == this.states[0]) {
      App.setStatus("Selecione o centro do Ponto");
      const aggregator = this.drawPoint();
      super.setState(this.states[0]);
      return aggregator;
      }
    }

  drawPoint (point) {
    const pos = App.pos();
    let drawResult;
    if (point == undefined) {
      if (pos == undefined) return;
      drawResult = PointDrawer.drawAndGetPoint(pos.x, pos.y, true);
    } else
      drawResult = PointDrawer.drawPoint(point, true, point.draggable);

    this.point = drawResult.geometricObject;
    super.setKonvaObject(drawResult.konvaObject);
    const aggregator = new DrawerAggregator(this, this.point, this.konvaObject, ELEMENTS_CLASS.POINT); // app/core/drawers/drawer-aggregator.js
    super.addAggregator(aggregator);
    this.konvaObject.on("dragmove", aggregator.update.bind(aggregator));
    return aggregator;
    }

  update (aggregator, event) {
    aggregator.konvaObject.children.forEach(function (element) {
      if (element.attrs.class == ELEMENTS_CLASS.POINT) {
        aggregator.genericObject.update(element, event);
        }
      });
    }

  inserPointInLineSegment (konvaObject) {
    const drawerAggregators = objects.getByKonvaObject(konvaObject);
    if (drawerAggregators == undefined || drawerAggregators.length == 0) return;
    const drawerAggregator = drawerAggregators[0];
    drawerAggregator.drawer.insertPoint(drawerAggregator);
    }

  static drawAndGetPoint (x, y, useLabel) {
    return PointDrawer.drawPoint(new PointModel(x, y), useLabel);
    }

  static drawPoint (point, useLabel, draggable, selectable) {
    const group = SelectableDrawer.getKonvaGroup(draggable);
    const circle = PointDrawer.getKonvaCircle(point, draggable, selectable);

    if (useLabel != undefined && useLabel) {
      let label = (point != undefined && point.label != undefined && point.label != '') ? point.label : Label.draw();
      point.setLabel(label);
      const text = PointDrawer.getKonvaText(point, label);
      group.add(text);
      }

    if (selectable == undefined || selectable)
      SelectableDrawer.setSelectableIfSelectorChanged(circle);

    if (useLabel) {
      group.add(circle);
      SelectableDrawer.drawObject(group);
      SelectableDrawer.setMaxIndex(group);
      return { geometricObject: point, konvaObject: group };
    } else {
      SelectableDrawer.drawObject(circle);
      SelectableDrawer.setMaxIndex(circle);
      return { geometricObject: point, konvaObject: circle };
      }
    }

  static getKonvaCircle (point, draggable, selectable) {
    let fill = draggable == undefined || draggable ? STYLE.fill : STYLE.fill2;
    let stroke = draggable == undefined || draggable ? STYLE.stroke : STYLE.fill2;

    if (point.backgroundColor != undefined) {
      fill = point.backgroundColor;
      stroke = point.backgroundColor;
      }

    return new Konva.Circle({
      x: point.posX,
      y: point.posY,
      radius: 5,
      fill: fill,
      stroke: fill,
      strokeWidth: 1,
      strokeScaleEnabled: false,
      draggable: false,
      resizeEnabled: false,
      transformEnabled: false,
      style: { fill: fill, stroke: stroke },
      class: ELEMENTS_CLASS.POINT,
      connections: [],
      startPosX: point.posX,
      startPosY: point.posY,
      listening: true,
      selectable: selectable
      });
    }

  static getKonvaText (point, label) {
    return new Konva.Text({
      x: point.posX + 10,
      y: point.posY - 10,
      text: label,
      fontSize: 14,
      fontFamily: "Calibri",
      fill: "#434a45",
      stroke: "#ffffff",
      strokeWidth: 0.2,
      draggable: false,
      resizeEnabled: false,
      transformEnabled: false,
      selectable: false
      });
    }

  }