feat(modules): 添加module.json配置
This commit is contained in:
yhh
983
packages/sprite-editor/src/SpriteComponentInspector.tsx
Normal file
983
packages/sprite-editor/src/SpriteComponentInspector.tsx
Normal file
@@ -0,0 +1,983 @@
|
||||
/**
|
||||
* 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, MaterialOverrides, 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}`
|
||||
});
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user