实体存储和管理服务

2025-10-14 23:31:09 +08:00
parent 85dad41e60
commit 1cf5641c4c
8 changed files with 492 additions and 11 deletions
--- a/packages/editor-app/src/App.tsx
+++ b/packages/editor-app/src/App.tsx
@@ -1,13 +1,17 @@
 import { useState, useEffect } from 'react';
-import { Core } from '@esengine/ecs-framework';
-import { EditorPluginManager, UIRegistry, MessageHub, SerializerRegistry } from '@esengine/editor-core';
+import { Core, Scene } from '@esengine/ecs-framework';
+import { EditorPluginManager, UIRegistry, MessageHub, SerializerRegistry, EntityStoreService } from '@esengine/editor-core';
 import { SceneInspectorPlugin } from './plugins/SceneInspectorPlugin';
+import { SceneHierarchy } from './components/SceneHierarchy';
+import { EntityInspector } from './components/EntityInspector';
 import { TauriAPI } from './api/tauri';
 import './styles/App.css';

 function App() {
-  const [core, setCore] = useState<Core | null>(null);
+  const [initialized, setInitialized] = useState(false);
  const [pluginManager, setPluginManager] = useState<EditorPluginManager | null>(null);
+  const [entityStore, setEntityStore] = useState<EntityStoreService | null>(null);
+  const [messageHub, setMessageHub] = useState<MessageHub | null>(null);
  const [status, setStatus] = useState('Initializing...');

  useEffect(() => {
@@ -15,13 +19,18 @@ function App() {
      try {
        const coreInstance = Core.create({ debug: true });

+        const editorScene = new Scene();
+        Core.setScene(editorScene);
+
        const uiRegistry = new UIRegistry();
        const messageHub = new MessageHub();
        const serializerRegistry = new SerializerRegistry();
+        const entityStore = new EntityStoreService(messageHub);

        Core.services.registerInstance(UIRegistry, uiRegistry);
        Core.services.registerInstance(MessageHub, messageHub);
        Core.services.registerInstance(SerializerRegistry, serializerRegistry);
+        Core.services.registerInstance(EntityStoreService, entityStore);

        const pluginMgr = new EditorPluginManager();
        pluginMgr.initialize(coreInstance, Core.services);
@@ -31,8 +40,10 @@ function App() {
        const greeting = await TauriAPI.greet('Developer');
        console.log(greeting);

-        setCore(coreInstance);
+        setInitialized(true);
        setPluginManager(pluginMgr);
+        setEntityStore(entityStore);
+        setMessageHub(messageHub);
        setStatus('Editor Ready');
      } catch (error) {
        console.error('Failed to initialize editor:', error);
@@ -47,17 +58,46 @@ function App() {
    };
  }, []);

+  const handleCreateEntity = () => {
+    if (!initialized || !entityStore) return;
+    const scene = Core.scene;
+    if (!scene) return;
+
+    const entity = scene.createEntity('Entity');
+    entityStore.addEntity(entity);
+  };
+
+  const handleDeleteEntity = () => {
+    if (!entityStore) return;
+    const selected = entityStore.getSelectedEntity();
+    if (selected) {
+      selected.destroy();
+      entityStore.removeEntity(selected);
+    }
+  };
+
  return (
    <div className="editor-container">
      <div className="editor-header">
        <h1>ECS Framework Editor</h1>
+        <div className="header-toolbar">
+          <button onClick={handleCreateEntity} disabled={!initialized} className="toolbar-btn">
+            ➕ Create Entity
+          </button>
+          <button onClick={handleDeleteEntity} disabled={!entityStore?.getSelectedEntity()} className="toolbar-btn">
+            🗑️ Delete Entity
+          </button>
+        </div>
        <span className="status">{status}</span>
      </div>

      <div className="editor-content">
        <div className="sidebar-left">
-          <h3>Hierarchy</h3>
-          <p>Scene hierarchy will appear here</p>
+          {entityStore && messageHub ? (
+            <SceneHierarchy entityStore={entityStore} messageHub={messageHub} />
+          ) : (
+            <div className="loading">Loading...</div>
+          )}
        </div>

        <div className="main-content">
@@ -73,14 +113,18 @@ function App() {
        </div>

        <div className="sidebar-right">
-          <h3>Inspector</h3>
-          <p>Entity inspector will appear here</p>
+          {entityStore && messageHub ? (
+            <EntityInspector entityStore={entityStore} messageHub={messageHub} />
+          ) : (
+            <div className="loading">Loading...</div>
+          )}
        </div>
      </div>

      <div className="editor-footer">
        <span>Plugins: {pluginManager?.getAllEditorPlugins().length ?? 0}</span>
-        <span>Core: {core ? 'Active' : 'Inactive'}</span>
+        <span>Entities: {entityStore?.getAllEntities().length ?? 0}</span>
+        <span>Core: {initialized ? 'Active' : 'Inactive'}</span>
      </div>
    </div>
  );
--- a/packages/editor-app/src/components/EntityInspector.tsx
+++ b/packages/editor-app/src/components/EntityInspector.tsx
@@ -0,0 +1,85 @@
+import { useState, useEffect } from 'react';
+import { Entity } from '@esengine/ecs-framework';
+import { EntityStoreService, MessageHub } from '@esengine/editor-core';
+import '../styles/EntityInspector.css';
+
+interface EntityInspectorProps {
+  entityStore: EntityStoreService;
+  messageHub: MessageHub;
+}
+
+export function EntityInspector({ entityStore, messageHub }: EntityInspectorProps) {
+  const [selectedEntity, setSelectedEntity] = useState<Entity | null>(null);
+
+  useEffect(() => {
+    const handleSelection = (data: { entity: Entity | null }) => {
+      setSelectedEntity(data.entity);
+    };
+
+    const unsubSelect = messageHub.subscribe('entity:selected', handleSelection);
+
+    return () => {
+      unsubSelect();
+    };
+  }, [messageHub]);
+
+  if (!selectedEntity) {
+    return (
+      <div className="entity-inspector">
+        <div className="inspector-header">
+          <h3>Inspector</h3>
+        </div>
+        <div className="inspector-content">
+          <div className="empty-state">No entity selected</div>
+        </div>
+      </div>
+    );
+  }
+
+  const components = selectedEntity.components;
+
+  return (
+    <div className="entity-inspector">
+      <div className="inspector-header">
+        <h3>Inspector</h3>
+      </div>
+      <div className="inspector-content">
+        <div className="inspector-section">
+          <div className="section-header">Entity Info</div>
+          <div className="section-content">
+            <div className="info-row">
+              <span className="info-label">ID:</span>
+              <span className="info-value">{selectedEntity.id}</span>
+            </div>
+            <div className="info-row">
+              <span className="info-label">Name:</span>
+              <span className="info-value">Entity {selectedEntity.id}</span>
+            </div>
+            <div className="info-row">
+              <span className="info-label">Enabled:</span>
+              <span className="info-value">{selectedEntity.enabled ? 'Yes' : 'No'}</span>
+            </div>
+          </div>
+        </div>
+
+        <div className="inspector-section">
+          <div className="section-header">Components ({components.length})</div>
+          <div className="section-content">
+            {components.length === 0 ? (
+              <div className="empty-state">No components</div>
+            ) : (
+              <ul className="component-list">
+                {components.map((component, index) => (
+                  <li key={index} className="component-item">
+                    <span className="component-icon">🔧</span>
+                    <span className="component-name">{component.constructor.name}</span>
+                  </li>
+                ))}
+              </ul>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/packages/editor-app/src/components/SceneHierarchy.tsx
+++ b/packages/editor-app/src/components/SceneHierarchy.tsx
@@ -0,0 +1,68 @@
+import { useState, useEffect } from 'react';
+import { Entity } from '@esengine/ecs-framework';
+import { EntityStoreService, MessageHub } from '@esengine/editor-core';
+import '../styles/SceneHierarchy.css';
+
+interface SceneHierarchyProps {
+  entityStore: EntityStoreService;
+  messageHub: MessageHub;
+}
+
+export function SceneHierarchy({ entityStore, messageHub }: SceneHierarchyProps) {
+  const [entities, setEntities] = useState<Entity[]>([]);
+  const [selectedId, setSelectedId] = useState<number | null>(null);
+
+  useEffect(() => {
+    const updateEntities = () => {
+      setEntities(entityStore.getRootEntities());
+    };
+
+    const handleSelection = (data: { entity: Entity | null }) => {
+      setSelectedId(data.entity?.id ?? null);
+    };
+
+    updateEntities();
+
+    const unsubAdd = messageHub.subscribe('entity:added', updateEntities);
+    const unsubRemove = messageHub.subscribe('entity:removed', updateEntities);
+    const unsubClear = messageHub.subscribe('entities:cleared', updateEntities);
+    const unsubSelect = messageHub.subscribe('entity:selected', handleSelection);
+
+    return () => {
+      unsubAdd();
+      unsubRemove();
+      unsubClear();
+      unsubSelect();
+    };
+  }, [entityStore, messageHub]);
+
+  const handleEntityClick = (entity: Entity) => {
+    entityStore.selectEntity(entity);
+  };
+
+  return (
+    <div className="scene-hierarchy">
+      <div className="hierarchy-header">
+        <h3>Scene Hierarchy</h3>
+      </div>
+      <div className="hierarchy-content">
+        {entities.length === 0 ? (
+          <div className="empty-state">No entities in scene</div>
+        ) : (
+          <ul className="entity-list">
+            {entities.map(entity => (
+              <li
+                key={entity.id}
+                className={`entity-item ${selectedId === entity.id ? 'selected' : ''}`}
+                onClick={() => handleEntityClick(entity)}
+              >
+                <span className="entity-icon">📦</span>
+                <span className="entity-name">Entity {entity.id}</span>
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+    </div>
+  );
+}
--- a/packages/editor-app/src/styles/App.css
+++ b/packages/editor-app/src/styles/App.css
@@ -14,6 +14,7 @@
  padding: 8px 16px;
  background-color: #2d2d2d;
  border-bottom: 1px solid #3e3e3e;
+  gap: 16px;
 }

 .editor-header h1 {
@@ -22,6 +23,33 @@
  margin: 0;
 }

+.header-toolbar {
+  display: flex;
+  gap: 8px;
+  flex: 1;
+}
+
+.toolbar-btn {
+  padding: 6px 12px;
+  background-color: #0e639c;
+  color: #ffffff;
+  border: none;
+  border-radius: 3px;
+  font-size: 13px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.toolbar-btn:hover:not(:disabled) {
+  background-color: #1177bb;
+}
+
+.toolbar-btn:disabled {
+  background-color: #3c3c3c;
+  color: #858585;
+  cursor: not-allowed;
+}
+
 .editor-header .status {
  font-size: 12px;
  color: #4ec9b0;
@@ -38,8 +66,7 @@
  width: 250px;
  background-color: #252526;
  border-right: 1px solid #3e3e3e;
-  padding: 12px;
-  overflow-y: auto;
+  overflow: hidden;
 }

 .sidebar-right {
@@ -54,6 +81,15 @@
  color: #ffffff;
 }

+.loading {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  color: #858585;
+  font-size: 13px;
+}
+
 .main-content {
  display: flex;
  flex-direction: column;
--- a/packages/editor-app/src/styles/EntityInspector.css
+++ b/packages/editor-app/src/styles/EntityInspector.css
@@ -0,0 +1,99 @@
+.entity-inspector {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background-color: #1e1e1e;
+  color: #cccccc;
+}
+
+.inspector-header {
+  padding: 10px;
+  border-bottom: 1px solid #3c3c3c;
+  background-color: #252526;
+}
+
+.inspector-header h3 {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+  color: #cccccc;
+}
+
+.inspector-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 12px;
+}
+
+.inspector-section {
+  margin-bottom: 16px;
+}
+
+.section-header {
+  font-size: 12px;
+  font-weight: 600;
+  color: #858585;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-bottom: 8px;
+  padding: 4px 0;
+  border-bottom: 1px solid #3c3c3c;
+}
+
+.section-content {
+  padding: 8px 0;
+}
+
+.info-row {
+  display: flex;
+  justify-content: space-between;
+  padding: 6px 0;
+  font-size: 13px;
+}
+
+.info-label {
+  color: #858585;
+  font-weight: 500;
+}
+
+.info-value {
+  color: #cccccc;
+}
+
+.component-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.component-item {
+  display: flex;
+  align-items: center;
+  padding: 8px;
+  margin-bottom: 4px;
+  background-color: #252526;
+  border: 1px solid #3c3c3c;
+  border-radius: 3px;
+  font-size: 13px;
+}
+
+.component-item:hover {
+  background-color: #2a2d2e;
+  border-color: #505050;
+}
+
+.component-icon {
+  margin-right: 8px;
+  font-size: 14px;
+}
+
+.component-name {
+  color: #cccccc;
+}
+
+.empty-state {
+  padding: 20px;
+  text-align: center;
+  color: #858585;
+  font-size: 13px;
+}
--- a/packages/editor-app/src/styles/SceneHierarchy.css
+++ b/packages/editor-app/src/styles/SceneHierarchy.css
@@ -0,0 +1,70 @@
+.scene-hierarchy {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background-color: #1e1e1e;
+  color: #cccccc;
+}
+
+.hierarchy-header {
+  padding: 10px;
+  border-bottom: 1px solid #3c3c3c;
+  background-color: #252526;
+}
+
+.hierarchy-header h3 {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+  color: #cccccc;
+}
+
+.hierarchy-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 8px 0;
+}
+
+.empty-state {
+  padding: 20px;
+  text-align: center;
+  color: #858585;
+  font-size: 13px;
+}
+
+.entity-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.entity-item {
+  display: flex;
+  align-items: center;
+  padding: 6px 12px;
+  cursor: pointer;
+  user-select: none;
+  transition: background-color 0.1s;
+}
+
+.entity-item:hover {
+  background-color: #2a2d2e;
+}
+
+.entity-item.selected {
+  background-color: #094771;
+}
+
+.entity-item.selected:hover {
+  background-color: #0e639c;
+}
+
+.entity-icon {
+  margin-right: 8px;
+  font-size: 14px;
+}
+
+.entity-name {
+  font-size: 13px;
+  color: #cccccc;
+}
--- a/packages/editor-core/src/Services/EntityStoreService.ts
+++ b/packages/editor-core/src/Services/EntityStoreService.ts
@@ -0,0 +1,78 @@
+import { Injectable, IService, Entity } from '@esengine/ecs-framework';
+import { MessageHub } from './MessageHub';
+
+export interface EntityTreeNode {
+  entity: Entity;
+  children: EntityTreeNode[];
+  parent: EntityTreeNode | null;
+}
+
+/**
+ * 管理编辑器中的实体状态和选择
+ */
+@Injectable()
+export class EntityStoreService implements IService {
+  private entities: Map<number, Entity> = new Map();
+  private selectedEntity: Entity | null = null;
+  private rootEntities: Set<number> = new Set();
+
+  constructor(private messageHub: MessageHub) {}
+
+  public dispose(): void {
+    this.entities.clear();
+    this.rootEntities.clear();
+    this.selectedEntity = null;
+  }
+
+  public addEntity(entity: Entity, parent?: Entity): void {
+    this.entities.set(entity.id, entity);
+
+    if (!parent) {
+      this.rootEntities.add(entity.id);
+    }
+
+    this.messageHub.publish('entity:added', { entity, parent });
+  }
+
+  public removeEntity(entity: Entity): void {
+    this.entities.delete(entity.id);
+    this.rootEntities.delete(entity.id);
+
+    if (this.selectedEntity?.id === entity.id) {
+      this.selectedEntity = null;
+      this.messageHub.publish('entity:selected', { entity: null });
+    }
+
+    this.messageHub.publish('entity:removed', { entity });
+  }
+
+  public selectEntity(entity: Entity | null): void {
+    this.selectedEntity = entity;
+    this.messageHub.publish('entity:selected', { entity });
+  }
+
+  public getSelectedEntity(): Entity | null {
+    return this.selectedEntity;
+  }
+
+  public getAllEntities(): Entity[] {
+    return Array.from(this.entities.values());
+  }
+
+  public getRootEntities(): Entity[] {
+    return Array.from(this.rootEntities)
+      .map(id => this.entities.get(id))
+      .filter((e): e is Entity => e !== undefined);
+  }
+
+  public getEntity(id: number): Entity | undefined {
+    return this.entities.get(id);
+  }
+
+  public clear(): void {
+    this.entities.clear();
+    this.rootEntities.clear();
+    this.selectedEntity = null;
+    this.messageHub.publish('entities:cleared', {});
+  }
+}
--- a/packages/editor-core/src/index.ts
+++ b/packages/editor-core/src/index.ts
@@ -10,5 +10,6 @@ export * from './Plugins/EditorPluginManager';
 export * from './Services/UIRegistry';
 export * from './Services/MessageHub';
 export * from './Services/SerializerRegistry';
+export * from './Services/EntityStoreService';

 export * from './Types/UITypes';