Support double-clicking canvas creates new node

docs/modules/ROOT/pages/internals/index.adoc

@@ -10,18 +10,20 @@ The Neo4J Browser is logically composed of 2 parts:
 2. A user-interface that combines the graph rendering (supported by the graphing module), database, and user
    interaction together
 
-The graphing is based on D3 but pretty much developed from scratch by building everything on top of D3 and implementing
-its own layout, coloring, and link drawing. For example, the calculation of arrow (e.g. node links) between nodes
-uses some very complicated math along with very prelimiary MDN standard basic shap specification.
+The graphing is based on D3 and implements its own layout, coloring, and link drawing. For example, the calculation of
+arrow, i.e. links, between nodes uses some
+https://github.com/QubitPi/neo4j-browser/blob/master/src/neo4j-arc/graph-visualization/utils/ArcArrow.ts[very complicated math]
+along with very prelimiary MDN standard basic shap specification.
 
 [WARNING]
 ====
-We will not have any TypeDoc documentation, because the TypeScript version used in Neo4J Browser is not supprted by it
+We will not have any TypeDoc documentation, because the TypeScript version used in Neo4J Browser is not supprted by the
+TypeDoc
 ====
 
 == Component Diagram (WIP)
 
-image:neo4j-browser.png[width=300]
+image:neo4j-browser.png[width=900]
 
 * Sentry.io is initialized in the top index.tsx
 * AppInit.tsx is responsible for several initializations:

src/browser/modules/Stream/CypherFrame/VisualizationView/OnCanvasOperation/createNodeCallBack.ts

@@ -0,0 +1,21 @@
+import {
+  GraphInteractionCallBack,
+  NODE_ON_CANVAS_CREATE
+} from 'neo4j-arc/graph-visualization'
+
+const createNodeGraphInteractionCallback: GraphInteractionCallBack = (
+  event,
+  properties
+) => {
+  if (event !== NODE_ON_CANVAS_CREATE) {
+    return
+  }
+
+  // create on-canvas node
+
+  // persists node to DB
+
+  return
+}
+
+export default createNodeGraphInteractionCallback

src/neo4j-arc/graph-visualization/GraphVisualizer/Graph/GraphEventHandlerModel.ts

@@ -30,10 +30,14 @@ import {
 } from '../../utils/mapper'
 import { Visualization } from './visualization/Visualization'
 
+export const NODE_ON_CANVAS_CREATE = 'NODE_ON_CANVAS_CREATE'
+
 export type GraphInteraction =
   | 'NODE_EXPAND'
   | 'NODE_UNPINNED'
   | 'NODE_DISMISSED'
+  | 'NODE_ON_CANVAS_CREATE'
+  | typeof NODE_ON_CANVAS_CREATE
 
 export type GraphInteractionCallBack = (
   event: GraphInteraction,
@@ -225,6 +229,11 @@ export class GraphEventHandlerModel {
     this.deselectItem()
   }
 
+  onCanvasDblClicked(): void {
+    console.log('You have double clicked the canvas!')
+    this.onGraphInteraction(NODE_ON_CANVAS_CREATE)
+  }
+
   onItemMouseOut(): void {
     this.onItemMouseOver({
       type: 'canvas',
@@ -245,6 +254,7 @@ export class GraphEventHandlerModel {
       .on('relMouseOut', this.onItemMouseOut.bind(this))
       .on('relationshipClicked', this.onRelationshipClicked.bind(this))
       .on('canvasClicked', this.onCanvasClicked.bind(this))
+      .on('canvasDblClicked', this.onCanvasDblClicked.bind(this))
       .on('nodeClose', this.nodeClose.bind(this))
       .on('nodeClicked', this.nodeClicked.bind(this))
       .on('nodeDblClicked', this.nodeDblClicked.bind(this))

src/neo4j-arc/graph-visualization/GraphVisualizer/Graph/visualization/Visualization.ts

@@ -108,6 +108,11 @@ export class Visualization {
           return this.trigger('canvasClicked')
         }
       })
+      .on('dblclick', () => {
+        if (!this.draw) {
+          return this.trigger('canvasDblClicked')
+        }
+      })
 
     this.container = this.baseGroup.append('g')
     this.geometry = new GraphGeometryModel(style)

src/neo4j-arc/graph-visualization/index.ts

@@ -33,3 +33,6 @@ export { measureText } from './utils/textMeasurement'
 export { GraphVisualizer } from './GraphVisualizer/GraphVisualizer'
 export type { DetailsPaneProps } from './GraphVisualizer/DefaultPanelContent/DefaultDetailsPane'
 export type { OverviewPaneProps } from './GraphVisualizer/DefaultPanelContent/DefaultOverviewPane'
+
+export { NODE_ON_CANVAS_CREATE } from './GraphVisualizer/Graph/GraphEventHandlerModel'
+export type { GraphInteractionCallBack } from './GraphVisualizer/Graph/GraphEventHandlerModel'