src/app/component-registry/trash-component.js

@@ -0,0 +1,19 @@
+import { TrashDrawer } from "../components/trash-component/drawers/trash-drawer";
+import { Component } from "../core/models/components/component";
+import { ComponentOptions } from "../core/models/components/component-options";
+class TrashComponent extends Component {
+  constructor() {
+    const options = new ComponentOptions(
+      "2e0a8b90-2ef0-4c71-893f-cf2b55303589",
+      "trash",
+      "trash"
+    );
+    super(new TrashDrawer(), options);
+    document.addEventListener('keyup', (event) => {
+      if (event.key === "Delete")
+        this.draw(event);
+    });
+  }
+}
+
+export const trashComponent = new TrashComponent();

src/app/components/line-component/drawers/line-drawer.js

@@ -16,16 +16,16 @@ import { DrawerAggregator } from "../../../core/drawers/drawer-aggregator";
 import { LineSegmentModel } from "../../line-segment-component/models/line-segment-model";
 
 export class LineDrawer extends LineSegmentDrawer {
-  constructor () {
+  constructor() {
     super();
     this.setElementClass(ELEMENTS_CLASS.LINE);
-    }
+  }
 
-  drawByStates (konvaObject) {
+  drawByStates(konvaObject) {
     let aggregator = undefined;
     if (konvaObject != undefined) {
       aggregator = Objects.getByKonvaObject(konvaObject)[0];
-      }
+    }
     if (this.state == undefined) {
       super.setState(LineDrawer.FIRST_POINT_STATE);
     } else if (this.state == LineDrawer.FIRST_POINT_STATE) {
@@ -37,10 +37,10 @@ export class LineDrawer extends LineSegmentDrawer {
       this.setAggregatorB(aggregator);
       this.drawByPoints([this.pointA, this.pointB], [this.aggregatorA, this.aggregatorB]);
       super.setState(LineDrawer.FIRST_POINT_STATE);
-      }
     }
+  }
 
-  drawByLineSegment (lineSegment) { //TODO Nome adequado? Nao seria 'drawLine(lineSegment)'?
+  drawByLineSegment(lineSegment) { //TODO Nome adequado? Nao seria 'drawLine(lineSegment)'?
     this.lineSegment = lineSegment;
     const group = SelectableDrawer.getKonvaGroup(false);
     const text = LineDrawer.getKonvaText(lineSegment, lineSegment.label);
@@ -61,14 +61,14 @@ export class LineDrawer extends LineSegmentDrawer {
 
     this.konvaObject.zIndex(1);
     //leo super.batchDraw(); //D usar novo metodo para desenhar, aproveitar o proprio 'update' - REMOVER
-    this.update(aggregator,null);
+    this.update(aggregator, null);
 
     SelectableDrawer.setMaxIndex(aggregators[0].konvaObject); // mark object 1: A
     SelectableDrawer.setMaxIndex(aggregators[1].konvaObject); // mark object 2: B
-    }
+  }
 
   // Draw Straight Line by its points
-  drawByPoints (points, aggregators) {
+  drawByPoints(points, aggregators) {
     if (points == undefined || points.length < 1) return;
     this.setPointA(points[0]);
     this.setPointB(points[1]);
@@ -81,7 +81,7 @@ export class LineDrawer extends LineSegmentDrawer {
     // Use: ./app/components/core/drawers/selectable-drawer
     this.drawByLineSegment(this.lineSegment); // here, makes: SelectableDrawer.drawObject(this.konvaObject);
     this.reset();
-    }
+  }
 
 
   // Update straight line (Line)
@@ -100,7 +100,7 @@ export class LineDrawer extends LineSegmentDrawer {
   //    +----------+----------+----------+----------+
   // Straight line defined by points A,B (parametric equation by 'g'):
   //   P(g) = A + g * (B-A) = A + g * d
-  
+
   // Given W=canvas width and H=canvas height, find intersections with borders, i.e., find values of "g" such that:
   //   r(g).x=0 or r(g).x=W or r(g).y=0 or r(g).y=H  (call this "g" respectively as Lg, Rg, Ug, and Dg - these are dependent of A and B positions)
   //             Ug                 
@@ -117,22 +117,22 @@ export class LineDrawer extends LineSegmentDrawer {
   //    Lg |P    o A                       | Rg      Rg |     o B                       | Lg
   //       +-o-----------------------------+            +-o-----------------------------+   
   //      \|/            Dg                                           Ug  
-  update (aggregator, e) {
+  update(aggregator, e) {
     if (!aggregator.visible) return;
     const pointA = aggregator.genericObject.pointA; // A
     const pointB = aggregator.genericObject.pointB; // B
     const Ax = pointA.posX, Ay = pointA.posY, Bx = pointB.posX, By = pointB.posY; // A=(Ax,Ay) and B=(Bx,By)
-    const dx = Bx-Ax, dy = By-Ay; // direction d=B-A
-    const size  = stageManager.getSize(); // From: ../../../core/application/stage-manager
+    const dx = Bx - Ax, dy = By - Ay; // direction d=B-A
+    const size = stageManager.getSize(); // From: ../../../core/application/stage-manager
     const W = size.w; // canvas width
     const H = size.h; // canvas height
-    var Ix, Iy, Ex, Ey; // Point I will be left-bottom one and E will be the top-right one
-    var Lg, Rg, Ug, Dg;
+    let Ix, Iy, Ex, Ey; // Point I will be left-bottom one and E will be the top-right one
+    let Lg, Rg, Ug, Dg;
     // Line perpendicular to axis "x" (dx = 0)
     if (dx === 0) {
       // Calculates parameters Ug, Dg:
       Ug = -Ay / dy;    // -A.y / d.y
-      Dg = (H-Ay) / dy; // (H-A.y) / d.y
+      Dg = (H - Ay) / dy; // (H-A.y) / d.y
       // Find the situation (1), (2), (3) or (4) calculating "ming" the smallest "g" and "maxg" the greatest "g"
       const ming = Math.min(Ug, Dg); // minimum
       const maxg = Math.max(Ug, Dg); // maximum
@@ -141,36 +141,36 @@ export class LineDrawer extends LineSegmentDrawer {
       Iy = Ay + ming * dy; // left initial point of this line (Ix, Iy)
       Ex = Ax; Rg = 0;
       Ey = Ay + maxg * dy; // right end    point of this line (Ex, Ey)
-      }
+    }
     else {
       // Calculates parameters Lg, Rg, Ug, Dg:
       Lg = -Ax / dx;    // -A.x / d.x
-      Rg = (W-Ax) / dx; // (W-A.x) / d.x
+      Rg = (W - Ax) / dx; // (W-A.x) / d.x
       Ug = -Ay / dy;    // -A.y / d.y
-      Dg = (H-Ay) / dy; // (H-A.y) / d.y
+      Dg = (H - Ay) / dy; // (H-A.y) / d.y
       // Find the situation (1), (2), (3) or (4) calculating "ming" the smallest "g" and "maxg" the greatest "g"
-      var ming, maxg; // calculate extreme points (intercepted with the Canvas frame)
-      if (dx>0) { // (1)
-        if (Lg<Dg) ming = Dg;
+      let ming, maxg; // calculate extreme points (intercepted with the Canvas frame)
+      if (dx > 0) { // (1)
+        if (Lg < Dg) ming = Dg;
         else ming = Lg;
-        if (Rg>Ug) maxg = Ug;
+        if (Rg > Ug) maxg = Ug;
         else maxg = Rg;
-        }
+      }
       else { // (2)
-        if (Lg>Ug) ming = Ug;
+        if (Lg > Ug) ming = Ug;
         else ming = Lg;
-        if (Rg<Dg) maxg = Dg;
+        if (Rg < Dg) maxg = Dg;
         else maxg = Rg;
-        }
+      }
       // Draw from minimum to maximum
       Ix = Ax + ming * dx;
       Iy = Ay + ming * dy; // left initial point of this line (Ix, Iy)
       Ex = Ax + maxg * dx;
       Ey = Ay + maxg * dy; // right end    point of this line (Ex, Ey)
-      }
+    }
 
     // Ix = Ax; Iy = H; Ex = Ax; Ey = 0;
-    const points = [Ix, Iy, Ex, Ey];      
+    const points = [Ix, Iy, Ex, Ey];
     //D console.log("./app/components/line-component/drawers/line-drawer.js: update(aggregator, e):\nA=("+Ax+","+Ay+"), B=("+Bx+","+By+")"); //leo
 
     // Update label line
@@ -181,12 +181,12 @@ export class LineDrawer extends LineSegmentDrawer {
     aggregator.konvaObject.children[1].points(points);
 
     super.batchDraw();
-    } // update(aggregator, e)
+  } // update(aggregator, e)
 
 
-  static getKonvaLine (pointA, pointB, useLabel) { //TODO: revisar, pois o codigo 'slope', 'linearCoefficient' so' funciona para quadrantes 1 e 3...
+  static getKonvaLine(pointA, pointB, useLabel) { //TODO: revisar, pois o codigo 'slope', 'linearCoefficient' so' funciona para quadrantes 1 e 3...
     const xA = pointA.posX, xB = pointB.posX,
-          yA = pointA.posY, yB = pointB.posY;
+      yA = pointA.posY, yB = pointB.posY;
 
     const slope = (yB - yA) / (xB - xA);
     const linearCoefficient = (yA * xB - yB * xA) / (xB - xA);
@@ -214,11 +214,11 @@ export class LineDrawer extends LineSegmentDrawer {
     SelectableDrawer.setSelectableIfIntersectionChanged(line);
 
     return line;
-    }
+  }
 
-  static drawKonvaLine (pointA, pointB) {
+  static drawKonvaLine(pointA, pointB) {
     const line = LineDrawer.getKonvaLine(pointA, pointB);
     return line;
-    }
+  }
 
-  }
+}

src/app/components/trash-component/drawers/trash-drawer.js

@@ -0,0 +1,36 @@
+import { ELEMENTS_CLASS } from "../../../core/enums/elements-class-enum";
+import { SelectableDrawer } from "../../../core/drawers/selectable-drawer";
+import { objects as Objects } from "../../../core/application/objects";
+
+export class TrashDrawer extends SelectableDrawer {
+  constructor() {
+    super();
+
+    this.setElementClass(ELEMENTS_CLASS.NONE);
+  }
+
+  draw(e) {
+    const objects = Objects.getSelectedObjects();
+    objects.forEach(aggregator => {
+      this.delete(aggregator);
+    });
+    super.batchDraw();
+    return;
+  }
+
+  delete(aggregator) {
+
+    Objects.removeAggregator(aggregator);
+    aggregator.aggregators.forEach(dependenceAggregator => {
+      this.delete(dependenceAggregator);
+
+    });
+    aggregator.visible = false;
+
+  }
+
+  update(aggregator, e) {
+
+    return;
+  }
+}

src/app/core/application/header-menu.js

@@ -11,7 +11,7 @@ class HeaderMenu {
   save() {
     const layer = stageManager.getCurrentLayer();
     const file = layer.actionManager.save();
-    const name = prompt("Salvar como", layer.name.replace(/ /g, "_").toLowerCase());
+    const name = prompt("Sallet como", layer.name.replace(/ /g, "_").toLowerCase());
     if (name == undefined) return;
     const a = document.createElement("a"),
       url = URL.createObjectURL(file);

src/app/core/application/objects.js

@@ -1,7 +1,7 @@
 import { stageManager as StageManager } from "./stage-manager";
 
 class Objects {
-  constructor() {}
+  constructor() { }
   add(aggregator) {
     StageManager.getCurrentLayer().addAggregator(aggregator);
   }
@@ -16,7 +16,7 @@ class Objects {
       e =>
         e.konvaObject._id == konvaObject._id ||
         e.konvaObject.children.filter(x => x._id == konvaObject._id)[0] !=
-          undefined
+        undefined
     );
   }
   getSelectedObjects() {
@@ -29,5 +29,9 @@ class Objects {
   removeSelectedOject(aggregator) {
     return StageManager.getCurrentLayer().removeSelectedAggregator(aggregator);
   }
+  removeAggregator(aggregator) {
+
+    StageManager.getCurrentLayer().removeAggregator(aggregator);
+  }
 }
 export const objects = new Objects();

src/app/core/application/stage-manager.js

@@ -28,7 +28,7 @@ class StageManager {
     return this._stage.getCurrentKonvaLayer();
   }
   create() {
-    var id = this._files.length + 1;
+    let id = this._files.length + 1;
     this._createLayer();
     this._makeTemplate(this._stage.layer);
     this._files.push(this._stage.layer);

src/app/core/drawers/drawer-manager.js

@@ -27,5 +27,8 @@ class DrawerManager {
   addAction(action) {
     Stages.getCurrentLayer().actionManager.push(action);
   }
+  removeAction(action) {
+    Stages.getCurrentLayer().actionManager.remove(action);
+  }
 }
 export const drawerManager = new DrawerManager();

src/app/core/drawers/layer.js

@@ -37,8 +37,19 @@ export class Layer {
   }
   removeSelectedAggregator(aggregator) {
     if (this.selectedAggregators.includes(aggregator)) {
-      var index = this.selectedAggregators.indexOf(aggregator);
+      let index = this.selectedAggregators.indexOf(aggregator);
       this.selectedAggregators.splice(index, 1);
     }
   }
+  removeAggregator(aggregator) {
+    let index = this.aggregators.indexOf(aggregator);
+    this.aggregators.splice(index, 1);
+    if (this.selectedAggregators.includes(aggregator)) {
+      let index = this.selectedAggregators.indexOf(aggregator);
+      this.selectedAggregators.splice(index, 1);
+    }
+    this.actionManager.remove(aggregator.genericObject);
+    aggregator.konvaObject.destroy();
+
+  }
 }

src/app/core/drawers/stage.js

@@ -45,7 +45,7 @@ export class Stage {
   draw(object) {
     if (object == undefined) this.konvaStage.draw();
     else {
-      var layer = this.layer.getKonvaLayer();
+      let layer = this.layer.getKonvaLayer();
       this.layer.getKonvaGroup().add(object);
       layer.draw();
       this.konvaStage.draw(layer);

src/app/core/enums/elements-class-enum.js

@@ -1,4 +1,5 @@
 export const ELEMENTS_CLASS = {
+  NONE: -1,
   POINT: 0,
   INTERSECTION_POINT: 1,
   CIRCUMFERENCE: 3,

src/app/core/models/application/actions/action-manager.js

@@ -1,3 +1,4 @@
+import { xor } from "lodash";
 import { browser } from "../../../application/browser";
 
 export class ActionManager {
@@ -7,6 +8,15 @@ export class ActionManager {
   push(action) {
     this.actions.push(action);
   }
+  remove(genericObject) {
+
+    const action = this.actions.find(action => action.genericObject == genericObject);
+    const index = this.actions.indexOf(action);
+    this.actions.splice(index, 1);
+  }
+  pop() {
+    throw "Not implemented";
+  }
   clear() {
     this.actions = [];
   }
@@ -26,7 +36,7 @@ export class ActionManager {
       action.rehydrate();
       LINES.push(action.toString());
     });
-    var file = new Blob([...LINES], {
+    let file = new Blob([...LINES], {
       type: "text/plain;charset=utf-8"
     });
     return file;

src/assets/images/icons/Trash.svg

@@ -0,0 +1,49 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
+  <metadata><?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?>
+<x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.6-c142 79.160924, 2017/07/13-01:06:39        ">
+   <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
+      <rdf:Description rdf:about=""/>
+   </rdf:RDF>
+</x:xmpmeta>
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                           
+<?xpacket end="w"?></metadata>
+<defs>
+    <style>
+      .cls-1 {
+        fill: none;
+        stroke: #b70e0e;
+        stroke-width: 1px;
+        fill-rule: evenodd;
+      }
+    </style>
+  </defs>
+  <g id="Trash">
+    <g id="Trash-2" data-name="Trash">
+      <path id="Rounded_Rectangle_2" data-name="Rounded Rectangle 2" class="cls-1" d="M847.679,6.679h25.642a1.678,1.678,0,1,1,0,3.357H847.679A1.678,1.678,0,1,1,847.679,6.679Z" transform="translate(-840)"/>
+      <path class="cls-1" d="M849.412,9.2h22.176c0,8.952,0,17.9-.881,26.719-6.511.138-13.9,0.138-20.2-.053C849.412,27.1,849.412,18.148,849.412,9.2Z" transform="translate(-840)"/>
+      <path class="cls-1" d="M857.275,10.036h0.666V35.213h-0.666q0-12.592,0-25.178h0Zm0,0h0.666V35.213h-0.666q0-12.592,0-25.178h0Z" transform="translate(-840)"/>
+      <path id="Shape_1_copy" data-name="Shape 1 copy" class="cls-1" d="M863.059,10.036h0.814V35.213h-0.814A217.929,217.929,0,0,0,863.059,10.036Zm0,0h0.814V35.213h-0.814A217.929,217.929,0,0,0,863.059,10.036Z" transform="translate(-840)"/>
+      <path class="cls-1" d="M855.382,5h10.236V7.518H855.382V5Z" transform="translate(-840)"/>
+    </g>
+  </g>
+</svg>

src/css/icons.css

@@ -25,3 +25,7 @@
 .icon-line {
   background-image: url("../assets/images/icons/Line.png");
 }
+
+.icon-trash {
+  background-image: url("../assets/images/icons/Trash.png");
+}