Generate a Graph Image While Preserving the Canvas Background

What This Example Builds

This example renders a large left-to-right technical tree in relation-graph and turns the full prepared scene into an in-app screenshot preview. The visual result is not just the graph structure: the .rg-map surface is styled with layered radial gradients, so the export flow is designed to keep the canvas treatment visible in the captured image.

The user can press Generate Image, inspect the generated bitmap inside the floating panel, drag that panel to another screen position, minimize it, and open a shared settings overlay for wheel mode, drag mode, and a download action. The most important point is the preview-first export workflow: the example shows how to capture a styled graph surface and reuse the generated image immediately inside the UI.

How the Data Is Organized

The graph data is a static inline RGJsonData object declared inside initializeGraph(). It uses rootId: '2' and defines one hierarchy with 39 nodes and 38 labeled lines before the graph instance receives it through setJsonData(...).

There is no external fetch and no transformation pipeline before layout. The only runtime preparation is a mount-time initialization sequence that loads the JSON, recenters the graph, and fits it to the viewport with moveToCenter() and zoomToFit().

In a business application, this same structure could represent subsystem decomposition, manufacturing process branches, product assemblies, equipment breakdown trees, or any other directed hierarchy where each edge label explains the relationship between parent and child records.

How relation-graph Is Used

index.tsx wraps the demo in RGProvider, which allows MyGraph and the shared floating utility components to resolve the active graph context through hooks. Inside MyGraph, RGHooks.useGraphInstance() is the main entry point for both initialization and export behavior.

The RelationGraph instance is configured as a viewer, not an editor. Its options define a tree layout that grows from left to right, wide levelGaps, white rectangular nodes, curved gray lines, left-right junction points, and line text rendered on the path. reLayoutWhenExpandedOrCollapsed is enabled, but this demo does not add custom editing handlers or graph mutation UI.

The main instance APIs are used in two phases. First, setJsonData(...), moveToCenter(), and zoomToFit() establish the initial scene. Later, prepareForImageGeneration() and restoreAfterImageGeneration() bracket the screenshot flow so the graph can be captured in a stable export state.

The example also reuses shared helper components. DraggableWindow provides the floating control shell, CanvasSettingsPanel reads option state through RGHooks.useGraphStore(), and setOptions() updates wheelEventAction and dragEventAction at runtime. An RGSlotOnView is mounted, but it does not inject custom overlay content here.

Styling is a major part of the lesson. The exported appearance depends on SCSS overrides on .rg-map, where several radial gradients and a white base color create the background skin that the preview capture is meant to preserve.

Key Interactions

• Clicking Generate Image runs the full export-preview pipeline: prepare the graph canvas, capture it with modern-screenshot, convert the blob to Base64, restore the graph state, and render the result in an <img>.
• The preview area appears only after a capture succeeds, so the floating panel becomes a lightweight review surface instead of a download-only toolbar.
• The helper window can be dragged by its title bar and minimized, which lets the user reposition the export controls without affecting the graph itself.
• The settings overlay can switch mouse wheel behavior between scroll, zoom, and none, and canvas drag behavior between selection, move, and none.
• The same settings overlay also exposes a shared Download Image path, but the example’s own custom teaching point remains the preview-oriented capture flow in MyGraph.tsx.

Key Code Fragments

This fragment shows that the example builds one inline hierarchy directly in the component before passing it to the graph instance.

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' },
        { id: '8', text: 'Automotive Process' }, { id: '9', text: 'Process Quality Inspection' },

This fragment shows the mount-time initialization path that loads the data and fits the full graph into view.

await graphInstance.setJsonData(myJsonData);
graphInstance.moveToCenter();
graphInstance.zoomToFit();

This fragment shows the preview export lifecycle that prepares the graph, captures it with a transparent screenshot background, restores graph state, and stores the result for UI reuse.

const generateImageBase64 = async () => {
    const canvasDom = await graphInstance.prepareForImageGeneration();
    const imageBlob = await domToImageByModernScreenshot(canvasDom, {
        backgroundColor: null
    });
    await graphInstance.restoreAfterImageGeneration();
    if (imageBlob) {
        const base64 = await blobToBase64(imageBlob);
        setBase64String(base64);
    }
};

This fragment shows the graph options that define the visual language of the exported tree.

const graphOptions: RGOptions = {
    reLayoutWhenExpandedOrCollapsed: true,
    defaultExpandHolderPosition: 'right',
    defaultNodeShape: RGNodeShape.rect,
    defaultNodeBorderWidth: 1,
    defaultNodeColor: '#fff',
    defaultLineColor: '#666',
    defaultLineShape: RGLineShape.Curve2,
    defaultJunctionPoint: RGJunctionPoint.lr,
    defaultLineTextOnPath: true,

This fragment shows that the canvas background comes from direct SCSS styling on .rg-map, not from a separate relation-graph background component.

.rg-map {
    background-image:
        radial-gradient(circle at 51% 46%, rgb(149, 176, 249), rgba(149, 176, 249, 0) 50%),
        radial-gradient(circle at 10% 10%, rgb(114, 226, 253), rgba(114, 226, 253, 0) 50%),
        radial-gradient(circle at 90% 10%, rgb(184, 150, 255), rgba(184, 150, 255, 0) 50%),
        radial-gradient(circle at 90% 90%, rgb(86, 207, 210), rgba(86, 207, 210, 0) 50%),
        radial-gradient(circle at 10% 90%, rgb(168, 112, 253), rgba(168, 112, 253, 0) 50%);
    background-size: 100% 100%;
    background-repeat: repeat;
    background-color: #ffffff;
}

This fragment shows the shared settings panel updating runtime interaction modes through the active graph instance.

<SettingRow
    label="Wheel Event:"
    options={[
        { label: 'Scroll', value: 'scroll' },
        { label: 'Zoom', value: 'zoom' },
        { label: 'None', value: 'none' },
    ]}
    value={wheelMode}
    onChange={(newValue: string) => { graphInstance.setOptions({ wheelEventAction: newValue }); }}
/>

What Makes This Example Distinct

According to the comparison record, this example is most distinctive when it is treated as a background-aware export demo rather than as a general styling showcase. Its rare combination is a large static tree, a floating preview-first utility window, prepareForImageGeneration() and restoreAfterImageGeneration(), modern-screenshot, and a CSS-skinned .rg-map whose radial-gradient treatment is intended to survive the capture flow.

Compared with generate-image-visible-area, this example is the better reference when the exported image should represent the prepared full graph instead of the user’s current pan and zoom state. Compared with generate-image-with-watermark, it demonstrates preserving the graph’s own styled map surface instead of adding a separate RGBackground layer. Compared with canvas-bg2 and css-theme, it keeps styling and export tightly coupled: the point is not to switch themes at runtime, but to capture one already-designed graph surface and review it immediately.

The rarity metadata also supports a narrower claim: among examples that already preview generated images, this one puts unusual emphasis on a fixed CSS canvas treatment plus Base64-backed preview rendering. It should not be described as the only export example, but it is a strong starting point when the live canvas skin is part of the output requirement.

Where Else This Pattern Applies

This pattern transfers well to product workflows where a graph image needs to be reviewed before it is downloaded or sent elsewhere. Examples include approval snapshots for architecture trees, equipment topology reports, subsystem maps attached to tickets, or manufacturing diagrams embedded in audit records.

It is also useful when the graph canvas itself carries branded or informative styling that should remain visible in exported assets. Teams building proposal generators, printable technical reports, knowledge-map thumbnails, or upload-ready preview steps can reuse the same prepare-capture-restore flow and replace the static hierarchy with their own business data.