@checksub_team/peaks_timeline 1.4.51 → 1.4.52

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checksub_team/peaks_timeline",
-  "version": "1.4.51",
+  "version": "1.4.52",
   "description": "JavaScript UI component for displaying audio waveforms",
   "main": "./peaks.js",
   "types": "./peaks.js.d.ts",

package/peaks.js

@@ -14305,7 +14305,7 @@ module.exports = function (Konva, Utils) {
         this._layer = new Konva.Layer();
         this._stage.add(this._layer);
         this._indicators = {};
-        this._layer.add(new Konva.Line({
+        this._separatingLine = new Konva.Line({
             points: [
                 this._width,
                 0,
@@ -14315,7 +14315,8 @@ module.exports = function (Konva, Utils) {
             stroke: 'gray',
             strokeWidth: 1,
             listening: false
-        }));
+        });
+        this._layer.add(this._separatingLine);
         this._layer.draw();
         if (this._peaks.options.enableLineIndicatorContextMenu) {
             this._createContextMenu();
@@ -14330,6 +14331,16 @@ module.exports = function (Konva, Utils) {
             'noVolume'
         ];
     }
+    LineIndicator.prototype.fitToView = function () {
+        this._height = this._view.getHeight();
+        this._stage.height(this._height);
+        this._separatingLine.points([
+            this._width,
+            0,
+            this._width,
+            this._height
+        ]);
+    };
     LineIndicator.prototype._onSetType = function (lineId, type) {
         this.removeIndicator(lineId, true);
         type = this._types.includes(type) ? type : 'default';
@@ -15038,6 +15049,9 @@ module.exports = function (SegmentsGroup, Line, LineIndicator, Utils) {
         this._peaks.on('segments.remove_all', this._onSegmentsRemoveAll.bind(this));
         this._peaks.on('segments.dragend', this._onSegmentUpdated.bind(this));
     }
+    Lines.prototype.fitToView = function () {
+        this._lineIndicator.fitToView();
+    };
     Lines.prototype._onSegmentsAdd = function (segments) {
         var self = this;
         segments.forEach(function (segment) {
@@ -18694,6 +18708,9 @@ module.exports = function (SourceGroup, Lines, DataRetriever, Utils, Invoker, Ko
         this._peaks.on('segments.show', this._onSegmentsShow.bind(this));
         this._peaks.on('options.set.line_height', this._onOptionsLineHeightChange.bind(this));
     }
+    SourcesLayer.prototype.fitToView = function () {
+        this._lines.fitToView();
+    };
     SourcesLayer.prototype.getLoadedData = function (id) {
         return this._loadedData[id];
     };
@@ -20000,18 +20017,23 @@ module.exports = function (MouseDragHandler, PlayheadLayer, SourcesLayer, ModeLa
         if (this._container.clientWidth === 0 && this._container.clientHeight === 0) {
             return;
         }
-        var updateTimeline = true;
-        if (this._container.clientWidth !== this._width) {
-            this._width = this._container.clientWidth;
+        var shouldUpdate = false;
+        if (this._container.clientWidth - this._peaks.options.lineIndicatorWidth !== this._width) {
+            this._width = this._container.clientWidth - this._peaks.options.lineIndicatorWidth;
             this._stage.width(this._width);
+            shouldUpdate = true;
         }
-        this._height = this._container.clientHeight;
-        this._stage.height(this._height);
-        this._playheadLayer.fitToView();
-        if (updateTimeline) {
+        if (this._container.clientHeight !== this._height) {
+            this._height = this._container.clientHeight;
+            this._stage.height(this._height);
+            shouldUpdate = true;
+        }
+        if (shouldUpdate) {
+            this._sourcesLayer.fitToView();
+            this._playheadLayer.fitToView();
             this.updateTimeline(this._frameOffset);
+            this._stage.draw();
         }
-        this._stage.draw();
     };
     TimelineZoomView.prototype.destroy = function () {
         if (this._resizeTimeoutId) {

package/src/line-indicator.js

@@ -44,14 +44,14 @@ define([
 
     this._indicators = {};
 
-    this._layer.add(
-      new Konva.Line({
-        points: [this._width, 0, this._width, this._height],
-        stroke: 'gray',
-        strokeWidth: 1,
-        listening: false
-      })
-    );
+    this._separatingLine = new Konva.Line({
+      points: [this._width, 0, this._width, this._height],
+      stroke: 'gray',
+      strokeWidth: 1,
+      listening: false
+    });
+
+    this._layer.add(this._separatingLine);
 
     this._layer.draw();
 
@@ -70,6 +70,14 @@ define([
     this._types = ['default', 'volume', 'noVolume'];
   }
 
+  LineIndicator.prototype.fitToView = function() {
+    this._height = this._view.getHeight();
+
+    this._stage.height(this._height);
+
+    this._separatingLine.points([this._width, 0, this._width, this._height]);
+  };
+
   LineIndicator.prototype._onSetType = function(lineId, type) {
     this.removeIndicator(lineId, true);
 

package/src/lines.js

@@ -50,6 +50,10 @@ define([
     this._peaks.on('segments.dragend', this._onSegmentUpdated.bind(this));
   }
 
+  Lines.prototype.fitToView = function() {
+    this._lineIndicator.fitToView();
+  };
+
   Lines.prototype._onSegmentsAdd = function(segments) {
     var self = this;
 

package/src/sources-layer.js

@@ -60,6 +60,10 @@ define([
     this._peaks.on('options.set.line_height', this._onOptionsLineHeightChange.bind(this));
   }
 
+  SourcesLayer.prototype.fitToView = function() {
+    this._lines.fitToView();
+  };
+
   SourcesLayer.prototype.getLoadedData = function(id) {
     return this._loadedData[id];
   };

package/src/timeline-zoomview.js

@@ -836,23 +836,28 @@ define([
       return;
     }
 
-    var updateTimeline = true;
+    var shouldUpdate = false;
 
-    if (this._container.clientWidth !== this._width) {
-      this._width = this._container.clientWidth;
+    if (this._container.clientWidth - this._peaks.options.lineIndicatorWidth !== this._width) {
+      this._width = this._container.clientWidth - this._peaks.options.lineIndicatorWidth;
       this._stage.width(this._width);
+      shouldUpdate = true;
     }
 
-    this._height = this._container.clientHeight;
-    this._stage.height(this._height);
+    if (this._container.clientHeight !== this._height) {
+      this._height = this._container.clientHeight;
+      this._stage.height(this._height);
+      shouldUpdate = true;
+    }
 
-    this._playheadLayer.fitToView();
+    if (shouldUpdate) {
+      this._sourcesLayer.fitToView();
+      this._playheadLayer.fitToView();
 
-    if (updateTimeline) {
       this.updateTimeline(this._frameOffset);
-    }
 
-    this._stage.draw();
+      this._stage.draw();
+    }
   };
 
   TimelineZoomView.prototype.destroy = function() {