Skip to content
Snippets Groups Projects
Commit 2ad968aa authored by Maximilian Giller's avatar Maximilian Giller
Browse files

Very basic, and broken, scaffolding for the layout

parent bba73ee5
No related branches found
No related tags found
1 merge request!2Implemented editor in the react framework
Pipeline #56431 passed
Stage: test
Hide whitespace changes
Inline Side-by-side
src/editor/js/components/editor.tsx
+ 8
− 201
View file @ 2ad968aa
......@@ -6,6 +6,9 @@ import { Graph } from "../structures/graph/graph";
import ForceGraph from "force-graph";
import { loadGraphJson } from "../../../datasets";
import { ToolPool } from "./toolpool";
import { ToolDetails } from "./tooldetails";
import { GraphRenderer } from "./graphrenderer";
import { SpaceSelect } from "./spaceselect";
export class Editor extends React.PureComponent<
InferType<typeof Editor.propTypes>,
......@@ -153,208 +156,12 @@ export class Editor extends React.PureComponent<
return (
<div id="ks-editor">
<h1>Interface</h1>
<div id="box-select-layer">
<div id="2d-graph"></div>
<div id="sidepanel">
<SpaceSelect/>
<ToolPool state={this.state.state} />
<ToolDetails/>
</div>
<ToolPool state={this.state.state} />
<section id="tool-menu">
<div id="delete-menu" className="hidden">
<p>
Drag and drop while pressing SHIFT to delete all the
nodes that are being selected.
</p>
</div>
<div id="collect-menu" className="hidden">
<h3>Collected items</h3>
<button id="clear-collection">Clear</button>
<ul id="selected-items"></ul>
</div>
<div id="select-menu" className="">
<p id="nothing-selected">Nothing selected</p>
<div id="node-selected" className="hidden">
<label htmlFor="node-name" hidden>
Name
</label>
<br />
<input
type="text"
id="node-name"
name="node-name"
placeholder="Enter name"
className="bottom-space"
></input>
<br />
<label htmlFor="node-description">
Description
</label>
<br />
<textarea
id="node-description"
name="node-description"
className="bottom-space"
></textarea>
<br />
<label htmlFor="node-image">Node Image</label>
<br />
<img
id="node-image-preview"
className="preview-image"
src=""
/>
<br />
<input
type="text"
id="node-image"
name="node-image"
placeholder="Enter file name or URL"
className="bottom-space"
/>
<br />
<label htmlFor="node-detail-image">
Info Image
</label>
<br />
<img
id="node-detail-image-preview"
className="preview-image"
src=""
/>
<br />
<input
type="text"
id="node-detail-image"
name="node-detail-image"
placeholder="Enter file name or URL"
className="bottom-space"
/>
<br />
<label htmlFor="node-type">Type</label>
<br />
<select
id="node-type"
name="node-type"
className="bottom-space"
>
<option value="Vorlesung">Vorlesung</option>
<option value="Algorithmus">Algorithmus</option>
<option value="Definition">Definition</option>
<option value="Beispiel">Beispiel</option>
<option value="Übung">Übung</option>
<option value="Kapitel">Kapitel</option>
</select>
<br />
<label htmlFor="node-video">Video</label>
<br />
<input
type="text"
placeholder="Video URL"
id="node-video"
name="node-video"
></input>
<br />
<label htmlFor="node-references">
References
</label>{" "}
<small>One URL per line</small>
<br />
<textarea
id="node-references"
name="node-references"
className="bottom-space"
></textarea>
</div>
<div id="link-selected" className="hidden">
<h3 id="link-name"></h3>
</div>
</div>
<div id="settings-menu" className="hidden">
<label htmlFor="label-toggle" className="bottom-space">
<input
type="checkbox"
checked
id="label-toggle"
name="label-toggle"
></input>
Show labels in graph
</label>
<br />
<br />
<h3>Space</h3>
<label htmlFor="space-id-select">Currently open</label>
<br />
<select
id="space-id-select"
name="space-id-select"
className="bottom-space"
></select>
<br />
<br />
<h3>Physics Simulation</h3>
<button
id="reanimate-button"
name="reanimate-button"
className="bottom-space"
>
Re-simulate
</button>
<br />
<label htmlFor="stop-physics-delay">
Amount of time [in seconds] after which the physics
simulation is stopped
</label>
<br />
<input
type="number"
onKeyPress={(event) =>
(event.charCode != 8 && event.charCode == 0) ||
(event.charCode >= 48 && event.charCode <= 57)
}
value="5"
id="stop-physics-delay"
name="stop-physics-delay"
className="small-width"
></input>
<br />
<br />
<h3>Import Space</h3>
<label htmlFor="import-space-area">Space JSON</label>
<br />
<textarea
id="import-space-area"
name="import-space-area"
className="bottom-space"
></textarea>
<br />
<label htmlFor="import-space-name-text">
Space Name
</label>
<br />
<input
type="text"
id="import-space-name-text"
name="import-space-name-text"
className="bottom-space"
></input>
<br />
<button
id="import-space-btn"
name="import-space-btn"
className="bottom-space"
>
Import
</button>
<br />
<br />
</div>
</section>
<GraphRenderer/>
</div>
);
}
......
src/editor/js/components/graphrenderer.tsx 0 → 100644
+ 12
− 0
View file @ 2ad968aa
import React from "react";
import { ReactNode } from "react";
export class GraphRenderer extends React.Component {
render(): ReactNode {
return (
<div id="box-select-layer">
<div id="2d-graph"></div>
</div>
);
}
}
src/editor/js/components/spaceselect.tsx 0 → 100644
+ 12
− 0
View file @ 2ad968aa
import React from "react";
import { ReactNode } from "react";
export class SpaceSelect extends React.Component {
render(): ReactNode {
return (
<div id="box-select-layer">
<div id="2d-graph"></div>
</div>
);
}
}
src/editor/js/components/tooldetails.tsx 0 → 100644
+ 199
− 0
View file @ 2ad968aa
import React from "react";
import { ReactNode } from "react";
export class ToolDetails extends React.Component {
render(): ReactNode {
return (
<div id="tooldetails">
<div id="delete-menu" className="hidden">
<p>
Drag and drop while pressing SHIFT to delete all the
nodes that are being selected.
</p>
</div>
<div id="collect-menu" className="hidden">
<h3>Collected items</h3>
<button id="clear-collection">Clear</button>
<ul id="selected-items"></ul>
</div>
<div id="select-menu" className="">
<p id="nothing-selected">Nothing selected</p>
<div id="node-selected" className="hidden">
<label htmlFor="node-name" hidden>
Name
</label>
<br />
<input
type="text"
id="node-name"
name="node-name"
placeholder="Enter name"
className="bottom-space"
></input>
<br />
<label htmlFor="node-description">Description</label>
<br />
<textarea
id="node-description"
name="node-description"
className="bottom-space"
></textarea>
<br />
<label htmlFor="node-image">Node Image</label>
<br />
<img
id="node-image-preview"
className="preview-image"
src=""
/>
<br />
<input
type="text"
id="node-image"
name="node-image"
placeholder="Enter file name or URL"
className="bottom-space"
/>
<br />
<label htmlFor="node-detail-image">Info Image</label>
<br />
<img
id="node-detail-image-preview"
className="preview-image"
src=""
/>
<br />
<input
type="text"
id="node-detail-image"
name="node-detail-image"
placeholder="Enter file name or URL"
className="bottom-space"
/>
<br />
<label htmlFor="node-type">Type</label>
<br />
<select
id="node-type"
name="node-type"
className="bottom-space"
>
<option value="Vorlesung">Vorlesung</option>
<option value="Algorithmus">Algorithmus</option>
<option value="Definition">Definition</option>
<option value="Beispiel">Beispiel</option>
<option value="Übung">Übung</option>
<option value="Kapitel">Kapitel</option>
</select>
<br />
<label htmlFor="node-video">Video</label>
<br />
<input
type="text"
placeholder="Video URL"
id="node-video"
name="node-video"
></input>
<br />
<label htmlFor="node-references">References</label>{" "}
<small>One URL per line</small>
<br />
<textarea
id="node-references"
name="node-references"
className="bottom-space"
></textarea>
</div>
<div id="link-selected" className="hidden">
<h3 id="link-name"></h3>
</div>
</div>
<div id="settings-menu" className="hidden">
<label htmlFor="label-toggle" className="bottom-space">
<input
type="checkbox"
checked
id="label-toggle"
name="label-toggle"
></input>
Show labels in graph
</label>
<br />
<br />
<h3>Space</h3>
<label htmlFor="space-id-select">Currently open</label>
<br />
<select
id="space-id-select"
name="space-id-select"
className="bottom-space"
></select>
<br />
<br />
<h3>Physics Simulation</h3>
<button
id="reanimate-button"
name="reanimate-button"
className="bottom-space"
>
Re-simulate
</button>
<br />
<label htmlFor="stop-physics-delay">
Amount of time [in seconds] after which the physics
simulation is stopped
</label>
<br />
<input
type="number"
onKeyPress={(event) =>
(event.charCode != 8 && event.charCode == 0) ||
(event.charCode >= 48 && event.charCode <= 57)
}
value="5"
id="stop-physics-delay"
name="stop-physics-delay"
className="small-width"
></input>
<br />
<br />
<h3>Import Space</h3>
<label htmlFor="import-space-area">Space JSON</label>
<br />
<textarea
id="import-space-area"
name="import-space-area"
className="bottom-space"
></textarea>
<br />
<label htmlFor="import-space-name-text">Space Name</label>
<br />
<input
type="text"
id="import-space-name-text"
name="import-space-name-text"
className="bottom-space"
></input>
<br />
<button
id="import-space-btn"
name="import-space-btn"
className="bottom-space"
>
Import
</button>
<br />
<br />
</div>
</div>
);
}
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment