Reset selection control

Author: nikitaeverywhere

package.json

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

src/static/index.html

@@ -34,6 +34,7 @@
             <i id="settingsToggle" class="ui icon-settings"></i>
         </div>
         <div id="toolbarIcons">
+            <i id="resetSelectionButton" class="ui icon-outline"></i>
             <i id="dropChildrenButton" class="ui icon-unlink"></i>
             <i id="removeButton" class="ui icon-remove"></i>
         </div>

src/static/js/controls.js

@@ -3,9 +3,11 @@
  */
 import { onSelectionUpdate, updateSelection } from "./selection";
 import { dropDescendants, dropNodes } from "./model";
+import { updateSelected } from "./graph"
 
 let dropChildrenButton = null,
     removeButton = null,
+    resetSelectionButton = null,
     selection = [];
 
 onSelectionUpdate((sel) => {
@@ -20,6 +22,15 @@ function updateButtons () {
     }
     removeButton.classList[selection.length > 0 ? "remove" : "add"]("disabled");
     dropChildrenButton.classList[toDrop > 0 ? "remove" : "add"]("disabled");
+    resetSelectionButton.classList[selection.length > 0 ? "remove" : "add"]("icon-outline");
+    resetSelectionButton.classList[selection.length == 0 ? "remove" : "add"]("icon-filled");
+    resetSelectionButton.classList[selection.length > 0 ? "remove" : "add"]("disabled");
+}
+
+function resetSelection () {
+    selection.forEach(n => n.selected = n.wasSelected = false);
+    updateSelection();
+    updateSelected();
 }
 
 function deleteSelection () {
@@ -38,8 +49,10 @@ function dropChildren () {
 
 export function init () {
     dropChildrenButton = document.getElementById(`dropChildrenButton`);
-    dropChildrenButton.addEventListener("click", () => dropChildren());
+    dropChildrenButton.addEventListener("click", dropChildren);
     removeButton = document.getElementById(`removeButton`);
-    removeButton.addEventListener("click", () => deleteSelection());
+    removeButton.addEventListener("click", deleteSelection);
+    resetSelectionButton = document.getElementById(`resetSelectionButton`);
+    resetSelectionButton.addEventListener(`click`, resetSelection);
     updateButtons();
 }

src/static/js/graph/index.js

@@ -51,6 +51,10 @@ let svg = null,
         }),
     view = null;
 
+export function updateSelected () {
+    node.classed("selected", p => p.selected);
+}
+
 function newSimulation () {
     return d3.forceSimulation()
         .force("link",
@@ -236,7 +240,7 @@ export function update (g = lastGraph, reset = false) {
                     deselectAll(d);
                 else
                     selectAll(d);
-                node.classed("selected", (p) => p.selected);
+                updateSelected();
             } else {
                 d3.select(this).classed("selected", d.selected = !d.selected); // (!prevSel)
             }