diff --git a/src/backend.js b/src/backend.js
index 91750900e60b24e74ea5dd4cf308fb77cea96251..c901a6c23d71c29a02b7988183b0ecd9de39fd77 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 84740375679c5c4eee098c43119593749a502eed..0000000000000000000000000000000000000000
--- 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 0000000000000000000000000000000000000000..1887d6d687d7ff372eab611ae7e7b91a33606cb3
--- /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 4f1c4cead621ef360a542b688fba5380244aaf6a..864777d4c2bd4cfaaea639e4b5f0a3942015dd27 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 0000000000000000000000000000000000000000..bac3c4f0a9e97ad1659199d94b7823eb8f76aae4
--- /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 a79d6e1f652307a2142e060cf7341cf342244fe5..9684d9934aad4c3f21fb190c4a2de88e2154ab8e 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 0000000000000000000000000000000000000000..c1020012dd1aa8cee6d2f7d70cd64394b2903233
--- /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 f8ba0428e4eff37e92163ec5cc81893b1ff5e288..053a502c35e9f35d3f06e5f2fe59814b4068f6bd 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 0000000000000000000000000000000000000000..e4440680ec69fe9f3f532ad7897f1d905d6c3c48
--- /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 88fd1bfdc56c43d0b7fcbea30f3f4bfcdae60741..d344b487c046cfdde5b8675caeb50a17b99185de 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 0000000000000000000000000000000000000000..77dd26aa2827e5a471abb03ba41d2aabcb476110
--- /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 1438c79252b6f1adf8383d97513cc51bfaebb326..545f05333712c64e60c6e47e74517af4d5bc36d3 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 045f030b5dc3c1459c85b28aa0262524b360b751..04710bd4b609fb1a4b4c47316113439e4bf1c139 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;
}