diff --git a/editor/css/editor.css b/editor/css/editor.css index 7bb94545375f3010e6f63b535329ef15e1de226a..0a0b43ffec384b1419853df4a83af7f19caac78f 100644 --- a/editor/css/editor.css +++ b/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%; } diff --git a/editor/editor.php b/editor/editor.php index 8c901ce5c67d2b210d941d9371dbb567a8d95e78..9332ca159b8ab351f029df86507771510f4596a3 100644 --- a/editor/editor.php +++ b/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> diff --git a/editor/js/tools/menus/selectmenu.js b/editor/js/tools/menus/selectmenu.js index 40602f1d8e402cd9265299bfd60c476f8491eb2f..3076512b65d1a914935f90763ddba3faecdf9d29 100644 --- a/editor/js/tools/menus/selectmenu.js +++ b/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) {