From 08b7223b1e7390d28be303ec5876dacf6238dd50 Mon Sep 17 00:00:00 2001
From: Max <m.giller@tu-bs.de>
Date: Mon, 2 May 2022 11:25:36 +0200
Subject: [PATCH] Very basic editor component
---
knowledge-space.php | 4 +-
src/backend.js | 12 +-
src/editor/editor.php | 118 ---------------
src/editor/js/components/editor.tsx | 214 ++++++++++++++++++++++++++++
4 files changed, 225 insertions(+), 123 deletions(-)
delete mode 100644 src/editor/editor.php
create mode 100644 src/editor/js/components/editor.tsx
diff --git a/knowledge-space.php b/knowledge-space.php
index 35a3863..c72195d 100644
--- a/knowledge-space.php
+++ b/knowledge-space.php
@@ -66,11 +66,11 @@ function ks_localize($handle, $atts)
function ks_add_editor($atts = [])
{
+ ks_load_styles("backend.css");
ks_add_editor_dependencies();
ks_localize("ks-editor-js", $atts);
- ks_load_styles("backend.css");
- require_once(__DIR__ . '/src/editor/editor.php');
+ echo '<div id="knowledge-space-editor"></div>';
}
function ks_add_editor_dependencies()
diff --git a/src/backend.js b/src/backend.js
index fe9e170..fc5466e 100644
--- a/src/backend.js
+++ b/src/backend.js
@@ -1,5 +1,11 @@
-import "./display/display.css";
+import { Editor } from "./editor/js/components/editor";
import "./editor/css/editor.css";
-
-import "./display/display";
import "./editor/js/editor";
+
+import ReactDOM from "react-dom";
+import React from "react";
+
+ReactDOM.render(
+ <Editor />,
+ document.getElementById("knowledge-space-editor")
+);
diff --git a/src/editor/editor.php b/src/editor/editor.php
deleted file mode 100644
index cf25e16..0000000
--- a/src/editor/editor.php
+++ /dev/null
@@ -1,118 +0,0 @@
-<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>
- <section id="toolbar"></section>
- <section id="tool-menu">
- <div id="delete-menu" class="hidden">
- <p>Drag and drop while pressing SHIFT to delete all the nodes that are being selected.</p>
- </div>
- <div id="collect-menu" class="hidden">
- <h3>Collected items</h3>
- <button id="clear-collection">Clear</button>
- <ul id="selected-items"></ul>
- </div>
- <div id="select-menu" class="">
- <p id="nothing-selected">Nothing selected</p>
- <div id="node-selected" class="hidden">
- <label for="node-name" hidden>Name</label>
- </br>
- <input type="text" id="node-name" name="node-name" placeholder="Enter name" class="bottom-space"></input>
-
- </br>
-
- <label for="node-description">Description</label>
- </br>
- <textarea id="node-description" name="node-description" class="bottom-space"></textarea>
-
- </br>
- <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>
- </br>
- <img id="node-detail-image-preview" style="color:red" class="preview-image" src="" />
- </br>
- <input type="text" id="node-detail-image" name="node-detail-image" placeholder="Enter file name or URL" class="bottom-space" />
-
- </br>
- <label for="node-type">Type</label>
- </br>
- <select id="node-type" name="node-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="node-video">Video</label>
- </br>
- <input type="text" placeholder="Video URL" id="node-video" name="node-video"></input>
-
- </br>
- <label for="node-references">References</label> <small>One URL per line</small>
- </br>
- <textarea id="node-references" name="node-references" class="bottom-space"></textarea>
- </div>
- <div id="link-selected" class="hidden">
- <h3 id="link-name"></h3>
- </div>
- </div>
- <div id="settings-menu" class="hidden" checked>
- <label for="label-toggle" class="bottom-space">
- <input type="checkbox" checked id="label-toggle" name="label-toggle"></input>
- Show labels in graph
- </label>
- </br>
- </br>
-
-
- <h3>Space</h3>
- <label for="space-id-select">Currently open</label>
- </br>
- <select id="space-id-select" name="space-id-select" class="bottom-space">
- </select>
-
- </br>
- </br>
-
- <h3>Physics Simulation</h3>
-
- <button id="reanimate-button" name="reanimate-button" class="bottom-space">Re-simulate</button>
-
- </br>
-
- <label for="stop-physics-delay">Amount of time [in seconds] after which the physics simulation is stopped</label>
- </br>
- <input type="number" onkeypress="return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57))" value="5" id="stop-physics-delay" name="stop-physics-delay" class="small-width">
- </input>
- </br>
- </br>
-
-
- <h3>Import Space</h3>
- <label for="import-space-area">Space JSON</label>
- </br>
- <textarea id="import-space-area" name="import-space-area" class="bottom-space">
- </textarea>
- </br>
- <label for="import-space-name-text">Space Name</label>
- </br>
- <input type="text" id="import-space-name-text" name="import-space-name-text" class="bottom-space">
- </input>
- </br>
- <button id="import-space-btn" name="import-space-btn" class="bottom-space">Import</button>
-
- </br>
- </br>
-
- </div>
- </section>
-</div>
\ No newline at end of file
diff --git a/src/editor/js/components/editor.tsx b/src/editor/js/components/editor.tsx
new file mode 100644
index 0000000..019a2a9
--- /dev/null
+++ b/src/editor/js/components/editor.tsx
@@ -0,0 +1,214 @@
+import React from "react";
+
+export class Editor extends React.PureComponent {
+ render(): React.ReactNode {
+ // The id "ks-editor" indicates, that the javascript associated with this should automatically be executed
+ return (
+ <div id="ks-editor">
+ <h1>Interface</h1>
+ <div id="box-select-layer">
+ <div id="2d-graph"></div>
+ </div>
+ <section id="toolbar"></section>
+ <section id="tool-menu">
+ <div id="delete-menu" className="hidden">
+ <p>
+ Drag and drop while pressing SHIFT to delete all the
+ nodes that are being selected.
+ </p>
+ </div>
+ <div id="collect-menu" className="hidden">
+ <h3>Collected items</h3>
+ <button id="clear-collection">Clear</button>
+ <ul id="selected-items"></ul>
+ </div>
+ <div id="select-menu" className="">
+ <p id="nothing-selected">Nothing selected</p>
+ <div id="node-selected" className="hidden">
+ <label htmlFor="node-name" hidden>
+ Name
+ </label>
+ <br />
+ <input
+ type="text"
+ id="node-name"
+ name="node-name"
+ placeholder="Enter name"
+ className="bottom-space"
+ ></input>
+ <br />
+ <label htmlFor="node-description">
+ Description
+ </label>
+ <br />
+ <textarea
+ id="node-description"
+ name="node-description"
+ className="bottom-space"
+ ></textarea>
+ <br />
+ <label htmlFor="node-image">Node Image</label>
+ <br />
+ <img
+ id="node-image-preview"
+ className="preview-image"
+ src=""
+ />
+ <br />
+ <input
+ type="text"
+ id="node-image"
+ name="node-image"
+ placeholder="Enter file name or URL"
+ className="bottom-space"
+ />
+ <br />
+ <label htmlFor="node-detail-image">
+ Info Image
+ </label>
+ <br />
+ <img
+ id="node-detail-image-preview"
+ className="preview-image"
+ src=""
+ />
+ <br />
+ <input
+ type="text"
+ id="node-detail-image"
+ name="node-detail-image"
+ placeholder="Enter file name or URL"
+ className="bottom-space"
+ />
+ <br />
+ <label htmlFor="node-type">Type</label>
+ <br />
+ <select
+ id="node-type"
+ name="node-type"
+ className="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 htmlFor="node-video">Video</label>
+ <br />
+ <input
+ type="text"
+ placeholder="Video URL"
+ id="node-video"
+ name="node-video"
+ ></input>
+ <br />
+ <label htmlFor="node-references">
+ References
+ </label>{" "}
+ <small>One URL per line</small>
+ <br />
+ <textarea
+ id="node-references"
+ name="node-references"
+ className="bottom-space"
+ ></textarea>
+ </div>
+ <div id="link-selected" className="hidden">
+ <h3 id="link-name"></h3>
+ </div>
+ </div>
+ <div id="settings-menu" className="hidden">
+ <label htmlFor="label-toggle" className="bottom-space">
+ <input
+ type="checkbox"
+ checked
+ id="label-toggle"
+ name="label-toggle"
+ ></input>
+ Show labels in graph
+ </label>
+ <br />
+ <br />
+
+ <h3>Space</h3>
+ <label htmlFor="space-id-select">Currently open</label>
+ <br />
+ <select
+ id="space-id-select"
+ name="space-id-select"
+ className="bottom-space"
+ ></select>
+
+ <br />
+ <br />
+
+ <h3>Physics Simulation</h3>
+
+ <button
+ id="reanimate-button"
+ name="reanimate-button"
+ className="bottom-space"
+ >
+ Re-simulate
+ </button>
+
+ <br />
+
+ <label htmlFor="stop-physics-delay">
+ Amount of time [in seconds] after which the physics
+ simulation is stopped
+ </label>
+ <br />
+ <input
+ type="number"
+ onKeyPress={(event) =>
+ (event.charCode != 8 && event.charCode == 0) ||
+ (event.charCode >= 48 && event.charCode <= 57)
+ }
+ value="5"
+ id="stop-physics-delay"
+ name="stop-physics-delay"
+ className="small-width"
+ ></input>
+ <br />
+ <br />
+
+ <h3>Import Space</h3>
+ <label htmlFor="import-space-area">Space JSON</label>
+ <br />
+ <textarea
+ id="import-space-area"
+ name="import-space-area"
+ className="bottom-space"
+ ></textarea>
+ <br />
+ <label htmlFor="import-space-name-text">
+ Space Name
+ </label>
+ <br />
+ <input
+ type="text"
+ id="import-space-name-text"
+ name="import-space-name-text"
+ className="bottom-space"
+ ></input>
+ <br />
+ <button
+ id="import-space-btn"
+ name="import-space-btn"
+ className="bottom-space"
+ >
+ Import
+ </button>
+
+ <br />
+ <br />
+ </div>
+ </section>
+ </div>
+ );
+ }
+}
--
GitLab