From 9c368e940e11ac939e5e899576a89984ac42838e Mon Sep 17 00:00:00 2001
From: Maximilian Giller <m.giller@tu-bs.de>
Date: Tue, 6 Sep 2022 22:53:58 +0200
Subject: [PATCH] Button to select all nodes of a certain type
---
src/editor/js/components/editor.tsx | 10 ++++++++++
src/editor/js/components/nodetypeentry.tsx | 5 ++++-
src/editor/js/components/nodetypeseditor.tsx | 2 ++
3 files changed, 16 insertions(+), 1 deletion(-)
diff --git a/src/editor/js/components/editor.tsx b/src/editor/js/components/editor.tsx
index 25dd3ff..ba47e2e 100644
--- a/src/editor/js/components/editor.tsx
+++ b/src/editor/js/components/editor.tsx
@@ -12,6 +12,7 @@ import { Link } from "../structures/graph/link";
import { NodeTypesEditor } from "./nodetypeseditor";
import { SpaceManager } from "./spacemanager";
import { SelectLayer } from "./selectlayer";
+import { NodeType } from "../structures/graph/nodetype";
type propTypes = {
spaceId: string;
@@ -100,6 +101,7 @@ export class Editor extends React.PureComponent<propTypes, stateTypes> {
this.selectNode = this.selectNode.bind(this);
this.handleResize = this.handleResize.bind(this);
this.handleBoxSelect = this.handleBoxSelect.bind(this);
+ this.handleNodeTypeSelect = this.handleNodeTypeSelect.bind(this);
this.renderer = React.createRef();
this.graphContainer = React.createRef();
@@ -598,6 +600,13 @@ export class Editor extends React.PureComponent<propTypes, stateTypes> {
return undefined;
}
+ private handleNodeTypeSelect(type: NodeType) {
+ const nodesWithType = this.state.graph.nodes.filter((n: Node) =>
+ n.type.equals(type)
+ );
+ this.selectNodes(nodesWithType);
+ }
+
private handleNodeDrag(node: Node) {
this.graphInFocus = true;
@@ -735,6 +744,7 @@ export class Editor extends React.PureComponent<propTypes, stateTypes> {
<NodeTypesEditor
onChange={this.forceUpdate}
graph={this.state.graph}
+ onSelectAll={this.handleNodeTypeSelect}
/>
<hr />
<h3>Settings</h3>
diff --git a/src/editor/js/components/nodetypeentry.tsx b/src/editor/js/components/nodetypeentry.tsx
index a5a1cc3..fab85cf 100644
--- a/src/editor/js/components/nodetypeentry.tsx
+++ b/src/editor/js/components/nodetypeentry.tsx
@@ -8,6 +8,7 @@ type propTypes = {
graph: Graph;
type: NodeType;
onChange: { (): void };
+ onSelectAll: (type: NodeType) => void;
};
type stateTypes = {
temporaryColor: string;
@@ -82,7 +83,6 @@ export class NodeTypeEntry extends React.Component<propTypes, stateTypes> {
return;
}
- //TODO: Make sure, that this event is not triggered to quickly!
(this.props.type as any)[property] = newValue;
this.props.onChange();
@@ -139,6 +139,9 @@ export class NodeTypeEntry extends React.Component<propTypes, stateTypes> {
}
onChange={(event) => this.handleColorChange(event)}
/>
+ <button onClick={() => this.props.onSelectAll(this.props.type)}>
+ Select nodes
+ </button>
{this.props.graph && this.props.graph.types.length > 1 ? (
<button onClick={this.deleteType}>Delete</button>
) : (
diff --git a/src/editor/js/components/nodetypeseditor.tsx b/src/editor/js/components/nodetypeseditor.tsx
index b649a1d..d429dce 100644
--- a/src/editor/js/components/nodetypeseditor.tsx
+++ b/src/editor/js/components/nodetypeseditor.tsx
@@ -8,6 +8,7 @@ import { NodeType } from "../structures/graph/nodetype";
type propTypes = {
graph: Graph;
onChange: { (): void };
+ onSelectAll: (type: NodeType) => void;
};
export class NodeTypesEditor extends React.Component<propTypes> {
@@ -35,6 +36,7 @@ export class NodeTypesEditor extends React.Component<propTypes> {
key={type.id}
type={type}
graph={this.props.graph}
+ onSelectAll={this.props.onSelectAll}
/>
))}
</ul>
--
GitLab