Plugin Help: Canvas Group Node Ignores `backgroundSize: 'contain'`

Developers: Plugin & API
1

Hello everyone,

I’m developing a simple plugin with the goal of converting an image node into a group node in Canvas. The goal is for the new group to use the original image as its background, with the “Keep aspect ratio” (Fit/contain) setting enabled by default.

The Problem:

My plugin successfully creates the group node and sets the backgroundSize: 'contain' property in the node’s data. I have confirmed this by logging the node object to the console right after its creation. However, when Obsidian renders the group, it visually defaults to cover mode, ignoring the data I’ve set. The “Keep aspect ratio” button in the UI is not selected.

What I’ve tried without success:

  1. Setting backgroundSize: 'contain'.
  2. Setting both backgroundSize: 'contain' and backgroundStyle: 'contain'.
  3. Adding a setTimeout delay before calling canvas.requestSave() to avoid timing issues.
  4. Adding a styles.css file to the plugin to force the style with !important. Obsidian seems to override this as well.

The issue occurs even in a brand new vault with no other plugins installed, which rules out a plugin conflict.

Here is the latest version of my main.js and styles.css files. Could anyone see what I might be missing? It feels like I’m fighting against Obsidian’s default rendering logic. How can I make the Canvas respect the backgroundSize data upon initial creation?

main.js:

const { Plugin, Menu } = require('obsidian');
const path = require('path');

module.exports = class CanvasImageToGroupConverter extends Plugin {

	async onload() {
		this.registerEvent(
			this.app.workspace.on('canvas:node-menu', this.addConvertCommandToMenu)
		);
	}

	convertImageToGroup = (node, filePath, fileExt) => {
		const canvas = node.canvas;
		const canvasData = canvas.getData();
		const originalNodeData = node.getData();
		const label = path.basename(filePath, fileExt);

		const newGroupNode = {
			id: Math.random().toString(36).substr(2, 16),
			type: 'group',
			x: originalNodeData.x,
			y: originalNodeData.y,
			width: originalNodeData.width,
			height: originalNodeData.height,
			label: label,
			background: filePath,
			backgroundSize: 'contain'
		};
		
		console.log("Creating group node:", newGroupNode);

		const nodeIndex = canvasData.nodes.findIndex(n => n.id === node.id);
		if (nodeIndex > -1) {
			canvasData.nodes.splice(nodeIndex, 1, newGroupNode);
		}
		
		canvas.setData(canvasData);
		canvas.requestSave(true, true);
	};

    // simplified for brevity...
}

styles.css:

.canvas-node-container.is-group .canvas-node-content[style*="background-size: contain"] {
    background-size: contain !important;
}

Any help or insight would be greatly appreciated!