Increase consistency of node/link creation/deletion functions.

Also fixed a bug which caused descriptions of deselected nodes to be still shown.

src/editor/components/nodedetails.tsx

@@ -32,11 +32,11 @@ function NodeDetails({
 
     const referenceData: NodeDataChangeRequest = {
         id: -1,
-        name: getCollectiveValue((n) => n.name, undefined),
-        description: getCollectiveValue((n) => n.description, undefined),
-        video: getCollectiveValue((n) => n.video, undefined),
-        icon: getCollectiveValue((n) => n.icon, undefined),
-        banner: getCollectiveValue((n) => n.banner, undefined),
+        name: getCollectiveValue((n) => n.name, ""),
+        description: getCollectiveValue((n) => n.description, ""),
+        video: getCollectiveValue((n) => n.video, ""),
+        icon: getCollectiveValue((n) => n.icon, ""),
+        banner: getCollectiveValue((n) => n.banner, ""),
         references: getCollectiveValue((n) => n.references, undefined),
         type: getCollectiveValue((n) => n.type, undefined),
     };
@@ -84,6 +84,7 @@ function NodeDetails({
                         id="node-description"
                         name="node-description"
                         className="bottom-space"
+                        placeholder={"Enter description"}
                         value={referenceData.description}
                         onChange={(event) =>
                             handleDataChange("description", event.target.value)

src/editor/editor.tsx

@@ -228,7 +228,6 @@ export class Editor extends React.PureComponent<any, stateTypes> {
 
         this.setState({
             graph: graph,
-            selectedNodes: [node],
         });
         return node;
     }
@@ -236,7 +235,11 @@ export class Editor extends React.PureComponent<any, stateTypes> {
     private handleNodeDeletion(ids: number[]) {
         const graph = Object.assign(new DynamicGraph(), this.state.graph);
         ids.forEach((id) => graph.deleteNode(id));
-        this.setState({ graph: graph });
+        const selectedNodes = this.state.selectedNodes.filter(
+            (node) => !ids.includes(node.id)
+        );
+
+        this.setState({ graph: graph, selectedNodes: selectedNodes });
     }
 
     private handleLinkCreation(source: number, target: number): Link {

src/editor/renderer.tsx

@@ -89,7 +89,6 @@ export class GraphRenderer2D extends React.PureComponent<
             this.props.onNodeDeletion(
                 this.props.selectedNodes.map((node: Node) => node.id)
             );
-            this.props.onNodeSelectionChanged([]);
         }
     }
 
@@ -131,27 +130,18 @@ export class GraphRenderer2D extends React.PureComponent<
 
         if (this.keys["Control"]) {
             // Request new node
-            this.props.onNodeCreation({
+            const node = this.props.onNodeCreation({
                 x: position.graph.x,
                 y: position.graph.y,
             });
+            // Select new node
+            this.props.onNodeSelectionChanged([node]);
         } else {
             // Just deselect
             this.props.onNodeSelectionChanged([]);
         }
     }
 
-    /**
-     * Propagates the changed state of the graph.
-     */
-    private onGraphDataChange() {
-        const nodes: Node[] = this.props.selectedNodes.map((node: Node) =>
-            this.props.graph.node(node.id)
-        );
-        this.props.onNodeSelectionChanged(nodes);
-        this.forceUpdate(); // TODO
-    }
-
     private connectSelectionToNode(node: Node) {
         if (this.props.selectedNodes.length == 0) {
             return;