clientsflow/frontend/app/components/workspace/calendar/lab/CrmCalendarZoomCanvasLab.vue

<script setup lang="ts">
import gsap from "gsap";
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";

/* ------------------------------------------------------------------ */
/*  Types & 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 DAY_LABELS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];

const ZOOM_PRIME_STEPS = 2;
const FLY_DURATION = 0.65;
const FADE_DURATION = 0.18;
const EASE = "power3.inOut";

/* ------------------------------------------------------------------ */
/*  Refs                                                               */
/* ------------------------------------------------------------------ */

const viewportRef = ref<HTMLDivElement | null>(null);
const flyRectRef = ref<HTMLDivElement | null>(null);
const contentRef = ref<HTMLDivElement | null>(null);
const gridLayerRef = ref<HTMLDivElement | null>(null);

const currentLevel = ref<Level>("year");
const isAnimating = ref(false);
const contentVisible = ref(true);
const flyVisible = ref(false);
const flyLabel = ref("");

// Reactive viewport dimensions (updated by ResizeObserver)
const vpWidth = ref(0);
const vpHeight = ref(0);

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 activeTweens: gsap.core.Tween[] = [];

/* ------------------------------------------------------------------ */
/*  Computed                                                           */
/* ------------------------------------------------------------------ */

const currentLevelIndex = computed(() => LEVELS.indexOf(currentLevel.value));
const canZoomIn = computed(() => currentLevelIndex.value < LEVELS.length - 1);

/* ------------------------------------------------------------------ */
/*  Grid definitions                                                   */
/* ------------------------------------------------------------------ */

function getChildCount(level: Level): number {
  switch (level) {
    case "year": return 12;
    case "month": return 6;
    case "week": return 7;
    case "day": return 12;
    default: return 0;
  }
}

function getGridConfig(level: Level) {
  switch (level) {
    case "year": return { cols: 4, rows: 3, gap: 10 };
    case "month": return { cols: 1, rows: 6, gap: 8 };
    case "week": return { cols: 7, rows: 1, gap: 6 };
    case "day": return { cols: 1, rows: 12, gap: 5 };
    default: return { cols: 1, rows: 1, gap: 0 };
  }
}

function getChildLabel(level: Level, index: number): string {
  switch (level) {
    case "year": return MONTH_LABELS[index] ?? "";
    case "month": return `W${index + 1}`;
    case "week": return DAY_LABELS[index] ?? "";
    case "day": return `${8 + index}:00`;
    default: return "";
  }
}

function computeGridRects(level: Level, vw: number, vh: number) {
  const count = getChildCount(level);
  const { cols, rows, gap } = getGridConfig(level);
  const pad = 24;

  const areaW = vw - pad * 2;
  const areaH = vh - pad * 2;
  const cellW = (areaW - gap * Math.max(0, cols - 1)) / cols;
  const cellH = (areaH - gap * Math.max(0, rows - 1)) / rows;

  return Array.from({ length: count }, (_, i) => {
    const col = i % cols;
    const row = Math.floor(i / cols);
    return {
      id: `cell-${level}-${i}`,
      x: pad + col * (cellW + gap),
      y: pad + row * (cellH + gap),
      w: cellW,
      h: cellH,
      label: getChildLabel(level, i),
      index: i,
    };
  });
}

// Reactive: recomputes when currentLevel or vpWidth/vpHeight change
const gridRects = computed(() => {
  if (vpWidth.value <= 0 || vpHeight.value <= 0) return [];
  return computeGridRects(currentLevel.value, vpWidth.value, vpHeight.value);
});

/* ------------------------------------------------------------------ */
/*  GSAP helpers                                                       */
/* ------------------------------------------------------------------ */

/** Promise wrapper around gsap.to */
function tweenTo(target: gsap.TweenTarget, vars: gsap.TweenVars): Promise<void> {
  return new Promise((resolve) => {
    const t = gsap.to(target, {
      ...vars,
      onComplete: () => {
        activeTweens = activeTweens.filter((tw) => tw !== t);
        resolve();
      },
    });
    activeTweens.push(t);
  });
}

/** Kill all running tweens */
function killAllTweens() {
  for (const t of activeTweens) t.kill();
  activeTweens = [];
}

/** Reset opacity of content and grid to safe state */
function resetOpacity() {
  const c = contentRef.value;
  const g = gridLayerRef.value;
  if (c) gsap.set(c, { opacity: 1 });
  if (g) gsap.set(g, { opacity: 1 });
}

/* ------------------------------------------------------------------ */
/*  Zoom In                                                            */
/* ------------------------------------------------------------------ */

