Image view

[matthewturk]

Is your Feature Request Related to a Problem?

No response

Describe the Feature you'd Like

I'd like to be able to have a list of images (similar to what's described in #193 ) and then have these displayed in a single image tag, updating as connected to a different metadata entry.

I was able to make something like this work with this set of code, where I use js-engine to create markdown strings that embed the images.

I separated the two into different codeblocks so they would potentially be able to re-render separately, but I see the same thing when they're together in the same markdown.create string.

{photos} as photos
{memory^selectedPhoto} as selectedPhoto

---

const nPhotos = context.bound.photos.length;
if (nPhotos == 0) return;
const photoNames = context.bound.photos;
const selectedPhoto = context.bound.selectedPhoto;

const str = `\`INPUT[slider(minValue(1), maxValue(${nPhotos})):memory^selectedPhoto]\``;

return engine.markdown.create(str);

{photos} as photos
{memory^selectedPhoto} as selectedPhoto

---

if (context.bound.photos.length == 0) return;

return engine.markdown.create(
`![](${context.bound.photos[context.bound.selectedPhoto - 1]})`
)

What I'm seeing with this is that it's re-rendering fairly frequently, and it re-renders both blocks -- and even with very small images, it's really quite laggy. (Additionally, you can't use the arrow keys on the slider, as it is re-rendered and so loses focus whenever the selected photo changes.) I assume this is because the bound variables are changing, so it has to re-create the blocks. What I'm wondering is if it's possible to have a VIEW that supports images. My thinking is that potentially this would prevent having to recreate and reflow the img tag.

Were that the case, I imagine having something like `VIEW[

I think it might be possible to make this work with just pure js-engine (although I'd have to resolve the img src tags to a vault-relative location) but it also seems like it might fit in meta-bind.

Additional Context

No response

[mProjectsCode]

You don't need the memory^selectedPhoto dep in your first code block. This should stop it from re-rendering the slider when you move it.

I assume this is because the bound variables are changing, so it has to re-create the blocks.

Yeah, that is what the plugin is doing.

An image view field sounds good. It would work similarly to the link one.

[matthewturk]

@mProjectsCode Thank you -- that does actually fix a fair bit of the latency I was seeing!

[mProjectsCode]

Makes sense, the plugin is built in a way that all the expensive stuff is done during the creation of the input fields. And creating an input field from a markdown string has quite a few steps.

1. Parse the string
2. Validate the parsing result
3. Subscribe to all the relevant things
4. Render the field