Configurable Gap Between Line Endpoints and Node Borders

Functional Overview

This example demonstrates the junctionOffset feature, which controls the distance between line endpoints and node borders. By default, lines connect directly to node edges, but this demo shows how adding an offset creates a visible gap between lines and nodes. This is particularly useful for improving visual clarity, avoiding overlap with node decorations, or achieving specific stylistic effects where lines should “float” near nodes rather than attaching directly to them.

Implementation of Key Features

Line Endpoint Offset Configuration

The core feature is the ability to set a gap between line endpoints and node boundaries:

const applyMyOptions = () => {
    const lines = graphInstance.getLines();
    lines.forEach(line => {
        graphInstance.updateLine(line.id, {
            junctionOffset: gapOfLineAndNode
        });
    });
};

The junctionOffset property creates a gap between the line endpoint and the node. Positive values push the line endpoint away from the node, while negative values allow lines to extend into the node.

Interactive Slider Control

Users can adjust the gap in real-time using a slider:

<input
    type="range"
    min="-10"
    max="30"
    value={gapOfLineAndNode}
    className="w-full"
    onChange={(e) => { setGapOfLineAndNode(Number(e.target.value)); }}
/>

The slider allows values from -10 (lines extend slightly into nodes) to 30 (large gap), with immediate visual feedback.

Reactive Updates with useEffect

The gap is applied automatically whenever the state changes:

useEffect(() => {
    applyMyOptions();
}, [gapOfLineAndNode]);

This ensures that all lines are updated instantly when the slider moves.

Multiple Layout Types Demonstration

The demo showcases two different layout algorithms with the gap feature:

// Tree layout
const myTreeLayout = graphInstance.createLayout({
    layoutName: 'tree',
    from: 'left',
    treeNodeGapH: 200,
    treeNodeGapV: 30
});

// Center layout
const myCenterLayout = graphInstance.createLayout({
    layoutName: 'center'
});

This demonstrates that the junctionOffset feature works with any layout type.

Transparent Node Styling

Nodes are styled with transparency to make the line gaps more visible:

node.opacity = 0.5;
node.color = 'transparent';

This styling choice helps users clearly see where lines terminate relative to node boundaries.

Creative Use Cases

Architectural and Engineering Diagrams

Use in technical diagrams where lines represent abstract connections (like data flow or relationships) that shouldn’t visually merge with physical elements (nodes). The gap creates visual separation between logical connections and physical entities.

Mind Maps with Floating Connections

Create mind maps where ideas (nodes) are distinct from their relationships (lines). The floating connection style can make it easier to distinguish concepts from their associations, especially in complex maps.

Circuit and Schematic Diagrams

Adapt for electronic schematics where wires need to connect near components but not directly to them, or where you want to show logical relationships separate from physical connections. The gap can represent interface boundaries or abstraction layers.

Network Topology Visualizations

Use in network diagrams where the gap represents a protocol layer, firewall, or other intermediary between connected entities. This visually reinforces that there’s a boundary or transformation between the nodes.

Educational Diagrams

Create educational materials where the gap helps students distinguish between entities and their relationships. For example, in biology, show organisms separate from their ecological relationships, or in chemistry, show molecules separate from reaction pathways.

Artistic and Stylized Visualizations

Use the gap feature for artistic effect, creating diagrams with a modern, minimalist aesthetic where lines seem to magnetically float near nodes. This can create a more ethereal or abstract visual style.

Cluster Boundary Indication

Use negative gaps (lines extending into nodes) to visually indicate cluster membership or containment. Lines that extend past node borders can suggest that nodes are part of a larger grouping or system.