Recently, I evaluated different JS drawing tools and libraries.
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?
1. We tried drawing libraries before using something in house. In fact what we have now is actually the 3rd version, where we throw away 2 previous versions that is not working as well as we would like.
2. We do not store SVG objects as JS object as we think that will be too memory intensive on a browser. What we have are wrappers, that will take SVG and wrap it internally as objects and to have a consistent and easy way to manipulate them, and once done working with them we throw them away. For example, we have wrappers for rectangle and ellipse and they both uses .move(x,y) and .size(width, height) which is more consistent than using SVG which requires x, y, width, height for rects and cx, cy, rx, ry for ellipses.
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.
Thank you for the technical details. Probably a bit late for you guys, but we offer a BaaS tailor-made for this sort of product. For instance you could add multiple mouse tracking and selection awareness in a matter of hours with our APIs. Check out our diagram demo for a taste: https://convergencelabs.com/demos/
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?