Show HN: Vecta.io - Team diagramming with an advanced SVG editor
vecta.io
vecta.io
- You need a damn video on your home page! Many click and try products don't need this. But here the collaboration aspect simply has no chance to fully shine and show it's true potential in 60 seconds without a short demo video.
- An API / Plugin option would be great to see, as would an embeddable version. Understand this may not fit your priorities / business model.
- Why no iOS or Surface support? Seems like iPad Pro, with or without pen, would be a great fit and not require a huge amount of development to make it happen. The work needed for this would also enable Surface Pro to work as a touch/pen experience. iPad Pro and Surface Pro combined have a significant amount of corporate users > revenue potential.
The namespace 'Vecta' allows you to access the page or shapes in your active drawing. Vecta.activePage.shapes returns you an array of shapes in your current drawing. You can try setting the color to the first shape with a simple line like this: Vecta.activePage.shapes(0).style('fill', '#ff0000 ');
-KoI4H-rmhQDnC4k4U3X:234 GET https://vecta.io/js/jspdf.debug.js -KoI4H-rmhQDnC4k4U3X:234 GET https://vecta.io/js/jspdf.debug.js 404 () objects.3f4dc78a27.js:3 Uncaught (in promise) TypeError: Cannot read property 'width' of undefined at Vecta.Document.insertPage (objects.3f4dc78a27.js:3) at Object.callback (objects.3f4dc78a27.js:3) at fire.afed4e0fe2.js:1 at <anonymous>
The internet is a wonderful thing
ETA: More specifically, there was a lot of flashing of offensive text.
i agree, make it a per-user demo. THere's so much in the demo document on the front page that it lags and prevents scrolling...
Which is a shame as it actually looks like a pretty nice tool.
Advice, in addition to all the other advice here:
- Connector line routing needs to be good (currently it doesn't really work) and if it were great then that would be a huge selling point.
- You should consider including a ton of "Cloud" (AWS, Azure, Google) symbols and icons out of the box. There are crappy ones available free from Amazon, that would be a start at least. I think "cloud architecture" is one of the biggest use-case for diagramming software right now.
- Not sure if you're using SVG as the native format but if not, consider it. The main reason I didn't upgrade to the new OmniGraffle was its so-so SVG support. Imagine a use-case where people collaborate on a drawing and then store the result in Git, maybe do some batch editing elsewhere, then need to get it back for more visual editing.
- If you want to get traction in the Enterprise world (the horror!) then you probably need a Confluence plug-in at some point.
-Cloud icons are already there and so is a load of web applications icons, click on the menu icon to the right of stencil to access it.
- We are using SVG format as it has wide spread adoption and does not lock our users in.
- Confluence integration, coming up real soon.
Thanks for pointing these out.
I tried to share a document via mail, clicked on "Get Share Link" and allowed public access and then closed the window with "Ok". I'm still asked to log in. When I click on Share again my share link is gone. So this doesn't seem to work currently.
The demo slows down the web page, especially on mobile. So put it behind a deliberate action. That way you can also make the demo full screen instead of rendering it 75% of its normal size.
Edit: That way it's also clearer that when someone is using the demo to post swear words, like what is happening now, it isn't on your main page.
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?
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.
https://stackoverflow.com/a/20471268/938236
Just asking because it's my answer and I'd be really happy to see someone using it!
The only problem I had with the app was during registration. I decided to use my Google account to register, and upon successful redirect back to the app via OAuth callback, I was prompted to click a button to create a new user account instead of being logged into the app.
I found this confusing because I expected the step of generating my user account to be automated in the OAuth callback. There was also a heading on the page that was something like 'No Account Found', which added to my confusion as the OAuth process was supposed to (I expected, at least) create the account record.
I don't wish to sound negative, it's a genuine query because I really can't think of a single instance in the past when this would have solved a problem for me, but I wonder if there's niches I've not been exposed to.
Following console errors:
Failed to load resource: net::ERR_BLOCKED_BY_CLIENT www.facebook.com/impression.php/fcb4620c12f5dc/?api_key=1598145426866140&lid=115&payload=%7B%22source%22%3A%22jssdk%22%7D Failed to load resource: net::ERR_BLOCKED_BY_CLIENT www.facebook.com/tr/?id=1598145426866140&ev=fb_page_view&dl=https%3A%2F%2Fv…=https%3A%2F%2Fvecta.io%2Fapp%2Fdashboard&if=false&ts=1499106496718&es=APP Failed to load resource: net::ERR_BLOCKED_BY_CLIENT objects.d347593dbb.js:3 Uncaught (in promise) TypeError: Cannot read property 'width' of undefined at Vecta.Document.insertPage (objects.d347593dbb.js:3) at Object.callback (objects.d347593dbb.js:3) at fire.36207b0522.js:1 at <anonymous> ui.f6e4c67621.js:2 Uncaught TypeError: Cannot set property 'font_style' of undefined at Object.setFontStyle (ui.f6e4c67621.js:2) at ui.f6e4c67621.js:3 at dispatch (jquery.min.js:3) at q.handle (jquery.min.js:3) at Object.trigger (jquery.min.js:4) at jquery.min.js:4 at Function.each (jquery.min.js:2) at r.fn.init.each (jquery.min.js:2) at r.fn.init.trigger (jquery.min.js:4) at Object.Vecta.trigger (utils.1a5acb0310.js:1)
Edit: Can confirm: All good :) In the future, I'll make sure to post a bug in the official spot now that I know where it's at!
How has the week been? Have you seen sustained activity?
vecta.io/app/edit/demo
What I would really like woube be 1) an API 2) ability to sync with dropbox.
My team has about a dozen diagrams in out Git repository, so I'd really like a faster way of exporting vecta->folder.
objects.685ed2904d.js:1 Uncaught (in promise) TypeError: Cannot read property 'type' of nullToo many SaaS apps go the way of the dodo these days - if I can't run it myself it's going to be a hard sell, and if you can't make a case that you're profitable, I'm not gonna take a risk on your flash in the pan project.
You need to address pricing, even if it is stating that we're not sure yet. As it is, it looks like you just want to avoid the topic.
Also, assure me that my diagrams can be exported, backed up locally, etc. Maybe a github integration or something similar? Anything that lets me know I'm not locked in. I won't allow my data to be locked in.
No.
Being backed by a longer term profitable entity that has related tech, is definitely not what most new SaaS vendors say. It's not a guarantee but it's a legit plus.
SaaS startup promises and unsustainable offers are a real and serious concern. But when a product is just getting launched, still in beta, there's nothing wrong with them taking some time to figure out the parameters.
The very thing you are demanding makes it prudent for companies to do everything they can to get pricing and promises right.
Because there is no open source project as good? Or was that rhetorical?
Historically OSS content creation hasn't been as competitive with commercial offerings as other categories of software. Does Gimp compare to Photoshop nearly as well as Linux compares to Windows Server? Would love for a serious benefactor to help OSS content creation in general.
If you do know anything that looks as good as Vectra please throw out a link.
If a SaaS app is closed source, like this one appears to be, if it closes (e.g. if they're acquired, decide its not profitable enough, lose interest, etc) I have no options. Maybe I can get my data out, but then what?
If a SaaS app is open source, and the paid version is essentially paying for the service of it being hosted, I have no concerns: if they close for whatever reason, I can run (or pay someone to run) the open source software.
> If you do know anything that looks as good as Vectra please throw out a link.
I haven't tried it, but I'd imagine the recent(ish) browser-based LibreOffice Online might be usable for the same purpose?