save

src/components/sidebar/index.vue

@@ -5,12 +5,10 @@
                 <div :style="timeScaleStyle"></div>
                 <VueDraggable
                     v-model="globalLookup.currentWires"
+                    group="vcd-render-item"
                     :animation="150"
                     ghost-class="signal-drag-ghost"
                 >
-                    <!-- <div v-for="item in testList" :key="item.id">
-                        {{ item.name }}
-                    </div> -->
                     <div
                         class="display-signal-item-container"
                         :style="sideBarItemStyle"
@@ -56,6 +54,7 @@
                             </div></el-tooltip>
                         </div>
                     </div>
+                    
                 </VueDraggable>
             </div>
         </div>
@@ -77,23 +76,6 @@ import { makeIconClass } from '@/hook/utils';
 const { t } = useI18n();
 defineComponent({ name: 'side-bar' });
 
-const testList = ref([
-  {
-    name: 'Joao',
-    id: 1
-  },
-  {
-    name: 'Jean',
-    id: 2
-  },
-  {
-    name: 'Johanna',
-    id: 3
-  },
-  {
-    name: 'Juan',
-    id: 4
-  }]);
 
 const showWidth = computed(() => globalSetting.displaySignalInfoScope.includes('width'));
 const showParent = computed(() => globalSetting.displaySignalInfoScope.includes('parent'));

src/hook/global.js

@@ -2,20 +2,38 @@ import mitt from 'mitt';
 import { reactive } from 'vue';
 import WebGL2WaveRender from './wave-view/render-wave';
 
-const emitter = mitt();
+export const emitter = mitt();
 
