search

varkor / quiver

A modern commutative diagram editor for the web.
https://q.uiver.app
MIT License
2.38k stars 79 forks source link

Quiver as a library #76

Closed suhr closed 2 years ago

suhr commented 3 years ago

Though Quiver does not support export in SVG, it can display diagrams in browser. It would be great to have Quiver as a library, so it could be used (as a React component) in articles written using Idyll.

varkor commented 3 years ago

Could you explain your use case, so it's clearer what would need to be supported in quiver to facilitate this?

suhr commented 3 years ago

Basically, I want to render a diagram inside a DOM element. Just like KaTeX renders formulas: https://katex.org/docs/api.html

Use case: this allows to embed Quiver as a custom component into a page. So I can have nice commutative diagrams on a page without having to make PNG screenshots of diagrams inside the browser.

varkor commented 3 years ago

@AviCraimer is currently working on the ability to embed quiver in an <iframe> without the usual editing interaction and UI elements. Do you think this would suffice for your purposes?

suhr commented 3 years ago

iframe is rather awkward, but some js will be probably enough to extract the diagram from it.

enjoysmath commented 3 years ago

I'm also having trouble making a viewer-only out of quiver for the project:

https://github.com/enjoysmath/QuiverDatabase

I tried putting an if (quiver_edit_mode) { ... } around certain parts (took forever) and it didn't work. I've also tried html2canvas and the arrows come out improperly positioned. It would be nice to have a view of a diagram without taking an image screenshot and have to deal with image hosting etc. So right now, I'm limited to showing the diagram name only in any diagram result list (say for searching).

In other words, I would also like to see readonly mode for quiver.

enjoysmath commented 3 years ago

I saw an embed button patch to the repo somewhere. @varkor what branch would I check out to get that code?

varkor commented 3 years ago

@enjoysmath: take a look at this help page.

davidson16807 commented 3 years ago

I'm also debating whether I should build off quiver for my own ideas. I namely want to repurpose the user interface to organize software projects, so if I ctrl+click on an arrow or object then I could jump to a file in an IDE, or possibly color arrows to reflect whether unit tests pass (BTW, I'm very glad that colored arrows are already supported!). This might require either embedding the code in an electron app or in a plugin for a text editor like vscode. It also requires some way to attach arbitrary metadata to objects or arrows, ideally without having to modify existing classes, maybe as simple as a dictionary that maps the ids for arrows or objects to arbitrary metadata.

The only reason I think I can do this with quiver right now is because the code base is rather small and katex is the only dependency, so I'm worried that won't be the case in the future as additional features for a library are implemented. Would it be better to create a lite version, instead, something like a fairly static fork that people could ease into without requiring them to work within known use cases?

varkor commented 3 years ago

I can't comment on the applicability for a software project organisation tool, but I would think it should be straightforward to make an Electron app. The data structure for diagrams makes adding metadata very easy too.

The only reason I think I can do this with quiver right now is because the code base is rather small and katex is the only dependency, so I'm worried that won't be the case in the future as additional features for a library are implemented.

I don't see any further dependencies being added to quiver. LaTeX rendering is something that needs to be done by an external library, but I can't think of many other features that would necessitate an external dependency.

varkor commented 3 years ago

@suhr: quiver now supports exporting embeddable diagrams as HTML. Is this sufficient for your purposes?

suhr commented 3 years ago

It probably is, let me check it out.

suhr commented 3 years ago

Yeah, it works. Some notes though:

  1. It takes some time to load instead of loading instantly
  2. It would be great to be able to hide the quiver logo or at least make it smaller
  3. Being an iframe, it requires an internet connection to load diagrams
varkor commented 3 years ago

To be honest, I feel the right solution to each of these problems is to get around to implementing #8, and use MathJax for label rendering for now, unless you want interaction in the exported diagrams (e.g. like zooming or panning).

varkor commented 2 years ago

I'm going to close this in favour of #8, which I think would solve your problems. Unfortunately, #8 is blocked right now, but there may be ways to work around it.