Generate Screenshot of Visible Graph Area

This example demonstrates how to generate a screenshot (as base64 image) of only the currently visible area of the graph, not the entire canvas. Users can pan and zoom the graph to frame their desired view, then generate an image that captures exactly what they see. The example also provides options to control whether the toolbar and mini-view (thumbnail) should be included in the generated screenshot.

Key features include: accessing the canvas DOM element via graphInstance.$dom, dynamic component visibility control before image generation, image generation with background color matching, state restoration after screenshot, and conditional rendering of RGMiniView component. The example demonstrates export functionality for presentations, interactive documentation, and custom export controls with selective component inclusion.

Generate Screenshot of Visible Graph Area

Functional Overview

This example demonstrates how to generate a screenshot (as base64 image) of only the currently visible area of the graph, not the entire canvas. Users can pan and zoom the graph to frame their desired view, then generate an image that captures exactly what they see. The example also provides options to control whether the toolbar and mini-view (thumbnail) should be included in the generated screenshot.

Implementation of Key Features

Accessing the Canvas DOM Element

The graph instance provides direct access to the canvas DOM element via graphInstance.$dom:

const generateImageBase64 = async () => {
    const canvasDom = graphInstance.$dom;
    // ... generate image from canvasDom
};

This property gives you the actual HTMLElement that contains the graph visualization.

Dynamic Component Visibility Control

Before generating the image, the example updates options to control component visibility:

graphInstance.updateOptions({
    showToolBar: toolbarVisibleInImage
});
await graphInstance.sleep(100); // Wait for render

const orignMiniViewVisible = miniViewVisible;
setMiniViewVisible(miniViewVisibleInImage);
await graphInstance.sleep(100); // Wait for render

This approach allows users to exclude UI elements like the toolbar from screenshots while keeping them visible during interaction.

Image Generation with Background Color

The image is generated using the domToImageByModernScreenshot helper:

const imageBlob = await domToImageByModernScreenshot(canvasDom, {
    backgroundColor: graphInstance.getOptions().backgroundColor
});

Setting the background color ensures the image matches the graph’s visual appearance, especially important when the canvas has a non-white background.

State Restoration

After generating the image, the original state is restored:

setMiniViewVisible(orignMiniViewVisible);
graphInstance.updateOptions({
    showToolBar: true
});

This ensures the UI returns to its original state after screenshot generation.

MiniView Conditional Rendering

The mini-view (thumbnail) is conditionally rendered using the view slot:

<RelationGraph options={graphOptions}>
    <RGSlotOnView>
        {miniViewVisible && <RGMiniView />}
    </RGSlotOnView>
</RelationGraph>

This pattern allows dynamic component visibility controlled by React state.

Creative Use Cases

Export for Presentations

Visible area screenshots enable:

• Slide generation: Capture specific graph views for presentations
• Report generation: Include focused graph sections in documents
• Thumbnail previews: Create small preview images of graph configurations
• Social sharing: Share interesting graph views on social media

Interactive Documentation

Screenshot functionality supports:

• Tutorial creation: Capture specific steps in graph exploration
• User guides: Show users exactly what they should see
• Bug reports: Capture the current view when reporting issues
• Feature demos: Create static images of dynamic visualizations

Custom Export Controls

Selective component inclusion allows:

• Clean exports: Exclude UI controls for professional output
• Annotated screenshots: Include toolbars to show context
• Multi-format export: Generate different versions for different purposes
• User preference: Let users choose what to include in exports