gltl

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()

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<glTlAnim>} */
     #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();
     }
 }

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);

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()
+    {
 
     }
 }

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<GlRect} */
+    #keyRect = [];
+
+    /** @type {GlRect} */
+    #parentRect = null;
+
     /**
      * @param {GlTimeline} glTl
      * @param {Anim} anim
@@ -21,35 +33,34 @@ export default class glTlKeys extends Events
     constructor(glTl, anim, parentRect)
     {
         super();
-        this._anim = anim;
-        this._glTl = glTl;
-        this._parentRect = parentRect;
+        this.#anim = anim;
+        this.#glTl = glTl;
+        this.#parentRect = parentRect;
 
-        this.keys = [];
         this.init();
     }
 
     init()
     {
         this.dispose();
 
-        for (let i = 0; i < this._anim.keys.length; i++)
+        for (let i = 0; i < this.#anim.keys.length; i++)
         {
-            const kr = this._glTl.rects.createRect({ "draggable": true });
+            const kr = this.#glTl.rects.createRect({ "draggable": true });
             kr.setSize(10, 10);
             kr.setShape(6);
-            kr.setParent(this._parentRect);
+            kr.setParent(this.#parentRect);
             kr.setColor(1, 1, 1, 1);
-            kr.setPosition(this._anim.keys[i].time * 12, 10, 0.1);
+            kr.setPosition(this.#anim.keys[i].time * 12, 10, 0.1);
 
-            this.keys.push(kr);
+            this.#keyRect.push(kr);
         }
     }
 
     dispose()
     {
-        for (let i = 0; i < this.keys.length; i++) this.keys[i].dispose();
-        this.keys = [];
+        for (let i = 0; i < this.#keyRect.length; i++) this.#keyRect[i].dispose();
+        this.#keyRect = [];
     }
 
 }

src/ui/gltimeline/gltlruler.js

@@ -23,8 +23,8 @@ export default class glTlRuler extends Events
         this._offset = 0;
 
         this._glRectBg = this._glTl.rects.createRect({ "draggable": true, "interactive": true });
-        this._glRectBg.setSize(21000, this._height);
-        this._glRectBg.setColor(0.3, 0.3, 0.3, 1);
+        this._glRectBg.setSize(222, this.height);
+        this._glRectBg.setColor(0.5, 0.3, 0.3, 1);
         this._glRectBg.setPosition(0, this.y);
 
         // this._glRectBg.setColorHover(0.4,0.4,0.4)
@@ -224,4 +224,11 @@ export default class glTlRuler extends Events
             }
         }
     }
+
+    setWidth(w)
+    {
+        this.width = w;
+        this._glRectBg.setSize(this.width, this.height);
+
+    }
 }