From d1b777accb023ffb8e8ccdc266554fdfaae769f4 Mon Sep 17 00:00:00 2001
From: Max <m.giller.dev@gmail.com>
Date: Fri, 5 Nov 2021 17:48:40 +0100
Subject: [PATCH] Made space selectable
---
config.js | 6 ++++-
datasets/datasets.js | 32 ++++++++++++++++++-----
datasets/datasets.php | 37 +++++++++++++++++++++++++++
editor/editor.php | 9 +++++++
editor/js/editor.js | 21 ++++++++++-----
editor/js/interactions.js | 17 +++++++++++-
editor/js/tools/menus/settingsmenu.js | 12 +++++++++
7 files changed, 119 insertions(+), 15 deletions(-)
diff --git a/config.js b/config.js
index 2e077a9..5b89a0b 100644
--- a/config.js
+++ b/config.js
@@ -10,4 +10,8 @@ export const COLOR_PALETTE = [
// Just renaming a variable which is given by the PHP script. This avoids errors in all other files.
export const PLUGIN_PATH = plugin.path;
-export const SPACE = space.id;
+export var SPACE = space.id;
+
+export function setSpace(space) {
+ SPACE = space;
+}
diff --git a/datasets/datasets.js b/datasets/datasets.js
index 3b14ee3..92cf8d9 100644
--- a/datasets/datasets.js
+++ b/datasets/datasets.js
@@ -6,7 +6,7 @@ import jQuery from "jquery";
*
* @param {String} spaceId Identification of graph to load.
*
- * @returns Promise returning graph object
+ * @returns Promise returning graph object.
*/
export function loadGraphJson(spaceId) {
let payload = {
@@ -28,6 +28,8 @@ export function loadGraphJson(spaceId) {
*
* @param {String} spaceId Identification of graph to save.
* @param {object} json Graph object
+ *
+ * @returns Promise returning state of query.
*/
export function saveGraphJson(spaceId, json) {
let payload = {
@@ -36,10 +38,26 @@ export function saveGraphJson(spaceId, json) {
space: spaceId,
};
- return jQuery
- .ajax({
- type: "POST",
- url: ajax_object.ajax_url,
- data: payload,
- });
+ return jQuery.ajax({
+ type: "POST",
+ url: ajax_object.ajax_url,
+ data: payload,
+ });
+}
+
+/**
+ * Retrieves a list of all available spaces to choose from.
+ *
+ * @returns A promise containing an array containing all available space ids.
+ */
+export function listAllSpaces() {
+ let payload = {
+ action: "list_spaces",
+ };
+
+ return jQuery.ajax({
+ type: "POST",
+ url: ajax_object.ajax_url,
+ data: payload,
+ }).then((data) => JSON.parse(data)["spaces"]);
}
diff --git a/datasets/datasets.php b/datasets/datasets.php
index 5e92d4b..7532c04 100644
--- a/datasets/datasets.php
+++ b/datasets/datasets.php
@@ -10,6 +10,16 @@ function kg_get_space() {
wp_die();
}
+add_action("wp_ajax_list_spaces", "kg_list_spaces"); // Fires only for logged-in-users
+function kg_list_spaces() {
+ $spaces = kg_get_list_of_spaces();
+ $payload = array("spaces" => $spaces);
+
+ echo json_encode($payload);
+
+ wp_die();
+}
+
add_action("wp_ajax_update_space", "kg_update_space"); // Fires only for logged-in-users
//add_action("wp_ajax_nopriv_update_space", 'update_space' ); // Fires for everyone
function kg_update_space() {
@@ -40,3 +50,30 @@ function kg_store_new_graph($graph, $space_id) {
function kg_get_space_file_path($space_id) {
return __DIR__."/".$space_id.".json";
}
+
+function kg_get_list_of_spaces() {
+ $all_files = scandir(__DIR__);
+
+ if ($all_files == false) {
+ return [];
+ }
+
+ $spaces = [];
+
+ foreach ($all_files as $file) {
+ if (endsWith($file, ".json")) {
+ $spaces[] = substr($file, 0, -strlen(".json"));
+ }
+ }
+
+ return $spaces;
+}
+
+function endsWith( $haystack, $needle ) {
+ # Source: https://stackoverflow.com/a/834355/7376120
+ $length = strlen( $needle );
+ if( !$length ) {
+ return true;
+ }
+ return substr( $haystack, -$length ) === $needle;
+}
diff --git a/editor/editor.php b/editor/editor.php
index a1975e6..70e636c 100644
--- a/editor/editor.php
+++ b/editor/editor.php
@@ -61,10 +61,19 @@
</div>
</div>
<div id="settings-menu" class="hidden" checked>
+ <label for="space-id-select">Space</label>
+ </br>
+ <select id="space-id-select" name="space-id-select" class="bottom-space">
+ </select>
+
+ </br>
+ </br>
+
<input type="checkbox" checked id="label-toggle" name="label-toggle" class="bottom-space">
<label for="label-toggle">Show labels in graph</label>
</input>
+ </br>
</br>
<label>Simulate physics from beginning</label>
diff --git a/editor/js/editor.js b/editor/js/editor.js
index e6a0dc0..2f82e1f 100644
--- a/editor/js/editor.js
+++ b/editor/js/editor.js
@@ -3,11 +3,11 @@ import * as Graph from "./graph";
import { loadGraphJson } from "../../datasets/datasets";
import ForceGraph from "force-graph";
import * as Interactions from "./interactions";
-import { SPACE } from "../../config";
+import { setSpace, SPACE } from "../../config";
-export var state;
-export var graph;
+export var state = undefined;
+export var graph = undefined;
var graphObj;
window.onload = function () {
@@ -21,7 +21,17 @@ window.onload = function () {
Interactions.initInteractions();
- loadGraphJson(SPACE) // space_id defined globaly through knowledge-space.php
+ loadSpace(SPACE);
+};
+
+
+export function loadSpace(spaceId) {
+ if (state !== undefined && spaceId === SPACE) {
+ return;
+ }
+ setSpace(spaceId);
+
+ return loadGraphJson(SPACE)
.then((graphConfig) => {
state = new State();
graph = new Graph.Graph(graphConfig);
@@ -29,8 +39,7 @@ window.onload = function () {
graph.restartSimulation();
});
-};
-
+}
function extractPositions(event) {
return {
diff --git a/editor/js/interactions.js b/editor/js/interactions.js
index 0d22d22..8d57cf2 100644
--- a/editor/js/interactions.js
+++ b/editor/js/interactions.js
@@ -1,6 +1,6 @@
import jQuery from "jquery";
import { state, graph } from "./editor";
-import { saveGraphJson } from "../../datasets/datasets";
+import { listAllSpaces, saveGraphJson } from "../../datasets/datasets";
import { SPACE } from "../../config";
/**
@@ -13,4 +13,19 @@ export function initInteractions() {
jQuery("button#save").on("click", () => {
saveGraphJson(SPACE, graph.getCleanData()); // space_id defined globaly through knowledge-space.php
});
+
+ // Fill space dropdown
+ var selectContainer = jQuery("#space-id-select");
+ listAllSpaces().then((spaces) => {
+ spaces.forEach(space => {
+ var selectedTxt = "";
+ if (space === SPACE) {
+ selectedTxt = "selected ";
+ }
+
+ var child = "<option " + selectedTxt + "value=\"" + space + "\">" + space + "</option>"
+ selectContainer.append(child);
+ });
+ });
+ selectContainer.val(SPACE);
}
diff --git a/editor/js/tools/menus/settingsmenu.js b/editor/js/tools/menus/settingsmenu.js
index bb78507..f4ce5a9 100644
--- a/editor/js/tools/menus/settingsmenu.js
+++ b/editor/js/tools/menus/settingsmenu.js
@@ -1,8 +1,11 @@
+import { SPACE } from "../../../../config";
+import { loadSpace } from "../../editor";
import ToolMenu from "./toolmenu";
const LABEL_TOGGLE_ID = "#label-toggle";
const RESIMULATE_BUTTON_ID = "#reanimate-button";
const PHYSICS_DELAY_ID = "#stop-physics-delay";
+const SPACE_SELECT_ID = "#space-id-select";
export const PHYSICS_DELAY_KEY = "delay";
export const RESIMULATE_KEY = "resimulate";
@@ -28,5 +31,14 @@ export class SettingsMenu extends ToolMenu {
this.find(RESIMULATE_BUTTON_ID).on("click", () => {
this.notifyTool(RESIMULATE_KEY);
});
+ this.find(SPACE_SELECT_ID).on("click", (e) => {
+ var newSpace = e.target.value;
+ if (newSpace === SPACE) {
+ return;
+ }
+
+ loadSpace(newSpace);
+ this.hide();
+ });
}
}
--
GitLab