async function zoomIn() {
  if (isAnimating.value) return;
  if (currentLevelIndex.value >= LEVELS.length - 1) return;

  const hovIdx = getHoveredIndex();
  const rects = gridRects.value;
  const targetRect = rects[hovIdx];
  if (!targetRect) return;

  const flyEl = flyRectRef.value;
  const contentEl = contentRef.value;
  const gridEl = gridLayerRef.value;
  if (!flyEl || !contentEl || !gridEl) return;

  isAnimating.value = true;
  killAllTweens();

  const vw = vpWidth.value;
  const vh = vpHeight.value;
  const pad = 8;

  // 1. Fade out content + grid
  await Promise.all([
    tweenTo(contentEl, { opacity: 0, duration: FADE_DURATION, ease: "power2.in" }),
    tweenTo(gridEl, { opacity: 0, duration: FADE_DURATION, ease: "power2.in" }),
  ]);

  // 2. Position fly rect at source cell, show it
  flyLabel.value = targetRect.label;
  gsap.set(flyEl, {
    left: targetRect.x,
    top: targetRect.y,
    width: targetRect.w,
    height: targetRect.h,
    opacity: 1,
    borderRadius: 12,
  });
  flyVisible.value = true;

  // 3. Animate fly rect → full viewport (morphing aspect ratio)
  await tweenTo(flyEl, {
    left: pad,
    top: pad,
    width: vw - pad * 2,
    height: vh - pad * 2,
    borderRadius: 14,
    duration: FLY_DURATION,
    ease: EASE,
  });

  // 4. Update selection
  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;
  }

  // 5. Switch level
  currentLevel.value = LEVELS[currentLevelIndex.value + 1]!;

  // 6. Hide fly rect, prepare content
  flyVisible.value = false;
  contentVisible.value = true;
  gsap.set(contentEl, { opacity: 0 });
  gsap.set(gridEl, { opacity: 0 });
  await nextTick();

  // 7. Fade in new content + grid
  await Promise.all([
    tweenTo(contentEl, { opacity: 1, duration: 0.25, ease: "power2.out" }),
    tweenTo(gridEl, { opacity: 1, duration: 0.25, ease: "power2.out" }),
  ]);

  isAnimating.value = false;
}

/* ------------------------------------------------------------------ */
/*  Zoom Out                                                           */
/* ------------------------------------------------------------------ */

async function zoomOut() {
  if (isAnimating.value) return;
  if (currentLevelIndex.value <= 0) return;

  const flyEl = flyRectRef.value;
  const contentEl = contentRef.value;
  const gridEl = gridLayerRef.value;
  if (!flyEl || !contentEl || !gridEl) return;

  isAnimating.value = true;
  killAllTweens();

  const vw = vpWidth.value;
  const vh = vpHeight.value;
  const pad = 8;

  // Figure out which child index we came from
  const prevIdx = currentLevelIndex.value - 1;
  const parentLevel = LEVELS[prevIdx]!;
  let fromIdx = 0;
  switch (parentLevel) {
    case "year": fromIdx = selectedMonth.value; break;
    case "month": fromIdx = selectedWeek.value; break;
    case "week": fromIdx = selectedDay.value; break;
  }

  // 1. Fade out current content + grid
  await Promise.all([
    tweenTo(contentEl, { opacity: 0, duration: FADE_DURATION, ease: "power2.in" }),
    tweenTo(gridEl, { opacity: 0, duration: FADE_DURATION, ease: "power2.in" }),
  ]);

  // 2. Position fly rect at full viewport, show it
  flyLabel.value = getChildLabel(parentLevel, fromIdx);
  gsap.set(flyEl, {
    left: pad,
    top: pad,
    width: vw - pad * 2,
    height: vh - pad * 2,
    opacity: 1,
    borderRadius: 14,
  });
  flyVisible.value = true;

  // 3. Switch to parent level so gridRects recomputes
  contentVisible.value = false;
  currentLevel.value = parentLevel;
  await nextTick();

  // 4. Get child rect position in the new grid
  const rects = gridRects.value;
  const childRect = rects[fromIdx];

  if (childRect) {
    // 5. Animate fly rect → child cell position (shrink + morph)
    await tweenTo(flyEl, {
      left: childRect.x,
      top: childRect.y,
      width: childRect.w,
      height: childRect.h,
      borderRadius: 12,
      duration: FLY_DURATION,
      ease: EASE,
    });
  }

  // 6. Hide fly rect, show parent content
  flyVisible.value = false;
  contentVisible.value = true;
  gsap.set(contentEl, { opacity: 0 });
  gsap.set(gridEl, { opacity: 0 });
  await nextTick();

  // 7. Fade in parent content + grid
  await Promise.all([
    tweenTo(contentEl, { opacity: 1, duration: 0.25, ease: "power2.out" }),
    tweenTo(gridEl, { opacity: 1, duration: 0.25, ease: "power2.out" }),
  ]);

  isAnimating.value = false;
}

