From 1231c724f39e6f9dae08a77f58c5b9ffa852b2a8 Mon Sep 17 00:00:00 2001
From: Maximilian Giller <m.giller@tu-bs.de>
Date: Tue, 27 Sep 2022 21:28:16 +0200
Subject: [PATCH] Created drop down menu for editing NodeTypes
---
src/editor/components/nodetypeentry.css | 11 +++--
src/editor/components/nodetypeentry.tsx | 11 ++++-
src/editor/components/nodetypeseditor.css | 6 +--
src/editor/components/nodetypeseditor.tsx | 60 +++++++++++++++++------
4 files changed, 65 insertions(+), 23 deletions(-)
diff --git a/src/editor/components/nodetypeentry.css b/src/editor/components/nodetypeentry.css
index c76ac58..41e325a 100644
--- a/src/editor/components/nodetypeentry.css
+++ b/src/editor/components/nodetypeentry.css
@@ -1,7 +1,12 @@
-div#ks-editor .node-type-name {
- width: 150px;
+div#ks-editor input,
+div#ks-editor button {
+ margin-bottom: 0.5em;
+}
+
+div#ks-editor input {
+ max-width: 100%;
}
div#ks-editor .node-type-color {
- width: 5rem;
+ margin-bottom: 1em;
}
diff --git a/src/editor/components/nodetypeentry.tsx b/src/editor/components/nodetypeentry.tsx
index ed1907a..727520e 100644
--- a/src/editor/components/nodetypeentry.tsx
+++ b/src/editor/components/nodetypeentry.tsx
@@ -70,7 +70,9 @@ function NodeTypeEntry({
};
return (
- <li className="node-type" onBlur={handleBlur}>
+ <div className="node-type" onBlur={handleBlur}>
+ <label htmlFor="node-type-name">Name</label>
+ <br />
<input
className="node-type-name"
type={"text"}
@@ -79,21 +81,26 @@ function NodeTypeEntry({
handleDataChange("name", event.target.value)
}
/>
+ <br />
+ <label htmlFor="node-type-color">Color</label>
+ <br />
<input
className="node-type-color"
type={"text"}
value={tmpColor !== undefined ? tmpColor : nodeType.color}
onChange={(event) => handleColorChange(event.target.value)}
/>
+ <br />
<button onClick={() => onNodeTypeSelect(nodeType)}>
Select nodes
</button>
+ <br />
{enableDelete && (
<button onClick={() => onNodeTypeDelete([nodeType.id])}>
Delete
</button>
)}
- </li>
+ </div>
);
}
diff --git a/src/editor/components/nodetypeseditor.css b/src/editor/components/nodetypeseditor.css
index db57894..defbabd 100644
--- a/src/editor/components/nodetypeseditor.css
+++ b/src/editor/components/nodetypeseditor.css
@@ -1,5 +1,3 @@
-div#ks-editor #node-types-editor ul {
- list-style-type: none;
- margin: 0;
- padding: 0;
+div#ks-editor #node-types-editor select {
+ margin-bottom: 1em;
}
diff --git a/src/editor/components/nodetypeseditor.tsx b/src/editor/components/nodetypeseditor.tsx
index 287498b..f3bc7ef 100644
--- a/src/editor/components/nodetypeseditor.tsx
+++ b/src/editor/components/nodetypeseditor.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
import "./nodetypeseditor.css";
import NodeTypeEntry from "./nodetypeentry";
import { NodeType, NodeTypeData } from "../../common/graph/nodetype";
@@ -23,23 +23,55 @@ function NodeTypesEditor({
onNodeTypeDataChange,
createCheckpoint,
}: NodeTypesEditorProps) {
+ const [selectedType, setSelectedType] = useState<NodeType>(nodeTypes[0]); // There should always exist at least one NodeType object
+
+ const selectTypeWithId = (id: number) =>
+ setSelectedType(nodeTypes.find((type: NodeType) => type.id == id));
+
+ const handleNodeTypeCreation = () => {
+ const newNodeType = onNodeTypeCreation();
+
+ // Select new type
+ setSelectedType(newNodeType);
+ };
+
+ const handleNodeTypeDelete = (ids: number[]) => {
+ onNodeTypeDelete(ids);
+
+ // Selete other type => Try first element that will not be delete
+ const newSelectedType = nodeTypes.find(
+ (nodeType: NodeType) => !ids.includes(nodeType.id)
+ );
+ setSelectedType(newSelectedType);
+ };
+
return (
<div id="node-types-editor">
- <h3>Node types</h3>
- <ul>
- {nodeTypes.map((nodeType) => (
- <NodeTypeEntry
+ <button onClick={handleNodeTypeCreation}>Add type</button>
+ <br />
+ <select
+ onChange={(e) => selectTypeWithId(Number(e.target.value))}
+ value={selectedType.id}
+ >
+ {nodeTypes.map((nodeType: NodeType, index: number) => (
+ <option
key={nodeType.id}
- nodeType={nodeType}
- onNodeTypeSelect={onNodeTypeSelect}
- onNodeTypeDelete={onNodeTypeDelete}
- onNodeTypeDataChange={onNodeTypeDataChange}
- enableDelete={nodeTypes.length > 1}
- createCheckpoint={createCheckpoint}
- />
+ value={nodeType.id}
+ selected={index === 0}
+ >
+ {nodeType.name}
+ </option>
))}
- </ul>
- <button onClick={onNodeTypeCreation}>Add type</button>
+ </select>
+ <hr />
+ <NodeTypeEntry
+ nodeType={selectedType}
+ onNodeTypeSelect={onNodeTypeSelect}
+ onNodeTypeDelete={handleNodeTypeDelete}
+ onNodeTypeDataChange={onNodeTypeDataChange}
+ enableDelete={nodeTypes.length > 1}
+ createCheckpoint={createCheckpoint}
+ />
</div>
);
}
--
GitLab