@checksub_team/peaks_timeline 1.4.24 → 1.4.27

package/package.json

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

package/peaks.js

@@ -14754,6 +14754,35 @@ module.exports = function (Konva, Utils) {
     Line.prototype.lineHeight = function () {
         return this._height;
     };
+    Line.prototype.changeHeight = function (from, to) {
+        if (this._sourceHeights[from]) {
+            var oldHeight = this._height;
+            if (this._sourceHeights[to]) {
+                this._sourceHeights[to] += this._sourceHeights[from];
+            } else {
+                this._sourceHeights[to] = this._sourceHeights[from];
+            }
+            if (to > this._height) {
+                this._height = to;
+            } else if (from === this._height) {
+                this._height = 0;
+                for (var height in this._sourceHeights) {
+                    if (Utils.objectHasProperty(this._sourceHeights, height)) {
+                        var parsedHeight = parseInt(height, 10);
+                        if (parsedHeight !== from) {
+                            if (parsedHeight > this._height) {
+                                this._height = parsedHeight;
+                            }
+                        }
+                    }
+                }
+            }
+            if (this._height !== oldHeight) {
+                this._peaks.emit('line.heightChanged', this._position);
+            }
+            delete this._sourceHeights[from];
+        }
+    };
     Line.prototype.updateLineHeight = function (sourceGroup, action) {
         var oldHeight = this._height;
         var sourceGroupHeight;
@@ -14782,7 +14811,7 @@ module.exports = function (Konva, Utils) {
                     for (var height in this._sourceHeights) {
                         if (Utils.objectHasProperty(this._sourceHeights, height)) {
                             var parsedHeight = parseInt(height, 10);
-                            if (parseInt(height, 10) > this._height) {
+                            if (parsedHeight > this._height) {
                                 this._height = parsedHeight;
                             }
                         }
@@ -15148,6 +15177,15 @@ module.exports = function (Line, LineIndicator, Utils) {
         var lineNewY = oldLine.getY();
         this._updateLinesPosition(position, lineNewY);
     };
+    Lines.prototype.changeLineHeight = function (from, to) {
+        for (var position in this._linesByPosition) {
+            if (Utils.objectHasProperty(this._linesByPosition, position)) {
+                if (!this._linesByPosition[position].isSegmentsLine()) {
+                    this._linesByPosition[position].changeHeight(from, to);
+                }
+            }
+        }
+    };
     Lines.prototype.addSourceGroup = function (sourceGroup, position) {
         if (!this._linesByPosition[position]) {
             this._createLine(position);
@@ -15562,6 +15600,12 @@ module.exports = function (Colors, EventEmitter, TimelineSegments, TimelineSourc
     Peaks.prototype.allowInteractions = function (forSources, forSegments) {
         return this.view.allowInteractions(forSources, forSegments);
     };
+    Peaks.prototype.selectSourceById = function (sourceId) {
+        return this.view.selectSourceById(sourceId);
+    };
+    Peaks.prototype.deselectSource = function () {
+        return this.view.deselectSource();
+    };
     Peaks.prototype._addWindowResizeHandler = function () {
         this._onResize = this._onResize.bind(this);
         window.addEventListener('resize', this._onResize);
@@ -15572,6 +15616,11 @@ module.exports = function (Colors, EventEmitter, TimelineSegments, TimelineSourc
     Peaks.prototype._removeWindowResizeHandler = function () {
         window.removeEventListener('resize', this._onResize);
     };
+    Peaks.prototype.setLineHeight = function (newLineHeight) {
+        var oldHeight = this.options.lineHeight;
+        this.options.lineHeight = newLineHeight;
+        this.emit('options.set.line_height', oldHeight);
+    };
     Peaks.prototype.destroy = function () {
         this._removeWindowResizeHandler();
         if (this.keyboardHandler) {
@@ -15644,6 +15693,25 @@ module.exports = function (Utils, SourceGroup, Konva) {
     ModeLayer.prototype.addToStage = function (stage) {
         stage.add(this._layer);
     };
+    ModeLayer.prototype.selectSourceGroup = function (sourceGroup, notify) {
+        this.deselectSourceGroup();
+        if (sourceGroup) {
+            this._selectedElement = sourceGroup;
+            this._selectedElement.setSelected(true);
+            if (notify) {
+                this._peaks.emit('source.selected', this._selectedElement.getSource());
+            }
+        }
+    };
+    ModeLayer.prototype.deselectSourceGroup = function (notify) {
+        if (this._selectedElement) {
+            this._selectedElement.setSelected(false);
+            if (notify) {
+                this._peaks.emit('source.deselected', this._selectedElement.getSource());
+            }
+            this._selectedElement = null;
+        }
+    };
     ModeLayer.prototype._prepareDefaultMode = function () {
         this._selectedElement = null;
     };
@@ -15695,20 +15763,13 @@ module.exports = function (Utils, SourceGroup, Konva) {
     ModeLayer.prototype._onMouseClickInDefaultMode = function () {
         var hoveredElement = this._view.getHoveredElement();
         if (hoveredElement) {
-            if (this._selectedElement) {
-                this._selectedElement.setSelected(false);
-            }
-            this._selectedElement = hoveredElement;
-            this._selectedElement.setSelected(true);
+            this.selectSourceGroup(hoveredElement, true);
         } else {
-            if (this._selectedElement) {
-                this._selectedElement.setSelected(false);
-                this._selectedElement = null;
-            }
+            this.deselectSourceGroup(true);
         }
     };
     ModeLayer.prototype._onKeyboardDelete = function () {
-        if (this._selectedElement && this._view.isFocused()) {
+        if (this._selectedElement) {
             this._peaks.destroySource(this._selectedElement.getSource().id);
         }
     };
@@ -15825,12 +15886,9 @@ module.exports = function (Utils, SourceGroup, Konva) {
         case 'default':
             this._stage.off('click', this._onMouseClickInDefaultMode);
             this._peaks.off('keyboard.delete', this._onKeyboardDelete);
-            if (this._selectedElement) {
-                this._selectedElement.setSelected(false);
-            }
             break;
         }
-        this._selectedElement = null;
+        this.deselectSourceGroup(true);
         switch (mode) {
         case 'cut':
             this._stage.on('mouseover', this._onMouseEnterInCutMode);
@@ -18077,8 +18135,11 @@ module.exports = function (Utils) {
         } else if (options.wrapping === 'complete') {
             options.wrapped = false;
         }
+        if (!Utils.isNullOrUndefined(options.tts) && !Utils.isBoolean(options.tts)) {
+            throw new TypeError('peaks.sources.' + context + ': tts must be a boolean or undefined');
+        }
     }
-    function Source(peaks, id, originId, elementId, title, url, previewUrl, binaryUrl, kind, duration, startTime, endTime, mediaStartTime, mediaEndTime, color, borderColor, selectedColor, textColor, borderWidth, wrapped, position, draggable, resizable, wrapping, previewHeight, binaryHeight) {
+    function Source(peaks, id, originId, elementId, title, url, previewUrl, binaryUrl, kind, duration, startTime, endTime, mediaStartTime, mediaEndTime, color, borderColor, selectedColor, textColor, borderWidth, wrapped, position, draggable, resizable, wrapping, previewHeight, binaryHeight, tts) {
         var opts = {
             title: title,
             url: url,
@@ -18101,7 +18162,8 @@ module.exports = function (Utils) {
             resizable: resizable,
             wrapping: wrapping,
             previewHeight: previewHeight,
-            binaryHeight: binaryHeight
+            binaryHeight: binaryHeight,
+            tts: tts
         };
         validateSource(peaks, opts, 'add()');
         this._peaks = peaks;
@@ -18131,6 +18193,7 @@ module.exports = function (Utils) {
         this._previewHeight = opts.previewHeight;
         this._binaryHeight = opts.binaryHeight;
         this._minSize = peaks.options.minSourceSize;
+        this._tts = opts.tts;
     }
     Object.defineProperties(Source.prototype, {
         id: {
@@ -18336,6 +18399,14 @@ module.exports = function (Utils) {
             get: function () {
                 return this._minSize;
             }
+        },
+        tts: {
+            get: function () {
+                return this._tts;
+            },
+            set: function (tts) {
+                this._tts = tts;
+            }
         }
     });
     Source.prototype.updateTimes = function (newStartTime, newEndTime) {
@@ -18445,7 +18516,8 @@ module.exports = function (Utils) {
             resizable: this.resizable,
             wrapping: this.wrapping,
             previewHeight: this.previewHeight,
-            binaryHeight: this.binaryHeight
+            binaryHeight: this.binaryHeight,
+            tts: this.tts
         };
         Utils.extend(opts, options);
         validateSource(this._peaks, opts, 'update()');
@@ -18471,6 +18543,7 @@ module.exports = function (Utils) {
         this._wrapping = opts.wrapping;
         this._previewHeight = opts.previewHeight;
         this._binaryHeight = opts.binaryHeight;
+        this._tts = opts.tts;
         this._peaks.emit('source.update', this);
     };
     Source.prototype.isVisible = function (startTime, endTime) {
@@ -18501,6 +18574,7 @@ module.exports = function (SourceGroup, SegmentsGroup, Lines, DataRetriever, Uti
         this._peaks.on('data.retrieved', this._onDataRetrieved.bind(this));
         this._peaks.on('sources.refresh', this._onSourcesRefresh.bind(this));
         this._peaks.on('segments.show', this._onSegmentsShow.bind(this));
+        this._peaks.on('options.set.line_height', this._onOptionsLineHeightChange.bind(this));
     }
     SourcesLayer.prototype.getLoadedData = function (id) {
         return this._loadedData[id];
@@ -18523,6 +18597,25 @@ module.exports = function (SourceGroup, SegmentsGroup, Lines, DataRetriever, Uti
     SourcesLayer.prototype.isEditingEnabled = function () {
         return this._allowEditing;
     };
+    SourcesLayer.prototype._onOptionsLineHeightChange = function (oldHeight) {
+        var positions = [];
+        for (var sourceId in this._sourcesGroup) {
+            if (Utils.objectHasProperty(this._sourcesGroup, sourceId)) {
+                var source = this._sourcesGroup[sourceId].getSource();
+                if (!positions.includes(source.position)) {
+                    this._lines.changeLineHeight(oldHeight, this._peaks.options.lineHeight);
+                    positions.push(source.position);
+                }
+                this._removeSource(source);
+                this._addSourceGroup(source);
+            }
+        }
+        if (positions) {
+            var frameOffset = this._view.getFrameOffset();
+            var width = this._view.getWidth();
+            this.updateSources(this._view.pixelsToTime(frameOffset), this._view.pixelsToTime(frameOffset + width));
+        }
+    };
     SourcesLayer.prototype._onSourceUpdate = function (source) {
         var redraw = false;
         var sourceGroup = this._sourcesGroup[source.id];
@@ -18749,6 +18842,9 @@ module.exports = function (SourceGroup, SegmentsGroup, Lines, DataRetriever, Uti
     SourcesLayer.prototype.stopDrag = function () {
         this._layer.stopDrag();
     };
+    SourcesLayer.prototype.getSourceGroupById = function (sourceId) {
+        return this._sourcesGroup[sourceId];
+    };
     SourcesLayer.prototype._sourcesOverlapped = function (source1, source2) {
         var endsLater = source1.startTime < source2.startTime && source1.endTime > source2.startTime;
         var startsEarlier = source1.startTime > source2.startTime && source1.startTime < source2.endTime;
@@ -19135,7 +19231,8 @@ module.exports = function (Source, Utils) {
                 resizable: sourceToCut.resizable,
                 wrapping: sourceToCut.wrapping,
                 previewHeight: sourceToCut.previewHeight,
-                binaryHeight: sourceToCut.binaryHeight
+                binaryHeight: sourceToCut.binaryHeight,
+                tts: sourceToCut.tts
             }]);
         this._peaks.emit('sources.updated');
     };
@@ -19150,7 +19247,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.duration, options.startTime, options.endTime, options.mediaStartTime, options.mediaEndTime, options.color, options.borderColor, options.selectedColor, options.textColor, options.borderWidth, options.wrapped, options.position, options.draggable, options.resizable, options.wrapping, options.previewHeight, options.binaryHeight);
+        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.duration, options.startTime, options.endTime, options.mediaStartTime, options.mediaEndTime, options.color, options.borderColor, options.selectedColor, options.textColor, options.borderWidth, options.wrapped, options.position, options.draggable, options.resizable, options.wrapping, options.previewHeight, options.binaryHeight, options.tts);
         return source;
     };
     TimelineSources.prototype.getSources = function () {
@@ -19476,6 +19573,15 @@ module.exports = function (MouseDragHandler, PlayheadLayer, SourcesLayer, ModeLa
         this._sourcesLayer.stopDrag();
         this._sourcesLayer.draw();
     };
+    TimelineZoomView.prototype.selectSourceById = function (sourceId) {
+        var sourceGroup = this._sourcesLayer.getSourceGroupById(sourceId);
+        if (sourceGroup) {
+            this._modeLayer.selectSourceGroup(sourceGroup, false);
+        }
+    };
+    TimelineZoomView.prototype.deselectSource = function () {
+        this._modeLayer.deselectSourceGroup(false);
+    };
     TimelineZoomView.prototype.isListening = function () {
         return this._stage.listening();
     };

package/src/line.js

@@ -91,6 +91,43 @@ define([
     return this._height;
   };
 
+  Line.prototype.changeHeight = function(from, to) {
+    if (this._sourceHeights[from]) {
+      var oldHeight = this._height;
+
+      if (this._sourceHeights[to]) {
+        this._sourceHeights[to] += this._sourceHeights[from];
+      }
+      else {
+        this._sourceHeights[to] = this._sourceHeights[from];
+      }
+
+      if (to > this._height) {
+        this._height = to;
+      }
+      else if (from === this._height) {
+        this._height = 0;
+        for (var height in this._sourceHeights) {
+          if (Utils.objectHasProperty(this._sourceHeights, height)) {
+            var parsedHeight = parseInt(height, 10);
+
+            if (parsedHeight !== from) {
+              if (parsedHeight > this._height) {
+                this._height = parsedHeight;
+              }
+            }
+          }
+        }
+      }
+
+      if (this._height !== oldHeight) {
+        this._peaks.emit('line.heightChanged', this._position);
+      }
+
+      delete this._sourceHeights[from];
+    }
+  };
+
   Line.prototype.updateLineHeight = function(sourceGroup, action) {
     var oldHeight = this._height;
     var sourceGroupHeight;
@@ -127,7 +164,7 @@ define([
               if (Utils.objectHasProperty(this._sourceHeights, height)) {
                 var parsedHeight = parseInt(height, 10);
 
-                if (parseInt(height, 10) > this._height) {
+                if (parsedHeight > this._height) {
                   this._height = parsedHeight;
                 }
               }

package/src/lines.js

@@ -57,6 +57,16 @@ define([
     this._updateLinesPosition(position, lineNewY);
   };
 
+  Lines.prototype.changeLineHeight = function(from, to) {
+    for (var position in this._linesByPosition) {
+      if (Utils.objectHasProperty(this._linesByPosition, position)) {
+        if (!this._linesByPosition[position].isSegmentsLine()) {
+          this._linesByPosition[position].changeHeight(from, to);
+        }
+      }
+    }
+  };
+
   Lines.prototype.addSourceGroup = function(sourceGroup, position) {
     if (!this._linesByPosition[position]) {
       this._createLine(position);

package/src/main.js

@@ -233,7 +233,7 @@ define([
       lineHeight:               80,
 
       /**
-       * Ratio by which lineHeight must be multiplied to obtain the segment's line height.
+       * Height of a segment, in pixels.
        */
       segmentHeight:            32,
 
@@ -628,6 +628,16 @@ define([
             .allowInteractions(forSources, forSegments);
   };
 
+  Peaks.prototype.selectSourceById = function(sourceId) {
+    return this.view
+            .selectSourceById(sourceId);
+  };
+
+  Peaks.prototype.deselectSource = function() {
+    return this.view
+            .deselectSource();
+  };
+
   Peaks.prototype._addWindowResizeHandler = function() {
     this._onResize = this._onResize.bind(this);
     window.addEventListener('resize', this._onResize);
@@ -641,6 +651,13 @@ define([
     window.removeEventListener('resize', this._onResize);
   };
 
+  Peaks.prototype.setLineHeight = function(newLineHeight) {
+    var oldHeight = this.options.lineHeight;
+
+    this.options.lineHeight = newLineHeight;
+    this.emit('options.set.line_height', oldHeight);
+  };
+
   /**
    * Cleans up a Peaks instance after use.
    */

package/src/mode-layer.js

@@ -61,6 +61,27 @@ define([
     stage.add(this._layer);
   };
 
+  ModeLayer.prototype.selectSourceGroup = function(sourceGroup, notify) {
+    this.deselectSourceGroup();
+    if (sourceGroup) {
+      this._selectedElement = sourceGroup;
+      this._selectedElement.setSelected(true);
+      if (notify) {
+        this._peaks.emit('source.selected', this._selectedElement.getSource());
+      }
+    }
+  };
+
+  ModeLayer.prototype.deselectSourceGroup = function(notify) {
+    if (this._selectedElement) {
+      this._selectedElement.setSelected(false);
+      if (notify) {
+        this._peaks.emit('source.deselected', this._selectedElement.getSource());
+      }
+      this._selectedElement = null;
+    }
+  };
+
   ModeLayer.prototype._prepareDefaultMode = function() {
     this._selectedElement = null;
   };
@@ -119,24 +140,15 @@ define([
     var hoveredElement = this._view.getHoveredElement();
 
     if (hoveredElement) {
-      if (this._selectedElement) {
-        this._selectedElement.setSelected(false);
-      }
-
-      this._selectedElement = hoveredElement;
-
-      this._selectedElement.setSelected(true);
+      this.selectSourceGroup(hoveredElement, true);
     }
     else {
-      if (this._selectedElement) {
-        this._selectedElement.setSelected(false);
-        this._selectedElement = null;
-      }
+      this.deselectSourceGroup(true);
     }
   };
 
   ModeLayer.prototype._onKeyboardDelete = function() {
-    if (this._selectedElement && this._view.isFocused()) {
+    if (this._selectedElement) {
       this._peaks.destroySource(this._selectedElement.getSource().id);
     }
   };
@@ -303,13 +315,10 @@ define([
       case 'default':
         this._stage.off('click', this._onMouseClickInDefaultMode);
         this._peaks.off('keyboard.delete', this._onKeyboardDelete);
-        if (this._selectedElement) {
-          this._selectedElement.setSelected(false);
-        }
         break;
     }
 
-    this._selectedElement = null;
+    this.deselectSourceGroup(true);
 
     // Set new mode
     switch (mode) {

package/src/source.js

@@ -197,6 +197,10 @@ define([
     else if (options.wrapping === 'complete') {
       options.wrapped = false;
     }
+
+    if (!Utils.isNullOrUndefined(options.tts) && !Utils.isBoolean(options.tts)) {
+      throw new TypeError('peaks.sources.' + context + ': tts must be a boolean or undefined');
+    }
   }
 
   /**
@@ -222,7 +226,7 @@ define([
   function Source(peaks, id, originId, elementId, title, url, previewUrl, binaryUrl, kind,
     duration, startTime, endTime, mediaStartTime, mediaEndTime, color, borderColor,
     selectedColor, textColor, borderWidth, wrapped, position, draggable, resizable, wrapping,
-    previewHeight, binaryHeight) {
+    previewHeight, binaryHeight, tts) {
     var opts = {
       title: title,
       url: url,
@@ -245,7 +249,8 @@ define([
       resizable: resizable,
       wrapping: wrapping,
       previewHeight: previewHeight,
-      binaryHeight: binaryHeight
+      binaryHeight: binaryHeight,
+      tts: tts
     };
 
     validateSource(peaks, opts, 'add()');
@@ -277,6 +282,7 @@ define([
     this._previewHeight = opts.previewHeight;
     this._binaryHeight = opts.binaryHeight;
     this._minSize = peaks.options.minSourceSize;
+    this._tts = opts.tts;
   }
 
   Object.defineProperties(Source.prototype, {
@@ -497,6 +503,15 @@ define([
       get: function() {
         return this._minSize;
       }
+    },
+    tts: {
+      get: function() {
+        return this._tts;
+      },
+
+      set: function(tts) {
+        this._tts = tts;
+      }
     }
   });
 
@@ -638,7 +653,8 @@ define([
       resizable: this.resizable,
       wrapping: this.wrapping,
       previewHeight: this.previewHeight,
-      binaryHeight: this.binaryHeight
+      binaryHeight: this.binaryHeight,
+      tts: this.tts
     };
 
     Utils.extend(opts, options);
@@ -667,6 +683,7 @@ define([
     this._wrapping = opts.wrapping;
     this._previewHeight = opts.previewHeight;
     this._binaryHeight = opts.binaryHeight;
+    this._tts = opts.tts;
 
     this._peaks.emit('source.update', this);
   };

package/src/sources-layer.js

@@ -61,6 +61,7 @@ define([
     this._peaks.on('data.retrieved', this._onDataRetrieved.bind(this));
     this._peaks.on('sources.refresh', this._onSourcesRefresh.bind(this));
     this._peaks.on('segments.show', this._onSegmentsShow.bind(this));
+    this._peaks.on('options.set.line_height', this._onOptionsLineHeightChange.bind(this));
   }
 
   SourcesLayer.prototype.getLoadedData = function(id) {
@@ -97,6 +98,36 @@ define([
     return this._allowEditing;
   };
 
+  SourcesLayer.prototype._onOptionsLineHeightChange = function(oldHeight) {
+    var positions = [];
+
+    for (var sourceId in this._sourcesGroup) {
+      if (Utils.objectHasProperty(this._sourcesGroup, sourceId)) {
+        var source = this._sourcesGroup[sourceId].getSource();
+
+        if (!positions.includes(source.position)) {
+          this._lines.changeLineHeight(
+            oldHeight,
+            this._peaks.options.lineHeight
+          );
+          positions.push(source.position);
+        }
+        this._removeSource(source);
+        this._addSourceGroup(source);
+      }
+    }
+
+    if (positions) {
+      var frameOffset = this._view.getFrameOffset();
+      var width = this._view.getWidth();
+
+      this.updateSources(
+        this._view.pixelsToTime(frameOffset),
+        this._view.pixelsToTime(frameOffset + width)
+      );
+    }
+  };
+
   SourcesLayer.prototype._onSourceUpdate = function(source) {
     var redraw = false;
     var sourceGroup = this._sourcesGroup[source.id];
@@ -471,6 +502,10 @@ define([
     this._layer.stopDrag();
   };
 
+  SourcesLayer.prototype.getSourceGroupById = function(sourceId) {
+    return this._sourcesGroup[sourceId];
+  };
+
   SourcesLayer.prototype._sourcesOverlapped = function(source1, source2) {
     var endsLater = (source1.startTime < source2.startTime)
                     && (source1.endTime > source2.startTime);

package/src/timeline-sources.js

@@ -87,7 +87,8 @@ define([
       resizable: sourceToCut.resizable,
       wrapping: sourceToCut.wrapping,
       previewHeight: sourceToCut.previewHeight,
-      binaryHeight: sourceToCut.binaryHeight
+      binaryHeight: sourceToCut.binaryHeight,
+      tts: sourceToCut.tts
     }]);
 
     this._peaks.emit('sources.updated');
@@ -159,7 +160,8 @@ define([
       options.resizable,
       options.wrapping,
       options.previewHeight,
-      options.binaryHeight
+      options.binaryHeight,
+      options.tts
     );
 
     return source;

package/src/timeline-zoomview.js

@@ -361,6 +361,18 @@ define([
     this._sourcesLayer.draw();
   };
 
+  TimelineZoomView.prototype.selectSourceById = function(sourceId) {
+    var sourceGroup = this._sourcesLayer.getSourceGroupById(sourceId);
+
+    if (sourceGroup) {
+      this._modeLayer.selectSourceGroup(sourceGroup, false);
+    }
+  };
+
+  TimelineZoomView.prototype.deselectSource = function() {
+    this._modeLayer.deselectSourceGroup(false);
+  };
+
   TimelineZoomView.prototype.isListening = function() {
     return this._stage.listening();
   };