Added select link menu

editor/editor.php

@@ -42,6 +42,17 @@
                 <textarea id="node-videos" name="node-videos"></textarea>
             </div>
             <div id="link-selected" class="hidden">
+                <h3 id="link-name" class="bottom-space">aud1 ↔ Sortieren</h3>
+
+                <label for="link-type">Type</label>
+                <select id="link-type" name="node-type" class="bottom-space medium-width">
+                    <option value="Vorlesung">Vorlesung</option>
+                    <option value="Algorithmus">Algorithmus</option>
+                    <option value="Definition">Definition</option>
+                    <option value="Beispiel">Beispiel</option>
+                    <option value="Übung">Übung</option>
+                    <option value="Kapitel">Kapitel</option>
+                </select>
             </div>
         </div>
     </section>

editor/js/tools/menus/selectmenu.js

@@ -25,6 +25,13 @@ const NODE_MENU = [
     NODE_VIDEOS_ID,
 ];
 
+const LINK_NAME_CONNECTOR = " → ";
+const LINK_NAME_ID = "#link-name";
+const LINK_TYPE_ID = "#link-type";
+const LINK_MENU = [LINK_TYPE_ID];
+
+const MENU = [...NODE_MENU, ...LINK_MENU];
+
 export class SelectMenu extends ToolMenu {
     constructor() {
         super();
@@ -36,12 +43,13 @@ export class SelectMenu extends ToolMenu {
             { 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: LINK_TYPE_ID, property: Graph.LINK_TYPE },
         ];
         this.hooked = false; // Can only hook menu events once, but have to do it later, when they are loaded
     }
 
     hookMenu() {
-        NODE_MENU.forEach((menu) => {
+        MENU.forEach((menu) => {
             console.log(this.find(menu));
             // Subscribes to change event for each menu element
             this.find(menu).on("change", (e) => {
@@ -117,6 +125,7 @@ export class SelectMenu extends ToolMenu {
             this.fillNode(value);
             this.setContext(CONTEXT.node);
         } else if (value.link) {
+            this.fillLink(value);
             this.setContext(CONTEXT.link);
         } else {
             this.setContext(CONTEXT.nothing);
@@ -128,4 +137,16 @@ export class SelectMenu extends ToolMenu {
             this.find(menu).val(node[this.toProperty(menu)]);
         });
     }
+
+    fillLink(link) {
+        var sourceName = link[Graph.LINK_SOURCE][Graph.NODE_LABEL];
+        var targetName = link[Graph.LINK_TARGET][Graph.NODE_LABEL];
+        this.find(LINK_NAME_ID).text(
+            sourceName + LINK_NAME_CONNECTOR + targetName
+        );
+
+        LINK_MENU.forEach((menu) => {
+            this.find(menu).val(link[this.toProperty(menu)]);
+        });
+    }
 }