Feature/editor optimization (#251)
* refactor: 编辑器/运行时架构拆分与构建系统升级 * feat(core): 层级系统重构与UI变换矩阵修复 * refactor: 移除 ecs-components 聚合包并修复跨包组件查找问题 * fix(physics): 修复跨包组件类引用问题 * feat: 统一运行时架构与浏览器运行支持 * feat(asset): 实现浏览器运行时资产加载系统 * fix: 修复文档、CodeQL安全问题和CI类型检查错误 * fix: 修复文档、CodeQL安全问题和CI类型检查错误 * fix: 修复文档、CodeQL安全问题、CI类型检查和测试错误 * test: 补齐核心模块测试用例，修复CI构建配置 * fix: 修复测试用例中的类型错误和断言问题 * fix: 修复 turbo build:npm 任务的依赖顺序问题 * fix: 修复 CI 构建错误并优化构建性能
This commit is contained in:
YHH
GitHub
210
packages/tilemap-editor/src/components/TilesetPreview.tsx
Normal file
210
packages/tilemap-editor/src/components/TilesetPreview.tsx
Normal file
@@ -0,0 +1,210 @@
|
||||
/**
|
||||
* Tileset Preview Component - Display and select tiles from a tileset
|
||||
*/
|
||||
|
||||
import React, { useRef, useEffect, useState, useCallback } from 'react';
|
||||
import { useTilemapEditorStore, type TileSelection } from '../stores/TilemapEditorStore';
|
||||
|
||||
interface TilesetPreviewProps {
|
||||
imageUrl: string;
|
||||
tileWidth: number;
|
||||
tileHeight: number;
|
||||
columns: number;
|
||||
rows: number;
|
||||
onSelectionChange?: (selection: TileSelection) => void;
|
||||
}
|
||||
|
||||
export const TilesetPreview: React.FC<TilesetPreviewProps> = ({
|
||||
imageUrl,
|
||||
tileWidth,
|
||||
tileHeight,
|
||||
columns,
|
||||
rows,
|
||||
onSelectionChange,
|
||||
}) => {
|
||||
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const [image, setImage] = useState<HTMLImageElement | null>(null);
|
||||
const [isSelecting, setIsSelecting] = useState(false);
|
||||
const [selectionStart, setSelectionStart] = useState<{ x: number; y: number } | null>(null);
|
||||
const [selectionEnd, setSelectionEnd] = useState<{ x: number; y: number } | null>(null);
|
||||
const [zoom, setZoom] = useState(1);
|
||||
|
||||
const selectedTiles = useTilemapEditorStore(state => state.selectedTiles);
|
||||
const setSelectedTiles = useTilemapEditorStore(state => state.setSelectedTiles);
|
||||
|
||||
// Load image
|
||||
useEffect(() => {
|
||||
const img = new Image();
|
||||
img.onload = () => setImage(img);
|
||||
img.src = imageUrl;
|
||||
}, [imageUrl]);
|
||||
|
||||
// Draw tileset
|
||||
const draw = useCallback(() => {
|
||||
const canvas = canvasRef.current;
|
||||
if (!canvas || !image) return;
|
||||
|
||||
const ctx = canvas.getContext('2d');
|
||||
if (!ctx) return;
|
||||
|
||||
// Set canvas size based on actual image size (+1 for border lines)
|
||||
canvas.width = image.width + 1;
|
||||
canvas.height = image.height + 1;
|
||||
|
||||
// Draw image
|
||||
ctx.imageSmoothingEnabled = false;
|
||||
ctx.drawImage(image, 0, 0);
|
||||
|
||||
// Draw grid only within the actual tileset area
|
||||
ctx.strokeStyle = 'rgba(255, 255, 255, 0.3)';
|
||||
ctx.lineWidth = 1;
|
||||
|
||||
for (let x = 0; x <= columns; x++) {
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x * tileWidth + 0.5, 0);
|
||||
ctx.lineTo(x * tileWidth + 0.5, image.height);
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
for (let y = 0; y <= rows; y++) {
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(0, y * tileHeight + 0.5);
|
||||
ctx.lineTo(image.width, y * tileHeight + 0.5);
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
// Draw selection preview during drag
|
||||
if (isSelecting && selectionStart && selectionEnd) {
|
||||
const minX = Math.min(selectionStart.x, selectionEnd.x);
|
||||
const maxX = Math.max(selectionStart.x, selectionEnd.x);
|
||||
const minY = Math.min(selectionStart.y, selectionEnd.y);
|
||||
const maxY = Math.max(selectionStart.y, selectionEnd.y);
|
||||
|
||||
ctx.fillStyle = 'rgba(0, 120, 212, 0.3)';
|
||||
ctx.fillRect(
|
||||
minX * tileWidth,
|
||||
minY * tileHeight,
|
||||
(maxX - minX + 1) * tileWidth,
|
||||
(maxY - minY + 1) * tileHeight
|
||||
);
|
||||
}
|
||||
|
||||
// Draw current selection
|
||||
if (selectedTiles && !isSelecting) {
|
||||
ctx.strokeStyle = '#0078d4';
|
||||
ctx.lineWidth = 2;
|
||||
ctx.strokeRect(
|
||||
selectedTiles.x * tileWidth + 1,
|
||||
selectedTiles.y * tileHeight + 1,
|
||||
selectedTiles.width * tileWidth - 2,
|
||||
selectedTiles.height * tileHeight - 2
|
||||
);
|
||||
}
|
||||
}, [image, columns, rows, tileWidth, tileHeight, selectedTiles, isSelecting, selectionStart, selectionEnd]);
|
||||
|
||||
useEffect(() => {
|
||||
draw();
|
||||
}, [draw]);
|
||||
|
||||
const getTileCoords = (e: React.MouseEvent): { x: number; y: number } => {
|
||||
const canvas = canvasRef.current;
|
||||
if (!canvas) return { x: 0, y: 0 };
|
||||
|
||||
const rect = canvas.getBoundingClientRect();
|
||||
const scaleX = canvas.width / rect.width;
|
||||
const scaleY = canvas.height / rect.height;
|
||||
const x = Math.floor((e.clientX - rect.left) * scaleX / tileWidth);
|
||||
const y = Math.floor((e.clientY - rect.top) * scaleY / tileHeight);
|
||||
|
||||
return {
|
||||
x: Math.max(0, Math.min(columns - 1, x)),
|
||||
y: Math.max(0, Math.min(rows - 1, y)),
|
||||
};
|
||||
};
|
||||
|
||||
const handleWheel = (e: React.WheelEvent) => {
|
||||
// Only zoom when Ctrl is pressed
|
||||
if (e.ctrlKey) {
|
||||
e.preventDefault();
|
||||
const delta = e.deltaY > 0 ? 0.9 : 1.1;
|
||||
setZoom(z => Math.max(0.5, Math.min(5, z * delta)));
|
||||
}
|
||||
// Otherwise let the default scroll behavior work
|
||||
};
|
||||
|
||||
const handleMouseDown = (e: React.MouseEvent) => {
|
||||
const coords = getTileCoords(e);
|
||||
setIsSelecting(true);
|
||||
setSelectionStart(coords);
|
||||
setSelectionEnd(coords);
|
||||
};
|
||||
|
||||
const handleMouseMove = (e: React.MouseEvent) => {
|
||||
if (!isSelecting) return;
|
||||
const coords = getTileCoords(e);
|
||||
setSelectionEnd(coords);
|
||||
};
|
||||
|
||||
const handleMouseUp = () => {
|
||||
if (!isSelecting || !selectionStart || !selectionEnd) {
|
||||
setIsSelecting(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const minX = Math.min(selectionStart.x, selectionEnd.x);
|
||||
const maxX = Math.max(selectionStart.x, selectionEnd.x);
|
||||
const minY = Math.min(selectionStart.y, selectionEnd.y);
|
||||
const maxY = Math.max(selectionStart.y, selectionEnd.y);
|
||||
|
||||
const width = maxX - minX + 1;
|
||||
const height = maxY - minY + 1;
|
||||
const tiles: number[] = [];
|
||||
|
||||
for (let y = minY; y <= maxY; y++) {
|
||||
for (let x = minX; x <= maxX; x++) {
|
||||
// Tile index = y * columns + x + 1 (0 is empty)
|
||||
tiles.push(y * columns + x + 1);
|
||||
}
|
||||
}
|
||||
|
||||
const selection: TileSelection = {
|
||||
x: minX,
|
||||
y: minY,
|
||||
width,
|
||||
height,
|
||||
tiles,
|
||||
};
|
||||
|
||||
setSelectedTiles(selection);
|
||||
onSelectionChange?.(selection);
|
||||
|
||||
setIsSelecting(false);
|
||||
setSelectionStart(null);
|
||||
setSelectionEnd(null);
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={containerRef}
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
}}
|
||||
onWheel={handleWheel}
|
||||
>
|
||||
<canvas
|
||||
ref={canvasRef}
|
||||
className="tileset-canvas"
|
||||
style={{
|
||||
transform: `scale(${zoom})`,
|
||||
transformOrigin: 'top left',
|
||||
}}
|
||||
onMouseDown={handleMouseDown}
|
||||
onMouseMove={handleMouseMove}
|
||||
onMouseUp={handleMouseUp}
|
||||
onMouseLeave={handleMouseUp}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user