-
Notifications
You must be signed in to change notification settings - Fork 0
Custom Objects
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.
There are 3 main parts to how a custom object work: KonvaHtml and the CustomWrapper, the customRect object, and the getKonvaObj function.
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. Essentially KonvaHtml tries to take Konva object properties such as x, y, scale, rotation, opacity etc. and tries to convert them to CSS transform properties and apply them to the HTML inside the CustomWrapper. Every time the Konva properties of the corresponding group changes (the custom object is being dragged/transformed), the new traansformation is converted to CSS and applied to the custom HTML. This allows the user to tranasform the HTML as they would any other object by using the Konva Group as a proxy to apply transform to which are then translated to the HTML object.