From b65fd5943763e6b1ba09f0760f01d5a535a875a1 Mon Sep 17 00:00:00 2001
From: Max <m.giller@tu-braunschweig.de>
Date: Mon, 16 May 2022 12:51:31 +0200
Subject: [PATCH] Some basic sidepanel setup
---
src/backend.js | 1 -
src/editor/css/editor.css | 78 ----------------------
src/editor/js/components/editor.css | 20 ++++++
src/editor/js/components/editor.tsx | 15 +++--
src/editor/js/components/graphrenderer.css | 13 ++++
src/editor/js/components/graphrenderer.tsx | 1 +
src/editor/js/components/spaceselect.css | 11 +++
src/editor/js/components/spaceselect.tsx | 9 ++-
src/editor/js/components/toolbutton.css | 3 +
src/editor/js/components/toolbutton.tsx | 13 ++--
src/editor/js/components/toolpool.css | 5 ++
src/editor/js/components/toolpool.tsx | 59 ++++++++++++++--
src/editor/js/state.ts | 2 +
13 files changed, 132 insertions(+), 98 deletions(-)
delete mode 100644 src/editor/css/editor.css
create mode 100644 src/editor/js/components/editor.css
create mode 100644 src/editor/js/components/graphrenderer.css
create mode 100644 src/editor/js/components/spaceselect.css
create mode 100644 src/editor/js/components/toolbutton.css
create mode 100644 src/editor/js/components/toolpool.css
diff --git a/src/backend.js b/src/backend.js
index 9175090..c901a6c 100644
--- a/src/backend.js
+++ b/src/backend.js
@@ -1,5 +1,4 @@
import { Editor } from "./editor/js/components/editor";
-import "./editor/css/editor.css";
import ReactDOM from "react-dom";
import React from "react";
diff --git a/src/editor/css/editor.css b/src/editor/css/editor.css
deleted file mode 100644
index 8474037..0000000
--- a/src/editor/css/editor.css
+++ /dev/null
@@ -1,78 +0,0 @@
-div#ks-editor section {
- border: 1px lightgrey solid;
- border-radius: 1px;
- margin: 5px;
- padding: 2.5px;
- width: auto;
-}
-
-div#ks-editor section > * {
- margin: 2.5px;
-}
-
-div#ks-editor *.selected {
- background-color: lightblue;
-}
-
-div#ks-editor *.hidden {
- display: none;
-}
-
-div#ks-editor input[type="text"] {
- border-top-style: none;
- border-left-style: none;
- border-right-style: none;
- letter-spacing: normal;
-}
-
-div#ks-editor .medium-width {
- max-width: 20rem;
-}
-
-div#ks-editor .small-width {
- max-width: 5rem;
-}
-
-div#ks-editor input#node-name {
- font-size: large;
- font-weight: bolder;
-}
-
-div#ks-editor .bottom-space {
- margin-bottom: 1rem;
-}
-
-div#ks-editor textarea {
- max-width: 100%;
- resize: both;
- letter-spacing: normal;
-}
-
-div#ks-editor textarea, div#ks-editor input[type="text"] {
- width: 80%;
- min-width: 20%;
-}
-
-div#ks-editor img.preview-image {
- max-width: 3rem;
- max-height: 3rem;
- height: auto;
-}
-
-div#ks-editor #toolbar-settings, div#ks-editor #toolbar-save {
- float: right;
-}
-
-div#ks-editor #box-select-layer {
- position: relative;
-}
-
-div#ks-editor #box-select {
- position: absolute;
- z-index: 300000;
- border-style: dotted;
- border-color: #3e74cc;
- border-width: 2px;
- background-color: rgba(255, 255, 255, 0.5);
- pointer-events: none;
-}
diff --git a/src/editor/js/components/editor.css b/src/editor/js/components/editor.css
new file mode 100644
index 0000000..1887d6d
--- /dev/null
+++ b/src/editor/js/components/editor.css
@@ -0,0 +1,20 @@
+div#ks-editor #sidepanel {
+ resize: horizontal;
+ overflow: auto;
+ min-width: 50px;
+ max-width: 40%;
+ height: inherit;
+ margin: 0.3rem;
+ padding: 0.25rem;
+
+ border: 1px lightgrey solid;
+ border-radius: 5px;
+}
+
+div#ks-editor #sidepanel > * {
+ margin: 0.25rem;
+}
+
+div#ks-editor #content {
+ display: flex;
+}
diff --git a/src/editor/js/components/editor.tsx b/src/editor/js/components/editor.tsx
index 4f1c4ce..864777d 100644
--- a/src/editor/js/components/editor.tsx
+++ b/src/editor/js/components/editor.tsx
@@ -9,6 +9,7 @@ import { ToolPool } from "./toolpool";
import { ToolDetails } from "./tooldetails";
import { GraphRenderer } from "./graphrenderer";
import { SpaceSelect } from "./spaceselect";
+import "./editor.css";
export class Editor extends React.PureComponent<
InferType<typeof Editor.propTypes>,
@@ -156,12 +157,16 @@ export class Editor extends React.PureComponent<
return (
<div id="ks-editor">
<h1>Interface</h1>
- <div id="sidepanel">
- <SpaceSelect/>
- <ToolPool state={this.state.state} />
- <ToolDetails/>
+ <div id="content">
+ <div id="sidepanel">
+ <SpaceSelect />
+ <hr />
+ <ToolPool state={this.state.state} />
+ <hr />
+ <ToolDetails />
+ </div>
+ <GraphRenderer />
</div>
- <GraphRenderer/>
</div>
);
}
diff --git a/src/editor/js/components/graphrenderer.css b/src/editor/js/components/graphrenderer.css
new file mode 100644
index 0000000..bac3c4f
--- /dev/null
+++ b/src/editor/js/components/graphrenderer.css
@@ -0,0 +1,13 @@
+div#ks-editor #box-select-layer {
+ position: relative;
+}
+
+div#ks-editor #box-select {
+ position: absolute;
+ z-index: 300000;
+ border-style: dotted;
+ border-color: #3e74cc;
+ border-width: 2px;
+ background-color: rgba(255, 255, 255, 0.5);
+ pointer-events: none;
+}
\ No newline at end of file
diff --git a/src/editor/js/components/graphrenderer.tsx b/src/editor/js/components/graphrenderer.tsx
index a79d6e1..9684d99 100644
--- a/src/editor/js/components/graphrenderer.tsx
+++ b/src/editor/js/components/graphrenderer.tsx
@@ -1,5 +1,6 @@
import React from "react";
import { ReactNode } from "react";
+import "./graphrenderer.css";
export class GraphRenderer extends React.Component {
render(): ReactNode {
diff --git a/src/editor/js/components/spaceselect.css b/src/editor/js/components/spaceselect.css
new file mode 100644
index 0000000..c102001
--- /dev/null
+++ b/src/editor/js/components/spaceselect.css
@@ -0,0 +1,11 @@
+div#ks-editor #spaceselect {
+ display: flex;
+}
+
+div#ks-editor #spaceselect > select {
+ flex-grow: 1;
+}
+
+div#ks-editor #spaceselect > button {
+ flex-grow: 0;
+}
\ No newline at end of file
diff --git a/src/editor/js/components/spaceselect.tsx b/src/editor/js/components/spaceselect.tsx
index f8ba042..053a502 100644
--- a/src/editor/js/components/spaceselect.tsx
+++ b/src/editor/js/components/spaceselect.tsx
@@ -1,11 +1,16 @@
import React from "react";
import { ReactNode } from "react";
+import "./spaceselect.css"
export class SpaceSelect extends React.Component {
render(): ReactNode {
return (
- <div id="box-select-layer">
- <div id="2d-graph"></div>
+ <div id="spaceselect">
+ <select>
+ <option>Space</option>
+ <option>AuD1</option>
+ </select>
+ <button>Save</button>
</div>
);
}
diff --git a/src/editor/js/components/toolbutton.css b/src/editor/js/components/toolbutton.css
new file mode 100644
index 0000000..e444068
--- /dev/null
+++ b/src/editor/js/components/toolbutton.css
@@ -0,0 +1,3 @@
+div#ks-editor #toolpool > button {
+ margin: 0.25rem;
+}
\ No newline at end of file
diff --git a/src/editor/js/components/toolbutton.tsx b/src/editor/js/components/toolbutton.tsx
index 88fd1bf..d344b48 100644
--- a/src/editor/js/components/toolbutton.tsx
+++ b/src/editor/js/components/toolbutton.tsx
@@ -1,11 +1,10 @@
import { InferType } from "prop-types";
import React from "react";
-import { State } from "../state";
-import Tool from "../tools/tool";
+import "./toolbutton.css";
type propTypes = {
- tool: Tool;
- state: State;
+ title: string;
+ icon: string;
};
export class ToolButton extends React.PureComponent<
@@ -17,10 +16,10 @@ export class ToolButton extends React.PureComponent<
render(): React.ReactNode {
return (
<button
- title={this.props.tool.getName()}
- onClick={() => this.props.state.setTool(this.props.tool)}
+ title={this.props.title}
+ // onClick={() => this.props.state.setTool(this.props.tool)}
>
- <img src={this.props.tool.getIcon()} />
+ <img src={this.props.icon} />
</button>
);
}
diff --git a/src/editor/js/components/toolpool.css b/src/editor/js/components/toolpool.css
new file mode 100644
index 0000000..77dd26a
--- /dev/null
+++ b/src/editor/js/components/toolpool.css
@@ -0,0 +1,5 @@
+div#ks-editor #toolpool {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-evenly;
+}
\ No newline at end of file
diff --git a/src/editor/js/components/toolpool.tsx b/src/editor/js/components/toolpool.tsx
index 1438c79..545f053 100644
--- a/src/editor/js/components/toolpool.tsx
+++ b/src/editor/js/components/toolpool.tsx
@@ -2,6 +2,8 @@ import { InferType } from "prop-types";
import React from "react";
import { State } from "../state";
import { ToolButton } from "./toolbutton";
+import wand from "../../images/tools/wand.png";
+import "./toolpool.css";
type propTypes = {
state: State;
@@ -19,19 +21,66 @@ export class ToolPool extends React.PureComponent<
render(): React.ReactNode {
// Don't render anything if state is not defined
- if (!this.state) {
- return <div id="toolpool"></div>;
- }
+ // TODO: Reactivate code later. Was commented to work on the proper toolpool render
+ // if (!this.state) {
+ // return <div id="toolpool"></div>;
+ // }
return (
<div id="toolpool">
- {this.props.state.display.tools.map((t) => (
+ <ToolButton
+ icon={wand}
+ title="Example Tools"
+ key="1"
+ ></ToolButton>
+ <ToolButton
+ icon={wand}
+ title="Example Tool"
+ key="2"
+ ></ToolButton>
+ <ToolButton
+ icon={wand}
+ title="Example Tool"
+ key="3"
+ ></ToolButton>
+ <ToolButton
+ icon={wand}
+ title="Example Tool"
+ key="4"
+ ></ToolButton>
+ <ToolButton
+ icon={wand}
+ title="Example Tool"
+ key="5"
+ ></ToolButton>
+ <ToolButton
+ icon={wand}
+ title="Example Tool"
+ key="6"
+ ></ToolButton>
+ <ToolButton
+ icon={wand}
+ title="Example Tool"
+ key="7"
+ ></ToolButton>
+ <ToolButton
+ icon={wand}
+ title="Example Tool"
+ key="8"
+ ></ToolButton>
+ <ToolButton
+ icon={wand}
+ title="Example Tool"
+ key="9"
+ ></ToolButton>
+
+ {/* {this.props.state.display.tools.map((t) => (
<ToolButton
tool={t}
state={this.props.state}
key={t.getKey()}
/>
- ))}
+ ))} */}
</div>
);
}
diff --git a/src/editor/js/state.ts b/src/editor/js/state.ts
index 045f030..04710bd 100644
--- a/src/editor/js/state.ts
+++ b/src/editor/js/state.ts
@@ -327,6 +327,8 @@ export class State extends Tool {
}
isLinkHighlighted(link: any) {
+ return false; // Code after that is causing issues
+
if (this.selectedItem === link) {
return true;
}
--
GitLab