save
This commit is contained in:
parent
f200110407
commit
8598ba0a78
@ -92,7 +92,7 @@ a {
|
||||
color: var(--main-color);
|
||||
}
|
||||
|
||||
.wd-container {
|
||||
.vcd-container {
|
||||
--right-panel-width: 0px;
|
||||
width: calc(100% - var(--right-panel-width));
|
||||
transition: width .3s ease-out;
|
||||
@ -103,17 +103,17 @@ a {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.wd-grid {
|
||||
.vcd-vline {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.wd-view {
|
||||
.vcd-view {
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
bottom: 24px;
|
||||
}
|
||||
|
||||
.wd-values {
|
||||
.vcd-values {
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
bottom: 24px;
|
||||
@ -127,12 +127,12 @@ a {
|
||||
transition: width .3s ease-out;
|
||||
}
|
||||
|
||||
.wd-cursor {
|
||||
.vcd-cursor {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.wd-values text {
|
||||
.vcd-values text {
|
||||
font-size: 14px;
|
||||
text-anchor: middle;
|
||||
fill: #fff;
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
<div
|
||||
class="vcd-render-wrapper"
|
||||
>
|
||||
<div style="height: var(--time-scale-height);"></div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
<template>
|
||||
<div class="tree-view-search-wrapper">
|
||||
<div
|
||||
class="tree-view-search-wrapper"
|
||||
>
|
||||
<div>
|
||||
<el-input
|
||||
:placeholder="t('search-signal')"
|
||||
@ -11,8 +13,11 @@
|
||||
@blur="searchManage.displayResult = false"
|
||||
/>
|
||||
</div>
|
||||
<div class="search-result-wrapper" v-if="searchManage.displayResult">
|
||||
<div class="search-result">
|
||||
<div class="search-result-wrapper" v-if="searchManage.displayResult | searchManage.mouseOnResult">
|
||||
<div class="search-result"
|
||||
@mouseenter="searchManage.mouseOnResult = true"
|
||||
@mouseleave="searchManage.mouseOnResult = false"
|
||||
>
|
||||
<div v-if="searchManage.searchResult.length > 0">
|
||||
<div v-for="(searchResult, index) in searchManage.searchResult"
|
||||
:key="index"
|
||||
@ -46,6 +51,7 @@ export default {
|
||||
const searchManage = reactive({
|
||||
content: '',
|
||||
displayResult: false,
|
||||
mouseOnResult: false,
|
||||
searchResult: []
|
||||
});
|
||||
|
||||
|
||||
@ -276,7 +276,7 @@ function makeWaveView(parentElement) {
|
||||
|
||||
globalLookup.hasHistory = true;
|
||||
globalLookup.isRO = true;
|
||||
globalLookup.updater = ( /* str */ ) => {
|
||||
globalLookup.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('wheel', genOnWheel(parentElement, container.pstate, globalLookup, cm, keyBindo));
|
||||
// console.log(cm);
|
||||
cm.view.focus();
|
||||
// cm.view.focus();
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -71,30 +71,64 @@ 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 sidebarWidth = 256;
|
||||
|
||||
const fontHeight = 16;
|
||||
|
||||
const elo = mTree.createElemento(obj.elemento);
|
||||
const container = mTree.createContainer(elo, obj.layers);
|
||||
elo.container.tabIndex = '0';
|
||||
if (obj.pluginRightPanel) {
|
||||
obj.pluginRightPanel(elo);
|
||||
}
|
||||
|
||||
const pstate = {
|
||||
fontHeight,
|
||||
width: 1024, // [px] window width
|
||||
height: 1024, // [px] window height
|
||||
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
|
||||
yOffset: 0, // [px]
|
||||
yStep: fontHeight * 1.5, // = 24 // [px] wave lane height
|
||||
yDuty: 0.7,
|
||||
sidebarWidth,
|
||||
container
|
||||
@ -155,10 +189,8 @@ const domContainer = (obj) => {
|
||||
deso.render();
|
||||
});
|
||||
|
||||
console.log(elo.container);
|
||||
resizeObserver.observe(document.body);
|
||||
|
||||
// pinchAndZoom(els.container, content, pstate, render);
|
||||
resizeHandler(elo.container.clientWidth, elo.container.clientHeight);
|
||||
mouseMoveHandler(elo.cursor, elo.container, pstate, deso.render);
|
||||
deso.render();
|
||||
|
||||
@ -33,10 +33,10 @@ const cTilts = new Float32Array([ // 14
|
||||
-1, 1 // 6
|
||||
]);
|
||||
|
||||
const shaderer = (kind, src) => gl => {
|
||||
const vShader = gl.createShader(gl[kind]);
|
||||
gl.shaderSource(vShader, src);
|
||||
gl.compileShader(vShader);
|
||||
const shaderer = (kind, src) => webgl2 => {
|
||||
const vShader = webgl2.createShader(webgl2[kind]);
|
||||
webgl2.shaderSource(vShader, src);
|
||||
webgl2.compileShader(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, {
|
||||
[name]: gl.getUniformLocation(program, name)
|
||||
}), {
|
||||
pos: gl.getAttribLocation(program, 'pos'),
|
||||
gl
|
||||
});
|
||||
};
|
||||
/**
|
||||
*
|
||||
* @param {WebGL2RenderingContext} webgl2
|
||||
* @returns {{
|
||||
* colors: WebGLUniformLocation,
|
||||
* tilts: WebGLUniformLocation,
|
||||
* 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 = [
|
||||
(f, t, a, b, c0, c1) => [].concat( // 0
|
||||
@ -136,15 +153,15 @@ const brick = [
|
||||
)
|
||||
];
|
||||
|
||||
const wave2vertex = desc => {
|
||||
Object.keys(desc.chango).map(ref => {
|
||||
const wave2vertex = globalLookup => {
|
||||
Object.keys(globalLookup.chango).map(ref => {
|
||||
|
||||
const chang = desc.chango[ref];
|
||||
const chang = globalLookup.chango[ref];
|
||||
const { kind, wave } = chang;
|
||||
|
||||
// desc.view.map(lane => {
|
||||
// globalLookup.view.map(lane => {
|
||||
// if (!lane || lane.ref === undefined) { return; }
|
||||
// const chang = desc.chango[lane.ref];
|
||||
// const chang = globalLookup.chango[lane.ref];
|
||||
// if (chang === undefined) { return; }
|
||||
// const {kind, wave} = chang;
|
||||
// lane.kind = kind;
|
||||
@ -157,7 +174,7 @@ const wave2vertex = desc => {
|
||||
const f = wave[(i === 0) ? 0 : (i - 1)];
|
||||
const [tim, val] = wave[i];
|
||||
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) {
|
||||
case 0: case 1: // 0 1
|
||||
@ -199,7 +216,7 @@ const wave2vertex = desc => {
|
||||
// const f = wave[(i === 0) ? 0 : (i - 1)];
|
||||
const [tim, val, msk] = wave[i];
|
||||
// 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 (msk) {
|
||||
@ -231,74 +248,64 @@ const wave2vertex = desc => {
|
||||
});
|
||||
};
|
||||
|
||||
const initData = (loco, desc) => {
|
||||
|
||||
Object.keys(desc.chango).map(ref => {
|
||||
|
||||
const chang = desc.chango[ref];
|
||||
const { vertices } = chang;
|
||||
|
||||
// desc.view.map(lane => {
|
||||
// if (!lane) {
|
||||
// return;
|
||||
// }
|
||||
// const vertices = desc.chango[lane.ref].vertices;
|
||||
//
|
||||
// if (!vertices) {
|
||||
// return;
|
||||
// }
|
||||
|
||||
// if (!lane || lane.vertices === undefined) {
|
||||
// return;
|
||||
// }
|
||||
// const vertices = lane.vertices;
|
||||
|
||||
const gl = loco.gl;
|
||||
const vertexBuffer = gl.createBuffer();
|
||||
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {{
|
||||
* colors: WebGLUniformLocation,
|
||||
* tilts: WebGLUniformLocation,
|
||||
* scale: WebGLUniformLocation,
|
||||
* offset: WebGLUniformLocation,
|
||||
* tilt: WebGLUniformLocation,
|
||||
* pos: number,
|
||||
* webgl2: WebGL2RenderingContext
|
||||
* }} webglLocation
|
||||
* @param {{
|
||||
* chango: Record<string, {
|
||||
* vertices: Uint32Array,
|
||||
* kind: string,
|
||||
* wave: Array<number | string>,
|
||||
* vao: WebGLVertexArrayObject
|
||||
* }>
|
||||
* }} globalLookup
|
||||
*/
|
||||
function initData(webglLocation, globalLookup) {
|
||||
for (const id of Reflect.ownKeys(globalLookup.chango)) {
|
||||
const signalItem = globalLookup.chango[id];
|
||||
const vertices = signalItem.vertices;
|
||||
|
||||
const webgl2 = webglLocation.webgl2;
|
||||
const vertexBuffer = webgl2.createBuffer();
|
||||
webgl2.bindBuffer(webgl2.ARRAY_BUFFER, vertexBuffer);
|
||||
// 将初始化的顶点数据复制到 buffer 区域
|
||||
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
|
||||
webgl2.bufferData(webgl2.ARRAY_BUFFER, vertices, webgl2.STATIC_DRAW);
|
||||
|
||||
chang.vao = gl.createVertexArray();
|
||||
gl.bindVertexArray(chang.vao);
|
||||
gl.vertexAttribIPointer(
|
||||
loco.pos,
|
||||
3, // number of conponents (x, y, z)
|
||||
gl.UNSIGNED_INT, // UNSIGNED_SHORT, // 16bit
|
||||
0 /* stride */, 0 /* offset */
|
||||
);
|
||||
gl.enableVertexAttribArray(loco.pos);
|
||||
|
||||
gl.uniform4fv(loco.colors, cColors);
|
||||
gl.uniform2fv(loco.tilts, cTilts);
|
||||
});
|
||||
};
|
||||
signalItem.vao = webgl2.createVertexArray();
|
||||
webgl2.bindVertexArray(signalItem.vao);
|
||||
webgl2.vertexAttribIPointer(webglLocation.pos, 3, webgl2.UNSIGNED_INT, 0, 0);
|
||||
webgl2.enableVertexAttribArray(webglLocation.pos);
|
||||
webgl2.uniform4fv(webglLocation.colors, cColors);
|
||||
webgl2.uniform2fv(webglLocation.tilts, cTilts);
|
||||
}
|
||||
}
|
||||
|
||||
const genRenderWavesGL = (els) => {
|
||||
|
||||
const canvas = document.createElement('canvas');
|
||||
els.view0.replaceChildren(canvas);
|
||||
// canvas.width = 1024;
|
||||
// canvas.height = 1024;
|
||||
// canvas.style = 'background-color: #111;';
|
||||
const glProps = {
|
||||
els.view.replaceChildren(canvas);
|
||||
|
||||
const webgl2 = canvas.getContext('webgl2', {
|
||||
premultipliedAlpha: false,
|
||||
alpha: true,
|
||||
antialias: false,
|
||||
depth: false
|
||||
};
|
||||
const gl = canvas.getContext('webgl2', glProps);
|
||||
const loco = initProgram(gl);
|
||||
|
||||
return desc => {
|
||||
wave2vertex(desc);
|
||||
initData(loco, desc);
|
||||
});
|
||||
const webglLocation = initProgram(webgl2);
|
||||
|
||||
return globalLookup => {
|
||||
wave2vertex(globalLookup);
|
||||
initData(webglLocation, globalLookup);
|
||||
return (pstate, plugins) => {
|
||||
let aReq;
|
||||
return () => {
|
||||
console.log('[wave render] render');
|
||||
if (aReq !== undefined) {
|
||||
cancelAnimationFrame(aReq);
|
||||
}
|
||||
@ -310,11 +317,11 @@ const genRenderWavesGL = (els) => {
|
||||
canvas.height = cHeight;
|
||||
// const xs = pstate.scale;
|
||||
// const xo = -1;
|
||||
gl.uniform1f(loco.tilt, 3 / width);
|
||||
gl.uniform2f(loco.scale, 2 * xScale / width, yStep * yDuty / cHeight); // FIXME 40
|
||||
gl.viewport(0, 0, width, cHeight);
|
||||
gl.clear(gl.COLOR_BUFFER_BIT);
|
||||
desc.view.map((lane, idx) => {
|
||||
webgl2.uniform1f(webglLocation.tilt, 3 / width);
|
||||
webgl2.uniform2f(webglLocation.scale, 2 * xScale / width, yStep * yDuty / cHeight); // FIXME 40
|
||||
webgl2.viewport(0, 0, width, cHeight);
|
||||
webgl2.clear(webgl2.COLOR_BUFFER_BIT);
|
||||
globalLookup.view.map((lane, idx) => {
|
||||
// console.log(lane, idx);
|
||||
if (!lane) { // || lane.vertices === undefined) {
|
||||
return;
|
||||
@ -323,23 +330,23 @@ const genRenderWavesGL = (els) => {
|
||||
if (ref === undefined) {
|
||||
return;
|
||||
}
|
||||
const chang = desc.chango[ref];
|
||||
const chang = globalLookup.chango[ref];
|
||||
if (chang === undefined) {
|
||||
return;
|
||||
}
|
||||
// console.log(chang);
|
||||
gl.bindVertexArray(chang.vao);
|
||||
gl.uniform2f(loco.offset,
|
||||
webgl2.bindVertexArray(chang.vao);
|
||||
webgl2.uniform2f(webglLocation.offset,
|
||||
(2 * xOffset / width) - 1,
|
||||
(2 * yOffset - 2 * yStep * (idx + .7)) / cHeight + 1
|
||||
);
|
||||
gl.drawArrays(
|
||||
gl.LINE_STRIP, // mode
|
||||
webgl2.drawArrays(
|
||||
webgl2.LINE_STRIP, // mode
|
||||
0, // first
|
||||
chang.vertices.length / 3 // count
|
||||
);
|
||||
});
|
||||
plugins.map(fn => fn(desc, pstate, els));
|
||||
plugins.map(fn => fn(globalLookup, pstate, els));
|
||||
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;
|
||||
|
||||
/* eslint-env browser */
|
||||
|
||||
@ -1,16 +1,16 @@
|
||||
'use strict';
|
||||
|
||||
const defaultElemento = {
|
||||
container: ['div', { class: 'wd-container', id: 'wd-container' }],
|
||||
grid: ['div', { class: 'wd-grid', id: 'wd-grid' }],
|
||||
view0: ['div', { class: 'wd-view', id: 'wd-view' }],
|
||||
values: ['div', { class: 'wd-values', id: 'wd-values' }],
|
||||
cursor: ['div', { class: 'wd-cursor', id: 'wd-cursor' }],
|
||||
container: ['div', { class: 'vcd-container', id: 'vcd-container' }],
|
||||
grid: ['div', { class: 'vcd-vline', id: 'vcd-vline' }],
|
||||
view: ['div', { class: 'vcd-view', id: 'vcd-view' }],
|
||||
values: ['div', { class: 'vcd-values', id: 'vcd-values' }],
|
||||
cursor: ['div', { class: 'vcd-cursor', id: 'vcd-cursor' }],
|
||||
};
|
||||
|
||||
const defaultLayers = [
|
||||
'grid',
|
||||
'view0',
|
||||
'view',
|
||||
'values',
|
||||
'cursor'
|
||||
];
|
||||
@ -33,6 +33,11 @@ const createElemento = elemento => {
|
||||
}, {});
|
||||
};
|
||||
|
||||
|
||||
function createElements() {
|
||||
|
||||
}
|
||||
|
||||
const createContainer = (els, layers) => {
|
||||
layers.map(layer => els.container.appendChild(els[layer]));
|
||||
return els.container;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user