Implemented advanced node properties

editor/css/editor.css

@@ -47,7 +47,7 @@ div#ks-editor textarea {
     letter-spacing: normal;
 }
 
-div#ks-editor img#node-image-preview {
+div#ks-editor img.preview-image {
     max-width: 5rem;
     height: auto;
 }

editor/editor.php

@@ -15,13 +15,17 @@
                 <label for="node-name" hidden>Name</label>
                 <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="" />
-                <input type="text" id="node-image" name="node-image" placeholder="Enter file name" class="medium-width bottom-space" />
-
                 <label for="node-description">Description</label>
                 <textarea id="node-description" name="node-description" class="bottom-space"></textarea>
 
+                <label for="node-image">Node Image</label>
+                <img id="node-image-preview" class="preview-image" src="" />
+                <input type="text" id="node-image" name="node-image" placeholder="Enter file name or URL" class="medium-width bottom-space" />
+
+                <label for="node-detail-image">Info Image</label>
+                <img id="node-detail-image-preview" class="preview-image" src="" />
+                <input type="text" id="node-detail-image" name="node-detail-image" placeholder="Enter file name or URL" class="medium-width bottom-space" />
+
                 <label for="node-type">Type</label>
                 <select id="node-type" name="node-type" class="bottom-space medium-width">
                     <option value="Vorlesung">Vorlesung</option>
@@ -32,11 +36,11 @@
                     <option value="Kapitel">Kapitel</option>
                 </select>
 
+                <label for="node-video">Video</label>
+                <input type="text" placeholder="Video URL" id="node-video" name="node-video"></input>
+
                 <label for="node-references">References</label> <small>One URL per line</small>
                 <textarea id="node-references" name="node-references" class="bottom-space"></textarea>
-
-                <label>Videos</label> <small>One video URL per line</small>
-                <textarea id="node-videos" name="node-videos"></textarea>
             </div>
             <div id="link-selected" class="hidden">
                 <h3 id="link-name"></h3>

editor/js/graph.js

@@ -8,8 +8,9 @@ export const NODE_ID = "id";
 export const NODE_TYPE = "type";
 export const NODE_DESCRIPTION = "description";
 export const NODE_IMAGE = "image";
-export const NODE_REFERENCES = "references";
-export const NODE_VIDEOS = "videos";
+export const NODE_REFERENCES = "infoLinks";
+export const NODE_VIDEO = "video";
+export const NODE_DETAIL_IMAGE = "infoImage";
 
 export const LINK_SOURCE = "source";
 export const LINK_TARGET = "target";
@@ -29,8 +30,9 @@ export const NODE_PARAMS = [
     NODE_IMAGE,
     NODE_DESCRIPTION,
     NODE_REFERENCES,
-    NODE_VIDEOS,
+    NODE_VIDEO,
     NODE_TYPE,
+    NODE_DETAIL_IMAGE,
 ];
 export const LINK_SIM_PARAMS = ["index"];
 export const NODE_SIM_PARAMS = ["index", "x", "y", "vx", "vy", "fx", "fy"]; // Based on https://github.com/d3/d3-force#simulation_nodes

editor/js/state.js

