@checksub_team/peaks_timeline 1.10.2 → 1.11.0

package/package.json

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

package/peaks.js

@@ -17965,8 +17965,10 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
         var self = this;
         var defaultWidth;
         var y = this._source.textPosition === 'bottom' ? Math.max((isWrap ? this._wrappedHeight : this._unwrappedHeight) - this._source.textFontSize - this._peaks.options.sourceTextYOffset, this._peaks.options.sourceTextYOffset) : this._peaks.options.sourceTextYOffset;
+        var defaultXOffset = this._peaks.options.sourceTextXOffset;
+        var maxXOffset = this._width - 2 * defaultXOffset;
         var title = new Konva.Text({
-            x: this._peaks.options.sourceTextXOffset,
+            x: defaultXOffset,
             y: y,
             text: Utils.removeLineBreaks(this._source.title),
             textAlign: 'left',
@@ -17978,6 +17980,10 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
             ellipsis: true,
             listening: false,
             sceneFunc: function (context, shape) {
+                var absX = this.absolutePosition().x;
+                if (self._source.textAutoScroll && absX < defaultXOffset) {
+                    this.offsetX(Math.max(Math.min(0, absX - defaultXOffset), -(maxXOffset - shape.width())));
+                }
                 defaultWidth = defaultWidth ? defaultWidth : shape.width();
                 shape.width(Math.min(self._width - 10, defaultWidth));
                 if (self._source.textBackgroundColor) {
@@ -18495,6 +18501,9 @@ module.exports = function (Utils) {
         } else if (!Utils.isString(options.textPosition)) {
             throw new TypeError('peaks.sources.' + context + ': textPosition must be a string');
         }
+        if (Utils.isNullOrUndefined(options.textAutoScroll)) {
+            options.textAutoScroll = false;
+        }
         if (Utils.isNullOrUndefined(options.borderWidth)) {
             options.borderWidth = 0;
         }
@@ -18574,7 +18583,7 @@ module.exports = function (Utils) {
             options.markerWidth = 2;
         }
     }
-    function Source(peaks, id, originId, elementId, title, url, previewUrl, binaryUrl, kind, subkind, duration, startTime, endTime, mediaStartTime, mediaEndTime, color, backgroundColor, borderColor, selectedColor, textFont, textFontSize, textColor, textBackgroundColor, textPosition, borderWidth, borderRadius, wrapped, position, draggable, orderable, resizable, cuttable, deletable, wrapping, previewHeight, binaryHeight, indicators, markers, markerColor, markerWidth) {
+    function Source(peaks, id, originId, elementId, title, url, previewUrl, binaryUrl, kind, subkind, duration, startTime, endTime, mediaStartTime, mediaEndTime, color, backgroundColor, borderColor, selectedColor, textFont, textFontSize, textColor, textBackgroundColor, textPosition, textAutoScroll, borderWidth, borderRadius, wrapped, position, draggable, orderable, resizable, cuttable, deletable, wrapping, previewHeight, binaryHeight, indicators, markers, markerColor, markerWidth) {
         var opts = {
             title: title,
             url: url,
@@ -18596,6 +18605,7 @@ module.exports = function (Utils) {
             textColor: textColor,
             textBackgroundColor: textBackgroundColor,
             textPosition: textPosition,
+            textAutoScroll: textAutoScroll,
             borderWidth: borderWidth,
             borderRadius: borderRadius,
             wrapped: wrapped,
@@ -18638,6 +18648,7 @@ module.exports = function (Utils) {
         this._textColor = opts.textColor;
         this._textBackgroundColor = opts.textBackgroundColor;
         this._textPosition = opts.textPosition;
+        this._textAutoScroll = opts.textAutoScroll;
         this._borderWidth = opts.borderWidth;
         this._borderRadius = opts.borderRadius;
         this._wrapped = opts.wrapped;
@@ -18838,6 +18849,15 @@ module.exports = function (Utils) {
                 this._textPosition = textPosition;
             }
         },
+        textAutoScroll: {
+            enumerable: true,
+            get: function () {
+                return this._textAutoScroll;
+            },
+            set: function (textAutoScroll) {
+                this._textAutoScroll = textAutoScroll;
+            }
+        },
         borderWidth: {
             enumerable: true,
             get: function () {
@@ -19083,6 +19103,7 @@ module.exports = function (Utils) {
             textColor: this.textColor,
             textBackgroundColor: this.textBackgroundColor,
             textPosition: this.textPosition,
+            textAutoScroll: this.textAutoScroll,
             borderWidth: this.borderWidth,
             borderRadius: this.borderRadius,
             wrapped: this.wrapped,
@@ -19122,6 +19143,7 @@ module.exports = function (Utils) {
         this._textColor = opts.textColor;
         this._textBackgroundColor = opts.textBackgroundColor;
         this._textPosition = opts.textPosition;
+        this._textAutoScroll = opts.textAutoScroll;
         this._borderWidth = opts.borderWidth;
         this._borderRadius = opts.borderRadius;
         this._wrapped = opts.wrapped;
@@ -19951,6 +19973,7 @@ module.exports = function (Source, Utils) {
                 textColor: sourceToCut.textColor,
                 textBackgroundColor: sourceToCut.textBackgroundColor,
                 textPosition: sourceToCut.textPosition,
+                textAutoScroll: sourceToCut.textAutoScroll,
                 borderWidth: sourceToCut.borderWidth,
                 borderRadius: sourceToCut.borderRadius,
                 wrapped: sourceToCut.wrapped,
@@ -19983,7 +20006,7 @@ module.exports = function (Source, Utils) {
         if (!Utils.isObject(options)) {
             throw new TypeError('peaks.sources.add(): expected a Source object parameter');
         }
-        var source = new Source(this._peaks, options.id || this._getNextSourceId(), options.originId, options.elementId, options.title, options.url, options.previewUrl, options.binaryUrl, options.kind, options.subkind, options.duration, options.startTime, options.endTime, options.mediaStartTime, options.mediaEndTime, options.color, options.backgroundColor, options.borderColor, options.selectedColor, options.textFont, options.textFontSize, options.textColor, options.textBackgroundColor, options.textPosition, options.borderWidth, options.borderRadius, options.wrapped, options.position, options.draggable, options.orderable, options.resizable, options.cuttable, options.deletable, options.wrapping, options.previewHeight, options.binaryHeight, options.indicators, options.markers, options.markerColor, options.markerWidth);
+        var source = new Source(this._peaks, options.id || this._getNextSourceId(), options.originId, options.elementId, options.title, options.url, options.previewUrl, options.binaryUrl, options.kind, options.subkind, options.duration, options.startTime, options.endTime, options.mediaStartTime, options.mediaEndTime, options.color, options.backgroundColor, options.borderColor, options.selectedColor, options.textFont, options.textFontSize, options.textColor, options.textBackgroundColor, options.textPosition, options.textAutoScroll, options.borderWidth, options.borderRadius, options.wrapped, options.position, options.draggable, options.orderable, options.resizable, options.cuttable, options.deletable, options.wrapping, options.previewHeight, options.binaryHeight, options.indicators, options.markers, options.markerColor, options.markerWidth);
         return source;
     };
     TimelineSources.prototype.getSources = function () {

package/src/source-group.js

@@ -468,9 +468,11 @@ define([
           - this._source.textFontSize - this._peaks.options.sourceTextYOffset,
         this._peaks.options.sourceTextYOffset
       ) : this._peaks.options.sourceTextYOffset;
+    var defaultXOffset = this._peaks.options.sourceTextXOffset;
+    var maxXOffset = this._width - 2 * defaultXOffset;
 
     var title = new Konva.Text({
-      x: this._peaks.options.sourceTextXOffset,
+      x: defaultXOffset,
       y: y,
       text: Utils.removeLineBreaks(this._source.title),
       textAlign: 'left',
@@ -482,6 +484,11 @@ define([
       ellipsis: true,
       listening: false,
       sceneFunc: function(context, shape) {
+        var absX = this.absolutePosition().x;
+
+        if (self._source.textAutoScroll && absX < defaultXOffset) {
+          this.offsetX(Math.max(Math.min(0, absX - defaultXOffset), -(maxXOffset - shape.width())));
+        }
         defaultWidth = defaultWidth ? defaultWidth : shape.width();
         shape.width(Math.min(self._width - 10, defaultWidth));
         if (self._source.textBackgroundColor) {

package/src/source.js

@@ -156,6 +156,10 @@ define([
       throw new TypeError('peaks.sources.' + context + ': textPosition must be a string');
     }
 
+    if (Utils.isNullOrUndefined(options.textAutoScroll)) {
+      options.textAutoScroll = false;
+    }
+
     if (Utils.isNullOrUndefined(options.borderWidth)) {
       options.borderWidth = 0;
     }
@@ -289,9 +293,9 @@ define([
   function Source(peaks, id, originId, elementId, title, url, previewUrl, binaryUrl, kind,
     subkind, duration, startTime, endTime, mediaStartTime, mediaEndTime, color, backgroundColor,
     borderColor, selectedColor, textFont, textFontSize, textColor, textBackgroundColor,
-    textPosition, borderWidth, borderRadius, wrapped, position, draggable, orderable, resizable,
-    cuttable, deletable, wrapping, previewHeight, binaryHeight, indicators, markers, markerColor,
-    markerWidth) {
+    textPosition, textAutoScroll, borderWidth, borderRadius, wrapped, position, draggable, orderable,
+    resizable, cuttable, deletable, wrapping, previewHeight, binaryHeight, indicators, markers,
+    markerColor, markerWidth) {
     var opts = {
       title: title,
       url: url,
@@ -313,6 +317,7 @@ define([
       textColor: textColor,
       textBackgroundColor: textBackgroundColor,
       textPosition: textPosition,
+      textAutoScroll: textAutoScroll,
       borderWidth: borderWidth,
       borderRadius: borderRadius,
       wrapped: wrapped,
@@ -357,6 +362,7 @@ define([
     this._textColor = opts.textColor;
     this._textBackgroundColor = opts.textBackgroundColor;
     this._textPosition = opts.textPosition;
+    this._textAutoScroll = opts.textAutoScroll;
     this._borderWidth = opts.borderWidth;
     this._borderRadius = opts.borderRadius;
     this._wrapped = opts.wrapped;
@@ -572,6 +578,16 @@ define([
         this._textPosition = textPosition;
       }
     },
+    textAutoScroll: {
+      enumerable: true,
+      get: function() {
+        return this._textAutoScroll;
+      },
+
+      set: function(textAutoScroll) {
+        this._textAutoScroll = textAutoScroll;
+      }
+    },
     borderWidth: {
       enumerable: true,
       get: function() {
@@ -857,6 +873,7 @@ define([
       textColor: this.textColor,
       textBackgroundColor: this.textBackgroundColor,
       textPosition: this.textPosition,
+      textAutoScroll: this.textAutoScroll,
       borderWidth: this.borderWidth,
       borderRadius: this.borderRadius,
       wrapped: this.wrapped,
@@ -899,6 +916,7 @@ define([
     this._textColor = opts.textColor;
     this._textBackgroundColor = opts.textBackgroundColor;
     this._textPosition = opts.textPosition;
+    this._textAutoScroll = opts.textAutoScroll;
     this._borderWidth = opts.borderWidth;
     this._borderRadius = opts.borderRadius;
     this._wrapped = opts.wrapped;

package/src/timeline-sources.js

@@ -86,6 +86,7 @@ define([
       textColor: sourceToCut.textColor,
       textBackgroundColor: sourceToCut.textBackgroundColor,
       textPosition: sourceToCut.textPosition,
+      textAutoScroll: sourceToCut.textAutoScroll,
       borderWidth: sourceToCut.borderWidth,
       borderRadius: sourceToCut.borderRadius,
       wrapped: sourceToCut.wrapped,
@@ -171,6 +172,7 @@ define([
       options.textColor,
       options.textBackgroundColor,
       options.textPosition,
+      options.textAutoScroll,
       options.borderWidth,
       options.borderRadius,
       options.wrapped,