From f6a89bc88835dfa1f6c0aa6a691d024835509af6 Mon Sep 17 00:00:00 2001
From: Max <m.giller@tu-braunschweig.de>
Date: Tue, 4 Jan 2022 21:48:09 +0100
Subject: [PATCH] Sync commit
---
editor/editor.php | 54 ++++++++++++++++++++++++++--
editor/js/tools/collecttool.js | 5 ++-
editor/js/tools/menus/collectmenu.js | 35 ++++++++++++++++++
3 files changed, 90 insertions(+), 4 deletions(-)
diff --git a/editor/editor.php b/editor/editor.php
index 8810932..765d321 100644
--- a/editor/editor.php
+++ b/editor/editor.php
@@ -1,10 +1,58 @@
<div id="ks-editor">
<!--The id "ks-editor" indicates, that the javascript associated with this should automatically be executed-->
<h1>Interface</h1>
- <div id="box-select-layer"><div id="2d-graph"></div></div>
+ <div id="box-select-layer">
+ <div id="2d-graph"></div>
+ </div>
<section id="toolbar"></section>
<section id="tool-menu">
<div id="collect-menu" class="hidden">
+ <div id="nodes-selected" class="hidden">
+ <h3>Edit selected nodes</h3>
+ <br/>
+
+ <label for="nodes-description">* Description</label>
+ </br>
+ <textarea id="nodes-description" name="nodes-description" class="bottom-space"></textarea>
+
+ </br>
+ <label for="nodes-image">* Node image</label>
+ </br>
+ <img id="nodes-image-preview" style="color:red" class="preview-image" src="" />
+ </br>
+ <input type="text" id="nodes-image" name="nodes-image" placeholder="Enter file name or URL" class="bottom-space" />
+
+ </br>
+ <label for="nodes-detail-image">* Info image</label>
+ </br>
+ <img id="nodes-detail-image-preview" style="color:red" class="preview-image" src="" />
+ </br>
+ <input type="text" id="nodes-detail-image" name="nodes-detail-image" placeholder="Enter file name or URL" class="bottom-space" />
+
+ </br>
+ <label for="nodes-type">* Type</label>
+ </br>
+ <select id="nodes-type" name="nodes-type" class="bottom-space">
+ <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>
+
+ </br>
+ <label for="nodes-video">* Video</label>
+ </br>
+ <input type="text" placeholder="Video URL" id="nodes-video" name="nodes-video"></input>
+
+ </br>
+ <label for="nodes-references">* References</label> <small>One URL per line</small>
+ </br>
+ <textarea id="nodes-references" name="nodes-references" class="bottom-space"></textarea>
+ </div>
+
+ </br>
<h3>Collected items</h3>
<button id="clear-collection">Clear</button>
<ul id="selected-items"></ul>
@@ -23,14 +71,14 @@
<textarea id="node-description" name="node-description" class="bottom-space"></textarea>
</br>
- <label for="node-image">Node Image</label>
+ <label for="node-image">Node image</label>
</br>
<img id="node-image-preview" style="color:red" class="preview-image" src="" />
</br>
<input type="text" id="node-image" name="node-image" placeholder="Enter file name or URL" class="bottom-space" />
</br>
- <label for="node-detail-image">Info Image</label>
+ <label for="node-detail-image">Info image</label>
</br>
<img id="node-detail-image-preview" style="color:red" class="preview-image" src="" />
</br>
diff --git a/editor/js/tools/collecttool.js b/editor/js/tools/collecttool.js
index 80b970a..0d257bd 100644
--- a/editor/js/tools/collecttool.js
+++ b/editor/js/tools/collecttool.js
@@ -31,11 +31,12 @@ export default class CollectTool extends Tool {
br.y > node.y &&
node.y > tl.y
) {
+ // Add node if in box area
hitNodes.push(node);
}
});
- // Add to selected items
+ // Add to globally selected items
if (state.itemsContext !== CONTEXT.node) {
state.clearSelectedItems();
state.itemsContext = CONTEXT.node;
@@ -184,6 +185,8 @@ export default class CollectTool extends Tool {
bottom = e.offsetY;
}
this.boxSelect.remove();
+
+ // Triggering event on a global instance
collectToolInstance.onBoxSelect(left, bottom, top, right);
}
}
diff --git a/editor/js/tools/menus/collectmenu.js b/editor/js/tools/menus/collectmenu.js
index 27295d6..e002016 100644
--- a/editor/js/tools/menus/collectmenu.js
+++ b/editor/js/tools/menus/collectmenu.js
@@ -1,5 +1,7 @@
import jQuery from "jquery";
import { Graph } from "../../graph";
+import { CONTEXT } from "../../state";
+import { state } from "../editor";
import ToolMenu from "./toolmenu";
export const COLLECTION_KEY = "collection";
@@ -7,11 +9,16 @@ export const COLLECTION_KEY = "collection";
const SELECTED_ITEMS_ID = "#selected-items";
const CLEAR_BUTTON_ID = "#clear-collection";
+const CONTEXT_NODE = "#nodes-selected";
+
+const HIDDEN_CLASS = "hidden";
+
const DOM_LIST_ITEM = "li";
export class CollectMenu extends ToolMenu {
constructor() {
super();
+ this.context = undefined;
}
hookClearButton() {
@@ -30,6 +37,9 @@ export class CollectMenu extends ToolMenu {
afterSet(key, value) {
if (key === COLLECTION_KEY) {
this.fillDomList(SELECTED_ITEMS_ID, value, this.itemListRenderer);
+
+ // Set corresponding context
+ this.setContext(state.itemsContext);
}
}
@@ -51,4 +61,29 @@ export class CollectMenu extends ToolMenu {
items.forEach((i) => listCont.append(itemRenderer(i)));
}
+
+ setContext(context) {
+ if (context === this.context) {
+ return; // Only do something if it changes
+ }
+
+ // Disable previous context
+ if (this.context !== undefined) {
+ this.getDomToContext(this.context).addClass(HIDDEN_CLASS);
+ }
+
+ // Store and activate new context
+ this.context = context;
+ if (this.context !== undefined) {
+ this.getDomToContext(this.context).removeClass(HIDDEN_CLASS);
+ }
+ }
+
+ getDomToContext(context) {
+ if (context === CONTEXT.node) {
+ return this.find(CONTEXT_NODE);
+ } else {
+ return undefined;
+ }
+ }
}
--
GitLab