save

package.json

@@ -15,17 +15,15 @@
     "onml": "^2.1.0",
     "stream": "^0.0.2",
     "vue": "^3.2.13",
+    "vue-draggable-plus": "^0.5.2",
     "vue-i18n": "^9.9.1",
     "w3c-keyname": "^2.2.8",
     "waveql": "^1.8.0"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",
-    "@babel/eslint-parser": "^7.12.16",
     "@vue/cli-plugin-babel": "~5.0.0",
-    "@vue/cli-plugin-eslint": "~5.0.0",
     "@vue/cli-service": "~5.0.0",
-    "eslint-plugin-vue": "^8.0.3",
     "ignore-loader": "^0.1.2",
     "unplugin-auto-import": "^0.17.5",
     "unplugin-vue-components": "^0.26.0"

src/App.vue

@@ -24,7 +24,7 @@ import { emitter, globalLookup, globalSetting } from '@/hook/global';
 import { makeWaveView } from '@/hook/render';
 import { getCrossOriginWorkerURL } from '@/hook/network';
 
-import Sidebar from '@/components/sidebar.vue';
+import Sidebar from '@/components/sidebar';
 import RightNav from '@/components/right-nav.vue';
 import MainRender from '@/components/render';
 

src/components/sidebar/index.vue

@@ -3,12 +3,25 @@
         <div class="display-signal-wrapper" :style="sideBarWrapperStyle">
             <div class="display-signal-container" :style="sidedBarContainerStyle">
                 <div :style="timeScaleStyle"></div>
-                <div class="display-signal-item"
+                <VueDraggable
+                    v-model="globalLookup.currentWires"
+                    :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"
-                    v-for="(signal, index) in globalLookup.currentWires" :key="index">
+                        v-for="(signal, index) in globalLookup.currentWires"
+                        :key="signal.link"
+                    >
+                        <div class="display-signal-item">
                             <div class="signal-color-vendor">
                                 <span :class="makeSignalIconClass(signal)"></span>
                             </div>
+                            
                             <div class="signal-info">
                                 <div class="signal-info">
                                     <el-tooltip
@@ -29,6 +42,8 @@
                                         </div> 
                                     </div>
                                 </div>            
+                            </div>   
+                        </div>
                         <div class="signal-info-current-value-wrapper">
                             <span></span>
                             <el-tooltip
@@ -40,10 +55,8 @@
                                 {{ globalLookup.currentSignalValues[signal.link] }}
                             </div></el-tooltip>
                         </div>
-
-        
-                    </div>       
                     </div>
+                </VueDraggable>
             </div>
         </div>
         <div class="add-signal-button" @click="addSignal">
@@ -53,14 +66,35 @@
 </template>
 
 <script setup>