-// 用于记载全局的一些对象，以便在不同组件中比较 ID
+
-const globalLookup = reactive({
+/**
+ * @description 用于记载全局的一些对象，以便在不同组件中比较 ID
+ * 
+ */
+export const globalLookup = reactive({
     // 所有的顶层文件
     topModules: [],
     // 当前选中的 信号，也就是 tree-view 左列的，默认是第一个。不可复选。
     currentModule: undefined,
-    // 当前选中的某个 信号 的 数据。可复选。
+
+    /**
+     * @description 当前被选中的波形，用于进行高效的增删改查
+     * @type {Set<WaveRenderItem>}
+     */
     currentWires: new Set(),
 
+    /**
+     * @description 当前被选中的波形，用于 sidebar 的渲染视图
+     * 详细请见设计文档：https://nc-ai-lab.feishu.cn/wiki/Fy3ZwtbYbiatmxkhOp2cyHSFnlw
+     * @type {WaveRenderSidebarItem[]}
+     */
+    currentWiresRenderView: [],
+
+    /**
+     * @description 用于存储当前时间点的波形的值，Key 为 波形的 link，值为 当前左侧渲染的值，没有就是 x
+     * @type {Record<string, BigInt | string>}
+     */
     currentSignalValues: {},
     
-
     // 当前 ns 数（或者 ps）
     currentTime: 0,
 
@@ -35,7 +53,11 @@ const globalLookup = reactive({
 
     // 优化视图的最大公约数
     tgcd: null,
-    // 其实就是 signalValues
+    
+    /**
+     * @description 就是 signalValues
+     * @type {Record<string, ChangoItem>}
+     */
     chango: {},
     
     // 初始化时会被定义
@@ -45,16 +67,6 @@ const globalLookup = reactive({
 
     xScale: 1,
 
-    // // 当前视图的左上角的坐标
-    // view : {
-    //     x: 0,
-    //     y: 0,
-    //     gridGap: 300,
-    //     currentBaseUnit: 100,
-    //     currentX: 0,
-    //     currentScaleX: 1
-    // },    
-
     initcurrentModule(module) {
         if (this.currentModule === undefined && module) {
             this.currentModule = module;
@@ -75,7 +87,7 @@ const globalLookup = reactive({
     }
 });
 
-const globalStyle = reactive({
+export const globalStyle = reactive({
     timeScaleHeight: 30,
     sideBarPadding: 10,
     sideBarItemMargin: 5,
@@ -83,7 +95,7 @@ const globalStyle = reactive({
     yOffset: 0,
 });
 
-const globalSetting = reactive({
+export const globalSetting = reactive({
     language: 'zh',
     caseSensitivity: false,
     displayParentOnly: false,
@@ -109,7 +121,7 @@ function loadSetting() {
     }
 }
 
-const storedSetting = loadSetting();
+export const storedSetting = loadSetting();
 if (storedSetting) {
     for (const key of Reflect.ownKeys(storedSetting)) {
         const value = storedSetting[key];
@@ -120,9 +132,11 @@ if (storedSetting) {
 }
 
 
-export {
+/**
-    emitter,
+ * 
-    globalLookup,
+ * @returns {WaveRenderSidebarItem[]}
-    globalSetting,
+ */
-    globalStyle
+function getCurrentWiresRenderView() {
-};
+    return globalLookup.currentWiresRenderView;
+}
+

src/hook/render.js

@@ -91,13 +91,9 @@ function makeWaveView(parentElement) {
 
 
 /**
- * @param {{
+ * @description 用于点击波形后触发的逻辑，如果波形已经在列表中，则去除，否则，加入
-* kind: 'var' | 'scope',
+ * NOTE：该函数需要同时操作所有的波形容器视图
-* type: 'wire' | 'reg' | 'module',
+ * @param {WireItem} signal
-* name: string,
-* size: number,
-* link: string
-* }} signal
 */
 function toggleRender(signal) {
     if (globalLookup.currentWires.has(signal)) {
@@ -107,7 +103,6 @@ function toggleRender(signal) {
     } else {
         globalLookup.currentWires.add(signal);
         const signalItem = globalLookup.chango[signal.link];
-        // console.log(signalItem, signal.link);
 
         const { wave, kind } = signalItem;
         const time = globalLookup.currentTime;

src/hook/utils.js

@@ -120,7 +120,7 @@ function makeSearchResultItem(searchString, module, searchScope, caseSensitivity
  * @param {'bit' | 'vec'} kind
  * @param {BigInt} value 
  * @param {BigInt} mask 
- * @returns {number | string}
+ * @returns {BigInt | string}
  */
 function getWireValueCaption(kind, value, mask) {
     if (kind === 'bit') {
@@ -139,7 +139,23 @@ function getWireValueCaption(kind, value, mask) {
             return 'x';
         }
     }
+}
 
+/**
+ * 
+ * @param {changoItem} changoItem 
+ * @param {number} time 
+ * @returns {BigInt | string}
+ */
+function getSmartCurrentSignalValue(changoItem, time) {
+    const { wave, kind } = signalItem;
+    if (wave === undefined || wave.length === 0) {
+        return 'x';        
+    } else if (wave.length === 1) {
+        return getWireValueCaption(kind, wave[0][1], wave[0][2]);
+    } else {
+        return findCurrentSignalValue(kind, wave, time);   
+    }
 }
 
 async function updateWireCurrentValue() {
@@ -148,18 +164,8 @@ async function updateWireCurrentValue() {
     const currentSignalValues = globalLookup.currentSignalValues;
 
     for (const signal of globalLookup.currentWires) {
-        const signalItem = chango[signal.link];
+        const changoItem = chango[signal.link];
-        const { wave, kind } = signalItem;
+        currentSignalValues[signal.link] = getSmartCurrentSignalValue(changoItem, time);
-        // console.log(signalItem);
-        if (wave === undefined || wave.length === 0) {
-            currentSignalValues[signal.link] = 'x';        
-        } else if (wave.length === 1) {
-            currentSignalValues[signal.link] = getWireValueCaption(kind, wave[0][1], wave[0][2]);
-        } else {
-            currentSignalValues[signal.link] = findCurrentSignalValue(kind, wave, time);   
-        }
-
-        // console.log(signal.name, currentSignalValues[signal.link]);
     }
 }
 
@@ -272,5 +278,7 @@ export {
     updateWireCurrentValue,
     predefinedColors,
     webglColor2rgba,
-    rgba2WebglColor
+    rgba2WebglColor,
+    getWireValueCaption,
+    getSmartCurrentSignalValue
 };

src/hook/wave-container-view.js

@@ -0,0 +1,52 @@
+/**
+ * 用于维护所有的 波形容器视图
+ * 设计参考文档：https://nc-ai-lab.feishu.cn/wiki/Fy3ZwtbYbiatmxkhOp2cyHSFnlw
+ */
+
+import { globalLookup } from "./global";
+import { getSmartCurrentSignalValue } from "./utils";
+
+
+/**
+ * @namespace WaveContainerView
+ */
+export const WaveContainerView = {
+    /**
+     * 
+     * @param {WireItem} signal 
+     */
+    add(signal) {
+        // 增加高效 CRUD 视图
+        globalLookup.currentWires.add(signal);
+
+        // 增加 sidebar 渲染视图
+        // TODO : 支持更加复杂的视图加入
+        globalLookup.currentWiresRenderView.push({
+            signal,
+            renderType: 0,
+            children: []
+        });
+
+        // 增加当前波形值视图
+        const changoItem = globalLookup.chango[signal.link];
+        globalLookup.currentSignalValues[signal.link] = getSmartCurrentSignalValue(changoItem, time);
+    },
+
+    /**
+     * 
+     * @param {WireItem} signal 
+     */
+    delete(signal) {
+        globalLookup.currentWires.delete(signal);
+        delete globalLookup.currentSignalValues[signal.link];
+    },
+
+    /**
+     * 
+     * @param {WireItem} signal 
+     * @returns {boolean}
+     */
+    has(signal) {
+        return globalLookup.currentWires.has(signal);
+    }
+};

src/types/jsdoc.js

@@ -20,6 +20,15 @@
  * @typedef {Record<string, ChangoItem>} Chango
  */
 
+
+/**
+ * @description
+ * @typedef {object} WaveRenderSidebarItem
+ * @property {WireItem} signal
+ * @property {0 | 1} renderType 0 代表单条波形，1 代表 分组
+ * @property {WireItem[]} children 分组内的波形，只有当 renderType 为 1 时才不为空数组
+ */
+
 /**
  * @description 
  * @typedef {Object} WireItem