4 ms·

I made https://vector-graph.com/ https://vector-graph.com/ a while back and documented it pretty thoroughly. While I never "finished" it, it's working pretty fi

I made https://vector-graph.com/ https://vector-graph.com/ a while back and documented it pretty thoroughly. While I never "finished" it, it's working pretty fine and as long as you fix it to a specific version, you won't have to worry about changes if/when I continue working on it. Feedback would be greatly welcome! It's made specifically for the usecase you mention, blog-like website with Katex to add pretty graphics. Example usage:  <vector-graph x="3" y="3" axis="false"> <polygon points="0,0;1,3;3,1" sides="a,b,c" angles="α,β,γ"></polygon> </vector-graph>  <vector-graph x="4.9" y="4.9"> <vector label="b" color="blue" from="3,4" to="4,2" axis></vector> <vector label="a" color="red" from="0,0" to="3,4" axis></vector> <vector label="c" from="0,0" to="4,2"></vector> </vector-graph> PS, I give you permission to use it in your personal website for free, alexkritchevsky.com

culi 3y ago
is it based on web components?
- franciscop 3y ago
  `<vector-graph>` itself is a properly defined WebComponent, everything else inside is just parsed as a string of pseudo-html and rendered within the parent web component (as an SVG). Edit: note that the examples in the website, since they are part of the README in Github, are plain SVG images that have been rendered on the backend statically also by VectorGraph, see the Node.js environment if interested: https://vector-graph.com/#nodejs https://vector-graph.com/#nodejs
  - ble 3y ago
    Very nice looking diagrams for the amount of effort required to make them as a client of the library. I love that it uses exactly 1 WebComponent. I love / am vaguely confused that it doesn't read the component's own DOM but instead gets the `.outerHTML`: https://github.com/franciscop/vector-graph/blob/master/index.js#L585 https://github.com/franciscop/vector-graph/blob/master/index... I guess that it means that the actual rendering gets fully decoupled from the live, but hidden DOM tree within the WebComponent and that live DOM tree doesn't really matter aside from first render.
    - franciscop 3y ago
      Thanks! That was my goal! I didn't release it officially because I also wanted to add hooks/extensibility, and that was a lot trickier than I expected. I cannot expect everyone to only use the provided tools, and extensibility was a bit tricky (there's a lot of low-level math operations going on). I'm not totally sure what you mean by "it doesn't read the component's own DOM but instead gets the `.outerHTML`". Note that I am not a Shadow DOM expert and I made this a couple of years ago, but IIRC the reason I made it this way is that I wanted a lot of flexibility on the transformation. It's not 1-component-to-1-svg-element, it's more like I might have an arbitrary N number of "HTML elements", which might render into an arbitrary M number of "SVG elements", some of which might even be global (<defs>) so not even in the same order as the HTML elements order.
ajkjk 3y ago
Lol, thanks. I'll check it out. But, is the license such that you need to give permission? I see that you have a "commercial license" but it seems like that wouldn't apply to me anyway. I don't know much about software licenses tbh so some clarification would be nice.
- franciscop 3y ago
  It's dual-licensed as AGPL (free software) and commercial (with a one-time $19 fee), the AGPL is pretty restrictive so if you want a more liberal one you could buy it. But, as a 3rd option exclusive for you in here, you can use it for free in your own website without having to comply with the AGPL. See a longer-form explanation: https://opensource.stackexchange.com/a/4877 https://opensource.stackexchange.com/a/4877 What the AGPL does differently compared to e.g. GPL is basically say that you cannot build a proprietary service around my library without making that service open source as well. So theoretically, it could be argued that depending on how you use it in your website, you would need to make your website free software as well. Or, buy a license. (Or in this case, get an exception from me). This is just a friendly explanation, the full legal terms are here: https://github.com/franciscop/vector-graph/blob/master/LICENSE https://github.com/franciscop/vector-graph/blob/master/LICEN...
  - ajkjk 3y ago
    Hmm. That makes me less interested, really. The restrictive license doesn't affect my project but I don't want to use something I can't recommend to someone else, and I would never want to build something on that because I don't want to think about licenses at all in my life, much less deal with one that encodes someone else's ideology that I don't share. Any reason not to just make it MIT? Which is apparently what e.g. KaTeX uses.
    - franciscop 3y ago
      > Any reason not to just make it MIT? Yes, I'm not funded by the millions (like Khan Academy, the org that created/sponsored Katex) so I would hate to see all my hard work get copy/pasted by a company, rebranded as their own and sold to the public in a private manner. > I don't want to think about licenses at all in my life If you don't want to think about licenses ever it's just a one-time payment of $19, that's exactly why I dual-licensed it; follow the license, or pay $19 to not deal with the license. > That makes me less interested, really That's okay, if you don't think it's a library worth $19 (or following the license), it means it doesn't provide enough value for you to be worth of your money. For the average developer in the world that's less than 1h of their time though, so if you think that my library will save you 1h vs others, or vs doing it by hand, then it's "worth it". Many developers think all the tools should be MIT, and that is okay, but I don't share that ideology.
