拆分图片画布图层命令工作流
新增图层命令 hook 和独立单测 主视图改为通过 hook 处理复制、剪切、粘贴、层级、分组、显隐、锁定、翻转、删除和导出委托 更新图片画布前端拆分文档和 TRACKING 回归记录
This commit is contained in:
279
src/components/image-editor/useImageCanvasLayerCommands.test.tsx
Normal file
279
src/components/image-editor/useImageCanvasLayerCommands.test.tsx
Normal file
@@ -0,0 +1,279 @@
|
||||
/* @vitest-environment jsdom */
|
||||
|
||||
import { fireEvent, render, screen } from '@testing-library/react';
|
||||
import { useState } from 'react';
|
||||
import { describe, expect, it, vi } from 'vitest';
|
||||
|
||||
import type {
|
||||
CanvasContextMenuState,
|
||||
CanvasLayer,
|
||||
} from './ImageCanvasEditorTypes';
|
||||
import { useImageCanvasLayerCommands } from './useImageCanvasLayerCommands';
|
||||
|
||||
function createLayer(id: string, x: number, zIndex: number): CanvasLayer {
|
||||
return {
|
||||
id,
|
||||
resourceId: `resource-${id}`,
|
||||
title: id,
|
||||
src: `data:image/png;base64,${id}`,
|
||||
x,
|
||||
y: 20,
|
||||
width: 100,
|
||||
height: 80,
|
||||
originalWidth: 100,
|
||||
originalHeight: 80,
|
||||
zIndex,
|
||||
sourceType: 'uploaded',
|
||||
};
|
||||
}
|
||||
|
||||
function LayerCommandsHarness({
|
||||
exportLayerImage = vi.fn(),
|
||||
onDeleteLayerSideEffects = vi.fn(),
|
||||
}: {
|
||||
exportLayerImage?: (layer: CanvasLayer | null) => void;
|
||||
onDeleteLayerSideEffects?: (layerId: string) => void;
|
||||
}) {
|
||||
const [layers, setLayers] = useState<CanvasLayer[]>([
|
||||
createLayer('first', 10, 1),
|
||||
createLayer('second', 160, 2),
|
||||
createLayer('third', 310, 3),
|
||||
]);
|
||||
const [selectedLayerId, setSelectedLayerId] = useState<string | null>(
|
||||
'first',
|
||||
);
|
||||
const [selectedLayerIds, setSelectedLayerIds] = useState<string[]>([
|
||||
'first',
|
||||
'second',
|
||||
]);
|
||||
const [metadataLayer, setMetadataLayer] = useState<CanvasLayer | null>(
|
||||
layers[0] ?? null,
|
||||
);
|
||||
const [hoveredLayerId, setHoveredLayerId] = useState<string | null>('first');
|
||||
const [contextMenu, setContextMenu] = useState<CanvasContextMenuState | null>(
|
||||
{
|
||||
kind: 'layer',
|
||||
layerId: 'first',
|
||||
x: 0,
|
||||
y: 0,
|
||||
canvasPoint: { x: 0, y: 0 },
|
||||
},
|
||||
);
|
||||
const [historyCount, setHistoryCount] = useState(0);
|
||||
const [imageContextClosedCount, setImageContextClosedCount] = useState(0);
|
||||
const [activeTool, setActiveTool] = useState('shape');
|
||||
|
||||
const selectSingleLayer = (layerId: string | null) => {
|
||||
setSelectedLayerId(layerId);
|
||||
setSelectedLayerIds(layerId ? [layerId] : []);
|
||||
};
|
||||
|
||||
const commands = useImageCanvasLayerCommands({
|
||||
layers,
|
||||
contextMenu,
|
||||
selectedLayerId,
|
||||
selectedLayerIds,
|
||||
setLayers,
|
||||
setSelectedLayerId,
|
||||
setSelectedLayerIds,
|
||||
setHoveredLayerId,
|
||||
setMetadataLayer,
|
||||
setContextMenu,
|
||||
setImageContextMenu: () =>
|
||||
setImageContextClosedCount((currentCount) => currentCount + 1),
|
||||
setActiveTool,
|
||||
captureCanvasHistory: () =>
|
||||
setHistoryCount((currentCount) => currentCount + 1),
|
||||
selectSingleLayer,
|
||||
onDeleteLayerSideEffects,
|
||||
exportLayerImage,
|
||||
});
|
||||
|
||||
return (
|
||||
<div>
|
||||
<span data-testid="layers">
|
||||
{layers
|
||||
.map(
|
||||
(layer) =>
|
||||
`${layer.id}:${layer.title}:${layer.x}:${layer.zIndex}:${layer.groupId ?? '-'}:${layer.hidden ? 'hidden' : 'shown'}:${layer.locked ? 'locked' : 'open'}:${layer.flipX ? 'flipX' : '-'}:${layer.flipY ? 'flipY' : '-'}`,
|
||||
)
|
||||
.join('|')}
|
||||
</span>
|
||||
<span data-testid="selection">
|
||||
{selectedLayerId ?? '-'}:{selectedLayerIds.join(',')}
|
||||
</span>
|
||||
<span data-testid="metadata">{metadataLayer?.id ?? '-'}</span>
|
||||
<span data-testid="hovered">{hoveredLayerId ?? '-'}</span>
|
||||
<span data-testid="context">{contextMenu ? 'open' : 'closed'}</span>
|
||||
<span data-testid="history">{historyCount}</span>
|
||||
<span data-testid="image-context-closed">
|
||||
{imageContextClosedCount}
|
||||
</span>
|
||||
<span data-testid="tool">{activeTool}</span>
|
||||
<span data-testid="clipboard">
|
||||
{commands.canvasClipboard
|
||||
? `${commands.canvasClipboard.mode}:${commands.canvasClipboard.layers.length}`
|
||||
: '-'}
|
||||
</span>
|
||||
<button type="button" onClick={() => commands.copyContextLayers()}>
|
||||
复制
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => commands.copyContextLayers({ cut: true })}
|
||||
>
|
||||
剪切
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => commands.pasteCanvasClipboard({ x: 500, y: 600 })}
|
||||
>
|
||||
粘贴
|
||||
</button>
|
||||
<button type="button" onClick={() => commands.duplicateContextLayers()}>
|
||||
创建副本
|
||||
</button>
|
||||
<button type="button" onClick={() => commands.moveContextLayers('top')}>
|
||||
置顶
|
||||
</button>
|
||||
<button type="button" onClick={() => commands.groupContextLayers()}>
|
||||
创建组
|
||||
</button>
|
||||
<button type="button" onClick={() => commands.ungroupContextLayers()}>
|
||||
解除组
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => commands.toggleContextLayerVisibility()}
|
||||
>
|
||||
显隐
|
||||
</button>
|
||||
<button type="button" onClick={() => commands.toggleContextLayerLock()}>
|
||||
锁定
|
||||
</button>
|
||||
<button type="button" onClick={() => commands.flipContextLayers('x')}>
|
||||
翻转
|
||||
</button>
|
||||
<button type="button" onClick={() => commands.deleteContextLayers()}>
|
||||
删除右键目标
|
||||
</button>
|
||||
<button type="button" onClick={() => commands.deleteSelectedLayer()}>
|
||||
删除选中
|
||||
</button>
|
||||
<button type="button" onClick={() => commands.deleteLayerById('first')}>
|
||||
删除单图
|
||||
</button>
|
||||
<button type="button" onClick={() => commands.groupSelectedLayers()}>
|
||||
选中打组
|
||||
</button>
|
||||
<button type="button" onClick={() => commands.exportContextLayer()}>
|
||||
导出
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() =>
|
||||
setContextMenu({
|
||||
kind: 'layer',
|
||||
layerId: 'third',
|
||||
x: 0,
|
||||
y: 0,
|
||||
canvasPoint: { x: 0, y: 0 },
|
||||
})
|
||||
}
|
||||
>
|
||||
右键第三层
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setSelectedLayerId('third');
|
||||
setSelectedLayerIds(['third']);
|
||||
}}
|
||||
>
|
||||
只选第三层
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
describe('useImageCanvasLayerCommands', () => {
|
||||
it('copies, cuts, and pastes context layers with history and selection updates', () => {
|
||||
render(<LayerCommandsHarness />);
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: '复制' }));
|
||||
expect(screen.getByTestId('clipboard').textContent).toBe('copy:2');
|
||||
expect(screen.getByTestId('context').textContent).toBe('closed');
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: '粘贴' }));
|
||||
expect(screen.getByTestId('layers').textContent).toContain(
|
||||
'first 副本:500:4',
|
||||
);
|
||||
expect(screen.getByTestId('layers').textContent).toContain(
|
||||
'second 副本:650:5',
|
||||
);
|
||||
expect(screen.getByTestId('selection').textContent).toContain(
|
||||
'layer-copy-',
|
||||
);
|
||||
expect(screen.getByTestId('tool').textContent).toBe('select');
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: '右键第三层' }));
|
||||
fireEvent.click(screen.getByRole('button', { name: '只选第三层' }));
|
||||
fireEvent.click(screen.getByRole('button', { name: '剪切' }));
|
||||
|
||||
expect(screen.getByTestId('clipboard').textContent).toBe('cut:1');
|
||||
expect(screen.getByTestId('layers').textContent).not.toContain('third');
|
||||
expect(screen.getByTestId('selection').textContent).toBe('-:');
|
||||
expect(Number(screen.getByTestId('history').textContent)).toBeGreaterThan(
|
||||
1,
|
||||
);
|
||||
});
|
||||
|
||||
it('applies layer commands and clears menus without owning menu positioning', () => {
|
||||
const exportLayerImage = vi.fn();
|
||||
render(<LayerCommandsHarness exportLayerImage={exportLayerImage} />);
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: '创建组' }));
|
||||
expect(screen.getByTestId('layers').textContent).toContain('layer-group-');
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: '右键第三层' }));
|
||||
fireEvent.click(screen.getByRole('button', { name: '显隐' }));
|
||||
expect(screen.getByTestId('layers').textContent).toContain(':hidden:');
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: '右键第三层' }));
|
||||
fireEvent.click(screen.getByRole('button', { name: '锁定' }));
|
||||
expect(screen.getByTestId('layers').textContent).toContain(':locked:');
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: '右键第三层' }));
|
||||
fireEvent.click(screen.getByRole('button', { name: '翻转' }));
|
||||
expect(screen.getByTestId('layers').textContent).toContain(':flipX:');
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: '右键第三层' }));
|
||||
fireEvent.click(screen.getByRole('button', { name: '导出' }));
|
||||
expect(exportLayerImage).toHaveBeenCalledWith(
|
||||
expect.objectContaining({ id: 'third' }),
|
||||
);
|
||||
expect(screen.getByTestId('context').textContent).toBe('closed');
|
||||
});
|
||||
|
||||
it('deletes selected and direct layers while running delete side effects', () => {
|
||||
const onDeleteLayerSideEffects = vi.fn();
|
||||
render(
|
||||
<LayerCommandsHarness
|
||||
onDeleteLayerSideEffects={onDeleteLayerSideEffects}
|
||||
/>,
|
||||
);
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: '删除选中' }));
|
||||
|
||||
expect(screen.getByTestId('layers').textContent).not.toContain('first');
|
||||
expect(screen.getByTestId('layers').textContent).not.toContain('second');
|
||||
expect(screen.getByTestId('selection').textContent).toBe('third:third');
|
||||
expect(screen.getByTestId('metadata').textContent).toBe('-');
|
||||
expect(screen.getByTestId('image-context-closed').textContent).toBe('1');
|
||||
expect(onDeleteLayerSideEffects).toHaveBeenCalledWith('first');
|
||||
expect(onDeleteLayerSideEffects).toHaveBeenCalledWith('second');
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: '删除单图' }));
|
||||
expect(screen.getByTestId('image-context-closed').textContent).toBe('2');
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user