From f2520967a2d9a70514145e9663ed849220734075 Mon Sep 17 00:00:00 2001
From: mgfcf <m.giller@tu-braunschweig.de>
Date: Sat, 4 Sep 2021 20:26:55 +0200
Subject: [PATCH] Fixed interactions with buttons
---
editor/editor.php | 3 +--
editor/js/display.js | 33 +++++++++++++++++++++++++--------
editor/js/editor.js | 3 +++
editor/js/interactions.js | 11 +++++++++++
4 files changed, 40 insertions(+), 10 deletions(-)
create mode 100644 editor/js/interactions.js
diff --git a/editor/editor.php b/editor/editor.php
index a6be08e..bdf353b 100644
--- a/editor/editor.php
+++ b/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>
diff --git a/editor/js/display.js b/editor/js/display.js
index 44064e7..da979d1 100644
--- a/editor/js/display.js
+++ b/editor/js/display.js
@@ -1,7 +1,7 @@
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));
diff --git a/editor/js/editor.js b/editor/js/editor.js
index 2fcb923..5419fcf 100644
--- a/editor/js/editor.js
+++ b/editor/js/editor.js
@@ -1,6 +1,7 @@
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();
diff --git a/editor/js/interactions.js b/editor/js/interactions.js
new file mode 100644
index 0000000..c2957e3
--- /dev/null
+++ b/editor/js/interactions.js
@@ -0,0 +1,11 @@
+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();
+ });
+}
--
GitLab