Capture the Current Visible Graph Area as an Image

What This Example Builds

This example builds a viewer-style relation graph with a floating utility window for screenshot generation. The canvas shows a compact blue graph with circular nodes, relation lines, the built-in toolbar in the top-right corner, and an optional minimap overlay.

The main workflow is viewport-dependent capture. After the user pans or zooms the graph, the example can generate an image from exactly the currently visible graph area instead of exporting a prepared full-scene image. The same panel also shows the generated result inline as both an image preview and a Base64 string.

How the Data Is Organized

The graph data is declared inline as a single RGJsonData object inside initializeGraph. It uses a rootId, a flat nodes array, and a flat lines array, so the example does not fetch remote data or transform a separate business schema before loading it.

There is very little preprocessing. On mount, the component builds the static data object, passes it to setJsonData, then recenters and fits the graph into view. In a production system, the same shape could represent equipment hierarchies, product structures, process breakdowns, dependency trees, or any other directed relationship set that can be expressed as node and edge records.

How relation-graph Is Used

RGProvider supplies the graph context, and RGHooks.useGraphInstance() is the main integration point inside the example. The reviewed source does not add a custom layout configuration; instead, it loads the JSON data imperatively and then calls moveToCenter() and zoomToFit() so the graph starts from a usable framed view.

The graph options focus on presentation rather than editing. The example sets the built-in toolbar to a horizontal layout in the top-right corner, uses a consistent blue for nodes and lines, makes each node a 60x60 circle, and attaches lines to node borders with RGJunctionPoint.border. A small SCSS override makes the node labels white.

The view-layer extension point is RGSlotOnView. That slot conditionally mounts RGMiniView, which means the minimap is treated as a viewport overlay instead of node content. The screenshot workflow then toggles both showToolBar and local minimap visibility before calling the DOM-to-image helper.

The example does not implement graph editing. Its interactive surface is a viewer plus export utility. The shared floating window also exposes wheel-mode switching, drag-mode switching, and a separate full-image download path through prepareForImageGeneration() and restoreAfterImageGeneration(), but those settings belong to the reused helper panel rather than the core visible-area capture behavior.

Key Interactions

• The user can pan or zoom the graph first, and the capture result follows that current viewport state.
• Two boolean controls decide whether the built-in toolbar and the minimap should appear in the generated image.
• Clicking Generate Visible Area Image captures the live graph DOM, converts the result to Base64, and renders both a preview image and the Base64 payload in the floating panel.
• The floating utility window can be dragged, minimized, and switched into a shared settings panel that changes wheel and drag behavior at runtime.

Key Code Fragments

This fragment shows that the example uses a static in-component RGJsonData payload and fits the graph after loading.

const initializeGraph = async () => {
    const myJsonData: RGJsonData = {
        rootId: '2',
        nodes: [
            { id: '2', text: 'ALTXX' }, { id: '3', text: 'CH2 TTN' }, { id: '4', text: 'CH1 AlCu' },
            { id: '5', text: 'MainFrame' }, { id: '6', text: 'TestMainSys' }, { id: '7', text: 'Automotive Parts' },
            // ...
        ],
        lines: [

This fragment shows that the visible-area export path captures the live graph DOM and temporarily changes overlay visibility before taking the screenshot.

const generateImageBase64 = async () => {
    const canvasDom = graphInstance.$dom;
    graphInstance.updateOptions({
        showToolBar: toolbarVisibleInImage
    });
    await graphInstance.sleep(100);
    const orignMiniViewVisible = miniViewVisible;
    setMiniViewVisible(miniViewVisibleInImage);
    await graphInstance.sleep(100);
    const imageBlob = await domToImageByModernScreenshot(canvasDom, {
        backgroundColor: graphInstance.getOptions().backgroundColor
    });

This fragment shows that the export-specific controls live in a floating overlay instead of permanent page chrome.

<DraggableWindow>
    <div className="py-1 text-sm">
        尝试缩放、移动画布后，点击按钮生成图片，将会根据当前可见内容生成图片，你还可以指定某些组件（如工具栏、缩略图）是否包含在最终的图片中。
    </div>
    <div>
        <SimpleUIBoolean label="Toolbar Visible In Image" currentValue={toolbarVisibleInImage} onChange={setToolbarVisibleInImage} />
        <SimpleUIBoolean label="MiniView Visible In Image" currentValue={miniViewVisibleInImage} onChange={setMiniViewVisibleInImage} />
    </div>
    <SimpleUIButton onClick={generateImageBase64}>Generate Visible Area Image</SimpleUIButton>

This fragment shows that the minimap is mounted through a view slot, so it can be treated as optional screenshot content.

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

This fragment shows that the shared helper uses modern-screenshot with default capture settings and returns a blob that the example later converts to Base64.

const defaultOptions = {
    scale: 2,
    cacheBust: true,
    ...options
};

const blob = await domToBlob(element, defaultOptions);

return blob;

What Makes This Example Distinct

Compared with nearby export demos such as generate-image, generate-image-base64, and generate-image-with-background, this example is the clearest reference for viewport-limited capture. Its main path does not prepare a full export scene and does not abstract away the current pan or zoom state. Instead, it screenshots graphInstance.$dom, so the capture boundary is whatever the viewer is currently seeing.

The comparison data also shows a rarer combination than the neighboring examples: live viewport DOM capture, explicit toolbar inclusion control, optional RGMiniView inclusion, inline screenshot preview, and Base64 text output in the same floating helper-driven interface. That combination makes it a stronger starting point for “capture what the operator is looking at right now” workflows than for presentation-style full-graph export.

Relative to gee-thumbnail-diagram, the minimap has a different role here. It is not primarily a navigation widget with placement or sizing controls. It is treated as optional overlay content that may or may not appear in the exported image.

Where Else This Pattern Applies

This pattern can be adapted to review tools where users need to attach exactly the current graph viewport to a ticket, comment, or approval step.

It also fits client-side workflows that need an in-app preview and a Base64 payload before upload, embedding, or further processing, rather than an immediate file download.

Another extension is analyst tooling where auxiliary overlays such as toolbars, minimaps, or badges should be intentionally included or excluded from screenshots depending on whether the image is meant for debugging, documentation, or end-user presentation.