交互处理器

在基本形式下，基础库不提供任何图交互。NVL 提供了交互处理程序类，可用于启用各种交互功能。

你可以使用以下命令安装 NVL 的交互处理程序

npm install @neo4j-nvl/interaction-handlers

如果你在使用 React，可能想考虑使用 InteractiveReactWrapper。

BoxSelectInteraction

一种用于多选节点和关系的交互处理程序。当拖动光标时，它会在场景上绘制一个框，框内的所有节点和关系都会被选中。

import { BoxSelectInteraction } from '@neo4j-nvl/interaction-handlers'
import { NVL } from '@neo4j-nvl/base'

const nvl = new NVL(document.createElement('div'), [{ id: '0' }], [])
const boxSelectInteraction = new BoxSelectInteraction(nvl)

boxSelectInteraction.updateCallback('onBoxSelect', ({ nodes, rels }) => {
 console.log('Selected elements:', nodes, rels)
})

ClickInteraction

点击交互处理程序负责处理节点、关系以及场景上的单击、双击和右键点击事件。

import { ClickInteraction } from '@neo4j-nvl/interaction-handlers',
import { NVL } from '@neo4j-nvl/base'

const nvl = new NVL(document.createElement('div'), [{ id: '0' }], [])
const clickInteraction = new ClickInteraction(nvl)
clickInteraction.updateCallback('onNodeClick', (node) => {
  console.log('Node clicked', node)
})

DragNodeInteraction

一种用于拖动节点的处理程序，通过单击并移动节点来实现。请注意，当选中多个节点时，它们都会被一起拖动。

import { DragNodeInteraction } from '@neo4j-nvl/interaction-handlers'
import { NVL } from '@neo4j-nvl/base'

const nvl = new NVL(document.createElement('div'), [{ id: '0' }], [])
const dragNodeInteraction = new DragNodeInteraction(nvl)

dragNodeInteraction.updateCallback('onDrag', (nodes) => {
  console.log('Dragged nodes:', nodes)
})

HoverInteraction

一种用于悬停节点和关系的交互处理程序。

import { HoverInteraction } from '@neo4j-nvl/interaction-handlers'
import { NVL } from '@neo4j-nvl/base'

const nvl = new NVL(document.createElement('div'), [{ id: '0' }], [])
const hoverInteraction = new HoverInteraction(nvl)

hoverInteraction.updateCallback('onHover', (element, hitElements, event) => {
 console.log('Hovered element:', element)
 console.log('Hit elements:', hitElements)
 console.log('Mouse event:', event)
})

LassoInteraction

一种交互处理程序，允许通过在节点和关系周围绘制套索来进行选择。拖动时，场景上会绘制一条线，线内的所有元素都会被选中。

import { LassoInteraction } from '@neo4j-nvl/interaction-handlers'
import { NVL } from '@neo4j-nvl/base'

const nvl = new NVL(document.createElement('div'), [{ id: '0' }], [])
const lassoInteraction = new LassoInteraction(nvl)

lassoInteraction.updateCallback('onLassoSelect', ({ nodes, rels }) => {
 console.log('Selected elements:', nodes, rels)
})

PanInteraction

一种用于平移场景的处理程序，通过点击并移动场景来实现。

import { PanInteraction } from '@neo4j-nvl/interaction-handlers'
import { NVL } from '@neo4j-nvl/base'

const nvl = new NVL(document.createElement('div'), [{ id: '0' }], [])
const panInteraction = new PanInteraction(nvl)

panInteraction.updateCallback('onPan', (panning) => {
  console.log('Panning:', panning)
})

ZoomInteraction

一种用于缩放场景的处理程序，通过在场景上滚动鼠标滚轮来实现。

import { ZoomInteraction } from '@neo4j-nvl/interaction-handlers'
import { NVL } from '@neo4j-nvl/base'

const nvl = new NVL(document.createElement('div'), [{ id: '0' }], [])
const zoomInteraction = new ZoomInteraction(nvl)

zoomInteraction.updateCallback('onZoom', (zoomLevel) => {
  console.log('Zoom level:', zoomLevel)
})