Workshop Kit · referencia del widget
Publicadopositioning-plotter
Un control 2D para ubicar una posición de marca en ejes configurables. Arrastra el botón con el mouse, o muévelo con las flechas (Shift para saltos grandes, Home/End/PageUp/Down para los bordes). Una lectura en lenguaje simple debajo de la cuadrícula traduce las coordenadas al nivel al que corresponden. Se usa en L6a para graficar amplitud de cocina × nivel de precio.
Demo en vivo
Arrastra el botón con el mouse, o entra con Tab a la cuadrícula y usa las flechas. La lectura debajo de la cuadrícula nombra el nivel al que la posición corresponde — esa es la cadena que ve el operador, no las coordenadas crudas.
Amplitud de cocina × nivel de precio — la configuración de L6a
Contrato
Deja caer una <section> con los seis atributos de configuración de ejes y el widget renderiza el control 2D. Sin bloque JSON de configuración, sin lista de elementos en línea. El widget siempre escribe en positioning dentro de MuntinContext.
| Atributo | Tipo | Propósito |
|---|---|---|
data-widgetRequerido |
literal | Siempre "positioning-plotter". |
data-x-axisRequerido |
cadena | Nombre del eje X (renderizado en lenguaje simple en la lectura). |
data-x-low / data-x-highRequerido |
cadena | Etiquetas de los extremos del eje X. Se renderizan como nombres de nivel en la lectura (extremo bajo = X cerca de 0, extremo alto = X cerca de 1). |
data-y-axisRequerido |
cadena | Nombre del eje Y. |
data-y-low / data-y-highRequerido |
cadena | Etiquetas de los extremos del eje Y. Extremo bajo = parte de abajo de la cuadrícula (Y cerca de 1; la cuadrícula está en coordenadas de pantalla), extremo alto = parte de arriba. |
| Los seis atributos de eje | variantes -es |
Cada atributo de eje toma un hermano opcional -es para la copia en español (por ej., data-x-axis-es="Amplitud de cocina"). El widget elige según <html lang> o data-locale. |
Qué escribe: positioning en MuntinContext como { x: number, y: number, label: string }. x e y son flotantes 0..1 redondeados a tres decimales; label es el nombre del nivel que ve el operador (por ej., "$$$$ alta gama / Una especialidad").
Marcado
Accesibilidad
La operación solo por teclado es de primera clase — el widget empezó como un drag-and-drop de HTML5, se rehízo dos veces, y ahora se entrega como un <button> simple con un modelo de teclado personalizado. Las razones están en los comentarios del código; en resumen:
- El botón es un
<button>real — enfocable, con estados de hover/focus de los defaults del user agent. - Las flechas mueven el botón 1% de la cuadrícula por presión.
- Shift + flecha mueve 10%.
- Home / End mueven a los extremos del eje X (X = 0 o X = 1, Y sin cambios).
- PageUp / PageDown mueven a los extremos del eje Y (Y = 0 o Y = 1, X sin cambios).
- aria-describedby apunta a la lectura debajo de la cuadrícula, para que los lectores de pantalla escuchen el nombre del nivel en lenguaje simple después de cada movimiento ("$$$$ alta gama / Una especialidad"). Las coordenadas X/Y no se anuncian — al operador no le importa 0.347; le importa en qué nivel cae su posición.
- El rol es el botón por defecto — NO
role="slider", que implicaría un rango de un solo eje. Un control 2D con dos valores simultáneos no encaja en el modelo mental del patrón slider.
Dónde se publica
Código fuente
/tools/_shared/workshop/positioning-plotter.js — ~280 LOC. Exporta { tag, contextKeys, mount, serialize } según el contrato de widgets del Workshop Kit. Lee los seis atributos de configuración de ejes (+ variantes opcionales -es), renderiza la cuadrícula + botón + lectura, conecta los manejadores de arrastre con mouse y teclado.
Derivación del nombre de nivel: los cuartiles del eje X corresponden a data-x-low (X < 0.5) y data-x-high (X ≥ 0.5); lo mismo para Y. La lectura los une como "{nivel-Y} / {nivel-X}". El autor de la lección controla el vocabulario de la lectura eligiendo las cuatro cadenas de los extremos.