feat: add open code button

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

@@ -15,6 +15,8 @@ export class EntityComponentManager {
   public readonly entity: SceneEntityHandle;
   private readonly _store: Writable<Record<string, Record<string, string>>>;
 
+  private readonly _storageResolvable: string;
+
   static reset() {
     _storage.set({});
     resetSubscriptions(_subscriptions);
@@ -24,9 +26,9 @@ export class EntityComponentManager {
   constructor(entity: SceneEntityHandle, components: Record<string, Record<string, string>>) {
     this.entity = entity;
 
-    const storageResolvable = `${this.entity.manager.scene.id}/${this.entity.id}`;
+    this._storageResolvable = `${this.entity.manager.scene.id}/${this.entity.id}`;
 
-    this._store = resolveStore(_storage, storageResolvable, components);
+    this._store = resolveStore(_storage, this._storageResolvable, components);
 
     this._listen();
   }
@@ -70,10 +72,11 @@ export class EntityComponentManager {
     });
     this._store.set(newComponents);
 
+    const fullId = `${this._storageResolvable}/${id}`;
     const subscriptions = get(_subscriptions);
-    if (subscriptions[id]) {
-      subscriptions[id]();
-      subscriptions[id] = null;
+    if (subscriptions[fullId]) {
+      subscriptions[fullId]();
+      subscriptions[fullId] = null;
       _subscriptions.set(subscriptions);
     }
   }
@@ -93,9 +96,10 @@ export class EntityComponentManager {
 
   private _subscribe(id: string, handle: EntityComponentHandle) {
     setTimeout(() => {
+      const fullId = `${this._storageResolvable}/${id}`;
       const subscriptions = get(_subscriptions);
-      if (subscriptions[id]) return;
-      subscriptions[id] = handle.params.values.subscribe((params) => this._update(id, params));
+      if (subscriptions[fullId]) return;
+      subscriptions[fullId] = handle.params.values.subscribe((params) => this._update(id, params));
       _subscriptions.set(subscriptions);
     }, 0);
   }

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

@@ -18,6 +18,8 @@ export class ComponentParamManager {
   private readonly _store: Writable<ComponentParam[]>;
   private readonly _valuesStore: Writable<Record<string, string>>;
 
+  private readonly _storageResolvable: string;
+
   static reset() {
     _storage.set({});
     _valueStorage.set({});
@@ -28,10 +30,10 @@ export class ComponentParamManager {
   constructor(component: EntityComponentHandle, params: Record<string, string>) {
     this.component = component;
 
-    const storageResolvable = `${this.component.manager.entity.manager.scene.id}/${this.component.manager.entity.id}/${this.component.id}`;
+    this._storageResolvable = `${this.component.manager.entity.manager.scene.id}/${this.component.manager.entity.id}/${this.component.id}`;
 
-    this._store = resolveStore(_storage, storageResolvable, get(component.store).params);
-    this._valuesStore = resolveStore(_valueStorage, storageResolvable, params);
+    this._store = resolveStore(_storage, this._storageResolvable, get(component.store).params);
+    this._valuesStore = resolveStore(_valueStorage, this._storageResolvable, params);
 
     this._listen();
   }
@@ -62,10 +64,11 @@ export class ComponentParamManager {
       params.map((param) => (param.name === id ? { ...param, value: undefined } : param)),
     );
 
+    const fullId = `${this._storageResolvable}/${id}`;
     const subscriptions = get(_subscriptions);
-    if (subscriptions[id]) {
-      subscriptions[id]();
-      subscriptions[id] = null;
+    if (subscriptions[fullId]) {
+      subscriptions[fullId]();
+      subscriptions[fullId] = null;
       _subscriptions.set(subscriptions);
     }
   }
@@ -80,9 +83,10 @@ export class ComponentParamManager {
 
   private _subscribe(id: string, handle: ComponentParamHandle) {
     setTimeout(() => {
+      const fullId = `${this._storageResolvable}/${id}`;
       const subscriptions = get(_subscriptions);
-      if (subscriptions[id]) return;
-      subscriptions[id] = handle.value.subscribe((param) => this._update(id, param));
+      if (subscriptions[fullId]) return;
+      subscriptions[fullId] = handle.value.subscribe((param) => this._update(id, param));
       _subscriptions.set(subscriptions);
     }, 0);
   }

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

@@ -69,10 +69,11 @@ export class SceneEntityManager {
     const entities = get(this._store);
     this._store.set(entities.filter((entity) => entity.id !== id));
 
+    const fullId = `${this.scene.id}/${id}`;
     const subscriptions = get(_subscriptions);
-    if (subscriptions[id]) {
-      subscriptions[id]();
-      subscriptions[id] = null;
+    if (subscriptions[fullId]) {
+      subscriptions[fullId]();
+      subscriptions[fullId] = null;
       _subscriptions.set(subscriptions);
     }
 
@@ -83,9 +84,10 @@ export class SceneEntityManager {
 
   private _subscribe(id: string, handle: SceneEntityHandle) {
     setTimeout(() => {
+      const fullId = `${this.scene.id}/${id}`;
       const subscriptions = get(_subscriptions);
-      if (subscriptions[id]) return;
-      subscriptions[id] = handle.store.subscribe((entity) => this._update(id, entity));
+      if (subscriptions[fullId]) return;
+      subscriptions[fullId] = handle.store.subscribe((entity) => this._update(id, entity));
       _subscriptions.set(subscriptions);
     }, 0);
   }

src/lib/components/Widget/content-browser/content-item.svelte

@@ -1,32 +1,18 @@
 <script lang="ts">
   import { tabsStore } from '$lib/components/Tabs/store';
-  import type { TabTypeId } from '$lib/components/Tabs/types';
   import { TooltipText } from '$lib/components/ui/tooltip-text';
 
   import ContentBrowserIcon from './icon.svelte';
   import { currentDir } from './store';
   import type { ContentBrowserItem } from './types';
   import { joinPath } from './utils';
+  import { getType } from '@utils/file';
 
   interface Props {
     item: ContentBrowserItem;
   }
   let { item }: Props = $props();
 
-  const FILE_TYPES: [TabTypeId, string[]][] = [
-    ['ts', ['ts', 'js']],
-    ['3d', ['fbd']],
-    ['song', ['mp3', 'wav', 'flac']],
-    ['img', ['png', 'jpg', 'jpeg', 'gif', 'svg', 'webp']],
-  ];
-
-  const getType = () => {
-    const [type] = FILE_TYPES.find(([, exts]) => exts.includes(item.name.split('.').pop()!)) ?? [
-      'unknown',
-    ];
-    return type;
-  };
-
   const handleClick = async () => {
     const path = joinPath($currentDir, item.name);
 
@@ -36,7 +22,7 @@
     }
 
     await tabsStore.openTab({
-      type: getType(),
+      type: getType(item.name),
       title: item.name,
       metadata: {
         path,

src/lib/components/Widget/ecs-tree/packages/package-row.svelte

@@ -18,6 +18,8 @@
   import type { ComponentHandle, SystemHandle, LibraryHandle } from '$lib/client/ecs';
   import { useProject } from '$lib/client/project';
   import { get, type Writable } from 'svelte/store';
+  import { tabsStore } from '$lib/components/Tabs/store';
+  import { getType } from '@utils/file';
 
   type Props =
     | {
@@ -80,7 +82,15 @@
 
   const onOpenCode = (e: MouseEvent) => {
     e.stopPropagation();
-    // @todo handle open code editor
+    const item = get(pkg);
+    if (type === 'library' || !item.path) return;
+    tabsStore.openTab({
+      type: getType(item.path),
+      title: item.path.split('/').at(-1) ?? item.name,
+      metadata: {
+        path: item.path,
+      },
+    });
   };
 
   const handleDelete = () => {

src/lib/components/Widget/ecs-tree/packages/package-tab.svelte

@@ -21,6 +21,7 @@
   import type { Writable } from 'svelte/store';
   import type { Package } from '../types';
   import { formatFrom } from '@utils/format';
+  import { getContext } from 'svelte';
 
   type Props =
     | {
@@ -43,8 +44,20 @@
   const nameCapitalized = $derived(capitalize(type));
   const namePlural = $derived(type === 'library' ? 'libraries' : type + 's');
 
+  const ecsQuery = getContext<{ packages: string }>('ecsQuery');
+
   let query = $state('');
 
+  $effect(() => {
+    const q = `${ecsQuery.packages}`;
+    if (q.length > 0) {
+      setTimeout(() => {
+        query = q;
+        ecsQuery.packages = '';
+      });
+    }
+  });
+
   const sorted = $derived(
     $packages
       .filter((c) => !query || (c.name ?? c.id).toLowerCase().includes(query.toLowerCase()))

src/lib/components/Widget/ecs-tree/scenes/systems/scene-system-list.svelte

@@ -12,6 +12,9 @@
   import type { SceneSystemManager, System } from '$lib/client/ecs';
   import { useProject } from '$lib/client/project';
   import type { Writable } from 'svelte/store';
+  import { tabsStore } from '$lib/components/Tabs/store';
+  import { getType } from '@utils/file';
+  import { getContext } from 'svelte';
 
   interface Props {
     manager: SceneSystemManager;
@@ -21,6 +24,9 @@
 
   const { ecs } = useProject();
 
+  const selectTab = getContext<(tab: string) => void>('selectTab');
+  const ecsQuery = getContext<{ packages: string }>('ecsQuery');
+
   const systems = $derived(manager.store);
   const allSystems = $derived<Writable<System[]>>(ecs.systems.store);
 
@@ -57,14 +63,23 @@
 
   const onOpenCode = (systemName: string) => (e: MouseEvent) => {
     e.stopPropagation();
-    // @todo open code editor
-    console.log('open code', systemName);
+
+    const handle = manager.get(systemName);
+    const item = handle.data;
+
+    tabsStore.openTab({
+      type: getType(item.path),
+      title: item.path.split('/').at(-1) ?? item.name,
+      metadata: {
+        path: item.path,
+      },
+    });
   };
 
   const onOpenSystem = (systemName: string) => (e: MouseEvent) => {
     e.stopPropagation();
-    // @todo open to systems tab
-    console.log('open system', systemName);
+    ecsQuery.packages = systemName;
+    selectTab('systems');
   };
 
   const isNext = (a: string | null, b: string | null, pos: 'before' | 'after') => {

src/lib/components/Widget/ecs-tree/types.ts

@@ -25,6 +25,6 @@ export interface EntityDragContext {
 
 export interface Package {
   id: string;
-  name?: string;
+  name: string;
   path?: string;
 }

src/lib/components/Widget/ecs-tree/widget.svelte

@@ -5,10 +5,19 @@
   import LibrariesTab from './libraries/libraries-tab.svelte';
   import SystemsTab from './systems/systems-tab.svelte';
   import { useProject } from '$lib/client/project';
+  import { setContext } from 'svelte';
 
   const { ecs } = useProject();
 
   let selectedTab = $state('scenes');
+  let query = $state({ entities: '', packages: '' });
+
+  const selectTab = (tab: string) => {
+    selectedTab = tab;
+  };
+
+  setContext('selectTab', selectTab);
+  setContext('ecsQuery', query);
 </script>
 
 <Tabs

src/lib/utils/file.ts

@@ -0,0 +1,15 @@
+import type { TabTypeId } from '$lib/components/Tabs/types';
+
+const FILE_TYPES: [TabTypeId, string[]][] = [
+  ['ts', ['ts', 'js']],
+  ['3d', ['fbd']],
+  ['song', ['mp3', 'wav', 'flac']],
+  ['img', ['png', 'jpg', 'jpeg', 'gif', 'svg', 'webp']],
+];
+
+export const getType = (name: string) => {
+  const [type] = FILE_TYPES.find(([, exts]) => exts.includes(name.split('.').pop()!)) ?? [
+    'unknown',
+  ];
+  return type;
+};