implement selected points, persist points in memory

src/app/core/components/selector.js

@@ -2,105 +2,108 @@ 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";
-export const 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]
-  });
+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]
+    });
+  }
 
-  let _stage = Stages.getCurrentStage();
-  let _layer = Stages.getCurrentLayer();
+  bootstrap() {
+    this.configureSelectorEvents();
+    this.addToLayer();
+  }
 
-  function _bootstrap() {
-    _configureSelectorEvents();
-    _addToLayer();
+  addToLayer() {
+    this._selectorRect.listening(false);
+    this._layer.add(this._selectorRect);
   }
 
-  function _addToLayer() {
-    _selectorRect.listening(false);
-    _layer.add(_selectorRect);
+  getSelectedObjects() {
+    return this._objects;
   }
 
-  function _getSelectedObjects() {
-    return _objects;
+  startDragSelector(posIn) {
+    this._selectorPosStart = { x: posIn.x, y: posIn.y };
+    this._selectorPosNow = { x: posIn.x, y: posIn.y };
   }
 
-  function _configureSelectorEvents() {
-    _stage.on("mousedown", function(e) {
-      _mode = "drawing";
-      _startDragSelector({ x: e.evt.layerX, y: e.evt.layerY });
+  configureSelectorEvents() {
+    var _this = this;
+    this._stage.on("mousedown", function(e) {
+      _this._mode = "drawing";
+      _this.startDragSelector({ x: e.evt.layerX, y: e.evt.layerY });
     });
 
-    _stage.on("mousemove", function(e) {
-      if (_mode === "drawing") {
-        _updateDragSelector({ 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 });
       }
     });
-
-    _stage.on("mouseup", function(e) {
-      _mode = "";
-      _selectorRect.visible(false);
-      _stage.draw();
+    this._stage.on("mouseup", function(e) {
+      _this._mode = "";
+      _this._selectorRect.visible(false);
+      _this._stage.draw();
     });
   }
 
-  function _startDragSelector(posIn) {
-    _selectorPosStart = { x: posIn.x, y: posIn.y };
-    _selectorPosNow = { x: posIn.x, y: posIn.y };
-  }
-
-  function _updateDragSelector(posIn) {
+  updateDragSelector(posIn) {
     if (State.getCurrentState() != APP_STATE.NONE) return;
     let currentObjects = Objects.get();
-    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);
-
+    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++) {
-          _style(object.children[j], _selectorRect);
+          this.style(object.children[j], this._selectorRect);
         }
       } else {
-        _style(object, _selectorRect);
+        this.style(object, this._selectorRect);
       }
     }
-    _stage.draw();
+    this._stage.draw();
   }
 
-  function _style(object, selectorRect) {
+  style(object, selectorRect) {
     if (object.attrs.selectable != undefined) {
       if (object.attrs.selectable == false) {
         return;
       }
     }
-    if (_hitCheck(object, selectorRect)) {
+    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");
       }
     }
   }
 
-  function _hitCheck(shape1, shape2) {
+  hitCheck(shape1, shape2) {
     let s1 = shape1.getClientRect();
     let s2 = shape2.getClientRect();
     let X = s1.x;
@@ -119,7 +122,17 @@ export const selector = (function() {
     }
   }
 
-  function _reverse(r1, r2) {
+  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,
@@ -137,9 +150,6 @@ export const selector = (function() {
     }
     return { x1: r1x, y1: r1y, x2: r2x, y2: r2y };
   }
+}
 
-  return {
-    selctedObjects: _getSelectedObjects(),
-    bootstrap: _bootstrap
-  };
-})();
+export const selector = new Selector();