From e41c7ad99030bdec78aeb29d804e0c98fecb0cc8 Mon Sep 17 00:00:00 2001 From: Jack Date: Tue, 3 Oct 2023 19:31:19 +0800 Subject: [PATCH] Support double-clicking canvas creates new node --- docs/modules/ROOT/pages/internals/index.adoc | 12 ++++++----- .../OnCanvasOperation/createNodeCallBack.ts | 21 +++++++++++++++++++ .../Graph/GraphEventHandlerModel.ts | 10 +++++++++ .../Graph/visualization/Visualization.ts | 5 +++++ src/neo4j-arc/graph-visualization/index.ts | 3 +++ 5 files changed, 46 insertions(+), 5 deletions(-) create mode 100644 src/browser/modules/Stream/CypherFrame/VisualizationView/OnCanvasOperation/createNodeCallBack.ts diff --git a/docs/modules/ROOT/pages/internals/index.adoc b/docs/modules/ROOT/pages/internals/index.adoc index 034d5a6b4af..b652c4f8a4b 100644 --- a/docs/modules/ROOT/pages/internals/index.adoc +++ b/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: diff --git a/src/browser/modules/Stream/CypherFrame/VisualizationView/OnCanvasOperation/createNodeCallBack.ts b/src/browser/modules/Stream/CypherFrame/VisualizationView/OnCanvasOperation/createNodeCallBack.ts new file mode 100644 index 00000000000..81e309ec0e4 --- /dev/null +++ b/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 diff --git a/src/neo4j-arc/graph-visualization/GraphVisualizer/Graph/GraphEventHandlerModel.ts b/src/neo4j-arc/graph-visualization/GraphVisualizer/Graph/GraphEventHandlerModel.ts index 04f65c1f502..1f78d403eb4 100644 --- a/src/neo4j-arc/graph-visualization/GraphVisualizer/Graph/GraphEventHandlerModel.ts +++ b/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)) diff --git a/src/neo4j-arc/graph-visualization/GraphVisualizer/Graph/visualization/Visualization.ts b/src/neo4j-arc/graph-visualization/GraphVisualizer/Graph/visualization/Visualization.ts index d536715ce7b..22cb391f21b 100644 --- a/src/neo4j-arc/graph-visualization/GraphVisualizer/Graph/visualization/Visualization.ts +++ b/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) diff --git a/src/neo4j-arc/graph-visualization/index.ts b/src/neo4j-arc/graph-visualization/index.ts index 3d85b722eb6..ed0130a0f71 100644 --- a/src/neo4j-arc/graph-visualization/index.ts +++ b/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'