Skip to content
Snippets Groups Projects
Commit 6071d6a8 authored by Maximilian Giller's avatar Maximilian Giller :squid:
Browse files

Removed concept of tools

parent c75774c2
No related branches found
No related tags found
1 merge request!2Implemented editor in the react framework
Pipeline #56626 passed
import React from "react";
import { State } from "../state";
import * as Interactions from "../interactions";
import { Graph, GraphData } from "../structures/graph/graph";
import { Graph } from "../structures/graph/graph";
import { loadGraphJson } from "../../../datasets";
import { ToolPool } from "./toolpool";
import { ToolDetails } from "./tooldetails";
import { SpaceSelect } from "./spaceselect";
import "./editor.css";
......@@ -187,9 +186,6 @@ export class Editor extends React.PureComponent<propTypes, stateTypes> {
historyObject={this.state.graph}
onChange={this.onHistoryChange}
/>
<hr />
<ToolPool state={this.state.state} />
<hr />
<ToolDetails />
</div>
......
div#ks-editor #toolpool > button {
margin: 0.25rem;
}
div#ks-editor #toolpool > button > img {
max-height: 20px;
height: 20px;
width: auto;
}
\ No newline at end of file
import { InferType } from "prop-types";
import React from "react";
import "./toolbutton.css";
type propTypes = {
title: string;
icon: string;
};
export class ToolButton extends React.PureComponent<
propTypes,
InferType<typeof ToolButton.stateTypes>
> {
static stateTypes = {};
render(): React.ReactNode {
return (
<button
title={this.props.title}
// onClick={() => this.props.state.setTool(this.props.tool)}
>
<img src={this.props.icon} />
</button>
);
}
}
div#ks-editor #toolpool {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
\ No newline at end of file
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;
};
export class ToolPool extends React.PureComponent<
propTypes,
InferType<typeof ToolPool.stateTypes>
> {
static stateTypes = {};
constructor(props: propTypes) {
super(props);
}
render(): React.ReactNode {
// Don't render anything if state is not defined
// 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">
<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>
);
}
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment