Assign layers a unique id of a custom class?

[rowild]

There are up to 5 canvas elements in the waveform layer, responsible for various things. Is there a way to assign a unique id or a custom class to each of these layers? This would allow for some basic handling via css (like hiding the waveform or the timeline)?

The documentation on the layer API does not provide any information on that feature. I tried manipulating a core class like 'playhead-layer' by adding an id object to Konva: this._playheadLayer = new Konva.Layer({ id: 'player-layer'}); (line 48) But that also is not the solution.

[chrisn]

The layers are kind of an implementation detail (I'd prefer to use fewer, if that possible). What I'd prefer to do is enable those use cases by adding API calls such as view.showWaveform() or view.showTimeline() etc.

[rowild]

I understand. I wonder, though, if that doesn't complicate thing? If showing/hiding is managed via JS and somebody wishes to add an opacity animation, then another JS library will quickly be implemented. While with simple CSS all is there already.

(Of course I am only thinking in very simple scenarios; maybe there are more complex needs that stem from specific JS-relation activities. Then the CSS approach is most likely not enough. – On the other hand: adding a simple CSS class would really be helpful, if I may say so...)

I close this issue, since I gather that there is no method available now. Hope that's ok.

[chrisn]

I'd love to be able to style the waveform view in a CSS-like way, but with the Konva graphics library we use, it's all done via method calls.

[rowild]

This will probably become very true, when you find a solution with less canvas elements.

I looked into Konva a bit and I think it doesn't even allow to add a custom class yet. I had to add a ..._style.className += 'my-custom-class' property manually to the main Canvas class to make that work. So I guess currently it is simply not possible to dynamically add a class attribute...

[rowild]

For my simple use case (showing / hiding layers) I can actually use Konva's show(), hide() or visible(Boolean) functions. It is a bit of a hack, but it works:

    toggleWaveformLayer () {
      if(this.peaks.views._zoomview._waveformLayer.isVisible()) {
        this.peaks.views._zoomview._waveformLayer.hide()
      } else {
        this.peaks.views._zoomview._waveformLayer.show()
      }
    }