实现基础的保存功能

public/index.html

@@ -7,7 +7,7 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>icon.png">
     <title>Vcd Viewer</title>
-    <link rel="stylesheet" href="ondark.css">
+    <link rel="stylesheet" href="onedark.css">
     <link rel="stylesheet" href="vscode.css">
     <link rel="stylesheet" href="vcd.css">
     <link rel="stylesheet" href="iconfont.css">

src/App.vue

@@ -142,7 +142,6 @@ onMounted(async () => {
 
         // 根据 recoverConfig 完成现场回复
         recoverSession(VcdInfo.topModules);
-        console.log(VcdInfo.topModules);
     });
 });
 

src/api/index.js

@@ -17,8 +17,8 @@ export async function saveView(file, payload) {
     }
     if (mode === 'debug') {
         const res = await axios.post('http://localhost:3000/save-view', { file, payload });
+        // const res = await axios.get('http://localhost:3000');
         console.log(res);
-        
     } else {
         vscode.postMessage({
             command: 'save-view',
@@ -27,4 +27,4 @@ export async function saveView(file, payload) {
     }
 }
 
-export const saveViewApi = debounceWrapper(saveView, 2000);
+export const saveViewApi = debounceWrapper(saveView, 1000);

src/components/toolbar/signal-modal.vue

@@ -41,7 +41,9 @@
 
 
 <script setup>
+import { saveViewApi } from '@/api';
 import { globalLookup } from '@/hook/global';
+import { makeSaveViewPayload } from '@/hook/recover';
 import { sidebarSelectedWires } from '@/hook/sidebar-select-wire';
 import { defineComponent, nextTick, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
@@ -67,6 +69,12 @@ function onSignalModalUpdate() {
 
         // 重新渲染
         globalLookup.render();
+
+        // 保存
+        // TODO: 优化：只保存 waves
+        const savePath = globalLookup.originFile + '.view';
+        const payload = makeSaveViewPayload();    
+        saveViewApi(savePath, payload);
     }
 }
 

src/components/toolbar/signal-value-format.vue

@@ -24,7 +24,9 @@
 
 
 <script setup>
+import { saveViewApi } from '@/api';
 import { globalLookup } from '@/hook/global';
+import { makeSaveViewPayload } from '@/hook/recover';
 import { sidebarSelectedWires } from '@/hook/sidebar-select-wire';
 import { defineComponent, onMounted, reactive, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
@@ -106,6 +108,12 @@ function onChange() {
 
         // 重新渲染，不过只需要渲染数值即可
         globalLookup.render({ type: 'value' });
+        
+        // 保存
+        // TODO: 优化：只保存 waves
+        const savePath = globalLookup.originFile + '.view';
+        const payload = makeSaveViewPayload();    
+        saveViewApi(savePath, payload);
     }
 }
 

src/hook/recover.js

@@ -9,6 +9,9 @@ export const recoverConfig = {
      * @type {Map<string, IRenderOption>} 其中的 string 是形如 `cpu.alu.add1` 这样的字符串
      */
     waves: new Map(),
+    /**
+     * @type {WaveRenderSidebarItem[] | undefined}
+     */
     views: undefined
 };
 
@@ -19,10 +22,10 @@ async function findRecoverFile(recoverJsonPath) {
             return undefined;
         }
         const recoverBuffer = await response.arrayBuffer();
-        const buffer = Buffer.from(recoverBuffer);
+        const recoverJson = BSON.deserialize(recoverBuffer);        
-        const recoverJson = BSON.deserialize(buffer);
         return recoverJson;
     } catch (error) {
+        console.log('[findRecoverFile] error: ' + error);
         return undefined;
     }
 }
@@ -33,8 +36,6 @@ async function findRecoverFile(recoverJsonPath) {
  */
 export async function recoverFromInputFile(inputFile) {
     globalLookup.originFile = inputFile;    
-    console.log(inputFile);
-    
     const recoverJsonPath = inputFile + '.view';
     const recoverJson = await findRecoverFile(recoverJsonPath);
     if (recoverJson) {
@@ -49,6 +50,11 @@ export async function recoverFromInputFile(inputFile) {
                 recoverConfig.waves.set(name, option);
             }
         }
+
+        const views = recoverJson.views;
+        if (views instanceof Array && views.length > 0) {
+            recoverConfig.views = recoverJson.views;
+        }
     }
 }
 
@@ -84,6 +90,36 @@ export function recoverSession(topModules) {
         }
     }
 
+    // 如果存在 views
+    if (recoverConfig.views !== undefined) {
+        const renderViews = globalLookup.currentWiresRenderView;
+        renderViews.length = 0;
+        for (const view of recoverConfig.views) {
+            // 恢复 names -> link
+            const signalNames = view.signalInfo.link;
+            if (signalNames.includes('.')) {
+                const signal = names2wire(topModules, signalNames);
+                view.signalInfo.link = signal.link;
+            }
+
+            const parentLink = view.signalInfo.parentLink;
+            if (parentLink && parentLink.endsWith('-group')) {
+                const parentNames = parentLink.slice(0, -6);
+                const parentSignal = names2wire(topModules, parentNames);
+                view.signalInfo.parentLink = parentSignal.link + '-group';
+            }
+
+            for (const child of view.children) {
+                const signalNames = child.signalInfo.link;
+                if (signalNames.includes('.')) {
+                    child.signalInfo.link = names2wire(topModules, signalNames).link;
+                }
+            }
+
+            renderViews.push(view);
+        }
+    }
+
     globalLookup.render();
 }
 
@@ -166,6 +202,7 @@ export function makeSaveViewPayload() {
     for (const wire of globalLookup.currentWires) {
         const option = globalLookup.currentSignalRenderOptions.get(wire.link) || {};        
         const name = link2names(wire.link);
+        option.highlight = 0;
         waves.push({ name, option });
     }
     for (const view of globalLookup.currentWiresRenderView) {

vue.config.js

@@ -14,5 +14,9 @@ module.exports = defineConfig({
     publicPath: './',
     configureWebpack: {
         devtool: false,
+    },
+    devServer: {
+        hot: false,
+        liveReload: false
     }
 })