corn-dog 3y ago
This is freaking awesome! I imagine this would’ve been a fun project to work on. Do you have a blog or a write up on how you did this? I’m also an enjoyer of web-components, I use them in my chrome extension Mobile View. I want to try this out tomorrow at work
- franciscop 3y ago
  Thanks! Like some of my other "big" projects, it's really modular, in the way it started very simple "let's see if I can draw lines", and then each extra "type" was just a bit extra over the existing core, and so now it has a lot of features! If I knew it'd grow to the current scope I might have been afraid and not even started TBH. I actually have a Twitter thread on it! https://twitter.com/FPresencia/status/1411196648177405953 https://twitter.com/FPresencia/status/1411196648177405953
billfruit 3y ago
Does it work for 3D? If you want vectors in 3D space for example?
- franciscop 3y ago
  Unfortunately not, this is only for 2D

culi 3y ago

is it based on web components?

franciscop 3y ago
`<vector-graph>` itself is a properly defined WebComponent, everything else inside is just parsed as a string of pseudo-html and rendered within the parent web component (as an SVG). Edit: note that the examples in the website, since they are part of the README in Github, are plain SVG images that have been rendered on the backend statically also by VectorGraph, see the Node.js environment if interested: https://vector-graph.com/#nodejs https://vector-graph.com/#nodejs
- ble 3y ago
  Very nice looking diagrams for the amount of effort required to make them as a client of the library. I love that it uses exactly 1 WebComponent. I love / am vaguely confused that it doesn't read the component's own DOM but instead gets the `.outerHTML`: https://github.com/franciscop/vector-graph/blob/master/index.js#L585 https://github.com/franciscop/vector-graph/blob/master/index... I guess that it means that the actual rendering gets fully decoupled from the live, but hidden DOM tree within the WebComponent and that live DOM tree doesn't really matter aside from first render.
  - franciscop 3y ago
    Thanks! That was my goal! I didn't release it officially because I also wanted to add hooks/extensibility, and that was a lot trickier than I expected. I cannot expect everyone to only use the provided tools, and extensibility was a bit tricky (there's a lot of low-level math operations going on). I'm not totally sure what you mean by "it doesn't read the component's own DOM but instead gets the `.outerHTML`". Note that I am not a Shadow DOM expert and I made this a couple of years ago, but IIRC the reason I made it this way is that I wanted a lot of flexibility on the transformation. It's not 1-component-to-1-svg-element, it's more like I might have an arbitrary N number of "HTML elements", which might render into an arbitrary M number of "SVG elements", some of which might even be global (<defs>) so not even in the same order as the HTML elements order.

ajkjk 3y ago

Lol, thanks. I'll check it out. But, is the license such that you need to give permission? I see that you have a "commercial license" but it seems like that wouldn't apply to me anyway. I don't know much about software licenses tbh so some clarification would be nice.

franciscop 3y ago
It's dual-licensed as AGPL (free software) and commercial (with a one-time $19 fee), the AGPL is pretty restrictive so if you want a more liberal one you could buy it. But, as a 3rd option exclusive for you in here, you can use it for free in your own website without having to comply with the AGPL. See a longer-form explanation: https://opensource.stackexchange.com/a/4877 https://opensource.stackexchange.com/a/4877 What the AGPL does differently compared to e.g. GPL is basically say that you cannot build a proprietary service around my library without making that service open source as well. So theoretically, it could be argued that depending on how you use it in your website, you would need to make your website free software as well. Or, buy a license. (Or in this case, get an exception from me). This is just a friendly explanation, the full legal terms are here: https://github.com/franciscop/vector-graph/blob/master/LICENSE https://github.com/franciscop/vector-graph/blob/master/LICEN...
- ajkjk 3y ago
  Hmm. That makes me less interested, really. The restrictive license doesn't affect my project but I don't want to use something I can't recommend to someone else, and I would never want to build something on that because I don't want to think about licenses at all in my life, much less deal with one that encodes someone else's ideology that I don't share. Any reason not to just make it MIT? Which is apparently what e.g. KaTeX uses.
  - franciscop 3y ago
    > Any reason not to just make it MIT? Yes, I'm not funded by the millions (like Khan Academy, the org that created/sponsored Katex) so I would hate to see all my hard work get copy/pasted by a company, rebranded as their own and sold to the public in a private manner. > I don't want to think about licenses at all in my life If you don't want to think about licenses ever it's just a one-time payment of $19, that's exactly why I dual-licensed it; follow the license, or pay $19 to not deal with the license. > That makes me less interested, really That's okay, if you don't think it's a library worth $19 (or following the license), it means it doesn't provide enough value for you to be worth of your money. For the average developer in the world that's less than 1h of their time though, so if you think that my library will save you 1h vs others, or vs doing it by hand, then it's "worth it". Many developers think all the tools should be MIT, and that is okay, but I don't share that ideology.

corn-dog 3y ago

This is freaking awesome! I imagine this would’ve been a fun project to work on. Do you have a blog or a write up on how you did this? I’m also an enjoyer of web-components, I use them in my chrome extension Mobile View. I want to try this out tomorrow at work

franciscop 3y ago
Thanks! Like some of my other "big" projects, it's really modular, in the way it started very simple "let's see if I can draw lines", and then each extra "type" was just a bit extra over the existing core, and so now it has a lot of features! If I knew it'd grow to the current scope I might have been afraid and not even started TBH. I actually have a Twitter thread on it! https://twitter.com/FPresencia/status/1411196648177405953 https://twitter.com/FPresencia/status/1411196648177405953

billfruit 3y ago

Does it work for 3D? If you want vectors in 3D space for example?

franciscop 3y ago
Unfortunately not, this is only for 2D