Update 'src/app/core/application/selector.js'

Fixing midpoint object MiddlePoint: now constructing only one geometric object.
Indentation adjusts: inserted space in all function/method declaration (before open parenthesis) to distinguish it from its use.
To allow to "select" (with "rectangular area") the midpoint, was necessary to change functions/methods
"getSelectedPoints()" and "getSelectedPointsAggregators()", introducing the clause "||  x.elementClass === ELEMENTS_CLASS.MIDDLE_POINT".
TODO: this "if" is not the best choice since it is static, better to use the GeometricObject (KonvaObject) property "selectable" and "draggable".

src/app/core/application/selector.js

@@ -5,8 +5,13 @@ import { objects as Objects } from "../application/objects";
 import { ELEMENTS_CLASS } from "../enums/elements-class-enum";
 import { app as App } from "../../app";
 import { COMPONENT_TYPE } from "../enums/component-type-enum";
+
+// Rectangular area to select objects
+// Allow the construction of objects using the mode "selection + action"
+
 export class Selector {
-  constructor() {
+
+  constructor () {
     this._selectorPosStart;
     this._selectorPosNow;
     this._mode = "";
@@ -19,66 +24,70 @@ export class Selector {
       height: 0,
       stroke: "#33BCFF",
       dash: [2, 2]
-    });
-  }
+      });
+    }
 
-  bootstrap() {
+  bootstrap () {
     this.configureSelectorEvents();
     this.addToLayer();
-  }
+    }
 
-  addToLayer() {
+  addToLayer () {
     this._selectorRect.listening(false);
     Stages.getCurrentKonvaLayer().add(this._selectorRect);
-  }
+    }
 
-  getSelectedAggregators() {
+  getSelectedAggregators () {
     return Objects.getSelectedObjects();
-  }
+    }
 
-  getSelectedKonvaObjects() {
+  getSelectedKonvaObjects () {
     return this.getSelectedAggregators().map(function (aggregator) {
       if (aggregator.konvaObject.children == undefined) {
         return aggregator.konvaObject;
       } else {
         return aggregator.konvaObject.children.map(function (object) {
           return object;
-        })[0];
-      }
-    });
-  }
+          })[0];
+        }
+      });
+    }
 
-  getSelectedKonvaPoints() {
+  getSelectedKonvaPoints () {
     const objects = this.getSelectedKonvaObjects();
     return objects.filter(
       x => x.attrs.class != undefined && x.attrs.class == ELEMENTS_CLASS.POINT
     );
-  }
+    }
 
-  getSelectedPoints() {
+  // Check if objets inside "selectable" rectable is "selectable"
+  getSelectedPoints () { // accept only points
     const objects = this.getSelectedAggregators().filter(
       x =>
         x.elementClass === ELEMENTS_CLASS.POINT ||
-        x.elementClass === ELEMENTS_CLASS.INTERSECTION_POINT
-    );
+        x.elementClass === ELEMENTS_CLASS.INTERSECTION_POINT ||
+        x.elementClass === ELEMENTS_CLASS.MIDDLE_POINT
+      );
     return objects.map(x => x.genericObject);
-  }
+    }
 
-  getSelectedPointsAggregators() {
+  // Check if objets inside "selectable" rectable is "selectable"
+  getSelectedPointsAggregators () { // accept only points
     const objects = this.getSelectedAggregators().filter(
       x =>
         x.elementClass === ELEMENTS_CLASS.POINT ||
-        x.elementClass === ELEMENTS_CLASS.INTERSECTION_POINT
-    );
+        x.elementClass === ELEMENTS_CLASS.INTERSECTION_POINT ||
+        x.elementClass === ELEMENTS_CLASS.MIDDLE_POINT
+      );
     return objects;
-  }
+    }
 
-  startDragSelector(posIn) {
+  startDragSelector (posIn) {
     this._selectorPosStart = { x: posIn.x, y: posIn.y };
     this._selectorPosNow = { x: posIn.x, y: posIn.y };
-  }
+    }
 
-  updateDragSelector(posIn) {
+  updateDragSelector (posIn) {
     if (State.getCurrentState() != APP_STATE.NONE) return;
     App.clearSelectedTool();
     const currentObjects = Objects.get();
@@ -99,18 +108,20 @@ export class Selector {
         }
       } else {
         this.style(object, this._selectorRect, aggregator);
+        }
       }
-    }
     this._stage.draw();
-  }
+    }
 
