HTML toolbar, MiniView, and editing

The HTML platform implements built-in UI as regular plugins and DOM helpers. It does not register a family of rg-* child elements.

Quick setup

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
    }
  }
});

Plugin installation and core visibility are separate controls:

• ui.toolbar creates the toolbar; options.showToolBar controls visibility.
• ui.miniView creates MiniView; options.showMiniView controls visibility.
• ui.editing creates editing DOM; setEditingNodes() and setEditingLine() select the current object.

Toolbar

ui: {
  toolbar: {
    direction: 'v',
    positionH: 'right',
    positionV: 'center',
    labels: {
      fullscreen: 'Fullscreen',
      zoomIn: 'Zoom in',
      zoomOut: 'Zoom out',
      zoomToFit: 'Fit view',
      startLayout: 'Start layout',
      stopLayout: 'Stop layout'
    }
  }
}

The toolbar provides fullscreen, zoom in, current scale/fit, zoom out, and automatic layout. For a different command set, disable it and create regular buttons in layers.view or a plugin.

MiniView

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

MiniView uses Canvas for the overview. Click to reposition, or drag the visible area to pan. position accepts values such as tl, tc, tr, bl, bc, br, cl, and cr.

Editing

Switch	Feature
node	Current node editing frame
resize	Eight resize handles
disableResizeWidth	Prevent width changes
disableResizeHeight	Prevent height changes
connect	Node connection position handles
line	Current line endpoints
lineText	Drag and double-click line labels
linePath	Curve/polyline control points
referenceLine	Node-drag alignment guides
referenceLineText	Guide distance labels
referenceLineAdsorption	Alignment snapping

Reference guides are fully hidden whenever editingReferenceLine.show === false, including during a node drag.

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

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

Line callbacks include onMoveLineVertexStart, onMoveLineVertexEnd, onLinePathChanged, onLineTextDragEnd, and onLineTextChanged. Configure node resize events under 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();

Register ports inside nodes, regular canvas elements, or SVG elements for FakeLine and endpoint dragging.

Next: Optional light-DOM element.