From b316b024becd2c98ce26d552278ef725f3fceabd Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <ruslanbakiev@dsrptlab.com>
Date: Tue, 24 Feb 2026 01:09:46 +0700
Subject: [PATCH] feat(calendar-lab): replace tldraw with two-layer panzoom
 canvas
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Drop tldraw/React dependency in favor of @panzoom/panzoom with a
two-layer architecture: outline rectangles (borders only) are zoomed
via CSS transforms while HTML content renders at native 1:1 scale
as a fade-in overlay — eliminating blur at any zoom level.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../calendar/lab/CrmCalendarZoomCanvasLab.vue | 676 ++++++++++++++++++
 frontend/app/pages/calendar-zoom-lab.vue      |   4 +-
 2 files changed, 678 insertions(+), 2 deletions(-)
 create mode 100644 frontend/app/components/workspace/calendar/lab/CrmCalendarZoomCanvasLab.vue

diff --git a/frontend/app/components/workspace/calendar/lab/CrmCalendarZoomCanvasLab.vue b/frontend/app/components/workspace/calendar/lab/CrmCalendarZoomCanvasLab.vue
new file mode 100644
index 0000000..330474b
--- /dev/null
+++ b/frontend/app/components/workspace/calendar/lab/CrmCalendarZoomCanvasLab.vue
@@ -0,0 +1,676 @@
+<script setup lang="ts">
+import Panzoom from "@panzoom/panzoom";
+import { computed, nextTick, onBeforeUnmount, onMounted, ref } from "vue";
+import CrmCalendarLabYearRect from "./CrmCalendarLabYearRect.vue";
+import CrmCalendarLabMonthRect from "./CrmCalendarLabMonthRect.vue";
+import CrmCalendarLabWeekRect from "./CrmCalendarLabWeekRect.vue";
+import CrmCalendarLabDayRect from "./CrmCalendarLabDayRect.vue";
+
+/* ------------------------------------------------------------------ */
+/*  Constants                                                          */
+/* ------------------------------------------------------------------ */
+
+type Level = "year" | "month" | "week" | "day";
+type Direction = "in" | "out";
+
+const LEVELS: Level[] = ["year", "month", "week", "day"];
+const LEVEL_LABELS: Record<Level, string> = {
+  year: "Year",
+  month: "Month",
+  week: "Week",
+  day: "Day",
+};
+
+const MONTH_LABELS = [
+  "Jan", "Feb", "Mar", "Apr",
+  "May", "Jun", "Jul", "Aug",
+  "Sep", "Oct", "Nov", "Dec",
+];
+
+const ZOOM_PRIME_STEPS = 2;
+const ZOOM_ANIMATION_MS = 800;
+const CONTENT_FADE_MS = 180;
+const VIEWPORT_PADDING = 20;
+
+/* ------------------------------------------------------------------ */
+/*  Refs                                                               */
+/* ------------------------------------------------------------------ */
+
+const outlineViewportRef = ref<HTMLDivElement | null>(null);
+const outlineSceneRef = ref<HTMLDivElement | null>(null);
+const panzoomRef = ref<ReturnType<typeof Panzoom> | null>(null);
+const resizeObserver = ref<ResizeObserver | null>(null);
+
+const currentLevel = ref<Level>("year");
+const isAnimating = ref(false);
+const contentVisible = ref(true);
+
+const selectedMonth = ref(0);
+const selectedWeek = ref(0);
+const selectedDay = ref(0);
+
+const hoveredMonth = ref(0);
+const hoveredWeek = ref(0);
+const hoveredDay = ref(0);
+
+const primeFocusId = ref("");
+const wheelPrimeDirection = ref<"" | Direction>("");
+const wheelPrimeTicks = ref(0);
+
+let primeTimer: ReturnType<typeof setTimeout> | null = null;
+let animationFrameId: number | null = null;
+let animationToken = 0;
+
+/* ------------------------------------------------------------------ */
+/*  Computed                                                           */
+/* ------------------------------------------------------------------ */
+
+const currentLevelIndex = computed(() => LEVELS.indexOf(currentLevel.value));
+const canZoomIn = computed(() => currentLevelIndex.value < LEVELS.length - 1);
+
+/* ------------------------------------------------------------------ */
+/*  Outline geometry — positions for each level's child outlines       */
+/* ------------------------------------------------------------------ */
+
+const SCENE_W = 1400;
+const SCENE_H = 900;
+
+/** Outline rects are absolutely positioned inside the scene. */
+function yearOutlines() {
+  const cols = 4;
+  const gap = 10;
+  const pad = 14;
+  const areaW = SCENE_W - 160 - pad * 2;
+  const areaH = SCENE_H - 100 - pad * 2;
+  const cardW = (areaW - gap * (cols - 1)) / cols;
+  const cardH = (areaH - gap * 2) / 3;
+  const startX = 80 + pad;
+  const startY = 50 + pad;
+
+  return Array.from({ length: 12 }, (_, i) => {
+    const col = i % cols;
+    const row = Math.floor(i / cols);
+    return {
+      id: `outline-month-${i}`,
+      x: startX + col * (cardW + gap),
+      y: startY + row * (cardH + gap),
+      w: cardW,
+      h: cardH,
+    };
+  });
+}
+
+function monthOutlines() {
+  const rows = 6;
+  const gap = 8;
+  const pad = 14;
+  const areaW = SCENE_W - 160 - pad * 2;
+  const areaH = SCENE_H - 100 - pad * 2;
+  const rowH = (areaH - gap * (rows - 1)) / rows;
+  const startX = 80 + pad;
+  const startY = 50 + pad;
+
+  return Array.from({ length: rows }, (_, i) => ({
+    id: `outline-week-${i}`,
+    x: startX,
+    y: startY + i * (rowH + gap),
+    w: areaW,
+    h: rowH,
+  }));
+}
+
+function weekOutlines() {
+  const cols = 7;
+  const gap = 6;
+  const pad = 14;
+  const areaW = SCENE_W - 160 - pad * 2;
+  const areaH = SCENE_H - 100 - pad * 2;
+  const colW = (areaW - gap * (cols - 1)) / cols;
+  const startX = 80 + pad;
+  const startY = 50 + pad;
+
+  return Array.from({ length: cols }, (_, i) => ({
+    id: `outline-day-${i}`,
+    x: startX + i * (colW + gap),
+    y: startY,
+    w: colW,
+    h: areaH,
+  }));
+}
+
+function dayOutlines() {
+  const rows = 12;
+  const gap = 5;
+  const pad = 14;
+  const areaW = SCENE_W - 160 - pad * 2;
+  const areaH = SCENE_H - 100 - pad * 2;
+  const rowH = (areaH - gap * (rows - 1)) / rows;
+  const startX = 80 + pad;
+  const startY = 50 + pad;
+
+  return Array.from({ length: rows }, (_, i) => ({
+    id: `outline-slot-${i}`,
+    x: startX,
+    y: startY + i * (rowH + gap),
+    w: areaW,
+    h: rowH,
+  }));
+}
+
+const outlineRects = computed(() => {
+  switch (currentLevel.value) {
+    case "year": return yearOutlines();
+    case "month": return monthOutlines();
+    case "week": return weekOutlines();
+    case "day": return dayOutlines();
+    default: return [];
+  }
+});
+
+/* ------------------------------------------------------------------ */
+/*  Camera helpers (reused from CrmCalendarZoomLab)                    */
+/* ------------------------------------------------------------------ */
+
+function easing(t: number) {
+  return 1 - (1 - t) ** 3;
+}
+
+function stopCameraAnimation() {
+  animationToken += 1;
+  if (animationFrameId !== null) {
+    cancelAnimationFrame(animationFrameId);
+    animationFrameId = null;
+  }
+}
+
+function applyTransform(transform: { x: number; y: number; scale: number }) {
+  const panzoom = panzoomRef.value;
+  if (!panzoom) return;
+  panzoom.zoom(transform.scale, { animate: false, force: true });
+  panzoom.pan(transform.x, transform.y, { animate: false, force: true });
+}
+
+function computeTransformForRect(rect: { x: number; y: number; w: number; h: number }) {
+  const viewport = outlineViewportRef.value;
+  if (!viewport) return null;
+
+  const vw = Math.max(1, viewport.clientWidth);
+  const vh = Math.max(1, viewport.clientHeight);
+  const safeW = Math.max(1, vw - VIEWPORT_PADDING * 2);
+  const safeH = Math.max(1, vh - VIEWPORT_PADDING * 2);
+  const scale = Math.min(safeW / rect.w, safeH / rect.h);
+
+  const x = VIEWPORT_PADDING + (safeW - rect.w * scale) / 2 - rect.x * scale;
+  const y = VIEWPORT_PADDING + (safeH - rect.h * scale) / 2 - rect.y * scale;
+
+  return { x, y, scale };
+}
+
+function computeTransformForLevel() {
+  const viewport = outlineViewportRef.value;
+  if (!viewport) return null;
+
+  // Fit the whole scene container
+  const vw = Math.max(1, viewport.clientWidth);
+  const vh = Math.max(1, viewport.clientHeight);
+  const safeW = Math.max(1, vw - VIEWPORT_PADDING * 2);
+  const safeH = Math.max(1, vh - VIEWPORT_PADDING * 2);
+
+  // Scene area: the year article area
+  const areaX = 80;
+  const areaY = 50;
+  const areaW = SCENE_W - 160;
+  const areaH = SCENE_H - 100;
+
+  const scale = Math.min(safeW / areaW, safeH / areaH);
+  const x = VIEWPORT_PADDING + (safeW - areaW * scale) / 2 - areaX * scale;
+  const y = VIEWPORT_PADDING + (safeH - areaH * scale) / 2 - areaY * scale;
+
+  return { x, y, scale };
+}
+
+async function animateCamera(
+  target: { x: number; y: number; scale: number },
+  duration: number,
+): Promise<void> {
+  const panzoom = panzoomRef.value;
+  if (!panzoom) return;
+
+  if (duration <= 0) {
+    applyTransform(target);
+    return;
+  }
+
+  stopCameraAnimation();
+  const localToken = animationToken;
+  const startPan = panzoom.getPan();
+  const startScale = panzoom.getScale();
+  const startAt = performance.now();
+
+  await new Promise<void>((resolve) => {
+    const step = (now: number) => {
+      if (localToken !== animationToken) {
+        resolve();
+        return;
+      }
+
+      const elapsed = now - startAt;
+      const t = Math.max(0, Math.min(1, elapsed / duration));
+      const k = easing(t);
+
+      applyTransform({
+        x: startPan.x + (target.x - startPan.x) * k,
+        y: startPan.y + (target.y - startPan.y) * k,
+        scale: startScale + (target.scale - startScale) * k,
+      });
+
+      if (t < 1) {
+        animationFrameId = requestAnimationFrame(step);
+        return;
+      }
+
+      animationFrameId = null;
+      resolve();
+    };
+
+    animationFrameId = requestAnimationFrame(step);
+  });
+}
+
+function fitLevelImmediate() {
+  const transform = computeTransformForLevel();
+  if (transform) applyTransform(transform);
+}
+
+/* ------------------------------------------------------------------ */
+/*  Content fade helpers                                               */
+/* ------------------------------------------------------------------ */
+
+function fadeOutContent(): Promise<void> {
+  contentVisible.value = false;
+  return new Promise((r) => setTimeout(r, CONTENT_FADE_MS));
+}
+
+function fadeInContent(): Promise<void> {
+  contentVisible.value = true;
+  return new Promise((r) => setTimeout(r, CONTENT_FADE_MS));
+}
+
+/* ------------------------------------------------------------------ */
+/*  Zoom logic                                                         */
+/* ------------------------------------------------------------------ */
+
+function resetWheelPrime() {
+  wheelPrimeDirection.value = "";
+  wheelPrimeTicks.value = 0;
+}
+
+function startPrime(focusId: string) {
+  if (primeTimer) {
+    clearTimeout(primeTimer);
+    primeTimer = null;
+  }
+  primeFocusId.value = focusId;
+  primeTimer = setTimeout(() => {
+    primeFocusId.value = "";
+  }, 170);
+}
+
+function getHoveredIndex(): number {
+  switch (currentLevel.value) {
+    case "year": return hoveredMonth.value;
+    case "month": return hoveredWeek.value;
+    case "week": return hoveredDay.value;
+    default: return 0;
+  }
+}
+
+async function zoomIn() {
+  if (isAnimating.value) return;
+  if (currentLevelIndex.value >= LEVELS.length - 1) return;
+
+  const hovIdx = getHoveredIndex();
+  isAnimating.value = true;
+
+  // 1. Fade out content
+  await fadeOutContent();
+
+  // 2. Animate outline layer to target rect
+  const rects = outlineRects.value;
+  const targetRect = rects[hovIdx];
+  if (targetRect) {
+    const transform = computeTransformForRect(targetRect);
+    if (transform) {
+      await animateCamera(transform, ZOOM_ANIMATION_MS);
+    }
+  }
+
+  // 3. Update selection and switch level
+  switch (currentLevel.value) {
+    case "year":
+      selectedMonth.value = hovIdx;
+      selectedWeek.value = 0;
+      selectedDay.value = 0;
+      break;
+    case "month":
+      selectedWeek.value = hovIdx;
+      selectedDay.value = 0;
+      break;
+    case "week":
+      selectedDay.value = hovIdx;
+      break;
+  }
+
+  const nextIdx = currentLevelIndex.value + 1;
+  currentLevel.value = LEVELS[nextIdx]!;
+
+  // 4. Reset panzoom to fit new level (instant, no animation)
+  await nextTick();
+  fitLevelImmediate();
+
+  // 5. Fade in content
+  await fadeInContent();
+
+  isAnimating.value = false;
+}
+
+async function zoomOut() {
+  if (isAnimating.value) return;
+  if (currentLevelIndex.value <= 0) return;
+
+  isAnimating.value = true;
+
+  // 1. Fade out content
+  await fadeOutContent();
+
+  // 2. Switch to parent level
+  const prevIdx = currentLevelIndex.value - 1;
+  currentLevel.value = LEVELS[prevIdx]!;
+
+  // 3. Reset panzoom to fit — but start zoomed into the child position
+  await nextTick();
+
+  // Figure out which child we came from to start the camera there
+  const rects = outlineRects.value;
+  let fromIdx = 0;
+  switch (currentLevel.value) {
+    case "year": fromIdx = selectedMonth.value; break;
+    case "month": fromIdx = selectedWeek.value; break;
+    case "week": fromIdx = selectedDay.value; break;
+  }
+
+  const fromRect = rects[fromIdx];
+  if (fromRect) {
+    const zoomedTransform = computeTransformForRect(fromRect);
+    if (zoomedTransform) applyTransform(zoomedTransform);
+  }
+
+  // 4. Animate out to fit the whole level
+  const fitTransform = computeTransformForLevel();
+  if (fitTransform) {
+    await animateCamera(fitTransform, ZOOM_ANIMATION_MS);
+  }
+
+  // 5. Fade in content
+  await fadeInContent();
+
+  isAnimating.value = false;
+}
+
+async function resetToYear() {
+  if (isAnimating.value) return;
+  if (currentLevel.value === "year") return;
+
+  isAnimating.value = true;
+  await fadeOutContent();
+
+  currentLevel.value = "year";
+  await nextTick();
+  fitLevelImmediate();
+
+  await fadeInContent();
+  isAnimating.value = false;
+}
+
+function onWheel(event: WheelEvent) {
+  event.preventDefault();
+  if (isAnimating.value) return;
+
+  const direction: Direction = event.deltaY < 0 ? "in" : "out";
+
+  if (direction === "in" && !canZoomIn.value) return;
+  if (direction === "out" && currentLevelIndex.value <= 0) return;
+
+  if (wheelPrimeDirection.value !== direction) {
+    wheelPrimeDirection.value = direction;
+    wheelPrimeTicks.value = 0;
+  }
+
+  if (wheelPrimeTicks.value < ZOOM_PRIME_STEPS) {
+    wheelPrimeTicks.value += 1;
+
+    // Visual hint on the hovered outline
+    if (direction === "in") {
+      const idx = getHoveredIndex();
+      const rects = outlineRects.value;
+      if (rects[idx]) {
+        startPrime(rects[idx].id);
+      }
+    }
+    return;
+  }
+
+  resetWheelPrime();
+
+  if (direction === "in") {
+    void zoomIn();
+  } else {
+    void zoomOut();
+  }
+}
+
+function onDoubleClick() {
+  resetWheelPrime();
+  void resetToYear();
+}
+
+function isPrime(id: string) {
+  return primeFocusId.value === id;
+}
+
+/* ------------------------------------------------------------------ */
+/*  Lifecycle                                                          */
+/* ------------------------------------------------------------------ */
+
+onMounted(async () => {
+  await nextTick();
+
+  if (outlineSceneRef.value) {
+    panzoomRef.value = Panzoom(outlineSceneRef.value, {
+      animate: false,
+      maxScale: 24,
+      minScale: 0.08,
+      disablePan: true,
+      origin: "0 0",
+    });
+  }
+
+  fitLevelImmediate();
+
+  resizeObserver.value = new ResizeObserver(() => {
+    if (!isAnimating.value) fitLevelImmediate();
+  });
+
+  if (outlineViewportRef.value) {
+    resizeObserver.value.observe(outlineViewportRef.value);
+  }
+});
+
+onBeforeUnmount(() => {
+  if (primeTimer) clearTimeout(primeTimer);
+  stopCameraAnimation();
+  resizeObserver.value?.disconnect();
+  panzoomRef.value?.destroy();
+  panzoomRef.value = null;
+});
+</script>
+
+<template>
+  <section class="canvas-lab-root">
+    <header class="canvas-lab-toolbar">
+      <p class="canvas-lab-level-text">
+        {{ LEVEL_LABELS[currentLevel] }}
+      </p>
+    </header>
+
+    <div
+      ref="outlineViewportRef"
+      class="canvas-lab-viewport"
+      :class="canZoomIn ? 'cursor-zoom-in' : 'cursor-zoom-out'"
+      @wheel.prevent="onWheel"
+      @dblclick="onDoubleClick"
+    >
+      <!-- Layer 1: Outline rectangles (panzoom-controlled, can blur — they're just borders) -->
+      <div ref="outlineSceneRef" class="canvas-lab-scene">
+        <div
+          v-for="(rect, idx) in outlineRects"
+          :key="rect.id"
+          class="canvas-outline-rect"
+          :class="[
+            isPrime(rect.id) ? 'canvas-outline-prime' : '',
+          ]"
+          :style="{
+            left: `${rect.x}px`,
+            top: `${rect.y}px`,
+            width: `${rect.w}px`,
+            height: `${rect.h}px`,
+          }"
+          @mouseenter="
+            currentLevel === 'year' ? (hoveredMonth = idx) :
+            currentLevel === 'month' ? (hoveredWeek = idx) :
+            currentLevel === 'week' ? (hoveredDay = idx) :
+            undefined
+          "
+        />
+      </div>
+
+      <!-- Layer 2: Content overlay (always 1:1 scale, no blur) -->
+      <div
+        class="canvas-content-layer"
+        :class="contentVisible ? 'canvas-content-visible' : ''"
+      >
+        <CrmCalendarLabYearRect
+          v-if="currentLevel === 'year'"
+          :is-active="true"
+          :is-loading="false"
+          :is-loaded="true"
+          :show-content="true"
+          :pulse-scale="1"
+        />
+        <CrmCalendarLabMonthRect
+          v-if="currentLevel === 'month'"
+          :is-active="true"
+          :is-loading="false"
+          :is-loaded="true"
+          :show-content="true"
+          :pulse-scale="1"
+        />
+        <CrmCalendarLabWeekRect
+          v-if="currentLevel === 'week'"
+          :is-active="true"
+          :is-loading="false"
+          :is-loaded="true"
+          :show-content="true"
+          :pulse-scale="1"
+        />
+        <CrmCalendarLabDayRect
+          v-if="currentLevel === 'day'"
+          :is-active="true"
+          :is-loading="false"
+          :is-loaded="true"
+          :show-content="true"
+          :pulse-scale="1"
+        />
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.canvas-lab-root {
+  height: calc(100dvh - 2.5rem);
+  min-height: 620px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 10px;
+}
+
+.canvas-lab-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.canvas-lab-level-text {
+  font-size: 0.78rem;
+  color: color-mix(in oklab, var(--color-base-content) 72%, transparent);
+}
+
+.canvas-lab-viewport {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  border-radius: 14px;
+  border: 1px solid color-mix(in oklab, var(--color-base-content) 18%, transparent);
+  background:
+    radial-gradient(circle at 15% 15%, color-mix(in oklab, var(--color-base-content) 6%, transparent), transparent 40%),
+    color-mix(in oklab, var(--color-base-100) 94%, transparent);
+  overflow: hidden;
+}
+
+.canvas-lab-scene {
+  position: absolute;
+  width: 1400px;
+  height: 900px;
+  will-change: transform;
+}
+
+/* Outline rects — just borders, no content */
+.canvas-outline-rect {
+  position: absolute;
+  border-radius: 12px;
+  border: 1px solid color-mix(in oklab, var(--color-base-content) 22%, transparent);
+  background: color-mix(in oklab, var(--color-base-200) 40%, transparent);
+  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
+}
+
+.canvas-outline-rect:hover {
+  border-color: color-mix(in oklab, var(--color-primary) 60%, transparent);
+  box-shadow: 0 0 0 2px color-mix(in oklab, var(--color-primary) 24%, transparent) inset;
+}
+
+.canvas-outline-prime {
+  transform: scale(1.04);
+  border-color: color-mix(in oklab, var(--color-primary) 80%, transparent);
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary) 40%, transparent) inset;
+}
+
+/* Content overlay — always native scale */
+.canvas-content-layer {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  opacity: 0;
+  transition: opacity 180ms ease;
+  pointer-events: none;
+}
+
+.canvas-content-visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+</style>
diff --git a/frontend/app/pages/calendar-zoom-lab.vue b/frontend/app/pages/calendar-zoom-lab.vue
index 5b82a7d..a43aae3 100644
--- a/frontend/app/pages/calendar-zoom-lab.vue
+++ b/frontend/app/pages/calendar-zoom-lab.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import CrmCalendarZoomTldrawLab from "~~/app/components/workspace/calendar/lab/CrmCalendarZoomTldrawLab.client.vue";
+import CrmCalendarZoomCanvasLab from "~~/app/components/workspace/calendar/lab/CrmCalendarZoomCanvasLab.vue";
 </script>
 
 <template>
   <main class="h-dvh w-full bg-base-200/40 p-2">
-    <CrmCalendarZoomTldrawLab />
+    <CrmCalendarZoomCanvasLab />
   </main>
 </template>