Custom Objects

Introduction

The app features two main types of objects: Konva objects and Custom objects. Konva objects are objects rendered directly onto an HTML canvas by using the Konva.js 2d canvas library and they include: rectangles, ellipses, stars, triangles, lines, texts, images, videos, and drawings. The second major type of object is the "custom" object which renders in it's own HTML div element and includes objects such as polls, timers, iFrames, inputs, games and other interactive objects. The custom objects are designed in such a way that you can create any type of React component and have them behave like a Konva object (they can be dragged/transformed, right clicked, cut/copy/pasted/deleted, edited, same render system etc). The goal with custom objects was to have a system where the programmer could just put their React components into a CustomWrapper.jsx component and have it work automatically like any other Konva object.

Custom Object

There are 3 main parts to how a custom object work: KonvaHtml and the CustomWrapper, the getKonvaObj function, and the customRect object.

KonvaHtml and CustomWrapper

KonvaHtml.jsx and CustomWrapper.jsx are two files that work together to create the Custom Object system. The CustomWrapper is essentially just the shell or container around any HTML that you want in your custom object. It contains a KonvaHtml object which creates a Konva Group object with the transform properties of the custom object as well as renders the HTML for the custom object with those transform properties. The

The getKonvaObj function

The customRect