Canvas

Tus datos, hablados con naturalidad.

Carga el JSON nativo del plano, activa un flag para exportaciones Pretix o registra tu propio parser para el sistema heredado que nadie se atreve a tocar. Una llamada replaceData cambia el plano entero.

Explorar destacados

¿Te suena familiar?

El formato propietario del incumbente

Diez años de planos atrapados en el esquema de un proveedor. Una interfaz de parser encuentra tus datos donde viven.

Scripts de migración únicos

Código puente que convierte una vez y se pudre. Los parsers son componentes nombrados, registrados y reutilizables.

Trucos de cambio de plano

Destruir y reconstruir el plano para cambiar datos pierde estado y parpadea. replaceData cambia el plano en su sitio.

Una puerta abierta para datos del plano

01Formato nativo documentadoBloques, objetos, punto focal y plantas. El JSON del plano es el mismo contrato que exporta Studio.
02Pretix integradoApunta el flag del parser a una exportación Pretix y las categorías se convierten en bloques automáticamente.
03Trae tu propio parserExtiende ParserBase, regístralo por nombre y tu formato es de primera clase.
04Planos intercambiables en calientereplaceData carga un plano nuevo sin remontar. El estado y los listeners sobreviven.
05Tipado de extremo a extremoLos modelos de datos del plano llegan como tipos TypeScript. Los datos mal formados fallan en compilación.
06Paridad verificada con StudioLas exportaciones del editor se prueban contra el renderizador. Lo que dibujas es lo que se renderiza.

De datos externos a plano en vivo

parser.ts
import { ParserBase } from "seatmap-canvas";
 
// 1. Enseña al plano tu formato heredado
class LegacyCrmParser extends ParserBase {
  parse(raw) {
    // filas → BlockData[] con tus claves de zona y precio
  }
}
addParser("legacy-crm", LegacyCrmParser);
 
// 2. Cambia planos en su sitio, sin remontar, sin parpadeo
seatmap.data.replaceData(crmExport);    // vía tu parser
seatmap.data.replaceData(pretixExport); // vía el parser Pretix integrado
seatmap.data.replaceData(chartJson);    // nativo { blocks, objects, focal_point }
TypeScript · seatmap-canvasreplaceData

Aliméntalo con tu formato

JSON nativo, Pretix o tu propio parser, en la demo.