# presentation/renderers/surface.renderer.ts

> 30 lines of code and 5 definitions.

Tree: Site tree
Language: typescript
Layer: product
Canonical: https://banes-lab.com/anatomy/tree#file-presentation-renderers-surface-renderer-ts
Source text: https://banes-lab.com/source/tree/presentation/renderers/surface.renderer.ts.txt

Listed in [presentation/renderers](https://banes-lab.com/api/source/tree/presentation/renderers.md), after [presentation/renderers/source.renderer.ts](https://banes-lab.com/source/tree/presentation/renderers/source.renderer.ts.md) and before [presentation/renderers/syntax.renderer.ts](https://banes-lab.com/source/tree/presentation/renderers/syntax.renderer.ts.md).

## Definitions

- `renderSurface` (lexical_declaration, line 13, exported)
- `controls` (lexical_declaration, line 14, exported)
- `stage` (lexical_declaration, line 15, exported)
- `header` (lexical_declaration, line 16, exported)
- `figure` (lexical_declaration, line 20, exported)

## Uses

- [core/factories/element.factory.ts](https://banes-lab.com/source/tree/core/factories/element.factory.ts.md)
- [core/predicates/document.predicate.ts](https://banes-lab.com/source/tree/core/predicates/document.predicate.ts.md)
- [domain/loaders/surface.loader.ts](https://banes-lab.com/source/tree/domain/loaders/surface.loader.ts.md)

## Used by

- [presentation/renderers/block.renderer.ts](https://banes-lab.com/source/tree/presentation/renderers/block.renderer.ts.md)

## Source

```typescript
import {
    SURFACE_CONTROLS_CLASS,
    SURFACE_FIGURE_CLASS,
    SURFACE_STAGE_CLASS,
} from "#configuration/constants/surface.constants";
import { SURFACE_MISSING } from "#configuration/strings/surface.strings";
import type { SurfaceBlock } from "#types/block.types";
import { SurfacePlayer } from "#presentation/widgets/surface.widget";
import { createElement } from "#core/factories/element.factory";
import { isStaticRender } from "#core/predicates/document.predicate";
import { loadRecording } from "#domain/loaders/surface.loader";

export const renderSurface = function renderSurface(block: SurfaceBlock): Element {
    const controls = createElement("span", { className: SURFACE_CONTROLS_CLASS });
    const stage = createElement("div", { className: SURFACE_STAGE_CLASS });
    const header = createElement("figcaption", {
        children: [createElement("span", { className: "diagram-caption", text: block.caption }), controls],
        className: "diagram-header",
    });
    const figure = createElement("figure", { children: [header, stage], className: SURFACE_FIGURE_CLASS });
    if (!isStaticRender()) {
        void loadRecording(block.figure).then((recording) => {
            if (recording === null) {
                stage.replaceChildren(createElement("p", { className: "diagram-missing", text: SURFACE_MISSING }));
                return;
            }
            void new SurfacePlayer({ controls, figure, stage }, recording).start();
        });
    }
    return figure;
};
```