diff --git a/modules/rcal/components/folk-calendar-view.ts b/modules/rcal/components/folk-calendar-view.ts index c8f96e2..106d66c 100644 --- a/modules/rcal/components/folk-calendar-view.ts +++ b/modules/rcal/components/folk-calendar-view.ts @@ -1146,6 +1146,9 @@ class FolkCalendarView extends HTMLElement { const isToday = ds === todayStr; const isExpanded = ds === this.expandedDay; const dayEvents = this.getEventsForDate(ds); + // For dots/labels in day cells, only show events that START on this day. + // Multi-day events on intermediate days are shown via span bars instead. + const cellEvents = dayEvents.filter(e => e.start_time.slice(0, 10) === ds); const dayReminders = this.getRemindersForDate(ds); const lunar = this.lunarData[ds]; @@ -1155,18 +1158,18 @@ class FolkCalendarView extends HTMLElement { ${this.showLunar && lunar ? `${this.getMoonEmoji(lunar.phase)}` : ""} ${dayReminders.length > 0 ? `🔔${dayReminders.length > 1 ? dayReminders.length : ""}` : ""} - ${dayEvents.length > 0 || dayReminders.length > 0 ? ` + ${cellEvents.length > 0 || dayReminders.length > 0 ? `
- ${dayEvents.slice(0, 5).map(e => { + ${cellEvents.slice(0, 5).map(e => { const es = this.getEventStyles(e); return es.isTentative ? `` : ``; }).join("")} ${dayReminders.slice(0, 3).map(r => ``).join("")} - ${dayEvents.length > 5 ? `+${dayEvents.length - 5}` : ""} + ${cellEvents.length > 5 ? `+${cellEvents.length - 5}` : ""}
- ${dayEvents.slice(0, 2).map(e => { + ${cellEvents.slice(0, 2).map(e => { const evColor = e.source_color || "#6366f1"; const es = this.getEventStyles(e); const city = this.getSpatialLabel(e.location_breadcrumb, 5); @@ -2372,8 +2375,9 @@ class FolkCalendarView extends HTMLElement { }); // Scroll/trackpad gestures on calendar pane - // - Pinch-to-zoom (ctrlKey wheel) → zoom in/out granularity - // - Two-finger scroll/pan (plain wheel) → navigate timeline + // - Pinch-to-zoom (ctrlKey wheel) → zoom in/out temporal granularity + // - Two-finger horizontal pan (deltaX) → navigate dates + // - Two-finger vertical scroll (deltaY) → pass through to page scroll const calPane = $("calendar-pane"); if (calPane) { calPane.addEventListener("wheel", (e: WheelEvent) => { @@ -2381,10 +2385,9 @@ class FolkCalendarView extends HTMLElement { const mapPanel = this.shadow.getElementById("map-panel"); if (mapPanel && mapPanel.contains(e.target as Node)) return; - e.preventDefault(); - if (e.ctrlKey) { // Pinch-to-zoom on trackpad (or Ctrl+scroll with mouse) + e.preventDefault(); if (this._wheelTimer) clearTimeout(this._wheelTimer); this._wheelTimer = setTimeout(() => { if (e.deltaY > 0) { @@ -2394,18 +2397,20 @@ class FolkCalendarView extends HTMLElement { } this._wheelTimer = null; }, 120); - } else { - // Two-finger scroll / mouse wheel → navigate timeline + } else if (Math.abs(e.deltaX) > Math.abs(e.deltaY) && Math.abs(e.deltaX) > 10) { + // Two-finger horizontal pan → navigate dates + e.preventDefault(); if (this._wheelTimer) clearTimeout(this._wheelTimer); this._wheelTimer = setTimeout(() => { - if (e.deltaY > 0) { - this.navigate(1); // scroll down → next period - } else if (e.deltaY < 0) { - this.navigate(-1); // scroll up → previous period + if (e.deltaX > 0) { + this.navigate(1); // pan right → next period + } else if (e.deltaX < 0) { + this.navigate(-1); // pan left → previous period } this._wheelTimer = null; }, 120); } + // Vertical scroll (deltaY without ctrlKey) → no preventDefault, page scrolls naturally }, { passive: false }); // Pan/swipe + pinch-to-zoom on calendar pane @@ -2495,8 +2500,19 @@ class FolkCalendarView extends HTMLElement { this.leafletMap = L.map(this.mapContainer, { center, zoom, zoomControl: false, + scrollWheelZoom: false, // Disable: plain scroll should pass to page }); + // Only zoom map on Ctrl+scroll (pinch-to-zoom on trackpad) + this.mapContainer.addEventListener("wheel", (ev: WheelEvent) => { + if (ev.ctrlKey) { + ev.preventDefault(); + if (ev.deltaY < 0) this.leafletMap.zoomIn(); + else if (ev.deltaY > 0) this.leafletMap.zoomOut(); + } + // Plain scroll passes through to page + }, { passive: false }); + this.applyMapTileLayer(); // Watch for theme changes @@ -2702,7 +2718,7 @@ class FolkCalendarView extends HTMLElement { /* ── Main Layout ── */ .main-layout { position: relative; min-height: 400px; } .main-layout--docked { display: grid; grid-template-columns: 1fr 6px 400px; gap: 0; min-height: 500px; } - .calendar-pane { overflow: auto; min-width: 0; touch-action: pan-y; user-select: none; } + .calendar-pane { overflow: auto; min-width: 0; touch-action: pan-y pinch-zoom; user-select: none; } /* ── Resize Handle ── */ .resize-handle { width: 6px; cursor: col-resize; background: transparent; position: relative; z-index: 10; transition: background 0.15s; }