feat: add assets handling in ecs tree

src/app.css

@@ -42,7 +42,7 @@
   --background: 0.115 0 89.876;
   --foreground: 0.9461 0 0;
 
-  --border: 0.264 0 89.876;
+  --border: 0.2256 0 0;
   --input: 0.244 0 89.876;
   --ring: 0.4493 0.1953 294.69;
 

src/lib/client/action/repositories/package.repository.ts

@@ -1,47 +1,42 @@
-import type { ComponentManifest, SystemManifest } from '$lib/server/project/package';
-
 import { BaseRepository } from '../base.repository';
 import type {
-  AddComponentsActionInput,
-  AddSystemsActionInput,
-  ComponentPackageResult,
+  AssetPkg,
+  ComponentPkg,
   CreateComponentActionInput,
   CreateSystemActionInput,
-  GetComponentsManifestsActionInput,
-  GetSystemsManifestsActionInput,
-  SystemPackageResult,
+  InstallPackagesActionInput,
+  Package,
+  SearchInput,
+  SearchPackages,
+  SystemPkg,
 } from '../types';
 
 export class ProjectPackageRepository extends BaseRepository {
-  addComponents(input: AddComponentsActionInput): Promise<ComponentPackageResult[]> {
-    return this.run(`/actions/project/package?/add-components`, input);
-  }
-
-  addSystems(input: AddSystemsActionInput): Promise<SystemPackageResult[]> {
-    return this.run(`/actions/project/package?/add-systems`, input);
-  }
-
-  createComponent(input: CreateComponentActionInput): Promise<ComponentPackageResult> {
+  createComponent(input: CreateComponentActionInput): Promise<ComponentPkg> {
     return this.run(`/actions/project/package?/create-component`, input);
   }
 
-  createSystem(input: CreateSystemActionInput): Promise<SystemPackageResult> {
+  createSystem(input: CreateSystemActionInput): Promise<SystemPkg> {
     return this.run(`/actions/project/package?/create-system`, input);
   }
 
-  getComponentsManifests(input: GetComponentsManifestsActionInput): Promise<ComponentManifest[]> {
-    return this.run(`/actions/project/package?/get-components-manifests`, input);
+  getComponents(): Promise<ComponentPkg[]> {
+    return this.run(`/actions/project/package?/get-components`);
   }
 
-  getSystemsManifests(input: GetSystemsManifestsActionInput): Promise<SystemManifest[]> {
-    return this.run(`/actions/project/package?/get-systems-manifests`, input);
+  getSystems(): Promise<SystemPkg[]> {
+    return this.run(`/actions/project/package?/get-systems`);
   }
 
-  getComponents(): Promise<ComponentPackageResult[]> {
-    return this.run(`/actions/project/package?/get-components`);
+  getAssets(): Promise<AssetPkg[]> {
+    return this.run(`/actions/project/package?/get-assets`);
   }
 
-  getSystems(): Promise<SystemPackageResult[]> {
-    return this.run(`/actions/project/package?/get-systems`);
+  installPackages(input: InstallPackagesActionInput): Promise<Package[]> {
+    return this.run(`/actions/project/package?/install-packages`, input);
+  }
+
+  searchPackages(input: SearchInput): Promise<SearchPackages> {
+    return this.run(`/actions/project/package?/search-packages`, input);
   }
 }

src/lib/client/action/types/package.type.ts

@@ -1,23 +1,30 @@
-import type { AddComponentBody } from '$lib/server/actions/project/package/add-components.action';
-import type { AddSystemBody } from '$lib/server/actions/project/package/add-systems.action';
 import type { CreateComponentBody } from '$lib/server/actions/project/package/create-component.action';
 import type { CreateSystemBody } from '$lib/server/actions/project/package/create-system.action';
-import type { GetComponentManifestBody } from '$lib/server/actions/project/package/get-components-manifests.action';
-import type { GetSystemManifestBody } from '$lib/server/actions/project/package/get-systems-manifests.action';
-import type { ComponentPackage, SystemPackage } from '$lib/server/project/package/package.type';
+import type { InstallPackagesBody } from '$lib/server/actions/project/package/install-packages.action';
+import type { SearchPackagesBody } from '$lib/server/actions/project/package/search-packages.action';
+import type { PaginateResult, Package as ServerPackage } from '$lib/server/api';
+import type {
+  AssetPackage,
+  ComponentPackage,
+  SystemPackage,
+} from '$lib/server/project/package/package.type';
 
-export type ComponentPackageResult = ComponentPackage;
+export type ComponentPkg = ComponentPackage;
 
-export type SystemPackageResult = SystemPackage;
+export type SystemPkg = SystemPackage;
 
-export type AddComponentsActionInput = AddComponentBody;
+export type AssetPkg = AssetPackage;
 
-export type AddSystemsActionInput = AddSystemBody;
+export type Package = ComponentPackage | SystemPackage;
 
-export type GetComponentsManifestsActionInput = GetComponentManifestBody;
-
-export type GetSystemsManifestsActionInput = GetSystemManifestBody;
+export type InstallPackagesActionInput = InstallPackagesBody;
 
 export type CreateComponentActionInput = CreateComponentBody;
 
 export type CreateSystemActionInput = CreateSystemBody;
+
+export type SearchInput = SearchPackagesBody;
+
+export type ApiPackage = ServerPackage;
+
+export type SearchPackages = PaginateResult<ApiPackage>;

src/lib/client/ecs/asset/asset-handle.ts

@@ -0,0 +1,40 @@
+import { type Writable, get, writable } from 'svelte/store';
+
+import { resolveStore } from '../utils';
+import type { AssetManager } from './asset-manager';
+import type { Asset } from './asset.type';
+
+const _storage = writable<Record<string, Writable<Asset>>>({});
+
+export class AssetHandle {
+  private _manager: AssetManager;
+  private readonly _store: Writable<Asset>;
+  public readonly id: string;
+
+  static reset() {
+    _storage.set({});
+  }
+
+  constructor(manager: AssetManager, asset: Asset) {
+    this._manager = manager;
+    this.id = asset.id;
+
+    this._store = resolveStore(_storage, this.id, asset);
+  }
+
+  get store() {
+    return this._store;
+  }
+
+  get data() {
+    return get(this._store);
+  }
+
+  update(asset: Partial<Asset>) {
+    this._store.set({ ...get(this._store), ...asset });
+  }
+
+  delete() {
+    return this._manager.delete(this.id);
+  }
+}

src/lib/client/ecs/asset/asset-manager.ts

@@ -0,0 +1,113 @@
+import { type Unsubscriber, get, writable } from 'svelte/store';
+
+import type { AssetPkg } from '$lib/client/action';
+import { useProject } from '$lib/client/project';
+
+import { assetTransformer, assetsTransformer } from '../transformers';
+import { resetSubscriptions } from '../utils';
+import { AssetHandle } from './asset-handle';
+import type { Asset } from './asset.type';
+
+const _storage = writable<Asset[]>([]);
+
+const _subscriptions = writable<Record<string, Unsubscriber | null>>({});
+
+export class AssetManager {
+  static reset() {
+    _storage.set([]);
+    resetSubscriptions(_subscriptions);
+  }
+
+  constructor(assets: Asset[]) {
+    _storage.set(assets);
+  }
+
+  get store() {
+    return _storage;
+  }
+
+  get data() {
+    return get(_storage);
+  }
+
+  async createMany(files: File[]): Promise<void> {
+    const { fs } = useProject();
+
+    await Promise.all(files.map(this.create.bind(this)));
+
+    await this.sync();
+    const dir = await fs.getDirectory();
+    await dir.readdir(true);
+  }
+
+  async create(file: File): Promise<void> {
+    const { fs } = useProject();
+    const assetDir = await fs.getDirectory('assets');
+    const assetFile = await assetDir.getFile(file.name);
+    const stream = await assetFile.createWritable();
+    await file.stream().pipeTo(stream);
+    await assetFile.sync();
+  }
+
+  add(asset: AssetPkg) {
+    this._add(assetTransformer(asset));
+  }
+
+  async sync() {
+    const { actions } = useProject();
+    const assets = await actions.package.getAssets();
+    _storage.set(assetsTransformer(assets));
+  }
+
+  get(id: string): AssetHandle {
+    const asset = get(_storage).find((asset) => asset.id === id);
+    if (!asset) throw new Error(`Asset with id ${id} not found`);
+    const handle = new AssetHandle(this, asset);
+
+    this._subscribe(id, handle);
+
+    return handle;
+  }
+
+  async delete(id: string) {
+    const assets = get(_storage);
+    const asset = assets.find((c) => c.id === id);
+
+    if (!asset) throw new Error(`System not found: ${id}`);
+
+    _storage.set(assets.filter((c) => c.id !== id));
+    const { fs } = useProject();
+    const file = await fs.getFile(asset.path);
+    await file.delete();
+
+    const subscriptions = get(_subscriptions);
+    if (subscriptions[id]) {
+      subscriptions[id]();
+      subscriptions[id] = null;
+      _subscriptions.set(subscriptions);
+    }
+  }
+
+  private _add(asset: Asset) {
+    const assets = get(_storage);
+    assets.push(asset);
+    _storage.set(assets);
+  }
+
+  private _subscribe(id: string, handle: AssetHandle) {
+    setTimeout(() => {
+      const subscriptions = get(_subscriptions);
+      if (subscriptions[id]) return;
+      subscriptions[id] = handle.store.subscribe((asset) => this._update(id, asset));
+      _subscriptions.set(subscriptions);
+    }, 0);
+  }
+
+  private _update(id: string, asset: Asset) {
+    const assets = get(_storage);
+    const index = assets.findIndex((s) => s.id === id);
+    if (index === -1) return;
+    assets[index] = asset;
+    _storage.set(assets);
+  }
+}

src/lib/client/ecs/asset/asset.type.ts

@@ -0,0 +1,4 @@
+export interface Asset {
+  id: string;
+  path: string;
+}

src/lib/client/ecs/component/component-manager.ts

@@ -1,5 +1,6 @@
 import { type Unsubscriber, get, writable } from 'svelte/store';
 
+import type { ComponentPkg } from '$lib/client/action';
 import { useProject } from '$lib/client/project';
 
 import { componentTransformer, componentsTransformer } from '../transformers';
@@ -37,13 +38,8 @@ export class ComponentManager {
     await dir.readdir(true);
   }
 
-  async import(names: [string, ...string[]]) {
-    const { actions, ecs, fs } = useProject();
-    await actions.package.addComponents({ componentNames: names });
-    await this.sync();
-    await ecs.components.sync();
-    const dir = await fs.getDirectory();
-    await dir.readdir(true);
+  add(component: ComponentPkg) {
+    this._add(componentTransformer(component));
   }
 
   async sync() {

src/lib/client/ecs/ecs-handler.ts

@@ -1,11 +1,14 @@
 import {
+  assetsTransformer,
   componentsTransformer,
   librariesTransformer,
   scenesTransformer,
   systemsTransformer,
 } from '$lib/client/ecs/transformers';
 import type { Project } from '$lib/client/project';
 
+import { AssetHandle } from './asset/asset-handle';
+import { AssetManager } from './asset/asset-manager';
 import { ComponentHandle } from './component/component-handle';
 import { ComponentManager } from './component/component-manager';
 import { LibraryHandle } from './library/library-handle';
@@ -25,11 +28,14 @@ export class ECSHandler {
   private readonly _project: Project;
 
   private _sceneManager: SceneManager | undefined;
+  private _assetManager: AssetManager | undefined;
   private _componentManager: ComponentManager | undefined;
   private _systemManager: SystemManager | undefined;
   private _libraryManager: LibraryManager | undefined;
 
   static reset() {
+    AssetHandle.reset();
+    AssetManager.reset();
     ComponentHandle.reset();
     ComponentManager.reset();
     SystemManager.reset();
@@ -57,11 +63,13 @@ export class ECSHandler {
      * When scenes will be implemented, this init must be changed accordingly
      */
 
+    const assets = await this._project.actions.package.getAssets();
     const components = await this._project.actions.package.getComponents();
     const systems = await this._project.actions.package.getSystems();
     // Cannot use save handler as it needs to use ecs handler to subscribe to ecs changes
     const save = await this._project.actions.save.get();
 
+    this._assetManager = new AssetManager(assetsTransformer(assets));
     this._componentManager = new ComponentManager(componentsTransformer(components));
     this._systemManager = new SystemManager(systemsTransformer(systems));
     this._libraryManager = new LibraryManager(librariesTransformer(save));
@@ -74,6 +82,11 @@ export class ECSHandler {
     return this._sceneManager;
   }
 
+  get assets(): AssetManager {
+    if (!this._assetManager) throw new Error('ECS handler not initialized');
+    return this._assetManager;
+  }
+
   get components(): ComponentManager {
     if (!this._componentManager) throw new Error('ECS handler not initialized');
     return this._componentManager;

src/lib/client/ecs/index.ts

@@ -1,5 +1,9 @@
 export { ECSHandler } from './ecs-handler';
 
+export type { AssetHandle } from './asset/asset-handle';
+export type { AssetManager } from './asset/asset-manager';
+export type { Asset } from './asset/asset.type';
+
 export type { ComponentHandle } from './component/component-handle';
 export type { ComponentManager } from './component/component-manager';
 export type { Component, ComponentParam } from './component/component.type';

src/lib/client/ecs/scene/entity/component/component-handle.ts

@@ -1,6 +1,6 @@
 import { type Readable, get } from 'svelte/store';
 
-import type { Component } from '../../../component/component.type';
+import type { Component } from '../../../asset/asset.type';
 import type { EntityComponentManager } from './component-manager';
 import { ComponentParamManager } from './component-param-manager';
 

src/lib/client/ecs/scene/entity/component/component-param-handle.ts

@@ -1,6 +1,6 @@
 import { type Readable, type Unsubscriber, type Writable, get, writable } from 'svelte/store';
 
-import type { ComponentParam } from '../../../component/component.type';
+import type { ComponentParam } from '../../../asset/asset.type';
 import { resetListeners, resolveStore } from '../../../utils';
 import type { ComponentParamManager } from './component-param-manager';
 

src/lib/client/ecs/scene/entity/component/component-param-manager.ts

@@ -1,6 +1,6 @@
 import { type Unsubscriber, type Writable, get, writable } from 'svelte/store';
 
-import type { ComponentParam } from '../../../component/component.type';
+import type { ComponentParam } from '../../../asset/asset.type';
 import { resetListeners, resetSubscriptions } from '../../../utils';
 import { resolveStore } from '../../../utils';
 import type { EntityComponentHandle } from './component-handle';