-import { reactive, computed, defineComponent } from 'vue';
+import { reactive, computed, defineComponent, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { VueDraggable } from 'vue-draggable-plus';
+
 import { emitter, globalLookup, globalSetting, globalStyle } from '@/hook/global';
 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'));
 
@@ -118,6 +152,7 @@ function makeFullSignalNameDeps(signal) {
     return htmlString;
 }
 
+
 </script>
 
 <style>
@@ -146,7 +181,7 @@ function makeFullSignalNameDeps(signal) {
 .display-signal-wrapper {
     background-color: var(--sidebar);
     border: solid 1px var(--sidebar-border);
-    min-width: var(--sidebar-width);
+    width: var(--sidebar-width);
     height: calc(100vh - 90px);
     box-shadow: 0 0 15px 1px rgb(16, 16, 16);
     overflow: hidden;
@@ -157,9 +192,16 @@ function makeFullSignalNameDeps(signal) {
     background-color: var(--background);
     height: var(--display-signal-info-height);
     display: flex;
+    width: 200px;
     cursor: pointer;
 }
 
+.display-signal-item-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
 .display-signal-item::selection {
     background-color: none;
 }
@@ -210,18 +252,22 @@ function makeFullSignalNameDeps(signal) {
 
 .signal-info-caption {
     width: fit-content;
-    color: var(--sidebar-item-text);
+    color: var(--background);
     border-radius: .5em;
     background-color: #7CA532;
-    padding: 5px;
+    padding: 3px;
-    font-size: 16px;
+    font-size: 0.8rem;
 }
 
 .signal-info-current-value-wrapper {
     margin-left: 10px;
-    width: 60px;
+    width: 50px;
+    border-radius: .5em;
+    background-color: var(--background);
+    height: var(--display-signal-info-height);
     display: flex;
-    justify-content: space-around;
+    justify-content: center;
+    align-items: center;
 }
 
 .signal-info-current-value {
@@ -248,4 +294,8 @@ function makeFullSignalNameDeps(signal) {
     text-overflow: ellipsis;
 }
 
+.signal-drag-ghost {
+  opacity: 0.5;
+  background: #c8ebfb;
+}
 </style>

src/components/toolbar/index.vue

@@ -0,0 +1,29 @@
+<template>
+    <div class="toolbar-container">
+        <div class="toolbar-body">
+            <div>
+
+            </div>
+            
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style>
+.toolbar-container {
+    position: fixed;
+    bottom: 10px;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.toolbar-body {
+
+}
+</style>

src/components/treeview/index.vue

@@ -5,7 +5,7 @@
     <br>
     <div class="vcd-module-wrapper">
         <div class="vcd-module-info">
-            <div>{{ t('module') }}</div>
+            <div class="vcd-signal-title">{{ t('module') }}</div>
             <hr>
             <div class="vcd-module-display-wrapper">
                 <Modules v-for="mod of props.topModules"
@@ -60,7 +60,7 @@ export default {
 }
 
 .vcd-module-wires {
-    width: 300px;
+    width: 220px;
 }
 
 .vcd-module-display-wrapper {

src/components/treeview/signals.vue

@@ -7,7 +7,7 @@
                 @click="toggleRender(signal)"
                 class="vcd-signal-signal-item"
                 :class="globalLookup.currentWires.has(signal) ? 'vcd-treeview-selected' : ''">
-                <div><span :class="`iconfont ${makeIconClass(signal)}`"></span>&ensp;{{ signal.name }}</div>
+                <div class="vcd-signal-signal-item-text"><span :class="`iconfont ${makeIconClass(signal)}`"></span>&ensp;{{ signal.name }}</div>
                 <div>
                     <div :class="signal.size > 1 ? 'vcd-signal-signal-caption' : ''">
                         {{ makeSignalCaption(signal) }}
@@ -127,4 +127,17 @@ export default {
     padding: 3px;
     font-size: 12px;
 }
+
+.vcd-signal-signal-item-text {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 200px;
+}
+
+.vcd-signal-signal-item-text:hover {
+    overflow: unset;
+    text-overflow: unset;
+}
+
 </style>

src/hook/global.js

@@ -15,6 +15,7 @@ const globalLookup = reactive({
 
     currentSignalValues: {},
     
+
     // 当前 ns 数（或者 ps）
     currentTime: 0,
 
@@ -86,7 +87,7 @@ const globalSetting = reactive({
     language: 'zh',
     caseSensitivity: false,
     displayParentOnly: false,
-    displaySignalHeight: 50,
+    displaySignalHeight: 30,
     searchMode: 'so',        // so, mo, sm
     searchScope: ['wire', 'reg', 'integer'],
     displaySignalInfoScope: ['width'],

src/hook/wave-view/render-utils.js

@@ -63,7 +63,7 @@ const gl_Shifts = new Float32Array([ // 14
 
 // 为了满足 vec 类型的波形的开头和结尾的那个小小的内嵌的、不受scale影响的值
 // 第一列 Y 第二列 X 在所有计算完成后的额外偏移量
-const barShift = 0.005;
+const barShift = 0.004;
 
 const gl_Shifts_for_bar = new Float32Array([
     0,  0,          // 0
@@ -81,7 +81,7 @@ gl_Shifts_map.set(0, 0);
 gl_Shifts_map.set(1, 1);
 
 const lineWidth = 0.004 * 3800 / screenWidthPixel;            // 不能写为 0.0045 这样会因为插值造成不同线段的宽度不一致的问题
-const widthShift = lineWidth / 2;
+const widthShift = 0.002;
 const gl_WidthShifts = new Float32Array([
     0, widthShift,                  // 0
     - widthShift, widthShift,       // 1

src/hook/wave-view/x-offset-update.js

@@ -8,9 +8,12 @@ const xOffsetUpdate = (pstate, nextOffsetXFn) => {
     const minOffsetX = - width - xScale * time * 1.2;              // minimum offset
     nextOffsetX = Math.max(nextOffsetX, minOffsetX);
 
-    // console.log('max offset', maxOffsetX);
+    // 检测 0 是否超出了左侧的 --sidebar-width 的位置
-    // console.log('min offset', minOffsetX);
+    // 参考公式 xx = Math.round((xCursor - xOffset) / xScale) * tgcd; 带入 xx = 0
-    // console.log('next offset', nextOffsetX);
+
+    if (nextOffsetX >= sidebarWidth) {
+        nextOffsetX = sidebarWidth - 20;
+    }
     
     if (nextOffsetX === xOffset) {
         return false;                       // exit without scroll