97 lines
3.7 KiB
TypeScript
97 lines
3.7 KiB
TypeScript
/**
|
||
* 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/esengine';
|
||
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>
|
||
);
|
||
}
|
||
}
|