984 lines
37 KiB
TypeScript
984 lines
37 KiB
TypeScript
/**
|
|
* Sprite Component Inspector.
|
|
* 精灵组件检查器。
|
|
*
|
|
* Provides custom inspector UI for SpriteComponent with material override support.
|
|
* 为 SpriteComponent 提供带材质覆盖支持的自定义检查器 UI。
|
|
*/
|
|
|
|
import React, { useState, useEffect, useMemo, useCallback } from 'react';
|
|
import { Component, Core, getComponentInstanceTypeName } from '@esengine/ecs-framework';
|
|
import { IComponentInspector, ComponentInspectorContext, MessageHub, IFileSystemService, IFileSystem, ProjectService } from '@esengine/editor-core';
|
|
import { SpriteComponent, MaterialPropertyOverride } from '@esengine/sprite';
|
|
import { getMaterialManager, Material, BlendMode, BuiltInShaders, UniformType } from '@esengine/material-system';
|
|
import { ChevronDown, ChevronRight, X, Plus, Save, ExternalLink, RefreshCw } from 'lucide-react';
|
|
import './SpriteComponentInspector.css';
|
|
|
|
/**
|
|
* Blend mode options.
|
|
* 混合模式选项。
|
|
*/
|
|
const BLEND_MODE_OPTIONS = [
|
|
{ value: BlendMode.None, label: 'None (Opaque)' },
|
|
{ value: BlendMode.Alpha, label: 'Alpha Blend' },
|
|
{ value: BlendMode.Additive, label: 'Additive' },
|
|
{ value: BlendMode.Multiply, label: 'Multiply' },
|
|
{ value: BlendMode.Screen, label: 'Screen' },
|
|
{ value: BlendMode.PremultipliedAlpha, label: 'Premultiplied Alpha' },
|
|
];
|
|
|
|
/**
|
|
* Built-in shader options.
|
|
* 内置着色器选项。
|
|
*/
|
|
const BUILT_IN_SHADER_OPTIONS = [
|
|
{ value: BuiltInShaders.DefaultSprite, label: 'Default Sprite' },
|
|
{ value: BuiltInShaders.Grayscale, label: 'Grayscale' },
|
|
{ value: BuiltInShaders.Tint, label: 'Tint' },
|
|
{ value: BuiltInShaders.Flash, label: 'Flash' },
|
|
{ value: BuiltInShaders.Outline, label: 'Outline' },
|
|
];
|
|
|
|
/**
|
|
* Shader option with path info.
|
|
* 带路径信息的着色器选项。
|
|
*/
|
|
interface ShaderOption {
|
|
value: number;
|
|
label: string;
|
|
path?: string;
|
|
}
|
|
|
|
/**
|
|
* Get all available shaders (built-in + custom loaded).
|
|
* 获取所有可用着色器（内置 + 自定义加载的）。
|
|
*/
|
|
function getAvailableShaders(): ShaderOption[] {
|
|
const materialManager = getMaterialManager();
|
|
if (!materialManager) {
|
|
return BUILT_IN_SHADER_OPTIONS;
|
|
}
|
|
|
|
const shaderIds = materialManager.getShaderIds();
|
|
const options: ShaderOption[] = [];
|
|
|
|
for (const id of shaderIds) {
|
|
const shader = materialManager.getShader(id);
|
|
if (shader) {
|
|
// Check if it's a built-in shader.
|
|
// 检查是否是内置着色器。
|
|
const builtIn = BUILT_IN_SHADER_OPTIONS.find(opt => opt.value === id);
|
|
options.push({
|
|
value: id,
|
|
label: builtIn ? builtIn.label : shader.name
|
|
});
|
|
}
|
|
}
|
|
|
|
return options;
|
|
}
|
|
|
|
/**
|
|
* Scan and load all shader files from project.
|
|
* 扫描并加载项目中所有的着色器文件。
|
|
*/
|
|
async function scanAndLoadProjectShaders(): Promise<ShaderOption[]> {
|
|
const fileSystem = Core.services.tryResolve<IFileSystem>(IFileSystemService);
|
|
const projectService = Core.services.tryResolve(ProjectService);
|
|
const materialManager = getMaterialManager();
|
|
|
|
if (!fileSystem || !projectService || !materialManager) {
|
|
return getAvailableShaders();
|
|
}
|
|
|
|
const currentProject = projectService.getCurrentProject();
|
|
if (!currentProject) {
|
|
return getAvailableShaders();
|
|
}
|
|
|
|
try {
|
|
// Scan for .shader files in project.
|
|
// 扫描项目中的 .shader 文件。
|
|
const shaderFiles = await fileSystem.scanFiles(currentProject.path, '**/*.shader');
|
|
|
|
// Load each shader.
|
|
// 加载每个着色器。
|
|
for (const shaderPath of shaderFiles) {
|
|
// Skip if already loaded.
|
|
// 如果已加载则跳过。
|
|
if (materialManager.hasShaderByPath(shaderPath)) {
|
|
continue;
|
|
}
|
|
|
|
try {
|
|
await materialManager.loadShaderFromPath(shaderPath);
|
|
} catch (error) {
|
|
console.warn('[SpriteComponentInspector] Failed to load shader:', shaderPath, error);
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.warn('[SpriteComponentInspector] Failed to scan shader files:', error);
|
|
}
|
|
|
|
return getAvailableShaders();
|
|
}
|
|
|
|
/**
|
|
* Uniform type display names.
|
|
* Uniform 类型显示名称。
|
|
*/
|
|
const UNIFORM_TYPE_LABELS: Record<string, string> = {
|
|
'float': 'Float',
|
|
'vec2': 'Vec2',
|
|
'vec3': 'Vec3',
|
|
'vec4': 'Vec4',
|
|
'color': 'Color',
|
|
'int': 'Int',
|
|
'mat3': 'Mat3',
|
|
'mat4': 'Mat4',
|
|
'sampler': 'Sampler',
|
|
};
|
|
|
|
/**
|
|
* Inline material editor props.
|
|
* 内联材质编辑器属性。
|
|
*/
|
|
interface InlineMaterialEditorProps {
|
|
material: Material;
|
|
materialPath: string;
|
|
onMaterialChange: () => void;
|
|
}
|
|
|
|
/**
|
|
* Inline material editor component.
|
|
* 内联材质编辑器组件。
|
|
*
|
|
* Allows editing material properties directly in the sprite inspector.
|
|
* 允许直接在精灵检查器中编辑材质属性。
|
|
*/
|
|
function InlineMaterialEditor({ material, materialPath, onMaterialChange }: InlineMaterialEditorProps) {
|
|
const [isExpanded, setIsExpanded] = useState(true);
|
|
const [isDirty, setIsDirty] = useState(false);
|
|
const [isLoadingShaders, setIsLoadingShaders] = useState(false);
|
|
const [shaderOptions, setShaderOptions] = useState<ShaderOption[]>(() => getAvailableShaders());
|
|
const [localMaterial, setLocalMaterial] = useState(() => ({
|
|
name: material.name,
|
|
shader: material.shaderId,
|
|
blendMode: material.blendMode,
|
|
uniforms: Object.fromEntries(material.getUniforms())
|
|
}));
|
|
|
|
// Scan and load project shaders on mount.
|
|
// 挂载时扫描并加载项目着色器。
|
|
useEffect(() => {
|
|
let mounted = true;
|
|
setIsLoadingShaders(true);
|
|
|
|
scanAndLoadProjectShaders().then(options => {
|
|
if (mounted) {
|
|
setShaderOptions(options);
|
|
setIsLoadingShaders(false);
|
|
}
|
|
});
|
|
|
|
return () => { mounted = false; };
|
|
}, []);
|
|
|
|
// Sync with material changes.
|
|
// 同步材质变化。
|
|
useEffect(() => {
|
|
setLocalMaterial({
|
|
name: material.name,
|
|
shader: material.shaderId,
|
|
blendMode: material.blendMode,
|
|
uniforms: Object.fromEntries(material.getUniforms())
|
|
});
|
|
setIsDirty(false);
|
|
}, [material]);
|
|
|
|
const handleShaderChange = (shaderId: number) => {
|
|
material.shaderId = shaderId;
|
|
setLocalMaterial(prev => ({ ...prev, shader: shaderId }));
|
|
setIsDirty(true);
|
|
onMaterialChange();
|
|
};
|
|
|
|
const handleRefreshShaders = async () => {
|
|
// Re-scan project shaders.
|
|
// 重新扫描项目着色器。
|
|
setIsLoadingShaders(true);
|
|
const options = await scanAndLoadProjectShaders();
|
|
setShaderOptions(options);
|
|
setIsLoadingShaders(false);
|
|
};
|
|
|
|
const handleBlendModeChange = (blendMode: BlendMode) => {
|
|
material.blendMode = blendMode;
|
|
setLocalMaterial(prev => ({ ...prev, blendMode }));
|
|
setIsDirty(true);
|
|
onMaterialChange();
|
|
};
|
|
|
|
const handleUniformChange = (name: string, value: number | number[]) => {
|
|
// Get the uniform type from current material.
|
|
// 从当前材质获取 uniform 类型。
|
|
const currentUniform = material.getUniform(name);
|
|
if (!currentUniform) return;
|
|
|
|
// Set uniform based on type.
|
|
// 根据类型设置 uniform。
|
|
switch (currentUniform.type) {
|
|
case UniformType.Float:
|
|
if (typeof value === 'number') {
|
|
material.setFloat(name, value);
|
|
}
|
|
break;
|
|
case UniformType.Int:
|
|
if (typeof value === 'number') {
|
|
material.setInt(name, value);
|
|
}
|
|
break;
|
|
case UniformType.Vec2:
|
|
if (Array.isArray(value) && value.length >= 2) {
|
|
material.setVec2(name, value[0], value[1]);
|
|
}
|
|
break;
|
|
case UniformType.Vec3:
|
|
if (Array.isArray(value) && value.length >= 3) {
|
|
material.setVec3(name, value[0], value[1], value[2]);
|
|
}
|
|
break;
|
|
case UniformType.Vec4:
|
|
if (Array.isArray(value) && value.length >= 4) {
|
|
material.setVec4(name, value[0], value[1], value[2], value[3]);
|
|
}
|
|
break;
|
|
case UniformType.Color:
|
|
if (Array.isArray(value) && value.length >= 4) {
|
|
material.setColor(name, value[0], value[1], value[2], value[3]);
|
|
}
|
|
break;
|
|
}
|
|
|
|
setLocalMaterial(prev => ({
|
|
...prev,
|
|
uniforms: { ...prev.uniforms, [name]: { ...prev.uniforms[name], value } }
|
|
}));
|
|
setIsDirty(true);
|
|
onMaterialChange();
|
|
};
|
|
|
|
const handleSave = async () => {
|
|
if (!materialPath) return;
|
|
|
|
try {
|
|
const fileSystem = Core.services.tryResolve<IFileSystem>(IFileSystemService);
|
|
if (!fileSystem) {
|
|
console.error('[InlineMaterialEditor] FileSystem service not available');
|
|
return;
|
|
}
|
|
|
|
// Build material data.
|
|
// 构建材质数据。
|
|
const materialData = {
|
|
name: material.name,
|
|
shader: material.shaderId,
|
|
blendMode: material.blendMode,
|
|
uniforms: Object.fromEntries(
|
|
Array.from(material.getUniforms().entries()).map(([k, v]) => [k, { type: v.type, value: v.value }])
|
|
)
|
|
};
|
|
|
|
await fileSystem.writeFile(materialPath, JSON.stringify(materialData, null, 2));
|
|
setIsDirty(false);
|
|
|
|
// Notify
|
|
const messageHub = Core.services.tryResolve(MessageHub);
|
|
if (messageHub) {
|
|
messageHub.publish('material:saved', { filePath: materialPath });
|
|
}
|
|
} catch (error) {
|
|
console.error('[InlineMaterialEditor] Failed to save material:', error);
|
|
}
|
|
};
|
|
|
|
const handleOpenInEditor = () => {
|
|
const messageHub = Core.services.tryResolve(MessageHub);
|
|
if (messageHub && materialPath) {
|
|
messageHub.publish('asset:open', { filePath: materialPath, type: 'material' });
|
|
}
|
|
};
|
|
|
|
const uniforms = Array.from(material.getUniforms().entries());
|
|
|
|
return (
|
|
<div className="inline-material-editor">
|
|
<div
|
|
className="inline-material-header"
|
|
onClick={() => setIsExpanded(!isExpanded)}
|
|
>
|
|
<span className="inline-material-expand">
|
|
{isExpanded ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
|
|
</span>
|
|
<span className="inline-material-title">
|
|
Material: {material.name}
|
|
{isDirty && <span className="inline-material-dirty">*</span>}
|
|
</span>
|
|
<div className="inline-material-actions" onClick={e => e.stopPropagation()}>
|
|
<button
|
|
className="inline-material-btn"
|
|
onClick={handleSave}
|
|
disabled={!isDirty}
|
|
title="Save Material"
|
|
>
|
|
<Save size={12} />
|
|
</button>
|
|
<button
|
|
className="inline-material-btn"
|
|
onClick={handleOpenInEditor}
|
|
title="Open in Material Editor"
|
|
>
|
|
<ExternalLink size={12} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{isExpanded && (
|
|
<div className="inline-material-content">
|
|
{/* Shader */}
|
|
<div className="inline-material-row">
|
|
<label>Shader</label>
|
|
<div className="inline-material-shader-select">
|
|
<select
|
|
value={localMaterial.shader}
|
|
onChange={e => handleShaderChange(Number(e.target.value))}
|
|
disabled={isLoadingShaders}
|
|
>
|
|
{shaderOptions.map(opt => (
|
|
<option key={opt.value} value={opt.value}>{opt.label}</option>
|
|
))}
|
|
</select>
|
|
<button
|
|
className={`inline-material-refresh-btn ${isLoadingShaders ? 'loading' : ''}`}
|
|
onClick={handleRefreshShaders}
|
|
disabled={isLoadingShaders}
|
|
title="Refresh shader list"
|
|
>
|
|
<RefreshCw size={12} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Blend Mode */}
|
|
<div className="inline-material-row">
|
|
<label>Blend Mode</label>
|
|
<select
|
|
value={localMaterial.blendMode}
|
|
onChange={e => handleBlendModeChange(Number(e.target.value) as BlendMode)}
|
|
>
|
|
{BLEND_MODE_OPTIONS.map(opt => (
|
|
<option key={opt.value} value={opt.value}>{opt.label}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
{/* Uniforms */}
|
|
{uniforms.length > 0 && (
|
|
<div className="inline-material-uniforms">
|
|
<div className="inline-material-uniforms-header">Uniforms</div>
|
|
{uniforms.map(([name, uniform]) => (
|
|
<div key={name} className="inline-material-uniform">
|
|
<label>{name}</label>
|
|
<UniformValueEditor
|
|
type={uniform.type as MaterialPropertyOverride['type']}
|
|
value={uniform.value as number | number[]}
|
|
onChange={v => handleUniformChange(name, v)}
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Uniform value editor component (reused for both material and overrides).
|
|
* Uniform 值编辑器组件（用于材质和覆盖）。
|
|
*/
|
|
function UniformValueEditor({ type, value, onChange }: {
|
|
type: MaterialPropertyOverride['type'];
|
|
value: number | number[];
|
|
onChange: (value: number | number[]) => void;
|
|
}) {
|
|
switch (type) {
|
|
case 'float':
|
|
case 'int':
|
|
return (
|
|
<input
|
|
type="number"
|
|
className="uniform-input uniform-input-number"
|
|
value={typeof value === 'number' ? value : 0}
|
|
step={type === 'int' ? 1 : 0.1}
|
|
onChange={(e) => {
|
|
const v = type === 'int'
|
|
? Math.floor(parseFloat(e.target.value) || 0)
|
|
: parseFloat(e.target.value) || 0;
|
|
onChange(v);
|
|
}}
|
|
/>
|
|
);
|
|
|
|
case 'vec2':
|
|
return (
|
|
<div className="uniform-vector">
|
|
{['X', 'Y'].map((axis, i) => (
|
|
<div key={axis} className="uniform-vector-axis">
|
|
<span className={`uniform-axis-label uniform-axis-${axis.toLowerCase()}`}>{axis}</span>
|
|
<input
|
|
type="number"
|
|
className="uniform-input"
|
|
value={Array.isArray(value) ? (value[i] ?? 0) : 0}
|
|
step={0.1}
|
|
onChange={(e) => {
|
|
const arr = Array.isArray(value) ? [...value] : [0, 0];
|
|
arr[i] = parseFloat(e.target.value) || 0;
|
|
onChange(arr);
|
|
}}
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
|
|
case 'vec3':
|
|
return (
|
|
<div className="uniform-vector">
|
|
{['X', 'Y', 'Z'].map((axis, i) => (
|
|
<div key={axis} className="uniform-vector-axis">
|
|
<span className={`uniform-axis-label uniform-axis-${axis.toLowerCase()}`}>{axis}</span>
|
|
<input
|
|
type="number"
|
|
className="uniform-input"
|
|
value={Array.isArray(value) ? (value[i] ?? 0) : 0}
|
|
step={0.1}
|
|
onChange={(e) => {
|
|
const arr = Array.isArray(value) ? [...value] : [0, 0, 0];
|
|
arr[i] = parseFloat(e.target.value) || 0;
|
|
onChange(arr);
|
|
}}
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
|
|
case 'vec4':
|
|
return (
|
|
<div className="uniform-vector uniform-vector-4">
|
|
{['X', 'Y', 'Z', 'W'].map((axis, i) => (
|
|
<div key={axis} className="uniform-vector-axis">
|
|
<span className={`uniform-axis-label uniform-axis-${axis.toLowerCase()}`}>{axis}</span>
|
|
<input
|
|
type="number"
|
|
className="uniform-input"
|
|
value={Array.isArray(value) ? (value[i] ?? 0) : 0}
|
|
step={0.1}
|
|
onChange={(e) => {
|
|
const arr = Array.isArray(value) ? [...value] : [0, 0, 0, 0];
|
|
arr[i] = parseFloat(e.target.value) || 0;
|
|
onChange(arr);
|
|
}}
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
|
|
case 'color': {
|
|
const colorArray = Array.isArray(value) ? value : [1, 1, 1, 1];
|
|
const r = Math.round((colorArray[0] ?? 1) * 255);
|
|
const g = Math.round((colorArray[1] ?? 1) * 255);
|
|
const b = Math.round((colorArray[2] ?? 1) * 255);
|
|
const hexColor = `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
|
|
|
|
return (
|
|
<div className="uniform-color">
|
|
<div
|
|
className="uniform-color-preview"
|
|
style={{ backgroundColor: hexColor }}
|
|
/>
|
|
<input
|
|
type="color"
|
|
className="uniform-color-input"
|
|
value={hexColor}
|
|
onChange={(e) => {
|
|
const hex = e.target.value;
|
|
const newR = parseInt(hex.slice(1, 3), 16) / 255;
|
|
const newG = parseInt(hex.slice(3, 5), 16) / 255;
|
|
const newB = parseInt(hex.slice(5, 7), 16) / 255;
|
|
onChange([newR, newG, newB, colorArray[3] ?? 1]);
|
|
}}
|
|
/>
|
|
<input
|
|
type="number"
|
|
className="uniform-input uniform-alpha"
|
|
value={colorArray[3] ?? 1}
|
|
min={0}
|
|
max={1}
|
|
step={0.1}
|
|
title="Alpha"
|
|
onChange={(e) => {
|
|
const alpha = Math.max(0, Math.min(1, parseFloat(e.target.value) || 0));
|
|
onChange([colorArray[0] ?? 1, colorArray[1] ?? 1, colorArray[2] ?? 1, alpha]);
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
default:
|
|
return <span className="uniform-unsupported">Unsupported type</span>;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Material override editor props.
|
|
* 材质覆盖编辑器属性。
|
|
*/
|
|
interface MaterialOverrideEditorProps {
|
|
sprite: SpriteComponent;
|
|
material: Material | null;
|
|
onChange: (propertyName: string, value: unknown) => void;
|
|
}
|
|
|
|
/**
|
|
* Material override editor component.
|
|
* 材质覆盖编辑器组件。
|
|
*/
|
|
function MaterialOverrideEditor({ sprite, material, onChange }: MaterialOverrideEditorProps) {
|
|
const [isExpanded, setIsExpanded] = useState(true);
|
|
const [showAddMenu, setShowAddMenu] = useState(false);
|
|
|
|
// Get available uniforms from material.
|
|
// 从材质获取可用的 uniforms。
|
|
const availableUniforms = useMemo(() => {
|
|
if (!material) return [];
|
|
const uniforms = material.getUniforms();
|
|
return Array.from(uniforms.entries()).map(([name, value]) => ({
|
|
name,
|
|
type: value.type,
|
|
defaultValue: value.value
|
|
}));
|
|
}, [material]);
|
|
|
|
// Get current overrides.
|
|
// 获取当前覆盖。
|
|
const currentOverrides = sprite.materialOverrides || {};
|
|
const overrideKeys = Object.keys(currentOverrides);
|
|
|
|
// Get uniforms not yet overridden.
|
|
// 获取尚未覆盖的 uniforms。
|
|
const unoverriddenUniforms = availableUniforms.filter(
|
|
u => !overrideKeys.includes(u.name)
|
|
);
|
|
|
|
const handleAddOverride = (uniformName: string) => {
|
|
const uniform = availableUniforms.find(u => u.name === uniformName);
|
|
if (!uniform) return;
|
|
|
|
// Convert defaultValue to appropriate type
|
|
let value: number | number[];
|
|
if (typeof uniform.defaultValue === 'number') {
|
|
value = uniform.defaultValue;
|
|
} else if (Array.isArray(uniform.defaultValue)) {
|
|
value = uniform.defaultValue as number[];
|
|
} else {
|
|
value = 0;
|
|
}
|
|
|
|
const newOverride: MaterialPropertyOverride = {
|
|
type: uniform.type as MaterialPropertyOverride['type'],
|
|
value
|
|
};
|
|
|
|
const newOverrides = { ...currentOverrides, [uniformName]: newOverride };
|
|
onChange('materialOverrides', newOverrides);
|
|
setShowAddMenu(false);
|
|
};
|
|
|
|
const handleRemoveOverride = (uniformName: string) => {
|
|
const newOverrides = { ...currentOverrides };
|
|
delete newOverrides[uniformName];
|
|
onChange('materialOverrides', newOverrides);
|
|
};
|
|
|
|
const handleOverrideChange = (uniformName: string, value: number | number[]) => {
|
|
const current = currentOverrides[uniformName];
|
|
if (!current) return;
|
|
|
|
const newOverrides = {
|
|
...currentOverrides,
|
|
[uniformName]: { ...current, value }
|
|
};
|
|
onChange('materialOverrides', newOverrides);
|
|
};
|
|
|
|
if (!sprite.material) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className="material-override-section">
|
|
<div
|
|
className="material-override-header"
|
|
onClick={() => setIsExpanded(!isExpanded)}
|
|
>
|
|
<span className="material-override-expand">
|
|
{isExpanded ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
|
|
</span>
|
|
<span className="material-override-title">Material Overrides</span>
|
|
{overrideKeys.length > 0 && (
|
|
<span className="material-override-count">{overrideKeys.length}</span>
|
|
)}
|
|
</div>
|
|
|
|
{isExpanded && (
|
|
<div className="material-override-content">
|
|
{/* Existing overrides */}
|
|
{overrideKeys.map(key => {
|
|
const override = currentOverrides[key];
|
|
if (!override) return null;
|
|
return (
|
|
<div key={key} className="material-override-item">
|
|
<div className="material-override-item-header">
|
|
<span className="material-override-name">{key}</span>
|
|
<span className="material-override-type">
|
|
{UNIFORM_TYPE_LABELS[override.type] || override.type}
|
|
</span>
|
|
<button
|
|
className="material-override-remove"
|
|
onClick={() => handleRemoveOverride(key)}
|
|
title="Remove override"
|
|
>
|
|
<X size={12} />
|
|
</button>
|
|
</div>
|
|
<OverrideValueEditor
|
|
type={override.type}
|
|
value={override.value}
|
|
onChange={(v) => handleOverrideChange(key, v)}
|
|
/>
|
|
</div>
|
|
);
|
|
})}
|
|
|
|
{/* Add override button */}
|
|
{unoverriddenUniforms.length > 0 && (
|
|
<div className="material-override-add-container">
|
|
<button
|
|
className="material-override-add-btn"
|
|
onClick={() => setShowAddMenu(!showAddMenu)}
|
|
>
|
|
<Plus size={12} />
|
|
<span>Add Override</span>
|
|
</button>
|
|
{showAddMenu && (
|
|
<div className="material-override-add-menu">
|
|
{unoverriddenUniforms.map(u => (
|
|
<button
|
|
key={u.name}
|
|
className="material-override-add-item"
|
|
onClick={() => handleAddOverride(u.name)}
|
|
>
|
|
<span>{u.name}</span>
|
|
<span className="material-override-type-hint">
|
|
{UNIFORM_TYPE_LABELS[u.type] || u.type}
|
|
</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Empty state */}
|
|
{overrideKeys.length === 0 && unoverriddenUniforms.length === 0 && (
|
|
<div className="material-override-empty">
|
|
{material ? 'No parameters available' : 'Select a material first'}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Override value editor props.
|
|
* 覆盖值编辑器属性。
|
|
*/
|
|
interface OverrideValueEditorProps {
|
|
type: MaterialPropertyOverride['type'];
|
|
value: number | number[];
|
|
onChange: (value: number | number[]) => void;
|
|
}
|
|
|
|
/**
|
|
* Override value editor component.
|
|
* 覆盖值编辑器组件。
|
|
*/
|
|
function OverrideValueEditor({ type, value, onChange }: OverrideValueEditorProps) {
|
|
switch (type) {
|
|
case 'float':
|
|
case 'int':
|
|
return (
|
|
<input
|
|
type="number"
|
|
className="override-input override-input-number"
|
|
value={typeof value === 'number' ? value : 0}
|
|
step={type === 'int' ? 1 : 0.1}
|
|
onChange={(e) => {
|
|
const v = type === 'int'
|
|
? Math.floor(parseFloat(e.target.value) || 0)
|
|
: parseFloat(e.target.value) || 0;
|
|
onChange(v);
|
|
}}
|
|
/>
|
|
);
|
|
|
|
case 'vec2':
|
|
return (
|
|
<div className="override-vector">
|
|
{['X', 'Y'].map((axis, i) => (
|
|
<div key={axis} className="override-vector-axis">
|
|
<span className={`override-axis-label override-axis-${axis.toLowerCase()}`}>{axis}</span>
|
|
<input
|
|
type="number"
|
|
className="override-input"
|
|
value={Array.isArray(value) ? (value[i] ?? 0) : 0}
|
|
step={0.1}
|
|
onChange={(e) => {
|
|
const arr = Array.isArray(value) ? [...value] : [0, 0];
|
|
arr[i] = parseFloat(e.target.value) || 0;
|
|
onChange(arr);
|
|
}}
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
|
|
case 'vec3':
|
|
return (
|
|
<div className="override-vector">
|
|
{['X', 'Y', 'Z'].map((axis, i) => (
|
|
<div key={axis} className="override-vector-axis">
|
|
<span className={`override-axis-label override-axis-${axis.toLowerCase()}`}>{axis}</span>
|
|
<input
|
|
type="number"
|
|
className="override-input"
|
|
value={Array.isArray(value) ? (value[i] ?? 0) : 0}
|
|
step={0.1}
|
|
onChange={(e) => {
|
|
const arr = Array.isArray(value) ? [...value] : [0, 0, 0];
|
|
arr[i] = parseFloat(e.target.value) || 0;
|
|
onChange(arr);
|
|
}}
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
|
|
case 'vec4':
|
|
return (
|
|
<div className="override-vector override-vector-4">
|
|
{['X', 'Y', 'Z', 'W'].map((axis, i) => (
|
|
<div key={axis} className="override-vector-axis">
|
|
<span className={`override-axis-label override-axis-${axis.toLowerCase()}`}>{axis}</span>
|
|
<input
|
|
type="number"
|
|
className="override-input"
|
|
value={Array.isArray(value) ? (value[i] ?? 0) : 0}
|
|
step={0.1}
|
|
onChange={(e) => {
|
|
const arr = Array.isArray(value) ? [...value] : [0, 0, 0, 0];
|
|
arr[i] = parseFloat(e.target.value) || 0;
|
|
onChange(arr);
|
|
}}
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
|
|
case 'color': {
|
|
const colorArray = Array.isArray(value) ? value : [1, 1, 1, 1];
|
|
const r = Math.round((colorArray[0] ?? 1) * 255);
|
|
const g = Math.round((colorArray[1] ?? 1) * 255);
|
|
const b = Math.round((colorArray[2] ?? 1) * 255);
|
|
const hexColor = `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
|
|
|
|
return (
|
|
<div className="override-color">
|
|
<div
|
|
className="override-color-preview"
|
|
style={{ backgroundColor: hexColor }}
|
|
/>
|
|
<input
|
|
type="color"
|
|
className="override-color-input"
|
|
value={hexColor}
|
|
onChange={(e) => {
|
|
const hex = e.target.value;
|
|
const newR = parseInt(hex.slice(1, 3), 16) / 255;
|
|
const newG = parseInt(hex.slice(3, 5), 16) / 255;
|
|
const newB = parseInt(hex.slice(5, 7), 16) / 255;
|
|
onChange([newR, newG, newB, colorArray[3] ?? 1]);
|
|
}}
|
|
/>
|
|
<input
|
|
type="number"
|
|
className="override-input override-alpha"
|
|
value={colorArray[3] ?? 1}
|
|
min={0}
|
|
max={1}
|
|
step={0.1}
|
|
title="Alpha"
|
|
onChange={(e) => {
|
|
const alpha = Math.max(0, Math.min(1, parseFloat(e.target.value) || 0));
|
|
onChange([colorArray[0] ?? 1, colorArray[1] ?? 1, colorArray[2] ?? 1, alpha]);
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
default:
|
|
return <span className="override-unsupported">Unsupported type</span>;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Sprite inspector content component.
|
|
* 精灵检查器内容组件。
|
|
*/
|
|
function SpriteInspectorContent({ context }: { context: ComponentInspectorContext }) {
|
|
const sprite = context.component as SpriteComponent;
|
|
const [material, setMaterial] = useState<Material | null>(null);
|
|
const [, forceUpdate] = useState({});
|
|
|
|
// Load material when sprite.material changes.
|
|
// 当 sprite.material 变化时加载材质。
|
|
useEffect(() => {
|
|
if (!sprite.material) {
|
|
setMaterial(null);
|
|
return;
|
|
}
|
|
|
|
const materialManager = getMaterialManager();
|
|
if (!materialManager) {
|
|
setMaterial(null);
|
|
return;
|
|
}
|
|
|
|
// Try to get cached material by ID.
|
|
// 尝试通过 ID 获取缓存的材质。
|
|
const materialId = materialManager.getMaterialIdByPath(sprite.material);
|
|
if (materialId > 0) {
|
|
const mat = materialManager.getMaterial(materialId);
|
|
setMaterial(mat || null);
|
|
return;
|
|
}
|
|
|
|
// Load material asynchronously.
|
|
// 异步加载材质。
|
|
materialManager.loadMaterialFromPath(sprite.material)
|
|
.then(matId => {
|
|
const mat = materialManager.getMaterial(matId);
|
|
setMaterial(mat || null);
|
|
})
|
|
.catch(() => {
|
|
setMaterial(null);
|
|
});
|
|
}, [sprite.material]);
|
|
|
|
const handleChange = useCallback((propertyName: string, value: unknown) => {
|
|
(sprite as unknown as Record<string, unknown>)[propertyName] = value;
|
|
context.onChange?.(propertyName, value);
|
|
forceUpdate({});
|
|
|
|
// Publish scene:modified.
|
|
// 发布 scene:modified。
|
|
const messageHub = Core.services.tryResolve(MessageHub);
|
|
if (messageHub) {
|
|
messageHub.publish('scene:modified', {});
|
|
}
|
|
}, [sprite, context]);
|
|
|
|
const handleMaterialChange = useCallback(() => {
|
|
forceUpdate({});
|
|
// Publish scene:modified for material changes.
|
|
// 发布 scene:modified 用于材质变更。
|
|
const messageHub = Core.services.tryResolve(MessageHub);
|
|
if (messageHub) {
|
|
messageHub.publish('scene:modified', {});
|
|
}
|
|
}, []);
|
|
|
|
// No material selected
|
|
if (!sprite.material) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className="sprite-component-inspector">
|
|
{/* Inline material editor */}
|
|
{material && (
|
|
<InlineMaterialEditor
|
|
material={material}
|
|
materialPath={sprite.material}
|
|
onMaterialChange={handleMaterialChange}
|
|
/>
|
|
)}
|
|
|
|
{/* Material override section */}
|
|
<MaterialOverrideEditor
|
|
sprite={sprite}
|
|
material={material}
|
|
onChange={handleChange}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Sprite component inspector implementation.
|
|
* 精灵组件检查器实现。
|
|
*
|
|
* Uses 'append' mode to show material overrides after the default PropertyInspector.
|
|
* 使用 'append' 模式在默认 PropertyInspector 后显示材质覆盖。
|
|
*/
|
|
export class SpriteComponentInspector implements IComponentInspector<SpriteComponent> {
|
|
readonly id = 'sprite-component-inspector';
|
|
readonly name = 'Sprite Component Inspector';
|
|
readonly priority = 100;
|
|
readonly targetComponents = ['Sprite', 'SpriteComponent'];
|
|
readonly renderMode = 'append' as const;
|
|
|
|
canHandle(component: Component): component is SpriteComponent {
|
|
const typeName = getComponentInstanceTypeName(component);
|
|
return typeName === 'Sprite' || typeName === 'SpriteComponent';
|
|
}
|
|
|
|
render(context: ComponentInspectorContext): React.ReactElement {
|
|
return React.createElement(SpriteInspectorContent, {
|
|
context,
|
|
key: `sprite-${context.version}`
|
|
});
|
|
}
|
|
}
|