Skip to content

Export DefaultPointMarker#419

Draft
thom4parisot wants to merge 1 commit intobbc:masterfrom
thom4parisot:patch-1
Draft

Export DefaultPointMarker#419
thom4parisot wants to merge 1 commit intobbc:masterfrom
thom4parisot:patch-1

Conversation

@thom4parisot
Copy link
Copy Markdown
Contributor

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))

@thom4parisot thom4parisot changed the title Enable Export DefaultPointMarker Nov 8, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant