feat: v4.0 - multi-day horizontal canvas, duration input, overnight blocks, PDF horizontal layout

app/static/js/canvas.js

@@ -1,32 +1,34 @@
 /**
- * Canvas editor for Scenar Creator v3.
- * Renders schedule blocks on a time-grid canvas with drag & drop via interact.js.
+ * Canvas editor for Scenar Creator v4.
+ * Horizontal layout: X = time, Y = days.
+ * interact.js for drag (horizontal) and resize (right edge).
  */
 
 const Canvas = {
     GRID_MINUTES: 15,
-    PX_PER_SLOT: 30, // 30px per 15 min
-    START_HOUR: 7,
-    END_HOUR: 23,
+    ROW_H: 52,          // px height of one day row
+    TIME_LABEL_W: 80,   // px width of date label column
+    HEADER_H: 28,       // px height of time axis header
+    MIN_BLOCK_MIN: 15,  // minimum block duration in minutes
+
+    // Time range (auto-derived from blocks, with fallback)
+    _startMin: 7 * 60,
+    _endMin: 22 * 60,
 
     get pxPerMinute() {
-        return this.PX_PER_SLOT / this.GRID_MINUTES;
-    },
-
-    get totalSlots() {
-        return ((this.END_HOUR - this.START_HOUR) * 60) / this.GRID_MINUTES;
-    },
-
-    get totalHeight() {
-        return this.totalSlots * this.PX_PER_SLOT;
+        const slots = (this._endMin - this._startMin) / this.GRID_MINUTES;
+        const container = document.getElementById('canvasScrollArea');
+        if (!container) return 2;
+        const avail = container.clientWidth - this.TIME_LABEL_W - 4;
+        return avail / ((this._endMin - this._startMin));
     },
 
     minutesToPx(minutes) {
-        return (minutes - this.START_HOUR * 60) * this.pxPerMinute;
+        return (minutes - this._startMin) * this.pxPerMinute;
     },
 
     pxToMinutes(px) {
-        return Math.round(px / this.pxPerMinute + this.START_HOUR * 60);
+        return px / this.pxPerMinute + this._startMin;
     },
 
     snapMinutes(minutes) {
@@ -34,234 +36,295 @@ const Canvas = {
     },
 
     formatTime(totalMinutes) {
-        const h = Math.floor(totalMinutes / 60);
-        const m = totalMinutes % 60;
+        const norm = ((totalMinutes % 1440) + 1440) % 1440;
+        const h = Math.floor(norm / 60);
+        const m = norm % 60;
         return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`;
     },
 
     parseTime(str) {
+        if (!str) return 0;
         const [h, m] = str.split(':').map(Number);
-        return h * 60 + m;
+        return (h || 0) * 60 + (m || 0);
     },
 
     isLightColor(hex) {
-        const h = hex.replace('#', '');
-        const r = parseInt(h.substring(0, 2), 16);
-        const g = parseInt(h.substring(2, 4), 16);
-        const b = parseInt(h.substring(4, 6), 16);
+        const h = (hex || '#888888').replace('#', '');
+        const r = parseInt(h.substring(0, 2), 16) || 128;
+        const g = parseInt(h.substring(2, 4), 16) || 128;
+        const b = parseInt(h.substring(4, 6), 16) || 128;
         return (0.299 * r + 0.587 * g + 0.114 * b) / 255 > 0.6;
     },
 
-    renderTimeAxis() {
-        const axis = document.getElementById('timeAxis');
-        axis.innerHTML = '';
-        axis.style.height = this.totalHeight + 'px';
-
-        for (let slot = 0; slot <= this.totalSlots; slot++) {
-            const minutes = this.START_HOUR * 60 + slot * this.GRID_MINUTES;
-            const isHour = minutes % 60 === 0;
-            const isHalf = minutes % 30 === 0;
-
-            if (isHour || isHalf) {
-                const label = document.createElement('div');
-                label.className = 'time-label';
-                label.style.top = (slot * this.PX_PER_SLOT) + 'px';
-                label.textContent = this.formatTime(minutes);
-                if (!isHour) {
-                    label.style.fontSize = '9px';
-                    label.style.opacity = '0.6';
-                }
-                axis.appendChild(label);
-            }
+    // Derive time range from blocks (with default fallback)
+    _computeRange(blocks) {
+        if (!blocks || blocks.length === 0) {
+            this._startMin = 7 * 60;
+            this._endMin = 22 * 60;
+            return;
+        }
+        let minStart = 24 * 60;
+        let maxEnd = 0;
+        for (const b of blocks) {
+            const s = this.parseTime(b.start);
+            let e = this.parseTime(b.end);
+            if (e <= s) e += 24 * 60; // overnight
+            if (s < minStart) minStart = s;
+            if (e > maxEnd) maxEnd = e;
+        }
+        // Round to hour boundaries, add small padding
+        this._startMin = Math.max(0, Math.floor(minStart / 60) * 60);
+        this._endMin = Math.min(48 * 60, Math.ceil(maxEnd / 60) * 60);
+        // Ensure minimum range of 2h
+        if (this._endMin - this._startMin < 120) {
+            this._endMin = this._startMin + 120;
         }
     },
 
-    renderDayColumns(dates) {
-        const header = document.getElementById('canvasHeader');
-        const columns = document.getElementById('dayColumns');
-        header.innerHTML = '';
-        columns.innerHTML = '';
+    render(state) {
+        const dates = App.getDates();
+        this._computeRange(state.blocks);
 
-        if (dates.length === 0) dates = [new Date().toISOString().split('T')[0]];
+        const timeAxisEl = document.getElementById('timeAxis');
+        const dayRowsEl = document.getElementById('dayRows');
+        if (!timeAxisEl || !dayRowsEl) return;
 
-        dates.forEach(dateStr => {
-            // Header
-            const dh = document.createElement('div');
-            dh.className = 'day-header';
-            dh.textContent = dateStr;
-            header.appendChild(dh);
+        timeAxisEl.innerHTML = '';
+        dayRowsEl.innerHTML = '';
 
-            // Column
-            const col = document.createElement('div');
-            col.className = 'day-column';
-            col.dataset.date = dateStr;
-            col.style.height = this.totalHeight + 'px';
-
-            // Grid lines
-            for (let slot = 0; slot <= this.totalSlots; slot++) {
-                const minutes = this.START_HOUR * 60 + slot * this.GRID_MINUTES;
-                const line = document.createElement('div');
-                line.className = 'grid-line ' + (minutes % 60 === 0 ? 'hour' : 'half');
-                line.style.top = (slot * this.PX_PER_SLOT) + 'px';
-                col.appendChild(line);
-            }
-
-            // Click area for creating blocks
-            const clickArea = document.createElement('div');
-            clickArea.className = 'day-column-click-area';
-            clickArea.addEventListener('click', (e) => {
-                if (e.target !== clickArea) return;
-                const rect = col.getBoundingClientRect();
-                const y = e.clientY - rect.top;
-                const minutes = this.snapMinutes(this.pxToMinutes(y));
-                const endMinutes = Math.min(minutes + 60, this.END_HOUR * 60);
-                App.createBlock(dateStr, this.formatTime(minutes), this.formatTime(endMinutes));
-            });
-            col.appendChild(clickArea);
-
-            columns.appendChild(col);
-        });
+        this._renderTimeAxis(timeAxisEl, dates);
+        this._renderDayRows(dayRowsEl, dates, state);
     },
 
-    renderBlocks(blocks, programTypes) {
-        // Remove existing blocks
-        document.querySelectorAll('.schedule-block').forEach(el => el.remove());
+    _renderTimeAxis(container, dates) {
+        container.style.display = 'flex';
+        container.style.alignItems = 'stretch';
+        container.style.height = this.HEADER_H + 'px';
+        container.style.minWidth = (this.TIME_LABEL_W + this._canvasWidth()) + 'px';
 
+        // Date label placeholder
+        const corner = document.createElement('div');
+        corner.className = 'time-corner';
+        corner.style.cssText = `width:${this.TIME_LABEL_W}px;min-width:${this.TIME_LABEL_W}px;`;
+        container.appendChild(corner);
+
+        // Time labels wrapper
+        const labelsWrap = document.createElement('div');
+        labelsWrap.style.cssText = `position:relative;flex:1;height:${this.HEADER_H}px;`;
+
+        const totalMin = this._endMin - this._startMin;
+        for (let m = this._startMin; m <= this._endMin; m += 60) {
+            const pct = (m - this._startMin) / totalMin * 100;
+            const label = document.createElement('div');
+            label.className = 'time-tick';
+            label.style.left = `calc(${pct}% - 1px)`;
+            label.textContent = this.formatTime(m);
+            labelsWrap.appendChild(label);
+        }
+        container.appendChild(labelsWrap);
+    },
+
+    _canvasWidth() {
+        const container = document.getElementById('canvasScrollArea');
+        if (!container) return 800;
+        return Math.max(600, container.clientWidth - this.TIME_LABEL_W - 20);
+    },
+
+    _renderDayRows(container, dates, state) {
         const typeMap = {};
-        programTypes.forEach(pt => { typeMap[pt.id] = pt; });
+        for (const pt of state.program_types) typeMap[pt.id] = pt;
 
-        blocks.forEach(block => {
-            const col = document.querySelector(`.day-column[data-date="${block.date}"]`);
-            if (!col) return;
+        for (const date of dates) {
+            const row = document.createElement('div');
+            row.className = 'day-row';
+            row.style.height = this.ROW_H + 'px';
+            row.dataset.date = date;
 
-            const pt = typeMap[block.type_id] || { color: '#94a3b8', name: '?' };
-            const startMin = this.parseTime(block.start);
-            const endMin = this.parseTime(block.end);
-            const top = this.minutesToPx(startMin);
-            const height = (endMin - startMin) * this.pxPerMinute;
-            const isLight = this.isLightColor(pt.color);
+            // Date label
+            const label = document.createElement('div');
+            label.className = 'day-label';
+            label.style.width = this.TIME_LABEL_W + 'px';
+            label.style.minWidth = this.TIME_LABEL_W + 'px';
+            label.textContent = this._formatDate(date);
+            row.appendChild(label);
 
-            const el = document.createElement('div');
-            el.className = 'schedule-block' + (isLight ? ' light-bg' : '');
-            el.dataset.blockId = block.id;
-            el.style.top = top + 'px';
-            el.style.height = Math.max(height, 20) + 'px';
-            el.style.backgroundColor = pt.color;
+            // Timeline area
+            const timeline = document.createElement('div');
+            timeline.className = 'day-timeline';
+            timeline.style.position = 'relative';
+            timeline.dataset.date = date;
 
-            el.innerHTML = `
-                <div class="block-color-bar" style="background:${this.darkenColor(pt.color)}"></div>
-                <div class="block-title">${this.escapeHtml(block.title)}</div>
-                <div class="block-time">${block.start} – ${block.end}</div>
-                ${block.responsible ? `<div class="block-responsible">${this.escapeHtml(block.responsible)}</div>` : ''}
-                <div class="resize-handle"></div>
-            `;
+            // Grid lines (every hour)
+            const totalMin = this._endMin - this._startMin;
+            for (let m = this._startMin; m < this._endMin; m += 60) {
+                const line = document.createElement('div');
+                line.className = 'grid-line';
+                line.style.left = ((m - this._startMin) / totalMin * 100) + '%';
+                timeline.appendChild(line);
+            }
 
-            // Click to edit
-            el.addEventListener('click', (e) => {
-                if (e.target.classList.contains('resize-handle')) return;
-                App.editBlock(block.id);
+            // Click on empty timeline to add block
+            timeline.addEventListener('click', (e) => {
+                if (e.target !== timeline) return;
+                const rect = timeline.getBoundingClientRect();
+                const relX = e.clientX - rect.left;
+                const totalW = rect.width;
+                const clickMin = this._startMin + (relX / totalW) * (this._endMin - this._startMin);
+                const snapStart = this.snapMinutes(clickMin);
+                const snapEnd = snapStart + 60; // default 1h
+                App.openNewBlockModal(date, this.formatTime(snapStart), this.formatTime(Math.min(snapEnd, this._endMin)));
             });
 
-            col.appendChild(el);
+            // Render blocks for this date
+            const dayBlocks = state.blocks.filter(b => b.date === date);
+            for (const block of dayBlocks) {
+                const el = this._createBlockEl(block, typeMap, totalMin);
+                if (el) timeline.appendChild(el);
+            }
+
+            row.appendChild(timeline);
+            container.appendChild(row);
+        }
+    },
+
+    _formatDate(dateStr) {
+        const d = new Date(dateStr + 'T12:00:00');
+        return d.toLocaleDateString('cs-CZ', { weekday: 'short', day: 'numeric', month: 'numeric' });
+    },
+
+    _createBlockEl(block, typeMap, totalMin) {
+        const pt = typeMap[block.type_id];
+        const color = pt ? pt.color : '#888888';
+        const light = this.isLightColor(color);
+
+        const s = this.parseTime(block.start);
+        let e = this.parseTime(block.end);
+        const isOvernight = e <= s;
+        if (isOvernight) e = this._endMin; // clip to end of day
+
+        // Clamp to time range
+        const cs = Math.max(s, this._startMin);
+        const ce = Math.min(e, this._endMin);
+        if (ce <= cs) return null;
+
+        const totalRange = this._endMin - this._startMin;
+        const leftPct = (cs - this._startMin) / totalRange * 100;
+        const widthPct = (ce - cs) / totalRange * 100;
+
+        const el = document.createElement('div');
+        el.className = 'block-el' + (isOvernight ? ' overnight' : '');
+        el.dataset.id = block.id;
+        el.style.cssText = `
+            left:${leftPct}%;
+            width:${widthPct}%;
+            background:${color};
+            color:${light ? '#1a1a1a' : '#ffffff'};
+            top:4px;
+            height:${this.ROW_H - 8}px;
+            position:absolute;
+        `;
+
+        // Block label
+        const inner = document.createElement('div');
+        inner.className = 'block-inner';
+        const timeLabel = `${block.start}–${block.end}`;
+        const nameEl = document.createElement('span');
+        nameEl.className = 'block-title';
+        nameEl.textContent = block.title;
+        const timeEl = document.createElement('span');
+        timeEl.className = 'block-time';
+        timeEl.textContent = timeLabel + (isOvernight ? ' →' : '');
+        inner.appendChild(nameEl);
+        inner.appendChild(timeEl);
+        el.appendChild(inner);
+
+        // Click to edit
+        el.addEventListener('click', (e) => {
+            e.stopPropagation();
+            App.openBlockModal(block.id);
         });
 
-        this.initInteract();
-    },
-
-    initInteract() {
-        if (typeof interact === 'undefined') return;
-
-        interact('.schedule-block').draggable({
-            inertia: false,
-            modifiers: [
-                interact.modifiers.snap({
-                    targets: [interact.snappers.grid({
-                        x: 1, y: this.PX_PER_SLOT
-                    })],
-                    range: Infinity,
-                    relativePoint: { x: 0, y: 0 }
-                }),
-                interact.modifiers.restrict({
-                    restriction: 'parent',
-                    elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
+        // interact.js drag (horizontal only)
+        if (window.interact) {
+            interact(el)
+                .draggable({
+                    axis: 'x',
+                    listeners: {
+                        move: (event) => this._onDragMove(event, block),
+                        end: (event) => this._onDragEnd(event, block),
+                    },
+                    modifiers: [
+                        interact.modifiers.snap({
+                            targets: [interact.snappers.grid({ x: this._minutesPx(this.GRID_MINUTES), y: 1000 })],
+                            range: Infinity,
+                            relativePoints: [{ x: 0, y: 0 }]
+                        }),
+                        interact.modifiers.restrict({ restriction: 'parent' })
+                    ],
+                    inertia: false,
                 })
-            ],
-            listeners: {
-                start: (event) => {
-                    event.target.style.zIndex = 50;
-                    event.target.style.opacity = '0.9';
-                },
-                move: (event) => {
-                    const target = event.target;
-                    const y = (parseFloat(target.dataset.dragY) || 0) + event.dy;
-                    target.dataset.dragY = y;
-                    const currentTop = parseFloat(target.style.top) || 0;
-                    const newTop = currentTop + event.dy;
-                    target.style.top = newTop + 'px';
-                },
-                end: (event) => {
-                    const target = event.target;
-                    target.style.zIndex = '';
-                    target.style.opacity = '';
-                    target.dataset.dragY = 0;
+                .resizable({
+                    edges: { right: true },
+                    listeners: {
+                        move: (event) => this._onResizeMove(event, block),
+                        end: (event) => this._onResizeEnd(event, block),
+                    },
+                    modifiers: [
+                        interact.modifiers.snapSize({
+                            targets: [interact.snappers.grid({ width: this._minutesPx(this.GRID_MINUTES) })]
+                        }),
+                        interact.modifiers.restrictSize({ minWidth: this._minutesPx(this.MIN_BLOCK_MIN) })
+                    ],
+                });
+        }
 
-                    const blockId = target.dataset.blockId;
-                    const newTop = parseFloat(target.style.top);
-                    const height = parseFloat(target.style.height);
-
-                    const startMin = Canvas.snapMinutes(Canvas.pxToMinutes(newTop));
-                    const endMin = Canvas.snapMinutes(Canvas.pxToMinutes(newTop + height));
-
-                    App.updateBlockTime(blockId, Canvas.formatTime(startMin), Canvas.formatTime(endMin));
-                }
-            }
-        }).resizable({
-            edges: { bottom: '.resize-handle' },
-            modifiers: [
-                interact.modifiers.snap({
-                    targets: [interact.snappers.grid({
-                        x: 1, y: this.PX_PER_SLOT
-                    })],
-                    range: Infinity,
-                    relativePoint: { x: 0, y: 0 },
-                    offset: 'self'
-                }),
-                interact.modifiers.restrictSize({
-                    min: { width: 0, height: this.PX_PER_SLOT }
-                })
-            ],
-            listeners: {
-                move: (event) => {
-                    const target = event.target;
-                    target.style.height = event.rect.height + 'px';
-                },
-                end: (event) => {
-                    const target = event.target;
-                    const blockId = target.dataset.blockId;
-                    const top = parseFloat(target.style.top);
-                    const height = parseFloat(target.style.height);
-
-                    const startMin = Canvas.snapMinutes(Canvas.pxToMinutes(top));
-                    const endMin = Canvas.snapMinutes(Canvas.pxToMinutes(top + height));
-
-                    App.updateBlockTime(blockId, Canvas.formatTime(startMin), Canvas.formatTime(endMin));
-                }
-            }
-        });
+        return el;
     },
 
-    darkenColor(hex) {
-        const h = hex.replace('#', '');
-        const r = Math.max(0, parseInt(h.substring(0, 2), 16) - 30);
-        const g = Math.max(0, parseInt(h.substring(2, 4), 16) - 30);
-        const b = Math.max(0, parseInt(h.substring(4, 6), 16) - 30);
-        return `rgb(${r},${g},${b})`;
+    _minutesPx(minutes) {
+        return minutes * this.pxPerMinute;
     },
 
-    escapeHtml(str) {
-        if (!str) return '';
-        const d = document.createElement('div');
-        d.textContent = str;
-        return d.innerHTML;
-    }
+    _onDragMove(event, block) {
+        const target = event.target;
+        const x = (parseFloat(target.style.left) || 0);
+        // Convert delta px to minutes
+        const deltaPx = event.dx;
+        const deltaMin = deltaPx / this.pxPerMinute;
+        const newStartMin = this.snapMinutes(this.parseTime(block.start) + deltaMin);
+        const duration = this.parseTime(block.end) - this.parseTime(block.start);
+        const clampedStart = Math.max(this._startMin, Math.min(this._endMin - duration, newStartMin));
+        const newEnd = clampedStart + duration;
+
+        block.start = this.formatTime(clampedStart);
+        block.end = this.formatTime(newEnd);
+
+        const totalRange = this._endMin - this._startMin;
+        const leftPct = (clampedStart - this._startMin) / totalRange * 100;
+        target.style.left = leftPct + '%';
+    },
+
+    _onDragEnd(event, block) {
+        App.renderCanvas();
+    },
+
+    _onResizeMove(event, block) {
+        const target = event.target;
+        const newWidthPx = event.rect.width;
+        const totalRange = this._endMin - this._startMin;
+        const containerW = target.parentElement.clientWidth;
+        const minutesPerPx = totalRange / containerW;
+        const newDuration = this.snapMinutes(Math.round(newWidthPx * minutesPerPx));
+        const clampedDuration = Math.max(this.MIN_BLOCK_MIN, newDuration);
+        const startMin = this.parseTime(block.start);
+        const endMin = Math.min(this._endMin, startMin + clampedDuration);
+
+        block.end = this.formatTime(endMin);
+        const widthPct = (endMin - startMin) / totalRange * 100;
+        target.style.width = widthPct + '%';
+    },
+
+    _onResizeEnd(event, block) {
+        App.renderCanvas();
+    },
 };