Implements scaffolding for space manager

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 ? (

src/editor/js/components/spacemanager.css

+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;
+}

src/editor/js/components/spacemanager.tsx

+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>
+        );
+    }
+}