Preview a Full Graph Image with a Tiled Background Layer

What This Example Builds

This example renders a large left-to-right technical tree in relation-graph and turns the prepared scene into an inline screenshot preview. The visible result is a white-node hierarchy with curved labeled lines, shown over a repeated PNG tile and a light tinted background that sits inside the graph canvas through RGBackground.

The user can click Generate Image, inspect the captured bitmap inside the floating window, drag or minimize that window, and open a shared settings panel for wheel mode, drag mode, and download behavior. The main lesson is a preview-first export flow for a decorated graph scene, not graph editing and not a confirmed RGWatermark implementation.

How the Data Is Organized

The graph data is declared inline as one static RGJsonData object inside initializeGraph(). It uses rootId: '2', a flat nodes array, and a flat lines array where each line carries the repeated label Subsystem.

There is no fetch step and no preprocessing pass before layout. The component creates the data object, sends it directly to setJsonData(...), and then recenters and fits the graph with moveToCenter() and zoomToFit().

In a production system, the same shape could represent product assemblies, equipment subsystems, manufacturing stages, dependency trees, or any labeled hierarchy where one root fans out into several technical branches.

How relation-graph Is Used

index.tsx wraps the example with RGProvider, which makes the current graph instance available to the main graph component and the shared floating utility components. MyGraph.tsx then uses RGHooks.useGraphInstance() as the central entry point for initialization, full-scene image generation, and state restoration.

The graph is configured as a viewer with a tree layout that grows from left to right. Its options use rectangular white nodes, gray curved lines, left-right junction points, right-side expand holders, on-path line labels, and wide fixed levelGaps so the hierarchy reads as a spacious technical map. reLayoutWhenExpandedOrCollapsed is enabled, but the example does not add editing UI or custom mutation logic.

The export behavior depends on relation-graph’s image-generation lifecycle APIs. prepareForImageGeneration() returns a stable DOM target for capture, domToImageByModernScreenshot(...) converts that target to a blob, blobToBase64(...) turns the blob into a data URL for local preview, and restoreAfterImageGeneration() resets the graph after capture.

The example also uses relation-graph composition features around the main canvas. RGBackground injects the repeated tile layer that becomes part of the exported scene, and RGSlotOnView is mounted even though it does not add overlay content here. The shared DraggableWindow helper uses RGHooks.useGraphStore() and graphInstance.setOptions(...) to expose runtime wheel and drag mode switches plus a separate download path.

The SCSS file is intentionally light. Most of the distinctive styling comes from the inline RGBackground element rather than from heavy selector overrides, so the decorative layer is attached to the graph scene itself instead of being only an outer page skin.

Key Interactions

• Clicking Generate Image runs the full prepare-capture-restore pipeline and then shows the resulting image inside the floating panel.
• The preview area appears only after a successful capture, so the panel acts as a review surface rather than just a command launcher.
• The floating helper window can be dragged by its header and minimized, which keeps the controls movable without changing the graph data.
• The settings panel can switch wheel behavior between scroll, zoom, and none.
• The settings panel can switch canvas drag behavior between selection, move, and none.
• The same shared panel also offers a Download Image action, but that is inherited utility behavior rather than the example’s main teaching point.

Key Code Fragments

This fragment shows that the example constructs one static hierarchy inline 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 bootstrapping path that loads the graph and fits it into view before any export action.

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

This fragment shows the full-scene export lifecycle that prepares the graph, captures it with a transparent background option, restores graph state, and stores the preview as Base64.

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 establish the left-to-right technical tree style used in both the live view and the exported preview.

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 decorative layer is rendered through RGBackground, with a repeated PNG tile and a translucent tint that become part of the captured graph scene.

<RGBackground>
    <div
        style={{
            width: '100%',
            height: '100%',
            backgroundImage: 'url(data:image/png;base64,...)',
            backgroundSize: '200px 200px',
            backgroundRepeat: 'repeat',
            backgroundColor: 'rgba(246, 167, 87, 0.1)'

This fragment shows the shared settings panel changing 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

The comparison data places this example closest to generate-image-with-background, generate-image, generate-image-base64, and generate-image-visible-area, but its emphasis is narrower than any one of those siblings. Its clearest distinguishing feature is that it combines full-graph preview export with an RGBackground layer, so the generated image includes decoration that belongs to the graph scene itself rather than only to surrounding page CSS.

Compared with generate-image, this example keeps the export in a reviewable inline-preview workflow instead of making direct file download the main outcome. Compared with generate-image-base64, it is less about exposing raw image data or configurable background colors and more about preserving a tiled decorative layer inside the captured composition. Compared with generate-image-visible-area, it exports the prepared full graph rather than the user’s current viewport state. Compared with generate-image-with-background, it demonstrates an embedded RGBackground layer instead of relying on a styled canvas surface alone.

The rarity and anti-claim records also narrow the article’s claims. This is a strong reference for preview-first graph export with graph-attached decoration, but it should not be described as the only inline preview example, and it should not be presented as a verified watermark-component demo because the reviewed JSX renders RGBackground, not RGWatermark.

Where Else This Pattern Applies

This pattern is useful in workflows where users need to review a graph image before saving or sharing it. Examples include architecture snapshots, subsystem reports, manufacturing breakdown exports, technical proposal images, and approval steps that embed a generated graph image into a larger document flow.

It also applies when exported graph images need to include decorative or branded scene content, such as textured backdrops, repeated motifs, or light background branding. Teams can reuse the same prepare-capture-restore pipeline, keep the preview inline for approval, and replace the static hierarchy with their own domain graph data.