kirigaya/digital-vcd-render
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

save

Browse Source
This commit is contained in:
锦恢 2024-03-24 17:05:15 +08:00
parent f200110407
commit 8598ba0a78
7 changed files with 186 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
public/vcd.css
View File

@ -92,7 +92,7 @@ a {
color: var(--main-color); color: var(--main-color);
} }
.wd-container { .vcd-container {
--right-panel-width: 0px; --right-panel-width: 0px;
width: calc(100% - var(--right-panel-width)); width: calc(100% - var(--right-panel-width));
transition: width .3s ease-out; transition: width .3s ease-out;
@ -103,17 +103,17 @@ a {
right: 0; right: 0;
} }
.wd-grid { .vcd-vline {
position: absolute; position: absolute;
} }
.wd-view { .vcd-view {
position: absolute; position: absolute;
top: 24px; top: 24px;
bottom: 24px; bottom: 24px;
} }
.wd-values { .vcd-values {
position: absolute; position: absolute;
top: 24px; top: 24px;
bottom: 24px; bottom: 24px;
@ -127,12 +127,12 @@ a {
transition: width .3s ease-out; transition: width .3s ease-out;
} }
.wd-cursor { .vcd-cursor {
position: absolute; position: absolute;
pointer-events: none; pointer-events: none;
} }
.wd-values text { .vcd-values text {
font-size: 14px; font-size: 14px;
text-anchor: middle; text-anchor: middle;
fill: #fff; fill: #fff;

2
src/components/render/index.vue
View File

@ -4,7 +4,7 @@
<div <div
class="vcd-render-wrapper" class="vcd-render-wrapper"
> >
<div style="height: var(--time-scale-height);"></div>
</div> </div>
</template> </template>

12
src/components/treeview/search.vue
View File

@ -1,5 +1,7 @@
<template> <template>
<div class="tree-view-search-wrapper"> <div
class="tree-view-search-wrapper"
>
<div> <div>
<el-input <el-input
:placeholder="t('search-signal')" :placeholder="t('search-signal')"
@ -11,8 +13,11 @@
@blur="searchManage.displayResult = false" @blur="searchManage.displayResult = false"
/> />
</div> </div>
<div class="search-result-wrapper" v-if="searchManage.displayResult"> <div class="search-result-wrapper" v-if="searchManage.displayResult | searchManage.mouseOnResult">
<div class="search-result"> <div class="search-result"
@mouseenter="searchManage.mouseOnResult = true"
@mouseleave="searchManage.mouseOnResult = false"
>
<div v-if="searchManage.searchResult.length > 0"> <div v-if="searchManage.searchResult.length > 0">
<div v-for="(searchResult, index) in searchManage.searchResult" <div v-for="(searchResult, index) in searchManage.searchResult"
:key="index" :key="index"
@ -46,6 +51,7 @@ export default {
const searchManage = reactive({ const searchManage = reactive({
content: '', content: '',
displayResult: false, displayResult: false,
mouseOnResult: false,
searchResult: [] searchResult: []
}); });

4
src/hook/render.js
View File

@ -276,7 +276,7 @@ function makeWaveView(parentElement) {
globalLookup.hasHistory = true; globalLookup.hasHistory = true;
globalLookup.isRO = true; globalLookup.isRO = true;
globalLookup.updater = ( /* str */ ) => { globalLookup.updater = () => {
console.log('updater'); console.log('updater');
}; };
@ -295,7 +295,7 @@ function makeWaveView(parentElement) {
container.elo.container.addEventListener('keydown', genKeyHandler.genKeyHandler(parentElement, container.pstate, globalLookup, cm, keyBindo)); container.elo.container.addEventListener('keydown', genKeyHandler.genKeyHandler(parentElement, container.pstate, globalLookup, cm, keyBindo));
container.elo.container.addEventListener('wheel', genOnWheel(parentElement, container.pstate, globalLookup, cm, keyBindo)); container.elo.container.addEventListener('wheel', genOnWheel(parentElement, container.pstate, globalLookup, cm, keyBindo));
// console.log(cm); // console.log(cm);
cm.view.focus(); // cm.view.focus();
} }

46
src/hook/wave-view/dom-container.js
View File

@ -71,18 +71,52 @@ const getFullView = desc => {
}; };
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 domContainer = (obj) => {
const sidebarWidth = 256; const sidebarWidth = 256;
const fontHeight = 16; const fontHeight = 16;
const elo = mTree.createElemento(obj.elemento); const elo = mTree.createElemento(obj.elemento);
const container = mTree.createContainer(elo, obj.layers); const container = mTree.createContainer(elo, obj.layers);
elo.container.tabIndex = '0'; elo.container.tabIndex = '0';
if (obj.pluginRightPanel) {
obj.pluginRightPanel(elo);
}
const pstate = { const pstate = {
fontHeight, fontHeight,
@ -155,10 +189,8 @@ const domContainer = (obj) => {
deso.render(); deso.render();
}); });
console.log(elo.container);
resizeObserver.observe(document.body); resizeObserver.observe(document.body);
// pinchAndZoom(els.container, content, pstate, render);
resizeHandler(elo.container.clientWidth, elo.container.clientHeight); resizeHandler(elo.container.clientWidth, elo.container.clientHeight);
mouseMoveHandler(elo.cursor, elo.container, pstate, deso.render); mouseMoveHandler(elo.cursor, elo.container, pstate, deso.render);
deso.render(); deso.render();

204
src/hook/wave-view/gen-render-waves-gl.js
View File

@ -33,10 +33,10 @@ const cTilts = new Float32Array([ // 14
-1, 1 // 6 -1, 1 // 6
]); ]);
const shaderer = (kind, src) => gl => { const shaderer = (kind, src) => webgl2 => {
const vShader = gl.createShader(gl[kind]); const vShader = webgl2.createShader(webgl2[kind]);
gl.shaderSource(vShader, src); webgl2.shaderSource(vShader, src);
gl.compileShader(vShader); webgl2.compileShader(vShader);
return vShader; return vShader;
}; };
@ -68,22 +68,39 @@ void main() {
} }
`); `);
const initProgram = gl => {
const program = gl.createProgram();
gl.attachShader(program, vertexShaderScalar(gl));
gl.attachShader(program, fragmentShader(gl));
gl.linkProgram(program);
gl.useProgram(program);
return 'colors tilts scale offset tilt' /**
.split(/\s+/) *
.reduce((res, name) => Object.assign(res, { * @param {WebGL2RenderingContext} webgl2
[name]: gl.getUniformLocation(program, name) * @returns {{
}), { * colors: WebGLUniformLocation,
pos: gl.getAttribLocation(program, 'pos'), * tilts: WebGLUniformLocation,
gl * scale: WebGLUniformLocation,
}); * offset: WebGLUniformLocation,
}; * tilt: WebGLUniformLocation,
* pos: number,
* webgl2: WebGL2RenderingContext
* }}
*/
function initProgram(webgl2) {
const program = webgl2.createProgram();
webgl2.attachShader(program, vertexShaderScalar(webgl2));
webgl2.attachShader(program, fragmentShader(webgl2));
webgl2.linkProgram(program);
webgl2.useProgram(program);
const webglLocation = {
colors: webgl2.getUniformLocation(program, 'colors'),
tilts: webgl2.getUniformLocation(program, 'tilts'),
scale: webgl2.getUniformLocation(program, 'scale'),
offset: webgl2.getUniformLocation(program, 'offset'),
tilt: webgl2.getUniformLocation(program, 'tilt'),
pos: webgl2.getAttribLocation(program, 'pos'),
webgl2
};
return webglLocation;
}
const bar = [ const bar = [
(f, t, a, b, c0, c1) => [].concat( // 0 (f, t, a, b, c0, c1) => [].concat( // 0
@ -136,15 +153,15 @@ const brick = [
) )
]; ];
const wave2vertex = desc => { const wave2vertex = globalLookup => {
Object.keys(desc.chango).map(ref => { Object.keys(globalLookup.chango).map(ref => {
const chang = desc.chango[ref]; const chang = globalLookup.chango[ref];
const { kind, wave } = chang; const { kind, wave } = chang;
// desc.view.map(lane => { // globalLookup.view.map(lane => {
// if (!lane || lane.ref === undefined) { return; } // if (!lane || lane.ref === undefined) { return; }
// const chang = desc.chango[lane.ref]; // const chang = globalLookup.chango[lane.ref];
// if (chang === undefined) { return; } // if (chang === undefined) { return; }
// const {kind, wave} = chang; // const {kind, wave} = chang;
// lane.kind = kind; // lane.kind = kind;
@ -157,7 +174,7 @@ const wave2vertex = desc => {
const f = wave[(i === 0) ? 0 : (i - 1)]; const f = wave[(i === 0) ? 0 : (i - 1)];
const [tim, val] = wave[i]; const [tim, val] = wave[i];
const t = wave[(i === (ilen - 1)) ? i : (i + 1)]; const t = wave[(i === (ilen - 1)) ? i : (i + 1)];
const tt = (i === (ilen - 1)) ? desc.time : wave[i + 1][0]; const tt = (i === (ilen - 1)) ? globalLookup.time : wave[i + 1][0];
switch (val) { switch (val) {
case 0: case 1: // 0 1 case 0: case 1: // 0 1
@ -199,7 +216,7 @@ const wave2vertex = desc => {
// const f = wave[(i === 0) ? 0 : (i - 1)]; // const f = wave[(i === 0) ? 0 : (i - 1)];
const [tim, val, msk] = wave[i]; const [tim, val, msk] = wave[i];
// const t = wave[(i === (ilen - 1)) ? i : (i + 1)]; // const t = wave[(i === (ilen - 1)) ? i : (i + 1)];
const tt = (i === (ilen - 1)) ? desc.time : wave[i + 1][0]; const tt = (i === (ilen - 1)) ? globalLookup.time : wave[i + 1][0];
if (val) { if (val) {
if (msk) { if (msk) {
@ -231,74 +248,64 @@ const wave2vertex = desc => {
}); });
}; };
const initData = (loco, desc) => { /**
*
Object.keys(desc.chango).map(ref => { * @param {{
* colors: WebGLUniformLocation,
const chang = desc.chango[ref]; * tilts: WebGLUniformLocation,
const { vertices } = chang; * scale: WebGLUniformLocation,
* offset: WebGLUniformLocation,
// desc.view.map(lane => { * tilt: WebGLUniformLocation,
// if (!lane) { * pos: number,
// return; * webgl2: WebGL2RenderingContext
// } * }} webglLocation
// const vertices = desc.chango[lane.ref].vertices; * @param {{
// * chango: Record<string, {
// if (!vertices) { * vertices: Uint32Array,
// return; * kind: string,
// } * wave: Array<number | string>,
* vao: WebGLVertexArrayObject
// if (!lane || lane.vertices === undefined) { * }>
// return; * }} globalLookup
// } */
// const vertices = lane.vertices; function initData(webglLocation, globalLookup) {
for (const id of Reflect.ownKeys(globalLookup.chango)) {
const gl = loco.gl; const signalItem = globalLookup.chango[id];
const vertexBuffer = gl.createBuffer(); const vertices = signalItem.vertices;
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
const webgl2 = webglLocation.webgl2;
const vertexBuffer = webgl2.createBuffer();
webgl2.bindBuffer(webgl2.ARRAY_BUFFER, vertexBuffer);
// 将初始化的顶点数据复制到 buffer 区域 // 将初始化的顶点数据复制到 buffer 区域
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); webgl2.bufferData(webgl2.ARRAY_BUFFER, vertices, webgl2.STATIC_DRAW);
chang.vao = gl.createVertexArray(); signalItem.vao = webgl2.createVertexArray();
gl.bindVertexArray(chang.vao); webgl2.bindVertexArray(signalItem.vao);
gl.vertexAttribIPointer( webgl2.vertexAttribIPointer(webglLocation.pos, 3, webgl2.UNSIGNED_INT, 0, 0);
loco.pos, webgl2.enableVertexAttribArray(webglLocation.pos);
3, // number of conponents (x, y, z) webgl2.uniform4fv(webglLocation.colors, cColors);
gl.UNSIGNED_INT, // UNSIGNED_SHORT, // 16bit webgl2.uniform2fv(webglLocation.tilts, cTilts);
0 /* stride */, 0 /* offset */ }
); }
gl.enableVertexAttribArray(loco.pos);
gl.uniform4fv(loco.colors, cColors);
gl.uniform2fv(loco.tilts, cTilts);
});
};
const genRenderWavesGL = (els) => { const genRenderWavesGL = (els) => {
const canvas = document.createElement('canvas'); const canvas = document.createElement('canvas');
els.view0.replaceChildren(canvas); els.view.replaceChildren(canvas);
// canvas.width = 1024;
// canvas.height = 1024; const webgl2 = canvas.getContext('webgl2', {
// canvas.style = 'background-color: #111;';
const glProps = {
premultipliedAlpha: false, premultipliedAlpha: false,
alpha: true, alpha: true,
antialias: false, antialias: false,
depth: false depth: false
}; });
const gl = canvas.getContext('webgl2', glProps); const webglLocation = initProgram(webgl2);
const loco = initProgram(gl);
return desc => {
wave2vertex(desc);
initData(loco, desc);
return globalLookup => {
wave2vertex(globalLookup);
initData(webglLocation, globalLookup);
return (pstate, plugins) => { return (pstate, plugins) => {
let aReq; let aReq;
return () => { return () => {
console.log('[wave render] render');
if (aReq !== undefined) { if (aReq !== undefined) {
cancelAnimationFrame(aReq); cancelAnimationFrame(aReq);
} }
@ -310,11 +317,11 @@ const genRenderWavesGL = (els) => {
canvas.height = cHeight; canvas.height = cHeight;
// const xs = pstate.scale; // const xs = pstate.scale;
// const xo = -1; // const xo = -1;
gl.uniform1f(loco.tilt, 3 / width); webgl2.uniform1f(webglLocation.tilt, 3 / width);
gl.uniform2f(loco.scale, 2 * xScale / width, yStep * yDuty / cHeight); // FIXME 40 webgl2.uniform2f(webglLocation.scale, 2 * xScale / width, yStep * yDuty / cHeight); // FIXME 40
gl.viewport(0, 0, width, cHeight); webgl2.viewport(0, 0, width, cHeight);
gl.clear(gl.COLOR_BUFFER_BIT); webgl2.clear(webgl2.COLOR_BUFFER_BIT);
desc.view.map((lane, idx) => { globalLookup.view.map((lane, idx) => {
// console.log(lane, idx); // console.log(lane, idx);
if (!lane) { // || lane.vertices === undefined) { if (!lane) { // || lane.vertices === undefined) {
return; return;
@ -323,23 +330,23 @@ const genRenderWavesGL = (els) => {
if (ref === undefined) { if (ref === undefined) {
return; return;
} }
const chang = desc.chango[ref]; const chang = globalLookup.chango[ref];
if (chang === undefined) { if (chang === undefined) {
return; return;
} }
// console.log(chang); // console.log(chang);
gl.bindVertexArray(chang.vao); webgl2.bindVertexArray(chang.vao);
gl.uniform2f(loco.offset, webgl2.uniform2f(webglLocation.offset,
(2 * xOffset / width) - 1, (2 * xOffset / width) - 1,
(2 * yOffset - 2 * yStep * (idx + .7)) / cHeight + 1 (2 * yOffset - 2 * yStep * (idx + .7)) / cHeight + 1
); );
gl.drawArrays( webgl2.drawArrays(
gl.LINE_STRIP, // mode webgl2.LINE_STRIP, // mode
0, // first 0, // first
chang.vertices.length / 3 // count chang.vertices.length / 3 // count
); );
}); });
plugins.map(fn => fn(desc, pstate, els)); plugins.map(fn => fn(globalLookup, pstate, els));
aReq = undefined; aReq = undefined;
}); });
}; };
@ -347,6 +354,21 @@ const genRenderWavesGL = (els) => {
}; };
}; };
class WebGL2WaveRender {
/**
*
* @param {{
* grid: HTMLDivElement,
* view: HTMLDivElement,
* values: HTMLDivElement
* }}} elements
*/
constructor(elements) {
const canvas = document.createElement('canvas');
}
}
module.exports = genRenderWavesGL; module.exports = genRenderWavesGL;
/* eslint-env browser */ /* eslint-env browser */

17
src/hook/wave-view/mount-tree.js
View File

@ -1,16 +1,16 @@
'use strict'; 'use strict';
const defaultElemento = { const defaultElemento = {
container: ['div', { class: 'wd-container', id: 'wd-container' }], container: ['div', { class: 'vcd-container', id: 'vcd-container' }],
grid: ['div', { class: 'wd-grid', id: 'wd-grid' }], grid: ['div', { class: 'vcd-vline', id: 'vcd-vline' }],
view0: ['div', { class: 'wd-view', id: 'wd-view' }], view: ['div', { class: 'vcd-view', id: 'vcd-view' }],
values: ['div', { class: 'wd-values', id: 'wd-values' }], values: ['div', { class: 'vcd-values', id: 'vcd-values' }],
cursor: ['div', { class: 'wd-cursor', id: 'wd-cursor' }], cursor: ['div', { class: 'vcd-cursor', id: 'vcd-cursor' }],
}; };
const defaultLayers = [ const defaultLayers = [
'grid', 'grid',
'view0', 'view',
'values', 'values',
'cursor' 'cursor'
]; ];
@ -33,6 +33,11 @@ const createElemento = elemento => {
}, {}); }, {});
}; };
function createElements() {
}
const createContainer = (els, layers) => { const createContainer = (els, layers) => {
layers.map(layer => els.container.appendChild(els[layer])); layers.map(layer => els.container.appendChild(els[layer]));
return els.container; return els.container;