Przegląd

Silnik grafiki sterowany JSON-em — rdzeń C++23, WebAssembly w workerze, deterministyczny eksport SVG/PNG/JPEG/BMP i responsywny workspace Vue 3.

Czym jest Vector Engine?#

Vector Engine to silnik grafiki wektorowej sterowany JSON-em: wersjonowany dokument sceny przechodzi walidację, jest renderowany deterministycznie przez rdzeń C++23 i eksportowany do SVG, PNG, JPEG lub BMP — w całości lokalnie, bez serwera.

text

JSON → walidacja → render C++23 (WASM) → SVG / PNG / JPEG / BMP

Najważniejsze możliwości#

Wersjonowany format sceny z walidacją JSON Schema (Draft 2020-12).
10 typów obiektów: rect, rounded rect, circle, ellipse, line, polygon, polyline, path, text, group.
Gradienty i warstwy — linear/radial, named layers, workspaces eksportowe.
Deterministyczny SVG z XML escaping i opcjonalną minifikacją.
Wspólny pipeline rasteryzacji RGBA dla PNG, JPEG i BMP (24/32-bit).
Jeden rdzeń C++23 — natywna biblioteka, CLI i bindingi Emscripten z jednej implementacji.
WebAssembly w Dedicated Worker — zero-copy transfery, anulowanie przez AbortSignal.
Edytor CodeMirror 6 z live walidacją i debounced renderingiem.
Responsywny workspace — breakpointy od 1280×800 do 5K, zwijane panele.
Limity zasobów — rozmiar źródła, wymiary, liczba obiektów, głębokość zagnieżdżenia.

Stack#

Warstwa	Technologia
Rdzeń	C++23, CMake ≥ 3.24, Ninja
Web	Vue 3, TypeScript, CodeMirror 6, Vite
WASM	Emscripten, wasm32-wasi reactor
Testy	Vitest, Playwright, Catch2
Walidacja	Ajv (standalone), JSON Schema

Minimalna scena#

json

{
  "version": "1.0",
  "document": {
    "width": 1200,
    "height": 800,
    "unit": "px",
    "background": "#FFFFFF"
  },
  "objects": [
    {
      "id": "circle-1",
      "type": "circle",
      "cx": 600,
      "cy": 400,
      "radius": 150,
      "fill": "#0052FF",
      "stroke": "#171717",
      "strokeWidth": 4
    }
  ]
}

Limity bezpieczeństwa#

Zasób	Limit
Źródło JSON	4 MB
Wymiar dokumentu	16 384 px
Obszar rastra	67 108 864 px
Obiekty	10 000
Głębokość grup	32
Dane path	1 000 000 znaków

Renderer akceptuje tylko zadeklarowane właściwości sceny, kolory hex, obsługiwane komendy path i lokalny tekst. Nie ładuje zewnętrznych zasobów.

Od czego zacząć?#

Szybki start

Web, natywne CLI i build WASM.

Format sceny

Dokument, obiekty, gradienty i warstwy.

Eksport

SVG, PNG, JPEG, BMP — zachowanie i opcje.

Architektura

Pipeline, worker i rdzeń C++23.

Struktura projektu#

text

vector-engine/
├── apps/web/              # Vue, TypeScript, CodeMirror, adapter przeglądarki
├── engine/include/        # Publiczne API C++
├── engine/src/            # Parser, geometria, SVG, raster, enkodery, bindingi
├── engine/tests/          # Testy Catch2
├── schemas/               # Wersjonowany JSON Schema
├── examples/              # Przykładowe sceny
├── docs/                  # Dokumentacja
├── scripts/               # Weryfikacja builda i wdrożenia
├── CMakeLists.txt         # Punkt wejścia native + WASM
├── CMakePresets.json      # Powtarzalne presety builda
└── vercel.json            # Build, routing, cache, nagłówki