Relation Graph

Functional Overview

This example demonstrates canvas offset functionality, allowing precise control over the center point position of the canvas. By adjusting X and Y coordinate offsets, users can pan the entire canvas to achieve precise graph positioning. With a coordinate grid overlay, users can visually see the offset effect and coordinate system relationships.

Implementation of Key Features

Canvas Center Point Setting

Use the setCanvasCenter method to set the canvas center point:

useEffect(() => {
    graphInstance.setCanvasCenter(canvasOffsetX, canvasOffsetY);
}, [canvasOffsetX, canvasOffsetY]);

When the offset state changes, the canvas center point automatically updates.

Dual-Axis Control

Provide independent controls for X and Y directions:

<SimpleUISlider min={-1000} max={1000} step={10} currentValue={canvasOffsetX} onChange={(newValue: number) => { setCanvasOffsetX(newValue); }} />
<SimpleUISlider min={-1000} max={1000} step={10} currentValue={canvasOffsetY} onChange={(newValue: number) => { setCanvasOffsetY(newValue); }} />

Sliders range from -1000 to 1000 with a step of 10, providing fine control precision.

Coordinate Grid Overlay

Use RGSlotOnCanvas to add a custom grid layer:

<RelationGraph options={graphOptions}>
    <RGSlotOnCanvas>
        <div className="absolute left-[-1000px] top-[-1000px]">
            <CoordinateGrid />
        </div>
    </RGSlotOnCanvas>
</RelationGraph>

The grid layer sits below the canvas, helping users understand the coordinate system and offset effects.

Fixed Layout Mode

Use fixed layout to clearly show offset effects:

const graphOptions: RGOptions = {
    layout: {
        layoutName: 'fixed'
    }
};

Fixed layout means nodes won’t automatically rearrange, only affected by canvas offset.

Real-time Feedback

Display current offset values:

<div className="c-option-name">canvas X: {canvasOffsetX}</div>
<div className="c-option-name">canvas Y: {canvasOffsetY}</div>

Users can see numerical changes in offset values in real-time.

Creative Use Cases

Multi-Graph Alignment

When displaying multiple related graphs, use offsets to precisely align them. For example, when comparing data across different time periods, maintain coordinate consistency.

Virtual Infinite Canvas

Create large virtual workspaces where users can navigate. Offset functionality enables infinite canvas experiences similar to design software.

Coordinate System Conversion

Use offsets when mapping graph coordinates to other coordinate systems. For example, aligning graphs to geographic coordinates or map tiles.

Animation and Transitions

Create smooth canvas pan animations:

const animateOffset = async (targetX: number, targetY: number) => {
    const startX = canvasOffsetX;
    const startY = canvasOffsetY;
    const duration = 500;
    const startTime = Date.now();

    const animate = () => {
        const elapsed = Date.now() - startTime;
        const progress = Math.min(elapsed / duration, 1);

        setCanvasOffsetX(startX + (targetX - startX) * progress);
        setCanvasOffsetY(startY + (targetY - startY) * progress);

        if (progress < 1) {
            requestAnimationFrame(animate);
        }
    };

    animate();
};

Layered Display

Display related information at different levels. Through offset, display detailed sub-graphs or annotations alongside the main graph.

Print and Export Optimization

Adjust offsets when printing or exporting for optimal layout. For example, centering graph content on the page or canvas.

Collaborative Editing

In multi-user collaborative graph editing, each user can have different view offsets, enabling independent navigation without affecting other users’ views.

Map Integration

When integrating with map services, use offsets to map graph coordinates to geographic locations. For example, overlaying network topology graphs on maps.

Graph Offset

Canvas Position Control with Coordinate Offsets