Node и дерево сцены

Дерево NovaNode, transform, bounds, children и локальное состояние.

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

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

Исполняемый примерМини-редактор nodesTransform, bounds и render order вложенной сцены.

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

// Документационный сценарий: nova-node-editor
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: 'Мини-редактор nodes',
        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: 'node-editor' })
  surface.createNode(ExampleNode)

  return () => app.destroy()
}

node · @endge/nova

NovaNode

Базовый runtime-объект scene graph: transform, lifecycle, render, dirty flags и input handlers.

class NovaNode<E extends EventList> extends RaphNode<NovaNodeProperties>

Properties

Поле	Тип	Описание
x, y	number	Локальная позиция node.
width, height	number	Логический размер и fallback bounds.
scaleX, scaleY, rotation	number	Transform-свойства matrix phase.
active, visible	boolean	Вычисляются с учетом parent state и управляют update/render/input.
interactive	boolean	Позволяет node участвовать в input registry.

Methods

Поле	Тип	Описание
options(opts)	this	Массово обновляет свойства node, включая zIndex через weight.
dirty(flags)	void	Помечает update/matrix/render phases dirty.
render()	void	Переопределяется в наследниках для отрисовки schema.
setLocalRenderBounds(bounds)	this	Задает точные bounds для culling и hit-test.
toLocal(gx, gy)	[number, number]	Переводит координаты canvas в local coordinates node.

Events

Поле	Тип	Описание
on(type, handler)	void	Подписка на bubble phase.
onCapture(type, handler)	void	Подписка на capture phase.
capturePointer(event)	void	Удерживает pointer на node во время drag.
focus(event, scope)	void	Ставит focus в default или named scope.
select(options, event)	void	Добавляет node в selection scope.

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

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