diff --git a/src/ui/gldraw/glrect.js b/src/ui/gldraw/glrect.js index 5d2b1917b..3879afb9f 100644 --- a/src/ui/gldraw/glrect.js +++ b/src/ui/gldraw/glrect.js @@ -233,7 +233,7 @@ export default class GlRect extends Events this.#parent = p; p.addChild(this); this.#visible = p.visible; - this.setPosition(this.#x, this.#y, this.#z); + this.updateParentPosition(); } get texture() diff --git a/src/ui/gltimeline/gltimeline.js b/src/ui/gltimeline/gltimeline.js index 6b3a7828c..ee6c91adb 100644 --- a/src/ui/gltimeline/gltimeline.js +++ b/src/ui/gltimeline/gltimeline.js @@ -1,4 +1,4 @@ -import { Events } from "cables-shared-client"; +import { Events, Logger } from "cables-shared-client"; import GlTextWriter from "../gldraw/gltextwriter.js"; import GlRectInstancer from "../gldraw/glrectinstancer.js"; import glTlAnim from "./gltlanim.js"; @@ -16,23 +16,38 @@ import glTlScroll from "./gltlscroll.js"; export default class GlTimeline extends Events { + /** @type {GlTextWriter} */ + texts = null; + + /** @type {GlRectInstancer} */ + rects = null; + + /** @type {glTlRuler} */ + ruler = null; + + /** @type {glTlScroll} */ + scroll = null; + /** @type {Array} */ #tlAnims = []; + #zoom = 20; + #canvasMouseDown = false; + #paused = false; + #cgl = null; + #isAnimated = false; + /** * @param {CABLES.CGState} cgl - */ + */ constructor(cgl) { super(); - this._zoom = 20; - this.isAnimated = false; - this.paused = false; - this.cgl = cgl; - - /** - * @type {GlTextWriter} - */ + + this._log = new Logger("gltimeline"); + + this.#cgl = cgl; + this.texts = new GlTextWriter(cgl, { "name": "mainText", "initNum": 1000 }); this.rects = new GlRectInstancer(cgl, { "name": "gltl rects", "allowDragging": true }); @@ -41,7 +56,6 @@ export default class GlTimeline extends Events this.scroll = new glTlScroll(this); - this._canvasMouseDown = false; this.init(); gui.on("opSelectChange", () => @@ -53,6 +67,18 @@ export default class GlTimeline extends Events cgl.canvas.addEventListener("pointerup", this._onCanvasMouseUp.bind(this), { "passive": false }); cgl.canvas.addEventListener("pointerdown", this._onCanvasMouseDown.bind(this), { "passive": false }); cgl.canvas.addEventListener("wheel", this._onCanvasWheel.bind(this), { "passive": true }); + cgl.addEventListener("resize", this.resize.bind(this)); + } + + resize() + { + // console.log("resize....."); + + this.scroll.setWidth(this.#cgl.canvasWidth); + this.ruler.setWidth(this.#cgl.canvasWidth); + + for (let i = 0; i < this.#tlAnims.length; i++) this.#tlAnims[i].setWidth(this.#cgl.canvasWidth); + } _onCanvasMouseMove(e) @@ -76,7 +102,7 @@ export default class GlTimeline extends Events { if (!e.pointerType) return; - try { this._cgl.canvas.setPointerCapture(e.pointerId); } + try { this.#cgl.canvas.setPointerCapture(e.pointerId); } catch (er) { this._log.log(er); } this.emitEvent("mousedown", e); @@ -96,9 +122,9 @@ export default class GlTimeline extends Events if (event.deltaY > 0)delta = 1.1; else delta = 0.9; - this._zoom *= delta; - this._zoom = CABLES.clamp(this._zoom, 0.1, 10000000); - console.log("zoom", this._zoom, this.timeToPixel(1)); + this.#zoom *= delta; + this.#zoom = CABLES.clamp(this.#zoom, 0.1, 10000000); + console.log("zoom", this.#zoom, this.timeToPixel(1)); this.ruler.update(); this.scroll.update(); } @@ -110,7 +136,7 @@ export default class GlTimeline extends Events get width() { - return this.cgl.canvasWidth; + return this.#cgl.canvasWidth; } pixelToTime() @@ -120,7 +146,7 @@ export default class GlTimeline extends Events timeToPixel(t) { - return t * this._zoom * 12; + return t * this.#zoom * 12; } init() @@ -176,16 +202,20 @@ export default class GlTimeline extends Events } + /** + * @param {number} resX + * @param {number} resY + */ render(resX, resY) { - this.cgl.gl.clearColor(0.2, 0.2, 0.2, 1); - this.cgl.gl.clear(this.cgl.gl.COLOR_BUFFER_BIT | this.cgl.gl.DEPTH_BUFFER_BIT); + this.#cgl.gl.clearColor(0.2, 0.2, 0.2, 1); + this.#cgl.gl.clear(this.#cgl.gl.COLOR_BUFFER_BIT | this.#cgl.gl.DEPTH_BUFFER_BIT); - this.cgl.pushDepthTest(false); + this.#cgl.pushDepthTest(false); this.rects.render(resX, resY, -1, 1, resX / 2); this.texts.render(resX, resY, -1, 1, resX / 2); - this.cgl.popDepthTest(); + this.#cgl.popDepthTest(); } } diff --git a/src/ui/gltimeline/gltimelinecanvas.js b/src/ui/gltimeline/gltimelinecanvas.js index 2458e38a3..72518352f 100644 --- a/src/ui/gltimeline/gltimelinecanvas.js +++ b/src/ui/gltimeline/gltimelinecanvas.js @@ -26,7 +26,7 @@ export default class glTimelineCanvas extends GlCanvas this.patch.cgl.on("resize", () => { - console.log("resized,.,...", this.patch.cgl.canvasWidth, this.patch.cgl.canvasHeight); + // console.log("resized,.,...", this.patch.cgl.canvasWidth, this.patch.cgl.canvasHeight); }); this.glTimeline = new GlTimeline(this.cgl); diff --git a/src/ui/gltimeline/gltlanim.js b/src/ui/gltimeline/gltlanim.js index 26a798968..1dee30a33 100644 --- a/src/ui/gltimeline/gltlanim.js +++ b/src/ui/gltimeline/gltlanim.js @@ -16,9 +16,26 @@ export default class glTlAnim extends Events { #anim = null; #op = null; + + /** @type {GlRect} */ #glRectKeysBg = null; + + /** @type {GlRect} */ #glRectBg = null; + + /** @type {GlText} */ #glTitle = null; + + /** @type {GlTimeline} */ + #glTl = null; + + /** @type {glTlKeys} */ + #keys = null; + + /** @type {CABLES.Port} */ + #port = null; + + width = 222; height = 30; /** @@ -32,48 +49,28 @@ export default class glTlAnim extends Events super(); this.#anim = anim; + this.#glTl = glTl; - this._glTl = glTl; - - this.#glRectBg = this._glTl.rects.createRect({ "draggable": false }); + this.#glRectBg = this.#glTl.rects.createRect({ "draggable": false }); this.#glRectBg.setSize(150, this.height); - this.#glRectBg.setColor(0, 0, 0, 1); - - /** - * @type {GlRect} - */ - this.#glRectKeysBg = this._glTl.rects.createRect({ "draggable": false }); - this.#glRectKeysBg.setSize(1000, this.height); - this.#glRectKeysBg.setColor(0.2, 0.2, 0.9, 0); + this.#glRectBg.setColor(0, 0, 0); + + this.#glRectKeysBg = this.#glTl.rects.createRect({ "draggable": false }); + this.#glRectKeysBg.setSize(this.width, this.height - 1); this.#glRectKeysBg.setPosition(150, 0); + this.#glRectKeysBg.setColor(0.2, 0.2, 0.9); this.#glRectKeysBg.setParent(this.#glRectBg); - /** - * @type GlText - */ - this.#glTitle = new GlText(this._glTl.texts, op.name + " - " + port.name || "unknown anim"); + this.#glTitle = new GlText(this.#glTl.texts, op.name + " - " + port.name || "unknown anim"); this.#glTitle.setParentRect(this.#glRectBg); - /** - * @type glTlKeys - */ - this.keys = new glTlKeys(glTl, anim, this.#glRectKeysBg); + this.#keys = new glTlKeys(glTl, anim, this.#glRectKeysBg); this.#op = op; - this._port = port; - - /* - * op.on("uiParamPanel", () => - * { - * if (gui.patchView.isCurrentOp(this.op)) - * { - * this.#glTitle.setColor(1, 0, 0, 1); - * } - * }); - */ + this.#port = port; anim.on("onChange", () => { - this.keys.init(); + this.#keys.init(); }); this.updateColor(); @@ -87,7 +84,7 @@ export default class glTlAnim extends Events updateColor() { this.#glTitle.setColor(1, 1, 1, 1); - this.#glRectKeysBg.setColor(0.3, 0.3, 0.3, 0); + this.#glRectKeysBg.setColor(0.3, 0.3, 0.3); if (gui.patchView.isCurrentOp(this.#op)) { @@ -108,6 +105,17 @@ export default class glTlAnim extends Events console.log("glRectBg.absY", this.#glRectBg.absY); console.log("glRectKeysBg.absY", this.#glRectKeysBg.absY); + } + + setWidth(w) + { + this.width = w; + this.#glRectBg.setSize(this.width, this.height); + this.#glRectKeysBg.setSize(this.width, this.height - 1); + } + + dispose() + { } } diff --git a/src/ui/gltimeline/gltlkeys.js b/src/ui/gltimeline/gltlkeys.js index 3bdff6a1a..568dfe68f 100644 --- a/src/ui/gltimeline/gltlkeys.js +++ b/src/ui/gltimeline/gltlkeys.js @@ -13,6 +13,18 @@ import GlRect from "../gldraw/glrect.js"; export default class glTlKeys extends Events { + /** @type {Anim} */ + #anim = null; + + /** @type {GlTimeline} */ + #glTl = null; + + /** @type {Array