digital-vcd-render/src/components/sidebar/index.vue

<template>
    <div class="vcd-sidebar-wrapper">
        <div class="display-signal-wrapper" :style="sideBarWrapperStyle">
            <div class="display-signal-container" :style="sidedBarContainerStyle">
                <div :style="timeScaleStyle"></div>
                <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="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
                                        effect="dark"
                                        :content="makeFullSignalNameDeps(signal)"
                                        placement="top"
                                        raw-content
                                    >
                                        <div class="signal-info-name">
                                            <span class="signal-parent-info" v-show="showParent">{{ signal.parent.name }}</span>
                                            <span>{{ signal.name }}</span>
                                        </div>
                                    </el-tooltip>

                                    <div class="signal-info-width" v-show="showWidth">
                                        <div :class="signal.size > 1 ? 'signal-info-caption' : ''">
                                            {{ makeSignalCaption(signal) }}
                                        </div> 
                                    </div>
                                </div>            
                            </div>   
                        </div>
                        <div class="signal-info-current-value-wrapper">
                            <span></span>
                            <el-tooltip
                                effect="dark"
                                :content="globalLookup.currentSignalValues[signal.link] + ''"
                                placement="top"
                                raw-content
                            ><div class="signal-info-current-value">
                                {{ globalLookup.currentSignalValues[signal.link] }}
                            </div></el-tooltip>
                        </div>
                    </div>
                </VueDraggable>
            </div>
        </div>
        <div class="add-signal-button" @click="addSignal">
            <span class="iconfont icon-collections"></span>
        </div>
    </div>
</template>

<script setup>
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'));

const timeScaleStyle = computed(() => ({
    height: `${globalStyle.timeScaleHeight}px`
}));

const sideBarWrapperStyle = computed(() => ({
    padding: `${globalStyle.sideBarPadding}px`
}));

const sidedBarContainerStyle = computed(() => ({
    transform: `translateY(${- globalStyle.yOffset}px)`,
    transition: globalSetting.renderAnimation ? 'var(--animation-3s)' : 'unset'
}));

const sideBarItemStyle = computed(() => ({
    margin: `${globalStyle.sideBarItemMargin}px`
}));

function addSignal() {
    emitter.emit('right-nav', 0);
}

function makeSignalIconClass(signal) {
    return 'iconfont ' + makeIconClass(signal);
}

function makeSignalCaption(signal) {
    return signal.size === 1 ? '' : `${signal.size - 1}:0`;
}

function makeFullSignalNameDeps(signal) {
    const deps = [];
    while (signal) {
        if (signal.name && signal.type) {
            deps.push(signal);
        }
        signal = signal.parent;
    }
    let htmlString = '';
    for (let i = deps.length - 1; i >= 0; -- i) {
        const mod = deps[i];
        // const displayName = mod.name.length > 6 ? mod.name.substring(0, 6) + '...' : mod.name;
        const iconClass = makeIconClass(mod);
        const iconText = `<span class="iconfont ${iconClass}"></span>&ensp;${mod.name}`;
        
        htmlString += iconText;

        if (i > 0) {
            htmlString += '<div class="dep-arrow"></div>';
        }
    }
    htmlString = '<div class="signal-info-tooltip-wrapper">' + htmlString + '</div>';
    return htmlString;
}


</script>

<style>
.vcd-sidebar-wrapper {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 60;
}

.add-signal-button {
    margin-top: 10px;
    padding: 10px 25px;
    background-color: var(--main-color);
    border-radius: 0 0 .8em .8em;
    color: var(--sidebar);
    cursor: pointer;
    display: flex;
    justify-content: space-around;
}

.add-signal-button > span {
    font-size: 30px;
}

.display-signal-wrapper {
    background-color: var(--sidebar);
    border: solid 1px var(--sidebar-border);
    width: var(--sidebar-width);
    height: calc(100vh - 90px);
    box-shadow: 0 0 15px 1px rgb(16, 16, 16);
    overflow: hidden;
}

.display-signal-item {
    border-radius: .5em;
    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;
}

.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 {
    width: 90%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
}

.signal-info-name {
    cursor: pointer;
    max-width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    flex-direction: column;
}

.signal-info-tooltip-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.signal-info-width {
    margin-left: 10px;
}

.signal-info-caption {
    width: fit-content;
    color: var(--background);
    border-radius: .5em;
    background-color: #7CA532;
    padding: 3px;
    font-size: 0.8rem;
}

.signal-info-current-value-wrapper {
    margin-left: 10px;
    width: 50px;
    border-radius: .5em;
    background-color: var(--background);
    height: var(--display-signal-info-height);
    display: flex;
    justify-content: center;
    align-items: center;
}

.signal-info-current-value {
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.signal-info::selection {
    background: none;
    cursor: none;
}

.signal-parent-info {
    font-size: .8rem;
    border-radius: .5em;
    padding: 2px 5px;
    color: var(--sidebar);
    background-color: var(--main-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.signal-drag-ghost {
  opacity: 0.5;
  background: #c8ebfb;
}
</style>