igeom/src/app/core/components/selector.js

import { APP_STATE } from "../enums/app-state-enum";
import { stages as Stages } from "../components/stages";
import { state as State } from "../components/state";
import { objects as Objects } from "../components/objects";
class Selector {
  constructor() {
    this._objects = [];
    this._selectorPosStart;
    this._selectorPosNow;
    this._mode = "";
    this._stage = Stages.getCurrentStage();
    this._layer = Stages.getCurrentLayer();
    this._selectorRect = new Konva.Rect({
      x: 0,
      y: 0,
      width: 0,
      height: 0,
      stroke: "#33BCFF",
      dash: [2, 2]
    });
  }

  bootstrap() {
    this.configureSelectorEvents();
    this.addToLayer();
  }

  addToLayer() {
    this._selectorRect.listening(false);
    this._layer.add(this._selectorRect);
  }

  getSelectedObjects() {
    return this._objects;
  }

  startDragSelector(posIn) {
    this._selectorPosStart = { x: posIn.x, y: posIn.y };
    this._selectorPosNow = { x: posIn.x, y: posIn.y };
  }

  configureSelectorEvents() {
    var _this = this;
    this._stage.on("mousedown", function(e) {
      _this._mode = "drawing";
      _this.startDragSelector({ x: e.evt.layerX, y: e.evt.layerY });
    });

    this._stage.on("mousemove", function(e) {
      if (_this._mode === "drawing") {
        _this.updateDragSelector({ x: e.evt.layerX, y: e.evt.layerY });
      }
    });
    this._stage.on("mouseup", function(e) {
      _this._mode = "";
      _this._selectorRect.visible(false);
      _this._stage.draw();
    });
  }

  updateDragSelector(posIn) {
    if (State.getCurrentState() != APP_STATE.NONE) return;
    let currentObjects = Objects.get();
    let posRect = this.reverse(this._selectorPosStart, this._selectorPosNow);
    this._selectorPosNow = { x: posIn.x, y: posIn.y };
    this._selectorRect.x(posRect.x1);
    this._selectorRect.y(posRect.y1);
    this._selectorRect.width(posRect.x2 - posRect.x1);
    this._selectorRect.height(posRect.y2 - posRect.y1);
    this._selectorRect.visible(true);
    for (let i = 0; i < currentObjects.length; i = i + 1) {
      let object = currentObjects[i];
      if (object.children != undefined && object.children.length > 0) {
        for (let j = 0; j < object.children.length; j++) {
          this.style(object.children[j], this._selectorRect);
        }
      } else {
        this.style(object, this._selectorRect);
      }
    }
    this._stage.draw();
  }

  style(object, selectorRect) {
    if (object.attrs.selectable != undefined) {
      if (object.attrs.selectable == false) {
        return;
      }
    }
    if (this.hitCheck(object, selectorRect)) {
      object.stroke("#33BCFF");
      object.fill("#33BCFF");
      this.setObject(object);
    } else {
      if (object.attrs.style != undefined) {
        this.removeObject(object);
        object.stroke(object.attrs.style.stroke);
        object.fill(object.attrs.style.fill);
      } else {
        this.removeObject(object);
        object.stroke("black");
      }
    }
  }

  hitCheck(shape1, shape2) {
    let s1 = shape1.getClientRect();
    let s2 = shape2.getClientRect();
    let X = s1.x;
    let Y = s1.y;
    let A = s1.x + s1.width;
    let B = s1.y + s1.height;
    let X1 = s2.x;
    let A1 = s2.x + s2.width;
    let Y1 = s2.y;
    let B1 = s2.y + s2.height;

    if (A < X1 || A1 < X || B < Y1 || B1 < Y) {
      return false;
    } else {
      return true;
    }
  }

  setObject(object) {
    if (this._objects.includes(object)) return;
    this._objects.push(object);
  }

  removeObject(object) {
    if (this._objects.length == 0) return;
    this._objects.splice(this._objects.indexOf(object), 1);
  }

  reverse(r1, r2) {
    let r1x = r1.x,
      r1y = r1.y,
      r2x = r2.x,
      r2y = r2.y,
      d;
    if (r1x > r2x) {
      d = Math.abs(r1x - r2x);
      r1x = r2x;
      r2x = r1x + d;
    }
    if (r1y > r2y) {
      d = Math.abs(r1y - r2y);
      r1y = r2y;
      r2y = r1y + d;
    }
    return { x1: r1x, y1: r1y, x2: r2x, y2: r2y };
  }
}

export const selector = new Selector();