@checksub_team/peaks_timeline 1.14.1 → 1.15.0-alpha.1

package/package.json

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

package/peaks.js

@@ -15916,6 +15916,8 @@ module.exports = function (Colors, EventEmitter, TimelineSegments, TimelineSourc
             sourceTextYOffset: 10,
             sourceIndicatorsXOffset: 8,
             sourceIndicatorsYOffset: 12,
+            sourceButtonsGap: 2,
+            sourceButtonsPadding: 4,
             autoScrollThreshold: 0.05,
             enableLineIndicatorContextMenu: true,
             minSourceSize: 0.05,
@@ -18122,6 +18124,7 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
         this._borderWidth = this._source.borderWidth || 0;
         this._height = this._unwrappedHeight;
         this._currentTimeToPixelsScaleUsed = this._view.getTimeToPixelsScale();
+        this._selected = this._source.selected;
         this._previewList = [];
         this._markersGroup = this._createMarkers();
         this._group = new Konva.Group({
@@ -18144,6 +18147,9 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
                 self.toggleDragging(false);
                 self.toggleResizing(false);
             }
+            if (!self._selected) {
+                self._showButtons();
+            }
         });
         this._group.on('mouseout', function () {
             self._view.setHoveredElement(null);
@@ -18152,6 +18158,9 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
                 self.toggleDragging(true);
                 self.toggleResizing(true);
             }
+            if (!self._selected) {
+                self._hideButtons();
+            }
         });
         this._group.add(new Konva.Group());
         if (this._borderWidth) {
@@ -18212,6 +18221,7 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
                 }
             }
             this._updateVolumeSlider();
+            this._updateButtons();
             this.updatePreviews();
         }
     };
@@ -18379,6 +18389,9 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
         if (this._source.volumeRange && this._source.volume !== undefined) {
             unwrap.add(this._getVolumeSlider());
         }
+        if (this._source.buttons.length > 0) {
+            unwrap.add(this._getButtons());
+        }
         unwrap.add(this._createTitle(false));
         return unwrap;
     };
@@ -18420,6 +18433,9 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
         if (this._source.volumeRange && this._source.volume !== undefined) {
             wrap.add(this._getVolumeSlider());
         }
+        if (this._source.buttons.length > 0) {
+            wrap.add(this._getButtons());
+        }
         wrap.add(this._createTitle(true));
         return wrap;
     };
