feat(calendar-lab): render content only after zoom settle

2026-02-23 17:47:58 +07:00
parent 6d5402dcc1
commit 67a186e916
5 changed files with 204 additions and 106 deletions
--- a/frontend/app/components/workspace/calendar/lab/CrmCalendarLabDayRect.vue
+++ b/frontend/app/components/workspace/calendar/lab/CrmCalendarLabDayRect.vue
@@ -3,6 +3,7 @@ defineProps<{
  isActive: boolean;
  isLoading: boolean;
  isLoaded: boolean;
+  showContent: boolean;
  pulseScale: number;
 }>();
 </script>
@@ -18,22 +19,25 @@ defineProps<{
      <p class="calendar-lab-subtitle">Timeline events</p>
    </header>

-    <p v-if="isLoading" class="calendar-lab-loading">Loading GraphQL day payload…</p>
-    <p v-else-if="isLoaded" class="calendar-lab-meta">Data ready</p>
+    <template v-if="showContent">
+      <p v-if="isLoading" class="calendar-lab-loading">Loading GraphQL day payload…</p>
+      <p v-else-if="isLoaded" class="calendar-lab-meta">Data ready</p>

-    <div class="calendar-lab-timeline">
-      <article class="calendar-lab-event">
-        <span>09:30</span>
-        <p>Call with client</p>
-      </article>
-      <article class="calendar-lab-event">
-        <span>13:00</span>
-        <p>Prepare follow-up summary</p>
-      </article>
-      <article class="calendar-lab-event">
-        <span>16:45</span>
-        <p>Send proposal update</p>
-      </article>
-    </div>
+      <div class="calendar-lab-timeline">
+        <article class="calendar-lab-event">
+          <span>09:30</span>
+          <p>Call with client</p>
+        </article>
+        <article class="calendar-lab-event">
+          <span>13:00</span>
+          <p>Prepare follow-up summary</p>
+        </article>
+        <article class="calendar-lab-event">
+          <span>16:45</span>
+          <p>Send proposal update</p>
+        </article>
+      </div>
+    </template>
+    <p v-else class="calendar-lab-hint">Zoom stopped. Day content will render here.</p>
  </section>
 </template>
--- a/frontend/app/components/workspace/calendar/lab/CrmCalendarLabMonthRect.vue
+++ b/frontend/app/components/workspace/calendar/lab/CrmCalendarLabMonthRect.vue
@@ -3,6 +3,8 @@ defineProps<{
  isActive: boolean;
  isLoading: boolean;
  isLoaded: boolean;
+  showContent: boolean;
+  nextLabel?: string;
  pulseScale: number;
 }>();
 </script>
@@ -18,17 +20,22 @@ defineProps<{
      <p class="calendar-lab-subtitle">Weeks inside one month</p>
    </header>

-    <p v-if="isLoading" class="calendar-lab-loading">Loading GraphQL month payload…</p>
-    <p v-else-if="isLoaded" class="calendar-lab-meta">Data ready</p>
+    <template v-if="showContent">
+      <p v-if="isLoading" class="calendar-lab-loading">Loading GraphQL month payload…</p>
+      <p v-else-if="isLoaded" class="calendar-lab-meta">Data ready</p>

-    <div class="calendar-lab-grid-month">
-      <div
-        v-for="week in 4"
-        :key="`lab-month-week-${week}`"
-        class="calendar-lab-row"
-      >
-        Week {{ week }}
+      <div class="calendar-lab-grid-month">
+        <div
+          v-for="week in 4"
+          :key="`lab-month-week-${week}`"
+          class="calendar-lab-row"
+        >
+          Week {{ week }}
+        </div>
      </div>
-    </div>
+    </template>
+    <p v-else class="calendar-lab-hint">
+      Zoom into {{ nextLabel ?? "Week" }}
+    </p>
  </section>
 </template>
--- a/frontend/app/components/workspace/calendar/lab/CrmCalendarLabWeekRect.vue
+++ b/frontend/app/components/workspace/calendar/lab/CrmCalendarLabWeekRect.vue
@@ -3,6 +3,8 @@ defineProps<{
  isActive: boolean;
  isLoading: boolean;
  isLoaded: boolean;
+  showContent: boolean;
+  nextLabel?: string;
  pulseScale: number;
 }>();
 </script>
@@ -18,17 +20,22 @@ defineProps<{
      <p class="calendar-lab-subtitle">7 day columns</p>
    </header>

-    <p v-if="isLoading" class="calendar-lab-loading">Loading GraphQL week payload…</p>
-    <p v-else-if="isLoaded" class="calendar-lab-meta">Data ready</p>
+    <template v-if="showContent">
+      <p v-if="isLoading" class="calendar-lab-loading">Loading GraphQL week payload…</p>
+      <p v-else-if="isLoaded" class="calendar-lab-meta">Data ready</p>

-    <div class="calendar-lab-grid-week">
-      <span
-        v-for="day in 7"
-        :key="`lab-week-day-${day}`"
-        class="calendar-lab-day"
-      >
-        D{{ day }}
-      </span>
-    </div>
+      <div class="calendar-lab-grid-week">
+        <span
+          v-for="day in 7"
+          :key="`lab-week-day-${day}`"
+          class="calendar-lab-day"
+        >
+          D{{ day }}
+        </span>
+      </div>
+    </template>
+    <p v-else class="calendar-lab-hint">
+      Zoom into {{ nextLabel ?? "Day" }}
+    </p>
  </section>
 </template>
--- a/frontend/app/components/workspace/calendar/lab/CrmCalendarLabYearRect.vue
+++ b/frontend/app/components/workspace/calendar/lab/CrmCalendarLabYearRect.vue
@@ -3,6 +3,8 @@ defineProps<{
  isActive: boolean;
  isLoading: boolean;
  isLoaded: boolean;
+  showContent: boolean;
+  nextLabel?: string;
  pulseScale: number;
 }>();
 </script>
@@ -18,17 +20,22 @@ defineProps<{
      <p class="calendar-lab-subtitle">12 months overview</p>
    </header>

-    <p v-if="isLoading" class="calendar-lab-loading">Loading GraphQL year payload…</p>
-    <p v-else-if="isLoaded" class="calendar-lab-meta">Data ready</p>
+    <template v-if="showContent">
+      <p v-if="isLoading" class="calendar-lab-loading">Loading GraphQL year payload…</p>
+      <p v-else-if="isLoaded" class="calendar-lab-meta">Data ready</p>

-    <div class="calendar-lab-grid-year">
-      <span
-        v-for="month in 12"
-        :key="`lab-year-month-${month}`"
-        class="calendar-lab-chip"
-      >
-        {{ month }}
-      </span>
-    </div>
+      <div class="calendar-lab-grid-year">
+        <span
+          v-for="month in 12"
+          :key="`lab-year-month-${month}`"
+          class="calendar-lab-chip"
+        >
+          {{ month }}
+        </span>
+      </div>
+    </template>
+    <p v-else class="calendar-lab-hint">
+      Zoom into {{ nextLabel ?? "Month" }}
+    </p>
  </section>
 </template>
--- a/frontend/app/components/workspace/calendar/lab/CrmCalendarZoomLab.vue
+++ b/frontend/app/components/workspace/calendar/lab/CrmCalendarZoomLab.vue
@@ -11,7 +11,7 @@ type LevelState = {
  loading: boolean;
 };

-const CALENDAR_LEVELS: Level[] = ["year", "month", "week", "day"];
+const LEVELS: Level[] = ["year", "month", "week", "day"];
 const LEVEL_LABELS: Record<Level, string> = {
  year: "Year",
  month: "Month",
@@ -19,6 +19,20 @@ const LEVEL_LABELS: Record<Level, string> = {
  day: "Day",
 };

+const NEXT_LEVEL: Record<Level, Level | null> = {
+  year: "month",
+  month: "week",
+  week: "day",
+  day: null,
+};
+
+const PREV_LEVEL: Record<Level, Level | null> = {
+  year: null,
+  month: "year",
+  week: "month",
+  day: "week",
+};
+
 const ZOOM_PRIME_STEPS = 2;
 const ZOOM_PRIME_SCALE = 1.05;
 const ZOOM_ANIMATION_MS = 2200;
@@ -31,17 +45,19 @@ const WORLD_RECT_BY_LEVEL: Record<Level, { x: number; y: number; width: number;
  day: { x: 560, y: 330, width: 280, height: 165 },
 };

-const zoomLevelIndex = ref(0);
-const hoveredLevel = ref<Level>("year");
-const isAnimating = ref(false);
-const useTransition = ref(false);
 const viewportRef = ref<HTMLDivElement | null>(null);
 const resizeObserver = ref<ResizeObserver | null>(null);
+const currentLevel = ref<Level>("year");
+const transitionTarget = ref<Level | null>(null);
+const hoveredLevel = ref<Level>("month");
+const isAnimating = ref(false);
+const useTransition = ref(false);

 const camera = reactive({
  x: 0,
  y: 0,
-  scale: 1,
+  scaleX: 1,
+  scaleY: 1,
 });

 const levelState = reactive<Record<Level, LevelState>>({
@@ -51,10 +67,6 @@ const levelState = reactive<Record<Level, LevelState>>({
  day: { loaded: false, loading: false },
 });

-let animationTimer: ReturnType<typeof setTimeout> | null = null;
-let primeTimer: ReturnType<typeof setTimeout> | null = null;
-let loadTimer: ReturnType<typeof setTimeout> | null = null;
-
 const wheelPrime = reactive({
  direction: "" as "" | "in" | "out",
  ticks: 0,
@@ -65,12 +77,17 @@ const pulseState = reactive({
  scale: 1,
 });

-const activeLevel = computed(() => CALENDAR_LEVELS[zoomLevelIndex.value] ?? "year");
-const canZoomIn = computed(() => zoomLevelIndex.value < CALENDAR_LEVELS.length - 1);
-const canZoomOut = computed(() => zoomLevelIndex.value > 0);
+let animationTimer: ReturnType<typeof setTimeout> | null = null;
+let primeTimer: ReturnType<typeof setTimeout> | null = null;
+let loadTimer: ReturnType<typeof setTimeout> | null = null;
+
+const displayLevel = computed(() => transitionTarget.value ?? currentLevel.value);
+const displayIndex = computed(() => LEVELS.indexOf(displayLevel.value));
+const canZoomIn = computed(() => NEXT_LEVEL[currentLevel.value] !== null);
+const canZoomOut = computed(() => PREV_LEVEL[currentLevel.value] !== null);

 const sceneStyle = computed(() => ({
-  transform: `translate3d(${camera.x}px, ${camera.y}px, 0) scale(${camera.scale})`,
+  transform: `translate3d(${camera.x}px, ${camera.y}px, 0) scale(${camera.scaleX}, ${camera.scaleY})`,
  transformOrigin: "0 0",
  transition: useTransition.value ? `transform ${ZOOM_ANIMATION_MS}ms cubic-bezier(0.2, 0.8, 0.2, 1)` : "none",
 }));
@@ -79,6 +96,30 @@ function pulseScaleFor(level: Level) {
  return pulseState.level === level ? pulseState.scale : 1;
 }

+function nextLevelOf(level: Level) {
+  return NEXT_LEVEL[level];
+}
+
+function prevLevelOf(level: Level) {
+  return PREV_LEVEL[level];
+}
+
+function levelByIndex(index: number): Level {
+  return LEVELS[Math.max(0, Math.min(LEVELS.length - 1, index))] ?? "year";
+}
+
+function isNodeVisible(level: Level) {
+  const currentIndex = LEVELS.indexOf(currentLevel.value);
+  const targetIndex = transitionTarget.value ? LEVELS.indexOf(transitionTarget.value) : currentIndex;
+  const maxIndex = Math.max(currentIndex, targetIndex);
+  return LEVELS.indexOf(level) <= Math.min(maxIndex + 1, LEVELS.length - 1);
+}
+
+function showLevelContent(level: Level) {
+  if (isAnimating.value) return false;
+  return currentLevel.value === level;
+}
+
 function updateCameraForLevel(level: Level, animate: boolean) {
  const viewport = viewportRef.value;
  if (!viewport) return;
@@ -88,20 +129,23 @@ function updateCameraForLevel(level: Level, animate: boolean) {
  const viewportHeight = Math.max(1, viewport.clientHeight);
  const safeWidth = Math.max(1, viewportWidth - WORLD_PADDING * 2);
  const safeHeight = Math.max(1, viewportHeight - WORLD_PADDING * 2);
-  const scale = Math.min(safeWidth / rect.width, safeHeight / rect.height);

-  const x = WORLD_PADDING + (safeWidth - rect.width * scale) / 2 - rect.x * scale;
-  const y = WORLD_PADDING + (safeHeight - rect.height * scale) / 2 - rect.y * scale;
+  const scaleX = safeWidth / rect.width;
+  const scaleY = safeHeight / rect.height;
+
+  const x = WORLD_PADDING - rect.x * scaleX;
+  const y = WORLD_PADDING - rect.y * scaleY;

  useTransition.value = animate;
  camera.x = x;
  camera.y = y;
-  camera.scale = scale;
+  camera.scaleX = scaleX;
+  camera.scaleY = scaleY;
 }

 async function ensureGraphqlPayload(level: Level) {
  const state = levelState[level];
-  if (state.loading || state.loaded) return;
+  if (state.loaded || state.loading) return;
  state.loading = true;

  if (loadTimer) {
@@ -114,7 +158,7 @@ async function ensureGraphqlPayload(level: Level) {
      state.loading = false;
      state.loaded = true;
      resolve();
-    }, 520);
+    }, 540);
  });
 }

@@ -123,12 +167,14 @@ function startPulse(level: Level) {
    clearTimeout(primeTimer);
    primeTimer = null;
  }
+
  pulseState.level = level;
  pulseState.scale = ZOOM_PRIME_SCALE;
+
  primeTimer = setTimeout(() => {
    pulseState.scale = 1;
    pulseState.level = "";
-  }, 160);
+  }, 170);
 }

 function resetWheelPrime() {
@@ -136,15 +182,15 @@ function resetWheelPrime() {
  wheelPrime.ticks = 0;
 }

-async function runZoomTo(targetIndex: number) {
+async function runZoomTo(target: Level) {
  if (isAnimating.value) return;
-  if (targetIndex < 0 || targetIndex >= CALENDAR_LEVELS.length) return;
-  if (targetIndex === zoomLevelIndex.value) return;
+  if (target === currentLevel.value) return;

  isAnimating.value = true;
-  zoomLevelIndex.value = targetIndex;
+  transitionTarget.value = target;
+
  await nextTick();
-  updateCameraForLevel(activeLevel.value, true);
+  updateCameraForLevel(target, true);

  if (animationTimer) {
    clearTimeout(animationTimer);
@@ -153,63 +199,69 @@ async function runZoomTo(targetIndex: number) {

  animationTimer = setTimeout(async () => {
    useTransition.value = false;
+    currentLevel.value = target;
+    transitionTarget.value = null;
    isAnimating.value = false;
-    await ensureGraphqlPayload(activeLevel.value);
+    hoveredLevel.value = nextLevelOf(target) ?? target;
+    await ensureGraphqlPayload(target);
  }, ZOOM_ANIMATION_MS + 30);
 }

 function onWheel(event: WheelEvent) {
  if (isAnimating.value) return;
-  const direction: "in" | "out" = event.deltaY > 0 ? "in" : "out";
-  if (direction === "in" && !canZoomIn.value) return;
-  if (direction === "out" && !canZoomOut.value) return;

-  const pulseLevel = activeLevel.value;
+  const direction: "in" | "out" = event.deltaY > 0 ? "in" : "out";
+  const nextLevel = direction === "in" ? nextLevelOf(currentLevel.value) : prevLevelOf(currentLevel.value);
+  if (!nextLevel) return;
+
  if (wheelPrime.direction !== direction) {
    wheelPrime.direction = direction;
    wheelPrime.ticks = 0;
  }

+  const pulseTarget = direction === "in" ? (hoveredLevel.value === nextLevel ? hoveredLevel.value : nextLevel) : currentLevel.value;
  if (wheelPrime.ticks < ZOOM_PRIME_STEPS) {
    wheelPrime.ticks += 1;
-    startPulse(pulseLevel);
+    startPulse(pulseTarget);
    return;
  }

  resetWheelPrime();
-  if (direction === "in") {
-    void runZoomTo(zoomLevelIndex.value + 1);
-    return;
-  }
-  void runZoomTo(zoomLevelIndex.value - 1);
+  void runZoomTo(nextLevel);
 }

 function onSliderInput(event: Event) {
  const target = event.target as HTMLInputElement | null;
  if (!target) return;
-  const index = Number(target.value);
+
+  const next = levelByIndex(Number(target.value));
  resetWheelPrime();
-  void runZoomTo(index);
+  void runZoomTo(next);
 }

 function onZoomInClick() {
-  if (!canZoomIn.value) return;
+  const next = nextLevelOf(currentLevel.value);
+  if (!next) return;
  resetWheelPrime();
-  void runZoomTo(zoomLevelIndex.value + 1);
+  void runZoomTo(next);
 }

 function onZoomOutClick() {
-  if (!canZoomOut.value) return;
+  const prev = prevLevelOf(currentLevel.value);
+  if (!prev) return;
  resetWheelPrime();
-  void runZoomTo(zoomLevelIndex.value - 1);
+  void runZoomTo(prev);
 }

 onMounted(async () => {
  await nextTick();
-  updateCameraForLevel(activeLevel.value, false);
+  updateCameraForLevel(currentLevel.value, false);
+  hoveredLevel.value = nextLevelOf(currentLevel.value) ?? currentLevel.value;
+
  resizeObserver.value = new ResizeObserver(() => {
-    updateCameraForLevel(activeLevel.value, false);
+    updateCameraForLevel(displayLevel.value, false);
  });
+
  if (viewportRef.value) {
    resizeObserver.value.observe(viewportRef.value);
  }
@@ -229,7 +281,7 @@ onBeforeUnmount(() => {
      <div class="calendar-lab-toolbar-left">
        <button class="btn btn-xs" :disabled="!canZoomOut" @click="onZoomOutClick">-</button>
        <button class="btn btn-xs" :disabled="!canZoomIn" @click="onZoomInClick">+</button>
-        <span class="calendar-lab-level-text">Current: {{ LEVEL_LABELS[activeLevel] }}</span>
+        <span class="calendar-lab-level-text">Current: {{ LEVEL_LABELS[currentLevel] }}</span>
      </div>

      <div class="calendar-zoom-inline" @click.stop>
@@ -239,7 +291,7 @@ onBeforeUnmount(() => {
          min="0"
          max="3"
          step="1"
-          :value="zoomLevelIndex"
+          :value="displayIndex"
          aria-label="Calendar zoom level"
          @input="onSliderInput"
        >
@@ -248,7 +300,7 @@ onBeforeUnmount(() => {
            v-for="index in 4"
            :key="`calendar-lab-zoom-mark-${index}`"
            class="calendar-zoom-mark"
-            :class="zoomLevelIndex === index - 1 ? 'calendar-zoom-mark-active' : ''"
+            :class="displayIndex === index - 1 ? 'calendar-zoom-mark-active' : ''"
          />
        </div>
      </div>
@@ -263,62 +315,77 @@ onBeforeUnmount(() => {
      <div class="calendar-lab-scene" :style="sceneStyle">
        <div class="calendar-lab-world">
          <div
+            v-show="isNodeVisible('year')"
            class="calendar-lab-node calendar-lab-node-year"
            :class="[
-              activeLevel === 'year' ? 'calendar-lab-node-active' : '',
+              currentLevel === 'year' ? 'calendar-lab-node-active' : '',
              hoveredLevel === 'year' ? 'calendar-lab-node-hover' : '',
+              transitionTarget === 'year' ? 'calendar-lab-node-target' : '',
            ]"
            @mouseenter="hoveredLevel = 'year'"
          >
            <CrmCalendarLabYearRect
-              :is-active="activeLevel === 'year'"
+              :is-active="currentLevel === 'year'"
              :is-loading="levelState.year.loading"
              :is-loaded="levelState.year.loaded"
+              :show-content="showLevelContent('year')"
+              :next-label="LEVEL_LABELS.month"
              :pulse-scale="pulseScaleFor('year')"
            />

            <div
+              v-show="isNodeVisible('month')"
              class="calendar-lab-node calendar-lab-node-month"
              :class="[
-                activeLevel === 'month' ? 'calendar-lab-node-active' : '',
+                currentLevel === 'month' ? 'calendar-lab-node-active' : '',
                hoveredLevel === 'month' ? 'calendar-lab-node-hover' : '',
+                transitionTarget === 'month' ? 'calendar-lab-node-target' : '',
              ]"
              @mouseenter="hoveredLevel = 'month'"
            >
              <CrmCalendarLabMonthRect
-                :is-active="activeLevel === 'month'"
+                :is-active="currentLevel === 'month'"
                :is-loading="levelState.month.loading"
                :is-loaded="levelState.month.loaded"
+                :show-content="showLevelContent('month')"
+                :next-label="LEVEL_LABELS.week"
                :pulse-scale="pulseScaleFor('month')"
              />

              <div
+                v-show="isNodeVisible('week')"
                class="calendar-lab-node calendar-lab-node-week"
                :class="[
-                  activeLevel === 'week' ? 'calendar-lab-node-active' : '',
+                  currentLevel === 'week' ? 'calendar-lab-node-active' : '',
                  hoveredLevel === 'week' ? 'calendar-lab-node-hover' : '',
+                  transitionTarget === 'week' ? 'calendar-lab-node-target' : '',
                ]"
                @mouseenter="hoveredLevel = 'week'"
              >
                <CrmCalendarLabWeekRect
-                  :is-active="activeLevel === 'week'"
+                  :is-active="currentLevel === 'week'"
                  :is-loading="levelState.week.loading"
                  :is-loaded="levelState.week.loaded"
+                  :show-content="showLevelContent('week')"
+                  :next-label="LEVEL_LABELS.day"
                  :pulse-scale="pulseScaleFor('week')"
                />

                <div
+                  v-show="isNodeVisible('day')"
                  class="calendar-lab-node calendar-lab-node-day"
                  :class="[
-                    activeLevel === 'day' ? 'calendar-lab-node-active' : '',
+                    currentLevel === 'day' ? 'calendar-lab-node-active' : '',
                    hoveredLevel === 'day' ? 'calendar-lab-node-hover' : '',
+                    transitionTarget === 'day' ? 'calendar-lab-node-target' : '',
                  ]"
                  @mouseenter="hoveredLevel = 'day'"
                >
                  <CrmCalendarLabDayRect
-                    :is-active="activeLevel === 'day'"
+                    :is-active="currentLevel === 'day'"
                    :is-loading="levelState.day.loading"
                    :is-loaded="levelState.day.loaded"
+                    :show-content="showLevelContent('day')"
                    :pulse-scale="pulseScaleFor('day')"
                  />
                </div>
@@ -415,7 +482,8 @@ onBeforeUnmount(() => {
  height: 165px;
 }

-.calendar-lab-node-active :deep(.calendar-lab-rect) {
+.calendar-lab-node-active :deep(.calendar-lab-rect),
+.calendar-lab-node-target :deep(.calendar-lab-rect) {
  border-color: color-mix(in oklab, var(--color-primary) 85%, transparent);
  box-shadow:
    0 0 0 2px color-mix(in oklab, var(--color-primary) 45%, transparent),
@@ -460,7 +528,8 @@ onBeforeUnmount(() => {
 }

 :deep(.calendar-lab-loading),
-:deep(.calendar-lab-meta) {
+:deep(.calendar-lab-meta),
+:deep(.calendar-lab-hint) {
  margin-bottom: 8px;
  font-size: 0.72rem;
 }
@@ -473,6 +542,10 @@ onBeforeUnmount(() => {
  color: color-mix(in oklab, var(--color-success) 86%, var(--color-base-content));
 }

+:deep(.calendar-lab-hint) {
+  color: color-mix(in oklab, var(--color-base-content) 68%, transparent);
+}
+
 :deep(.calendar-lab-grid-year) {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));