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 构建错误并优化构建性能
2025-12-01 22:28:51 +08:00
parent 189714c727
commit b42a7b4e43
468 changed files with 18301 additions and 9075 deletions
--- a/packages/tilemap-editor/src/providers/TilemapInspectorProvider.tsx
+++ b/packages/tilemap-editor/src/providers/TilemapInspectorProvider.tsx
@@ -0,0 +1,96 @@
+/**
+ * Tilemap Inspector Provider - Custom inspector for TilemapComponent
+ */
+
+import React from 'react';
+import { Edit3 } from 'lucide-react';
+import type { IInspectorProvider, InspectorContext } from '@esengine/editor-core';
+import { MessageHub } from '@esengine/editor-core';
+import { Core } from '@esengine/ecs-framework';
+import type { TilemapComponent } from '@esengine/tilemap';
+
+interface TilemapInspectorData {
+    entityId: string;
+    component: TilemapComponent;
+}
+
+export class TilemapInspectorProvider implements IInspectorProvider<TilemapInspectorData> {
+    readonly id = 'tilemap-component-inspector';
+    readonly name = 'Tilemap Component Inspector';
+    readonly priority = 100;
+
+    canHandle(target: unknown): target is TilemapInspectorData {
+        if (typeof target !== 'object' || target === null) return false;
+        const obj = target as Record<string, unknown>;
+        return 'entityId' in obj && 'component' in obj &&
+            obj.component !== null &&
+            typeof obj.component === 'object' &&
+            'width' in (obj.component as Record<string, unknown>) &&
+            'height' in (obj.component as Record<string, unknown>) &&
+            'tileWidth' in (obj.component as Record<string, unknown>);
+    }
+
+    render(data: TilemapInspectorData, context: InspectorContext): React.ReactElement {
+        const { entityId, component } = data;
+
+        const handleEditClick = () => {
+            // Emit event to open tilemap editor
+            const messageHub = Core.services.resolve(MessageHub);
+            messageHub?.publish('tilemap:edit', { entityId });
+
+            // Open the tilemap editor panel
+            messageHub?.publish('dynamic-panel:open', { panelId: 'tilemap-editor', title: 'Tilemap Editor' });
+        };
+
+        return (
+            <div className="entity-inspector">
+                <div className="inspector-section">
+                    <div className="section-title">Tilemap</div>
+
+                    <div className="property-row">
+                        <label>Size</label>
+                        <span>{component.width} × {component.height}</span>
+                    </div>
+
+                    <div className="property-row">
+                        <label>Tile Size</label>
+                        <span>{component.tileWidth} × {component.tileHeight}</span>
+                    </div>
+
+                    <div className="property-row">
+                        <label>Tileset</label>
+                        <span>{component.tilesets[0]?.source || 'None'}</span>
+                    </div>
+
+                    <div className="property-row">
+                        <label>Layers</label>
+                        <span>{component.layers.length}</span>
+                    </div>
+
+                    <div style={{ marginTop: '12px' }}>
+                        <button
+                            onClick={handleEditClick}
+                            style={{
+                                display: 'flex',
+                                alignItems: 'center',
+                                gap: '6px',
+                                padding: '8px 12px',
+                                width: '100%',
+                                border: 'none',
+                                borderRadius: '4px',
+                                background: 'var(--accent-color, #0078d4)',
+                                color: 'white',
+                                cursor: 'pointer',
+                                fontSize: '12px',
+                                fontWeight: 500,
+                            }}
+                        >
+                            <Edit3 size={14} />
+                            Edit Tilemap
+                        </button>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}