Can I render a closed excalidraw file inside a dataview js view without relying on dv.table()?

[Krakor92]

Hi,

I've been wondering lately if it was possible to render an excalidraw drawing inside a dataviewjs view using only the path to the file?

I know i can add a prop:: ![[drawing.excalidraw]] inside a file and render it using a DQL TABLE but i'd like to do it without having to set this property beforehand.

In fact, I have a bunch of .excalidraw.md files returned from a dataviewjs query (a call to dv.pages("...")) and from that, I'd like to render them with some control over the DOM structure, i.e. without relying on a dataviewjs rendering method like dv.table()

I looked at what Excalidraw Automate could do about this.
I followed the Dataview specific examples in the documentation, but other than rendering a brand new file (fantastic feature though), it doesn't seem to be able to render an existing closed .excalidraw file...

I have this assumption because the only EA method that could target an already existing file is setView and it takes an ExcalidrawView as a parameter. I looked in the code base to see how I could get this type from a file, but the constructor only accepts a Leaf which means the file must be open if I understand correctly.

Did i miss something inside the API spec or is it indeed not doable right now?

[Krakor92]

Hi again,

I've noticed the addition of the getSceneFromFile(file) method to the Excalidraw Automate API and thought I could give it a try to resolve this discussion.

I've used it in a dvjs script then I've exported a svg with the createSVG method: It worked but I couldn't render images element with it.
So i've tried the same with the createPNG. This time, it detected the dimensions of the images, but only their placeholders were rendered.

Here is the dvjs code:

const file = dv.page("Example.excalidraw.md").file;

const ea = ExcalidrawAutomate;
ea.reset()

const scene = await ea.getSceneFromFile(file)
ea.copyViewElementsToEAforEditing(scene.elements)

await ea.createPNG()
  .then((png) => {
      const data = URL.createObjectURL(png);
      dv.span(`<img src=${data}>`)
    });

and here is the png rendered in the DOM from the code above:

As you can see, embeds aren't working. Do you think it is feasible right now to force the excalidraw automate to load them before calling the exportPNG method or would that require a overhaul of the embed resolver for it to work?

[psxvoid]

Hi @jessicamindel

By "loading images manually" I meant that I'm reading all attachments (outlinks) for a particular .md Excalidraw file/embed recursively (read lines, filter lines by regex to find Excalidraw attachments), and then adding them to Excalidraw scene by patching imagesDict, and rendering via await ea.createPNG().

ea.imagesDict is of type { [id: FileID]: any }, so I'm not sure what value I need to pair with an id.

Here is the structure you are asking (do it for each outlink in the excalidraw file/embed):

const imageData = await toDataURI(o, sizeParams);

// monkey-patch the images dict to make ExcalidrawAutomate believe
// that images are loaded and ready to render
ea.imagesDict[fileId] = {
  "mimeType": "image/png",
  "id": fileId,
  "dataURL": imageData,
  "created": 1714630882281,
  "isHyperLink": true,
  "hyperlink": o.display,
  "file": null,
  "hasSVGwithBitmap": false,
  "latex": null
}

and toDataURI function sets a canvas size and renders images by calling canvas.toDataURL(). I do not use LaTex in my excalidraw drawings, so I set latex property to null, it might need some additional tuning if you need LaTeX support. And you can put any valid time stamp into the "created" field, it doesn't matter (mine is hardcoded, and has no issues).

It works perfectly for both regular Excalidraw and embed. At some point I was open-sourcing my entire view.js which is based on the following: Obsidian Note List - GitHub which was showcased in Obsidian's forum here. But the author of the snippet didn't add a license to his repo, so I removed my fork which had full support for Excalidraw as well as lazy loading of the long lists, and colored tags similarly to what Evernote Legacy was having. If somebody can convince the original author to add a proper license to his repo, I can restore my fork.

[jessicamindel]

@psxvoid Thank you so much! The fork you describe also sounds incredibly helpful. I hope the author adds a license.

Just to confirm, what are o and sizeParams? o looks to be an outlink given how you use it later. Is sizeParams related to Update 2 from your original post?

[psxvoid]

@jessicamindel Thank you. That's right, o isn't very descriptive, but your guess is correct - it's an outlink, and sizeParams is a simple object { width: x, height: y }, you can get it like this:

const sceneImages = Object.entries(ea.elementsDict).filter(x => x[1].type === 'image')
const maybeFileParam = sceneImages.find(x => fileIds.indexOf(x[1].fileId) >= 0)

if (maybeFileParam == null) return

const fileParams = maybeFileParam[1]
const fileId = fileParams.fileId
const sizeParams = {
  width: fileParams.width,
  height: fileParams.height
}

P.S.: Maybe the original authors know a better way, but this is how I quickly managed to make it work for my use case.

[jessicamindel]

@psxvoid Thank you again so much! I apologize for the many questions. Is toDataURI a function you'd written yourself?

[psxvoid]

@jessicamindel That's correct, but it's pretty straightforward. As mentioned above:

and toDataURI function sets a canvas size and renders images by calling canvas.toDataURL()