@@ -18676,13 +18692,16 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
         });
     };
     SourceGroup.prototype.setSelected = function () {
+        this._selected = this._source.selected;
         if (this._border) {
-            if (this._source.selected) {
+            if (this._selected) {
                 this._border.fill(this._source.selectedColor);
                 this._borderWidth = this._peaks.options.sourceSelectedBorderWidth;
+                this._showButtons();
             } else {
                 this._border.fill(this._source.borderColor);
                 this._borderWidth = this._source.borderWidth;
+                this._hideButtons();
             }
         } else {
             if (this._unwrap) {
@@ -18690,7 +18709,7 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
                     return node.getClassName() === 'Shape';
                 })[0];
                 if (unwrap_background) {
-                    if (this._source.selected) {
+                    if (this._selected) {
                         unwrap_background.stroke(this._source.selectedColor);
                         unwrap_background.strokeWidth(this._peaks.options.sourceSelectedBorderWidth);
                     } else {
@@ -18703,7 +18722,7 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
                     return node.getClassName() === 'Shape';
                 })[0];
                 if (wrap_background) {
-                    if (this._source.selected) {
+                    if (this._selected) {
                         wrap_background.stroke(this._source.selectedColor);
                         wrap_background.strokeWidth(this._peaks.options.sourceSelectedBorderWidth);
                     } else {
@@ -18887,6 +18906,81 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
         }.bind(this));
         return markersGroup;
     };
+    SourceGroup.prototype._createButtons = function () {
+        var buttonsGroup = new Konva.Group({
+            listening: true,
+            x: this._width,
+            visible: false
+        });
+        var buttonsGroupWidth = 0;
+        var buttonsGap = this._peaks.options.sourceButtonsGap;
+        var self = this;
+        this._source.buttons.forEach(function (button) {
+            const {id, width, height, cornerRadius, color, borderColor, borderWidth, svg, image} = button;
+            if (buttonsGroupWidth > 0) {
+                buttonsGroupWidth += buttonsGap;
+            }
+            var buttonGroup = new Konva.Group({
+                x: buttonsGroupWidth,
+                y: 0,
+                listening: true
+            });
+            var buttonRect = new Konva.Rect({
+                width: width,
+                height: height,
+                fill: color,
+                stroke: borderColor,
+                strokeWidth: borderWidth,
+                cornerRadius: cornerRadius
+            });
+            buttonsGroupWidth += width;
+            buttonGroup.add(buttonRect);
+            if (svg) {
+                var svgIcon = new Konva.Path({
+                    x: width / 2,
+                    y: height / 2,
+                    data: svg.path,
+                    fill: svg.color,
+                    offsetX: svg.width / 2,
+                    offsetY: svg.height / 2,
+                    listening: false
+                });
+                buttonGroup.add(svgIcon);
+            } else if (image) {
+                var imageObj = new Image();
+                imageObj.onload = function () {
+                    var imageIcon = new Konva.Image({
+                        x: width / 2,
+                        y: height / 2,
+                        image: imageObj,
+                        offsetX: image.width / 2,
+                        offsetY: image.height / 2,
+                        listening: false
+                    });
+                    buttonGroup.add(imageIcon);
+                    buttonGroup.draw();
+                };
+                imageObj.src = image.data;
+            }
+            if (button.hoverColor) {
+                buttonGroup.on('mouseover', function () {
+                    buttonRect.fill(button.hoverColor);
+                    buttonGroup.draw();
+                });
+                buttonGroup.on('mouseout', function () {
+                    buttonRect.fill(button.color);
+                    buttonGroup.draw();
+                });
+            }
+            buttonGroup.on('click', function () {
+                self._peaks.emit('source.buttonClicked', self._source, id);
+            });
+            buttonsGroup.add(buttonGroup);
+        });
+        buttonsGroup.offsetX(buttonsGroupWidth + this._borderWidth + this._peaks.options.sourceButtonsPadding);
+        buttonsGroup.offsetY(-this._borderWidth - this._peaks.options.sourceButtonsPadding);
+        return buttonsGroup;
+    };
     SourceGroup.prototype._updateMarkers = function () {
         const self = this;
         if (this._markersGroup) {
@@ -18902,6 +18996,27 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
             });
         }
     };
+    SourceGroup.prototype._updateButtons = function () {
+        if (this._buttonsGroup) {
+            this._buttonsGroup.x(this._width);
+        }
+    };
+    SourceGroup.prototype._getButtons = function () {
+        if (!this._buttonsGroup) {
+            this._buttonsGroup = this._createButtons();
+        }
+        return this._buttonsGroup;
+    };
+    SourceGroup.prototype._showButtons = function () {
+        if (this._buttonsGroup) {
+            this._buttonsGroup.visible(true);
+        }
+    };
+    SourceGroup.prototype._hideButtons = function () {
+        if (this._buttonsGroup) {
+            this._buttonsGroup.visible(false);
+        }
+    };
     SourceGroup.prototype._getYFromVolume = function (volume) {
         return this._borderWidth + (this._height - 2 * this._borderWidth) * (this._source.volumeRange[1] - volume) / (this._source.volumeRange[1] - this._source.volumeRange[0]);
     };
@@ -19220,6 +19335,11 @@ module.exports = function (Utils) {
         if (Utils.isNullOrUndefined(options.markers)) {
             options.markers = [];
         }
+        if (Utils.isNullOrUndefined(options.buttons)) {
+            options.buttons = [];
+        } else if (!Array.isArray(options.buttons)) {
+            throw new TypeError('peaks.sources.' + context + ': buttons must be an array');
+        }
         if (Utils.isNullOrUndefined(options.markerColor) || !Utils.isValidColor(options.markerColor)) {
             options.markerColor = options.color;
         }
@@ -19241,7 +19361,7 @@ module.exports = function (Utils) {
             }
         }
     }
