Request: Adjust Graph Font Size, CSS Solution?

Feature requests
, ,
41

It’s a dirty hack but you can change font size and font family (default font is broken for me) by overwriting a PIXI API used to draw graph.

import { App, Plugin, PluginSettingTab, Setting } from 'obsidian';

interface GraphFontCustomizerSettings {
	fontSize: number;
	fontFamily?: string;
}

const DEFAULT_SETTINGS: GraphFontCustomizerSettings = {
	fontSize: 2.0,
}

export default class GraphFontCustomizer extends Plugin {
	settings: GraphFontCustomizerSettings;

	orig_text: any = undefined;


	async onload() {
		await this.loadSettings();

		if (this.orig_text === undefined) {
			this.orig_text = (window as any).PIXI.Text;
		}

		this.patchText();

		// This adds a settings tab so the user can configure various aspects of the plugin
		this.addSettingTab(new SampleSettingTab(this.app, this));
	}

	onunload() {
		if (this.orig_text !== undefined) {
			(window as any).PIXI.Text = this.orig_text;
		}
	}

	async loadSettings() {
		this.settings = Object.assign({}, DEFAULT_SETTINGS, await this.loadData());
	}

	async saveSettings() {
		await this.saveData(this.settings);
	}

	patchText(): void {
		let fontSize = this.settings.fontSize;
		let fontFamily = this.settings.fontFamily;

		(window as any).PIXI.Text = class extends this.orig_text {
			constructor(...args: any[]) {
				if (args[1]) {
					args[1] = args[1].clone();
					args[1].fontSize *= fontSize;
					if (fontFamily !== undefined) {
						args[1].fontFamily = fontFamily;
					}
				}
				super(...args);
			}
		};
	
	}
}

class SampleSettingTab extends PluginSettingTab {
	plugin: GraphFontCustomizer;

	constructor(app: App, plugin: GraphFontCustomizer) {
		super(app, plugin);
		this.plugin = plugin;
	}

	display(): void {
		const {containerEl} = this;

		containerEl.empty();

		containerEl.createEl("p", { text: "Requires reopening graph to take effect." });

		new Setting(containerEl)
			.setName('Font size')
			.setDesc('Specify the font size as a multiplier applied to the default font size')
			.addText(test => test
				.setPlaceholder('2.0')
				.setValue(this.plugin.settings.fontSize.toString())
				.onChange(async (value) => {
					this.plugin.settings.fontSize = value == "" ? 2.0 : parseFloat(value);
					await this.plugin.saveSettings();
					this.plugin.patchText();
				}));

		new Setting(containerEl)
			.setName('Font familty')
			.setDesc('Specify the font family')
			.addText(test => test
				.setPlaceholder("Leave empty for default")
				.setValue(this.plugin.settings.fontFamily ?? "")
				.onChange(async (value) => {
					this.plugin.settings.fontFamily = value == "" ? undefined : value;
					await this.plugin.saveSettings();
					this.plugin.patchText();
				}));
	}
}

I don’t have energy to maintain a plugin somewhere, so just drops a zip here. Also, devs should just add proper knobs for these values…

graph-font-customizer.zip (5.5 KB)