Setting z-index in canvas (with workaround)

[scooks]

What I’m trying to do

I would like a way to quickly set the z-index of nodes while in canvas so that I can stack them in a predictable way.

Things I have tried

Currently, I add a cssclass in the nodes frontmatter with a value of Z0, Z1, Z2, ect. With the following css snippet enabled, it works.

css snippet

.canvas-node:has(.Z0) {
    position:absolute;
    z-index:0 !important;
}
.canvas-node:has(.Z1) {
    position:absolute;
    z-index:1 !important;
}
... and on

The issue is, editing the cssclass in the yaml of each node manually is a bit of a pain. I thought templater template below might be able to streamline the process, but I get the error message below.

templater script

<%*
//const file = app.workspace.getActiveFile(); <- didn't work either
let file = tp.file.title+".md";
const cssclass = tp.frontmatter.cssclass;

const {update, autoprop, createYamlProperty, getPropertyValue} = app.plugins.plugins["metaedit"].api;

if (cssclass === undefined) {
	let z = await tp.system.prompt("z-index value?","Z");
	await createYamlProperty("cssclass",z,file);
} else {
	let z = await tp.system.prompt("z-index value?",String(cssclass));
	await update("cssclass",z,file);
}
%>

It seems that within canvas, templater can’t see the active file, even I insert the template while editing the node. It works just fine if I’m editing the note in the editor.

Ideal workflow

In a perfect world, canvas would include send back and bring forward commands that could be bound to a hotkey.

Any suggestions? I’m fine with my workaround but wish it was a bit more streamlined.