Implemented image preview of node menu

editor/css/editor.css

@@ -46,5 +46,4 @@ div#ks-editor textarea {
 div#ks-editor img#node-image-preview {
     max-width: 5rem;
     height: auto;
-    border-radius: 50%;
 }

editor/editor.php

@@ -24,7 +24,7 @@
                 <input type="text" id="node-name" name="node-name" placeholder="Enter name" class="bottom-space"></input>
 
                 <label for="node-image">Image</label>
-                <img id="node-image-preview" src="https://via.placeholder.com/150" />
+                <img id="node-image-preview" src="" />
                 <input type="text" id="node-image" name="node-image" placeholder="Enter file name" class="medium-width bottom-space" />
 
                 <label for="node-description">Description</label>

editor/js/tools/menus/selectmenu.js

@@ -10,6 +10,7 @@ const CONTEXT_NOTHING = "#nothing-selected";
 const CONTEXT_NODE = "#node-selected";
 const CONTEXT_LINK = "#link-selected";
 
+const NODE_IMG_PREVIEW = "#node-image-preview";
 const NODE_NAME_ID = "#node-name";
 const NODE_IMG_ID = "#node-image";
 const NODE_DESC_ID = "#node-description";
@@ -49,11 +50,9 @@ export class SelectMenu extends ToolMenu {
 
     hookMenu() {
         MENU.forEach((menu) => {
-            console.log(this.find(menu));
             // Subscribes to change event for each menu element
             this.find(menu).on("change", (e) => {
                 var newValue = e.target.value;
-                console.log(newValue);
 
                 // Modify stored selection
                 this.values[SELECTION_KEY][this.toProperty(menu)] = newValue;
@@ -65,6 +64,20 @@ export class SelectMenu extends ToolMenu {
                 );
             });
         });
+
+        // Special hook for image, to update the shown image with every change
+        this.find(NODE_IMG_ID).on("change", (e) => {
+            var fileName = e.target.value;
+            var previewImage = this.find(NODE_IMG_PREVIEW);
+
+            // Show default empty image
+            if (fileName === "") {
+                previewImage.attr("src", "");
+            } else {
+                var url = Graph.IMAGE_SRC + fileName;
+                previewImage.attr("src", url);
+            }
+        });
     }
 
     toProperty(menu) {