digital-vcd-render/src/hook/wave-view/dom-container.js

'use strict';

const genRenderWavesGL = require('./gen-render-waves-gl.js');
const renderCursor = require('./render-cursor.js');
const genResizeHandler = require('./gen-resize-handler.js');
const mTree = require('./mount-tree.js');

const setTime = (pstate, str) => {
    // const { sidebarOffset, time, timescale, tgcd, xOffset } = pstate;
    // pstate.xOffset = .5; // (2 * (pstate.width - pstate.sidebarWidth)) / pstate.time;
    const m = str.match(/(\d+)(\w+)/); if (m) {
        // const time1 = parseInt(m[1]);
        // const timescale1 = ({s: 0, ms: -3, us: -6, ns: -9, ps: -12, fs: -15})[m[2]] || 0;
        // pstate.xOffset = -1;
    }
};

const mouseMoveHandler = (cursor, content, pstate /* , render */) => {
    const xmargin = 160;
    const fontHeight = 20;
    const fontWidth = fontHeight / 2;
    const handler = event => {
        const x = pstate.xCursor = event.clientX;
        cursor.style.left = (x - xmargin) + 'px';
        cursor.innerHTML = renderCursor({ xmargin, fontWidth, fontHeight }, pstate);
    };
    handler({ clientX: pstate.width / 2 });
    content.addEventListener('mousemove', handler);
};


const getFullView = desc => {
    console.log(desc);
    if (desc.waveql) {
        return;
    }

    const arr = [];

    const rec = ero => {
        if (ero.kind === 'scope') {
            arr.push(ero.name);
            ero.body.map(rec);
            arr.push('..');
            return;
        }
        if (ero.kind === 'var') {
            arr.push(ero.name);
            return;
        }
        console.error(ero);
        throw new Error();
        // Object.keys(obj).map(name => {
        //   const ref = obj[name];
        //   if (typeof ref === 'object') {
        //     arr.push(name);
        //     rec(ref);
        //     arr.push('..');
        //     return;
        //   }
        //   if (typeof ref !== 'string') {
        //     throw new Error();
        //   }
        //   arr.push(name);
        // });
    };

    rec(desc.wires);

    desc.waveql = arr.join('\n');
};


class DomContainer {
    /**
     * @param {{
     * sidebarWidth: number,
     * fontHeight: number,
     * xScaleMax: number,
     * xScaleMin: number
     * }} renderConfig
     * @param {Array} renderPlugins 
     */
    constructor(renderConfig, renderPlugins) {
        renderConfig = renderConfig || {};
        const sidebarWidth = renderConfig.sidebarWidth || 256;
        const fontHeight = renderConfig.fontHeight || 16;
        const xScaleMax = renderConfig.xScaleMax || 1000;
        const xScaleMin = renderConfig.xScaleMin || 0.001;
        this.elementInfos = {
            container: { tag: 'div', class: 'vcd-container',    id: 'vcd-container' },    // 外部的 wrapper
            grid:      { tag: 'div', class: 'vcd-vline',        id: 'vcd-vline' },        // 和时间点对应的竖线
            view:      { tag: 'div', class: 'vcd-view',         id: 'vcd-view' },         // 用于渲染主要波形
            values:    { tag: 'div', class: 'vcd-values',       id: 'vcd-values' },       // 展示每关键点的值
            cursor:    { tag: 'div', class: 'vcd-cursor',       id: 'vcd-cursor' }        // 随着光标移动的竖线
        }

    }

    /**
     * @description 创建用于展示波形的基本元素和组件
     */
    createElements() {
        const elementInfos = this.elementInfos;
        for (const elName of Reflect.ownKeys(elementInfos)) {
            const elementInfo = elementInfos[elName];
            
        }
    }
}


const domContainer = (obj) => {
    const sidebarWidth = 256;
    const fontHeight = 16;

    const elo = mTree.createElemento(obj.elemento);
    const container = mTree.createContainer(elo, obj.layers);
    elo.container.tabIndex = '0';

    const pstate = {
        fontHeight,
        width: 1024,                    // [px] window width
        height: 1024,                   // [px] window height
        xScaleMax: 1000,
        xScaleMin: 0.001,
        topBarHeight: fontHeight * 1.5, // [px]
        botBarHeight: fontHeight * 1.5, // [px]
        xOffset: sidebarWidth,
        yOffset: 0,                     // [px]
        yStep: fontHeight * 1.5,        // = 24 // [px] wave lane height
        yDuty: 0.7,
        sidebarWidth,
        container
    };

    return {
        elo,
        pstate,
        start: (deso /* , opt */) => {

            // content.appendChild(container);
            // content.appendChild(elo.rightPanel);
            //   getFullView(deso);

            deso.t0 = deso.t0 || 0;
            // desc.xScale |= 8;

            Object.assign(pstate, {
                tgcd: deso.tgcd,
                timescale: deso.timescale,
                xScale: deso.xScale || 8,
                numLanes: deso.view.length,
                t0: deso.t0,
                time: deso.time
            });

            try {
                const str = localStorage.getItem('dide');
                const obj = JSON.parse(str);
                Object.assign(pstate, obj);
            } catch (err) {
                console.error(err);
            }

            // const {timetopSVG, timebotSVG} = timeline(deso);

            if (deso.timeOpt) {
                setTime(pstate, deso.timeOpt.value);
            }

            let render2 = genRenderWavesGL(elo);
            let render1 = render2(deso);
            let render = render1(pstate, obj.renderPlugins);
            deso.render = render;

            const resizeHandler = genResizeHandler(pstate);

            const resizeObserver = new ResizeObserver(entries => {

                for (let entry of entries) {
                    // TODO : 使用更新的属性替换 contentRect
                    // 未来版本 contentRect 可能会被丢弃
                    let { width, height } = entry.contentRect;
                    // height = height || 888;
                    // console.log('resizeObserver', width, height);
                    resizeHandler(width, height);
                }
                deso.render();
            });

            resizeObserver.observe(document.body);

            resizeHandler(elo.container.clientWidth, elo.container.clientHeight);
            mouseMoveHandler(elo.cursor, elo.container, pstate, deso.render);
            deso.render();
        }
    };
};

module.exports = domContainer;

/* eslint-env browser */