fix(calendar): restore GSAP fly-rect + fly-label animation in useCalendar composable
The refactoring in a4d8d81 moved calendar logic into useCalendar.ts but
used the old CSS-transform animation code instead of the GSAP-based
flying rect + flying label implementation. This restores:
- GSAP-based animateCalendarZoomIntoSource and animateCalendarFlipTransition
- Flying label that animates from card title → toolbar on zoom-in and back
- Clone-and-swap pattern with skeleton content in fly-rect (no text)
- Fly-rect/fly-label refs and setters now live in the composable
- isoWeekNumber() and weekNumber field on monthRows
- Sibling card titles and week numbers faded during zoom
- Removed old CSS-transform camera state and calendarSceneTransformStyle
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1,5 +1,4 @@
|
||||
<script setup lang="ts">
|
||||
import gsap from "gsap";
|
||||
import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch, watchEffect } from "vue";
|
||||
import CrmAuthLoading from "~~/app/components/workspace/auth/CrmAuthLoading.vue";
|
||||
import CrmCalendarPanel from "~~/app/components/workspace/calendar/CrmCalendarPanel.vue";
|
||||
@@ -159,14 +158,22 @@ const {
|
||||
calendarHoveredMonthIndex,
|
||||
calendarHoveredWeekStartKey,
|
||||
calendarHoveredDayKey,
|
||||
calendarFlyRectRef,
|
||||
calendarFlyVisible,
|
||||
calendarFlyLabelRef,
|
||||
calendarFlyLabelVisible,
|
||||
calendarToolbarLabelRef,
|
||||
calendarZoomBusy,
|
||||
calendarZoomPrimeToken,
|
||||
normalizedCalendarView,
|
||||
calendarZoomLevelIndex,
|
||||
calendarSceneTransformStyle,
|
||||
calendarZoomOrder,
|
||||
setCalendarContentWrapRef,
|
||||
setCalendarContentScrollRef,
|
||||
setCalendarSceneRef,
|
||||
setCalendarFlyRectRef,
|
||||
setCalendarFlyLabelRef,
|
||||
setCalendarToolbarLabelRef,
|
||||
setCalendarHoveredMonthIndex,
|
||||
setCalendarHoveredWeekStartKey,
|
||||
setCalendarHoveredDayKey,
|
||||
@@ -210,13 +217,6 @@ const {
|
||||
refetchCalendar,
|
||||
} = calendar;
|
||||
|
||||
// Fly rect for zoom animation (kept in orchestrator as template ref)
|
||||
const calendarFlyRectRef = ref<HTMLDivElement | null>(null);
|
||||
const calendarFlyVisible = ref(false);
|
||||
function setCalendarFlyRectRef(element: HTMLDivElement | null) {
|
||||
calendarFlyRectRef.value = element;
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// 5. Deals
|
||||
// ---------------------------------------------------------------------------
|
||||
@@ -1401,6 +1401,9 @@ onBeforeUnmount(() => {
|
||||
:normalized-calendar-view="normalizedCalendarView"
|
||||
:calendar-fly-visible="calendarFlyVisible"
|
||||
:set-calendar-fly-rect-ref="setCalendarFlyRectRef"
|
||||
:calendar-fly-label-visible="calendarFlyLabelVisible"
|
||||
:set-calendar-fly-label-ref="setCalendarFlyLabelRef"
|
||||
:set-calendar-toolbar-label-ref="setCalendarToolbarLabelRef"
|
||||
:on-calendar-scene-mouse-leave="onCalendarSceneMouseLeave"
|
||||
:calendar-view="calendarView"
|
||||
:year-months="yearMonths"
|
||||
|
||||
Reference in New Issue
Block a user