Plug Konva events into RxJS

During the development of a complex interactive UI for the configuration of a digital laboratory ecosystem, we were utilizing the Konva.js library. Konva is a wrapper around the HTML canvas that simplifies working with shapes and interacting with the canvas a lot. Everybody dealing with the plain canvas API knows how much code certain tasks require, especially when user interaction with the drawn shapes is required. The most important features Konva offers to me are

• simplified drawing of shapes
• introduction of custom events that fill the canvas with life
• attaching event handlers to the shapes (e.g. for click, dragging ...)

Especially, the stream of Konva events emitted under various circumstances gave rise to the idea to make use of a reactive approach to process them in a more readable and concise way. As I was researching on different styles of frontend architectures and the associated frameworks and libraries, I stumbled upon RxJS, the reactive extension for Javascript. RxJS core concept, observable streams of data, seemed very suitable to handle the Konva events in a way that does not lead straight into callback hell.

However, at first glance, I did not find a suitable way to convert the Konva events to one of the RxJS data sources that really tackled the idiomatic idea and needs I faced in the project. After some experiments, I came up with the following solution that allows the desired transformation in a readable manner and gives the event processing pipeline direct access to the emitted Konva event object:

This little adapter will be used in our current project and so far, the results look quite promising.