✨ feat: stash editor data

docs/components/playground/index.vue

@@ -1,16 +1,34 @@
 <script lang="ts" setup>
-import { ref, useTemplateRef } from 'vue'
+import { onMounted, ref, useTemplateRef, watch } from 'vue'
 import useView from './composables/use-view'
 import useEditor from './composables/use-editor/index'
 import { DataMap } from './index'
 import { DEFAULT_DATA } from './constants'
 
+const LOCAL_STORAGE_KEY = 'gpu-mesh-data'
 const dataMap = ref<DataMap>(DEFAULT_DATA)
+watch(
+  dataMap,
+  () => {
+    localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(dataMap.value))
+  },
+  { deep: true }
+)
+onMounted(() => {
+  const storageData = localStorage.getItem(LOCAL_STORAGE_KEY)
+  if (storageData) {
+    dataMap.value = JSON.parse(storageData)
+  }
+})
 
 const viewRef = useTemplateRef<HTMLElement>('viewRef')
 const editorRef = useTemplateRef<HTMLElement>('editorRef')
 useView({ el: viewRef, dataMap })
 const editor = useEditor({ el: editorRef, dataMap })
+const handleReset = () => {
+  dataMap.value = DEFAULT_DATA
+  editor.updateActiveDataKey(editor.activeDataKey.value)
+}
 </script>
 
 <template>
@@ -19,15 +37,18 @@ const editor = useEditor({ el: editorRef, dataMap })
       <div ref="viewRef" class="view" />
     </div>
     <div class="right-container">
-      <ul class="tab-list">
-        <li
-          v-for="tab in Object.keys(editor.dataMap.value)"
-          :class="{ active: editor.activeDataKey.value === tab }"
-          @click="editor.updateActiveDataKey(tab as any)"
-        >
-          {{ tab }}
-        </li>
-      </ul>
+      <div class="header">
+        <ul class="tab-list">
+          <li
+            v-for="tab in Object.keys(editor.dataMap.value)"
+            :class="{ active: editor.activeDataKey.value === tab }"
+            @click="editor.updateActiveDataKey(tab as any)"
+          >
+            {{ tab }}
+          </li>
+        </ul>
+        <button class="reset-icon" @click="handleReset">reset</button>
+      </div>
       <div ref="editorRef" class="editor" />
     </div>
   </div>
@@ -52,6 +73,14 @@ const editor = useEditor({ el: editorRef, dataMap })
     display: grid;
     grid-template-rows: auto 1fr;
   }
+  .header {
+    display: flex;
+    justify-content: space-between;
+  }
+  .reset-icon {
+    font-size: 12px;
+    cursor: pointer;
+  }
   .tab-list {
     border-top-left-radius: 4px;
     border-top-right-radius: 4px;