onSeatClick && onSeatClick(seat)} />;
};
// Bloknaam (sleephandvat) — gecentreerd op de header-rand, blijft rechtop.
const np = rotPoint(cols / 2, 0.5, cols, rows, rot);
// ---- Ronde tafel (gala) ----
if (block.kind === 'table') {
const D = g.w, box = D * cellPx, cx = box / 2, cy = box / 2;
const seatsAll = (block.rows || []).flatMap(r => (r.seats || []).filter(s => !s.aisle).map(s => ({ s, rowLabel: r.label })));
const N = Math.max(1, seatsAll.length);
const radiusPx = (D / 2 - 0.85) * cellPx;
return (
{ if (editable) { e.stopPropagation(); onSelectBlock && onSelectBlock(block.id); } }}
title={editable ? 'Sleep om de tafel te verplaatsen' : block.label}
style={{ position: 'absolute', left: cx, top: cy, transform: 'translate(-50%,-50%)', maxWidth: box * 0.6, textAlign: 'center',
fontSize: Math.max(8, Math.min(12, cellPx * 0.4)), fontWeight: 700, color: selected ? '#0f766e' : '#64748b',
cursor: editable ? 'grab' : 'default', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', zIndex: 2 }}>
{block.label}
{seatsAll.map((it, i) => {
const ang = -Math.PI / 2 + (i * 2 * Math.PI) / N;
const left = cx + radiusPx * Math.cos(ang) - cellPx / 2, top = cy + radiusPx * Math.sin(ang) - cellPx / 2;
return
{renderSeat(it.s, it.rowLabel)}
;
})}
);
}
return (
{/* rij-labels */}
{(block.rows || []).map((row, vi) => {
const p = place(0, HEADER + vi);
return
{row.label}
;
})}
{/* stoelen / gangpaden */}
{(block.rows || []).map((row, vi) => (row.seats || []).map((seat, ui) => {
const p = place(GUTTER + ui, HEADER + vi);
return
{seat.aisle
?
onAisleClick && onAisleClick(seat)} />
: renderSeat(seat, row.label)}
;
}))}
{/* bloknaam / sleephandvat */}
{ if (editable) { e.stopPropagation(); onSelectBlock && onSelectBlock(block.id); } }}
title={editable ? 'Sleep om de tribune te verplaatsen' : block.label}
style={{
position: 'absolute', left: np.x * cellPx, top: np.y * cellPx, transform: 'translate(-50%,-50%)',
maxWidth: Math.max(cols, rows) * cellPx, padding: '0 6px',
fontSize: Math.max(9, Math.min(13, cellPx * 0.42)), fontWeight: 700,
color: selected ? '#0f766e' : '#475569', cursor: editable ? 'grab' : 'default',
whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
display: 'flex', alignItems: 'center', gap: 5, zIndex: 2,
}}>
{editable && ⠿}
{block.label}
{(block.rows || []).length === 0 && (
Nog geen rijen
)}
);
}
// Officieel "rennend mannetje" — ISO 7010 vluchtweg-pictogram. Standaard naar rechts.
function RunningMan({ size, color, flip }) {
return (
);
}
// Richtingspijl (vierkante viewBox → schone 90°-rotatie). Standaard naar rechts.
function RouteArrow({ size, color, rot }) {
return (
);
}
// Kruis (EHBO / AED).
function CrossGlyph({ size, color }) {
const t = size * 0.28, o = (size - t) / 2;
return (
);
}
// Verzamelplaats — 4 pijlen naar het midden (ISO).
function AssemblyGlyph({ size, color }) {
return (
);
}
// Maatlijn (afmeting): lijn met eindstreepjes + tekst.
function DimGlyph({ w, h, color, label }) {
const horiz = w >= h;
return (
{label}
);
}
// ---- Marker (uitgang / richting / ruimte / maatlijn / techniek / tekst) -
function MarkerBox(props) {
const { g, cellPx, mode, selectedMarkerId, onSelectMarker, onMoveMarker } = props;
const m = g.marker;
const cfg = MARKERS[m.type] || MARKERS.label;
const editable = mode === 'edit';
const selected = editable && selectedMarkerId === m.id;
const { drag, handlers } = useDragMove(cellPx, { x: g.x, y: g.y },
(nx, ny) => onMoveMarker && onMoveMarker(m.id, nx, ny),
() => onSelectMarker && onSelectMarker(m.id),
editable);
const ox = g.x + (drag ? drag.dx : 0), oy = g.y + (drag ? drag.dy : 0);
const text = (m.text != null && m.text !== '') ? m.text : cfg.text;
const innerW = g.w * cellPx - 4, innerH = g.h * cellPx - 4;
const tall = innerH > innerW * 1.6; // smal+hoog → label verticaal
const fontSize = Math.max(8, Math.min(15, cellPx * 0.42));
const rot = m.rot || 0;
let content, boxStyle;
if (cfg.route) {
// Officieel vluchtroute-bord: rennend mannetje + richtingspijl, in veiligheidsgroen.
const manSize = Math.min(innerH - 4, innerW * 0.5);
const arrSize = Math.min(innerH - 6, innerW * 0.42);
boxStyle = { background: cfg.bg, borderRadius: 6, border: selected ? '2px solid #0f172a' : '1px solid rgba(0,0,0,.15)' };
content = (
);
} else if (cfg.man) {
// Nooduitgang/Uitgang met officieel pictogram + opschrift.
const manSize = Math.min(innerH - 4, innerW * 0.5, cellPx * 1.6);
boxStyle = { background: cfg.bg, borderRadius: 6, border: selected ? '2px solid #0f172a' : '1px solid rgba(0,0,0,.15)' };
content = tall ? (
{text}
) : (
{text}
);
} else if (cfg.safety) {
// Veiligheidsvoorziening: EHBO/AED (kruis), verzamelplaats (pijlen) of blusser/haspel.
const gly = Math.min(innerH - 4, innerW * 0.5, cellPx * 1.7);
boxStyle = { background: cfg.bg, borderRadius: 6, border: selected ? '2px solid #0f172a' : '1px solid rgba(0,0,0,.2)' };
content = (
{cfg.cross &&
}
{cfg.assembly &&
}
{text}
{ if (editable) { e.stopPropagation(); onSelectMarker && onSelectMarker(m.id); } }}
title={editable ? cfg.name + ' — sleep om te verplaatsen' : (text || cfg.name)}
style={{
position: 'absolute', left: ox * cellPx, top: oy * cellPx,
width: innerW, height: innerH, margin: 2,
display: 'flex', alignItems: 'center', justifyContent: 'center', textAlign: 'center',
cursor: editable ? 'grab' : 'default', boxShadow: drag ? '0 8px 24px rgba(0,0,0,.22)' : 'none',
zIndex: drag ? 50 : (selected ? 20 : 8), overflow: 'hidden', userSelect: 'none', ...boxStyle,
}}>
{content}
);
}
// ---- Podium -------------------------------------------------------------
function Stage(props) {
const { g, cellPx, mode, onMoveStage, onSelectStage, selected } = props;
const editable = mode === 'edit' && !g.virtual;
const { drag, handlers } = useDragMove(cellPx, { x: g.x, y: g.y },
(nx, ny) => onMoveStage && onMoveStage(nx, ny),
() => onSelectStage && onSelectStage(),
editable);
const ox = g.x + (drag ? drag.dx : 0), oy = g.y + (drag ? drag.dy : 0);
return (
{g.label || 'PODIUM'}
);
}
// ---- Staanplaatszone (verkoop per capaciteit) --------------------------
function StandingZone(props) {
const { g, cellPx, mode, selectedStandingId, onSelectStanding, onMoveStanding, standingAvail, onStandingClick, selectedQty } = props;
const z = g.zone;
const editable = mode === 'edit';
const selected = editable && selectedStandingId === z.id;
const { drag, handlers } = useDragMove(cellPx, { x: g.x, y: g.y },
(nx, ny) => onMoveStanding && onMoveStanding(z.id, nx, ny),
() => onSelectStanding && onSelectStanding(z.id), editable);
const ox = g.x + (drag ? drag.dx : 0), oy = g.y + (drag ? drag.dy : 0);
const a = standingAvail && standingAvail[z.id];
const free = a ? a.free : z.capacity;
const clickable = mode === 'select' && free > 0;
return (
{ if (editable) { e.stopPropagation(); onSelectStanding && onSelectStanding(z.id); } else if (clickable) { e.stopPropagation(); onStandingClick && onStandingClick(z.id); } }}
title={editable ? 'Staanplaatszone — sleep om te verplaatsen' : (z.name || 'Staanplaatsen')}
style={{
position: 'absolute', left: ox * cellPx, top: oy * cellPx, width: g.w * cellPx - 4, height: g.h * cellPx - 4, margin: 2,
background: 'repeating-linear-gradient(45deg,#fef3c7,#fef3c7 7px,#fde68a 7px,#fde68a 14px)',
border: selected ? '2px solid #0f172a' : '2px dashed #d97706', borderRadius: 8,
display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', textAlign: 'center', gap: 1,
cursor: editable ? 'grab' : (clickable ? 'pointer' : 'default'), color: '#92400e', userSelect: 'none', overflow: 'hidden',
boxShadow: drag ? '0 8px 24px rgba(0,0,0,.22)' : 'none', zIndex: drag ? 50 : (selected ? 20 : 7), padding: '0 6px',
}}>
🧍 {z.name || 'Staanplaatsen'}
{mode === 'edit' || !a ? `${z.capacity} plaatsen` : `${free} van ${a.capacity} vrij`}{selectedQty ? ` · ${selectedQty} gekozen` : ''}
{clickable && + klik om te kiezen}
);
}
// ---- Hoofd-plattegrond --------------------------------------------------
function FloorPlan(props) {
const {
layout, ranks, mode = 'select',
statusOf, selected, onSeatClick, onAisleClick,
selectedBlockId, onSelectBlock, onMoveBlock,
selectedMarkerId, onSelectMarker, onMoveMarker,
onMoveStage, onSelectStage, stageSelected,
selectedStandingId, onSelectStanding, onMoveStanding, standingAvail, onStandingClick, standingQty,
onBackgroundClick, minCell = CELL_MIN, maxCell = CELL_MAX,
} = props;
const sel = selected || new Set();
const wrapRef = React.useRef(null);
const [width, setWidth] = React.useState(0);
React.useEffect(() => {
const el = wrapRef.current; if (!el) return;
const measure = () => setWidth(el.clientWidth);
measure();
let ro;
if (typeof ResizeObserver !== 'undefined') { ro = new ResizeObserver(measure); ro.observe(el); }
else window.addEventListener('resize', measure);
return () => { if (ro) ro.disconnect(); else window.removeEventListener('resize', measure); };
}, []);
const g = geometry(layout);
const avail = Math.max(0, width - 4);
let cellPx = avail > 0 ? Math.floor(avail / g.cols) : maxCell;
cellPx = Math.max(minCell, Math.min(maxCell, cellPx));
const canvasW = g.cols * cellPx, canvasH = g.rows * cellPx;
const showTech = mode !== 'select'; // techniek is enkel organisatie-info
return (
onBackgroundClick && onBackgroundClick()}
style={{ position: 'relative', width: canvasW, height: canvasH, margin: '0 auto',
backgroundImage: mode === 'edit'
? `linear-gradient(rgba(148,163,184,.10) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,184,.10) 1px, transparent 1px)`
: 'none',
backgroundSize: `${cellPx}px ${cellPx}px` }}>
{g.blocks.map(b => (
))}
{g.markers.map(m => (
(m.marker.type === 'tech' && !showTech) ? null :
))}
{g.standing.map(z => (
))}
);
}
// ---- Legende ------------------------------------------------------------
function SeatMapLegend({ ranks, showStatuses = true }) {
const dot = (color, label, extra) => (
{label}
);
return (
{(ranks || []).map(r => dot(r.color, `${r.label} · €${(Number(r.price) || 0).toFixed(2)}`))}
{showStatuses && dot('#9ca3af', 'Gereserveerd')}
{showStatuses && dot('#1f2937', 'Verkocht')}
{showStatuses && dot('#0ea5a4', 'Jouw keuze')}
);
}
window.LM_SEATMAP = {
FloorPlan, SeatMapLegend, rankColor,
geometry, blockFootprint, rectsOverlap, allRects, collides, MARKERS, capacity,
};
})();