lexgui 8.2.5 → 8.3.1

package/build/extensions/Timeline.d.ts

@@ -13,7 +13,6 @@ export declare abstract class Timeline {
     static TRACK_COLOR_SECONDARY: string;
     static TRACK_COLOR_TERTIARY: string;
     static TRACK_SELECTED: string;
-    static TRACK_SELECTED_LIGHT: string;
     static FONT: string;
     static FONT_COLOR_PRIMARY: string;
     static FONT_COLOR_TERTIARY: string;
@@ -69,6 +68,7 @@ export declare abstract class Timeline {
     leftPanel: typeof Panel;
     trackTreesPanel: any;
     trackTreesComponent: any;
+    trackTreesEvents: any;
     lastTrackTreesComponentOffset: any;
     mainArea: typeof Area;
     root: HTMLBodyElement;
@@ -90,7 +90,6 @@ export declare abstract class Timeline {
     onShowContextMenu: Nullable<(event: any) => void>;
     onAddNewTrackButton: Nullable<() => void>;
     onAddNewTrack: Nullable<(track: any, options: any) => void>;
-    onTrackTreeEvent: Nullable<(event: any) => void>;
     onBeforeDrawContent: Nullable<(ctx: CanvasRenderingContext2D) => void>;
     onStateStop: Nullable<() => void>;
     onStateChange: Nullable<(s: boolean) => void>;
@@ -122,6 +121,7 @@ export declare abstract class Timeline {
      * @method updateHeader
      */
     updateHeader(): void;
+    setTrackTreeEventListener(type: string, callback: (event: any) => any): void;
     /**
      * @method updateLeftPanel
      */

package/build/extensions/Timeline.js

@@ -21,7 +21,6 @@ class Timeline {
     static TRACK_COLOR_SECONDARY;
     static TRACK_COLOR_TERTIARY;
     static TRACK_SELECTED;
-    static TRACK_SELECTED_LIGHT;
     static FONT;
     static FONT_COLOR_PRIMARY;
     static FONT_COLOR_TERTIARY;
@@ -77,6 +76,7 @@ class Timeline {
     leftPanel; // where tree will be placed
     trackTreesPanel = null;
     trackTreesComponent = null;
+    trackTreesEvents = {}; // holds callbacks
     lastTrackTreesComponentOffset = 0; // this.trackTreesComponent.innerTree.domEl.offsetTop - canvas.offsetTop. Check draw()
     mainArea;
     root;
@@ -98,7 +98,6 @@ class Timeline {
     onShowContextMenu = null;
     onAddNewTrackButton = null; // overrides button "add track" behaviour
     onAddNewTrack = null;
-    onTrackTreeEvent = null;
     onBeforeDrawContent = null;
     onStateStop = null;
     onStateChange = null;
@@ -183,6 +182,7 @@ class Timeline {
             Timeline.TRACK_COLOR_PRIMARY = LX.getCSSVariable('card');
             Timeline.TRACK_COLOR_SECONDARY = LX.getCSSVariable('secondary');
             Timeline.TRACK_COLOR_TERTIARY = LX.getCSSVariable('accent');
+            Timeline.TRACK_SELECTED = LX.getCSSVariable('primary');
             Timeline.FONT = LX.getCSSVariable('global-font');
             Timeline.FONT_COLOR_PRIMARY = LX.getCSSVariable('foreground');
             Timeline.FONT_COLOR_TERTIARY = LX.getCSSVariable('primary');
@@ -192,6 +192,8 @@ class Timeline {
             Timeline.KEYFRAME_COLOR_LOCK = LX.getCSSVariable('lxTimeline-keyframe-locked');
             Timeline.KEYFRAME_COLOR_EDITED = LX.getCSSVariable('lxTimeline-keyframe-edited');
             Timeline.KEYFRAME_COLOR_INACTIVE = LX.getCSSVariable('lxTimeline-keyframe-inactive');
+            Timeline.TIME_MARKER_COLOR = LX.getCSSVariable('primary');
+            Timeline.TIME_MARKER_COLOR_TEXT = LX.getCSSVariable('primary-foreground');
         }
         this.updateTheme = updateTheme.bind(this);
         LX.addSignal('@on_new_color_scheme', this.updateTheme);
@@ -309,6 +311,12 @@ class Timeline {
         header.addContent('header-buttons-end', buttonContainerEnd);
         header.endLine('justify-between');
     }
+    setTrackTreeEventListener(type, callback) {
+        this.trackTreesEvents[type] = callback;
+        if (type != 'select' && type != 'visibleChanged') {
+            this.trackTreesComponent.on(type, this.trackTreesEvents[type]);
+        }
+    }
     /**
      * @method updateLeftPanel
      */
@@ -347,18 +355,23 @@ class Timeline {
                 const flag = event.domEvent.shiftKey ? !node.trackData.isSelected : true;
                 this.setTrackSelection(node.trackData.trackIdx, flag, false, false); // do callback, do not update left panel
             }
+            if (this.trackTreesEvents['select']) {
+                this.trackTreesEvents['select'](event);
+            }
         });
         this.trackTreesComponent.on('visibleChanged', (event, resolve) => {
             const node = event.items[0];
             if (node.trackData) {
                 this.setTrackState(node.trackData.trackIdx, node.visible, false, false); // do not update left panel
             }
+            if (this.trackTreesEvents['visibleChanged']) {
+                this.trackTreesEvents['visibleChanged'](event);
+            }
         });
-        // Not used!
-        // if ( this.onTrackTreeEvent )
-        // {
-        //     this.onTrackTreeEvent( e );
-        // }
+        // reset all tree events to the new tree
+        for (let name in this.trackTreesEvents) {
+            this.setTrackTreeEventListener(name, this.trackTreesEvents[name]);
+        }
         const that = this;
         this.trackTreesComponent.innerTree._refresh = this.trackTreesComponent.innerTree.refresh;
         this.trackTreesComponent.innerTree.refresh = function (newData, selectedId) {
@@ -537,7 +550,7 @@ class Timeline {
         ctx.save();
         ctx.fillStyle = Timeline.TRACK_COLOR_SECONDARY;
         const rectsOffset = this.currentScrollInPixels % line_height;
-        const blackOrWhite = 1 - Math.floor(this.currentScrollInPixels / line_height) % 2;
+        const blackOrWhite = Math.floor(this.currentScrollInPixels / line_height) % 2;
         for (let i = blackOrWhite; i <= max_tracks; i += 2) {
             ctx.fillRect(0, treeOffset - rectsOffset + i * line_height, w, line_height);
         }
@@ -566,8 +579,9 @@ class Timeline {
         const w = ctx.canvas.width;
         const h = ctx.canvas.height;
         const scrollableHeight = this.trackTreesComponent.root.scrollHeight;
+        // hack: get 'ul' start pos to know when tracks start
         // tree has gaps of 0.25rem (4px ) inbetween entries but not in the beginning nor ending. Move half gap upwards.
-        const treeOffset = this.lastTrackTreesComponentOffset = this.trackTreesComponent.innerTree.domEl.offsetTop
+        const treeOffset = this.lastTrackTreesComponentOffset = this.trackTreesComponent.innerTree.domEl.children[0].offsetTop
             - this.canvas.offsetTop - 2;
         // zoom
         let startTime = this.visualOriginTime; // seconds
@@ -1263,14 +1277,13 @@ Timeline.BACKGROUND_COLOR = LX.getCSSVariable('background-blur');
 Timeline.TRACK_COLOR_PRIMARY = LX.getCSSVariable('card');
 Timeline.TRACK_COLOR_SECONDARY = LX.getCSSVariable('secondary');
 Timeline.TRACK_COLOR_TERTIARY = LX.getCSSVariable('accent');
-Timeline.TRACK_SELECTED = LX.getCSSVariable('color-blue-600');
-Timeline.TRACK_SELECTED_LIGHT = LX.getCSSVariable('color-blue-400');
+Timeline.TRACK_SELECTED = LX.getCSSVariable('primary');
 Timeline.FONT = LX.getCSSVariable('global-font');
 Timeline.FONT_COLOR_PRIMARY = LX.getCSSVariable('foreground');
 Timeline.FONT_COLOR_TERTIARY = LX.getCSSVariable('primary');
 Timeline.FONT_COLOR_QUATERNARY = LX.getCSSVariable('muted-foreground');
-Timeline.TIME_MARKER_COLOR = LX.getCSSVariable('color-blue-600');
-Timeline.TIME_MARKER_COLOR_TEXT = '#ffffff';
+Timeline.TIME_MARKER_COLOR = LX.getCSSVariable('primary');
+Timeline.TIME_MARKER_COLOR_TEXT = LX.getCSSVariable('primary-foreground');
 LX.setCSSVariable('lxTimeline-keyframe', 'light-dark(#2d69da,#2d69da )');
 LX.setCSSVariable('lxTimeline-keyframe-selected', 'light-dark(#f5c700,#fafa14)');
 LX.setCSSVariable('lxTimeline-keyframe-hovered', 'light-dark(#f5c700,#fafa14)');
@@ -1978,7 +1991,7 @@ class KeyFramesTimeline extends Timeline {
     drawTrackWithCurves(ctx, trackHeight, track) {
         if (track.isSelected) {
             ctx.globalAlpha = 0.2;
-            ctx.fillStyle = Timeline.TRACK_SELECTED_LIGHT;
+            ctx.fillStyle = Timeline.TRACK_SELECTED;
             ctx.fillRect(0, 0, ctx.canvas.width, trackHeight);
         }
         ctx.globalAlpha = 1;
@@ -3343,7 +3356,7 @@ class ClipsTimeline extends Timeline {
     drawTrackWithBoxes(ctx, y, trackHeight, track) {
         // Fill track background if it's selected
         ctx.globalAlpha = 0.2;
-        ctx.fillStyle = Timeline.TRACK_SELECTED_LIGHT;
+        ctx.fillStyle = Timeline.TRACK_SELECTED;
         if (track.isSelected) {
             ctx.fillRect(0, y, ctx.canvas.width, trackHeight);
         }