-  style(object, selectorRect, aggregator) {
+  style (object, selectorRect, aggregator) {
+    //D var aux = ""; if (object && object!=undefined) { aux = object.attrs.label + ", selectable=" + object.attrs.selectable; }
+    //D console.log("selector.js!style(.): object=" + aux);
     if (object == undefined) return;
     if (object.attrs.selectable != undefined) {
       if (object.attrs.selectable == false) {
         return;
+        }
       }
-    }
     if (this.hitCheck(object, selectorRect)) {
       object.stroke("#33BCFF");
       object.fill("#33BCFF");
@@ -120,14 +131,14 @@ export class Selector {
         this.removeObject(aggregator);
         object.stroke(object.attrs.style.stroke);
         object.fill(object.attrs.style.fill);
-      } else {
+        } else {
         this.removeObject(aggregator);
         object.stroke("grey");
+        }
       }
     }
-  }
 
-  hitCheck(shape1, shape2) {
+  hitCheck (shape1, shape2) {
     let s1 = shape1.getClientRect();
     let s2 = shape2.getClientRect();
     let X = s1.x;
@@ -143,18 +154,18 @@ export class Selector {
       return false;
     } else {
       return true;
+      }
     }
-  }
 
-  setObject(object) {
+  setObject (object) {
     Objects.setSelectedOject(object);
-  }
+    }
 
-  removeObject(object) {
+  removeObject (object) {
     Objects.removeSelectedOject(object);
-  }
+    }
 
-  reverse(r1, r2) {
+  reverse (r1, r2) {
     let r1x = r1.x,
       r1y = r1.y,
       r2x = r2.x,
@@ -164,33 +175,34 @@ export class Selector {
       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 };
-  }
+    }
 
-  clear() {
+  clear () {
     Objects.get().forEach(aggregator => {
       const object = aggregator.konvaObject;
       if (object == undefined) return;
       if (object.attrs.selectable != undefined) {
         if (object.attrs.selectable == false) {
           return;
+          }
         }
-      }
       if (object.children != undefined && object.children.length > 0) {
         for (let j = 0; j < object.children.length; j++) {
           this.clearAggregator(object.children[j], aggregator);
-        }
+          }
       } else {
         this.clearAggregator(object, aggregator);
-      }
-    });
-  }
+        }
+      });
+    }
+
   clearAggregator(object, aggregator) {
     if (object == undefined) return;
     if (object.attrs.style != undefined) {
@@ -200,61 +212,64 @@ export class Selector {
     } else {
       this.removeObject(aggregator);
       object.stroke("grey");
+      }
     }
-  }
 
-  configureSelectorEvents() {
+  configureSelectorEvents () {
     this._stage.on("mousedown touchstart", this.start.bind(this));
     this._stage.on("mousemove touchmove", this.move.bind(this));
     this._stage.on("mouseup touchend", this.end.bind(this));
-  }
+    }
 
-  start(event) {
+  start (event) {
     const tool = App.getSelectedTool();
     if (tool == undefined || tool.options.type != COMPONENT_TYPE.SELECTOR) {
       return;
-    }
+      }
     const pos = {
       x: undefined,
       y: undefined
-    };
+      };
     if (event.evt.type === "touchstart") {
       pos.x = event.target.pointerPos.x;
       pos.y = event.target.pointerPos.y;
     } else {
       pos.x = event.evt.layerX;
       pos.y = event.evt.layerY;
-    }
+      }
     Stages.getCurrentKonvaLayer().add(this._selectorRect);
     this._mode = "drawing";
     this.startDragSelector(pos);
-  }
-  move(event) {
+    }
+
+  move (event) {
     const tool = App.getSelectedTool();
     if (tool == undefined || tool.options.type != COMPONENT_TYPE.SELECTOR) {
       return;
-    }
+      }
     const pos = {
       x: undefined,
       y: undefined
-    };
+      };
     if (event.evt.type === "touchmove") {
       pos.x = event.target.pointerPos.x;
       pos.y = event.target.pointerPos.y;
     } else {
       pos.x = event.evt.layerX;
       pos.y = event.evt.layerY;
-    }
+      }
     if (this._mode === "drawing") {
       this.updateDragSelector(pos);
+      }
     }
-  }
-  end(event) {
+
+  end (event) {
     this._selectorRect.remove();
     this._mode = "";
     this._selectorRect.visible(false);
     this._stage.draw();
-  }
-}
+    }
+
+  } // export class Selector
 
-export const selector = new Selector();
+export const selector = new Selector();