@luckydye/calendar 1.3.0 → 1.3.2

package/src/layers/GridLayer.ts

@@ -0,0 +1,296 @@
+import { CalendarInternal } from "../CalendarInternal.js";
+import type { CalendarLayer, LayerContext } from "../CalendarLayer.js";
+
+export function createGridLayer(): CalendarLayer {
+	return {
+		name: "grid",
+		enabled: true,
+		render(lc: LayerContext): void {
+			const {
+				ctx,
+				width,
+				height,
+				scrollTop,
+				dayWidth,
+				dayHeight,
+				leftGutterWidth,
+				columnsPerRow,
+				rowsPerWeek,
+				visibleWeeks,
+				allWeeks,
+				fontFamily,
+				styles,
+				getDayVisualPosition,
+				filter,
+			} = lc;
+
+			const today = new Date();
+			const showTimeScale = dayHeight >= 300;
+
+			// Draw today highlight and current time indicator
+			for (const week of visibleWeeks) {
+				const todayIndex = week.days.findIndex((d) =>
+					CalendarInternal.isSameDay(d, today),
+				);
+				if (todayIndex >= 0) {
+					const { row, col } = getDayVisualPosition(todayIndex);
+					const x = leftGutterWidth + col * dayWidth;
+					const dayY = week.yOffset + row * dayHeight - scrollTop;
+					ctx.fillStyle =
+						styles["--bg-today"] || "rgba(255, 255, 255, 0.05)";
+					ctx.fillRect(x, dayY, dayWidth, dayHeight);
+
+					if (showTimeScale) {
+						const now = new Date();
+						const currentMinutes =
+							now.getHours() * 60 + now.getMinutes();
+						const timeY =
+							dayY + (currentMinutes / 1440) * dayHeight;
+						if (timeY >= 0 && timeY <= height) {
+							ctx.strokeStyle =
+								styles["--accent-current-time"] ||
+								"rgba(255, 0, 0, 0.8)";
+							ctx.lineWidth = 1;
+							ctx.beginPath();
+							ctx.moveTo(x, timeY);
+							ctx.lineTo(x + dayWidth, timeY);
+							ctx.stroke();
+							ctx.lineWidth = 1;
+						}
+					}
+				}
+			}
+
+			// Draw grid lines
+			const gridColor =
+				styles["--grid-color"] || "rgba(255, 255, 255, 0.1)";
+			ctx.strokeStyle = gridColor;
+			ctx.lineWidth = 1;
+
+			// Vertical lines (day separators)
+			for (let i = 1; i <= columnsPerRow; i++) {
+				const x = leftGutterWidth + i * dayWidth;
+				ctx.beginPath();
+				ctx.moveTo(x, 0);
+				ctx.lineTo(x, height);
+				ctx.stroke();
+			}
+
+			// Horizontal lines (week separators) and left gutter content
+			for (let i = 0; i < visibleWeeks.length; i++) {
+				const week = visibleWeeks[i];
+				if (!week) continue;
+				const y = week.yOffset - scrollTop;
+
+				// Draw gap indicator if there are hidden weeks before this one
+				if (filter && i > 0) {
+					const prevWeek = visibleWeeks[i - 1];
+					if (!prevWeek) continue;
+					const prevWeekIndex = allWeeks.indexOf(prevWeek);
+					const currentWeekIndex = allWeeks.indexOf(week);
+					const hiddenWeeks = currentWeekIndex - prevWeekIndex - 1;
+
+					if (hiddenWeeks > 0) {
+						const gapY = y;
+						const gridColorStrong =
+							styles["--grid-color-strong"] ||
+							"rgba(255, 255, 255, 0.3)";
+						ctx.strokeStyle = gridColorStrong;
+						ctx.lineWidth = 1;
+						ctx.setLineDash([4, 4]);
+						ctx.beginPath();
+						ctx.moveTo(leftGutterWidth, gapY);
+						ctx.lineTo(width, gapY);
+						ctx.stroke();
+						ctx.setLineDash([]);
+
+						const textMuted =
+							styles["--text-muted"] ||
+							"rgba(255, 255, 255, 0.4)";
+						ctx.fillStyle = textMuted;
+						ctx.textAlign = "center";
+						const ellipsisText = `⋯ ${hiddenWeeks} week${hiddenWeeks > 1 ? "s" : ""}`;
+
+						const textWidth =
+							ctx.measureText(ellipsisText).width;
+						const pillPadding = 8;
+						const pillX =
+							(leftGutterWidth + width) / 2 -
+							textWidth / 2 -
+							pillPadding;
+						const pillY = gapY - 8;
+						const pillWidth = textWidth + pillPadding * 2;
+						const pillHeight = 16;
+
+						const bgPrimary =
+							styles["--bg-primary"] ||
+							"rgba(30, 30, 30, 0.9)";
+						ctx.fillStyle = bgPrimary;
+						ctx.beginPath();
+						ctx.roundRect(
+							pillX,
+							pillY,
+							pillWidth,
+							pillHeight,
+							8,
+						);
+						ctx.fill();
+
+						ctx.fillStyle = textMuted;
+						ctx.fillText(
+							ellipsisText,
+							(leftGutterWidth + width) / 2,
+							gapY + 4,
+						);
+					}
+				}
+
+				// Week separator line
+				ctx.strokeStyle = gridColor;
+				ctx.beginPath();
+				ctx.moveTo(leftGutterWidth, y);
+				ctx.lineTo(width, y);
+				ctx.stroke();
+
+				// Horizontal lines between visual rows within this week
+				for (let row = 1; row < rowsPerWeek; row++) {
+					const rowY = y + row * dayHeight;
+					if (rowY >= 0 && rowY <= height) {
+						ctx.beginPath();
+						ctx.moveTo(leftGutterWidth, rowY);
+						ctx.lineTo(width, rowY);
+						ctx.stroke();
+					}
+				}
+
+				// Left gutter: hour lines and labels
+				const hourLabelOpacity = Math.max(
+					0,
+					Math.min(1, (dayHeight - 300) / 300),
+				);
+
+				ctx.font = `500 11px ${fontFamily}`;
+				ctx.textBaseline = "bottom";
+				ctx.textAlign = "right";
+
+				const textMuted =
+					styles["--text-muted"] || "rgba(255, 255, 255, 0.4)";
+				ctx.strokeStyle = gridColor.replace(
+					/[\d.]+\)$/,
+					`${0.05 * hourLabelOpacity})`,
+				);
+				ctx.fillStyle = textMuted.replace(
+					/[\d.]+\)$/,
+					`${0.4 * hourLabelOpacity})`,
+				);
+
+				for (let row = 0; row < rowsPerWeek; row++) {
+					const rowY = y + row * dayHeight;
+					for (let hour = 0; hour < 24; hour++) {
+						const hourY = rowY + (hour / 24) * dayHeight;
+						if (hourY >= 0 && hourY <= height) {
+							ctx.beginPath();
+							ctx.moveTo(leftGutterWidth, hourY);
+							ctx.lineTo(width, hourY);
+							ctx.stroke();
+
+							if (hourLabelOpacity > 0.1) {
+								const label = `${hour.toString().padStart(2, "0")}:00`;
+								ctx.fillText(label, 48, hourY + 4);
+							}
+						}
+					}
+				}
+
+				// Current time indicator in left gutter
+				if (hourLabelOpacity > 0.1) {
+					const todayIndex = week.days.findIndex((d) =>
+						CalendarInternal.isSameDay(d, today),
+					);
+
+					if (todayIndex >= 0) {
+						const { row } = getDayVisualPosition(todayIndex);
+						const currentMinutes =
+							today.getHours() * 60 + today.getMinutes();
+						const timeY =
+							y +
+							row * dayHeight +
+							(currentMinutes / 1440) * dayHeight;
+
+						if (timeY >= 0 && timeY <= height) {
+							const hours = today
+								.getHours()
+								.toString()
+								.padStart(2, "0");
+							const minutes = today
+								.getMinutes()
+								.toString()
+								.padStart(2, "0");
+							const timeText = `${hours}:${minutes}`;
+
+							ctx.save();
+							ctx.textAlign = "right";
+							ctx.textBaseline = "middle";
+
+							const textWidth =
+								ctx.measureText(timeText).width;
+							const bgPaddingX = 6;
+							const textX = 48;
+							const textY = timeY;
+
+							const bgElevated =
+								styles["--bg-elevated"] ||
+								"rgba(0, 0, 0, 0.7)";
+							ctx.fillStyle = bgElevated;
+							ctx.beginPath();
+							ctx.roundRect(
+								textX - textWidth - bgPaddingX,
+								textY - 8,
+								textWidth + bgPaddingX * 2,
+								16,
+								4,
+							);
+							ctx.fill();
+
+							ctx.fillStyle =
+								styles["--text-primary"] ||
+								"rgba(255, 255, 255, 1)";
+							ctx.fillText(timeText, textX, textY);
+							ctx.restore();
+						}
+					}
+				}
+
+				// Week number - sticky within visible portion
+				const weekNumberOpacity = Math.max(
+					0,
+					Math.min(1, 1 - (dayHeight - 300) / 50),
+				);
+				const textMutedForWeek =
+					styles["--text-muted"] || "rgba(255, 255, 255, 0.4)";
+				ctx.fillStyle = textMutedForWeek.replace(
+					/[\d.]+\)$/,
+					`${0.4 * weekNumberOpacity})`,
+				);
+				ctx.textAlign = "center";
+				const label = `W${week.weekNumber}`;
+				const weekTop = y;
+				const weekBottom = y + week.height;
+				const labelY = Math.max(
+					14,
+					Math.min(
+						weekTop + week.height / 2 + 4,
+						weekBottom - 4,
+					),
+				);
+				if (
+					labelY >= Math.max(0, weekTop + 4) &&
+					labelY <= Math.min(height, weekBottom) &&
+					weekNumberOpacity > 0.1
+				) {
+					ctx.fillText(label, 30, labelY);
+				}
+			}
+		},
+	};
+}

