HTML 工具栏、缩略图与编辑套件

HTML 平台把内置 UI 实现为普通插件和 DOM helper，不注册一组 rg-* 子元素。

快捷启用

const graph = await createRelationGraph('#graph', {
  options: {
    showToolBar: true,
    showMiniView: true
  },
  data,
  ui: {
    toolbar: true,
    miniView: {position: 'br', width: 200, height: 120},
    editing: {
      node: true,
      resize: true,
      connect: true,
      line: true,
      lineText: true,
      linePath: true,
      referenceLine: true,
      referenceLineText: true,
      referenceLineAdsorption: true
    }
  }
});

插件安装与核心可见状态是两层控制：

• ui.toolbar 创建工具栏；options.showToolBar 控制显示。
• ui.miniView 创建 MiniView；options.showMiniView 控制显示。
• ui.editing 创建编辑 DOM；setEditingNodes()、setEditingLine() 控制当前对象。

Toolbar

ui: {
  toolbar: {
    direction: 'v',
    positionH: 'right',
    positionV: 'center',
    labels: {
      fullscreen: '全屏',
      zoomIn: '放大',
      zoomOut: '缩小',
      zoomToFit: '适合视图',
      startLayout: '开始布局',
      stopLayout: '停止布局'
    }
  }
}

工具栏提供全屏、放大、当前比例/适配、缩小和自动布局。需要自定义按钮集合时，关闭官方工具栏，在 layers.view 或插件中创建按钮并调用实例 API。

MiniView

ui: {
  miniView: {
    position: 'tr',
    width: 240,
    height: '9rem',
    className: 'project-mini-view'
  }
}

MiniView 使用 Canvas 绘制概览；点击可重定位，拖动可视区域可平移画布。position 支持 tl、tc、tr、bl、bc、br、cl、cr 等值。

Editing

开关	功能
node	当前编辑节点外框
resize	八方向尺寸控制点
disableResizeWidth	禁止改变宽度
disableResizeHeight	禁止改变高度
connect	节点连线位置控制点
line	当前编辑线首尾端点
lineText	拖动和双击编辑线文字
linePath	曲线/折线控制点
referenceLine	节点拖动对齐参考线
referenceLineText	参考线距离文字
referenceLineAdsorption	对齐吸附

参考线在 editingReferenceLine.show === false 时会整体隐藏，包括节点拖动过程。

graph.setEditingNodes([graph.getNodeById('node-1')]);
graph.addEditingNode(graph.getNodeById('node-2'));
graph.setEditingNodes(null);

graph.setEditingLine(graph.getLineById('line-1'));
graph.setEditingLine(null);

线编辑回调包括 onMoveLineVertexStart、onMoveLineVertexEnd、onLinePathChanged、onLineTextDragEnd 和 onLineTextChanged。节点尺寸事件在 config.events 中配置。

ConnectTarget

const port = document.querySelector('[data-port="output"]');

const unregister = registerConnectTarget(graph, port, {
  targetId: 'service-output',
  targetType: 'node-point',
  junctionPoint: 'right',
  lineTemplate: {color: '#2563eb', lineWidth: 2},
  onDragConnectEnd(from, to, lineJson) {
    if (lineJson) graph.addLine(lineJson);
  }
});

unregister();

它可以注册节点内部端口、画布上的普通元素或 SVG 元素，并支持 FakeLine 与端点拖放。

下一页：可选 light-DOM 元素。