Editor Component Editors

Name: Editor Component Editors
Rating: 4.2 (5 reviews)
Author: majiayu000

Create ECS component editors using IComponentEditor interface, ComponentEditorRegistry.DrawComponent wrapper, VectorPanel for vectors, and UIPropertyRenderer for simple properties. Covers registration in DI container and manual change detection patterns.

majiayu000 Updated Sep 9, 2026 567 repo stars

Web & Frontend

Install

Press C to copy

$ npx skillmds@latest add majiayu000/editor-component-editors

Installs into ~/.claude/skills (or .claude/skills inside a project). Restart Claude Code to pick it up.

Download .zip

＋ Add to plugin

README badge

[![SkillMD](https://skillmd.com/badge/majiayu000/editor-component-editors.svg)](https://skillmd.com/skills/majiayu000/editor-component-editors)

Trust & safety

2 of 3 audits passed

Last audited Sep 24, 2026 · commit 1b22548

Permissions this skill uses

Documentation only
No scripts, network access, or credentials are involved.

Works with: Claude Code Claude.ai OpenAI Codex +

File contents

Editor Component Editors

Overview

Component editors render ECS component properties in the editor's Properties panel. They use the IComponentEditor interface with static utility methods for consistent UI styling.

When to Use This Skill

Creating a new component editor for an ECS component
Editing vector properties (Vector2/Vector3) with axis color coding
Editing primitive properties (int, float, bool, string)
Need collapsible component UI with remove button
Building custom property controls for components

Core Architecture

IComponentEditor Interface

// Editor/ComponentEditors/Core/IComponentEditor.cs
public interface IComponentEditor
{
    void DrawComponent(Entity entity);
}

Key Points:

Takes Entity, not the component directly
Component is retrieved inside using entity.GetComponent<T>()
No return value - mutates component properties directly

Essential Pattern: ComponentEditorRegistry.DrawComponent()

Every component editor uses this static wrapper method for consistent UI:

ComponentEditorRegistry.DrawComponent<ComponentType>("Display Name", entity, entity =>
{
    var component = entity.GetComponent<ComponentType>();

    // Draw property editors here
});

What it provides:

✅ Collapsible tree node (DefaultOpen)
✅ Component name header
✅ Remove component button (-)
✅ Consistent padding and spacing
✅ Framed appearance
✅ Only renders if entity has the component

Implementation (ComponentEditorRegistry.cs:60-87):

Uses ImGuiTreeNodeFlags for styling
Adds remove button in top-right corner
Calls your lambda only if component exists
Handles tree pop automatically

Property Editing Utilities

1. UIPropertyRenderer.DrawPropertyField()

Best for: Simple primitive properties (int, float, bool, string)

UIPropertyRenderer.DrawPropertyField("Label", currentValue,
    newValue => component.Property = (TypeCast)newValue);

Features:

Automatic type detection via FieldEditorRegistry
Consistent label/input width ratio (33%/67%)
Supports: int, float, double, bool, string, Vector2, Vector3, Vector4
Boxing-based (object newValue)

Example (CameraComponentEditor.cs:22-23):

UIPropertyRenderer.DrawPropertyField("Primary", cameraComponent.Primary,
    newValue => cameraComponent.Primary = (bool)newValue);

2. VectorPanel Static Methods

Best for: Vector properties needing axis color coding or reset buttons

Vector3 with Axis Colors

var newPosition = component.Position;
VectorPanel.DrawVec3Control("Position", ref newPosition);

if (newPosition != component.Position)
    component.Position = newPosition;

Features:

Colored axis buttons: X (red), Y (green), Z (blue)
Click button to reset axis to default value
Drag float inputs for each axis
Consistent 33%/67% label/input ratio

With Reset Value (TransformComponentEditor.cs:32):

var newScale = component.Scale;
VectorPanel.DrawVec3Control("Scale", ref newScale, resetValue: 1.0f);

if (newScale != component.Scale)
    component.Scale = newScale;

Vector2 Controls

var newSize = component.Size;
VectorPanel.DrawVec2Control("Size", ref newSize);

if (newSize != component.Size)
    component.Size = newSize;

VectorPanel.cs methods:

DrawVec3Control(string label, ref Vector3 values, float resetValue = 0.0f)
DrawVec2Control(string label, ref Vector2 values, float resetValue = 0.0f)

3. LayoutDrawer.DrawComboBox()

Best for: Enum or string selection dropdowns

private static readonly string[] ProjectionTypeStrings = { "Perspective", "Orthographic" };

LayoutDrawer.DrawComboBox("Projection",
    ProjectionTypeStrings[(int)camera.ProjectionType],
    ProjectionTypeStrings,
    selectedType =>
    {
        camera.ProjectionType = selectedType switch
        {
            "Perspective" => ProjectionType.Perspective,
            "Orthographic" => ProjectionType.Orthographic,
            _ => camera.ProjectionType
        };
    });

Complete Working Examples

Example 1: Simple Component Editor (Camera)

// CameraComponentEditor.cs (simplified)
using ECS;
using Editor.ComponentEditors.Core;
using Editor.UI.Drawers;
using Editor.UI.Elements;
using Engine.Scene.Components;

namespace Editor.ComponentEditors;

public class CameraComponentEditor : IComponentEditor
{
    private static readonly string[] ProjectionTypeStrings = { "Perspective", "Orthographic" };

    public void DrawComponent(Entity e)
    {
        ComponentEditorRegistry.DrawComponent<CameraComponent>("Camera", e, entity =>
        {
            var camera = entity.GetComponent<CameraComponent>().Camera;

            UIPropertyRenderer.DrawPropertyField("Size", camera.OrthographicSize,
                newValue => camera.OrthographicSize = (float)newValue);

            UIPropertyRenderer.DrawPropertyField("Near", camera.OrthographicNear,
                newValue => camera.OrthographicNear = (float)newValue);

            UIPropertyRenderer.DrawPropertyField("Far", camera.OrthographicFar,
                newValue => camera.OrthographicFar = (float)newValue);
        });
    }
}

Example 2: Vector Component Editor (Transform)

// TransformComponentEditor.cs (actual implementation)
using ECS;
using Editor.ComponentEditors.Core;
using Engine.Math;
using Engine.Scene.Components;

namespace Editor.ComponentEditors;

public class TransformComponentEditor : IComponentEditor
{
    public void DrawComponent(Entity e)
    {
        ComponentEditorRegistry.DrawComponent<TransformComponent>("Transform", e, entity =>
        {
            var tc = entity.GetComponent<TransformComponent>();

            // Translation
            var newTranslation = tc.Translation;
            VectorPanel.DrawVec3Control("Translation", ref newTranslation);
            if (newTranslation != tc.Translation)
                tc.Translation = newTranslation;

            // Rotation (convert radians to degrees for UI)
            var rotationRadians = tc.Rotation;
            Vector3 rotationDegrees = MathHelpers.ToDegrees(rotationRadians);
            VectorPanel.DrawVec3Control("Rotation", ref rotationDegrees);
            var newRotationRadians = MathHelpers.ToRadians(rotationDegrees);
            if (newRotationRadians != tc.Rotation)
                tc.Rotation = newRotationRadians;

            // Scale (reset to 1.0 instead of 0.0)
            var newScale = tc.Scale;
            VectorPanel.DrawVec3Control("Scale", ref newScale, resetValue: 1.0f);
            if (newScale != tc.Scale)
                tc.Scale = newScale;
        });
    }
}

Key Pattern: Copy to temp variable → modify → check if changed → assign back

Example 3: Complex Component with Multiple Property Types

public class MyComponentEditor : IComponentEditor
{
    public void DrawComponent(Entity e)
    {
        ComponentEditorRegistry.DrawComponent<MyComponent>("My Component", e, entity =>
        {
            var component = entity.GetComponent<MyComponent>();

            // Simple properties with UIPropertyRenderer
            UIPropertyRenderer.DrawPropertyField("Enabled", component.IsEnabled,
                newValue => component.IsEnabled = (bool)newValue);

            UIPropertyRenderer.DrawPropertyField("Speed", component.Speed,
                newValue => component.Speed = (float)newValue);

            // Vector with axis controls
            var newPosition = component.Position;
            VectorPanel.DrawVec3Control("Position", ref newPosition);
            if (newPosition != component.Position)
                component.Position = newPosition;

            // Dropdown selection
            string[] options = { "Option1", "Option2", "Option3" };
            LayoutDrawer.DrawComboBox("Mode", options[component.ModeIndex], options,
                selected =>
                {
                    component.ModeIndex = Array.IndexOf(options, selected);
                });

            // Custom UI elements with Drawers
            if (ButtonDrawer.DrawButton("Reset", ButtonDrawer.ButtonType.Primary))
            {
                component.Reset();
            }
        });
    }
}

Dependency Injection Registration

Component editors are registered in the DI container and injected into ComponentEditorRegistry.

Registration (Program.cs or similar)

// Register individual component editors
container.Register<TransformComponentEditor>(Reuse.Singleton);
container.Register<CameraComponentEditor>(Reuse.Singleton);
container.Register<MyComponentEditor>(Reuse.Singleton);

// ComponentEditorRegistry constructor receives all editors
container.Register<ComponentEditorRegistry>(Reuse.Singleton);

ComponentEditorRegistry Constructor Pattern

public class ComponentEditorRegistry(
    TransformComponentEditor transformComponentEditor,
    CameraComponentEditor cameraComponentEditor,
    MyComponentEditor myComponentEditor) : IComponentEditorRegistry  // Add your editor here
{
    private readonly Dictionary<Type, IComponentEditor> _editors = new()
    {
        { typeof(TransformComponent), transformComponentEditor },
        { typeof(CameraComponent), cameraComponentEditor },
        { typeof(MyComponent), myComponentEditor }  // Register component type
    };

    public void DrawAllComponents(Entity entity)
    {
        foreach (var (componentType, editor) in _editors)
        {
            editor.DrawComponent(entity);
        }
    }
}

Change Detection Patterns

Pattern 1: Copy-Modify-Assign (for VectorPanel)

var oldValue = component.Position;
VectorPanel.DrawVec3Control("Position", ref oldValue);

if (oldValue != component.Position)  // Value comparison
    component.Position = oldValue;

Why: VectorPanel modifies the ref parameter directly, so we need manual change detection.

Pattern 2: Callback Assignment (for UIPropertyRenderer)

UIPropertyRenderer.DrawPropertyField("Speed", component.Speed,
    newValue => component.Speed = (float)newValue);

Why: UIPropertyRenderer only calls callback if value changed. No manual check needed.

Anti-Patterns

❌ Anti-Pattern 1: Not Using DrawComponent Wrapper

// ❌ WRONG - Manual tree node management
public void DrawComponent(Entity e)
{
    if (ImGui.TreeNode("My Component"))
    {
        var component = e.GetComponent<MyComponent>();
        // ... draw properties
        ImGui.TreePop();
    }
}

// ✅ CORRECT - Use DrawComponent wrapper
public void DrawComponent(Entity e)
{
    ComponentEditorRegistry.DrawComponent<MyComponent>("My Component", e, entity =>
    {
        var component = entity.GetComponent<MyComponent>();
        // ... draw properties
    });
}

Why: DrawComponent provides consistent styling, remove button, and safety checks.

❌ Anti-Pattern 2: Direct ImGui Calls for Vectors

// ❌ WRONG - Raw ImGui calls
ImGui.DragFloat3("Position", ref component.Position);

// ✅ CORRECT - Use VectorPanel for axis colors and reset buttons
var newPosition = component.Position;
VectorPanel.DrawVec3Control("Position", ref newPosition);
if (newPosition != component.Position)
    component.Position = newPosition;

Why: VectorPanel provides axis color coding, reset buttons, and consistent styling.

❌ Anti-Pattern 3: Direct Component Property Mutation with ref

// ❌ WRONG - Modifying component property directly
VectorPanel.DrawVec3Control("Position", ref component.Position);  // May not work as expected

// ✅ CORRECT - Copy to temp variable first
var newPosition = component.Position;
VectorPanel.DrawVec3Control("Position", ref newPosition);
if (newPosition != component.Position)
    component.Position = newPosition;

Why: Component properties may be getters with backing fields or have change tracking.

❌ Anti-Pattern 4: Forgetting DI Registration

// ❌ WRONG - Editor won't be found at runtime
public class MyComponentEditor : IComponentEditor { ... }
// (not registered in Program.cs)

// ✅ CORRECT - Register in DI container
container.Register<MyComponentEditor>(Reuse.Singleton);

// AND add to ComponentEditorRegistry constructor + dictionary

Workflow: Creating a New Component Editor

Step 1: Create Editor Class

// Editor/ComponentEditors/MyComponentEditor.cs
using ECS;
using Editor.ComponentEditors.Core;
using Editor.Panels;
using Editor.UI.Drawers;
using Editor.UI.Elements;
using Engine.Scene.Components;

namespace Editor.ComponentEditors;

public class MyComponentEditor : IComponentEditor
{
    public void DrawComponent(Entity e)
    {
        ComponentEditorRegistry.DrawComponent<MyComponent>("My Component", e, entity =>
        {
            var component = entity.GetComponent<MyComponent>();

            // TODO: Add property editors here
        });
    }
}

Step 2: Register in DI Container (Program.cs)

// In editor startup
container.Register<MyComponentEditor>(Reuse.Singleton);

Step 3: Add to ComponentEditorRegistry

// ComponentEditorRegistry.cs - use primary constructor
public class ComponentEditorRegistry(
    // ... existing editors
    MyComponentEditor myComponentEditor) // Add parameter
{
    private readonly Dictionary<Type, IComponentEditor> _editors = new()
    {
        // ... existing registrations
        { typeof(MyComponent), myComponentEditor }  // Add to dictionary
    };
}

Step 4: Implement Property Editors

Choose the appropriate method for each property type:

// Primitives: Use UIPropertyRenderer
UIPropertyRenderer.DrawPropertyField("Health", component.Health,
    newValue => component.Health = (int)newValue);

// Vectors: Use VectorPanel
var newPos = component.Position;
VectorPanel.DrawVec3Control("Position", ref newPos);
if (newPos != component.Position)
    component.Position = newPos;

// Enums: Use LayoutDrawer
string[] options = Enum.GetNames<MyEnum>();
LayoutDrawer.DrawComboBox("Mode", options[(int)component.Mode], options,
    selected => component.Mode = (MyEnum)Array.IndexOf(options, selected));

Available UI Utilities

From UIPropertyRenderer

DrawPropertyField(string label, object value, Action<object> onValueChanged)
- Supports: int, float, double, bool, string, Vector2, Vector3, Vector4
- Uses FieldEditorRegistry internally

From VectorPanel

DrawVec3Control(string label, ref Vector3 values, float resetValue = 0.0f)
DrawVec2Control(string label, ref Vector2 values, float resetValue = 0.0f)

From LayoutDrawer

DrawComboBox(string label, string current, string[] options, Action<string> onSelected)

From ButtonDrawer

DrawButton(string label, ButtonType type = ButtonType.Default) → returns bool
DrawButton(string label, float width, float height, Action?>


From TextDrawer

DrawErrorText(string text)
DrawWarningText(string text)
DrawSuccessText(string text)

From ModalDrawer

RenderConfirmationModal(string id, ref bool show, string message, Action onConfirm)


Summary
Component Editor Checklist:

✅ Implement IComponentEditor interface
✅ Use ComponentEditorRegistry.DrawComponent<T>() wrapper
✅ Use VectorPanel for vectors (axis colors, reset buttons)
✅ Use UIPropertyRenderer for simple primitives
✅ Use LayoutDrawer for dropdowns
✅ Manual change detection for ref parameters
✅ Register in DI container (Program.cs)
✅ Add to ComponentEditorRegistry constructor + dictionary

Key Files:

Editor/ComponentEditors/Core/IComponentEditor.cs - Interface
Editor/ComponentEditors/Core/ComponentEditorRegistry.cs - Registry and wrapper
Editor/Panels/VectorPanel.cs - Vector controls
Editor/UI/Elements/UIPropertyRenderer.cs - Property field wrapper
Editor/UI/Drawers/LayoutDrawer.cs - Combo boxes
Editor/ComponentEditors/TransformComponentEditor.cs - Vector example
Editor/ComponentEditors/CameraComponentEditor.cs - Mixed properties example

   1---2name: editor-component-editors3description: Create ECS component editors using IComponentEditor interface, ComponentEditorRegistry.DrawComponent wrapper, VectorPanel for vectors, and UIPropertyRenderer for simple properties. Covers registration in DI container and manual change detection patterns.4---5
6# Editor Component Editors
7
8## Overview
9
10Component editors render ECS component properties in the editor's Properties panel. They use the `IComponentEditor` interface with static utility methods for consistent UI styling.
11
12## When to Use This Skill
13
14- Creating a new component editor for an ECS component
15- Editing vector properties (Vector2/Vector3) with axis color coding
16- Editing primitive properties (int, float, bool, string)
17- Need collapsible component UI with remove button
18- Building custom property controls for components
19
20---
21
22## Core Architecture
23
24### IComponentEditor Interface
25
26```csharp
27// Editor/ComponentEditors/Core/IComponentEditor.cs
28public interface IComponentEditor
29{
30    void DrawComponent(Entity entity);
31}
32```
33
34**Key Points:**
35- Takes `Entity`, not the component directly
36- Component is retrieved inside using `entity.GetComponent<T>()`
37- No return value - mutates component properties directly
38
39---
40
41## Essential Pattern: ComponentEditorRegistry.DrawComponent<T>()
42
43**Every component editor uses this static wrapper method** for consistent UI:
44
45```csharp
46ComponentEditorRegistry.DrawComponent<ComponentType>("Display Name", entity, entity =>
47{
48    var component = entity.GetComponent<ComponentType>();
49
50    // Draw property editors here
51});
52```
53
54**What it provides:**
55- ✅ Collapsible tree node (DefaultOpen)
56- ✅ Component name header
57- ✅ Remove component button (-)
58- ✅ Consistent padding and spacing
59- ✅ Framed appearance
60- ✅ Only renders if entity has the component
61
62**Implementation (ComponentEditorRegistry.cs:60-87):**
63- Uses `ImGuiTreeNodeFlags` for styling
64- Adds remove button in top-right corner
65- Calls your lambda only if component exists
66- Handles tree pop automatically
67
68---
69
70## Property Editing Utilities
71
72### 1. UIPropertyRenderer.DrawPropertyField()
73
74**Best for:** Simple primitive properties (int, float, bool, string)
75
76```csharp
77UIPropertyRenderer.DrawPropertyField("Label", currentValue,
78    newValue => component.Property = (TypeCast)newValue);
79```
80
81**Features:**
82- Automatic type detection via `FieldEditorRegistry`
83- Consistent label/input width ratio (33%/67%)
84- Supports: `int`, `float`, `double`, `bool`, `string`, `Vector2`, `Vector3`, `Vector4`
85- Boxing-based (object newValue)
86
87**Example (CameraComponentEditor.cs:22-23):**
88```csharp
89UIPropertyRenderer.DrawPropertyField("Primary", cameraComponent.Primary,
90    newValue => cameraComponent.Primary = (bool)newValue);
91```
92
93---
94
95### 2. VectorPanel Static Methods
96
97**Best for:** Vector properties needing axis color coding or reset buttons
98
99#### Vector3 with Axis Colors
100
101```csharp
102var newPosition = component.Position;
103VectorPanel.DrawVec3Control("Position", ref newPosition);
104
105if (newPosition != component.Position)
106    component.Position = newPosition;
107```
108
109**Features:**
110- Colored axis buttons: X (red), Y (green), Z (blue)
111- Click button to reset axis to default value
112- Drag float inputs for each axis
113- Consistent 33%/67% label/input ratio
114
115**With Reset Value (TransformComponentEditor.cs:32):**
116```csharp
117var newScale = component.Scale;
118VectorPanel.DrawVec3Control("Scale", ref newScale, resetValue: 1.0f);
119
120if (newScale != component.Scale)
121    component.Scale = newScale;
122```
123
124#### Vector2 Controls
125
126```csharp
127var newSize = component.Size;
128VectorPanel.DrawVec2Control("Size", ref newSize);
129
130if (newSize != component.Size)
131    component.Size = newSize;
132```
133
134**VectorPanel.cs methods:**
135- `DrawVec3Control(string label, ref Vector3 values, float resetValue = 0.0f)`
136- `DrawVec2Control(string label, ref Vector2 values, float resetValue = 0.0f)`
137
138---
139
140### 3. LayoutDrawer.DrawComboBox()
141
142**Best for:** Enum or string selection dropdowns
143
144```csharp
145private static readonly string[] ProjectionTypeStrings = { "Perspective", "Orthographic" };
146
147LayoutDrawer.DrawComboBox("Projection",
148    ProjectionTypeStrings[(int)camera.ProjectionType],
149    ProjectionTypeStrings,
150    selectedType =>
151    {
152        camera.ProjectionType = selectedType switch
153        {
154            "Perspective" => ProjectionType.Perspective,
155            "Orthographic" => ProjectionType.Orthographic,
156            _ => camera.ProjectionType
157        };
158    });
159```
160
161---
162
163## Complete Working Examples
164
165### Example 1: Simple Component Editor (Camera)
166
167```csharp
168// CameraComponentEditor.cs (simplified)
169using ECS;
170using Editor.ComponentEditors.Core;
171using Editor.UI.Drawers;
172using Editor.UI.Elements;
173using Engine.Scene.Components;
174
175namespace Editor.ComponentEditors;
176
177public class CameraComponentEditor : IComponentEditor
178{
179    private static readonly string[] ProjectionTypeStrings = { "Perspective", "Orthographic" };
180
181    public void DrawComponent(Entity e)
182    {
183        ComponentEditorRegistry.DrawComponent<CameraComponent>("Camera", e, entity =>
184        {
185            var camera = entity.GetComponent<CameraComponent>().Camera;
186
187            UIPropertyRenderer.DrawPropertyField("Size", camera.OrthographicSize,
188                newValue => camera.OrthographicSize = (float)newValue);
189
190            UIPropertyRenderer.DrawPropertyField("Near", camera.OrthographicNear,
191                newValue => camera.OrthographicNear = (float)newValue);
192
193            UIPropertyRenderer.DrawPropertyField("Far", camera.OrthographicFar,
194                newValue => camera.OrthographicFar = (float)newValue);
195        });
196    }
197}
198```
199
200---
201
202### Example 2: Vector Component Editor (Transform)
203
204```csharp
205// TransformComponentEditor.cs (actual implementation)
206using ECS;
207using Editor.ComponentEditors.Core;
208using Engine.Math;
209using Engine.Scene.Components;
210
211namespace Editor.ComponentEditors;
212
213public class TransformComponentEditor : IComponentEditor
214{
215    public void DrawComponent(Entity e)
216    {
217        ComponentEditorRegistry.DrawComponent<TransformComponent>("Transform", e, entity =>
218        {
219            var tc = entity.GetComponent<TransformComponent>();
220
221            // Translation
222            var newTranslation = tc.Translation;
223            VectorPanel.DrawVec3Control("Translation", ref newTranslation);
224            if (newTranslation != tc.Translation)
225                tc.Translation = newTranslation;
226
227            // Rotation (convert radians to degrees for UI)
228            var rotationRadians = tc.Rotation;
229            Vector3 rotationDegrees = MathHelpers.ToDegrees(rotationRadians);
230            VectorPanel.DrawVec3Control("Rotation", ref rotationDegrees);
231            var newRotationRadians = MathHelpers.ToRadians(rotationDegrees);
232            if (newRotationRadians != tc.Rotation)
233                tc.Rotation = newRotationRadians;
234
235            // Scale (reset to 1.0 instead of 0.0)
236            var newScale = tc.Scale;
237            VectorPanel.DrawVec3Control("Scale", ref newScale, resetValue: 1.0f);
238            if (newScale != tc.Scale)
239                tc.Scale = newScale;
240        });
241    }
242}
243```
244
245**Key Pattern:** Copy to temp variable → modify → check if changed → assign back
246
247---
248
249### Example 3: Complex Component with Multiple Property Types
250
251```csharp
252public class MyComponentEditor : IComponentEditor
253{
254    public void DrawComponent(Entity e)
255    {
256        ComponentEditorRegistry.DrawComponent<MyComponent>("My Component", e, entity =>
257        {
258            var component = entity.GetComponent<MyComponent>();
259
260            // Simple properties with UIPropertyRenderer
261            UIPropertyRenderer.DrawPropertyField("Enabled", component.IsEnabled,
262                newValue => component.IsEnabled = (bool)newValue);
263
264            UIPropertyRenderer.DrawPropertyField("Speed", component.Speed,
265                newValue => component.Speed = (float)newValue);
266
267            // Vector with axis controls
268            var newPosition = component.Position;
269            VectorPanel.DrawVec3Control("Position", ref newPosition);
270            if (newPosition != component.Position)
271                component.Position = newPosition;
272
273            // Dropdown selection
274            string[] options = { "Option1", "Option2", "Option3" };
275            LayoutDrawer.DrawComboBox("Mode", options[component.ModeIndex], options,
276                selected =>
277                {
278                    component.ModeIndex = Array.IndexOf(options, selected);
279                });
280
281            // Custom UI elements with Drawers
282            if (ButtonDrawer.DrawButton("Reset", ButtonDrawer.ButtonType.Primary))
283            {
284                component.Reset();
285            }
286        });
287    }
288}
289```
290
291---
292
293## Dependency Injection Registration
294
295Component editors are registered in the DI container and injected into `ComponentEditorRegistry`.
296
297### Registration (Program.cs or similar)
298
299```csharp
300// Register individual component editors
301container.Register<TransformComponentEditor>(Reuse.Singleton);
302container.Register<CameraComponentEditor>(Reuse.Singleton);
303container.Register<MyComponentEditor>(Reuse.Singleton);
304
305// ComponentEditorRegistry constructor receives all editors
306container.Register<ComponentEditorRegistry>(Reuse.Singleton);
307```
308
309### ComponentEditorRegistry Constructor Pattern
310
311```csharp
312public class ComponentEditorRegistry(
313    TransformComponentEditor transformComponentEditor,
314    CameraComponentEditor cameraComponentEditor,
315    MyComponentEditor myComponentEditor) : IComponentEditorRegistry  // Add your editor here
316{
317    private readonly Dictionary<Type, IComponentEditor> _editors = new()
318    {
319        { typeof(TransformComponent), transformComponentEditor },
320        { typeof(CameraComponent), cameraComponentEditor },
321        { typeof(MyComponent), myComponentEditor }  // Register component type
322    };
323
324    public void DrawAllComponents(Entity entity)
325    {
326        foreach (var (componentType, editor) in _editors)
327        {
328            editor.DrawComponent(entity);
329        }
330    }
331}
332```
333
334---
335
336## Change Detection Patterns
337
338### Pattern 1: Copy-Modify-Assign (for VectorPanel)
339
340```csharp
341var oldValue = component.Position;
342VectorPanel.DrawVec3Control("Position", ref oldValue);
343
344if (oldValue != component.Position)  // Value comparison
345    component.Position = oldValue;
346```
347
348**Why:** VectorPanel modifies the `ref` parameter directly, so we need manual change detection.
349
350---
351
352### Pattern 2: Callback Assignment (for UIPropertyRenderer)
353
354```csharp
355UIPropertyRenderer.DrawPropertyField("Speed", component.Speed,
356    newValue => component.Speed = (float)newValue);
357```
358
359**Why:** UIPropertyRenderer only calls callback if value changed. No manual check needed.
360
361---
362
363## Anti-Patterns
364
365### ❌ Anti-Pattern 1: Not Using DrawComponent Wrapper
366
367```csharp
368// ❌ WRONG - Manual tree node management
369public void DrawComponent(Entity e)
370{
371    if (ImGui.TreeNode("My Component"))
372    {
373        var component = e.GetComponent<MyComponent>();
374        // ... draw properties
375        ImGui.TreePop();
376    }
377}
378
379// ✅ CORRECT - Use DrawComponent wrapper
380public void DrawComponent(Entity e)
381{
382    ComponentEditorRegistry.DrawComponent<MyComponent>("My Component", e, entity =>
383    {
384        var component = entity.GetComponent<MyComponent>();
385        // ... draw properties
386    });
387}
388```
389
390**Why:** DrawComponent provides consistent styling, remove button, and safety checks.
391
392---
393
394### ❌ Anti-Pattern 2: Direct ImGui Calls for Vectors
395
396```csharp
397// ❌ WRONG - Raw ImGui calls
398ImGui.DragFloat3("Position", ref component.Position);
399
400// ✅ CORRECT - Use VectorPanel for axis colors and reset buttons
401var newPosition = component.Position;
402VectorPanel.DrawVec3Control("Position", ref newPosition);
403if (newPosition != component.Position)
404    component.Position = newPosition;
405```
406
407**Why:** VectorPanel provides axis color coding, reset buttons, and consistent styling.
408
409---
410
411### ❌ Anti-Pattern 3: Direct Component Property Mutation with ref
412
413```csharp
414// ❌ WRONG - Modifying component property directly
415VectorPanel.DrawVec3Control("Position", ref component.Position);  // May not work as expected
416
417// ✅ CORRECT - Copy to temp variable first
418var newPosition = component.Position;
419VectorPanel.DrawVec3Control("Position", ref newPosition);
420if (newPosition != component.Position)
421    component.Position = newPosition;
422```
423
424**Why:** Component properties may be getters with backing fields or have change tracking.
425
426---
427
428### ❌ Anti-Pattern 4: Forgetting DI Registration
429
430```csharp
431// ❌ WRONG - Editor won't be found at runtime
432public class MyComponentEditor : IComponentEditor { ... }
433// (not registered in Program.cs)
434
435// ✅ CORRECT - Register in DI container
436container.Register<MyComponentEditor>(Reuse.Singleton);
437
438// AND add to ComponentEditorRegistry constructor + dictionary
439```
440
441---
442
443## Workflow: Creating a New Component Editor
444
445### Step 1: Create Editor Class
446
447```csharp
448// Editor/ComponentEditors/MyComponentEditor.cs
449using ECS;
450using Editor.ComponentEditors.Core;
451using Editor.Panels;
452using Editor.UI.Drawers;
453using Editor.UI.Elements;
454using Engine.Scene.Components;
455
456namespace Editor.ComponentEditors;
457
458public class MyComponentEditor : IComponentEditor
459{
460    public void DrawComponent(Entity e)
461    {
462        ComponentEditorRegistry.DrawComponent<MyComponent>("My Component", e, entity =>
463        {
464            var component = entity.GetComponent<MyComponent>();
465
466            // TODO: Add property editors here
467        });
468    }
469}
470```
471
472### Step 2: Register in DI Container (Program.cs)
473
474```csharp
475// In editor startup
476container.Register<MyComponentEditor>(Reuse.Singleton);
477```
478
479### Step 3: Add to ComponentEditorRegistry
480
481```csharp
482// ComponentEditorRegistry.cs - use primary constructor
483public class ComponentEditorRegistry(
484    // ... existing editors
485    MyComponentEditor myComponentEditor) // Add parameter
486{
487    private readonly Dictionary<Type, IComponentEditor> _editors = new()
488    {
489        // ... existing registrations
490        { typeof(MyComponent), myComponentEditor }  // Add to dictionary
491    };
492}
493```
494
495### Step 4: Implement Property Editors
496
497Choose the appropriate method for each property type:
498
499```csharp
500// Primitives: Use UIPropertyRenderer
501UIPropertyRenderer.DrawPropertyField("Health", component.Health,
502    newValue => component.Health = (int)newValue);
503
504// Vectors: Use VectorPanel
505var newPos = component.Position;
506VectorPanel.DrawVec3Control("Position", ref newPos);
507if (newPos != component.Position)
508    component.Position = newPos;
509
510// Enums: Use LayoutDrawer
511string[] options = Enum.GetNames<MyEnum>();
512LayoutDrawer.DrawComboBox("Mode", options[(int)component.Mode], options,
513    selected => component.Mode = (MyEnum)Array.IndexOf(options, selected));
514```
515
516---
517
518## Available UI Utilities
519
520### From UIPropertyRenderer
521- `DrawPropertyField(string label, object value, Action<object> onValueChanged)`
522  - Supports: int, float, double, bool, string, Vector2, Vector3, Vector4
523  - Uses FieldEditorRegistry internally
524
525### From VectorPanel
526- `DrawVec3Control(string label, ref Vector3 values, float resetValue = 0.0f)`
527- `DrawVec2Control(string label, ref Vector2 values, float resetValue = 0.0f)`
528
529### From LayoutDrawer
530- `DrawComboBox(string label, string current, string[] options, Action<string> onSelected)`
531
532### From ButtonDrawer
533- `DrawButton(string label, ButtonType type = ButtonType.Default)` → returns bool
534- `DrawButton(string label, float width, float height, Action? onClick = null)`
535
536### From TextDrawer
537- `DrawErrorText(string text)`
538- `DrawWarningText(string text)`
539- `DrawSuccessText(string text)`
540
541### From ModalDrawer
542- `RenderConfirmationModal(string id, ref bool show, string message, Action onConfirm)`
543
544---
545
546## Summary
547
548**Component Editor Checklist:**
5491. ✅ Implement `IComponentEditor` interface
5502. ✅ Use `ComponentEditorRegistry.DrawComponent<T>()` wrapper
5513. ✅ Use `VectorPanel` for vectors (axis colors, reset buttons)
5524. ✅ Use `UIPropertyRenderer` for simple primitives
5535. ✅ Use `LayoutDrawer` for dropdowns
5546. ✅ Manual change detection for ref parameters
5557. ✅ Register in DI container (`Program.cs`)
5568. ✅ Add to `ComponentEditorRegistry` constructor + dictionary
557
558**Key Files:**
559- `Editor/ComponentEditors/Core/IComponentEditor.cs` - Interface
560- `Editor/ComponentEditors/Core/ComponentEditorRegistry.cs` - Registry and wrapper
561- `Editor/Panels/VectorPanel.cs` - Vector controls
562- `Editor/UI/Elements/UIPropertyRenderer.cs` - Property field wrapper
563- `Editor/UI/Drawers/LayoutDrawer.cs` - Combo boxes
564- `Editor/ComponentEditors/TransformComponentEditor.cs` - Vector example
565- `Editor/ComponentEditors/CameraComponentEditor.cs` - Mixed properties example

  majiayu000/claude-skill-registry-data/tree/main/data/editor-component-editors commit 1b22548b5f 
   Related skills
 Browse category 
     Web Artifacts Builder 158k 
 anthropic
 Creates elaborate, multi-component HTML artifacts using React, Tailwind CSS, and shadcn/ui for complex frontend projects.
  
   Senior Frontend 20.4k 
 alirezarezvani·Audited
 Scaffold Next.js/React projects, generate components, analyze bundle sizes, and apply React/Next.js optimization patterns.
  
   Md Slides 20.4k 
 alirezarezvani·Audited
 Converts a markdown deck into a single-file HTML presentation with keyboard navigation, presenter mode, and print-to-PDF support.
  
   Md Document 20.4k 
 alirezarezvani·Audited
 Converts long-form markdown documents (specs, RFCs, reports, plans) into a single-file HTML page with sticky table of contents, scrollspy, search filter, code-copy buttons, and customizable design tokens.
  
   Senior Fullstack 20.4k 
 alirezarezvani·Audited
 Scaffolds fullstack projects (Next.js, FastAPI, MERN, Django) and analyzes code quality with security and complexity scoring.
  
   Vite 5.5k 
 antfu·Audited
 Configure Vite build tool, use its plugin API, set up SSR, and migrate to Vite 8 with Rolldown.
  
 
 
  Frequently asked questions
     
 Run npx skillmds@latest add majiayu000/editor-component-editors in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
 
   
 Create ECS component editors using IComponentEditor interface, ComponentEditorRegistry.DrawComponent wrapper, VectorPanel for vectors, and UIPropertyRenderer for simple properties. Covers registration in DI container and manual change detection patterns. It is listed under Web & Frontend on SkillMD.
 
   
 This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
 
   
 This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
 
   
 Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
 
   
 majiayu000 (@majiayu000) published this skill. Their other Agent Skills are listed on their SkillMD profile.

   npx skillmds@latest add majiayu000/editor-component-editors

Editor Component Editors

File contents

Editor Component Editors

Overview

When to Use This Skill

Core Architecture

IComponentEditor Interface

Essential Pattern: ComponentEditorRegistry.DrawComponent()

Property Editing Utilities

1. UIPropertyRenderer.DrawPropertyField()

2. VectorPanel Static Methods

Vector3 with Axis Colors

Vector2 Controls

3. LayoutDrawer.DrawComboBox()

Complete Working Examples

Example 1: Simple Component Editor (Camera)

Example 2: Vector Component Editor (Transform)

Example 3: Complex Component with Multiple Property Types

Dependency Injection Registration

Registration (Program.cs or similar)

ComponentEditorRegistry Constructor Pattern

Change Detection Patterns

Pattern 1: Copy-Modify-Assign (for VectorPanel)

Pattern 2: Callback Assignment (for UIPropertyRenderer)

Anti-Patterns

❌ Anti-Pattern 1: Not Using DrawComponent Wrapper

❌ Anti-Pattern 2: Direct ImGui Calls for Vectors

❌ Anti-Pattern 3: Direct Component Property Mutation with ref

❌ Anti-Pattern 4: Forgetting DI Registration

Workflow: Creating a New Component Editor

Step 1: Create Editor Class

Step 2: Register in DI Container (Program.cs)

Step 3: Add to ComponentEditorRegistry

Step 4: Implement Property Editors

Available UI Utilities

From UIPropertyRenderer

From VectorPanel

From LayoutDrawer

From ButtonDrawer

From TextDrawer

From ModalDrawer

Summary

Related skills

Frequently asked questions

How do I install the Editor Component Editors skill?

What does the Editor Component Editors skill do?

Is Editor Component Editors safe to use?

Which AI agents work with Editor Component Editors?

Is Editor Component Editors free to use?

Who published Editor Component Editors?