From 5a43643c87494e7179eb2d3fe8bee3e5fe6e1f07 Mon Sep 17 00:00:00 2001
From: Max <m.giller.dev@gmail.com>
Date: Fri, 1 Oct 2021 00:43:02 +0200
Subject: [PATCH] Implemented image preview of node menu
---
editor/css/editor.css | 1 -
editor/editor.php | 2 +-
editor/js/tools/menus/selectmenu.js | 17 +++++++++++++++--
3 files changed, 16 insertions(+), 4 deletions(-)
diff --git a/editor/css/editor.css b/editor/css/editor.css
index 7bb9454..0a0b43f 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 8c901ce..9332ca1 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 40602f1..3076512 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) {
--
GitLab