From 2ad968aa4d2af8b190d82306b4c7eec33814f7e0 Mon Sep 17 00:00:00 2001
From: Max <m.giller@tu-braunschweig.de>
Date: Tue, 10 May 2022 07:09:17 +0200
Subject: [PATCH] Very basic, and broken, scaffolding for the layout
---
src/editor/js/components/editor.tsx | 209 +--------------------
src/editor/js/components/graphrenderer.tsx | 12 ++
src/editor/js/components/spaceselect.tsx | 12 ++
src/editor/js/components/tooldetails.tsx | 199 ++++++++++++++++++++
4 files changed, 231 insertions(+), 201 deletions(-)
create mode 100644 src/editor/js/components/graphrenderer.tsx
create mode 100644 src/editor/js/components/spaceselect.tsx
create mode 100644 src/editor/js/components/tooldetails.tsx
diff --git a/src/editor/js/components/editor.tsx b/src/editor/js/components/editor.tsx
index 88483dc..4f1c4ce 100644
--- a/src/editor/js/components/editor.tsx
+++ b/src/editor/js/components/editor.tsx
@@ -6,6 +6,9 @@ import { Graph } from "../structures/graph/graph";
import ForceGraph from "force-graph";
import { loadGraphJson } from "../../../datasets";
import { ToolPool } from "./toolpool";
+import { ToolDetails } from "./tooldetails";
+import { GraphRenderer } from "./graphrenderer";
+import { SpaceSelect } from "./spaceselect";
export class Editor extends React.PureComponent<
InferType<typeof Editor.propTypes>,
@@ -153,208 +156,12 @@ export class Editor extends React.PureComponent<
return (
<div id="ks-editor">
<h1>Interface</h1>
- <div id="box-select-layer">
- <div id="2d-graph"></div>
+ <div id="sidepanel">
+ <SpaceSelect/>
+ <ToolPool state={this.state.state} />
+ <ToolDetails/>
</div>
- <ToolPool state={this.state.state} />
- <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>
+ <GraphRenderer/>
</div>
);
}
diff --git a/src/editor/js/components/graphrenderer.tsx b/src/editor/js/components/graphrenderer.tsx
new file mode 100644
index 0000000..a79d6e1
--- /dev/null
+++ b/src/editor/js/components/graphrenderer.tsx
@@ -0,0 +1,12 @@
+import React from "react";
+import { ReactNode } from "react";
+
+export class GraphRenderer extends React.Component {
+ render(): ReactNode {
+ return (
+ <div id="box-select-layer">
+ <div id="2d-graph"></div>
+ </div>
+ );
+ }
+}
diff --git a/src/editor/js/components/spaceselect.tsx b/src/editor/js/components/spaceselect.tsx
new file mode 100644
index 0000000..f8ba042
--- /dev/null
+++ b/src/editor/js/components/spaceselect.tsx
@@ -0,0 +1,12 @@
+import React from "react";
+import { ReactNode } from "react";
+
+export class SpaceSelect extends React.Component {
+ render(): ReactNode {
+ return (
+ <div id="box-select-layer">
+ <div id="2d-graph"></div>
+ </div>
+ );
+ }
+}
diff --git a/src/editor/js/components/tooldetails.tsx b/src/editor/js/components/tooldetails.tsx
new file mode 100644
index 0000000..a9d58d3
--- /dev/null
+++ b/src/editor/js/components/tooldetails.tsx
@@ -0,0 +1,199 @@
+import React from "react";
+import { ReactNode } from "react";
+
+export class ToolDetails extends React.Component {
+ render(): ReactNode {
+ return (
+ <div id="tooldetails">
+ <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>
+ </div>
+ );
+ }
+}
--
GitLab