Schema primitives

Базовые schema-объекты: rect, line, circle, arc, polygon, border, clip и opacity.

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

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

Исполняемый примерГалерея schema primitivesRect, line, circle, arc, polygon и dashed styling.

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

// Документационный сценарий: nova-schema-primitives
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: 'Галерея schema primitives',
        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: 'schema-primitives' })
  surface.createNode(ExampleNode)

  return () => app.destroy()
}

schema · @endge/nova

NovaSchemaItem

Дискриминированный union всех primitives, которые renderer умеет отрисовывать через schema.

type NovaSchemaItem = { type: 'rect' | 'border' | 'text' | 'line' | 'circle' | 'arc' | 'icon' | 'polygon' }

rect Базовый прямоугольник для фонов, панелей, карточек и батчинга.

Поле	Тип	Описание
x, yrequired	number	Локальная позиция внутри текущей node transform.
width, heightrequired	number	Логический размер rect.
styles.background	string | ImageBitmap | HTMLCanvasElement	Цвет, rgba или canvas texture/pattern.
styles.border	{ color, width, radius, dashPattern, position }	Обводка rect. WebGL backend может rasterize сложные случаи в texture resource.
styles.opacity	number	Прозрачность элемента.

text Текст с padding, align, ellipsis, markdown parser и clip.

Поле	Тип	Описание
textrequired	string	Строка для отрисовки.
parser	'string' | 'markdown''string'	Markdown parser поддерживает базовые bold/italic/newline chunks.
styles.font	{ family, size, weight }	Шрифт текста.
styles.padding	NovaStylePadding	Inner padding. Включает безопасный inner clip.
styles.align	{ horizontal, vertical }	Выравнивание внутри text box.
styles.ellipsis	boolean	Обрезает длинный текст в одну строку.

line / circle / arc Простые primitives для связей, маркеров, progress rings и overlays.

Поле	Тип	Описание
line.x1/y1/x2/y2required	number	Координаты начала и конца линии.
line.styles.dashPattern	number[]	Штриховка линии.
circle.x/y/radiusrequired	number	Центр и радиус круга.
circle.styles.border	{ color, width, dashPattern }	Обводка круга.
arc.x/y/radiusrequired	number	Центр и радиус дуги.
arc.startAngle/endAnglerequired	number	Углы в радианах.
arc.styles	{ color, width, lineCap, opacity }	Цвет, толщина и окончание дуги.

• Schema items обычно создаются внутри render() node и передаются в renderer.schema().
• Для точного hit-test используйте setRenderBoundsFromSchema(schema).

Arc

arc рисует дугу или кольцевой сегмент без DOM и подходит для progress rings, circular indicators и компактных gauge-элементов.

{
  type: 'arc',
  x: 24,
  y: 24,
  radius: 9,
  startAngle: -Math.PI / 2,
  endAngle: -Math.PI / 2 + Math.PI * 1.5,
  styles: {
    color: '#10b981',
    width: 2,
    lineCap: 'round',
  },
}

Для готового индикатора прогресса используйте NovaUIKit.progressRingSchema.

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

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