From 8eb5aeb62f65df6a2dcea5ef0c601e41ccaf5d4a Mon Sep 17 00:00:00 2001
From: ccjr1120 <qianaiwuyu@gmail.com>
Date: Tue, 29 Oct 2024 19:18:45 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20editor=20&=20canvas=20view?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/.vitepress/config.mts                    |  6 ++-
 .../playground/composables/use-view.ts        | 38 ++++++++++---------
 docs/components/playground/index.vue          |  2 +-
 docs/components/playground/utils.ts           | 12 ++++++
 pnpm-lock.yaml                                | 10 ++---
 5 files changed, 43 insertions(+), 25 deletions(-)
 create mode 100644 docs/components/playground/utils.ts

diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts
index 6ef6927..bc6755c 100644
--- a/docs/.vitepress/config.mts
+++ b/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']
+    }
+  }
 })
diff --git a/docs/components/playground/composables/use-view.ts b/docs/components/playground/composables/use-view.ts
index 271d8f3..2ed42b2 100644
--- a/docs/components/playground/composables/use-view.ts
+++ b/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,16 +10,26 @@ 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,
@@ -26,18 +37,9 @@ export default function useView({
         -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)
 }
diff --git a/docs/components/playground/index.vue b/docs/components/playground/index.vue
index 6006bcd..156c985 100644
--- a/docs/components/playground/index.vue
+++ b/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>
 
diff --git a/docs/components/playground/utils.ts b/docs/components/playground/utils.ts
new file mode 100644
index 0000000..3faa49a
--- /dev/null
+++ b/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)
+  }
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6a69f37..0fa9c55 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -9,8 +9,8 @@ importers:
   .:
     dependencies:
       monaco-editor:
-        specifier: ^0.52.0
-        version: 0.52.0
+        specifier: ^0.41.0
+        version: 0.41.0
       vue:
         specifier: ^3.5.12
         version: 3.5.12(typescript@5.6.3)
@@ -1523,8 +1523,8 @@ packages:
   mitt@3.0.1:
     resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==}
 
-  monaco-editor@0.52.0:
-    resolution: {integrity: sha512-OeWhNpABLCeTqubfqLMXGsqf6OmPU6pHM85kF3dhy6kq5hnhuVS1p3VrEW/XhWHc71P2tHyS5JFySD8mgs1crw==}
+  monaco-editor@0.41.0:
+    resolution: {integrity: sha512-1o4olnZJsiLmv5pwLEAmzHTE/5geLKQ07BrGxlF4Ri/AXAc2yyDGZwHjiTqD8D/ROKUZmwMA28A+yEowLNOEcA==}
 
   ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
@@ -3445,7 +3445,7 @@ snapshots:
 
   mitt@3.0.1: {}
 
-  monaco-editor@0.52.0: {}
+  monaco-editor@0.41.0: {}
 
   ms@2.1.3: {}