@@ -143,7 +143,11 @@ export class State extends Tool {
 
         // Draw image
         if (node[Graph.NODE_IMAGE] !== undefined) {
-            var path = Graph.IMAGE_SRC + node[Graph.NODE_IMAGE];
+            var path = node[Graph.NODE_IMAGE];
+            
+            if (!path.includes("/")) {
+                path = Graph.IMAGE_SRC + path;
+            }
             var img = new Image();
             img.src = path;
 

editor/js/tools/menus/selectmenu.js

@@ -11,19 +11,33 @@ const CONTEXT_NODE = "#node-selected";
 const CONTEXT_LINK = "#link-selected";
 
 const NODE_IMG_PREVIEW = "#node-image-preview";
+const NODE_DETAIL_IMG_PREVIEW = "#node-detail-image-preview";
 const NODE_NAME_ID = "#node-name";
 const NODE_IMG_ID = "#node-image";
+const NODE_DETAIL_IMG_ID = "#node-detail-image";
 const NODE_DESC_ID = "#node-description";
 const NODE_TYPE_ID = "#node-type";
 const NODE_REF_ID = "#node-references";
-const NODE_VIDEOS_ID = "#node-videos";
+const NODE_VIDEO_ID = "#node-video";
 const NODE_MENU = [
     NODE_NAME_ID,
     NODE_IMG_ID,
     NODE_DESC_ID,
     NODE_TYPE_ID,
     NODE_REF_ID,
-    NODE_VIDEOS_ID,
+    NODE_VIDEO_ID,
+    NODE_DETAIL_IMG_ID,
+];
+
+const IMAGE_FIELDS = [
+    {
+        uri: NODE_IMG_ID,
+        preview: NODE_IMG_PREVIEW,
+    },
+    {
+        uri: NODE_DETAIL_IMG_ID,
+        preview: NODE_DETAIL_IMG_PREVIEW,
+    },
 ];
 
 const LINK_NAME_ID = "#link-name";
@@ -41,7 +55,8 @@ export class SelectMenu extends ToolMenu {
             { menu: NODE_DESC_ID, property: Graph.NODE_DESCRIPTION },
             { menu: NODE_TYPE_ID, property: Graph.NODE_TYPE },
             { menu: NODE_REF_ID, property: Graph.NODE_REFERENCES },
-            { menu: NODE_VIDEOS_ID, property: Graph.NODE_VIDEOS },
+            { menu: NODE_VIDEO_ID, property: Graph.NODE_VIDEO },
+            { menu: NODE_DETAIL_IMG_ID, property: Graph.NODE_DETAIL_IMAGE },
         ];
         this.hooked = false; // Can only hook menu events once, but have to do it later, when they are loaded
     }
@@ -52,8 +67,11 @@ export class SelectMenu extends ToolMenu {
             this.find(menu).on("change", (e) => {
                 var newValue = e.target.value;
 
+                var propertyKey = this.toProperty(menu);
+                var formatedValue = this.formatValue(propertyKey, newValue);
+
                 // Modify stored selection
-                this.values[SELECTION_KEY][this.toProperty(menu)] = newValue;
+                this.values[SELECTION_KEY][propertyKey] = formatedValue;
 
                 // Notify tool
                 this.tool.onMenuChange(
@@ -64,20 +82,39 @@ 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);
-            }
+        IMAGE_FIELDS.forEach((imageField) => {
+            this.find(imageField.uri).on("change", (e) => {
+                var uri = e.target.value;
+                var previewImage = this.find(imageField.preview);
+
+                if (uri === "") {
+                    // Show default empty image
+                    previewImage.attr("src", "");
+                } else if (uri.includes("/")) {
+                    // Is absolute URL
+                    previewImage.attr("src", uri);
+                } else {
+                    // Is file name
+                    var url = Graph.IMAGE_SRC + uri;
+                    previewImage.attr("src", url);
+                }
+            });
         });
     }
 
+    formatValue(propertyKey, rawValue) {
+        var formattedValue = rawValue;
+
+        if (propertyKey === Graph.NODE_REFERENCES) {
+            // Explode to list of url-lines
+            formattedValue = rawValue
+                .split("\n") // Every line is it's own url
+                .filter((url) => url); // Remove empty entries
+        }
+
+        return formattedValue;
+    }
+
     toProperty(menu) {
         for (var i = 0; i < this.map.length; i++) {
             if (this.map[i].menu === menu) {
@@ -144,7 +181,17 @@ export class SelectMenu extends ToolMenu {
 
     fillNode(node) {
         NODE_MENU.forEach((menu) => {
-            this.find(menu).val(node[this.toProperty(menu)]);
+            var propertyKey = this.toProperty(menu);
+            var value = node[propertyKey];
+
+            var formattedValue = undefined;
+            if (propertyKey === Graph.NODE_REFERENCES) {
+                formattedValue = value.join("\n");
+            } else {
+                formattedValue = value;
+            }
+
+            this.find(menu).val(formattedValue);
         });
     }
 

editor/js/tools/selecttool.js

@@ -25,6 +25,7 @@ export default class SelectTool extends Tool {
 
     onMenuChange(key, value) {
         if (key === SelectMenu.SELECTION_KEY) {
+            console.log(value);
             graph.changeDetails(value);
         }
     }