@checksub_team/peaks_timeline 1.7.0 → 1.8.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/package.json +1 -1
  2. package/peaks.js +37 -20
  3. package/src/mode-layer.js +47 -18
  4. package/src/timeline-zoomview.js +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@checksub_team/peaks_timeline",
3
- "version": "1.7.0",
3
+ "version": "1.8.1",
4
4
  "description": "JavaScript UI component for displaying audio waveforms",
5
5
  "main": "./peaks.js",
6
6
  "types": "./peaks.js.d.ts",
package/peaks.js CHANGED
@@ -15691,9 +15691,11 @@ module.exports = function (Utils, SourceGroup, Konva) {
15691
15691
  'use strict';
15692
15692
  var TIME_X_OFFSET = 20;
15693
15693
  var TIME_Y_OFFSET = 10;
15694
- function ModeLayer(peaks, view, stage, initialMode) {
15694
+ var SNAP_DISTANCE_FOR_CUTTING = 10;
15695
+ function ModeLayer(peaks, view, playheadLayer, stage, initialMode) {
15695
15696
  this._peaks = peaks;
15696
15697
  this._view = view;
15698
+ this._playheadLayer = playheadLayer;
15697
15699
  this._stage = stage;
15698
15700
  this._layer = new Konva.Layer({ listening: this._mode !== 'default' });
15699
15701
  this._prepareDefaultMode();
@@ -15811,37 +15813,37 @@ module.exports = function (Utils, SourceGroup, Konva) {
15811
15813
  this._cutGroup.visible(true);
15812
15814
  this._layer.draw();
15813
15815
  };
15814
- ModeLayer.prototype._updateCursorTime = function (mousePosition) {
15816
+ ModeLayer.prototype._updateCursorTime = function (position) {
15815
15817
  var hoveredElement = this._view.getHoveredElement();
15816
15818
  if (hoveredElement && hoveredElement instanceof SourceGroup && hoveredElement.isCuttable()) {
15817
- this._timeLabel.text(Utils.formatTime(this._view.pixelsToTime(mousePosition.x + this._view.getFrameOffset()), false));
15819
+ this._timeLabel.text(Utils.formatTime(this._view.pixelsToTime(position.x + this._view.getFrameOffset()), false));
15818
15820
  this._timeBackground.width(this._timeLabel.width() + 8);
15819
- this._cursorTime.x(mousePosition.x + TIME_X_OFFSET);
15820
- if (mousePosition.y > this._view.getHeight() - this._timeBackground.height() - TIME_Y_OFFSET) {
15821
- this._cursorTime.y(mousePosition.y - TIME_Y_OFFSET);
15821
+ this._cursorTime.x(position.x + TIME_X_OFFSET);
15822
+ if (position.y > this._view.getHeight() - this._timeBackground.height() - TIME_Y_OFFSET) {
15823
+ this._cursorTime.y(position.y - TIME_Y_OFFSET);
15822
15824
  } else {
15823
- this._cursorTime.y(mousePosition.y + TIME_Y_OFFSET);
15825
+ this._cursorTime.y(position.y + TIME_Y_OFFSET);
15824
15826
  }
15825
15827
  this._cursorTime.visible(true);
15826
15828
  } else {
15827
15829
  this._cursorTime.visible(false);
15828
15830
  }
15829
15831
  };
15830
- ModeLayer.prototype._updateCuttingLine = function (mousePosition) {
15832
+ ModeLayer.prototype._updateCuttingLine = function (position) {
15831
15833
  var hoveredElement = this._view.getHoveredElement();
15832
15834
  if (hoveredElement && hoveredElement instanceof SourceGroup && hoveredElement.isCuttable()) {
15833
15835
  var minSize = this._view.timeToPixels(hoveredElement.getSource().minSize);
15834
15836
  if (hoveredElement.getWidth() >= 2 * minSize) {
15835
15837
  var height = hoveredElement.getCurrentHeight();
15836
15838
  var y = hoveredElement.getY();
15837
- if (mousePosition.x < hoveredElement.x() + minSize) {
15839
+ if (position.x < hoveredElement.x() + minSize) {
15838
15840
  this._cuttingLine.points([
15839
15841
  hoveredElement.x() + minSize,
15840
15842
  y,
15841
15843
  hoveredElement.x() + minSize,
15842
15844
  y + height
15843
15845
  ]);
15844
- } else if (mousePosition.x > hoveredElement.x() + hoveredElement.getWidth() - minSize) {
15846
+ } else if (position.x > hoveredElement.x() + hoveredElement.getWidth() - minSize) {
15845
15847
  this._cuttingLine.points([
15846
15848
  hoveredElement.x() + hoveredElement.getWidth() - minSize,
15847
15849
  y,
@@ -15850,9 +15852,9 @@ module.exports = function (Utils, SourceGroup, Konva) {
15850
15852
  ]);
15851
15853
  } else {
15852
15854
  this._cuttingLine.points([
15853
- mousePosition.x,
15855
+ position.x,
15854
15856
  y,
15855
- mousePosition.x,
15857
+ position.x,
15856
15858
  y + height
15857
15859
  ]);
15858
15860
  }
@@ -15870,8 +15872,17 @@ module.exports = function (Utils, SourceGroup, Konva) {
15870
15872
  ModeLayer.prototype._onMouseMoveInCutMode = function () {
15871
15873
  var mousePosition = this._stage.getPointerPosition();
15872
15874
  mousePosition.x = this._view.timeToPixels(this._view.pixelsToTime(mousePosition.x));
15873
- this._updateCursorTime(mousePosition);
15874
- this._updateCuttingLine(mousePosition);
15875
+ var cuttingPosition = mousePosition;
15876
+ var hoveredElement = this._view.getHoveredElement();
15877
+ if (hoveredElement && hoveredElement instanceof SourceGroup && hoveredElement.isCuttable()) {
15878
+ var playheadPositionX = Math.round(this._view.timeToPixels(this._playheadLayer._time) - this._view.getFrameOffset());
15879
+ var playheadIsOnHoveredElement = playheadPositionX >= hoveredElement.x() && playheadPositionX <= hoveredElement.x() + hoveredElement.getWidth();
15880
+ if (Math.abs(mousePosition.x - playheadPositionX) < SNAP_DISTANCE_FOR_CUTTING && playheadIsOnHoveredElement) {
15881
+ cuttingPosition.x = playheadPositionX;
15882
+ }
15883
+ }
15884
+ this._updateCursorTime(cuttingPosition);
15885
+ this._updateCuttingLine(cuttingPosition);
15875
15886
  this._layer.draw();
15876
15887
  };
15877
15888
  ModeLayer.prototype._onMouseLeaveInCutMode = function () {
@@ -15883,22 +15894,28 @@ module.exports = function (Utils, SourceGroup, Konva) {
15883
15894
  mousePosition.x = this._view.timeToPixels(this._view.pixelsToTime(mousePosition.x));
15884
15895
  var hoveredElement = this._view.getHoveredElement();
15885
15896
  if (hoveredElement && hoveredElement instanceof SourceGroup && hoveredElement.isCuttable()) {
15897
+ var cuttingPosition = mousePosition;
15898
+ var playheadPositionX = Math.round(this._view.timeToPixels(this._playheadLayer._time) - this._view.getFrameOffset());
15899
+ var playheadIsOnHoveredElement = playheadPositionX >= hoveredElement.x() && playheadPositionX <= hoveredElement.x() + hoveredElement.getWidth();
15900
+ if (Math.abs(mousePosition.x - playheadPositionX) < SNAP_DISTANCE_FOR_CUTTING && playheadIsOnHoveredElement) {
15901
+ cuttingPosition.x = playheadPositionX;
15902
+ }
15886
15903
  var minSize = this._view.timeToPixels(hoveredElement.getSource().minSize);
15887
15904
  if (hoveredElement.getWidth() >= 2 * minSize) {
15888
15905
  var cuttingPixel;
15889
- if (mousePosition.x < hoveredElement.x() + minSize) {
15906
+ if (cuttingPosition.x < hoveredElement.x() + minSize) {
15890
15907
  cuttingPixel = hoveredElement.x() + minSize;
15891
- } else if (mousePosition.x > hoveredElement.x() + hoveredElement.getWidth() - minSize) {
15908
+ } else if (cuttingPosition.x > hoveredElement.x() + hoveredElement.getWidth() - minSize) {
15892
15909
  cuttingPixel = hoveredElement.x() + hoveredElement.getWidth() - minSize;
15893
15910
  } else {
15894
- cuttingPixel = mousePosition.x;
15911
+ cuttingPixel = cuttingPosition.x;
15895
15912
  }
15896
15913
  cuttingPixel -= hoveredElement.x();
15897
15914
  this._cuttingLine.visible(false);
15898
15915
  this._peaks.emit('source.cut', hoveredElement.getSource(), this._view.pixelsToTime(cuttingPixel));
15899
15916
  this._view.setHoveredElement(null);
15900
- this._updateCursorTime(mousePosition);
15901
- this._updateCuttingLine(mousePosition);
15917
+ this._updateCursorTime(cuttingPosition);
15918
+ this._updateCuttingLine(cuttingPosition);
15902
15919
  this._layer.draw();
15903
15920
  }
15904
15921
  }
@@ -19917,7 +19934,7 @@ module.exports = function (MouseDragHandler, PlayheadLayer, SourcesLayer, ModeLa
19917
19934
  var time = self._peaks.player.getCurrentTime();
19918
19935
  self._syncPlayhead(time);
19919
19936
  self._hoveredElement = null;
19920
- self._modeLayer = new ModeLayer(peaks, self, self._stage, 'default');
19937
+ self._modeLayer = new ModeLayer(peaks, self, self._playheadLayer, self._stage, 'default');
19921
19938
  self._modeLayer.addToStage(self._stage);
19922
19939
  self._mouseDragHandler = new MouseDragHandler(self._stage, {
19923
19940
  onMouseDown: function (mousePosX, mousePosY) {
package/src/mode-layer.js CHANGED
@@ -15,6 +15,7 @@ define([
15
15
 
16
16
  var TIME_X_OFFSET = 20;
17
17
  var TIME_Y_OFFSET = 10;
18
+ var SNAP_DISTANCE_FOR_CUTTING = 10;
18
19
 
19
20
  /**
20
21
  * Creates a Konva.Layer that displays additionnal information for alternative modes.
@@ -27,9 +28,10 @@ define([
27
28
  * @param {String} initialMode
28
29
  */
29
30
 
30
- function ModeLayer(peaks, view, stage, initialMode) {
31
+ function ModeLayer(peaks, view, playheadLayer, stage, initialMode) {
31
32
  this._peaks = peaks;
32
33
  this._view = view;
34
+ this._playheadLayer = playheadLayer;
33
35
  this._stage = stage;
34
36
 
35
37
  this._layer = new Konva.Layer({
@@ -182,27 +184,27 @@ define([
182
184
  this._layer.draw();
183
185
  };
184
186
 
185
- ModeLayer.prototype._updateCursorTime = function(mousePosition) {
187
+ ModeLayer.prototype._updateCursorTime = function(position) {
186
188
  var hoveredElement = this._view.getHoveredElement();
187
189
 
188
190
  if (hoveredElement && hoveredElement instanceof SourceGroup && hoveredElement.isCuttable()) {
189
191
  this._timeLabel.text(
190
192
  Utils.formatTime(
191
- this._view.pixelsToTime(mousePosition.x + this._view.getFrameOffset()),
193
+ this._view.pixelsToTime(position.x + this._view.getFrameOffset()),
192
194
  false
193
195
  )
194
196
  );
195
197
 
196
198
  this._timeBackground.width(this._timeLabel.width() + 8);
197
199
 
198
- this._cursorTime.x(mousePosition.x + TIME_X_OFFSET);
200
+ this._cursorTime.x(position.x + TIME_X_OFFSET);
199
201
 
200
- if (mousePosition.y > this._view.getHeight()
202
+ if (position.y > this._view.getHeight()
201
203
  - this._timeBackground.height() - TIME_Y_OFFSET) {
202
- this._cursorTime.y(mousePosition.y - TIME_Y_OFFSET);
204
+ this._cursorTime.y(position.y - TIME_Y_OFFSET);
203
205
  }
204
206
  else {
205
- this._cursorTime.y(mousePosition.y + TIME_Y_OFFSET);
207
+ this._cursorTime.y(position.y + TIME_Y_OFFSET);
206
208
  }
207
209
 
208
210
  this._cursorTime.visible(true);
@@ -212,7 +214,7 @@ define([
212
214
  }
213
215
  };
214
216
 
215
- ModeLayer.prototype._updateCuttingLine = function(mousePosition) {
217
+ ModeLayer.prototype._updateCuttingLine = function(position) {
216
218
  var hoveredElement = this._view.getHoveredElement();
217
219
 
218
220
  if (hoveredElement && hoveredElement instanceof SourceGroup && hoveredElement.isCuttable()) {
@@ -222,7 +224,7 @@ define([
222
224
  var height = hoveredElement.getCurrentHeight();
223
225
  var y = hoveredElement.getY();
224
226
 
225
- if (mousePosition.x < hoveredElement.x() + minSize) {
227
+ if (position.x < hoveredElement.x() + minSize) {
226
228
  this._cuttingLine.points([
227
229
  hoveredElement.x() + minSize,
228
230
  y,
@@ -230,7 +232,7 @@ define([
230
232
  y + height
231
233
  ]);
232
234
  }
233
- else if (mousePosition.x
235
+ else if (position.x
234
236
  > hoveredElement.x() + hoveredElement.getWidth() - minSize) {
235
237
  this._cuttingLine.points([
236
238
  hoveredElement.x() + hoveredElement.getWidth() - minSize,
@@ -240,7 +242,7 @@ define([
240
242
  ]);
241
243
  }
242
244
  else {
243
- this._cuttingLine.points([mousePosition.x, y, mousePosition.x, y + height]);
245
+ this._cuttingLine.points([position.x, y, position.x, y + height]);
244
246
  }
245
247
  this._cuttingLine.visible(true);
246
248
  }
@@ -262,8 +264,23 @@ define([
262
264
 
263
265
  mousePosition.x = this._view.timeToPixels(this._view.pixelsToTime(mousePosition.x));
264
266
 
265
- this._updateCursorTime(mousePosition);
266
- this._updateCuttingLine(mousePosition);
267
+ var cuttingPosition = mousePosition;
268
+ var hoveredElement = this._view.getHoveredElement();
269
+
270
+ if (hoveredElement && hoveredElement instanceof SourceGroup && hoveredElement.isCuttable()) {
271
+ var playheadPositionX =
272
+ Math.round(this._view.timeToPixels(this._playheadLayer._time) - this._view.getFrameOffset());
273
+ var playheadIsOnHoveredElement =
274
+ playheadPositionX >= hoveredElement.x() &&
275
+ playheadPositionX <= (hoveredElement.x() + hoveredElement.getWidth());
276
+
277
+ if (Math.abs(mousePosition.x - playheadPositionX) < SNAP_DISTANCE_FOR_CUTTING && playheadIsOnHoveredElement) {
278
+ cuttingPosition.x = playheadPositionX;
279
+ }
280
+ }
281
+
282
+ this._updateCursorTime(cuttingPosition);
283
+ this._updateCuttingLine(cuttingPosition);
267
284
 
268
285
  this._layer.draw();
269
286
  };
@@ -282,21 +299,33 @@ define([
282
299
  var hoveredElement = this._view.getHoveredElement();
283
300
 
284
301
  if (hoveredElement && hoveredElement instanceof SourceGroup && hoveredElement.isCuttable()) {
302
+ var cuttingPosition = mousePosition;
303
+ var playheadPositionX =
304
+ Math.round(this._view.timeToPixels(this._playheadLayer._time) - this._view.getFrameOffset());
305
+
306
+ var playheadIsOnHoveredElement =
307
+ playheadPositionX >= hoveredElement.x() &&
308
+ playheadPositionX <= (hoveredElement.x() + hoveredElement.getWidth());
309
+
310
+ if (Math.abs(mousePosition.x - playheadPositionX) < SNAP_DISTANCE_FOR_CUTTING && playheadIsOnHoveredElement) {
311
+ cuttingPosition.x = playheadPositionX;
312
+ }
313
+
285
314
  var minSize = this._view.timeToPixels(hoveredElement.getSource().minSize);
286
315
 
287
316
  if (hoveredElement.getWidth() >= 2 * minSize) {
288
317
  var cuttingPixel;
289
318
 
290
- if (mousePosition.x < hoveredElement.x() + minSize) {
319
+ if (cuttingPosition.x < hoveredElement.x() + minSize) {
291
320
  cuttingPixel = hoveredElement.x() + minSize;
292
321
  }
293
- else if (mousePosition.x
322
+ else if (cuttingPosition.x
294
323
  > hoveredElement.x() + hoveredElement.getWidth() - minSize) {
295
324
  cuttingPixel = hoveredElement.x()
296
325
  + hoveredElement.getWidth() - minSize;
297
326
  }
298
327
  else {
299
- cuttingPixel = mousePosition.x;
328
+ cuttingPixel = cuttingPosition.x;
300
329
  }
301
330
 
302
331
  // Relative cuttingPixel
@@ -312,8 +341,8 @@ define([
312
341
 
313
342
  this._view.setHoveredElement(null);
314
343
 
315
- this._updateCursorTime(mousePosition);
316
- this._updateCuttingLine(mousePosition);
344
+ this._updateCursorTime(cuttingPosition);
345
+ this._updateCuttingLine(cuttingPosition);
317
346
 
318
347
  this._layer.draw();
319
348
  }
package/src/timeline-zoomview.js CHANGED
@@ -146,7 +146,7 @@ define([
146
146
 
147
147
  self._hoveredElement = null;
148
148
 
149
- self._modeLayer = new ModeLayer(peaks, self, self._stage, 'default');
149
+ self._modeLayer = new ModeLayer(peaks, self, self._playheadLayer, self._stage, 'default');
150
150
  self._modeLayer.addToStage(self._stage);
151
151
 
152
152
  self._mouseDragHandler = new MouseDragHandler(self._stage, {