Button to select all nodes of a certain type

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>

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>
                 ) : (

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>