CocosPlugin/esengine
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(core): 移除@Inject参数装饰器，统一使用@InjectProperty (#229)

Browse Source 
* refactor(core): 移除@Inject参数装饰器，统一使用@InjectProperty

* refactor(core): 移除@Inject参数装饰器，统一使用@InjectProperty
This commit is contained in:
YHH
2025-11-21 11:37:55 +08:00
committed by GitHub
parent a768b890fd
commit 2621d7f659
16 changed files with 211 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/editor-app/src/components/inspectors/common/ComponentItem.tsx
View File

@@ -1,5 +1,5 @@
import { useState } from 'react';
import { ChevronDown, ChevronRight } from 'lucide-react';
import { ChevronDown, ChevronRight, Settings } from 'lucide-react';
import { PropertyContext, PropertyRendererRegistry } from '@esengine/editor-core';
import { Core } from '@esengine/ecs-framework';
@@ -38,6 +38,7 @@ export function ComponentItem({ component, decimalPlaces = 4 }: ComponentItemPro
}}
>
{isExpanded ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
<Settings size={14} style={{ marginLeft: "4px", color: "#888" }} />
<span
style={{
marginLeft: '6px',

34
packages/editor-app/src/infrastructure/field-editors/VectorFieldEditors.tsx
View File

@@ -10,24 +10,17 @@ const VectorInput: React.FC<{
value: number;
onChange: (value: number) => void;
readonly?: boolean;
}> = ({ label, value, onChange, readonly }) => (
<div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
<span style={{ color: '#888', fontSize: '10px', minWidth: '12px' }}>{label}:</span>
axis: 'x' | 'y' | 'z' | 'w';
}> = ({ label, value, onChange, readonly, axis }) => (
<div className="property-vector-axis-compact">
<span className={`property-vector-axis-label property-vector-axis-${axis}`}>{label}</span>
<input
type="number"
value={value}
onChange={(e) => onChange(parseFloat(e.target.value) || 0)}
disabled={readonly}
step={0.1}
style={{
width: '60px',
padding: '2px 4px',
backgroundColor: '#2a2a2a',
border: '1px solid #444',
borderRadius: '3px',
color: '#e0e0e0',
fontSize: '11px'
}}
className="property-input property-input-number property-input-number-compact"
/>
</div>
);
@@ -47,18 +40,20 @@ export class Vector2FieldEditor implements IFieldEditor<Vector2> {
return (
<div className="property-field">
<label className="property-label">{label}</label>
<div style={{ display: 'flex', gap: '8px' }}>
<div className="property-vector-compact">
<VectorInput
label="X"
value={v.x}
onChange={(x) => onChange({ ...v, x })}
readonly={context.readonly}
axis="x"
/>
<VectorInput
label="Y"
value={v.y}
onChange={(y) => onChange({ ...v, y })}
readonly={context.readonly}
axis="y"
/>
</div>
</div>
@@ -81,24 +76,27 @@ export class Vector3FieldEditor implements IFieldEditor<Vector3> {
return (
<div className="property-field">
<label className="property-label">{label}</label>
<div style={{ display: 'flex', gap: '8px' }}>
<div className="property-vector-compact">
<VectorInput
label="X"
value={v.x}
onChange={(x) => onChange({ ...v, x })}
readonly={context.readonly}
axis="x"
/>
<VectorInput
label="Y"
value={v.y}
onChange={(y) => onChange({ ...v, y })}
readonly={context.readonly}
axis="y"
/>
<VectorInput
label="Z"
value={v.z}
onChange={(z) => onChange({ ...v, z })}
readonly={context.readonly}
axis="z"
/>
</div>
</div>
@@ -121,33 +119,37 @@ export class Vector4FieldEditor implements IFieldEditor<Vector4> {
return (
<div className="property-field">
<label className="property-label">{label}</label>
<div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
<div className="property-vector-compact">
<VectorInput
label="X"
value={v.x}
onChange={(x) => onChange({ ...v, x })}
readonly={context.readonly}
axis="x"
/>
<VectorInput
label="Y"
value={v.y}
onChange={(y) => onChange({ ...v, y })}
readonly={context.readonly}
axis="y"
/>
<VectorInput
label="Z"
value={v.z}
onChange={(z) => onChange({ ...v, z })}
readonly={context.readonly}
axis="z"
/>
<VectorInput
label="W"
value={v.w}
onChange={(w) => onChange({ ...v, w })}
readonly={context.readonly}
axis="w"
/>
</div>
</div>
);
}
}
}

3
packages/editor-app/src/infrastructure/property-renderers/ComponentRenderer.tsx
View File

@@ -1,5 +1,5 @@
import React, { useState } from 'react';
import { ChevronDown, ChevronRight } from 'lucide-react';
import { ChevronDown, ChevronRight, Settings } from 'lucide-react';
import { IPropertyRenderer, PropertyContext, PropertyRendererRegistry } from '@esengine/editor-core';
import { Core } from '@esengine/ecs-framework';
@@ -43,6 +43,7 @@ export class ComponentRenderer implements IPropertyRenderer<ComponentData> {
}}
>
{isExpanded ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
<Settings size={14} style={{ marginLeft: "4px", color: "#888" }} />
<span
style={{
marginLeft: '6px',

47
packages/editor-app/src/infrastructure/property-renderers/VectorRenderers.tsx
View File

@@ -1,5 +1,4 @@
import React from 'react';
import { ChevronDown, ChevronRight } from 'lucide-react';
import { IPropertyRenderer, PropertyContext } from '@esengine/editor-core';
import { formatNumber } from '../../components/inspectors/utils';
@@ -23,6 +22,20 @@ interface Color {
a: number;
}
const VectorValue: React.FC<{
label: string;
value: number;
axis: 'x' | 'y' | 'z' | 'w';
decimals: number;
}> = ({ label, value, axis, decimals }) => (
<div className="property-vector-axis-compact">
<span className={`property-vector-axis-label property-vector-axis-${axis}`}>{label}</span>
<span className="property-input property-input-number property-input-number-compact" style={{ cursor: 'default' }}>
{formatNumber(value, decimals)}
</span>
</div>
);
export class Vector2Renderer implements IPropertyRenderer<Vector2> {
readonly id = 'app.vector2';
readonly name = 'Vector2 Renderer';
@@ -44,9 +57,10 @@ export class Vector2Renderer implements IPropertyRenderer<Vector2> {
return (
<div className="property-field">
<label className="property-label">{context.name}</label>
<span className="property-value-text" style={{ color: '#9cdcfe', fontFamily: 'monospace' }}>
({formatNumber(value.x, decimals)}, {formatNumber(value.y, decimals)})
</span>
<div className="property-vector-compact">
<VectorValue label="X" value={value.x} axis="x" decimals={decimals} />
<VectorValue label="Y" value={value.y} axis="y" decimals={decimals} />
</div>
</div>
);
}
@@ -74,9 +88,11 @@ export class Vector3Renderer implements IPropertyRenderer<Vector3> {
return (
<div className="property-field">
<label className="property-label">{context.name}</label>
<span className="property-value-text" style={{ color: '#9cdcfe', fontFamily: 'monospace' }}>
({formatNumber(value.x, decimals)}, {formatNumber(value.y, decimals)}, {formatNumber(value.z, decimals)})
</span>
<div className="property-vector-compact">
<VectorValue label="X" value={value.x} axis="x" decimals={decimals} />
<VectorValue label="Y" value={value.y} axis="y" decimals={decimals} />
<VectorValue label="Z" value={value.z} axis="z" decimals={decimals} />
</div>
</div>
);
}
@@ -108,21 +124,16 @@ export class ColorRenderer implements IPropertyRenderer<Color> {
return (
<div className="property-field">
<label className="property-label">{context.name}</label>
<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
<div className="property-color-wrapper">
<div
style={{
width: '20px',
height: '20px',
backgroundColor: colorHex,
border: '1px solid #444',
borderRadius: '2px'
}}
className="property-color-preview"
style={{ backgroundColor: colorHex }}
/>
<span className="property-value-text" style={{ fontFamily: 'monospace' }}>
rgba({r}, {g}, {b}, {value.a.toFixed(2)})
<span className="property-input property-input-color-text" style={{ cursor: 'default' }}>
{colorHex.toUpperCase()}
</span>
</div>
</div>
);
}
}
}

8
packages/editor-app/src/styles/FlexLayoutDock.css
View File

@@ -100,12 +100,20 @@
}
.flexlayout__tab_button_content {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 120px;
font-size: 12px;
font-weight: 400;
letter-spacing: 0.3px;
}
.flexlayout__tab_button--selected .flexlayout__tab_button_content {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 120px;
font-weight: 500;
}

20
packages/editor-app/src/styles/PropertyInspector.css
View File

@@ -104,9 +104,9 @@
background-repeat: no-repeat;
background-position: right 6px center;
padding-right: 24px;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.property-input-select:hover {
@@ -286,10 +286,13 @@
.property-input-number-compact {
flex: 1;
min-width: 32px;
text-align: center;
padding: 2px 4px;
font-size: 10px;
min-width: 24px;
max-width: 40px;
text-align: right;
padding: 1px 4px;
font-size: 11px;
height: 18px;
line-height: 16px;
}
.property-vector-expanded {
@@ -338,6 +341,12 @@
border: 1px solid rgba(59, 130, 246, 0.3);
}
.property-vector-axis-w {
background: rgba(168, 85, 247, 0.2);
color: #c084fc;
border: 1px solid rgba(168, 85, 247, 0.3);
}
.property-field:focus-within {
background: rgba(255, 255, 255, 0.04);
}
@@ -357,6 +366,7 @@
input[type="number"].property-input {
-moz-appearance: textfield;
appearance: textfield;
}
input[type="number"].property-input::-webkit-outer-spin-button,

5
packages/editor-app/src/styles/SceneHierarchy.css
View File

@@ -29,6 +29,11 @@
color: var(--color-text-primary);
text-transform: uppercase;
letter-spacing: 0.05em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex-shrink: 1;
min-width: 0;
}
.scene-name-container {