poc-igeom/app/core/components/selector.js

var selector = (function() {
  let _objects = [];
  let _selectorPosStart;
  let _selectorPosNow;
  let _mode = "";
  let _selectorRect = new Konva.Rect({
    x: 0,
    y: 0,
    width: 0,
    height: 0,
    stroke: "#33BCFF",
    dash: [2, 2]
  });

  function _bootstrap() {
    _configureSelectorEvents();
    _addToLayer();
  }

  function _addToLayer() {
    let layer = app.currentLayer();
    _selectorRect.listening(false);
    layer.add(_selectorRect);
  }

  function _getSelectedObjects() {
    return _objects;
  }

  function _configureSelectorEvents() {
    app.stage.on("mousedown", function(e) {
      _mode = "drawing";
      _startDragSelector({ x: e.evt.layerX, y: e.evt.layerY });
    });

    app.stage.on("mousemove", function(e) {
      if (_mode === "drawing") {
        _updateDragSelector({ x: e.evt.layerX, y: e.evt.layerY });
      }
    });

    app.stage.on("mouseup", function(e) {
      _mode = "";
      _selectorRect.visible(false);
      app.stage.draw();
    });
  }

  function _startDragSelector(posIn) {
    _selectorPosStart = { x: posIn.x, y: posIn.y };
    _selectorPosNow = { x: posIn.x, y: posIn.y };
  }

  function _updateDragSelector(posIn) {
    if (app.getState() != APP_STATE.NONE) return;
    let objects = app.getObjects();
    let posRect = _reverse(_selectorPosStart, _selectorPosNow);
    _selectorPosNow = { x: posIn.x, y: posIn.y };
    _selectorRect.x(posRect.x1);
    _selectorRect.y(posRect.y1);
    _selectorRect.width(posRect.x2 - posRect.x1);
    _selectorRect.height(posRect.y2 - posRect.y1);
    _selectorRect.visible(true);

    for (i = 0; i < objects.length; i = i + 1) {
      let object = objects[i];
      if (object.children != undefined && object.children.length > 0) {
        for (j = 0; j < object.children.length; j++) {
          _style(object.children[j], _selectorRect);
        }
      } else {
        _style(object, _selectorRect);
      }
    }
    app.stage.draw();
  }

  function _style(object, selectorRect) {
    if (object.attrs.selectable != undefined) {
      if (object.attrs.selectable == false) {
        return;
      }
    }
    if (_hitCheck(object, selectorRect)) {
      object.stroke("#33BCFF");
      object.fill("#33BCFF");
    } else {
      if (object.attrs.style != undefined) {
        object.stroke(object.attrs.style.stroke);
        object.fill(object.attrs.style.fill);
      } else {
        object.stroke("black");
      }
    }
  }

  function _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;
    }
  }

  function _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 };
  }
  return {
    selctedObjects: _getSelectedObjects(),
    bootstrap: _bootstrap
  };
})();