In addition, we have plans for opening up our API, so that people like yourself can build solutions on top of Vecta, right now you can play with it programmatically by opening your console, and typing Vecta. This single namespace allow you to access the page or shapes, Vecta.activePage.shapes, or you can set color to the first shape with Vecta.activePage.shapes(0).style('fill', '#ff0000');
4. We use document fragments to render to shadow DOM and write it to DOM, using in house code. However, we have found that what really matters is not so much of speed offered by rendering to shadown DOM but instead of the calculations we have to make internally like making sure the center of rotation and the tight bounding box. These, due to the inability of browsers to calculate them accurately, we have to make.
5. No, we rely on DOM and classes and wanted to keep things simple, so we have objects that handle the handles (no pun intended).
6. We use firebase. It not only handles our collaborative editing well but also allow us to generate previews, smooth and easy login, upload to storage, etc. We love firebase!
7. We do abstract mouse events, key events and many others with internal objects. These objects provide more information, like which shape the user has clicked on and therefore makes the entire task of handling the editing far easier, and we use JQuery for it's ease of use and cross browser compatibility.
8. There is no such thing as 2 users modify the same object at the same time, as one is always slower than the other. The slowest one wins. Say, I drag the object right and you drag it left, if you do it later, then the object is gonna go left.
Hopes that helps! Thanks for asking.
Its very cool that your web app does not clog the whole CPU like similar tools. Can you tell a little bit about the technology stack. Feel freeto skip questions if they are too invasive.
1. Do you use a drawing library or is this in house?
2. Do you store the SVG-objects as JS-objects?
3. If (3), how do represent the SVG-objects? (I looked into hyperscript).
4. If (3), how do you render the JS-object version to SVG in the DOM and update them? Do you use something like React, i.e. 'render' the whole thing to a VDOM and then update changes in dom for each update, or do you bind each SVG object to its JS object via an Observer?
4. A drawing app has obvouisly many states like UserCanSelectObjectByClick, UserClickedFirstPoint, UserMovesRectangle. Do you use state machines, generators, or sagas to implement these flows?
6. Do you use Websockets? Which library would you suggest? (A classical choice would be socket.io, but it is relatively heavyweigh).
7. Do you somehow abstract the mouse-events with jquery or d3? Any plans to support touch?
8. What happens if two users modify the same object?