Ability to delete classes from the diagram add

Author: nikitaeverywhere

package.json

@@ -1,6 +1,6 @@
 {
   "name": "CacheClassExplorer",
-  "version": "1.17.2",
+  "version": "1.18.0",
   "description": "Class Explorer for InterSystems Caché",
   "directories": { "test": "test" },
   "dependencies": {},

web/css/classView.css

@@ -124,6 +124,15 @@ text {
     outline: 4px solid rgba(255, 0, 0, 0.6);
 }
 
+.element.uml.Class .tool-remove {
+    display: none;
+    cursor: pointer;
+}
+
+.element.uml.Class:hover .tool-remove {
+    display: block;
+}
+
 .marker-source, .marker-target {
     vector-effect: none !important;
 }

web/js/ClassView.js

@@ -824,7 +824,7 @@ ClassView.prototype.confirmRender = function (data) {
                     connector.on("all", function (e) {
                         if (e !== "remove") return;
                         self.cacheClassExplorer.setSubLabel(
-                            "*Some links are removed on this diagram.",
+                            "*Some elements are removed on this diagram.",
                             "color:red"
                         );
                     });
@@ -862,6 +862,25 @@ ClassView.prototype.confirmRender = function (data) {
         q.options.height/2 - Math.min(q.options.height/2 - 100, bb.height/2)
     );
 
+    this.paper.on('cell:pointerclick', function(cellView, evt, x, y) {
+        var e = evt.target || evt.srcElement;
+        // https://upload.wikimedia.org/wikipedia/commons/a/ae/Elleboogkruk.jpg
+        if (!((e && e.getAttribute("event") === "remove") ||
+            (e.parentNode && e.parentNode.getAttribute("event") === "remove")))
+            return;
+        cellView.remove();
+        for (var p in self.links) {
+            if (self.paper.getModelById(self.links[p].attributes.source) === cellView.model
+                || self.paper.getModelById(self.links[p].attributes.target) === cellView.model) {
+                self.links[p].remove();
+            }
+        }
+        self.cacheClassExplorer.setSubLabel(
+            "*Some elements are removed on this diagram.",
+            "color:red"
+        );
+    });
+
     if (data.savedView) this.restoreView(data.savedView);
 
     this.onRendered();

web/jsLib/joint.shapes.uml.js

@@ -33,6 +33,7 @@ joint.shapes.uml.Class = joint.shapes.basic.Generic.extend({
             '<text class="uml-class-methods-text"/>',
             '<text class="uml-class-queries-text"/>',
             '<text class="uml-class-xdatas-text"/>',
+            '<g class="tool-remove" event="remove" x="" transform="translate(0,0)"><circle r="11" style="fill: red;"></circle><path transform="scale(.8) translate(-16, -16)" d="M24.778,21.419 19.276,15.917 24.777,10.415 21.949,7.585 16.447,13.087 10.945,7.585 8.117,10.415 13.618,15.917 8.116,21.419 10.946,24.248 16.447,18.746 21.948,24.248z"></path><title>Remove class</title></g>',
         '</g>'
     ].join(''),