Files
Genarrative/apps/ai-game-creator-shell/tests/resourceBookViewport.test.ts
suzmii 85f0f6a57b 修复资源画本入场动画找不到终点卡片
进入子画布时若视口停在空白处,目标卡片不在画面内,FLIP 快照找不到终点会整段退化成淡入淡出,只剩标题栏有动画
新增 ensureResourceBookContentVisible:视口内没有可见卡片时,把离画面中心最近的卡片平移到画面中心,保持当前缩放不变
openResourceBookChild 计算入场视口后应用该修正,保证动画终点落在真实卡片上
补充 resourceBookViewport 用例覆盖已可见、就近居中与空栏目三种情况
2026-09-09 16:09:39 +08:00

71 lines
2.0 KiB
TypeScript

import { describe, expect, it } from 'vitest';
import {
ensureResourceBookContentVisible,
keepResourceBookViewportAtReadableScale,
panResourceBookViewport,
} from '../src/view/project-development/resourceBookViewport';
describe('resource book viewport', () => {
it('keeps an initially fitted child canvas readable instead of shrinking it below 1:1', () => {
expect(
keepResourceBookViewportAtReadableScale({
viewport: { x: 120, y: 80, scale: 0.42 },
bounds: { x: 0, y: 0, width: 1_600, height: 1_000 },
canvasSize: { width: 900, height: 640 },
padding: 16,
}),
).toEqual({
x: -350,
y: -180,
scale: 1,
});
});
it('allows panning beyond the content bounds in both directions', () => {
expect(
panResourceBookViewport(
{ x: 0, y: 0, scale: 1 },
{ x: -4_000, y: 3_000 },
),
).toEqual({ x: -4_000, y: 3_000, scale: 1 });
});
it('keeps a viewport that already shows a card', () => {
const viewport = { x: -40, y: -20, scale: 1 };
expect(
ensureResourceBookContentVisible({
viewport,
cards: [{ x: 100, y: 100, width: 180, height: 128 }],
canvasSize: { width: 900, height: 640 },
padding: 16,
}),
).toEqual(viewport);
});
it('centers the nearest card when the viewport would show nothing', () => {
expect(
ensureResourceBookContentVisible({
viewport: { x: 0, y: 0, scale: 1 },
cards: [
{ x: 4_000, y: 4_000, width: 180, height: 128 },
{ x: 2_000, y: 2_000, width: 180, height: 128 },
],
canvasSize: { width: 900, height: 640 },
padding: 16,
}),
).toEqual({ x: -1_640, y: -1_744, scale: 1 });
});
it('leaves an empty category viewport untouched', () => {
const viewport = { x: 12, y: 34, scale: 1.5 };
expect(
ensureResourceBookContentVisible({
viewport,
cards: [],
canvasSize: { width: 900, height: 640 },
}),
).toEqual(viewport);
});
});