{
+ 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();
}
diff --git a/src/hook/wave-view/dom-container.js b/src/hook/wave-view/dom-container.js
index b3e98c3..a29836e 100644
--- a/src/hook/wave-view/dom-container.js
+++ b/src/hook/wave-view/dom-container.js
@@ -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();
diff --git a/src/hook/wave-view/gen-render-waves-gl.js b/src/hook/wave-view/gen-render-waves-gl.js
index 341588b..701ef98 100644
--- a/src/hook/wave-view/gen-render-waves-gl.js
+++ b/src/hook/wave-view/gen-render-waves-gl.js
@@ -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,
+ * 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 */
diff --git a/src/hook/wave-view/mount-tree.js b/src/hook/wave-view/mount-tree.js
index fa9cc9f..e6832e7 100644
--- a/src/hook/wave-view/mount-tree.js
+++ b/src/hook/wave-view/mount-tree.js
@@ -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;