tickera-angular-components 0.0.1-dev.32 → 0.0.1-dev.33

package/fesm2022/tickera-angular-components.mjs

@@ -480,6 +480,41 @@ var GiftBondStatus;
     GiftBondStatus["CONSUMED"] = "CONSUMED";
 })(GiftBondStatus || (GiftBondStatus = {}));
 
+const TICKET_ELEMENT_TYPES = [
+    RoomMapElementType.SEAT_BLOCK,
+    RoomMapElementType.TABLE,
+    RoomMapElementType.ZONE,
+];
+const DEFAULT_STAGE_CONFIG = {
+    width: 800,
+    height: 600,
+    draggable: true,
+    scaleX: 1,
+    scaleY: 1,
+    x: 0,
+    y: 0,
+};
+const TICKET_STATUS_COLORS = {
+    [PerformanceTicketStatus.AVAILABLE]: '#22C55E',
+    [PerformanceTicketStatus.RESERVED]: '#EAB308',
+    [PerformanceTicketStatus.SOLD]: '#EF4444',
+    [PerformanceTicketStatus.BLOCKED]: '#6B7280',
+};
+const TICKET_STATUS_FILLS = {
+    [PerformanceTicketStatus.AVAILABLE]: '#DCFCE7',
+    [PerformanceTicketStatus.RESERVED]: '#FEF08A',
+    [PerformanceTicketStatus.SOLD]: '#FECACA',
+    [PerformanceTicketStatus.BLOCKED]: '#E5E7EB',
+};
+const TICKET_STATUS_LABELS = {
+    [PerformanceTicketStatus.AVAILABLE]: 'Disponible',
+    [PerformanceTicketStatus.RESERVED]: 'Reservado',
+    [PerformanceTicketStatus.SOLD]: 'Vendido',
+    [PerformanceTicketStatus.BLOCKED]: 'Bloqueado',
+};
+const TICKET_MAP_GRID_SIZE = 30;
+const TICKET_MAP_TITLE_HEIGHT = 30;
+
 var OrderItemType;
 (function (OrderItemType) {
     OrderItemType["TICKET"] = "TICKET";
@@ -497,6 +532,13 @@ var OrderStatus;
     OrderStatus["REFUNDED"] = "refunded";
 })(OrderStatus || (OrderStatus = {}));
 
+var SelectedDiscountCardType;
+(function (SelectedDiscountCardType) {
+    SelectedDiscountCardType["COUPON"] = "COUPON";
+    SelectedDiscountCardType["CORPORATE_BOND"] = "CORPORATE_BOND";
+    SelectedDiscountCardType["GIFT_BOND"] = "GIFT_BOND";
+})(SelectedDiscountCardType || (SelectedDiscountCardType = {}));
+
 const getCustomerFullname = (customer) => {
     return `${customer.first_name || ''} ${customer.last_name || ''}`.trim();
 };
@@ -577,6 +619,1145 @@ const formatCitiesResponseToSelect = (res) => {
     }));
 };
 
