finish sidebar

public/vcd.css

@@ -1,27 +1,16 @@
+:root {
+    --display-signal-info-height: 50px;
+    --signal-default-color: #4CAF50;
+    --main-color: #CB81DA;
+}
+
 html, body {
     background-color: var(--background);
     color: var(--foreground);
 }
 
-.vcd-sidebar {
+body::-webkit-scrollbar {
-    position: absolute;
+    width: 0;
-    top: 20px;
-    left: 0px;
-    background-color: var(--sidebar);
-    border: solid 1px var(--sidebar-border);
-    min-width: var(--sidebar-min-width);
-}
-
-.vcd-sidebar-item {
-    color: var(--sidebar-item-text);
-}
-
-.vcd-toolbar {
-
-}
-
-.vcd-render {
-
 }
 
 * hr {
@@ -70,7 +59,8 @@ html, body {
 .el-select-dropdown {
     min-width: 300px !important;
     background-color: var(--sidebar);
-    border: 1px solid var(--main-color);
+    border: 1.0px solid var(--main-color);
+    outline: none;
 }
 
 .el-checkbox-button__inner {

public/vscode.css

@@ -144,8 +144,6 @@
     --color-orange: #ffab40;
     --color-deepOrange: #ff6e40;
 
-    --main-color: #CB81DA;
-
     /* Settings */
     --settings-action-background: var(--background);
 }

src/App.vue

@@ -1,11 +1,8 @@
 <template>
     <div class="vcd-wrapper">
         <!-- 左上角的 sidebar，用于显示 -->
-        <div class="vcd-sidebar">
+        <Sidebar></Sidebar>
-            <div class="vcd-sidebar-item">hello</div>
+
-            <div class="vcd-sidebar-item">hello</div>
-            <div class="vcd-sidebar-item">hello</div>
-        </div>
         <!-- 工具栏 -->
         <div class="vcd-toolbar">
 
@@ -17,20 +14,21 @@
         <!-- 显示当前信号树形关系 -->
         <!-- 右侧工具合集 -->
         <RightNav :topModules="VcdInfo.topModules"></RightNav>
-
     </div>
 </template>
 
 <script>
 import { onMounted, reactive } from 'vue';
 import { getVcdStream, readVcdFile } from '@/hook/utils';
-import { emitter, globalLookup } from '@/hook/global';
+import { emitter, globalLookup, globalSetting } from '@/hook/global';
 
+import Sidebar from '@/components/sidebar.vue';
 import RightNav from '@/components/right-nav.vue';
 
 export default {
     components: {
-        RightNav
+        RightNav,
+        Sidebar
     },
     setup() {
 
@@ -50,6 +48,14 @@ export default {
             document.body.style.setProperty('--el-fill-color-blank', 'var(--sidebar)');
             document.body.style.setProperty('--el-fill-color-light', 'var(--vscode-button-hoverBackground)');
             document.body.style.setProperty('--el-switch-on-color', 'var(--main-color)');
+            document.body.style.setProperty('--el-border', 'var(--sidebar)');
+            document.body.style.setProperty('--el-border-color-light', 'var(--sidebar)');
+            document.body.style.setProperty('--el-border-color-lighter', 'var(--sidebar)');
+            document.body.style.setProperty('--el-bg-color-overlay', 'transplant');
+
+            
+            // signal height
+            document.body.style.setProperty('--display-signal-info-height', globalSetting.displaySignalHeight + 'px');
 
 
             const uint8array = await readVcdFile();
@@ -91,4 +97,5 @@ export default {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }
+
 </style>

src/components/right-nav.vue

@@ -34,6 +34,8 @@ import { reactive } from 'vue';
 import TreeView from '@/components/treeview';
 import Setting from '@/components/setting';
 import About from '@/components/about';
+import { emitter } from '@/hook/global';
+
 
 export default {
     name: 'right-nav',
@@ -71,6 +73,14 @@ export default {
             }
         });
 
+        emitter.on('right-nav', index => {
+            if (controlPanel.currentIndex === index) {
+                controlPanel.currentIndex = -1;
+            } else {
+                controlPanel.currentIndex = index;
+            }
+        })
+
         return {
             props,
             controlPanel
@@ -82,7 +92,7 @@ export default {
 <style>
 .vcd-right-nav {
     display: flex;
-    position: absolute;
+    position: fixed;
     top: 0;
     right: 0;
 }

src/components/setting/index.vue

@@ -3,10 +3,16 @@
         <div class="setting-section">
             <h2>{{ t('search-setting') }}</h2>
             <div class="setting-option">
-                <span class="option-title">{{ t('case-sensitivity') }}</span>
+                <span class="option-title">{{ t('search-case-sensitivity') }}</span>
-                <el-switch v-model="globalSetting.caseSensitivity" />
+                <el-switch v-model="globalSetting.caseSensitivity" size="large"/>
             </div>
 
+            <br>
+
+            <div class="setting-option">
+                <span class="option-title">{{ t('search-display-parent-only') }}</span>
+                <el-switch v-model="globalSetting.displayParentOnly" size="large"/>
+            </div>
 
             <br>
 
@@ -26,7 +32,6 @@
             <h2>{{ t('general-setting') }}</h2>
             <div class="setting-option" style="width: 300px;">
                 <span class="option-title">{{ t('language-setting') }}</span>
-                
                 <el-select name="language-setting" class="language-setting" v-model="locale">
                     <el-option
                         v-for="option in languageSetting.options"
@@ -36,7 +41,16 @@
                     </el-option>
                 </el-select>
             </div>
+        </div>
 
+        <hr>
+
+        <div class="setting-section">
+            <h2>{{ t('appearance-setting') }}</h2>
+            <div class="setting-option">
+                <span class="option-title">{{ t('display-wave-height') }}</span>
+                <el-input-number v-model="globalSetting.displaySignalHeight" :min="1" :max="100" @change="safeModifySignalTrackHeight" size="large"/>
+            </div>
         </div>
     </div>
 </template>
@@ -45,6 +59,7 @@
 import { reactive } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { globalSetting } from '@/hook/global';
+import { debounceWrapper } from '@/hook/utils';
 
 export default {
     name: 'dide-setting',
@@ -64,10 +79,18 @@ export default {
             ]
         });
 
+        function modifySignalTrackHeight() {
+            document.body.style.setProperty('--display-signal-info-height', globalSetting.displaySignalHeight + 'px');
+        }
+
+        const safeModifySignalTrackHeight = debounceWrapper(modifySignalTrackHeight, 200);
+
+
         return {
             t,
             languageSetting,
             globalSetting,
+            safeModifySignalTrackHeight,
             locale
         }
     }

src/components/sidebar.vue

@@ -0,0 +1,118 @@
+<template>
+    <div class="vcd-sidebar-wrapper">
+        <div class="display-signal-wrapper">
+            <div class="display-signal-item"
+                v-for="(signal, index) in globalLookup.currentWires" :key="index">
+                <div class="signal-color-vendor">
+                    <span class="iconfont icon-wave-square"></span>
+                </div>
+                <div class="signal-info">
+                    {{ signal.name }}
+                </div>
+                <div>
+
+                </div>
+            </div>
+        </div>
+        <div class="add-signal-button" @click="addSignal">
+            <span class="iconfont icon-Collections"></span>
+        </div>
+    </div>
+</template>
+
+<script>
+/* eslint-disable */
+import { reactive } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { emitter, globalLookup } from '@/hook/global';
+
+export default {
+    name: 'sidebar',
+    setup() {
+        const { t } = useI18n();
+
+        function addSignal() {
+            emitter.emit('right-nav', 0);
+        }
+
+        return {
+            t,
+            globalLookup,
+            addSignal
+        }
+    }
+}
+</script>
+
+<style>
+.vcd-sidebar-wrapper {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+}
+
+.add-signal-button {
+    margin: 10px;
+    padding: 10px 25px;
+    background-color: var(--color-deepPurple);
+    border-radius: 0 0 1.5em 1.5em;
+    color: var(--sidebar-item-text);
+    cursor: pointer;
+    display: flex;
+    justify-content: space-around;
+}
+
+.add-signal-button > span {
+    font-size: 30px;
+}
+
+.display-signal-wrapper {
+    margin: 10px;
+    padding: 10px;
+    background-color: var(--sidebar);
+    border: solid 1px var(--sidebar-border);
+    min-width: var(--sidebar-min-width);
+    min-height: 50vh;
+    box-shadow: 0 0 15px 1px rgb(16, 16, 16);
+}
+
+.display-signal-item {
+    border-radius: .5em;
+    background-color: var(--background);
+    margin: 5px;
+    height: var(--display-signal-info-height);
+    display: flex;
+}
+
+.display-signal-item::selection {
+    background-color: none;
+}
+
+.signal-color-vendor {
+    width: 30px;
+    height: 100%;
+    margin: 0 10px 0 0;
+    border-radius: .4em 0 0 .4em;
+    background-color: #7CA532;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+
+.signal-color-vendor > span {
+    font-size: 15px;
+    color: var(--background);
+}
+
+.signal-info {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+
+.signal-info::selection {
+    background: none;
+    cursor: none;
+}
+
+</style>

src/components/treeview/index.vue

@@ -71,12 +71,14 @@ export default {
     border-radius: 1.0em;
     display: flex;
     flex-direction: column;
+    transition: height .5s ease-in-out;
 }
 
 .vcd-module-wrapper {
     flex: 1;
     display: flex;
     overflow: scroll;
+    transition: flex .5s ease-in-out;
 }
 
 </style>

src/components/treeview/search.vue

@@ -53,13 +53,15 @@ export default {
             const stacks = [ { name: '', body: globalLookup.topModules } ];
             const searchRule = new Set(globalSetting.searchScope);
             const caseSensitivity = globalSetting.caseSensitivity;
+            const displayParentOnly = globalSetting.displayParentOnly;
+
             while (stacks.length > 0) {
                 const p = stacks.pop();
                 if (p.body && p.body.length) {
                     p.body.forEach(mod => stacks.push(mod));
                 }
 
-                const searchResultItem = makeSearchResultItem(searchString, p, searchRule, caseSensitivity);
+                const searchResultItem = makeSearchResultItem(searchString, p, searchRule, caseSensitivity, displayParentOnly);
                 if (searchResultItem) {
                     searchManage.searchResult.push(searchResultItem);
                 }
@@ -95,6 +97,7 @@ export default {
 .tree-view-search-wrapper {
     min-height: 30px;
     padding: 10px;
+    transition: flex .5s ease-in-out;
 }
 
 .search-result {

src/components/treeview/signals.vue

@@ -9,8 +9,8 @@
                 :class="globalLookup.currentWires.has(signal) ? 'vcd-treeview-selected' : ''">
                 <div><span class="iconfont icon-wave-square"></span>&ensp;{{ signal.name }}</div>
                 <div>
-                    <div :class="signal.caption ? 'vcd-signal-signal-caption' : ''">
+                    <div :class="signal.size > 1 ? 'vcd-signal-signal-caption' : ''">
-                        {{ signal.caption }}
+                        {{ makeSignalCaption(signal) }}
                     </div>
                 </div>
             </div>
@@ -38,14 +38,12 @@ export default {
 
         emitter.on('tree-view', sendWires => {
             signals.content.length = 0;
-            for (const signal of sendWires) {
+            signals.content = sendWires;
-                const caption = signal.size === 1 ? '' : `${signal.size - 1}:0`;
-                signals.content.push({
-                    name: signal.name,
-                    caption
         });
+
+        function makeSignalCaption(signal) {
+            return signal.size === 1 ? '' : `${signal.size - 1}:0`;
         }
-        });
 
         function clickItem(signal) {
             if (globalLookup.currentWires.has(signal)) {
@@ -59,6 +57,7 @@ export default {
             signals,
             clickItem,
             globalLookup,
+            makeSignalCaption,
             t
         }
     }
@@ -67,7 +66,7 @@ export default {
 
 <style>
 .icon-wave-square {
-    color: #00F600;
+    color: var(--signal-default-color);
 }
 
 .vcd-signal-signals-display {

src/hook/global.js

@@ -27,6 +27,8 @@ const globalLookup = reactive({
 
 const globalSetting = reactive({
     caseSensitivity: false,
+    displayParentOnly: false,
+    displaySignalHeight: 50,
     searchMode: 'so',        // so, mo, sm
     searchScope: ['wire', 'reg']
 })

src/hook/utils.js

@@ -51,9 +51,10 @@ function debounceWrapper(fn, delay) {
  * }} module 
  * @param { Set<string> } searchScope
  * @param { boolean } caseSensitivity
+ * @param { boolean } displayParentOnly
  * @returns { { htmlString: string, module } | null }
 */
-function makeSearchResultItem(searchString, module, searchScope, caseSensitivity) {
+function makeSearchResultItem(searchString, module, searchScope, caseSensitivity, displayParentOnly) {
     if (searchScope.has(module.type)) {
         let pattern = module.name;
         if (!caseSensitivity) {
@@ -62,13 +63,18 @@ function makeSearchResultItem(searchString, module, searchScope, caseSensitivity
         }
         if (pattern.includes(searchString)) {
             let p = module;
+
             const deps = [];
             while (p) {
                 if (p.name && p.type) {
                     deps.push(p);
                 }
                 p = p.parent;
+                if (displayParentOnly && deps.length == 2) {
+                    break;
                 }
+            }
+
             let htmlString = '';
             for (let i = deps.length - 1; i >= 0; -- i) {
                 const mod = deps[i];

src/i18n/en.json

@@ -3,15 +3,22 @@
     "signal": "Signals",
     "search-signal": "Search Signal",
     "language-setting": "Language",
+    
     "search-setting": "Search",
-    "case-sensitivity": "case sensitivity",
+    "search-case-sensitivity": "Case Sensitivity",
     "search-mode": "search mode",
-    "search-scope": "search scope",
+    "search-scope": "Search Scope",
+    "search-display-parent-only": "Display Parent Module Only",
+    "search-nothing": "Find Nothing",
+
     "signal-only": "Signal Only",
     "module-only": "Module Only",
     "signal-module": "Signal + Module",
     "general-setting": "General",
+
+    "appearance-setting": "Appearance",
+    "display-wave-height": "Height of Wave Track",
+
     "current-version": "current version",
-    "search-nothing": "find nothing",
     "copyright": "The copyright of this software belongs to <a href=\"https://github.com/Digital-EDA\" target=\"_blank\">Digital-IDE</a> project team. Welcome to <a href=\"https://github.com/Digital-EDA/Digital-IDE\">Star</a>."
 }

src/i18n/zh.json

@@ -3,15 +3,22 @@
     "signal": "信号",
     "search-signal": "搜索信号",
     "language-setting": "语言",
+    
     "search-setting": "搜索",
-    "case-sensitivity": "区分大小写",
+    "search-case-sensitivity": "区分大小写",
     "search-mode": "搜索模式",
     "search-scope": "搜索范围",
+    "search-display-parent-only": "只展示父模块",
+    "search-nothing": "没有找到任何符号",
+
     "signal-only": "信号",
     "module-only": "模块",
     "signal-module": "信号 + 模块",
     "general-setting": "通用",
+
+    "appearance-setting": "外观",
+    "display-wave-height": "波形轨道的高度",
+
     "current-version": "当前版本",
-    "search-nothing": "没有找到任何符号",
     "copyright": "本软件版权归 <a href=\"https://github.com/Digital-EDA\" target=\"_blank\">Digital-IDE</a> 项目组所有，欢迎 <a href=\"https://github.com/Digital-EDA/Digital-IDE\">Star</a>。"
 }