/* ------------------------------------------------------------------ */
/*  Reset to year                                                      */
/* ------------------------------------------------------------------ */

async function resetToYear() {
  if (isAnimating.value) return;
  if (currentLevel.value === "year") return;

  const contentEl = contentRef.value;
  const gridEl = gridLayerRef.value;
  if (!contentEl || !gridEl) return;

  isAnimating.value = true;
  killAllTweens();

  // 1. Fade out
  await Promise.all([
    tweenTo(contentEl, { opacity: 0, duration: 0.2, ease: "power2.in" }),
    tweenTo(gridEl, { opacity: 0, duration: 0.2, ease: "power2.in" }),
  ]);

  // 2. Switch level
  currentLevel.value = "year";
  contentVisible.value = true;
  gsap.set(contentEl, { opacity: 0 });
  gsap.set(gridEl, { opacity: 0 });
  await nextTick();

  // 3. Fade in
  await Promise.all([
    tweenTo(contentEl, { opacity: 1, duration: 0.3, ease: "power2.out" }),
    tweenTo(gridEl, { opacity: 1, duration: 0.3, ease: "power2.out" }),
  ]);

  isAnimating.value = false;
}

/* ------------------------------------------------------------------ */
/*  Wheel / interaction                                                */
/* ------------------------------------------------------------------ */

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;
  }
}

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;

    if (direction === "in") {
      const idx = getHoveredIndex();
      const rects = gridRects.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                                                          */
/* ------------------------------------------------------------------ */

let resizeObserver: ResizeObserver | null = null;

onMounted(() => {
  // Initial measurement
  if (viewportRef.value) {
    vpWidth.value = viewportRef.value.clientWidth;
    vpHeight.value = viewportRef.value.clientHeight;
  }

  resizeObserver = new ResizeObserver((entries) => {
    for (const entry of entries) {
      vpWidth.value = entry.contentRect.width;
      vpHeight.value = entry.contentRect.height;
    }
  });
  if (viewportRef.value) {
    resizeObserver.observe(viewportRef.value);
  }
});

onBeforeUnmount(() => {
  if (primeTimer) clearTimeout(primeTimer);
  killAllTweens();
  resizeObserver?.disconnect();
});
</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="viewportRef"
      class="canvas-lab-viewport"
      :class="canZoomIn ? 'cursor-zoom-in' : 'cursor-zoom-out'"
      @wheel.prevent="onWheel"
      @dblclick="onDoubleClick"
    >
      <!-- Grid cells (outline rects for current level) -->
      <div ref="gridLayerRef" class="canvas-grid-layer">
        <div
          v-for="(rect, idx) in gridRects"
          :key="rect.id"
          class="canvas-cell"
          :class="[isPrime(rect.id) ? 'canvas-cell-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
          "
        >
          <span class="canvas-cell-label">{{ rect.label }}</span>
        </div>
      </div>

      <!-- Flying rect (GSAP-animated during transitions) -->
      <div
        v-show="flyVisible"
        ref="flyRectRef"
        class="canvas-fly-rect"
      >
        <span class="canvas-fly-label">{{ flyLabel }}</span>
      </div>

      <!-- Content overlay (always 1:1 scale, opacity managed by GSAP) -->
      <div
        ref="contentRef"
        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-grid-layer {
  position: absolute;
  inset: 0;
}

.canvas-cell {
  position: absolute;
  border-radius: 12px;
  border: 1px solid color-mix(in oklab, var(--color-base-content) 20%, transparent);
  background: color-mix(in oklab, var(--color-base-200) 50%, transparent);
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.canvas-cell:hover {
  border-color: color-mix(in oklab, var(--color-primary) 55%, transparent);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--color-primary) 20%, transparent) inset;
}

.canvas-cell-prime {
  transform: scale(1.03);
  border-color: color-mix(in oklab, var(--color-primary) 80%, transparent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary) 36%, transparent) inset;
}

.canvas-cell-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
  pointer-events: none;
  user-select: none;
}

.canvas-fly-rect {
  position: absolute;
  border-radius: 12px;
  border: 2px solid color-mix(in oklab, var(--color-primary) 70%, transparent);
  background: color-mix(in oklab, var(--color-base-200) 60%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  pointer-events: none;
  will-change: left, top, width, height;
}

.canvas-fly-label {
  font-size: 1rem;
  font-weight: 700;
  color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
  user-select: none;
}

.canvas-content-layer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  pointer-events: none;
  z-index: 5;
}

.canvas-content-visible {
  pointer-events: auto;
}
</style>