+function drawRoundedRect(con, shape, x, y, width, height, cornerRadius) {
+    con.beginPath();
+    con.moveTo(x + cornerRadius, y);
+    con.lineTo(x + width - cornerRadius, y);
+    con.quadraticCurveTo(x + width, y, x + width, y + cornerRadius);
+    con.lineTo(x + width, y + height - cornerRadius);
+    con.quadraticCurveTo(x + width, y + height, x + width - cornerRadius, y + height);
+    con.lineTo(x + cornerRadius, y + height);
+    con.quadraticCurveTo(x, y + height, x, y + height - cornerRadius);
+    con.lineTo(x, y + cornerRadius);
+    con.quadraticCurveTo(x, y, x + cornerRadius, y);
+    con.closePath();
+    con.fillStrokeShape(shape);
+}
+
+const generateExitScene = (con, shape) => {
+    const w = shape.width();
+    const h = shape.height();
+    const padding = 4;
+    con.save();
+    const exitX = padding;
+    const exitY = padding;
+    const exitWidth = w - padding * 2;
+    const exitHeight = h - padding * 2;
+    const cornerRadius = Math.min(exitWidth, exitHeight) * 0.2;
+    drawRoundedRect(con, shape, exitX, exitY, exitWidth, exitHeight, cornerRadius);
+    // Stage text - check if parent has element_name, otherwise use "ESCENARIO"
+    // const fontSize = Math.min(w, h) * 0.35;
+    con.font = `11px Arial`;
+    con.fillStyle = '#333333';
+    con.textAlign = 'center';
+    con.textBaseline = 'middle';
+    const centerX = w / 2;
+    const centerY = h / 2;
+    // Get parent element and check for element_name
+    const stageText = '🚪' + (shape?.attrs?.element_name || 'Salida');
+    con.fillText(stageText, centerX, centerY);
+    con.restore();
+};
+
+const generateHallwayScene = (con, shape) => {
+    const w = shape.width();
+    const h = shape.height();
+    const padding = 4;
+    con.save();
+    const exitX = padding;
+    const exitY = padding;
+    const exitWidth = w - padding * 2;
+    const exitHeight = h - padding * 2;
+    const cornerRadius = Math.min(exitWidth, exitHeight) * 0.2;
+    drawRoundedRect(con, shape, exitX, exitY, exitWidth, exitHeight, cornerRadius);
+    // Stage text - check if parent has element_name, otherwise use "ESCENARIO"
+    // const fontSize = Math.min(w, h) * 0.35;
+    con.font = `11px Arial`;
+    con.fillStyle = '#333333';
+    con.textAlign = 'center';
+    con.textBaseline = 'middle';
+    const centerX = w / 2;
+    const centerY = h / 2;
+    // Get parent element and check for element_name
+    const stageText = '🚶🏽' + (shape?.attrs?.element_name || 'Pasillo');
+    con.fillText(stageText, centerX, centerY);
+    con.restore();
+};
+
+const generateProductionAreaScene = (con, shape) => {
+    const w = shape.width();
+    const h = shape.height();
+    const padding = 4;
+    con.save();
+    const exitX = padding;
+    const exitY = padding;
+    const exitWidth = w - padding * 2;
+    const exitHeight = h - padding * 2;
+    const cornerRadius = Math.min(exitWidth, exitHeight) * 0.2;
+    drawRoundedRect(con, shape, exitX, exitY, exitWidth, exitHeight, cornerRadius);
+    // Stage text - check if parent has element_name, otherwise use "ESCENARIO"
+    // const fontSize = Math.min(w, h) * 0.35;
+    con.font = `11px Arial`;
+    con.fillStyle = '#333333';
+    con.textAlign = 'center';
+    con.textBaseline = 'middle';
+    const centerX = w / 2;
+    const centerY = h / 2;
+    // Get parent element and check for element_name
+    const stageText = '🛠️' + (shape?.attrs?.element_name || 'Área de producción');
+    con.fillText(stageText, centerX, centerY);
+    con.restore();
+};
+
+function tintColor(hex, amount = 0.7) {
+    const cleanHex = hex.replace('#', '');
+    const r = parseInt(cleanHex.substring(0, 2), 16);
+    const g = parseInt(cleanHex.substring(2, 4), 16);
+    const b = parseInt(cleanHex.substring(4, 6), 16);
+    const tintedR = Math.round(r + (255 - r) * amount);
+    const tintedG = Math.round(g + (255 - g) * amount);
+    const tintedB = Math.round(b + (255 - b) * amount);
+    return `#${tintedR.toString(16).padStart(2, '0')}${tintedG.toString(16).padStart(2, '0')}${tintedB.toString(16).padStart(2, '0')}`;
+}
+
+const drawChairIcon$1 = (con, cx, cy, size) => {
+    con.beginPath();
+    const backWidth = size * 0.7;
+    const backHeight = size * 0.6;
+    const backX = cx - backWidth / 2;
+    const backY = cy - backHeight / 2 - size * 0.1;
+    con.moveTo(backX + backWidth * 0.2, backY);
+    con.lineTo(backX + backWidth * 0.8, backY);
+    con.quadraticCurveTo(backX + backWidth, backY, backX + backWidth, backY + backHeight * 0.2);
+    con.lineTo(backX + backWidth, backY + backHeight * 0.8);
+    con.quadraticCurveTo(backX + backWidth, backY + backHeight, backX + backWidth * 0.8, backY + backHeight);
+    con.lineTo(backX + backWidth * 0.2, backY + backHeight);
+    con.quadraticCurveTo(backX, backY + backHeight, backX, backY + backHeight * 0.8);
+    con.lineTo(backX, backY + backHeight * 0.2);
+    con.quadraticCurveTo(backX, backY, backX + backWidth * 0.2, backY);
+    const chairSeatWidth = size * 0.8;
+    const chairSeatHeight = size * 0.3;
+    const seatX = cx - chairSeatWidth / 2;
+    const seatY = cy + backHeight * 0.3;
+    con.moveTo(seatX, seatY);
+    con.lineTo(seatX + chairSeatWidth, seatY);
+    con.lineTo(seatX + chairSeatWidth * 0.9, seatY + chairSeatHeight);
+    con.lineTo(seatX + chairSeatWidth * 0.1, seatY + chairSeatHeight);
+    con.closePath();
+    const legWidth = size * 0.1;
+    const legHeight = size * 0.2;
+    con.moveTo(seatX + chairSeatWidth * 0.1, seatY + chairSeatHeight);
+    con.lineTo(seatX + chairSeatWidth * 0.1 + legWidth, seatY + chairSeatHeight);
+    con.lineTo(seatX + chairSeatWidth * 0.1 + legWidth, seatY + chairSeatHeight + legHeight);
+    con.lineTo(seatX + chairSeatWidth * 0.1, seatY + chairSeatHeight + legHeight);
+    con.moveTo(seatX + chairSeatWidth * 0.9 - legWidth, seatY + chairSeatHeight);
+    con.lineTo(seatX + chairSeatWidth * 0.9, seatY + chairSeatHeight);
+    con.lineTo(seatX + chairSeatWidth * 0.9, seatY + chairSeatHeight + legHeight);
+    con.lineTo(seatX + chairSeatWidth * 0.9 - legWidth, seatY + chairSeatHeight + legHeight);
+    con.closePath();
+};
+
+const drawHappyFace = (con, cx, cy, size) => {
+    const radius = size * 0.45;
+    con.beginPath();
+    con.arc(cx, cy, radius, 0, Math.PI * 2);
+    con.closePath();
+    con.fillStyle = '#DCFCE7';
+    con.fill();
+    con.strokeStyle = '#166534';
+    con.lineWidth = 2;
+    con.stroke();
+    const eyeR = radius * 0.12;
+    const eyeOffX = radius * 0.3;
+    const eyeOffY = radius * 0.15;
+    con.beginPath();
+    con.arc(cx - eyeOffX, cy - eyeOffY, eyeR, 0, Math.PI * 2);
+    con.closePath();
+    con.fillStyle = '#166534';
+    con.fill();
+    con.beginPath();
+    con.arc(cx + eyeOffX, cy - eyeOffY, eyeR, 0, Math.PI * 2);
+    con.closePath();
+    con.fill();
+    con.beginPath();
+    con.moveTo(cx - radius * 0.35, cy + radius * 0.05);
+    con.quadraticCurveTo(cx, cy + radius * 0.4, cx + radius * 0.35, cy + radius * 0.05);
+    con.strokeStyle = '#166534';
+    con.lineWidth = 2;
+    con.stroke();
+};
+
+const drawWheelchairIcon = (con, shape, cx, cy, size, fillColor = '#DBEAFE', strokeColor = '#60A5FA') => {
+    const reactSize = size * 0.75;
+    const x = cx - size / 2 + size * 0.1;
+    const y = cy - size / 2 + size * 0.1833;
+    const origFill = shape.getAttr('fill');
+    const origStroke = shape.getAttr('stroke');
+    shape.setAttr('fill', fillColor);
+    shape.setAttr('stroke', strokeColor);
+    con.beginPath();
+    con.rect(x, y, reactSize, reactSize);
+    con.closePath();
+    con.fillStrokeShape(shape);
+    shape.setAttr('fill', origFill);
+    shape.setAttr('stroke', origStroke);
+    con.font = `${size * 0.6}px serif`;
+    con.textAlign = 'center';
+    con.textBaseline = 'middle';
+    con.fillText('♿', cx + size * 0.0233, cy + size * 0.1417);
+};
+
+const numberToLetter$1 = (num) => {
+    if (num < 0)
+        return 'A';
+    let result = '';
+    let n = num;
+    while (n >= 0) {
+        result = String.fromCharCode(65 + (n % 26)) + result;
+        n = Math.floor(n / 26) - 1;
+    }
+    return result;
+};
+
+const getItemTypeIcon = (ticket) => {
+    if ([RoomMapElementType.SEAT_BLOCK, RoomMapElementType.TABLE].includes(ticket.element_type)) {
+        return ticket.is_accessible ? '♿️' : '🪑';
+    }
+    if (ticket.element_type === RoomMapElementType.ZONE) {
+        return '🗺️';
+    }
+    return '🛒';
+};
+
+const generateSeatBlockTicketScene = (con, shape, numerationConfig, ticketStatusMap) => {
+    const w = shape.width();
+    const h = shape.height();
+    const seatSize = TICKET_MAP_GRID_SIZE;
+    const chairScale = 0.8;
+    const elementName = shape?.attrs?.element_name || 'Asientos';
+    const showElementName = shape?.attrs?.show_element_name ?? true;
+    const seatsData = shape?.attrs?.seats;
+    const hasTitle = !!(elementName && showElementName);
+    const chairsStartY = hasTitle ? TICKET_MAP_GRID_SIZE : 0;
+    const cols = Math.floor(w / seatSize);
+    const rows = Math.floor((h - chairsStartY) / seatSize);
+    const config = numerationConfig || {
+        start_row_letter: 'A',
+        row_order: 'TOP_TO_BOTTOM',
+        start_column_number: 1,
+        column_order: 'LEFT_TO_RIGHT',
+    };
+    const startRowLetter = config?.start_row_letter?.toUpperCase() || 'A';
+    const startRowNum = startRowLetter.charCodeAt(0) - 65;
+    const origFill = shape.getAttr('fill');
+    const origStroke = shape.getAttr('stroke');
+    if (hasTitle) {
+        con.save();
+        const textFont = `bold 10px Arial`;
+        con.font = textFont;
+        const textWidth = con.measureText(elementName).width;
+        const paddingX = 10;
+        const containerHeight = 18;
+        const containerWidth = textWidth + paddingX * 2;
+        const containerX = (w - containerWidth) / 2;
+        const containerY = (TICKET_MAP_GRID_SIZE - containerHeight) / 2;
+        const lineY = TICKET_MAP_GRID_SIZE;
+        const strokeColor = shape.getAttr('stroke') || '#999';
+        con.beginPath();
+        con.moveTo(0, lineY);
+        con.lineTo(w, lineY);
+        con.strokeStyle = strokeColor;
+        con.lineWidth = 1;
+        con.stroke();
+        con.beginPath();
+        con.moveTo(containerX + 4, containerY);
+        con.lineTo(containerX + containerWidth - 4, containerY);
+        con.quadraticCurveTo(containerX + containerWidth, containerY, containerX + containerWidth, containerY + 4);
+        con.lineTo(containerX + containerWidth, containerY + containerHeight - 4);
+        con.quadraticCurveTo(containerX + containerWidth, containerY + containerHeight, containerX + containerWidth - 4, containerY + containerHeight);
+        con.lineTo(containerX + 4, containerY + containerHeight);
+        con.quadraticCurveTo(containerX, containerY + containerHeight, containerX, containerY + containerHeight - 4);
+        con.lineTo(containerX, containerY + 4);
+        con.quadraticCurveTo(containerX, containerY, containerX + 4, containerY);
+        con.closePath();
+        con.fillStrokeShape(shape);
+        con.font = textFont;
+        con.fillStyle = strokeColor;
+        con.textAlign = 'center';
+        con.textBaseline = 'middle';
+        con.fillText(elementName, w / 2, containerY + containerHeight / 2);
+        con.restore();
+    }
+    for (let x = 0; x < w; x += seatSize) {
+        for (let y = chairsStartY; y < h; y += seatSize) {
+            const colIndex = Math.floor(x / seatSize);
+            const rowIndex = Math.floor((y - chairsStartY) / seatSize);
+            let actualRowIndex = rowIndex;
+            if (config.row_order === 'BOTTOM_TO_TOP') {
+                actualRowIndex = rows - 1 - rowIndex;
+            }
+            let actualColIndex = colIndex;
+            if (config.column_order === 'RIGHT_TO_LEFT') {
+                actualColIndex = cols - 1 - colIndex;
+            }
+            const rowLetter = numberToLetter$1(startRowNum + actualRowIndex);
+            const colNumber = Number(config.start_column_number) + Number(actualColIndex);
+            const seatNumber = `${rowLetter}${colNumber}`;
+            const centerX = x + seatSize / 2 + 1;
+            const centerY = y + seatSize / 2 - 2;
+            const size = seatSize * chairScale;
+            const seatState = seatsData?.[rowIndex]?.[colIndex];
+            if (seatState?.is_non_existent)
+                continue;
+            con.save();
+            const selectedNumerations = shape.getAttr('selectedNumerations');
+            const isSelected = selectedNumerations?.has(seatNumber);
+            const ticketStatus = ticketStatusMap?.get(seatNumber);
+            const isLocked = ticketStatus != null && ticketStatus !== PerformanceTicketStatus.AVAILABLE;
+            if (isSelected) {
+                drawHappyFace(con, x + seatSize / 2, y + seatSize / 2, size);
+            }
+            else if (isLocked && seatState?.is_accessible) {
+                drawWheelchairIcon(con, shape, centerX, centerY, size, TICKET_STATUS_FILLS[ticketStatus], TICKET_STATUS_COLORS[ticketStatus]);
+            }
+            else if (isLocked) {
+                shape.setAttr('fill', TICKET_STATUS_FILLS[ticketStatus]);
+                shape.setAttr('stroke', TICKET_STATUS_COLORS[ticketStatus]);
+                drawChairIcon$1(con, centerX, centerY, size);
+                con.fillStrokeShape(shape);
+                shape.setAttr('fill', origFill);
+                shape.setAttr('stroke', origStroke);
+                con.fillStyle = '#333333';
+                con.font = `${size * 0.3}px Arial`;
+                con.textAlign = 'center';
+                con.textBaseline = 'middle';
+                con.fillText(seatNumber, centerX, centerY - 1);
+            }
+            else if (seatState?.is_accessible) {
+                drawWheelchairIcon(con, shape, centerX, centerY, size);
+            }
+            else {
+                drawChairIcon$1(con, centerX, centerY, size);
+                con.fillStrokeShape(shape);
+                shape.setAttr('fill', origFill);
+                shape.setAttr('stroke', origStroke);
+                con.fillStyle = '#333333';
+                con.font = `${size * 0.3}px Arial`;
+                con.textAlign = 'center';
+                con.textBaseline = 'middle';
+                con.fillText(seatNumber, centerX, centerY - 1);
+            }
+            con.restore();
+        }
+    }
+    shape.setAttr('fill', origFill);
+    shape.setAttr('stroke', origStroke);
+};
+
+const generateTableTicketScene = (con, shape, chairTicketStatuses, tableSeats) => {
+    const w = shape.width();
+    const h = shape.height();
+    const fillColor = shape.fill();
+    const strokeColor = shape.stroke();
+    const totalCapacity = shape?.attrs?.total_capacity ?? 0;
+    const zoneText = shape?.attrs?.element_name || 'Mesa';
+    const cx = w / 2;
+    const cy = h / 2;
+    const chairRadius = Math.min(w, h) * 0.1;
+    const gap = chairRadius * 0.4;
+    const tableRadius = Math.min(w, h) / 2 - chairRadius * 2 - gap;
+    con.save();
+    if (totalCapacity > 0) {
+        const orbitRadius = tableRadius + gap + chairRadius;
+        const selectedNumerations = shape.getAttr('selectedNumerations');
+        for (let i = 0; i < totalCapacity; i++) {
+            const seatState = tableSeats?.[0]?.[i];
+            if (seatState?.is_non_existent) {
+                continue;
+            }
+            const seatKey = `S${i + 1}`;
+            const isSelected = selectedNumerations?.has(seatKey);
+            const angle = (2 * Math.PI * i) / totalCapacity - Math.PI / 2;
+            const scx = cx + orbitRadius * Math.cos(angle);
+            const scy = cy + orbitRadius * Math.sin(angle);
+            const chairStatus = chairTicketStatuses?.[i];
+            const isLocked = chairStatus != null && chairStatus !== PerformanceTicketStatus.AVAILABLE;
+            if (isSelected) {
+                drawHappyFace(con, scx, scy, chairRadius * 2);
+            }
+            else if (isLocked && seatState?.is_accessible) {
+                drawWheelchairIcon(con, shape, scx, scy, chairRadius * 2, TICKET_STATUS_FILLS[chairStatus], TICKET_STATUS_COLORS[chairStatus]);
+            }
+            else if (isLocked) {
+                const origFill = shape.getAttr('fill');
+                const origStroke = shape.getAttr('stroke');
+                shape.setAttr('fill', TICKET_STATUS_FILLS[PerformanceTicketStatus.BLOCKED]);
+                shape.setAttr('stroke', TICKET_STATUS_COLORS[PerformanceTicketStatus.BLOCKED]);
+                con.beginPath();
+                con.arc(scx, scy, chairRadius, 0, Math.PI * 2);
+                con.closePath();
+                con.lineWidth = Math.max(1, chairRadius * 0.15);
+                con.stroke();
+                con.fillStrokeShape(shape);
+                shape.setAttr('fill', origFill);
+                shape.setAttr('stroke', origStroke);
+            }
+            else if (seatState?.is_accessible) {
+                drawWheelchairIcon(con, shape, scx, scy, chairRadius * 2);
+            }
+            else {
+                con.beginPath();
+                con.arc(scx, scy, chairRadius, 0, Math.PI * 2);
+                con.closePath();
+                con.lineWidth = Math.max(1, chairRadius * 0.15);
+                con.stroke();
+                con.fillStrokeShape(shape);
+            }
+        }
+    }
+    con.beginPath();
+    con.arc(cx, cy, tableRadius, 0, Math.PI * 2);
+    con.closePath();
+    con.fillStrokeShape(shape);
+    const fontSize = tableRadius * 0.45;
+    con.font = `${fontSize}px Arial`;
+    con.fillStyle = strokeColor;
+    con.textAlign = 'center';
+    con.textBaseline = 'middle';
+    con.fillText(zoneText, cx, cy);
+    con.restore();
+};
+
+const KONVA_SHAPE_MAPPINGS = {
+    [RoomMapElementType.STAGE]: {
+        config: {
+            width: TICKET_MAP_GRID_SIZE * 10,
+            height: TICKET_MAP_GRID_SIZE * 2,
+            fill: '#9C27B0',
+            stroke: '#731d82',
+            strokeWidth: 1,
+            draggable: true,
+            perfectDrawEnabled: false,
+            sceneFunc: generateStageScene,
+        },
+        layer: 'background',
+    },
+    [RoomMapElementType.SEAT_BLOCK]: {
+        config: {
+            width: TICKET_MAP_GRID_SIZE * 5,
+            height: TICKET_MAP_GRID_SIZE,
+            fill: '#ffffff',
+            stroke: '#909090',
+            strokeWidth: 1,
+            draggable: true,
+            perfectDrawEnabled: false,
+            sceneFunc: generateSeatBlockScene,
+        },
+        layer: 'elements',
+    },
+    [RoomMapElementType.TABLE]: {
+        config: {
+            width: TICKET_MAP_GRID_SIZE * 3,
+            height: TICKET_MAP_GRID_SIZE * 2,
+            fill: '#ffffff',
+            stroke: '#909090',
+            strokeWidth: 2,
+            cornerRadius: 5,
+            draggable: true,
+            perfectDrawEnabled: false,
+            sceneFunc: generateTableScene,
+        },
+        layer: 'elements',
+    },
+    [RoomMapElementType.ZONE]: {
+        config: {
+            width: TICKET_MAP_GRID_SIZE * 10,
+            height: TICKET_MAP_GRID_SIZE * 3,
+            fill: '#ffffff',
+            stroke: '#909090',
+            strokeWidth: 1,
+            cornerRadius: 2,
+            draggable: true,
+            opacity: 1,
+            perfectDrawEnabled: false,
+            sceneFunc: generateZoneScene,
+        },
+        layer: 'background',
+    },
+    [RoomMapElementType.EXIT]: {
+        config: {
+            width: TICKET_MAP_GRID_SIZE * 3,
+            height: TICKET_MAP_GRID_SIZE,
+            fill: '#efefef',
+            stroke: '#aaaaaa',
+            strokeWidth: 1,
+            draggable: true,
+            perfectDrawEnabled: false,
+            sceneFunc: generateExitScene,
+        },
+        layer: 'foreground',
+    },
+    [RoomMapElementType.PRODUCTION_AREA]: {
+        config: {
+            width: TICKET_MAP_GRID_SIZE * 4,
+            height: TICKET_MAP_GRID_SIZE,
+            fill: '#efefef',
+            stroke: '#aaaaaa',
+            strokeWidth: 1,
+            draggable: true,
+            perfectDrawEnabled: false,
+            sceneFunc: generateProductionAreaScene,
+        },
+        layer: 'background',
+    },
+    [RoomMapElementType.UNAVAILABLE_SPACE]: {
+        config: {
+            width: TICKET_MAP_GRID_SIZE * 4,
+            height: TICKET_MAP_GRID_SIZE,
+            fill: '#efefef',
+            stroke: '#aaaaaa',
+            strokeWidth: 1,
+            draggable: true,
+            perfectDrawEnabled: false,
+            sceneFunc: generateUnavailableSpaceScene,
+        },
+        layer: 'background',
+    },
+    [RoomMapElementType.STAIR]: {
+        config: {
+            width: TICKET_MAP_GRID_SIZE * 3,
+            height: TICKET_MAP_GRID_SIZE,
+            fill: '#efefef',
+            stroke: '#aaaaaa',
+            strokeWidth: 1,
+            draggable: true,
+            perfectDrawEnabled: false,
+            sceneFunc: generateStairScene,
+        },
+        layer: 'background',
+    },
+    [RoomMapElementType.HALLWAY]: {
+        config: {
+            width: TICKET_MAP_GRID_SIZE * 3,
+            height: TICKET_MAP_GRID_SIZE,
+            fill: '#efefef',
+            stroke: '#aaaaaa',
+            strokeWidth: 1,
+            draggable: true,
+            perfectDrawEnabled: false,
+            sceneFunc: generateHallwayScene,
+        },
+        layer: 'background',
+    },
+};
+
+function buildSeatLabel(rowIndex, colIndex, rows, cols, config) {
+    let actualRowIndex = rowIndex;
+    if (config.row_order === 'BOTTOM_TO_TOP') {
+        actualRowIndex = rows - 1 - rowIndex;
+    }
+    let actualColIndex = colIndex;
+    if (config.column_order === 'RIGHT_TO_LEFT') {
+        actualColIndex = cols - 1 - colIndex;
+    }
+    const startRowNum = (config.start_row_letter?.toUpperCase() || 'A').charCodeAt(0) - 65;
+    const rowLetter = numberToLetter$1(startRowNum + actualRowIndex);
+    const colNumber = Number(config.start_column_number) + Number(actualColIndex);
+    return `${rowLetter}${colNumber}`;
+}
+function buildSeatPositions(element) {
+    const config = element.numeration_config || {
+        start_row_letter: 'A',
+        row_order: 'TOP_TO_BOTTOM',
+        start_column_number: 1,
+        column_order: 'LEFT_TO_RIGHT',
+    };
+    const w = element.konva_shape?.config?.width || 300;
+    const h = element.konva_shape?.config?.height || 300;
+    const hasTitle = !!(element.element_name && element.show_element_name !== false);
+    const chairsStartY = hasTitle ? TICKET_MAP_TITLE_HEIGHT : 0;
+    const cols = Math.floor(w / TICKET_MAP_GRID_SIZE);
+    const rows = Math.floor((h - chairsStartY) / TICKET_MAP_GRID_SIZE);
+    const positions = [];
+    for (let rowIndex = 0; rowIndex < rows; rowIndex++) {
+        const row = [];
+        for (let colIndex = 0; colIndex < cols; colIndex++) {
+            const seatLabel = buildSeatLabel(rowIndex, colIndex, rows, cols, config);
+            const seatState = element.seats?.[rowIndex]?.[colIndex];
+            if (seatState?.is_non_existent) {
+                row.push({ rowIndex, colIndex, seatLabel });
+                continue;
+            }
+            row.push({ rowIndex, colIndex, seatLabel });
+        }
+        positions.push(row);
+    }
+    return positions;
+}
+function buildChairPositions(element) {
+    const w = element.konva_shape?.config?.width || 150;
+    const h = element.konva_shape?.config?.height || 150;
+    const totalCapacity = element.total_capacity || 0;
+    const chairRadius = Math.min(w, h) * 0.1;
+    const gap = chairRadius * 0.4;
+    const tableRadius = Math.min(w, h) / 2 - chairRadius * 2 - gap;
+    const cx = w / 2;
+    const cy = h / 2;
+    const positions = [];
+    if (totalCapacity > 0) {
+        const orbitRadius = tableRadius + gap + chairRadius;
+        for (let i = 0; i < totalCapacity; i++) {
+            const angle = (2 * Math.PI * i) / totalCapacity - Math.PI / 2;
+            const scx = cx + orbitRadius * Math.cos(angle);
+            const scy = cy + orbitRadius * Math.sin(angle);
+            positions.push({ index: i, angle, x: scx, y: scy });
+        }
+    }
+    return positions;
+}
+function processElementsToRenderData(elements, tickets, priceZones) {
+    const ticketByElement = new Map();
+    for (const ticket of tickets) {
+        const existing = ticketByElement.get(ticket.room_map_element_id) || [];
+        existing.push(ticket);
+        ticketByElement.set(ticket.room_map_element_id, existing);
+    }
+    const result = [];
+    for (const element of elements) {
+        if (element.id == null)
+            continue;
+        const elementTickets = ticketByElement.get(element.id) || [];
+        const elementBaseConfig = KONVA_SHAPE_MAPPINGS[element.type];
+        let overrideFill;
+        let overrideStroke;
+        if (element.price_zone_id != null && priceZones) {
+            const priceZone = priceZones.find((pz) => pz.id === element.price_zone_id);
+            if (priceZone?.color) {
+                overrideStroke = priceZone.color;
+                overrideFill = tintColor(priceZone.color);
+            }
+        }
+        let shapeConfig = {
+            ...element?.konva_shape?.config,
+            draggable: false,
+            ...(overrideFill ? { fill: overrideFill } : {}),
+            ...(overrideStroke ? { stroke: overrideStroke } : {}),
+            element_name: element.element_name || element.name,
+            show_element_name: element.show_element_name ?? true,
+            total_capacity: element.total_capacity,
+        };
+        const ticketByNumeration = new Map();
+        for (const ticket of elementTickets) {
+            if (ticket.seat_numeration != null) {
+                ticketByNumeration.set(ticket.seat_numeration, ticket);
+            }
+        }
+        let seatPositions;
+        let chairPositions;
+        if (element.type === RoomMapElementType.SEAT_BLOCK) {
+            seatPositions = buildSeatPositions(element);
+            const ticketStatusMap = new Map();
+            for (const [numeration, ticket] of ticketByNumeration) {
+                ticketStatusMap.set(numeration, ticket.status);
+            }
+            shapeConfig = {
+                ...shapeConfig,
+                name: String(element.id),
+                sceneFunc: (con, shape) => {
+                    generateSeatBlockTicketScene(con, shape, element.numeration_config, ticketStatusMap);
+                },
+                seats: element.seats,
+            };
+        }
+        if (element.type === RoomMapElementType.TABLE) {
+            chairPositions = buildChairPositions(element);
+            const chairStatuses = [];
+            for (let i = 0; i < (element.total_capacity || 0); i++) {
+                const key = `S${i + 1}`;
+                const ticket = ticketByNumeration.get(key);
+                chairStatuses.push(ticket?.status ?? PerformanceTicketStatus.AVAILABLE);
+            }
+            shapeConfig = {
+                ...shapeConfig,
+                name: String(element.id),
+                sceneFunc: (con, shape) => {
+                    generateTableTicketScene(con, shape, chairStatuses, element.seats);
+                },
+                seats: element.seats,
+            };
+        }
+        if (![RoomMapElementType.SEAT_BLOCK, RoomMapElementType.TABLE].includes(element.type)) {
+            const defaultSceneFunc = elementBaseConfig?.config?.sceneFunc;
+            if (defaultSceneFunc && !shapeConfig['sceneFunc']) {
+                shapeConfig['sceneFunc'] = defaultSceneFunc;
+            }
+        }
+        let elementName = element.name ?? '';
+        if (!!element.element_name) {
+            elementName += `: ${element.element_name}`;
+        }
+        result.push({
+            elementId: element.id,
+            hallFloorId: element.hall_floor_id ?? null,
+            type: element.type,
+            shapeConfig,
+            tickets: elementTickets,
+            ticketByNumeration,
+            elementName,
+            seatPositions,
+            chairPositions,
+            zoneCapacity: element.total_capacity,
+        });
+    }
+    return result;
+}
+function findTicketAtPosition(renderData, relX, relY) {
+    if (renderData.type === RoomMapElementType.SEAT_BLOCK && renderData.seatPositions) {
+        const config = renderData.shapeConfig;
+        const w = config['width'] || 300;
+        const hasTitle = !!(renderData.elementName && config['show_element_name'] !== false);
+        const chairsStartY = hasTitle ? TICKET_MAP_TITLE_HEIGHT : 0;
+        const col = Math.floor(relX / TICKET_MAP_GRID_SIZE);
+        const row = Math.floor((relY - chairsStartY) / TICKET_MAP_GRID_SIZE);
+        if (col < 0 ||
+            row < 0 ||
+            row >= renderData.seatPositions.length ||
+            col >= (renderData.seatPositions[0]?.length || 0)) {
+            return null;
+        }
+        const seat = renderData.seatPositions[row]?.[col];
+        if (!seat)
+            return null;
+        const seatState = renderData.shapeConfig['seats']?.[row]?.[col];
+        if (seatState?.is_non_existent)
+            return null;
+        return renderData.ticketByNumeration.get(seat.seatLabel) || null;
+    }
+    if (renderData.type === RoomMapElementType.TABLE && renderData.chairPositions) {
+        for (const chair of renderData.chairPositions) {
+            const seatState = renderData.shapeConfig['seats']?.[0]?.[chair.index];
+            if (seatState?.is_non_existent)
+                continue;
+            const dx = relX - chair.x;
+            const dy = relY - chair.y;
+            const distance = Math.sqrt(dx * dx + dy * dy);
+            const w = renderData.shapeConfig['width'] || 150;
+            const h = renderData.shapeConfig['height'] || 150;
+            const chairRadius = Math.min(w, h) * 0.1;
+            if (distance <= chairRadius + 5) {
+                const key = `S${chair.index + 1}`;
+                return renderData.ticketByNumeration.get(key) || null;
+            }
+        }
+        return null;
+    }
+    if (renderData.type === RoomMapElementType.ZONE) {
+        for (const ticket of renderData.ticketByNumeration.values()) {
+            return ticket;
+        }
+        return renderData.tickets[0] || null;
+    }
+    return null;
+}
+function findElementAtPosition(renderDataList, stageX, stageY) {
+    for (let i = renderDataList.length - 1; i >= 0; i--) {
+        const el = renderDataList[i];
+        const cfg = el.shapeConfig;
+        const ex = cfg['x'] || 0;
+        const ey = cfg['y'] || 0;
+        const ew = cfg['width'] || 0;
+        const eh = cfg['height'] || 0;
+        const rotation = cfg['rotation'] || 0;
+        if (rotation) {
+            const rad = rotation * (Math.PI / 180);
+            const cos = Math.cos(-rad);
+            const sin = Math.sin(-rad);
+            const dx = stageX - ex;
+            const dy = stageY - ey;
+            const localX = dx * cos - dy * sin;
+            const localY = dx * sin + dy * cos;
+            if (localX >= 0 && localX <= ew && localY >= 0 && localY <= eh) {
+                return { element: el, relX: localX, relY: localY };
+            }
+        }
+        else {
+            if (stageX >= ex && stageX <= ex + ew && stageY >= ey && stageY <= ey + eh) {
+                return { element: el, relX: stageX - ex, relY: stageY - ey };
+            }
+        }
+    }
+    return null;
+}
+
+// Helper function to convert number to multi-letter label (A, B, ..., Z, AA, AB, ...)
+const numberToLetter = (num) => {
+    if (num < 0)
+        return 'A';
+    let result = '';
+    let n = num;
+    while (n >= 0) {
+        result = String.fromCharCode(65 + (n % 26)) + result;
+        n = Math.floor(n / 26) - 1;
+    }
+    return result;
+};
+const drawChairIcon = (con, cx, cy, size) => {
+    con.beginPath();
+    const backWidth = size * 0.7;
+    const backHeight = size * 0.6;
+    const backX = cx - backWidth / 2;
+    const backY = cy - backHeight / 2 - size * 0.1;
+    con.moveTo(backX + backWidth * 0.2, backY);
+    con.lineTo(backX + backWidth * 0.8, backY);
+    con.quadraticCurveTo(backX + backWidth, backY, backX + backWidth, backY + backHeight * 0.2);
+    con.lineTo(backX + backWidth, backY + backHeight * 0.8);
+    con.quadraticCurveTo(backX + backWidth, backY + backHeight, backX + backWidth * 0.8, backY + backHeight);
+    con.lineTo(backX + backWidth * 0.2, backY + backHeight);
+    con.quadraticCurveTo(backX, backY + backHeight, backX, backY + backHeight * 0.8);
+    con.lineTo(backX, backY + backHeight * 0.2);
+    con.quadraticCurveTo(backX, backY, backX + backWidth * 0.2, backY);
+    const chairSeatWidth = size * 0.8;
+    const chairSeatHeight = size * 0.3;
+    const seatX = cx - chairSeatWidth / 2;
+    const seatY = cy + backHeight * 0.3;
+    con.moveTo(seatX, seatY);
+    con.lineTo(seatX + chairSeatWidth, seatY);
+    con.lineTo(seatX + chairSeatWidth * 0.9, seatY + chairSeatHeight);
+    con.lineTo(seatX + chairSeatWidth * 0.1, seatY + chairSeatHeight);
+    con.closePath();
+    const legWidth = size * 0.1;
+    const legHeight = size * 0.2;
+    con.moveTo(seatX + chairSeatWidth * 0.1, seatY + chairSeatHeight);
+    con.lineTo(seatX + chairSeatWidth * 0.1 + legWidth, seatY + chairSeatHeight);
+    con.lineTo(seatX + chairSeatWidth * 0.1 + legWidth, seatY + chairSeatHeight + legHeight);
+    con.lineTo(seatX + chairSeatWidth * 0.1, seatY + chairSeatHeight + legHeight);
+    con.moveTo(seatX + chairSeatWidth * 0.9 - legWidth, seatY + chairSeatHeight);
+    con.lineTo(seatX + chairSeatWidth * 0.9, seatY + chairSeatHeight);
+    con.lineTo(seatX + chairSeatWidth * 0.9, seatY + chairSeatHeight + legHeight);
+    con.lineTo(seatX + chairSeatWidth * 0.9 - legWidth, seatY + chairSeatHeight + legHeight);
+    con.closePath();
+};
+const generateSeatBlockScene = (con, shape, numerationConfig) => {
+    const w = shape.width();
+    const h = shape.height();
+    const seatSize = TICKET_MAP_GRID_SIZE;
+    const chairScale = 0.8;
+    const elementName = shape?.attrs?.element_name || 'Asientos';
+    const showElementName = shape?.attrs?.show_element_name ?? true;
+    const seatsData = shape?.attrs?.seats;
+    const hasTitle = !!(elementName && showElementName);
+    const titleHeight = hasTitle ? TICKET_MAP_GRID_SIZE : 0;
+    const chairsStartY = titleHeight;
+    const cols = Math.floor(w / seatSize);
+    const rows = Math.floor((h - chairsStartY) / seatSize);
+    const config = numerationConfig || {
+        start_row_letter: 'A',
+        row_order: 'TOP_TO_BOTTOM',
+        start_column_number: 1,
+        column_order: 'LEFT_TO_RIGHT',
+    };
+    const startRowLetter = config?.start_row_letter?.toUpperCase() || 'A';
+    const startRowNum = startRowLetter.charCodeAt(0) - 65;
+    if (hasTitle) {
+        con.save();
+        const textFont = `bold 10px Arial`;
+        con.font = textFont;
+        const textWidth = con.measureText(elementName).width;
+        const paddingX = 10;
+        const containerHeight = 18;
+        const containerWidth = textWidth + paddingX * 2;
+        const containerX = (w - containerWidth) / 2;
+        const containerY = (titleHeight - containerHeight) / 2;
+        const borderRadius = 4;
+        const lineY = titleHeight;
+        const strokeColor = shape.getAttr('stroke') || '#999';
+        con.beginPath();
+        con.moveTo(0, lineY);
+        con.lineTo(w, lineY);
+        con.strokeStyle = strokeColor;
+        con.lineWidth = 1;
+        con.stroke();
+        con.beginPath();
+        con.moveTo(containerX + borderRadius, containerY);
+        con.lineTo(containerX + containerWidth - borderRadius, containerY);
+        con.quadraticCurveTo(containerX + containerWidth, containerY, containerX + containerWidth, containerY + borderRadius);
+        con.lineTo(containerX + containerWidth, containerY + containerHeight - borderRadius);
+        con.quadraticCurveTo(containerX + containerWidth, containerY + containerHeight, containerX + containerWidth - borderRadius, containerY + containerHeight);
+        con.lineTo(containerX + borderRadius, containerY + containerHeight);
+        con.quadraticCurveTo(containerX, containerY + containerHeight, containerX, containerY + containerHeight - borderRadius);
+        con.lineTo(containerX, containerY + borderRadius);
+        con.quadraticCurveTo(containerX, containerY, containerX + borderRadius, containerY);
+        con.closePath();
+        con.fillStrokeShape(shape);
+        con.font = textFont;
+        con.fillStyle = strokeColor;
+        con.textAlign = 'center';
+        con.textBaseline = 'middle';
+        con.fillText(elementName, w / 2, containerY + containerHeight / 2);
+        con.restore();
+    }
+    for (let x = 0; x < w; x += seatSize) {
+        for (let y = chairsStartY; y < h; y += seatSize) {
+            const colIndex = Math.floor(x / seatSize);
+            const rowIndex = Math.floor((y - chairsStartY) / seatSize);
+            let actualRowIndex = rowIndex;
+            if (config.row_order === 'BOTTOM_TO_TOP') {
+                actualRowIndex = rows - 1 - rowIndex;
+            }
+            let actualColIndex = colIndex;
+            if (config.column_order === 'RIGHT_TO_LEFT') {
+                actualColIndex = cols - 1 - colIndex;
+            }
+            const rowLetter = numberToLetter(startRowNum + actualRowIndex);
+            const colNumber = Number(config.start_column_number) + Number(actualColIndex);
+            const seatNumber = `${rowLetter}${colNumber}`;
+            const centerX = x + seatSize / 2 + 1;
+            const centerY = y + seatSize / 2 - 2;
+            const size = seatSize * chairScale;
+            // Check seat state
+            const seatState = seatsData?.[rowIndex]?.[colIndex];
+            // Skip non-existent seats
+            if (seatState?.is_non_existent) {
+                continue;
+            }
+            con.save();
+            if (seatState?.is_accessible) {
+                drawWheelchairIcon(con, shape, centerX, centerY, size);
+            }
+            else {
+                drawChairIcon(con, centerX, centerY, size);
+                con.fillStrokeShape(shape);
+                // Draw seat number
+                con.fillStyle = '#333333';
+                con.font = `${size * 0.3}px Arial`;
+                con.textAlign = 'center';
+                con.textBaseline = 'middle';
+                con.fillText(seatNumber, centerX, centerY - 1);
+            }
+            con.restore();
+        }
+    }
+};
+
+const generateStageScene = (con, shape) => {
+    const w = shape.width();
+    const h = shape.height();
+    const padding = 4;
+    con.save();
+    // Stage background (rectangle with rounded corners)
+    const exitX = padding;
+    const exitY = padding;
+    const exitWidth = w - padding * 2;
+    const exitHeight = h - padding * 2;
+    const cornerRadius = Math.min(exitWidth, exitHeight) * 0.2;
+    con.beginPath();
+    con.moveTo(exitX + cornerRadius, exitY);
+    con.lineTo(exitX + exitWidth - cornerRadius, exitY);
+    con.quadraticCurveTo(exitX + exitWidth, exitY, exitX + exitWidth, exitY + cornerRadius);
+    con.lineTo(exitX + exitWidth, exitY + exitHeight);
+    con.lineTo(exitX, exitY + exitHeight);
+    con.lineTo(exitX, exitY + cornerRadius);
+    con.quadraticCurveTo(exitX, exitY, exitX + cornerRadius, exitY);
+    con.closePath();
+    con.fillStrokeShape(shape);
+    // Stage text
+    const centerX = w / 2;
+    const centerY = h / 2;
+    con.font = `12px Arial`;
+    con.fillStyle = shape.getAttr('stroke');
+    con.textAlign = 'center';
+    con.textBaseline = 'middle';
+    const stageText = shape?.attrs?.element_name || 'Escenario';
+    const dotRadius = 2.5;
+    const dotGap = 10;
+    const textWidth = con.measureText(stageText).width;
+    // Dot before text
+    con.beginPath();
+    con.arc(centerX - textWidth / 2 - dotGap, centerY, dotRadius, 0, Math.PI * 2);
+    con.fillStyle = shape.getAttr('stroke');
+    con.fill();
+    // Text
+    con.fillText(stageText, centerX, centerY);
+    // Dot after text
+    con.beginPath();
+    con.arc(centerX + textWidth / 2 + dotGap, centerY, dotRadius, 0, Math.PI * 2);
+    con.fillStyle = shape.getAttr('stroke');
+    con.fill();
+    // Footer below the element: line and "▼ Vista del público"
+    const lineColor = '#b0b0b0';
+    const footerCenterY = h + TICKET_MAP_GRID_SIZE / 2;
+    con.beginPath();
+    con.moveTo(0, footerCenterY);
+    con.lineTo(w, footerCenterY);
+    con.strokeStyle = lineColor;
+    con.lineWidth = 1;
+    con.stroke();
+    const labelText = '▼ Vista del público';
+    const textFont = `bold 10px Arial`;
+    con.font = textFont;
+    const labelWidth = con.measureText(labelText).width;
+    const paddingX = 10;
+    const containerHeight = 18;
+    const containerWidth = labelWidth + paddingX * 2;
+    const containerX = (w - containerWidth) / 2;
+    const containerY = footerCenterY - containerHeight / 2;
+    const borderRadius = 4;
+    con.beginPath();
+    con.moveTo(containerX + borderRadius, containerY);
+    con.lineTo(containerX + containerWidth - borderRadius, containerY);
+    con.quadraticCurveTo(containerX + containerWidth, containerY, containerX + containerWidth, containerY + borderRadius);
+    con.lineTo(containerX + containerWidth, containerY + containerHeight - borderRadius);
+    con.quadraticCurveTo(containerX + containerWidth, containerY + containerHeight, containerX + containerWidth - borderRadius, containerY + containerHeight);
+    con.lineTo(containerX + borderRadius, containerY + containerHeight);
+    con.quadraticCurveTo(containerX, containerY + containerHeight, containerX, containerY + containerHeight - borderRadius);
+    con.lineTo(containerX, containerY + borderRadius);
+    con.quadraticCurveTo(containerX, containerY, containerX + borderRadius, containerY);
+    con.closePath();
+    con.fillStyle = '#ededed';
+    con.fill();
+    con.strokeStyle = lineColor;
+    con.lineWidth = 1;
+    con.stroke();
+    con.font = textFont;
+    con.fillStyle = lineColor;
+    con.textAlign = 'center';
+    con.textBaseline = 'middle';
+    con.fillText(labelText, w / 2, footerCenterY);
+    con.restore();
+};
+
+const generateStairScene = (con, shape) => {
+    const w = shape.width();
+    const h = shape.height();
+    const padding = 4;
+    con.save();
+    const exitX = padding;
+    const exitY = padding;
+    const exitWidth = w - padding * 2;
+    const exitHeight = h - padding * 2;
+    const cornerRadius = Math.min(exitWidth, exitHeight) * 0.2;
+    drawRoundedRect(con, shape, exitX, exitY, exitWidth, exitHeight, cornerRadius);
+    // Stage text - check if parent has element_name, otherwise use "ESCENARIO"
+    // const fontSize = Math.min(w, h) * 0.35;
+    con.font = `11px Arial`;
+    con.fillStyle = '#333333';
+    con.textAlign = 'center';
+    con.textBaseline = 'middle';
+    const centerX = w / 2;
+    const centerY = h / 2;
+    // Get parent element and check for element_name
+    const stageText = '🪜' + (shape?.attrs?.element_name || 'Escalera');
+    con.fillText(stageText, centerX, centerY);
+    con.restore();
+};
+
+const generateTableScene = (con, shape) => {
+    const w = shape.width();
+    const h = shape.height();
+    const fillColor = shape.fill();
+    const strokeColor = shape.stroke();
+    const totalCapacity = shape?.attrs?.total_capacity ?? 0;
+    const zoneText = shape?.attrs?.element_name || 'Mesa';
+    const seatsData = shape?.attrs?.seats;
+    const cx = w / 2;
+    const cy = h / 2;
+    // Radio de la mesa: el más pequeño entre ancho y alto, con un poco de margen
+    // para dejar espacio a las sillas alrededor
+    const chairRadius = Math.min(w, h) * 0.1;
+    const gap = chairRadius * 0.4; // espacio entre mesa y sillas
+    const tableRadius = Math.min(w, h) / 2 - chairRadius * 2 - gap;
+    con.save();
+    // ── Sillas (se dibujan primero para quedar detrás) ──────────────────────────
+    if (totalCapacity > 0) {
+        const orbitRadius = tableRadius + gap + chairRadius;
+        for (let i = 0; i < totalCapacity; i++) {
+            const seatState = seatsData?.[0]?.[i];
+            if (seatState?.is_non_existent) {
+                continue;
+            }
+            const angle = (2 * Math.PI * i) / totalCapacity - Math.PI / 2;
+            const scx = cx + orbitRadius * Math.cos(angle);
+            const scy = cy + orbitRadius * Math.sin(angle);
+            if (seatState?.is_accessible) {
+                drawWheelchairIcon(con, shape, scx, scy, chairRadius * 2);
+                continue;
+            }
+            con.beginPath();
+            con.arc(scx, scy, chairRadius, 0, Math.PI * 2);
+            con.closePath();
+            // Color de relleno de las sillas = stroke del shape
+            con.fillStyle = strokeColor;
+            con.fill();
+            // Borde de las sillas = fill del shape
+            con.strokeStyle = fillColor;
+            con.lineWidth = Math.max(1, chairRadius * 0.15);
+            con.stroke();
+        }
+    }
+    // ── Mesa (círculo central) ──────────────────────────────────────────────────
+    con.beginPath();
+    con.arc(cx, cy, tableRadius, 0, Math.PI * 2);
+    con.closePath();
+    con.fillStrokeShape(shape); // usa fill y stroke propios del shape de Konva
+    // ── Texto centrado ──────────────────────────────────────────────────────────
+    const fontSize = tableRadius * 0.45;
+    con.font = `${fontSize}px Arial`;
+    con.fillStyle = strokeColor;
+    con.textAlign = 'center';
+    con.textBaseline = 'middle';
+    con.fillText(zoneText, cx, cy);
+    con.restore();
+};
+
+const generateUnavailableSpaceScene = (con, shape) => {
+    const w = shape.width();
+    const h = shape.height();
+    const padding = 4;
+    con.save();
+    const exitX = padding;
+    const exitY = padding;
+    const exitWidth = w - padding * 2;
+    const exitHeight = h - padding * 2;
+    const cornerRadius = Math.min(exitWidth, exitHeight) * 0.2;
+    drawRoundedRect(con, shape, exitX, exitY, exitWidth, exitHeight, cornerRadius);
+    // Stage text - check if parent has element_name, otherwise use "ESCENARIO"
+    // const fontSize = Math.min(w, h) * 0.35;
+    con.font = `11px Arial`;
+    con.fillStyle = '#333333';
+    con.textAlign = 'center';
+    con.textBaseline = 'middle';
+    const centerX = w / 2;
+    const centerY = h / 2;
+    // Get parent element and check for element_name
+    const stageText = '🚫 ' + (shape?.attrs?.element_name || 'No disponible');
+    con.fillText(stageText, centerX, centerY);
+    con.restore();
+};
+
+const generateZoneScene = (con, shape) => {
+    const w = shape.width();
+    const h = shape.height();
+    const padding = 4;
+    con.save();
+    const zoneX = padding;
+    const zoneY = padding;
+    const zoneWidth = w - padding * 2;
+    const zoneHeight = h - padding * 2;
+    const cornerRadius = Math.min(zoneWidth, zoneHeight) * 0.05;
+    drawRoundedRect(con, shape, zoneX, zoneY, zoneWidth, zoneHeight, cornerRadius);
+    // Zone text - check if parent has element_name, otherwise use "Zona"
+    con.font = `11px Arial`;
+    con.fillStyle = shape.getAttr('stroke');
+    con.textAlign = 'center';
+    con.textBaseline = 'middle';
+    const centerX = w / 2;
+    const centerY = h / 2;
+    // Get parent element and check for element_name
+    const zoneText = shape?.attrs?.element_name || '';
+    con.fillText(zoneText, centerX, centerY);
+    con.restore();
+};
+
 function MinTodayValidator(controlName) {
     return (formGroup) => {
         const group = formGroup;
@@ -5228,5 +6409,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ADMIN_API_ROUTES, ALERT_ICONS, AdminSelectComponent, AdminService, ApiService, AppAlertComponent, AppButtonComponent, AppLinkButtonComponent, AppModalComponent, AsyncSelectComponent, AuditInformationComponent, BASE_BUTTON_CLASSES, BASE_INPUT_CLASSES, BUTTON_SIZES_CLASSES, BUTTON_VARIANT_CLASSES, BaseModalService, CITY_API_ENDPOINTS, COUNTRY_API_ENDPOINTS, CUSTOMERS_API_ROUTES, ChangePasswordFormComponent, ChangePasswordFormService, CitiesService, CitySelectComponent, ColorPickerComponent, CorporateBondStatus, CountrySelectComponent, CountryService, CouponApplicability, CouponDiscountType, CouponStatus, CustomerSelectComponent, CustomerService, DOCUMENT_TYPES_OPTIONS, DateInputComponent, DateService, DaySelectorGridComponent, DeleteConfirmationComponent, DeleteConfirmationService, DynamicTableComponent, ERROR_INPUT_CLASSES, EndDateGreaterThanStartValidator, FORM_ERROR_MESSAGES, FeedbackModalComponent, FeedbackModalService, FileType, FileUploadComponent, FileUploadPreviewComponent, FormEditorComponent, FormInputComponent, FormSelectComponent, FormTextareaComponent, GiftBondStatus, LanguageSwitcherComponent, MinTodayValidator, MustMatchValidator, OrderItemType, OrderStatus, PAYMENT_METHODS_OPTIONS, PERFORMANCES_API_ROUTES, PRICE_ZONES_API_ROUTES, PRODUCTS_API_ROUTES, PRODUCT_CATEGORIES_API_ROUTES, PRODUCT_TAGS_API_ROUTES, PRODUCT_TYPES_API_ROUTES, PerformanceCardComponent, PerformanceCardListComponent, PerformanceMultiSelectComponent, PerformanceSelectComponent, PerformanceService, PerformanceStatus, PerformanceStepperComponent, PerformanceTicketStatus, PerformancesListEventsService, PriceZoneEventService, PriceZoneFormModalService, PriceZoneSelectComponent, PriceZoneService, ProductCategoryService, ProductMultiSelectComponent, ProductSelectComponent, ProductService, ProductTagService, ProductTypeService, RoomMapElementOrientation, RoomMapElementType, SHOWS_API_ROUTES, STATE_API_ENDPOINTS, ShowMultiSelectComponent, ShowSelectComponent, ShowService, ShowsFilterComponent, StateSelectComponent, StatesService, TICKERA_COMPONENTS_CONFIG, TickeraTranslocoLoader, ToastService, ToggleSwitchComponent, VENUES_API_ROUTES, ZonePriceItemComponent, ZonePriceListComponent, authInterceptor, formatCitiesResponseToSelect, getBrowserLanguage, getCustomerFullname, getStoredLanguage, parseJsonToFormDataAdvanced, provideTickeraComponents, resolveLanguage, setStoredLanguage, transformImageToFile };
+export { ADMIN_API_ROUTES, ALERT_ICONS, AdminSelectComponent, AdminService, ApiService, AppAlertComponent, AppButtonComponent, AppLinkButtonComponent, AppModalComponent, AsyncSelectComponent, AuditInformationComponent, BASE_BUTTON_CLASSES, BASE_INPUT_CLASSES, BUTTON_SIZES_CLASSES, BUTTON_VARIANT_CLASSES, BaseModalService, CITY_API_ENDPOINTS, COUNTRY_API_ENDPOINTS, CUSTOMERS_API_ROUTES, ChangePasswordFormComponent, ChangePasswordFormService, CitiesService, CitySelectComponent, ColorPickerComponent, CorporateBondStatus, CountrySelectComponent, CountryService, CouponApplicability, CouponDiscountType, CouponStatus, CustomerSelectComponent, CustomerService, DEFAULT_STAGE_CONFIG, DOCUMENT_TYPES_OPTIONS, DateInputComponent, DateService, DaySelectorGridComponent, DeleteConfirmationComponent, DeleteConfirmationService, DynamicTableComponent, ERROR_INPUT_CLASSES, EndDateGreaterThanStartValidator, FORM_ERROR_MESSAGES, FeedbackModalComponent, FeedbackModalService, FileType, FileUploadComponent, FileUploadPreviewComponent, FormEditorComponent, FormInputComponent, FormSelectComponent, FormTextareaComponent, GiftBondStatus, LanguageSwitcherComponent, MinTodayValidator, MustMatchValidator, OrderItemType, OrderStatus, PAYMENT_METHODS_OPTIONS, PERFORMANCES_API_ROUTES, PRICE_ZONES_API_ROUTES, PRODUCTS_API_ROUTES, PRODUCT_CATEGORIES_API_ROUTES, PRODUCT_TAGS_API_ROUTES, PRODUCT_TYPES_API_ROUTES, PerformanceCardComponent, PerformanceCardListComponent, PerformanceMultiSelectComponent, PerformanceSelectComponent, PerformanceService, PerformanceStatus, PerformanceStepperComponent, PerformanceTicketStatus, PerformancesListEventsService, PriceZoneEventService, PriceZoneFormModalService, PriceZoneSelectComponent, PriceZoneService, ProductCategoryService, ProductMultiSelectComponent, ProductSelectComponent, ProductService, ProductTagService, ProductTypeService, RoomMapElementOrientation, RoomMapElementType, SHOWS_API_ROUTES, STATE_API_ENDPOINTS, SelectedDiscountCardType, ShowMultiSelectComponent, ShowSelectComponent, ShowService, ShowsFilterComponent, StateSelectComponent, StatesService, TICKERA_COMPONENTS_CONFIG, TICKET_ELEMENT_TYPES, TICKET_MAP_GRID_SIZE, TICKET_MAP_TITLE_HEIGHT, TICKET_STATUS_COLORS, TICKET_STATUS_FILLS, TICKET_STATUS_LABELS, TickeraTranslocoLoader, ToastService, ToggleSwitchComponent, VENUES_API_ROUTES, ZonePriceItemComponent, ZonePriceListComponent, authInterceptor, drawChairIcon$1 as drawChairIcon, drawHappyFace, drawRoundedRect, drawWheelchairIcon, findElementAtPosition, findTicketAtPosition, formatCitiesResponseToSelect, generateExitScene, generateHallwayScene, generateProductionAreaScene, generateSeatBlockScene, generateSeatBlockTicketScene, generateStageScene, generateStairScene, generateTableScene, generateTableTicketScene, generateUnavailableSpaceScene, generateZoneScene, getBrowserLanguage, getCustomerFullname, getItemTypeIcon, getStoredLanguage, numberToLetter$1 as numberToLetter, parseJsonToFormDataAdvanced, processElementsToRenderData, provideTickeraComponents, resolveLanguage, setStoredLanguage, tintColor, transformImageToFile };
 //# sourceMappingURL=tickera-angular-components.mjs.map