suzmii
36747b3ece
- 总览每个资源类型最多铺 3 张卡片，其余数量由栏目标题栏的“N 项”表达 - 总览摞旋转角改为固定小角度，素材变多后不再随堆叠下标无限增大 - 总览摞下标小的卡片压在上层，不再被模糊卡遮住最上面那张清晰卡 - 截断前先按搜索可见性过滤，避免搜索结果落在深处时总览显示空摞 - 资源卡片可见性观察改用真正包含卡片的容器，恢复滚动时的预览懒加载 - 补充资源画本布局单测、预览观察根回归用例和总览摞上限用例
76 lines
2.2 KiB
TypeScript
76 lines
2.2 KiB
TypeScript
import { describe, expect, it } from 'vitest';
|
|
|
|
import {
|
|
groupResourceBookStacks,
|
|
RESOURCE_BOOK_OVERVIEW_STACK_LIMIT,
|
|
resourceBookOverviewCardLayout,
|
|
} from '../src/view/project-development/resourceBookLayout';
|
|
import type { ProjectResource } from '../src/view/project-development/resourceProjectionModel';
|
|
|
|
function resource(id: string): ProjectResource {
|
|
return {
|
|
id,
|
|
category: 'art',
|
|
subtype: 'image',
|
|
label: id,
|
|
path: `assets/${id}.png`,
|
|
mediaType: 'image/png',
|
|
sourceLabel: '测试',
|
|
taskTitle: null,
|
|
manifestAssetId: id,
|
|
producerTaskId: null,
|
|
externalResourceId: null,
|
|
referenceResourceIds: [],
|
|
dependencies: [],
|
|
dependencyDepth: 0,
|
|
};
|
|
}
|
|
|
|
const rect = { left: 100, top: 200, width: 280, height: 210 };
|
|
|
|
describe('resourceBookOverviewCardLayout', () => {
|
|
it('keeps the stack tilt bounded however many resources share one type', () => {
|
|
const rotations = [0, 1, 2, 3, 12, 59].map(
|
|
(stackIndex) =>
|
|
resourceBookOverviewCardLayout({ rect, stackIndex, stackColumn: 0 })
|
|
.rotation,
|
|
);
|
|
|
|
for (const rotation of rotations) {
|
|
expect(Math.abs(rotation)).toBeLessThanOrEqual(3);
|
|
}
|
|
expect(rotations[0]).toBe(0.5);
|
|
expect(rotations.at(-1)).toBe(rotations[2]);
|
|
});
|
|
|
|
it('stops offsetting deeper cards once the visible stack depth is reached', () => {
|
|
const positions = [0, 1, 2, 3, 59].map(
|
|
(stackIndex) =>
|
|
resourceBookOverviewCardLayout({ rect, stackIndex, stackColumn: 0 }).y,
|
|
);
|
|
|
|
expect(positions[0]).toBe(rect.top + 58);
|
|
expect(positions[1]).toBe(rect.top + 63);
|
|
expect(positions[2]).toBe(rect.top + 68);
|
|
expect(positions.at(-1)).toBe(positions[2]);
|
|
});
|
|
|
|
it('limits how many cards the overview renders per type stack', () => {
|
|
expect(RESOURCE_BOOK_OVERVIEW_STACK_LIMIT).toBe(3);
|
|
});
|
|
});
|
|
|
|
describe('groupResourceBookStacks', () => {
|
|
it('keeps resources of one type in a single stack', () => {
|
|
const stacks = groupResourceBookStacks([
|
|
resource('overview-art-0'),
|
|
resource('overview-art-1'),
|
|
resource('overview-art-2'),
|
|
resource('overview-art-3'),
|
|
]);
|
|
|
|
expect(stacks).toHaveLength(1);
|
|
expect(stacks[0]?.[1]).toHaveLength(4);
|
|
});
|
|
});
|