增加 sidebar + signal view tree 新功能：shift + 鼠标左击连续选择

src/components/sidebar/index.vue

@@ -23,7 +23,7 @@
                         <SignalItem
                             v-show="view.renderType === 0"
                             :view="view"
-                            @click.stop="handleItemClick(view.signalInfo.link)"
+                            @click.stop="handleItemClick($event, view.signalInfo.link)"
                             @contextmenu.prevent="handleContextmenu($event, view, index)"
                         />
 
@@ -76,6 +76,7 @@ import SignalItem from './signal-item.vue';
 import GroupItem from './group-item.vue';
 import GroupContextMenu from './group-context-menu.vue';
 import { sidebarSelectedWires } from '@/hook/sidebar-select-wire';
+import { genOrderedLinks } from '@/hook/wave-container-view';
 
 const { t } = useI18n();
 defineComponent({ name: 'side-bar' });
@@ -102,18 +103,37 @@ function addSignal() {
 }
 
 
-function handleItemClick(link) {
+function handleItemClick(event, link) {
     contextmenu.show = false;
     groupcontextmenu.show = false;
+    const lastLink = sidebarSelectedWires.lastLink;
 
-    if (sidebarSelectedWires.has(link)) {
-        sidebarSelectedWires.delete(link);
+    if (event.shiftKey && lastLink !== undefined) {
+        // 如果按下了 shift，那么把刚刚的 link 到现在之间所有的 link 全部加入
+        let addBegin = false;
+        const links = [];                
+        for (const currentLink of genOrderedLinks({returnGroup: false})) {
+            if (currentLink === link || currentLink === lastLink) {
+                links.push(currentLink);
+                addBegin = !addBegin;
+            } else if (addBegin) {
+                links.push(currentLink);
+            }
+        }
+        sidebarSelectedWires.addLinks(links);
     } else {
-        sidebarSelectedWires.add(link);
+        // 如果没有，则加入；有，则删除
+        if (sidebarSelectedWires.has(link)) {
+            sidebarSelectedWires.delete(link);
+        } else {
+            sidebarSelectedWires.add(link);
+        }
     }
 }
 
 
+
+
 function handleSidebarGlobalClick() {
     contextmenu.show = false;
     groupcontextmenu.show = false;

src/components/treeview/index.vue

@@ -70,6 +70,7 @@ export default {
     display: flex;
     flex-direction: column;
     transition: height .5s ease-in-out;
+    user-select: none;
 }
 
 .vcd-module-wrapper {

src/components/treeview/signals.vue

@@ -4,7 +4,7 @@
         <hr>
         <el-scrollbar height="86vh" class="vcd-signal-signals-display">
             <div v-for="(signal, index) in signals.content" :key="index"
-                @click="toggleRender(signal)"
+                @click="toggleRender($event, signal)"
                 class="vcd-signal-signal-item"
                 :class="globalLookup.currentWires.has(signal) ? 'vcd-treeview-selected' : ''"
             >
@@ -19,42 +19,73 @@
     </div>
 </template>
 
-<script>
-import { reactive } from 'vue';
+<script setup>
+import { defineComponent, reactive } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import { emitter, globalLookup } from '@/hook/global';
 import { makeIconClass } from '@/hook/utils';
-import { toggleRender } from '@/hook/render';
+import { WaveContainerView } from '@/hook/wave-container-view';
 
-/* eslint-disable */
-export default {
-    name: 'signals',
-    props: {},
-    setup() {
-        const { t } = useI18n();
+defineComponent({ name: 'signals' });
 
-        // signal : link, name, size, type
-        const signals = reactive({
-            content: []
-        });
+const { t } = useI18n();
 
-        emitter.on('tree-view', sendWires => {
-            signals.content = [];
-            signals.content = sendWires;
-        });
+// signal : link, name, size, type
+const signals = reactive({
+    /**
+     * @type {WireItem[]}
+     */
+    content: []
+});
 
-        function makeSignalCaption(signal) {
-            return signal.size === 1 ? '' : `${signal.size - 1}:0`;
+emitter.on('tree-view', sendWires => {
+    signals.content = sendWires;
+});
+
+function makeSignalCaption(signal) {
+    return signal.size === 1 ? '' : `${signal.size - 1}:0`;
+}
+
+const controller = {
+    lastSignal: undefined
+};
+
+/**
+ * @description 用于点击波形后触发的逻辑，如果波形已经在列表中，则去除，否则，加入
+ * NOTE：该函数需要同时操作所有的波形容器视图
+ * @param {MouseEvent} event
+ * @param {WireItem} signal
+*/
+function toggleRender(event, signal) {
+    const lastSignal = controller.lastSignal;
+    if (event.shiftKey && lastSignal !== undefined) {
+        const renderSignals = [];
+        let addBegin = false;
+        for (const currentSignal of signals.content) {
+            if (currentSignal === signal || lastSignal === currentSignal) {
+                renderSignals.push(currentSignal);
+                addBegin = !addBegin;
+            } else if (addBegin) {
+                renderSignals.push(currentSignal);
+            }
         }
 
-        return {
-            signals,
-            toggleRender,
-            globalLookup,
-            makeSignalCaption,
-            t,
-            makeIconClass
+        for (const renderSignal of renderSignals) {
+            WaveContainerView.add(renderSignal);
+            controller.lastSignal = renderSignal;
+        }
+        globalLookup.render();
+
+    } else {
+        if (WaveContainerView.has(signal)) {
+            WaveContainerView.delete(signal);
+            controller.lastSignal = undefined;
+            globalLookup.render();
+        } else {
+            WaveContainerView.add(signal);
+            controller.lastSignal = signal;
+            globalLookup.render();
         }
     }
 }

src/hook/sidebar-select-wire.js

@@ -31,6 +31,21 @@ export const sidebarSelectedWires = {
         this.togglePipe();
     },
 
+    /**
+     * @description 批量加入 link
+     * @param {string[]} links 
+     */
+    addLinks(links) {
+        for (const link of links) {
+            globalLookup.sidebarSelectedWireLinks.add(link);
+            globalLookup.setRenderOption(link, 'highlight', 1);
+            this.lastLink = link;
+        }
+
+        globalLookup.render({ type: 'wave-only' });
+        this.togglePipe();
+    },
+
     delete(link) {
         globalLookup.sidebarSelectedWireLinks.delete(link);
         if (this.lastLink === link) {

src/hook/wave-container-view.js

@@ -7,6 +7,11 @@ import { globalLookup } from "./global";
 import { getSmartCurrentSignalValue } from "./utils";
 
 
+/**
+ * @typedef {Object} ViewIterConfig
+ * @property {boolean} returnGroup
+ */
+
 /**
  * @namespace WaveContainerView
  */
@@ -114,4 +119,26 @@ function makeFullSignalNameDeps(signal) {
     }
     htmlString = '<div class="signal-info-tooltip-wrapper">' + htmlString + '</div>';
     return htmlString;
+}
+
+/**
+ * 
+ * @param {ViewIterConfig} iterConfig 
+ * @returns {Generator<string>}
+ */
+export function* genOrderedLinks(iterConfig) {
+    const iterGroup = (iterConfig || {}).iterGroup || false;
+    for (const view of globalLookup.currentWiresRenderView) {
+        if (view.renderType === 0) {
+            yield view.signalInfo.link;
+        } else {
+            if (iterGroup) {
+                // groupLink 都会以 -group 结尾
+                yield view.signalInfo.link;
+            }
+            for (const child of view.children) {
+                yield child.signalInfo.link;
+            }
+        }
+    }
 }