638652b4d8
Content overlay layer was intercepting mouse events (pointer-events: auto with z-index: 5), preventing :hover from reaching the grid cells underneath. Removed pointer-events: auto from .canvas-content-visible since the content layer is purely visual and needs no click handling. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
826 lines
22 KiB
Vue
826 lines
22 KiB
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 PRIME_SCALE_MAX = 0.10;
|
|
const PRIME_DECAY_MS = 400;
|
|
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("");
|
|
|
|
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 primeCellIndex = ref(-1);
|
|
const primeProgress = ref(0);
|
|
const wheelPrimeDirection = ref<"" | Direction>("");
|
|
const wheelPrimeTicks = ref(0);
|
|
|
|
let primeTimer: ReturnType<typeof setTimeout> | null = null;
|
|
let activeTweens: gsap.core.Tween[] = [];
|
|
let sliderTarget = -1;
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* Computed */
|
|
/* ------------------------------------------------------------------ */
|
|
|
|
const currentLevelIndex = computed(() => LEVELS.indexOf(currentLevel.value));
|
|
const canZoomIn = computed(() => currentLevelIndex.value < LEVELS.length - 1);
|
|
|
|
const hoveredCellIndex = computed(() => {
|
|
switch (currentLevel.value) {
|
|
case "year": return hoveredMonth.value;
|
|
case "month": return hoveredWeek.value;
|
|
case "week": return hoveredDay.value;
|
|
default: return 0;
|
|
}
|
|
});
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* 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,
|
|
};
|
|
});
|
|
}
|
|
|
|
const gridRects = computed(() => {
|
|
if (vpWidth.value <= 0 || vpHeight.value <= 0) return [];
|
|
return computeGridRects(currentLevel.value, vpWidth.value, vpHeight.value);
|
|
});
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* GSAP helpers */
|
|
/* ------------------------------------------------------------------ */
|
|
|
|
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);
|
|
});
|
|
}
|
|
|
|
function killAllTweens() {
|
|
for (const t of activeTweens) t.kill();
|
|
activeTweens = [];
|
|
}
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* Prime (tension) helpers */
|
|
/* ------------------------------------------------------------------ */
|
|
|
|
function advancePrime(cellIndex: number) {
|
|
if (primeTimer) {
|
|
clearTimeout(primeTimer);
|
|
primeTimer = null;
|
|
}
|
|
primeCellIndex.value = cellIndex;
|
|
primeProgress.value = Math.min(primeProgress.value + 1, ZOOM_PRIME_STEPS);
|
|
|
|
primeTimer = setTimeout(() => {
|
|
primeCellIndex.value = -1;
|
|
primeProgress.value = 0;
|
|
wheelPrimeDirection.value = "";
|
|
wheelPrimeTicks.value = 0;
|
|
}, PRIME_DECAY_MS);
|
|
}
|
|
|
|
function resetPrime() {
|
|
if (primeTimer) {
|
|
clearTimeout(primeTimer);
|
|
primeTimer = null;
|
|
}
|
|
primeCellIndex.value = -1;
|
|
primeProgress.value = 0;
|
|
}
|
|
|
|
function getCellPrimeScale(idx: number): number {
|
|
if (primeCellIndex.value !== idx || primeProgress.value <= 0) return 1;
|
|
return 1 + (primeProgress.value / ZOOM_PRIME_STEPS) * PRIME_SCALE_MAX;
|
|
}
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* Zoom In */
|
|
/* ------------------------------------------------------------------ */
|
|
|
|
async function zoomIn(overrideIndex?: number) {
|
|
if (isAnimating.value) return;
|
|
if (currentLevelIndex.value >= LEVELS.length - 1) return;
|
|
|
|
const hovIdx = overrideIndex ?? hoveredCellIndex.value;
|
|
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();
|
|
resetPrime();
|
|
|
|
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;
|
|
|
|
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();
|
|
|
|
await Promise.all([
|
|
tweenTo(contentEl, { opacity: 0, duration: 0.2, ease: "power2.in" }),
|
|
tweenTo(gridEl, { opacity: 0, duration: 0.2, ease: "power2.in" }),
|
|
]);
|
|
|
|
currentLevel.value = "year";
|
|
contentVisible.value = true;
|
|
gsap.set(contentEl, { opacity: 0 });
|
|
gsap.set(gridEl, { opacity: 0 });
|
|
await nextTick();
|
|
|
|
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;
|
|
resetPrime();
|
|
}
|
|
|
|
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;
|
|
resetPrime();
|
|
}
|
|
|
|
if (wheelPrimeTicks.value < ZOOM_PRIME_STEPS) {
|
|
wheelPrimeTicks.value += 1;
|
|
|
|
if (direction === "in") {
|
|
advancePrime(hoveredCellIndex.value);
|
|
}
|
|
return;
|
|
}
|
|
|
|
resetWheelPrime();
|
|
|
|
if (direction === "in") {
|
|
void zoomIn();
|
|
} else {
|
|
void zoomOut();
|
|
}
|
|
}
|
|
|
|
function onDoubleClick() {
|
|
resetWheelPrime();
|
|
void resetToYear();
|
|
}
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* Zoom slider */
|
|
/* ------------------------------------------------------------------ */
|
|
|
|
async function onSliderInput(event: Event) {
|
|
const value = Number((event.target as HTMLInputElement)?.value ?? NaN);
|
|
if (!Number.isFinite(value)) return;
|
|
|
|
const targetIndex = Math.max(0, Math.min(3, Math.round(value)));
|
|
sliderTarget = targetIndex;
|
|
|
|
if (isAnimating.value) return;
|
|
if (targetIndex === currentLevelIndex.value) return;
|
|
|
|
for (let i = 0; i < 3; i++) {
|
|
if (currentLevelIndex.value === sliderTarget) break;
|
|
if (sliderTarget > currentLevelIndex.value) {
|
|
await zoomIn(0);
|
|
} else {
|
|
await zoomOut();
|
|
}
|
|
}
|
|
|
|
sliderTarget = -1;
|
|
}
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* Lifecycle */
|
|
/* ------------------------------------------------------------------ */
|
|
|
|
let resizeObserver: ResizeObserver | null = null;
|
|
|
|
onMounted(() => {
|
|
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>
|
|
|
|
<div class="canvas-lab-zoom-control" @click.stop>
|
|
<input
|
|
class="canvas-lab-zoom-slider"
|
|
type="range"
|
|
min="0"
|
|
max="3"
|
|
step="1"
|
|
:value="currentLevelIndex"
|
|
aria-label="Zoom level"
|
|
@input="onSliderInput"
|
|
>
|
|
<div class="canvas-lab-zoom-marks" aria-hidden="true">
|
|
<span
|
|
v-for="index in 4"
|
|
:key="`zoom-mark-${index}`"
|
|
class="canvas-lab-zoom-mark"
|
|
:class="currentLevelIndex === index - 1 ? 'canvas-lab-zoom-mark-active' : ''"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</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="[primeCellIndex === idx ? 'canvas-cell-priming' : '']"
|
|
:style="{
|
|
left: `${rect.x}px`,
|
|
top: `${rect.y}px`,
|
|
width: `${rect.w}px`,
|
|
height: `${rect.h}px`,
|
|
transform: primeCellIndex === idx && primeProgress > 0
|
|
? `scale(${getCellPrimeScale(idx)})`
|
|
: undefined,
|
|
}"
|
|
@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;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
}
|
|
|
|
.canvas-lab-level-text {
|
|
font-size: 0.78rem;
|
|
color: color-mix(in oklab, var(--color-base-content) 72%, transparent);
|
|
}
|
|
|
|
/* ---- Zoom slider ---- */
|
|
|
|
.canvas-lab-zoom-control {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
width: 128px;
|
|
height: 22px;
|
|
padding: 0 10px;
|
|
}
|
|
|
|
.canvas-lab-zoom-slider {
|
|
width: 100%;
|
|
height: 18px;
|
|
margin: 0;
|
|
background: transparent;
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.canvas-lab-zoom-slider:focus-visible {
|
|
outline: none;
|
|
}
|
|
|
|
.canvas-lab-zoom-slider::-webkit-slider-runnable-track {
|
|
height: 2px;
|
|
border-radius: 999px;
|
|
background: color-mix(in oklab, var(--color-base-content) 22%, transparent);
|
|
}
|
|
|
|
.canvas-lab-zoom-slider::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
width: 10px;
|
|
height: 10px;
|
|
margin-top: -4px;
|
|
border-radius: 999px;
|
|
background: color-mix(in oklab, var(--color-base-content) 88%, transparent);
|
|
border: 0;
|
|
}
|
|
|
|
.canvas-lab-zoom-slider::-moz-range-track {
|
|
height: 2px;
|
|
border-radius: 999px;
|
|
background: color-mix(in oklab, var(--color-base-content) 22%, transparent);
|
|
}
|
|
|
|
.canvas-lab-zoom-slider::-moz-range-progress {
|
|
height: 2px;
|
|
border-radius: 999px;
|
|
background: transparent;
|
|
}
|
|
|
|
.canvas-lab-zoom-slider::-moz-range-thumb {
|
|
width: 10px;
|
|
height: 10px;
|
|
border: 0;
|
|
border-radius: 999px;
|
|
background: color-mix(in oklab, var(--color-base-content) 88%, transparent);
|
|
}
|
|
|
|
.canvas-lab-zoom-marks {
|
|
position: absolute;
|
|
inset: 0 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.canvas-lab-zoom-mark {
|
|
width: 4px;
|
|
height: 4px;
|
|
border-radius: 999px;
|
|
background: color-mix(in oklab, var(--color-base-content) 35%, transparent);
|
|
}
|
|
|
|
.canvas-lab-zoom-mark-active {
|
|
background: color-mix(in oklab, var(--color-base-content) 85%, transparent);
|
|
}
|
|
|
|
/* ---- Viewport ---- */
|
|
|
|
.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 180ms 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-priming {
|
|
z-index: 2;
|
|
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 stay none — grid cells underneath must receive hover */
|
|
}
|
|
</style>
|