Fixed interactions with buttons

editor/editor.php

@@ -5,7 +5,6 @@
     <section>
         <h3 id="selected-item">Nothing selected</h3>
         <ul id="selected-params"></ul>
-        <button onclick="graph.getCleanData()">Save NOT YET IMPLEMENTED</button>
         <section>
             <h4>Sources</h4>
             <ul id="selected-sources"></ul>
@@ -18,6 +17,6 @@
     <section>
         <h3>Collected items</h3>
         <ul id="selected-items"></ul>
-        <button onclick="state.clearSelectedItems()">Clear</button>
+        <button id="clear-collection">Clear</button>
     </section>
 </div>

editor/js/display.js

 import jQuery from "jquery";
 import { PLUGIN_PATH } from "../../config";
 import * as Graph from "./graph";
-import { graph } from "./editor";
+import { graph, state } from "./editor";
 
 const ID_TOOLBAR = "#toolbar";
 const ID_SELECTEDITEM = "#selected-item";
@@ -25,11 +25,11 @@ export default class Display {
     }
 
     setSelectedTool(tool) {
-        var selectedTool = jQuery(Display.getToolId(tool));
+        var selectedTool = jQuery(Display.getToolIdTag(tool));
         selectedTool.addClass(TOOL_SELECTED_CLASS);
 
         if (this.previousTool !== undefined) {
-            var previousTool = jQuery(Display.getToolId(this.previousTool));
+            var previousTool = jQuery(Display.getToolIdTag(this.previousTool));
             previousTool.removeClass(TOOL_SELECTED_CLASS);
         }
 
@@ -38,19 +38,25 @@ export default class Display {
 
     renderToolbar(tools) {
         this.fillDomList(ID_TOOLBAR, tools, this.toolRenderer);
+
+        tools.forEach((tool) => {
+            this.toolClickEvent(tool);
+        });
     }
 
-    static getToolId(tool) {
+    static getToolIdTag(tool) {
         return ID_TOOLBAR + "-" + tool.getKey();
     }
 
+    static getToolId(tool) {
+        return Display.getToolIdTag(tool).substr(1);
+    }
+
     toolRenderer(tool) {
         return (
             '<button id="' +
-            Display.getToolId(tool).substr(1) + // Remove # from id
-            '"onclick="state.setTool(TOOLS.' +
-            tool.getKey() +
-            ')" title="' +
+            Display.getToolId(tool) +
+            '" title="' +
             tool.getName() +
             '"><img src="' +
             TOOL_ICON_SRC +
@@ -60,6 +66,17 @@ export default class Display {
         );
     }
 
+    toolClickEvent(tool) {
+        jQuery("button" + Display.getToolIdTag(tool)).on(
+            "click",
+            "",
+            tool,
+            (e) => {
+                state.setTool(e.data);
+            }
+        );
+    }
+
     setSelectedItem(item) {
         jQuery(ID_SELECTEDITEM).html(Display.toStr(item));
 

editor/js/editor.js

 import { State } from "./state";
 import * as Graph from "./graph";
 import ForceGraph from "force-graph";
+import * as Interactions from "./interactions";
 
 
 export var state;
@@ -16,6 +17,8 @@ window.onload = function () {
     document.onkeydown = (e) => state.onKeyDown(e);
     document.onkeyup = (e) => state.onKeyUp(e);
 
+    Interactions.initInteractions();
+
     fetch(Graph.JSON_CONFIG)
         .then((r) => {
             return r.json();

editor/js/interactions.js

+import jQuery from "jquery";
+import { state } from "./editor";
+
+/**
+ * Initiates all the handlers for button presses and input changes.
+ */
+export function initInteractions() {
+    jQuery("button#clear-collection").on("click", () => {
+        state.clearSelectedItems();
+    });
+}