feat: show uniform in runner ui

seven332 · Dec 16, 2023 · f175818 · f175818
1 parent 0e367b2
commit f175818
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 12 deletions.
diff --git a/packages/extension/src/runner.ts b/packages/extension/src/runner.ts
@@ -2,7 +2,15 @@ import * as vscode from 'vscode'
 import { LanguageClient } from 'vscode-languageclient/node'
 import * as path from 'path'
 import * as fs from 'fs'
-import { Message, QueryResult, kQueryUrl, MessageType, SelectSkSLResponseMessage, pipe } from '@workspace/runner-data'
+import {
+    Message,
+    QueryResult,
+    kQueryUrl,
+    MessageType,
+    SelectSkSLResponse,
+    pipe,
+    GetUniformsResponse,
+} from '@workspace/runner-data'
 
 export class Runner {
     public static kCommand = 'sksl.showRunner'
@@ -50,7 +58,7 @@ export class Runner {
 
     private async selectSkSL(panel: vscode.WebviewPanel, uri: vscode.Uri) {
         panel.webview.postMessage(
-            pipe<SelectSkSLResponseMessage>({
+            pipe<SelectSkSLResponse>({
                 type: MessageType.kSelectSkSL,
                 path: uri.toString(),
             }),
@@ -60,6 +68,11 @@ export class Runner {
         const result: QueryResult = await this.client.sendRequest(kQueryUrl, {
             source: buffer.toString(),
         })
-        console.log(result)
+        panel.webview.postMessage(
+            pipe<GetUniformsResponse>({
+                type: MessageType.kGetUniforms,
+                uniforms: result.uniforms,
+            }),
+        )
     }
 }
diff --git a/packages/runner-data/src/message.ts b/packages/runner-data/src/message.ts
@@ -1,3 +1,5 @@
+import { type SkSLUniform } from './wasm'
+
 export enum MessageType {
     kSelectSkSL,
     kGetUniforms,
@@ -7,15 +9,20 @@ export interface Message {
     type: MessageType
 }
 
-export interface SelectSkSLRequestMessage extends Message {
+export interface SelectSkSLRequest extends Message {
     type: MessageType.kSelectSkSL
 }
 
-export interface SelectSkSLResponseMessage extends Message {
+export interface SelectSkSLResponse extends Message {
     type: MessageType.kSelectSkSL
     path: string
 }
 
+export interface GetUniformsResponse extends Message {
+    type: MessageType.kGetUniforms
+    uniforms: SkSLUniform[]
+}
+
 export function pipe<T>(t: T): T {
     return t
 }
diff --git a/packages/runner-ui/src/App.vue b/packages/runner-ui/src/App.vue
@@ -1,37 +1,56 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import * as Vue from 'vue'
 import './vscode-webview'
 import {
     type Message,
     MessageType,
     pipe,
-    type SelectSkSLRequestMessage,
-    type SelectSkSLResponseMessage,
+    type SelectSkSLRequest,
+    type SelectSkSLResponse,
+    type SkSLUniform,
+    type GetUniformsResponse,
 } from '@workspace/runner-data'
 
-let skslPath = ref('')
+interface Uniform {
+    uniform: SkSLUniform
+    value: Vue.Ref<string>
+}
+
+let path = Vue.ref('')
+let uniforms = Vue.ref([] as Uniform[])
 
 window.addEventListener('message', (event) => {
     const message = event.data as Message
     switch (message.type) {
         case MessageType.kSelectSkSL:
-            skslPath.value = (message as SelectSkSLResponseMessage).path
+            path.value = (message as SelectSkSLResponse).path
+            break
+        case MessageType.kGetUniforms:
+            uniforms.value = []
+            for (const uniform of (message as GetUniformsResponse).uniforms) {
+                uniforms.value.push({ uniform: uniform, value: '' })
+            }
+            console.log(uniforms)
             break
     }
 })
 
 const vscode = acquireVsCodeApi()
 
 function selectSkSL() {
-    vscode.postMessage(pipe<SelectSkSLRequestMessage>({ type: MessageType.kSelectSkSL }))
+    vscode.postMessage(pipe<SelectSkSLRequest>({ type: MessageType.kSelectSkSL }))
 }
 </script>
 
 <template>
     <div class="body">
         <h1>SkSL Runner</h1>
         <button @click="selectSkSL()">Select SkSL</button>
-        <span>{{ skslPath }}</span>
+        <span>{{ path }}</span>
+        <li v-for="uniform in uniforms">
+            {{ uniform.uniform.name }} - {{ uniform.uniform.type }}
+            <input type="text" v-model="uniform.value" />
+        </li>
     </div>
 </template>