-    function Source(peaks, id, originId, elementId, title, titleAlignments, url, previewUrl, binaryUrl, kind, subkind, duration, startTime, endTime, mediaStartTime, mediaEndTime, color, backgroundColor, borderColor, selectedColor, warningColor, warningWidth, volumeSliderColor, volumeSliderWidth, volumeSliderDraggingWidth, textFont, textFontSize, textColor, textBackgroundColor, textPosition, textAutoScroll, borderWidth, borderRadius, wrapped, position, draggable, orderable, resizable, cuttable, deletable, wrapping, previewHeight, binaryHeight, indicators, markers, markerColor, markerWidth, volume, volumeRange) {
+    function Source(peaks, id, originId, elementId, title, titleAlignments, url, previewUrl, binaryUrl, kind, subkind, duration, startTime, endTime, mediaStartTime, mediaEndTime, color, backgroundColor, borderColor, selectedColor, warningColor, warningWidth, volumeSliderColor, volumeSliderWidth, volumeSliderDraggingWidth, textFont, textFontSize, textColor, textBackgroundColor, textPosition, textAutoScroll, borderWidth, borderRadius, wrapped, position, draggable, orderable, resizable, cuttable, deletable, wrapping, previewHeight, binaryHeight, indicators, markers, buttons, markerColor, markerWidth, volume, volumeRange) {
         var opts = {
             title: title,
             titleAlignments: titleAlignments,
@@ -19284,6 +19404,7 @@ module.exports = function (Utils) {
             binaryHeight: binaryHeight,
             indicators: indicators,
             markers: markers,
+            buttons: buttons,
             markerColor: markerColor,
             markerWidth: markerWidth,
             volume: volume,
@@ -19335,6 +19456,7 @@ module.exports = function (Utils) {
         this._binaryHeight = opts.binaryHeight;
         this._indicators = opts.indicators;
         this._markers = opts.markers;
+        this._buttons = opts.buttons;
         this._markerColor = opts.markerColor;
         this._markerWidth = opts.markerWidth;
         this._volume = opts.volume;
@@ -19685,6 +19807,12 @@ module.exports = function (Utils) {
                 return this._markers;
             }
         },
+        buttons: {
+            enumerable: true,
+            get: function () {
+                return this._buttons;
+            }
+        },
         markerColor: {
             enumerable: true,
             get: function () {
@@ -19855,6 +19983,7 @@ module.exports = function (Utils) {
             binaryHeight: this.binaryHeight,
             indicators: this.indicators,
             markers: this.markers,
+            buttons: this.buttons,
             markerColor: this.markerColor,
             markerWidth: this.markerWidth,
             volume: this.volume,
@@ -19903,6 +20032,7 @@ module.exports = function (Utils) {
         this._binaryHeight = opts.binaryHeight;
         this._indicators = opts.indicators;
         this._markers = opts.markers;
+        this._buttons = opts.buttons;
         this._markerColor = opts.markerColor;
         this._markerWidth = opts.markerWidth;
         this._volume = opts.volume;
@@ -20759,6 +20889,7 @@ module.exports = function (Source, Utils) {
                 previewHeight: sourceToCut.previewHeight,
                 binaryHeight: sourceToCut.binaryHeight,
                 markers: sourceToCut.markers,
+                buttons: sourceToCut.buttons,
                 markerColor: sourceToCut.markerColor,
                 markerWidth: sourceToCut.markerWidth,
                 volume: sourceToCut.volume,
@@ -20780,7 +20911,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.titleAlignments, 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.warningColor, options.warningWidth, options.volumeSliderColor, options.volumeSliderWidth, options.volumeSliderDraggingWidth, 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, options.volume, options.volumeRange);
+        var source = new Source(this._peaks, options.id || this._getNextSourceId(), options.originId, options.elementId, options.title, options.titleAlignments, 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.warningColor, options.warningWidth, options.volumeSliderColor, options.volumeSliderWidth, options.volumeSliderDraggingWidth, 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.buttons, options.markerColor, options.markerWidth, options.volume, options.volumeRange);
         return source;
     };
     TimelineSources.prototype.getSources = function () {

package/src/main.js

@@ -369,6 +369,16 @@ define([
        */
       sourceIndicatorsYOffset: 12,
 
+      /**
+       * Spacing between the source buttons, in pixels
+       */
+      sourceButtonsGap: 2,
+
+      /**
+       * Padding around the source buttons, in pixels
+       */
+      sourceButtonsPadding: 4,
+
       /**
        * Threshold size on the left and right border of the view,
        * where auto scrolling is activated, between 0 and 1.

package/src/source-group.js

@@ -53,6 +53,7 @@ define([
     this._borderWidth = this._source.borderWidth || 0;
     this._height = this._unwrappedHeight;
     this._currentTimeToPixelsScaleUsed = this._view.getTimeToPixelsScale();
+    this._selected = this._source.selected;
 
     this._previewList = [];
 
@@ -80,6 +81,9 @@ define([
         self.toggleDragging(false);
         self.toggleResizing(false);
       }
+      if (!self._selected) {
+        self._showButtons();
+      }
     });
     this._group.on('mouseout', function() {
       self._view.setHoveredElement(null);
@@ -88,6 +92,9 @@ define([
         self.toggleDragging(true);
         self.toggleResizing(true);
       }
+      if (!self._selected) {
+        self._hideButtons();
+      }
     });
 
     this._group.add(new Konva.Group());
@@ -198,6 +205,7 @@ define([
       }
 
       this._updateVolumeSlider();
+      this._updateButtons();
 
       // update unwrap
       this.updatePreviews();
@@ -428,6 +436,9 @@ define([
     if (this._source.volumeRange && this._source.volume !== undefined) {
       unwrap.add(this._getVolumeSlider());
     }
+    if (this._source.buttons.length > 0) {
+      unwrap.add(this._getButtons());
+    }
     unwrap.add(this._createTitle(false));
 
     return unwrap;
@@ -480,6 +491,9 @@ define([
     if (this._source.volumeRange && this._source.volume !== undefined) {
       wrap.add(this._getVolumeSlider());
     }
+    if (this._source.buttons.length > 0) {
+      wrap.add(this._getButtons());
+    }
     wrap.add(this._createTitle(true));
 
     return wrap;
@@ -814,14 +828,17 @@ define([
   };
 
   SourceGroup.prototype.setSelected = function() {
+    this._selected = this._source.selected;
     if (this._border) {
-      if (this._source.selected) {
+      if (this._selected) {
         this._border.fill(this._source.selectedColor);
         this._borderWidth = this._peaks.options.sourceSelectedBorderWidth;
+        this._showButtons();
       }
       else {
         this._border.fill(this._source.borderColor);
         this._borderWidth = this._source.borderWidth;
+        this._hideButtons();
       }
     }
     else {
@@ -832,7 +849,7 @@ define([
         })[0];
 
         if (unwrap_background) {
-          if (this._source.selected) {
+          if (this._selected) {
             unwrap_background.stroke(this._source.selectedColor);
             unwrap_background.strokeWidth(this._peaks.options.sourceSelectedBorderWidth);
           }
@@ -849,7 +866,7 @@ define([
         })[0];
 
         if (wrap_background) {
-          if (this._source.selected) {
+          if (this._selected) {
             wrap_background.stroke(this._source.selectedColor);
             wrap_background.strokeWidth(this._peaks.options.sourceSelectedBorderWidth);
           }
@@ -1092,6 +1109,110 @@ define([
     return markersGroup;
   };
 
+  SourceGroup.prototype._createButtons = function() {
+    var buttonsGroup = new Konva.Group({
+      listening: true,
+      x: this._width,
+      visible: false
+    });
+    var buttonsGroupWidth = 0;
+    var buttonsGap = this._peaks.options.sourceButtonsGap;
+    var self = this;
+
+    this._source.buttons.forEach(function(button) {
+      const {
+        id,
+        width,
+        height,
+        cornerRadius,
+        color,
+        borderColor,
+        borderWidth,
+        svg,
+        image
+      } = button;
+
+      if (buttonsGroupWidth > 0) {
+        buttonsGroupWidth += buttonsGap;
+      }
+
+      var buttonGroup = new Konva.Group({
+        x: buttonsGroupWidth,
+        y: 0,
+        listening: true
+      });
+
+      var buttonRect = new Konva.Rect({
+        width: width,
+        height: height,
+        fill: color,
+        stroke: borderColor,
+        strokeWidth: borderWidth,
+        cornerRadius: cornerRadius
+      });
+
+      buttonsGroupWidth += width;
+
+      buttonGroup.add(buttonRect);
+
+      if (svg) {
+        var svgIcon = new Konva.Path({
+          x: width / 2,
+          y: height / 2,
+          data: svg.path,
+          fill: svg.color,
+          offsetX: svg.width / 2,
+          offsetY: svg.height / 2,
+          listening: false
+        });
+
+        buttonGroup.add(svgIcon);
+      }
+      else if (image) {
+        var imageObj = new Image();
+
+        imageObj.onload = function() {
+          var imageIcon = new Konva.Image({
+            x: width / 2,
+            y: height / 2,
+            image: imageObj,
+            offsetX: image.width / 2,
+            offsetY: image.height / 2,
+            listening: false
+          });
+
+          buttonGroup.add(imageIcon);
+          buttonGroup.draw();
+        };
+
+        imageObj.src = image.data;
+      }
+
+      if (button.hoverColor) {
+        buttonGroup.on('mouseover', function() {
+          buttonRect.fill(button.hoverColor);
+          buttonGroup.draw();
+        });
+
+        buttonGroup.on('mouseout', function() {
+          buttonRect.fill(button.color);
+          buttonGroup.draw();
+        });
+      }
+
+      buttonGroup.on('click', function() {
+        self._peaks.emit('source.buttonClicked', self._source, id);
+      });
+
+      buttonsGroup.add(buttonGroup);
+    });
+
+    buttonsGroup.offsetX(buttonsGroupWidth + this._borderWidth + this._peaks.options.sourceButtonsPadding);
+    buttonsGroup.offsetY(-this._borderWidth - this._peaks.options.sourceButtonsPadding);
+
+    return buttonsGroup;
+  };
+
   SourceGroup.prototype._updateMarkers = function() {
     const self = this;
 
@@ -1105,6 +1226,32 @@ define([
     }
   };
 
+  SourceGroup.prototype._updateButtons = function() {
+    if (this._buttonsGroup) {
+      this._buttonsGroup.x(this._width);
+    }
+  };
+
+  SourceGroup.prototype._getButtons = function() {
+    if (!this._buttonsGroup) {
+      this._buttonsGroup = this._createButtons();
+    }
+
+    return this._buttonsGroup;
+  };
+
+  SourceGroup.prototype._showButtons = function() {
+    if (this._buttonsGroup) {
+      this._buttonsGroup.visible(true);
+    }
+  };
+
+  SourceGroup.prototype._hideButtons = function() {
+    if (this._buttonsGroup) {
+      this._buttonsGroup.visible(false);
+    }
+  };
+
   SourceGroup.prototype._getYFromVolume = function(volume) {
     return this._borderWidth + (this._height - 2 * this._borderWidth) * (
       this._source.volumeRange[1] - volume

package/src/source.js

@@ -307,6 +307,13 @@ define([
       options.markers = [];
     }
 
+    if (Utils.isNullOrUndefined(options.buttons)) {
+      options.buttons = [];
+    }
+    else if (!Array.isArray(options.buttons)) {
+      throw new TypeError('peaks.sources.' + context + ': buttons must be an array');
+    }
+
     if (Utils.isNullOrUndefined(options.markerColor)
       || !Utils.isValidColor(options.markerColor)) {
       options.markerColor = options.color;
@@ -388,6 +395,7 @@ define([
    * @param {Number} binaryHeight Height of the binary data visualization.
    * @param {Array} indicators Array containing indicator data for the source.
    * @param {Array} markers Array containing marker data for the source.
+   * @param {Array} buttons Array containing button data for the source.
    * @param {String} markerColor Color of the markers.
    * @param {Number} markerWidth Width of the markers.
    * @param {Number} volume Current volume level of the source.
@@ -399,7 +407,7 @@ define([
     borderColor, selectedColor, warningColor, warningWidth, volumeSliderColor, volumeSliderWidth,
     volumeSliderDraggingWidth, textFont, textFontSize, textColor, textBackgroundColor, textPosition,
     textAutoScroll, borderWidth, borderRadius, wrapped, position, draggable, orderable, resizable,
-    cuttable, deletable, wrapping, previewHeight, binaryHeight, indicators, markers, markerColor,
+    cuttable, deletable, wrapping, previewHeight, binaryHeight, indicators, markers, buttons, markerColor,
     markerWidth, volume, volumeRange) {
     var opts = {
       title: title,
@@ -443,6 +451,7 @@ define([
       binaryHeight: binaryHeight,
       indicators: indicators,
       markers: markers,
+      buttons: buttons,
       markerColor: markerColor,
       markerWidth: markerWidth,
       volume: volume,
@@ -496,6 +505,7 @@ define([
     this._binaryHeight = opts.binaryHeight;
     this._indicators = opts.indicators;
     this._markers = opts.markers;
+    this._buttons = opts.buttons;
     this._markerColor = opts.markerColor;
     this._markerWidth = opts.markerWidth;
     this._volume = opts.volume;
@@ -871,6 +881,12 @@ define([
         return this._markers;
       }
     },
+    buttons: {
+      enumerable: true,
+      get: function() {
+        return this._buttons;
+      }
+    },
     markerColor: {
       enumerable: true,
       get: function() {
@@ -1075,6 +1091,7 @@ define([
       binaryHeight: this.binaryHeight,
       indicators: this.indicators,
       markers: this.markers,
+      buttons: this.buttons,
       markerColor: this.markerColor,
       markerWidth: this.markerWidth,
       volume: this.volume,
@@ -1126,6 +1143,7 @@ define([
     this._binaryHeight = opts.binaryHeight;
     this._indicators = opts.indicators;
     this._markers = opts.markers;
+    this._buttons = opts.buttons;
     this._markerColor = opts.markerColor;
     this._markerWidth = opts.markerWidth;
     this._volume = opts.volume;

package/src/timeline-sources.js

@@ -106,6 +106,7 @@ define([
       previewHeight: sourceToCut.previewHeight,
       binaryHeight: sourceToCut.binaryHeight,
       markers: sourceToCut.markers,
+      buttons: sourceToCut.buttons,
       markerColor: sourceToCut.markerColor,
       markerWidth: sourceToCut.markerWidth,
       volume: sourceToCut.volume,
@@ -200,6 +201,7 @@ define([
       options.binaryHeight,
       options.indicators,
       options.markers,
+      options.buttons,
       options.markerColor,
       options.markerWidth,
       options.volume,