Dropping the node, font change

Author: nikitaeverywhere

package.json

@@ -1,6 +1,6 @@
 {
   "name": "iknow-entity-browser",
-  "version": "0.4.2",
+  "version": "0.5.0",
   "description": "Visualizer for iKnow entities",
   "main": "gulpfile.babel.js",
   "scripts": {

src/static/fonts/iknowentitybrowsericons.eot

@@ -17,7 +17,7 @@
     </div>
     <svg id="graph"></svg>
     <div id="table">
-        <i id="tableToggle" class="ui icon-window-list"></i>
+        <i id="tableToggle" class="ui icon-list"></i>
         <div id="rightTopIcons">
             <i id="settingsToggle" class="ui icon-settings"></i>
         </div>

src/static/fonts/iknowentitybrowsericons.svg

@@ -2,7 +2,7 @@
  * This file describes on-screen controls like UI link/remove buttons, etc.
  */
 import { onSelectionUpdate, updateSelection } from "./selection";
-import { dropDescendants } from "./model";
+import { dropDescendants, dropNodes } from "./model";
 
 let dropChildrenButton = null,
     removeButton = null,
@@ -18,12 +18,15 @@ function updateButtons () {
     for (let node of selection) {
         toDrop += (node.children ? node.children.length : 0);
     }
-    removeButton.classList.add("disabled"); // temporary
+    removeButton.classList[selection.length > 0 ? "remove" : "add"]("disabled");
     dropChildrenButton.classList[toDrop > 0 ? "remove" : "add"]("disabled");
 }
 
 function deleteSelection () {
-
+    if (!selection.length)
+        return;
+    dropNodes(selection);
+    updateSelection();
 }
 
 function dropChildren () {

src/static/fonts/iknowentitybrowsericons.ttf

@@ -61,6 +61,8 @@ function toTree (graph, parent) {
     try {
         parent.children.sort(
             (a, b) => a.entities[0][FOLDING_CRITERIA] > b.entities[0][FOLDING_CRITERIA] ? -1 : 1
+        ).forEach(
+            (e) => e.parent = parent
         );
     } catch (e) {
         console.error(`Error! Most likely, one of the graph nodes does not has any entities.`
@@ -309,4 +311,58 @@ export function dropDescendants (nodes) {
 
     return toDrop;
 
+}
+
+/**
+ * Delete all nodes and their descendants.
+ * @param {Array|*} nodes - Node to delete
+ * @returns {number} - Number of nodes deleted
+ */
+export function dropNodes (nodes) {
+
+    if (!(nodes instanceof Array))
+        nodes = [nodes];
+
+    let restore = nodes.filter(n => !!n.parent).map(node => {
+        return {
+            node: node.parent,
+            children: node.parent.children.slice()
+        };
+    });
+
+    if (restore.length === 0)
+        return 0;
+
+    function f () {
+        for (let node of nodes) {
+            if (!node.parent) // unable to drop root node
+                continue;
+            let i = node.parent.children.indexOf(node);
+            if (i === -1) {
+                console.error(
+                    `There is a mess occurred with the tree model structure while dropping nodes: `
+                    `node's parent is pointing to a node which doesn't have this node as a child.`
+                );
+                continue;
+            }
+            let temp = node.parent.children.slice();
+            temp.splice(i, 1);
+            node.parent.children = temp;
+        }
+        dataUpdated();
+    }
+    f();
+
+    history.createState({
+        redo: f,
+        undo: () => {
+            for (let res of restore) {
+                res.node.children = res.children;
+            }
+            dataUpdated();
+        }
+    });
+
+    return nodes.length;
+
 }

src/static/fonts/iknowentitybrowsericons.woff

@@ -40,25 +40,22 @@
     -moz-osx-font-smoothing: grayscale;
 }
 
-.icon-window-list:before {
+.icon-list:before {
     content: "\61";
 }
-.icon-page-export-csv:before {
-    content: "\62";
-}
-.icon-search-plus:before {
+.icon-zoom-in:before {
     content: "\63";
 }
-.icon-search-minus:before {
+.icon-zoom-out:before {
     content: "\64";
 }
 .icon-search:before {
     content: "\65";
 }
-.icon-ios-circle-outline:before {
+.icon-outline:before {
     content: "\66";
 }
-.icon-ios-circle-filled:before {
+.icon-filled:before {
     content: "\67";
 }
 .icon-th-list:before {
@@ -70,7 +67,7 @@
 .icon-circle:before {
     content: "\6a";
 }
-.icon-cog:before {
+.icon-config:before {
     content: "\6b";
 }
 .icon-settings:before {
@@ -82,7 +79,7 @@
 .icon-wrench:before {
     content: "\6f";
 }
-.icon-android-options:before {
+.icon-options:before {
     content: "\6e";
 }
 .icon-close:before {

src/static/index.html

@@ -8,6 +8,7 @@ html, body {
     width: 100%;
     margin: 0;
     padding: 0;
+    font-family: monospace;
 }
 
 #windows {