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

<template>
    <!-- <VerticalCursor></VerticalCursor> -->
    <!-- <TimeScale></TimeScale> -->
    <div
        class="vcd-render-wrapper"
        id="vcd-render-wrapper"
        @mousedown="onMousedown()"
        @mouseup="onMouseup()"
        @mouseenter="onEnter()"
        @mouseleave="onLeave()"
        :ref="el => pivotWrapper = el"
    >
        <Pivot
            v-show="SystemPivot.show"
            :color="SystemPivot.color"
            :label="SystemPivot.label"
            :x="SystemPivot.left"
        />

        <PivotView />
        <transition name="main-fade">
            <MovingPivotVue
                v-show="MovingPivot.show"
            />
        </transition>

        <RelativeAxis></RelativeAxis>
        
    </div>
</template>

<script setup>
import { defineComponent, onMounted, ref } from 'vue';
import { updateWireCurrentValue } from '@/hook/utils';
import { changeCursorLocation, SystemPivot, MovingPivot, mousemoveEventPipes } from './cursor';
import { eventHandler, registerWheelEvent } from '@/hook/wave-view';

import PivotView from './pivot-view.vue';
import Pivot from '@/components/pivot/system-pivot.vue';
import { globalLookup } from '@/hook/global';
import MovingPivotVue from './moving-pivot.vue';
import { UserPivotCtxShows } from './pivot-view';
import RelativeAxis from './relative-axis.vue';


defineComponent({ name: 'main-render' });

/**
 * @description 渲染区域被鼠标点击时
 */
function onMousedown() {
    updateWireCurrentValue();
    changeCursorLocation();

    console.log('enter');
    
    // 关闭所有
    for (const id of UserPivotCtxShows.keys()) {
        UserPivotCtxShows.set(id, false);
    }
}

function onMouseup() {

}

function onEnter() {
    MovingPivot.show = true;
    MovingPivot.currentTakenPivot = undefined;
}

function onLeave() {
    MovingPivot.show = false;
}

const pivotWrapper = ref(null);

onMounted(() => {
    const pivotContainer = pivotWrapper.value;
    if (pivotContainer instanceof HTMLElement) {
        pivotContainer.addEventListener('wheel',
            registerWheelEvent(null, globalLookup.pstate, globalLookup, eventHandler)
        );

        pivotContainer.addEventListener('mousemove', event => {
            for (const pipeId of mousemoveEventPipes.keys()) {
                const fn = mousemoveEventPipes.get(pipeId);
                fn(event);
            }
        });
    }
});

</script>

<style>
.vcd-render-wrapper {
    user-select: none;
    height: 98vh;
    width: 98vw;
    cursor: crosshair;
    padding: 10px;
    transition: .3s ease-out;
}

.vcd-container {
    --right-panel-width: 0px;
    width: calc(100% - var(--right-panel-width));
    transition: width .3s ease-out;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    transform: translateY(var(--toolbar-height));
}

.vcd-vline {
    position: absolute;
    transition: var(--animation-5s);
}

.vcd-view {
    position: absolute;
    top: var(--vcd-render-padding);
    bottom: var(--vcd-render-padding);
}

.vcd-hidden {
    opacity: 0;
    transition: var(--animation-5s);
}

.vcd-values {
    position: absolute;
    top: var(--vcd-render-padding);
    bottom: var(--vcd-render-padding);
    transition: var(--animation-5s);
}

.wd-waveql {
    position: absolute;
    top: var(--vcd-render-padding);
    bottom: var(--vcd-render-padding);
    width: 100%;
    transition: width .3s ease-out;
}

.vcd-cursor {
    position: absolute;
    pointer-events: none;
    z-index: 80;
}

.vcd-values text {
    font-size: 14px;
    font-family: var(--vcd-value-font-family);
    text-anchor: middle;
    fill: #fff;
}


line.wd-cursor-line {
    stroke-dasharray: 12 4;
    stroke: var(--main-color);
    stroke-width: 1px;
}

line.wd-grid-time {
    stroke: #333;
    stroke-width: 1px;
}

line.gap {
    stroke: #fff;
    stroke-dasharray: 4 3;
}

text.wd-grid-time {
    text-anchor: middle;
    fill: var(--sidebar-item-text);
}


text.wd-cursor-time {
    font-size: 20px;
    fill: var(--sidebar);
    text-anchor: middle;
    z-index: 55;
}

rect.wd-cursor-time {
    fill: var(--main-color);
}


.wd-progress {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

text.common {
    fill: var(--sidebar-item-text);
}

text.high-impedance {
    fill: hsl(0, 100%, 50%);
}

text.unknown {
    fill: hsl(287, 100%, 67%);
}

text.pc {
    text-anchor: start;
}

tspan.pc-addr {
    fill: hsl(202 100% 71%);
}

</style>