1201 lines
44 KiB
JavaScript
1201 lines
44 KiB
JavaScript
/*!
|
|
* wavesurfer.js regions plugin 4.6.0 (2024-02-05)
|
|
* https://wavesurfer-js.org
|
|
* @license BSD-3-Clause
|
|
*/
|
|
(function webpackUniversalModuleDefinition(root, factory) {
|
|
if(typeof exports === 'object' && typeof module === 'object')
|
|
module.exports = factory();
|
|
else if(typeof define === 'function' && define.amd)
|
|
define("WaveSurfer", [], factory);
|
|
else if(typeof exports === 'object')
|
|
exports["WaveSurfer"] = factory();
|
|
else
|
|
root["WaveSurfer"] = root["WaveSurfer"] || {}, root["WaveSurfer"]["regions"] = factory();
|
|
})(this, () => {
|
|
return /******/ (() => { // webpackBootstrap
|
|
/******/ "use strict";
|
|
/******/ var __webpack_modules__ = ({
|
|
|
|
/***/ "./src/plugin/regions/index.js":
|
|
/*!*************************************!*\
|
|
!*** ./src/plugin/regions/index.js ***!
|
|
\*************************************/
|
|
/***/ ((module, exports, __webpack_require__) => {
|
|
|
|
|
|
|
|
Object.defineProperty(exports, "__esModule", ({
|
|
value: true
|
|
}));
|
|
exports["default"] = void 0;
|
|
var _region = __webpack_require__(/*! ./region.js */ "./src/plugin/regions/region.js");
|
|
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
|
|
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
|
|
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } /**
|
|
* @since 4.0.0 This class has been split
|
|
*
|
|
* @typedef {Object} RegionsPluginParams
|
|
* @property {?boolean} dragSelection Enable creating regions by dragging with
|
|
* the mouse
|
|
* @property {?RegionParams[]} regions Regions that should be added upon
|
|
* initialisation
|
|
* @property {number} slop=2 The sensitivity of the mouse dragging
|
|
* @property {?number} snapToGridInterval Snap the regions to a grid of the specified multiples in seconds
|
|
* @property {?number} snapToGridOffset Shift the snap-to-grid by the specified seconds. May also be negative.
|
|
* @property {?boolean} deferInit Set to true to manually call
|
|
* @property {number[]} maxRegions Maximum number of regions that may be created by the user at one time.
|
|
* `initPlugin('regions')`
|
|
* @property {function} formatTimeCallback Allows custom formating for region tooltip.
|
|
* @property {?number} edgeScrollWidth='5% from container edges' Optional width for edgeScroll to start
|
|
*/ /**
|
|
* @typedef {Object} RegionParams
|
|
* @desc The parameters used to describe a region.
|
|
* @example wavesurfer.addRegion(regionParams);
|
|
* @property {string} id=→random The id of the region
|
|
* @property {number} start=0 The start position of the region (in seconds).
|
|
* @property {number} end=0 The end position of the region (in seconds).
|
|
* @property {?boolean} loop Whether to loop the region when played back.
|
|
* @property {boolean} drag=true Allow/disallow dragging the region.
|
|
* @property {boolean} resize=true Allow/disallow resizing the region.
|
|
* @property {string} [color='rgba(0, 0, 0, 0.1)'] HTML color code.
|
|
* @property {?number} channelIdx Select channel to draw the region on (if there are multiple channel waveforms).
|
|
* @property {?object} handleStyle A set of CSS properties used to style the left and right handle.
|
|
* @property {?boolean} preventContextMenu=false Determines whether the context menu is prevented from being opened.
|
|
*/
|
|
/**
|
|
* Regions are visual overlays on waveform that can be used to play and loop
|
|
* portions of audio. Regions can be dragged and resized.
|
|
*
|
|
* Visual customization is possible via CSS (using the selectors
|
|
* `.wavesurfer-region` and `.wavesurfer-handle`).
|
|
*
|
|
* @implements {PluginClass}
|
|
* @extends {Observer}
|
|
*
|
|
* @example
|
|
* // es6
|
|
* import RegionsPlugin from 'wavesurfer.regions.js';
|
|
*
|
|
* // commonjs
|
|
* var RegionsPlugin = require('wavesurfer.regions.js');
|
|
*
|
|
* // if you are using <script> tags
|
|
* var RegionsPlugin = window.WaveSurfer.regions;
|
|
*
|
|
* // ... initialising wavesurfer with the plugin
|
|
* var wavesurfer = WaveSurfer.create({
|
|
* // wavesurfer options ...
|
|
* plugins: [
|
|
* RegionsPlugin.create({
|
|
* // plugin options ...
|
|
* })
|
|
* ]
|
|
* });
|
|
*/
|
|
var RegionsPlugin = exports["default"] = /*#__PURE__*/function () {
|
|
function RegionsPlugin(params, ws) {
|
|
var _this = this;
|
|
_classCallCheck(this, RegionsPlugin);
|
|
this.params = params;
|
|
this.wavesurfer = ws;
|
|
this.util = _objectSpread(_objectSpread({}, ws.util), {}, {
|
|
getRegionSnapToGridValue: function getRegionSnapToGridValue(value) {
|
|
return _this.getRegionSnapToGridValue(value, params);
|
|
}
|
|
});
|
|
this.maxRegions = params.maxRegions;
|
|
this.regionsMinLength = params.regionsMinLength || null;
|
|
|
|
// turn the plugin instance into an observer
|
|
var observerPrototypeKeys = Object.getOwnPropertyNames(this.util.Observer.prototype);
|
|
observerPrototypeKeys.forEach(function (key) {
|
|
_region.Region.prototype[key] = _this.util.Observer.prototype[key];
|
|
});
|
|
this.wavesurfer.Region = _region.Region;
|
|
this._onBackendCreated = function () {
|
|
_this.wrapper = _this.wavesurfer.drawer.wrapper;
|
|
if (_this.params.regions) {
|
|
_this.params.regions.forEach(function (region) {
|
|
region.edgeScrollWidth = _this.params.edgeScrollWidth || _this.wrapper.clientWidth * 0.05;
|
|
_this.add(region);
|
|
});
|
|
}
|
|
};
|
|
|
|
// Id-based hash of regions
|
|
this.list = {};
|
|
this._onReady = function () {
|
|
_this.wrapper = _this.wavesurfer.drawer.wrapper;
|
|
if (_this.params.dragSelection) {
|
|
_this.enableDragSelection(_this.params);
|
|
}
|
|
Object.keys(_this.list).forEach(function (id) {
|
|
_this.list[id].updateRender();
|
|
});
|
|
};
|
|
}
|
|
_createClass(RegionsPlugin, [{
|
|
key: "init",
|
|
value: function init() {
|
|
// Check if ws is ready
|
|
if (this.wavesurfer.isReady) {
|
|
this._onBackendCreated();
|
|
this._onReady();
|
|
} else {
|
|
this.wavesurfer.once('ready', this._onReady);
|
|
this.wavesurfer.once('backend-created', this._onBackendCreated);
|
|
}
|
|
}
|
|
}, {
|
|
key: "destroy",
|
|
value: function destroy() {
|
|
this.wavesurfer.un('ready', this._onReady);
|
|
this.wavesurfer.un('backend-created', this._onBackendCreated);
|
|
this.disableDragSelection();
|
|
this.clear();
|
|
}
|
|
|
|
/**
|
|
* check to see if adding a new region would exceed maxRegions
|
|
* @return {boolean} whether we should proceed and create a region
|
|
* @private
|
|
*/
|
|
}, {
|
|
key: "wouldExceedMaxRegions",
|
|
value: function wouldExceedMaxRegions() {
|
|
return this.maxRegions && Object.keys(this.list).length >= this.maxRegions;
|
|
}
|
|
|
|
/**
|
|
* Add a region
|
|
*
|
|
* @param {object} params Region parameters
|
|
* @return {Region} The created region
|
|
*/
|
|
}, {
|
|
key: "add",
|
|
value: function add(params) {
|
|
var _this2 = this;
|
|
if (this.wouldExceedMaxRegions()) return null;
|
|
if (!params.minLength && this.regionsMinLength) {
|
|
params = _objectSpread(_objectSpread({}, params), {}, {
|
|
minLength: this.regionsMinLength
|
|
});
|
|
}
|
|
var region = new this.wavesurfer.Region(params, this.util, this.wavesurfer);
|
|
this.list[region.id] = region;
|
|
region.on('remove', function () {
|
|
delete _this2.list[region.id];
|
|
});
|
|
return region;
|
|
}
|
|
|
|
/**
|
|
* Remove all regions
|
|
*/
|
|
}, {
|
|
key: "clear",
|
|
value: function clear() {
|
|
var _this3 = this;
|
|
Object.keys(this.list).forEach(function (id) {
|
|
_this3.list[id].remove();
|
|
});
|
|
}
|
|
}, {
|
|
key: "enableDragSelection",
|
|
value: function enableDragSelection(params) {
|
|
var _this4 = this;
|
|
this.disableDragSelection();
|
|
var slop = params.slop || 2;
|
|
var container = this.wavesurfer.drawer.container;
|
|
var scroll = params.scroll !== false && this.wavesurfer.params.scrollParent;
|
|
var scrollSpeed = params.scrollSpeed || 1;
|
|
var scrollThreshold = params.scrollThreshold || 10;
|
|
var drag;
|
|
var duration = this.wavesurfer.getDuration();
|
|
var maxScroll;
|
|
var start;
|
|
var region;
|
|
var touchId;
|
|
var pxMove = 0;
|
|
var scrollDirection;
|
|
var wrapperRect;
|
|
|
|
// Scroll when the user is dragging within the threshold
|
|
var edgeScroll = function edgeScroll(e) {
|
|
if (!region || !scrollDirection) {
|
|
return;
|
|
}
|
|
|
|
// Update scroll position
|
|
var scrollLeft = _this4.wrapper.scrollLeft + scrollSpeed * scrollDirection;
|
|
_this4.wrapper.scrollLeft = scrollLeft = Math.min(maxScroll, Math.max(0, scrollLeft));
|
|
|
|
// Update range
|
|
var end = _this4.wavesurfer.drawer.handleEvent(e);
|
|
region.update({
|
|
start: Math.min(end * duration, start * duration),
|
|
end: Math.max(end * duration, start * duration)
|
|
});
|
|
|
|
// Check that there is more to scroll and repeat
|
|
if (scrollLeft < maxScroll && scrollLeft > 0) {
|
|
window.requestAnimationFrame(function () {
|
|
edgeScroll(e);
|
|
});
|
|
}
|
|
};
|
|
var eventDown = function eventDown(e) {
|
|
if (e.touches && e.touches.length > 1) {
|
|
return;
|
|
}
|
|
duration = _this4.wavesurfer.getDuration();
|
|
touchId = e.targetTouches ? e.targetTouches[0].identifier : null;
|
|
|
|
// Store for scroll calculations
|
|
maxScroll = _this4.wrapper.scrollWidth - _this4.wrapper.clientWidth;
|
|
wrapperRect = _this4.wrapper.getBoundingClientRect();
|
|
drag = true;
|
|
start = _this4.wavesurfer.drawer.handleEvent(e, true);
|
|
region = null;
|
|
scrollDirection = null;
|
|
};
|
|
this.wrapper.addEventListener('mousedown', eventDown);
|
|
this.wrapper.addEventListener('touchstart', eventDown);
|
|
this.on('disable-drag-selection', function () {
|
|
_this4.wrapper.removeEventListener('touchstart', eventDown);
|
|
_this4.wrapper.removeEventListener('mousedown', eventDown);
|
|
});
|
|
var eventUp = function eventUp(e) {
|
|
if (e.touches && e.touches.length > 1) {
|
|
return;
|
|
}
|
|
drag = false;
|
|
pxMove = 0;
|
|
scrollDirection = null;
|
|
if (region) {
|
|
_this4.util.preventClick();
|
|
region.fireEvent('update-end', e);
|
|
_this4.wavesurfer.fireEvent('region-update-end', region, e);
|
|
}
|
|
region = null;
|
|
};
|
|
this.wrapper.addEventListener('mouseleave', eventUp);
|
|
this.wrapper.addEventListener('mouseup', eventUp);
|
|
this.wrapper.addEventListener('touchend', eventUp);
|
|
document.body.addEventListener('mouseup', eventUp);
|
|
document.body.addEventListener('touchend', eventUp);
|
|
this.on('disable-drag-selection', function () {
|
|
document.body.removeEventListener('mouseup', eventUp);
|
|
document.body.removeEventListener('touchend', eventUp);
|
|
_this4.wrapper.removeEventListener('touchend', eventUp);
|
|
_this4.wrapper.removeEventListener('mouseup', eventUp);
|
|
_this4.wrapper.removeEventListener('mouseleave', eventUp);
|
|
});
|
|
var eventMove = function eventMove(e) {
|
|
if (!drag) {
|
|
return;
|
|
}
|
|
if (++pxMove <= slop) {
|
|
return;
|
|
}
|
|
if (e.touches && e.touches.length > 1) {
|
|
return;
|
|
}
|
|
if (e.targetTouches && e.targetTouches[0].identifier != touchId) {
|
|
return;
|
|
}
|
|
|
|
// auto-create a region during mouse drag, unless region-count would exceed "maxRegions"
|
|
if (!region) {
|
|
region = _this4.add(params || {});
|
|
if (!region) return;
|
|
}
|
|
var end = _this4.wavesurfer.drawer.handleEvent(e);
|
|
var startUpdate = _this4.wavesurfer.regions.util.getRegionSnapToGridValue(start * duration);
|
|
var endUpdate = _this4.wavesurfer.regions.util.getRegionSnapToGridValue(end * duration);
|
|
region.update({
|
|
start: Math.min(endUpdate, startUpdate),
|
|
end: Math.max(endUpdate, startUpdate)
|
|
});
|
|
|
|
// If scrolling is enabled
|
|
if (scroll && container.clientWidth < _this4.wrapper.scrollWidth) {
|
|
// Check threshold based on mouse
|
|
var x = e.clientX - wrapperRect.left;
|
|
if (x <= scrollThreshold) {
|
|
scrollDirection = -1;
|
|
} else if (x >= wrapperRect.right - scrollThreshold) {
|
|
scrollDirection = 1;
|
|
} else {
|
|
scrollDirection = null;
|
|
}
|
|
scrollDirection && edgeScroll(e);
|
|
}
|
|
};
|
|
this.wrapper.addEventListener('mousemove', eventMove);
|
|
this.wrapper.addEventListener('touchmove', eventMove);
|
|
this.on('disable-drag-selection', function () {
|
|
_this4.wrapper.removeEventListener('touchmove', eventMove);
|
|
_this4.wrapper.removeEventListener('mousemove', eventMove);
|
|
});
|
|
this.wavesurfer.on('region-created', function (region) {
|
|
if (_this4.regionsMinLength) {
|
|
region.minLength = _this4.regionsMinLength;
|
|
}
|
|
});
|
|
}
|
|
}, {
|
|
key: "disableDragSelection",
|
|
value: function disableDragSelection() {
|
|
this.fireEvent('disable-drag-selection');
|
|
}
|
|
|
|
/**
|
|
* Get current region
|
|
*
|
|
* The smallest region that contains the current time. If several such
|
|
* regions exist, take the first. Return `null` if none exist.
|
|
*
|
|
* @returns {Region} The current region
|
|
*/
|
|
}, {
|
|
key: "getCurrentRegion",
|
|
value: function getCurrentRegion() {
|
|
var _this5 = this;
|
|
var time = this.wavesurfer.getCurrentTime();
|
|
var min = null;
|
|
Object.keys(this.list).forEach(function (id) {
|
|
var cur = _this5.list[id];
|
|
if (cur.start <= time && cur.end >= time) {
|
|
if (!min || cur.end - cur.start < min.end - min.start) {
|
|
min = cur;
|
|
}
|
|
}
|
|
});
|
|
return min;
|
|
}
|
|
|
|
/**
|
|
* Match the value to the grid, if required
|
|
*
|
|
* If the regions plugin params have a snapToGridInterval set, return the
|
|
* value matching the nearest grid interval. If no snapToGridInterval is set,
|
|
* the passed value will be returned without modification.
|
|
*
|
|
* @param {number} value the value to snap to the grid, if needed
|
|
* @param {Object} params the regions plugin params
|
|
* @returns {number} value
|
|
*/
|
|
}, {
|
|
key: "getRegionSnapToGridValue",
|
|
value: function getRegionSnapToGridValue(value, params) {
|
|
if (params.snapToGridInterval) {
|
|
// the regions should snap to a grid
|
|
var offset = params.snapToGridOffset || 0;
|
|
return Math.round((value - offset) / params.snapToGridInterval) * params.snapToGridInterval + offset;
|
|
}
|
|
|
|
// no snap-to-grid
|
|
return value;
|
|
}
|
|
}], [{
|
|
key: "create",
|
|
value:
|
|
/**
|
|
* Regions plugin definition factory
|
|
*
|
|
* This function must be used to create a plugin definition which can be
|
|
* used by wavesurfer to correctly instantiate the plugin.
|
|
*
|
|
* @param {RegionsPluginParams} params parameters use to initialise the plugin
|
|
* @return {PluginDefinition} an object representing the plugin
|
|
*/
|
|
function create(params) {
|
|
return {
|
|
name: 'regions',
|
|
deferInit: params && params.deferInit ? params.deferInit : false,
|
|
params: params,
|
|
staticProps: {
|
|
addRegion: function addRegion(options) {
|
|
if (!this.initialisedPluginList.regions) {
|
|
this.initPlugin('regions');
|
|
}
|
|
return this.regions.add(options);
|
|
},
|
|
clearRegions: function clearRegions() {
|
|
this.regions && this.regions.clear();
|
|
},
|
|
enableDragSelection: function enableDragSelection(options) {
|
|
if (!this.initialisedPluginList.regions) {
|
|
this.initPlugin('regions');
|
|
}
|
|
this.regions.enableDragSelection(options);
|
|
},
|
|
disableDragSelection: function disableDragSelection() {
|
|
this.regions.disableDragSelection();
|
|
}
|
|
},
|
|
instance: RegionsPlugin
|
|
};
|
|
}
|
|
}]);
|
|
return RegionsPlugin;
|
|
}();
|
|
module.exports = exports.default;
|
|
|
|
/***/ }),
|
|
|
|
/***/ "./src/plugin/regions/region.js":
|
|
/*!**************************************!*\
|
|
!*** ./src/plugin/regions/region.js ***!
|
|
\**************************************/
|
|
/***/ ((__unused_webpack_module, exports) => {
|
|
|
|
|
|
|
|
Object.defineProperty(exports, "__esModule", ({
|
|
value: true
|
|
}));
|
|
exports.Region = void 0;
|
|
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
|
|
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
|
|
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
/**
|
|
* @since 4.0.0
|
|
*
|
|
* (Single) Region plugin class
|
|
*
|
|
* Must be turned into an observer before instantiating. This is done in
|
|
* `RegionsPlugin` (main plugin class).
|
|
*
|
|
* @extends {Observer}
|
|
*/
|
|
var Region = exports.Region = /*#__PURE__*/function () {
|
|
function Region(params, regionsUtils, ws) {
|
|
var _this = this;
|
|
_classCallCheck(this, Region);
|
|
this.wavesurfer = ws;
|
|
this.wrapper = ws.drawer.wrapper;
|
|
this.util = ws.util;
|
|
this.style = this.util.style;
|
|
this.regionsUtil = regionsUtils;
|
|
this.id = params.id == null ? ws.util.getId() : params.id;
|
|
this.start = Number(params.start) || 0;
|
|
this.end = params.end == null ?
|
|
// small marker-like region
|
|
this.start + 4 / this.wrapper.scrollWidth * this.wavesurfer.getDuration() : Number(params.end);
|
|
this.resize = params.resize === undefined ? true : Boolean(params.resize);
|
|
this.drag = params.drag === undefined ? true : Boolean(params.drag);
|
|
// reflect resize and drag state of region for region-updated listener
|
|
this.isResizing = false;
|
|
this.isDragging = false;
|
|
this.loop = Boolean(params.loop);
|
|
this.color = params.color || 'rgba(0, 0, 0, 0.1)';
|
|
// The left and right handleStyle properties can be set to 'none' for
|
|
// no styling or can be assigned an object containing CSS properties.
|
|
this.handleStyle = params.handleStyle || {
|
|
left: {},
|
|
right: {}
|
|
};
|
|
this.handleLeftEl = null;
|
|
this.handleRightEl = null;
|
|
this.data = params.data || {};
|
|
this.attributes = params.attributes || {};
|
|
this.maxLength = params.maxLength;
|
|
// It assumes the minLength parameter value, or the regionsMinLength parameter value, if the first one not provided
|
|
this.minLength = params.minLength;
|
|
this._onRedraw = function () {
|
|
return _this.updateRender();
|
|
};
|
|
this.scroll = params.scroll !== false && ws.params.scrollParent;
|
|
this.scrollSpeed = params.scrollSpeed || 1;
|
|
this.scrollThreshold = params.scrollThreshold || 10;
|
|
// Determines whether the context menu is prevented from being opened.
|
|
this.preventContextMenu = params.preventContextMenu === undefined ? false : Boolean(params.preventContextMenu);
|
|
|
|
// select channel ID to set region
|
|
var channelIdx = params.channelIdx == null ? -1 : parseInt(params.channelIdx);
|
|
this.regionHeight = '100%';
|
|
this.marginTop = '0px';
|
|
if (channelIdx !== -1) {
|
|
var channelCount = this.wavesurfer.backend.buffer != null ? this.wavesurfer.backend.buffer.numberOfChannels : -1;
|
|
if (channelCount >= 0 && channelIdx < channelCount) {
|
|
this.regionHeight = Math.floor(1 / channelCount * 100) + '%';
|
|
this.marginTop = this.wavesurfer.getHeight() * channelIdx + 'px';
|
|
}
|
|
}
|
|
this.formatTimeCallback = params.formatTimeCallback;
|
|
this.edgeScrollWidth = params.edgeScrollWidth;
|
|
this.bindInOut();
|
|
this.render();
|
|
this.wavesurfer.on('zoom', this._onRedraw);
|
|
this.wavesurfer.on('redraw', this._onRedraw);
|
|
this.wavesurfer.fireEvent('region-created', this);
|
|
}
|
|
|
|
/* Update region params. */
|
|
_createClass(Region, [{
|
|
key: "update",
|
|
value: function update(params) {
|
|
if (params.start != null) {
|
|
this.start = Number(params.start);
|
|
}
|
|
if (params.end != null) {
|
|
this.end = Number(params.end);
|
|
}
|
|
if (params.loop != null) {
|
|
this.loop = Boolean(params.loop);
|
|
}
|
|
if (params.color != null) {
|
|
this.color = params.color;
|
|
}
|
|
if (params.handleStyle != null) {
|
|
this.handleStyle = params.handleStyle;
|
|
}
|
|
if (params.data != null) {
|
|
this.data = params.data;
|
|
}
|
|
if (params.resize != null) {
|
|
this.resize = Boolean(params.resize);
|
|
this.updateHandlesResize(this.resize);
|
|
}
|
|
if (params.drag != null) {
|
|
this.drag = Boolean(params.drag);
|
|
}
|
|
if (params.maxLength != null) {
|
|
this.maxLength = Number(params.maxLength);
|
|
}
|
|
if (params.minLength != null) {
|
|
this.minLength = Number(params.minLength);
|
|
}
|
|
if (params.attributes != null) {
|
|
this.attributes = params.attributes;
|
|
}
|
|
this.updateRender();
|
|
this.fireEvent('update');
|
|
this.wavesurfer.fireEvent('region-updated', this);
|
|
}
|
|
|
|
/* Remove a single region. */
|
|
}, {
|
|
key: "remove",
|
|
value: function remove() {
|
|
if (this.element) {
|
|
this.wrapper.removeChild(this.element);
|
|
this.element = null;
|
|
this.fireEvent('remove');
|
|
this.wavesurfer.un('zoom', this._onRedraw);
|
|
this.wavesurfer.un('redraw', this._onRedraw);
|
|
this.wavesurfer.fireEvent('region-removed', this);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Play the audio region.
|
|
* @param {number} start Optional offset to start playing at
|
|
*/
|
|
}, {
|
|
key: "play",
|
|
value: function play(start) {
|
|
var s = start || this.start;
|
|
this.wavesurfer.play(s, this.end);
|
|
this.fireEvent('play');
|
|
this.wavesurfer.fireEvent('region-play', this);
|
|
}
|
|
|
|
/**
|
|
* Play the audio region in a loop.
|
|
* @param {number} start Optional offset to start playing at
|
|
* */
|
|
}, {
|
|
key: "playLoop",
|
|
value: function playLoop(start) {
|
|
this.loop = true;
|
|
this.play(start);
|
|
}
|
|
|
|
/**
|
|
* Set looping on/off.
|
|
* @param {boolean} loop True if should play in loop
|
|
*/
|
|
}, {
|
|
key: "setLoop",
|
|
value: function setLoop(loop) {
|
|
this.loop = loop;
|
|
}
|
|
|
|
/* Render a region as a DOM element. */
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var regionEl = document.createElement('region');
|
|
regionEl.className = 'wavesurfer-region';
|
|
regionEl.title = this.formatTime(this.start, this.end);
|
|
regionEl.setAttribute('data-id', this.id);
|
|
for (var attrname in this.attributes) {
|
|
regionEl.setAttribute('data-region-' + attrname, this.attributes[attrname]);
|
|
}
|
|
this.style(regionEl, {
|
|
position: 'absolute',
|
|
zIndex: 2,
|
|
height: this.regionHeight,
|
|
top: this.marginTop
|
|
});
|
|
|
|
/* Resize handles */
|
|
if (this.resize) {
|
|
this.handleLeftEl = regionEl.appendChild(document.createElement('handle'));
|
|
this.handleRightEl = regionEl.appendChild(document.createElement('handle'));
|
|
this.handleLeftEl.className = 'wavesurfer-handle wavesurfer-handle-start';
|
|
this.handleRightEl.className = 'wavesurfer-handle wavesurfer-handle-end';
|
|
|
|
// Default CSS properties for both handles.
|
|
var css = {
|
|
cursor: 'col-resize',
|
|
position: 'absolute',
|
|
top: '0px',
|
|
width: '2px',
|
|
height: '100%',
|
|
backgroundColor: 'rgba(0, 0, 0, 1)'
|
|
};
|
|
|
|
// Merge CSS properties per handle.
|
|
var handleLeftCss = this.handleStyle.left !== 'none' ? Object.assign({
|
|
left: '0px'
|
|
}, css, this.handleStyle.left) : null;
|
|
var handleRightCss = this.handleStyle.right !== 'none' ? Object.assign({
|
|
right: '0px'
|
|
}, css, this.handleStyle.right) : null;
|
|
if (handleLeftCss) {
|
|
this.style(this.handleLeftEl, handleLeftCss);
|
|
}
|
|
if (handleRightCss) {
|
|
this.style(this.handleRightEl, handleRightCss);
|
|
}
|
|
}
|
|
this.element = this.wrapper.appendChild(regionEl);
|
|
this.updateRender();
|
|
this.bindEvents(regionEl);
|
|
}
|
|
}, {
|
|
key: "formatTime",
|
|
value: function formatTime(start, end) {
|
|
if (this.formatTimeCallback) {
|
|
return this.formatTimeCallback(start, end);
|
|
}
|
|
return (start == end ? [start] : [start, end]).map(function (time) {
|
|
return [Math.floor(time % 3600 / 60),
|
|
// minutes
|
|
('00' + Math.floor(time % 60)).slice(-2) // seconds
|
|
].join(':');
|
|
}).join('-');
|
|
}
|
|
}, {
|
|
key: "getWidth",
|
|
value: function getWidth() {
|
|
return this.wavesurfer.drawer.width / this.wavesurfer.params.pixelRatio;
|
|
}
|
|
|
|
/* Update element's position, width, color. */
|
|
}, {
|
|
key: "updateRender",
|
|
value: function updateRender() {
|
|
// duration varies during loading process, so don't overwrite important data
|
|
var dur = this.wavesurfer.getDuration();
|
|
var width = this.getWidth();
|
|
var startLimited = this.start;
|
|
var endLimited = this.end;
|
|
if (startLimited < 0) {
|
|
startLimited = 0;
|
|
endLimited = endLimited - startLimited;
|
|
}
|
|
if (endLimited > dur) {
|
|
endLimited = dur;
|
|
startLimited = dur - (endLimited - startLimited);
|
|
}
|
|
if (this.minLength != null) {
|
|
endLimited = Math.max(startLimited + this.minLength, endLimited);
|
|
}
|
|
if (this.maxLength != null) {
|
|
endLimited = Math.min(startLimited + this.maxLength, endLimited);
|
|
}
|
|
if (this.element != null) {
|
|
// Calculate the left and width values of the region such that
|
|
// no gaps appear between regions.
|
|
var left = Math.round(startLimited / dur * width);
|
|
var regionWidth = Math.round(endLimited / dur * width) - left;
|
|
this.style(this.element, {
|
|
left: left + 'px',
|
|
width: regionWidth + 'px',
|
|
backgroundColor: this.color,
|
|
cursor: this.drag ? 'move' : 'default'
|
|
});
|
|
for (var attrname in this.attributes) {
|
|
this.element.setAttribute('data-region-' + attrname, this.attributes[attrname]);
|
|
}
|
|
this.element.title = this.formatTime(this.start, this.end);
|
|
}
|
|
}
|
|
|
|
/* Bind audio events. */
|
|
}, {
|
|
key: "bindInOut",
|
|
value: function bindInOut() {
|
|
var _this2 = this;
|
|
this.firedIn = false;
|
|
this.firedOut = false;
|
|
var onProcess = function onProcess(time) {
|
|
var start = Math.round(_this2.start * 10) / 10;
|
|
var end = Math.round(_this2.end * 10) / 10;
|
|
time = Math.round(time * 10) / 10;
|
|
if (!_this2.firedOut && _this2.firedIn && (start > time || end <= time)) {
|
|
_this2.firedOut = true;
|
|
_this2.firedIn = false;
|
|
_this2.fireEvent('out');
|
|
_this2.wavesurfer.fireEvent('region-out', _this2);
|
|
}
|
|
if (!_this2.firedIn && start <= time && end > time) {
|
|
_this2.firedIn = true;
|
|
_this2.firedOut = false;
|
|
_this2.fireEvent('in');
|
|
_this2.wavesurfer.fireEvent('region-in', _this2);
|
|
}
|
|
};
|
|
this.wavesurfer.backend.on('audioprocess', onProcess);
|
|
this.on('remove', function () {
|
|
_this2.wavesurfer.backend.un('audioprocess', onProcess);
|
|
});
|
|
|
|
/* Loop playback. */
|
|
this.on('out', function () {
|
|
if (_this2.loop) {
|
|
var realTime = _this2.wavesurfer.getCurrentTime();
|
|
if (realTime >= _this2.start && realTime <= _this2.end) {
|
|
_this2.wavesurfer.play(_this2.start);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
/* Bind DOM events. */
|
|
}, {
|
|
key: "bindEvents",
|
|
value: function bindEvents() {
|
|
var _this3 = this;
|
|
var preventContextMenu = this.preventContextMenu;
|
|
this.element.addEventListener('mouseenter', function (e) {
|
|
_this3.fireEvent('mouseenter', e);
|
|
_this3.wavesurfer.fireEvent('region-mouseenter', _this3, e);
|
|
});
|
|
this.element.addEventListener('mouseleave', function (e) {
|
|
_this3.fireEvent('mouseleave', e);
|
|
_this3.wavesurfer.fireEvent('region-mouseleave', _this3, e);
|
|
});
|
|
this.element.addEventListener('click', function (e) {
|
|
e.preventDefault();
|
|
_this3.fireEvent('click', e);
|
|
_this3.wavesurfer.fireEvent('region-click', _this3, e);
|
|
});
|
|
this.element.addEventListener('dblclick', function (e) {
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
_this3.fireEvent('dblclick', e);
|
|
_this3.wavesurfer.fireEvent('region-dblclick', _this3, e);
|
|
});
|
|
this.element.addEventListener('contextmenu', function (e) {
|
|
if (preventContextMenu) {
|
|
e.preventDefault();
|
|
}
|
|
_this3.fireEvent('contextmenu', e);
|
|
_this3.wavesurfer.fireEvent('region-contextmenu', _this3, e);
|
|
});
|
|
|
|
/* Drag or resize on mousemove. */
|
|
if (this.drag || this.resize) {
|
|
this.bindDragEvents();
|
|
}
|
|
}
|
|
}, {
|
|
key: "bindDragEvents",
|
|
value: function bindDragEvents() {
|
|
var _this4 = this;
|
|
var container = this.wavesurfer.drawer.container;
|
|
var scrollSpeed = this.scrollSpeed;
|
|
var scrollThreshold = this.scrollThreshold;
|
|
var startTime;
|
|
var touchId;
|
|
var drag;
|
|
var maxScroll;
|
|
var resize;
|
|
var updated = false;
|
|
var scrollDirection;
|
|
var wrapperRect;
|
|
var regionLeftHalfTime;
|
|
var regionRightHalfTime;
|
|
|
|
// Scroll when the user is dragging within the threshold
|
|
var edgeScroll = function edgeScroll(e) {
|
|
var duration = _this4.wavesurfer.getDuration();
|
|
if (!scrollDirection || !drag && !resize) {
|
|
return;
|
|
}
|
|
var x = e.clientX;
|
|
var distanceBetweenCursorAndWrapperEdge = 0;
|
|
var regionHalfTimeWidth = 0;
|
|
var adjustment = 0;
|
|
|
|
// Get the currently selected time according to the mouse position
|
|
var time = _this4.regionsUtil.getRegionSnapToGridValue(_this4.wavesurfer.drawer.handleEvent(e) * duration);
|
|
if (drag) {
|
|
// Considering the point of contact with the region while edgescrolling
|
|
if (scrollDirection === -1) {
|
|
regionHalfTimeWidth = regionLeftHalfTime * _this4.wavesurfer.params.minPxPerSec;
|
|
distanceBetweenCursorAndWrapperEdge = x - wrapperRect.left;
|
|
} else {
|
|
regionHalfTimeWidth = regionRightHalfTime * _this4.wavesurfer.params.minPxPerSec;
|
|
distanceBetweenCursorAndWrapperEdge = wrapperRect.right - x;
|
|
}
|
|
} else {
|
|
// Considering minLength while edgescroll
|
|
var minLength = _this4.minLength;
|
|
if (!minLength) {
|
|
minLength = 0;
|
|
}
|
|
if (resize === 'start') {
|
|
if (time > _this4.end - minLength) {
|
|
time = _this4.end - minLength;
|
|
adjustment = scrollSpeed * scrollDirection;
|
|
}
|
|
if (time < 0) {
|
|
time = 0;
|
|
}
|
|
} else if (resize === 'end') {
|
|
if (time < _this4.start + minLength) {
|
|
time = _this4.start + minLength;
|
|
adjustment = scrollSpeed * scrollDirection;
|
|
}
|
|
if (time > duration) {
|
|
time = duration;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Don't edgescroll if region has reached min or max limit
|
|
if (scrollDirection === -1) {
|
|
if (Math.round(_this4.wrapper.scrollLeft) === 0) {
|
|
return;
|
|
}
|
|
if (Math.round(_this4.wrapper.scrollLeft - regionHalfTimeWidth + distanceBetweenCursorAndWrapperEdge) <= 0) {
|
|
return;
|
|
}
|
|
} else {
|
|
if (Math.round(_this4.wrapper.scrollLeft) === maxScroll) {
|
|
return;
|
|
}
|
|
if (Math.round(_this4.wrapper.scrollLeft + regionHalfTimeWidth - distanceBetweenCursorAndWrapperEdge) >= maxScroll) {
|
|
return;
|
|
}
|
|
}
|
|
|
|
// Update scroll position
|
|
var scrollLeft = _this4.wrapper.scrollLeft - adjustment + scrollSpeed * scrollDirection;
|
|
if (scrollDirection === -1) {
|
|
var calculatedLeft = Math.max(0 + regionHalfTimeWidth - distanceBetweenCursorAndWrapperEdge, scrollLeft);
|
|
_this4.wrapper.scrollLeft = scrollLeft = calculatedLeft;
|
|
} else {
|
|
var calculatedRight = Math.min(maxScroll - regionHalfTimeWidth + distanceBetweenCursorAndWrapperEdge, scrollLeft);
|
|
_this4.wrapper.scrollLeft = scrollLeft = calculatedRight;
|
|
}
|
|
var delta = time - startTime;
|
|
startTime = time;
|
|
|
|
// Continue dragging or resizing
|
|
drag ? _this4.onDrag(delta) : _this4.onResize(delta, resize);
|
|
|
|
// Repeat
|
|
window.requestAnimationFrame(function () {
|
|
edgeScroll(e);
|
|
});
|
|
};
|
|
var onDown = function onDown(e) {
|
|
var duration = _this4.wavesurfer.getDuration();
|
|
if (e.touches && e.touches.length > 1) {
|
|
return;
|
|
}
|
|
touchId = e.targetTouches ? e.targetTouches[0].identifier : null;
|
|
|
|
// stop the event propagation, if this region is resizable or draggable
|
|
// and the event is therefore handled here.
|
|
if (_this4.drag || _this4.resize) {
|
|
e.stopPropagation();
|
|
}
|
|
|
|
// Store the selected startTime we begun dragging or resizing
|
|
startTime = _this4.regionsUtil.getRegionSnapToGridValue(_this4.wavesurfer.drawer.handleEvent(e, true) * duration);
|
|
|
|
// Store the selected point of contact when we begin dragging
|
|
regionLeftHalfTime = startTime - _this4.start;
|
|
regionRightHalfTime = _this4.end - startTime;
|
|
|
|
// Store for scroll calculations
|
|
maxScroll = _this4.wrapper.scrollWidth - _this4.wrapper.clientWidth;
|
|
wrapperRect = _this4.wrapper.getBoundingClientRect();
|
|
_this4.isResizing = false;
|
|
_this4.isDragging = false;
|
|
if (e.target.tagName.toLowerCase() === 'handle') {
|
|
_this4.isResizing = true;
|
|
resize = e.target.classList.contains('wavesurfer-handle-start') ? 'start' : 'end';
|
|
} else {
|
|
_this4.isDragging = true;
|
|
drag = true;
|
|
resize = false;
|
|
}
|
|
};
|
|
var onUp = function onUp(e) {
|
|
if (e.touches && e.touches.length > 1) {
|
|
return;
|
|
}
|
|
if (drag || resize) {
|
|
_this4.isDragging = false;
|
|
_this4.isResizing = false;
|
|
drag = false;
|
|
scrollDirection = null;
|
|
resize = false;
|
|
}
|
|
if (updated) {
|
|
updated = false;
|
|
_this4.util.preventClick();
|
|
_this4.fireEvent('update-end', e);
|
|
_this4.wavesurfer.fireEvent('region-update-end', _this4, e);
|
|
}
|
|
};
|
|
var onMove = function onMove(e) {
|
|
var duration = _this4.wavesurfer.getDuration();
|
|
if (e.touches && e.touches.length > 1) {
|
|
return;
|
|
}
|
|
if (e.targetTouches && e.targetTouches[0].identifier != touchId) {
|
|
return;
|
|
}
|
|
if (!drag && !resize) {
|
|
return;
|
|
}
|
|
var oldTime = startTime;
|
|
var time = _this4.regionsUtil.getRegionSnapToGridValue(_this4.wavesurfer.drawer.handleEvent(e) * duration);
|
|
if (drag) {
|
|
// To maintain relative cursor start point while dragging
|
|
var maxEnd = _this4.wavesurfer.getDuration();
|
|
if (time > maxEnd - regionRightHalfTime) {
|
|
time = maxEnd - regionRightHalfTime;
|
|
}
|
|
if (time - regionLeftHalfTime < 0) {
|
|
time = regionLeftHalfTime;
|
|
}
|
|
}
|
|
if (resize) {
|
|
// To maintain relative cursor start point while resizing
|
|
// we have to handle for minLength
|
|
var minLength = _this4.minLength;
|
|
if (!minLength) {
|
|
minLength = 0;
|
|
}
|
|
if (resize === 'start') {
|
|
if (time > _this4.end - minLength) {
|
|
time = _this4.end - minLength;
|
|
}
|
|
if (time < 0) {
|
|
time = 0;
|
|
}
|
|
} else if (resize === 'end') {
|
|
if (time < _this4.start + minLength) {
|
|
time = _this4.start + minLength;
|
|
}
|
|
if (time > duration) {
|
|
time = duration;
|
|
}
|
|
}
|
|
}
|
|
var delta = time - startTime;
|
|
startTime = time;
|
|
|
|
// Drag
|
|
if (_this4.drag && drag) {
|
|
updated = updated || !!delta;
|
|
_this4.onDrag(delta);
|
|
}
|
|
|
|
// Resize
|
|
if (_this4.resize && resize) {
|
|
updated = updated || !!delta;
|
|
_this4.onResize(delta, resize);
|
|
}
|
|
if (_this4.scroll && container.clientWidth < _this4.wrapper.scrollWidth) {
|
|
// Triggering edgescroll from within edgeScrollWidth
|
|
if (drag) {
|
|
var x = e.clientX;
|
|
|
|
// Check direction
|
|
if (x < wrapperRect.left + _this4.edgeScrollWidth) {
|
|
scrollDirection = -1;
|
|
} else if (x > wrapperRect.right - _this4.edgeScrollWidth) {
|
|
scrollDirection = 1;
|
|
} else {
|
|
scrollDirection = null;
|
|
}
|
|
} else {
|
|
var _x = e.clientX;
|
|
|
|
// Check direction
|
|
if (_x < wrapperRect.left + _this4.edgeScrollWidth) {
|
|
scrollDirection = -1;
|
|
} else if (_x > wrapperRect.right - _this4.edgeScrollWidth) {
|
|
scrollDirection = 1;
|
|
} else {
|
|
scrollDirection = null;
|
|
}
|
|
}
|
|
if (scrollDirection) {
|
|
edgeScroll(e);
|
|
}
|
|
}
|
|
};
|
|
this.element.addEventListener('mousedown', onDown);
|
|
this.element.addEventListener('touchstart', onDown);
|
|
document.body.addEventListener('mousemove', onMove);
|
|
document.body.addEventListener('touchmove', onMove);
|
|
document.body.addEventListener('mouseup', onUp);
|
|
document.body.addEventListener('touchend', onUp);
|
|
this.on('remove', function () {
|
|
document.body.removeEventListener('mouseup', onUp);
|
|
document.body.removeEventListener('touchend', onUp);
|
|
document.body.removeEventListener('mousemove', onMove);
|
|
document.body.removeEventListener('touchmove', onMove);
|
|
});
|
|
this.wavesurfer.on('destroy', function () {
|
|
document.body.removeEventListener('mouseup', onUp);
|
|
document.body.removeEventListener('touchend', onUp);
|
|
});
|
|
}
|
|
}, {
|
|
key: "onDrag",
|
|
value: function onDrag(delta) {
|
|
var maxEnd = this.wavesurfer.getDuration();
|
|
if (this.end + delta > maxEnd) {
|
|
delta = maxEnd - this.end;
|
|
}
|
|
if (this.start + delta < 0) {
|
|
delta = this.start * -1;
|
|
}
|
|
this.update({
|
|
start: this.start + delta,
|
|
end: this.end + delta
|
|
});
|
|
}
|
|
|
|
/**
|
|
* @example
|
|
* onResize(-5, 'start') // Moves the start point 5 seconds back
|
|
* onResize(0.5, 'end') // Moves the end point 0.5 seconds forward
|
|
*
|
|
* @param {number} delta How much to add or subtract, given in seconds
|
|
* @param {string} direction 'start 'or 'end'
|
|
*/
|
|
}, {
|
|
key: "onResize",
|
|
value: function onResize(delta, direction) {
|
|
var duration = this.wavesurfer.getDuration();
|
|
if (direction === 'start') {
|
|
// Check if changing the start by the given delta would result in the region being smaller than minLength
|
|
// Ignore cases where we are making the region wider rather than shrinking it
|
|
if (delta > 0 && this.end - (this.start + delta) < this.minLength) {
|
|
delta = this.end - this.minLength - this.start;
|
|
}
|
|
if (delta < 0 && this.start + delta < 0) {
|
|
delta = this.start * -1;
|
|
}
|
|
this.update({
|
|
start: Math.min(this.start + delta, this.end),
|
|
end: Math.max(this.start + delta, this.end)
|
|
});
|
|
} else {
|
|
// Check if changing the end by the given delta would result in the region being smaller than minLength
|
|
// Ignore cases where we are making the region wider rather than shrinking it
|
|
if (delta < 0 && this.end + delta - this.start < this.minLength) {
|
|
delta = this.start + this.minLength - this.end;
|
|
}
|
|
if (delta > 0 && this.end + delta > duration) {
|
|
delta = duration - this.end;
|
|
}
|
|
this.update({
|
|
start: Math.min(this.end + delta, this.start),
|
|
end: Math.max(this.end + delta, this.start)
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "updateHandlesResize",
|
|
value: function updateHandlesResize(resize) {
|
|
var cursorStyle = resize ? 'col-resize' : 'auto';
|
|
this.handleLeftEl && this.style(this.handleLeftEl, {
|
|
cursor: cursorStyle
|
|
});
|
|
this.handleRightEl && this.style(this.handleRightEl, {
|
|
cursor: cursorStyle
|
|
});
|
|
}
|
|
}]);
|
|
return Region;
|
|
}();
|
|
|
|
/***/ })
|
|
|
|
/******/ });
|
|
/************************************************************************/
|
|
/******/ // The module cache
|
|
/******/ var __webpack_module_cache__ = {};
|
|
/******/
|
|
/******/ // The require function
|
|
/******/ function __webpack_require__(moduleId) {
|
|
/******/ // Check if module is in cache
|
|
/******/ var cachedModule = __webpack_module_cache__[moduleId];
|
|
/******/ if (cachedModule !== undefined) {
|
|
/******/ return cachedModule.exports;
|
|
/******/ }
|
|
/******/ // Create a new module (and put it into the cache)
|
|
/******/ var module = __webpack_module_cache__[moduleId] = {
|
|
/******/ // no module.id needed
|
|
/******/ // no module.loaded needed
|
|
/******/ exports: {}
|
|
/******/ };
|
|
/******/
|
|
/******/ // Execute the module function
|
|
/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
|
|
/******/
|
|
/******/ // Return the exports of the module
|
|
/******/ return module.exports;
|
|
/******/ }
|
|
/******/
|
|
/************************************************************************/
|
|
/******/
|
|
/******/ // startup
|
|
/******/ // Load entry module and return exports
|
|
/******/ // This entry module is referenced by other modules so it can't be inlined
|
|
/******/ var __webpack_exports__ = __webpack_require__("./src/plugin/regions/index.js");
|
|
/******/
|
|
/******/ return __webpack_exports__;
|
|
/******/ })()
|
|
;
|
|
});
|
|
//# sourceMappingURL=wavesurfer.regions.js.map
|