✨ feat: editor & canvas view

docs/.vitepress/config.mts

@@ -12,5 +12,9 @@ export default defineConfig({
       { icon: 'github', link: 'https://github.com/ccjr1120/gpu-mesh' }
     ]
   },
-  vite: {}
+  vite: {
+    ssr: {
+      noExternal: ['monaco-editor']
+    }
+  }
 })

docs/components/playground/composables/use-view.ts

@@ -1,6 +1,7 @@
-import { onMounted, Ref, ShallowRef, watch } from 'vue'
+import { onMounted, ref, Ref, ShallowRef, watch } from 'vue'
 import GPUMesh from '../../../../src/index'
 import { DataMap } from '../index.vue'
+import { _throttle } from '../utils'
 
 export default function useView({
   el,
@@ -9,35 +10,36 @@ export default function useView({
   el: ShallowRef<HTMLElement | null>
   dataMap: Ref<DataMap>
 }) {
+  const loading = ref(false)
+  onMounted(async () => {
+    await GPUMesh.Mesh.loadDevice()
+    const observer = new ResizeObserver(renderGPUMesh)
+    observer.observe(el.value!)
+    loading.value = true
+  })
   watch(
-    dataMap,
+    [dataMap, el, loading],
     () => {
-      console.log('dataMap changed')
+      if (!loading.value) return
+      renderGPUMesh()
     },
-    { deep: true }
+    { deep: true, immediate: true, flush: 'pre' }
   )
-  onMounted(async () => {
+
+  const WAIT_TIME = 600
+  const renderGPUMesh = _throttle(() => {
     if (!el.value) return
-    await GPUMesh.Mesh.loadDevice()
+    el.value.innerHTML = ''
     new GPUMesh.Mesh(el.value, {
       vertices: new Float32Array([
         -0.8, -0.8, 0.8, -0.8, 0.8, 0.8,
         // Triangle 2
         -0.8, -0.8, 0.8, 0.8, -0.8, 0.8
       ]),
       shader: {
-        vertex: `
-        @vertex
-  fn vertexMain(@location(0) pos: vec2f) ->
-    @builtin(position) vec4f {
-    return vec4f(pos, 0, 1);
-  }`,
-        fragment: `
-          @fragment
-  fn fragmentMain() -> @location(0) vec4f {
-    return vec4f(1, 0, 0, 1); // (Red, Green, Blue, Alpha)
-  }`
+        vertex: `${dataMap.value.vertex}`,
+        fragment: `${dataMap.value.fragment}`
       }
     })
-  })
+  }, WAIT_TIME)
 }

docs/components/playground/index.vue

@@ -14,7 +14,7 @@ const dataMap = ref<DataMap>(DEFAULT_DATA)
 
 const viewRef = useTemplateRef('viewRef')
 const editorRef = useTemplateRef('editorRef')
-const view = useView({ el: viewRef, dataMap })
+useView({ el: viewRef, dataMap })
 const editor = useEditor({ el: editorRef, dataMap })
 </script>
 

docs/components/playground/utils.ts

@@ -0,0 +1,12 @@
+export const _throttle = (func: () => void, wait: number) => {
+  let timeout: null | NodeJS.Timeout = null
+  return function () {
+    if (timeout) {
+      clearTimeout(timeout)
+    }
+    timeout = setTimeout(() => {
+      func()
+      timeout = null
+    }, wait)
+  }
+}