Rebranded display to toolbar

editor/js/graph.js

 import ManagedData from "./manageddata";
 import { PLUGIN_PATH, COLOR_PALETTE } from "../../config";
 
+const LINK_NAME_CONNECTOR = " → ";
+
 export const NODE_LABEL = "name";
 export const NODE_ID = "id";
 export const NODE_TYPE = "type";
@@ -394,4 +396,22 @@ export class Graph extends ManagedData {
 
         return newNode;
     }
+
+    static toStr(item) {
+        if (item === undefined) {
+            return "UNDEFINED";
+        }
+
+        if (item.node) {
+            return item[Graph.NODE_LABEL];
+        } else if (item.link) {
+            return (
+                Graph.toStr(item[Graph.LINK_SOURCE]) +
+                LINK_NAME_CONNECTOR +
+                Graph.toStr(item[Graph.LINK_TARGET])
+            );
+        } else {
+            return "UNDEFINED";
+        }
+    }
 }

editor/js/state.js

@@ -7,7 +7,7 @@ import DeleteTool from "./tools/deletetool";
 import AddNodeTool from "./tools/addnodetool";
 import ConnectTool from "./tools/connecttool";
 import { graph } from "./editor";
-import Display from "./display";
+import Toolbar from "./toolbar";
 import * as Graph from "./graph";
 
 export const TOOLS = {
@@ -31,7 +31,7 @@ export class State extends Tool {
     constructor() {
         super("State");
 
-        this.display = new Display(TOOLS);
+        this.display = new Toolbar(TOOLS);
 
         this.tool = undefined;
         this.setTool(TOOLS.select);

editor/js/display.js → editor/js/toolbar.js

 import jQuery from "jquery";
 import { PLUGIN_PATH } from "../../config";
-import * as Graph from "./graph";
 import { state } from "./editor";
 
 const ID_TOOLBAR = "#toolbar";
@@ -9,9 +8,7 @@ const TOOL_ICON_SRC = PLUGIN_PATH + "editor/images/tools/";
 const TOOL_ICON_FORMAT = ".png";
 const TOOL_SELECTED_CLASS = "selected";
 
-const LINK_NAME_CONNECTOR = " → ";
-
-export default class Display {
+export default class Toolbar {
     constructor(tools) {
         this.tools = Object.values(tools);
         this.previousTool = undefined;
@@ -20,11 +17,11 @@ export default class Display {
     }
 
     setSelectedTool(tool) {
-        var selectedTool = jQuery(Display.getToolIdTag(tool));
+        var selectedTool = jQuery(Toolbar.getToolIdTag(tool));
         selectedTool.addClass(TOOL_SELECTED_CLASS);
 
         if (this.previousTool !== undefined) {
-            var previousTool = jQuery(Display.getToolIdTag(this.previousTool));
+            var previousTool = jQuery(Toolbar.getToolIdTag(this.previousTool));
             previousTool.removeClass(TOOL_SELECTED_CLASS);
         }
 
@@ -44,13 +41,13 @@ export default class Display {
     }
 
     static getToolId(tool) {
-        return Display.getToolIdTag(tool).substr(1);
+        return Toolbar.getToolIdTag(tool).substr(1);
     }
 
     toolRenderer(tool) {
         return (
             '<button id="' +
-            Display.getToolId(tool) +
+            Toolbar.getToolId(tool) +
             '" title="' +
             tool.getName() +
             '"><img src="' +
@@ -62,7 +59,7 @@ export default class Display {
     }
 
     toolClickEvent(tool) {
-        jQuery("button" + Display.getToolIdTag(tool)).on(
+        jQuery("button" + Toolbar.getToolIdTag(tool)).on(
             "click",
             "",
             tool,
@@ -78,22 +75,4 @@ export default class Display {
 
         items.forEach((i) => listCont.append(itemRenderer(i)));
     }
-
-    static toStr(item) {
-        if (item === undefined) {
-            return "UNDEFINED";
-        }
-
-        if (item.node) {
-            return item[Graph.NODE_LABEL];
-        } else if (item.link) {
-            return (
-                Display.toStr(item[Graph.LINK_SOURCE]) +
-                LINK_NAME_CONNECTOR +
-                Display.toStr(item[Graph.LINK_TARGET])
-            );
-        } else {
-            return "UNDEFINED";
-        }
-    }
 }

editor/js/tools/menus/collectmenu.js

 import jQuery from "jquery";
-import Display from "../../display";
+import { Graph } from "../../graph";
 import ToolMenu from "./toolmenu";
 
 export const COLLECTION_KEY = "collection";
@@ -38,7 +38,7 @@ export class CollectMenu extends ToolMenu {
             "<" +
             DOM_LIST_ITEM +
             ">" +
-            Display.toStr(item) +
+            Graph.toStr(item) +
             "</" +
             DOM_LIST_ITEM +
             ">"

editor/js/tools/menus/selectmenu.js

-import Display from "../../display";
 import * as Graph from "../../graph";
 import { CONTEXT } from "../../state";
 import ToolMenu from "./toolmenu";
@@ -139,7 +138,7 @@ export class SelectMenu extends ToolMenu {
     }
 
     fillLink(link) {
-        this.find(LINK_NAME_ID).text(Display.toStr(link));
+        this.find(LINK_NAME_ID).text(Graph.Graph.toStr(link));
 
         LINK_MENU.forEach((menu) => {
             this.find(menu).val(link[this.toProperty(menu)]);