From 16af001e211a23d9a44c3f04d613cc86ae03869c Mon Sep 17 00:00:00 2001
From: Maximilian Giller <m.giller@tu-bs.de>
Date: Wed, 27 Jul 2022 23:44:22 +0200
Subject: [PATCH] Implements scaffolding for space manager
---
src/editor/js/components/editor.tsx | 2 +
src/editor/js/components/spacemanager.css | 14 +++
src/editor/js/components/spacemanager.tsx | 108 ++++++++++++++++++++++
3 files changed, 124 insertions(+)
create mode 100644 src/editor/js/components/spacemanager.css
create mode 100644 src/editor/js/components/spacemanager.tsx
diff --git a/src/editor/js/components/editor.tsx b/src/editor/js/components/editor.tsx
index cb406dc..53cad32 100644
--- a/src/editor/js/components/editor.tsx
+++ b/src/editor/js/components/editor.tsx
@@ -11,6 +11,7 @@ import { HistoryNavigator } from "./historynavigator";
import { GraphElement } from "../structures/graph/graphelement";
import { Link } from "../structures/graph/link";
import { NodeTypesEditor } from "./nodetypeseditor";
+import { SpaceManager } from "./spacemanager";
type propTypes = any;
type stateTypes = {
@@ -393,6 +394,7 @@ export class Editor extends React.PureComponent<propTypes, stateTypes> {
<div id="ks-editor">
<h1>Interface</h1>
<SpaceSelect onLoadSpace={this.loadSpace} />
+ <SpaceManager />
<div id="content">
<div id="force-graph-renderer">
{this.state.graph ? (
diff --git a/src/editor/js/components/spacemanager.css b/src/editor/js/components/spacemanager.css
new file mode 100644
index 0000000..250fd4b
--- /dev/null
+++ b/src/editor/js/components/spacemanager.css
@@ -0,0 +1,14 @@
+div#ks-editor #space-manager #pop-up {
+ border: 1px lightgrey solid;
+ border-radius: 5px;
+ background-color: white;
+
+ width: auto;
+ max-width: 20rem;
+ margin: 0.5rem 0rem;
+ padding: 0.7rem;
+}
+
+div#ks-editor #space-manager .warning {
+ background-color: red;
+}
diff --git a/src/editor/js/components/spacemanager.tsx b/src/editor/js/components/spacemanager.tsx
new file mode 100644
index 0000000..dbfec19
--- /dev/null
+++ b/src/editor/js/components/spacemanager.tsx
@@ -0,0 +1,108 @@
+import React from "react";
+import { ReactNode } from "react";
+import "./spacemanager.css";
+
+type propTypes = unknown;
+type stateTypes = {
+ hidden: boolean;
+ deleteConfirmationHidden: boolean;
+ newName: string;
+};
+
+export class SpaceManager extends React.Component<propTypes, stateTypes> {
+ constructor(props: propTypes) {
+ super(props);
+ this.deleteSpace = this.deleteSpace.bind(this);
+
+ this.state = {
+ hidden: true,
+ deleteConfirmationHidden: true,
+ newName: "New space",
+ };
+ }
+
+ private deleteSpace() {
+ this.setState({
+ deleteConfirmationHidden: true,
+ });
+ }
+
+ render(): ReactNode {
+ return (
+ <div id="space-manager">
+ <button
+ className="warning"
+ onClick={() =>
+ this.setState({
+ hidden: !this.state.hidden,
+ deleteConfirmationHidden: true,
+ })
+ }
+ >
+ Manage Space
+ </button>
+ {this.state.hidden ? (
+ ""
+ ) : (
+ <div id="pop-up">
+ <input
+ className="space-name"
+ type={"text"}
+ value={this.state.newName}
+ onChange={(event) =>
+ this.setState({ newName: event.target.value })
+ }
+ />
+ <ul>
+ <li>
+ <button>
+ Rename to {'"' + this.state.newName + '"'}
+ </button>
+ </li>
+ <li>
+ <button>
+ Duplicate as{" "}
+ {'"' + this.state.newName + '"'}
+ </button>
+ </li>
+ <li>
+ <button>
+ Create empty space{" "}
+ {'"' + this.state.newName + '"'}
+ </button>
+ </li>
+ </ul>
+ <hr />
+ <ul>
+ <li>
+ <button
+ onClick={() =>
+ this.setState({
+ deleteConfirmationHidden:
+ !this.state
+ .deleteConfirmationHidden,
+ })
+ }
+ >
+ Delete Space?
+ </button>
+ </li>
+ {this.state.deleteConfirmationHidden ? (
+ ""
+ ) : (
+ <li>
+ <button
+ className="warning"
+ onClick={this.deleteSpace}
+ >
+ Delete the space and all its data
+ </button>
+ </li>
+ )}
+ </ul>
+ </div>
+ )}
+ </div>
+ );
+ }
+}
--
GitLab