Surface и слои

Logical surface-слои, композиция, порядок отрисовки и границы ответственности.

Практическая схема

• Документация: NovaCore.
• Раздел: Основные понятия.
• Тема страницы: Surface и слои.
• Переключатель TypeScript / DSL находится в панели навигации; вкладка Код в примере показывает файлы выбранного подхода.

Исполняемый примерСлои карты аэропортаФон, маршруты и overlay на logical surfaces.

import { Nova, NovaNode, type NovaSchema } from '@endge/nova'

// Документационный сценарий: nova-surface-airport
class ExampleNode extends NovaNode<Record<string, Event>> {
  render(): void {
    const schema: NovaSchema = [
      {
        type: 'rect',
        x: 24,
        y: 24,
        width: this.width - 48,
        height: this.height - 48,
        styles: { background: '#0d2745' },
      },
      {
        type: 'text',
        x: 44,
        y: 44,
        width: this.width - 88,
        height: 32,
        text: 'Слои карты аэропорта',
        styles: { color: '#e8f5ff' },
      },
    ]

    this.renderer.schema(schema)
    this.setRenderBoundsFromSchema(schema)
  }
}

export function mountExample(canvas: HTMLCanvasElement) {
  const app = Nova.createApp({
    target: canvas,
    size: { width: canvas.clientWidth, height: canvas.clientHeight, maxDpr: 2 },
    scheduler: { loop: false },
  })
  const surface = app.surface({ id: 'airport-layers' })
  surface.createNode(ExampleNode)

  return () => app.destroy()
}

surface · @endge/nova

NovaSurface

Logical render boundary: хранит node graph, retained frame, culling stats и composition order. Физическим canvas/backend владеет NovaApp.

class NovaSurface<E extends EventList> extends NovaNode<E>

Создание

Поле	Тип	Описание
app.createSurface(name)	NovaSurface	Создает logical surface поверх app-level backend.
createNode(NodeClass)	NovaNode	Создает node, добавляет ее в surface graph и монтирует subtree.

Render policy

Поле	Тип	Описание
retained frame	NovaRenderFrame	Surface компилируется в retained frame и replay-ится через app-level backend.
frame dirty	NovaRenderCompileStats	Dirty-политика основана на retained graph и явных dirty reasons.
renderCullingMode	'off' | 'bounds''off'	Отсекает nodes вне bounds surface.

Stats

Поле	Тип	Описание
renderMetrics	NovaRenderMetrics	Commands, batches, timings, draw calls и upload counters последнего frame.
renderCompileStats	NovaRenderCompileStats	Сколько nodes rebuilt и cached.
renderCullingStats	NovaRenderCullingStats	Сколько nodes tested и culled.

Как применять

Используйте страницу как короткую рабочую заметку: сначала определите границу ответственности, затем откройте пример и сравните TypeScript-реализацию с DSL-описанием. Runtime-код остается в Nova-слое, а Vue отвечает только за mount, layout shell и cleanup.