Custom size support

[tnichols217]

Id like to be able to adjust the size of the svg frame that this plugin creates while still maintaining the top bottom left right values. I dont mind making a PR if you think this is a good idea

[Nigecat]

This might not be exactly what you're looking for (feel free to reopen if it isn't), but the dimensions of the output graph are controllable with the height and width fields. For instance if you were trying to create a 100x100 graph you could do:

```desmos-graph
width=100; height=100;
---
y=x

[tnichols217]

i meant like fit to width options?

[Nigecat]

Fit to width?

[tnichols217]

yeah, like the svg will grow to fit the width of the notes

[tnichols217]

So, see I created this plugin called obsidian columns, and naturally it adds columns in obsidian. However, whenever I add a second column, the svg will overlap into the next column due to its fixed size. As i dynamically add new columns it keeps overlapping. I would like a way for it to dynamically fit the width that the svg is in, similar to the css width:100% value but im not super sure how that would work in svg, probably could make it work with some ts magic, but i was wondering if there was already a way to do this with your plugin as I really like it and wanna use it in my notes

[Nigecat]

Ah ok, that's probably a good idea but I'll probably have to think a bit about how to implement it while maintaing the correct aspect ratio, maybe it could be implemented with a css snippet since the graph svg element has the class desmos-graph but I'm not too sure exactly how that would work.

[tnichols217]

id gladly make a pr if you think thats a good idea

[tnichols217]

well you see the thing is, you can do it with a css snippet, which is what i have been doing, but the left and right attributes no longer work, because it just adds or removes area from the right of the graph

[tnichols217]

Example: https://user-images.githubusercontent.com/62992267/168073712-1490902c-43e0-4432-81c9-7571e9736ce4.mp4

[Nigecat]

If you have a good idea on how to implement it directly in typescript then I'd be open to a PR, I'd probably want it to be behind a graph flag (maybe enforceWidth? theres probably a better name to be found somewhere...) (the flags are defined here) https://github.com/Nigecat/obsidian-desmos/blob/9853de2441ac94cde221bf7a08ce795491888a3e/src/graph/parser.ts#L7 since it might be confusing if it was enabled by default as it would need to override the width / height parameter and presumably just use the aspect ratio.

Then you'd just need to add it to the boolean fields https://github.com/Nigecat/obsidian-desmos/blob/9853de2441ac94cde221bf7a08ce795491888a3e/src/graph/parser.ts#L260 and it should be automatically passed to the renderer. The implementation into the renderer may be a bit tricky but if know whatever you need to add to the https://github.com/Nigecat/obsidian-desmos/blob/9853de2441ac94cde221bf7a08ce795491888a3e/src/renderer.ts#L9 method (and just assume whatever flag is enabled) then I can implement actually giving it the correct state later (otherwise I'll just implement the whole thing when I get round to it, especially if you have any ideas on the actual implementation).

[tnichols217]

problem im seeing right now is in https://github.com/Nigecat/obsidian-desmos/blob/9853de2441ac94cde221bf7a08ce795491888a3e/src/renderer.ts#L122

you have px hardcoded. Im guessing the Desmos library just automatically fits to width and height when you pass it in as an element? So if we can have options to specify 100% instead of a px value like 200px, then desmos should fit to width automatically? correct me if im wrong because ive personally never used the Desmos package

[tnichols217]

Maybe when parsing the settings (in setting validator), if no unit is specified, automatically tag on a px at the end, if not keep it as whats specified, but another thing is is that the settings.width value is stored as a number and not a string, im not sure what else that would mess up, but I could just change those to strings, fix the settingsParser, then change the html in the renderer and it probably should work? If you cant think of any other problems now id go test it soon

[Nigecat]

problem im seeing right now is in

https://github.com/Nigecat/obsidian-desmos/blob/9853de2441ac94cde221bf7a08ce795491888a3e/src/renderer.ts#L122

you have px hardcoded. Im guessing the Desmos library just automatically fits to width and height when you pass it in as an element? So if we can have options to specify 100% instead of a px value like 200px, then desmos should fit to width automatically? correct me if im wrong because ive personally never used the Desmos package

Yeah this looks like the case, the only issue is that after a bit of fiddling with hard coding values I don't seem to be able to get it to work properly, since width: 100% is using the parent element width and the parent of the iframe is provided by Obsidian, I don't think things are resizing correctly - the other issue is that since the size would be relative to the document it would have to completely bypass the caching system since it would be rendered differently based on the context.

Maybe when parsing the settings (in setting validator), if no unit is specified, automatically tag on a px at the end, if not keep it as whats specified, but another thing is is that the settings.width value is stored as a number and not a string, im not sure what else that would mess up, but I could just change those to strings, fix the settingsParser, then change the html in the renderer and it probably should work? If you cant think of any other problems now id go test it soon

Sounds good - it wouldn't break anything for the existing values as I'm fairly certain they all support the px suffix on their units, but as I stated previous it doesn't look like just passing it through really works.

[Nigecat]

To do the cache thing, there would probably need to be a new graph flag (maybe skipCache or something) which disables caching reading/writing for that graph, which can then be automatically enabled if the width and height fields are something dynamic.

[Nigecat]

Another issue is that with caching disabled it would be impossible to export the graph to a pdf ( #16 ) - not sure if this is even possible to fix without fixing the original export issue.

[tnichols217]

alr i might take a look at #16 another day, but for now ive made some changes and ill draft a PR in a few minutes. It works and i added a new graphSettings option skipCache, but it does not dynamically update because the svg size gets evaluated from 100% to a px value. But if you reload the graph, the size does update. Im not sure if theres a way to adress the dynamic graph because that would require rerendering it every time the parent element gets resized, which doesnt seem practical to me. So i think this is a valid solution for now.

[tnichols217]

alright its in #64

[KosmosisDire]

This would be amazing, I am having problems with this as well.

[tnichols217]

I'm not sure why it isn't merged yet actually, it works perfectly fine in the pr (which you can use yourself if you want)

[KosmosisDire]

Oh nice! I'll do that if it's not merged and updated soon. Thanks

[Nigecat]

Completely forgot about this, see pr comments for notes.

[ShahriarKh]

What do you think about #83?

[iBlameTheLag]

I was facing a similer issues. To fit into whatever container its in I changed the

<svg [...] version="1.1" width="100%" viewBox="0 0 600 400" >
     [...]
</svg>

This let me customize the size to fit it into a callout, using the admonition plugin, and lets it change size as the window changes. Would love to see this be a feature since you cant just add a snippet to the CSS (that I know of)

Link to StackOverflow I used to learn about this