Basic add node on background click

src/editor/js/components/editor.tsx

@@ -17,10 +17,15 @@ type stateTypes = {
     selectedNode: Node;
     keys: { [name: string]: boolean };
 };
+type clickPosition = {
+    graph: { x: number; y: number };
+    window: { x: number; y: number };
+};
 
 export class Editor extends React.PureComponent<propTypes, stateTypes> {
     private defaultWarmupTicks = 100;
     private warmupTicks = 100;
+    private renderer: any;
 
     constructor(props: propTypes) {
         super(props);
@@ -35,6 +40,10 @@ export class Editor extends React.PureComponent<propTypes, stateTypes> {
         this.isHighlighted = this.isHighlighted.bind(this);
         this.handleNodeCanvasObject = this.handleNodeCanvasObject.bind(this);
         this.handleLinkCanvasObject = this.handleLinkCanvasObject.bind(this);
+        this.handleBackgroundClick = this.handleBackgroundClick.bind(this);
+        this.extractPositions = this.extractPositions.bind(this);
+
+        this.renderer = React.createRef();
 
         // Set as new state
         this.state = {
@@ -133,6 +142,24 @@ export class Editor extends React.PureComponent<propTypes, stateTypes> {
         });
     }
 
+    /**
+     * Handler for background click event on force graph. Adds new node by default.
+     * @param event Click event.
+     */
+    private handleBackgroundClick(event: any, position: clickPosition) {
+        const newNode = new Node();
+
+        newNode.label = "Unnamed";
+        (newNode as any).fx = position.graph.x;
+        (newNode as any).fy = position.graph.y;
+        (newNode as any).x = position.graph.x;
+        (newNode as any).y = position.graph.y;
+        (newNode as any).vx = 0;
+        (newNode as any).vy = 0;
+
+        newNode.add(this.state.graph);
+    }
+
     /**
      * Propagates the changed state of the graph.
      */
@@ -174,15 +201,12 @@ export class Editor extends React.PureComponent<propTypes, stateTypes> {
      * @param event The corresponding click event.
      * @returns Coordinates in graph and coordinates in browser window.
      */
-    private extractPositions(event: any): {
-        // graph: { x: number; y: number };
-        window: { x: number; y: number };
-    } {
+    private extractPositions(event: any): clickPosition {
         return {
-            // graph: this.state.renderer.screen2GraphCoords(
-            //     event.layerX,
-            //     event.layerY
-            // ),
+            graph: this.renderer.current.screen2GraphCoords(
+                event.layerX,
+                event.layerY
+            ),
             window: { x: event.clientX, y: event.clientY },
         };
     }
@@ -318,6 +342,7 @@ export class Editor extends React.PureComponent<propTypes, stateTypes> {
                     </div>
                     {this.state.graph ? (
                         <ReactForceGraph2d
+                            ref={this.renderer}
                             graphData={this.state.graph.data}
                             onNodeClick={this.handleNodeClick}
                             autoPauseRedraw={false}
@@ -328,6 +353,12 @@ export class Editor extends React.PureComponent<propTypes, stateTypes> {
                             nodeCanvasObjectMode={"after"}
                             linkCanvasObject={this.handleLinkCanvasObject}
                             linkCanvasObjectMode={"replace"}
+                            onBackgroundClick={(event) =>
+                                this.handleBackgroundClick(
+                                    event,
+                                    this.extractPositions(event)
+                                )
+                            }
                         />
                     ) : undefined}
                 </div>