Export DefaultPointMarker

[thom4parisot]

As of peaks@0.27.0, the source code is not exposed so I have no way to access the DefaultPointMarker class. This change is a way to keep it accessible,

I found it useful to extend an existing PointMarker instead of reimplementing all the logic.

If you think another path is more relevant, I'm happy to contribute the changes.

With peaks@0.26.0, this is what I was doing to create a custom PointMarker:

// custom-marker.js
import DefaultPointMarker, { Line, Rect, Circle, Text } from 'peaks.js/src/default-point-marker.js'

export class PointMarker extends DefaultPointMarker {
  init (group) {
    super.init(group)

    this._line.strokeWidth(this._options.point.lineWidth || 1)

    console.log(this._options.view, this)
    if (this._options.view === 'zoomview' && this._handle) {
      const layerHeight = this._options.layer.getHeight()

      this._handle.width(20)
      this._handle.x(-10 - 4 + 0.5) // half a side - side rotation + half pixel
      this._handle.y(layerHeight - this._handle.height() + 9.5 + 0.5)
      this._handle.cornerRadius([20, 0, 20, 20])
      this._handle.rotate(-45)
    }
  }
}

// app.js
import { init } from 'peaks.js';
import { PointMarker } from './custom-markers.js'
import defaultOptions, {markerOptions} from './options.js'

init({
  ...defaultOptions,
  mediaElement: this.$refs.mainTrack,
  dataUri: {
    arraybuffer: this.$props.dataFile
  },
  containers: {
    overview: this.$refs.overview,
    zoomview: this.$refs.zoomview
  },
  createPointMarker: (options) => new PointMarker({
    ...markerOptions,
    fontSize: 14,
    fontStyle: 'bold'
  }),
}, onWaveformLoaded))