open file from dialog

src/blueprint/nodes/aggregation/file-list.ts

@@ -26,20 +26,26 @@ export class FileListNode extends BlueprintNode<{ ignoreNodeModules: boolean }>
     return array.filter((sf) => (this.state?.ignoreNodeModules ? !sf.fileName.includes("/node_modules") : true));
   }
 
-  private getFileNames(array: ts.SourceFile[]): string[] {
+  private getFileNames(array: ts.SourceFile[]): Array<{ path: string; name: string }> {
     return array
       .map((sourceFile) => {
         const folder = vscode.workspace.getWorkspaceFolder(vscode.Uri.parse("file:///" + sourceFile.fileName));
         if (folder) {
-          return sourceFile.fileName.replace(folder.uri.path.slice(1), "");
+          return {
+            path: sourceFile.fileName,
+            name: sourceFile.fileName.replace(folder.uri.path.slice(1), ""),
+          };
         } else {
-          return sourceFile.fileName;
+          return {
+            path: sourceFile.fileName,
+            name: sourceFile.fileName,
+          };
         }
       })
-      .filter((fileName) => (this.state?.ignoreNodeModules ? !fileName.startsWith("/node_modules") : true));
+      .filter((file) => (this.state?.ignoreNodeModules ? !file.name.startsWith("/node_modules") : true));
   }
 
-  async getViewData(): Promise<string[]> {
+  async getViewData(): Promise<Array<{ path: string; name: string }>> {
     const array = (await this.evalInput<ts.Node[]>(0)) || [];
 
     if (isArrayOfType(array, ts.isSourceFile)) {

src/extension/events/editor-open-file.ts

@@ -0,0 +1,15 @@
+import * as vscode from "vscode";
+import { EditorOpenFile } from "../../shared/events";
+import { IExtensionEventHandler } from "../extension-event-bus";
+
+export class EditorOpenFileEventHandler implements IExtensionEventHandler<EditorOpenFile> {
+  readonly command: "editor:open-file" = "editor:open-file";
+
+  constructor() {}
+
+  async handle(data: EditorOpenFile["data"], panel: vscode.WebviewPanel): Promise<void> {
+    if (data?.path) {
+      await vscode.window.showTextDocument(vscode.Uri.file(data.path));
+    }
+  }
+}

src/extension/events/index.ts

@@ -10,3 +10,4 @@ export * from "./load-blueprint";
 export * from "./save-blueprint";
 export * from "./graph-add-nodes-batch";
 export * from "./graph-connect-nodes-batch";
+export * from "./editor-open-file";

src/extension/extension.ts

@@ -17,6 +17,7 @@ import {
   GraphCleanEventHandler,
   GraphNodeAddNodesBatchEventHandler,
   GraphConnectNodesBatchEventHandler,
+  EditorOpenFileEventHandler,
 } from "./events";
 import { BlueprintStore } from "../blueprint/store";
 import { EventManager } from "./event-manager";
@@ -79,7 +80,8 @@ export function activate(context: vscode.ExtensionContext) {
     .addHandler(new GraphNodeAddNodesBatchEventHandler(store))
     .addHandler(new GraphConnectNodesBatchEventHandler(store))
     .addHandler(new SaveBlueprintEventHandler())
-    .addHandler(new LoadBlueprintEventHandler());
+    .addHandler(new LoadBlueprintEventHandler())
+    .addHandler(new EditorOpenFileEventHandler());
 
   // The command has been defined in the package.json file
   // Now provide the implementation of the command with registerCommand

src/shared/events/commands.ts

@@ -25,3 +25,5 @@ export interface GraphConnectNodesBatch
     "graph:connect-nodes-batch",
     { nodes: { sourceId: string; targetId: string; sourceIndex: number; targetIndex: number }[] }
   > {}
+
+export interface EditorOpenFile extends EventCommand<"editor:open-file", { path: string }> {}

src/webview/nodes/aggregation/FileListNode.vue

@@ -1,11 +1,11 @@
 <template>
   <NodeWrapper @dblclick="openModal()">
-    <template #header>Files</template>
+    <template #header> Files ({{ model.allItems.length }}) </template>
     <template #body>
       <div class="nowheel">
         <div style="max-height: 200px; overflow: auto">
           <div v-for="file in items">
-            {{ file }}
+            {{ file.name }}
           </div>
         </div>
         <div class="font-bold cursor-pointer" v-if="greaterThanMaxItems" @click="toggleAll()">
@@ -37,13 +37,12 @@
             <div class="overflow-auto">
               <table class="table">
                 <tbody>
-                  <tr class="hover" v-for="file in filteredItems">
-                    <th>{{ file }}</th>
+                  <tr class="hover" v-for="file in filteredItems" @dblclick="openFile(file.path)">
+                    <td>{{ file.name }}</td>
                   </tr>
                 </tbody>
               </table>
             </div>
-
           </div>
 
           <div class="modal-action">
@@ -64,20 +63,31 @@ import { useNodeState } from "@/webview/composables/use-node-state";
 import { useViewData } from "@/webview/composables/use-view-data";
 import { useCollapsableList } from "@/webview/composables/use-collapsable-list";
 import { computed, ref } from "vue";
+import { sendEventCommand } from "@/webview/event-utils";
+import { EditorOpenFile } from "@/shared/events";
 
-const { model, items, greaterThanMaxItems, otherItemsCount, toggleAll } = useCollapsableList<string>();
+const { model, items, greaterThanMaxItems, otherItemsCount, toggleAll } = useCollapsableList<{ name: string; path: string; }>();
 const nodeState = useNodeState<{ ignoreNodeModules: boolean }>({ ignoreNodeModules: false });
-const editorState = ref<{ query: string; }>({
-  query: ''
-})
-const filteredItems = computed(() => model.value.allItems.filter(x => x.includes(editorState.value.query.toLocaleLowerCase())))
+const editorState = ref<{ query: string }>({
+  query: "",
+});
+const filteredItems = computed(() => model.value.allItems.filter((x) => x.name.includes(editorState.value.query.toLocaleLowerCase())));
 const editorModal = ref<HTMLDialogElement>(null);
 
-useViewData<string[]>((data) => {
+useViewData<{ name: string; path: string; }[]>((data) => {
   model.value.allItems = data;
 });
 
 function openModal(): void {
   editorModal.value.showModal();
 }
+
+function openFile(path: string): void {
+  sendEventCommand<EditorOpenFile>({
+    command: "editor:open-file",
+    data: {
+      path,
+    },
+  });
+}
 </script>