package/src/layers/TimeseriesHeatmapLayer.ts

@@ -0,0 +1,132 @@
+import type { CalendarEvent, WeekInfo } from "../CalendarInternal.js";
+import type { CalendarLayer, LayerContext } from "../CalendarLayer.js";
+
+export interface HeatmapState {
+  events: CalendarEvent[];
+}
+
+function getBucketMinutes(dayHeight: number): number {
+  if (dayHeight >= 320) return 15;
+  if (dayHeight >= 240) return 30;
+  if (dayHeight >= 160) return 60;
+  return 120;
+}
+
+export function createTimeseriesHeatmapLayer(
+  state: HeatmapState,
+): CalendarLayer {
+  return {
+    name: "timeseries-heatmap",
+    enabled: true,
+    render(lc: LayerContext): void {
+      const {
+        ctx,
+        height,
+        scrollTop,
+        dayWidth,
+        dayHeight,
+        leftGutterWidth,
+        visibleWeeks,
+        allWeeks,
+        getDayVisualPosition,
+      } = lc;
+
+      const events = state.events.filter(
+        (event) => event.visualStyle === "heatmap",
+      );
+      if (events.length === 0 || visibleWeeks.length === 0) return;
+
+      const dayInfoMap = new Map<
+        number,
+        {
+          week: WeekInfo;
+          weekIndex: number;
+          dayIndex: number;
+          row: number;
+          col: number;
+          dayStartMs: number;
+        }
+      >();
+
+      for (const week of visibleWeeks) {
+        const weekIndex = allWeeks.indexOf(week);
+        if (weekIndex < 0) continue;
+        for (let dayIndex = 0; dayIndex < 7; dayIndex++) {
+          const day = week.days[dayIndex];
+          if (!day) continue;
+          const dayStart = new Date(day);
+          dayStart.setHours(0, 0, 0, 0);
+          const { row, col } = getDayVisualPosition(dayIndex);
+          dayInfoMap.set(dayStart.getTime(), {
+            week,
+            weekIndex,
+            dayIndex,
+            row,
+            col,
+            dayStartMs: dayStart.getTime(),
+          });
+        }
+      }
+
+      if (dayInfoMap.size === 0) return;
+
+      const bucketMinutes = getBucketMinutes(dayHeight);
+      const bucketCounts = new Map<
+        string,
+        { count: number; color: string; dayKey: number; bucket: number }
+      >();
+      let maxCount = 0;
+
+      for (const event of events) {
+        const start = event.start;
+        const dayStart = new Date(start);
+        dayStart.setHours(0, 0, 0, 0);
+        const dayKey = dayStart.getTime();
+        const dayInfo = dayInfoMap.get(dayKey);
+        if (!dayInfo) continue;
+
+        const minutesIntoDay = (start.getTime() - dayInfo.dayStartMs) / 60000;
+        if (minutesIntoDay < 0 || minutesIntoDay >= 1440) continue;
+
+        const bucket = Math.floor(minutesIntoDay / bucketMinutes);
+        const color = event.color || "rgba(255, 255, 255, 0.6)";
+        const key = `${dayKey}-${bucket}-${color}`;
+        const entry =
+          bucketCounts.get(key) ||
+          { count: 0, color, dayKey, bucket };
+        entry.count += 1;
+        bucketCounts.set(key, entry);
+        if (entry.count > maxCount) maxCount = entry.count;
+      }
+
+      if (maxCount === 0) return;
+
+      const bucketHeight =
+        (bucketMinutes / 1440) * dayHeight;
+      const minHeight = Math.max(2, bucketHeight);
+
+      for (const entry of bucketCounts.values()) {
+        const dayInfo = dayInfoMap.get(entry.dayKey);
+        if (!dayInfo) continue;
+
+        const intensity = Math.log(entry.count + 1) / Math.log(maxCount + 1);
+        const alpha = 0.08 + intensity * 0.22;
+
+        const x = leftGutterWidth + dayInfo.col * dayWidth + 1;
+        const y =
+          dayInfo.week.yOffset +
+          dayInfo.row * dayHeight +
+          (entry.bucket * bucketMinutes * dayHeight) / 1440 -
+          scrollTop;
+
+        if (y > height || y + minHeight < 0) continue;
+
+        ctx.globalAlpha = alpha;
+        ctx.fillStyle = entry.color;
+        ctx.fillRect(x, y, dayWidth - 2, minHeight);
+      }
+
+      ctx.globalAlpha = 1;
+    },
+  };
+}

package/src/lib.ts

@@ -2,3 +2,4 @@ export * from "./CalendarView.js";
 export * from "./InMemorySource.js";
 export * from "./CalendarInternal.js";
 export * from "./CalendarIntegration.js";
+export * from "./ICal.js";