obsidian-asymptote/main.ts

import {
	App,
	Plugin,
	Vault,
	Setting,
	TAbstractFile,
	TFile,
	TFolder,
	TextComponent,
    SliderComponent,
	ButtonComponent,
	Notice,
	MarkdownPostProcessorContext,
	PluginSettingTab
} from 'obsidian';

import * as fs from 'fs';
import * as path from 'path';
import {exec, ExecException} from 'child_process';
import {tmpdir} from "os";
import ErrnoException = NodeJS.ErrnoException;

// Temporary directory for asymptote input output
const TEMP_DIR = path.join(tmpdir(), 'obsidian-asy');

interface Settings {
	library: string;
    timeout: number;
}

const DEFAULT_SETTINGS: Settings = {
	library: '',
    timeout: 5000,
}

export default class ObsidianAsymptote extends Plugin {

	settings: Settings;

    async onload() {
		this.settings = DEFAULT_SETTINGS;

        this.registerMarkdownCodeBlockProcessor('asy', (source : string, el: HTMLElement, ctx: MarkdownPostProcessorContext) => {
            this.renderAsyToContainer(source, el);
        });

        this.registerMarkdownCodeBlockProcessor('asymptote', (source : string, el: HTMLElement, ctx: MarkdownPostProcessorContext) => {
            this.renderAsyToContainer(source, el);
        });

		this.addSettingTab(new ObsidianAsymptoteSettings(this.app, this));
    }

    renderAsyToContainer(source: string, container: HTMLElement) {
        return new Promise<void>((resolve, reject) => {
            this.renderAsyToSVG(source).then((data: string) => {
                container.innerHTML = data;
                const svg = container.getElementsByTagName('svg');
                // Remove height and width so that it can be determined by CSS
                svg[0].removeAttribute('width');
                svg[0].removeAttribute('height');
				container.classList.add('asy-rendered');
                resolve();
            }).catch(err => {
                let html = document.createElement('pre');
                if (err.signal === 'SIGTERM') {
                    html.innerText = 'Child process got terminated. Perhaps try adjusting the timeout?';
                } else {
                    html.innerText = err.toString();
                }

                container.appendChild(html);
                reject(err);
            });
        })
    }
    
    renderAsyToSVG(source: string) {
        return new Promise((resolve, reject) => {
            const dirPath = TEMP_DIR;

			// Copy over library files
			this.copyLibraryFiles();

			fs.mkdir(dirPath, (err: ErrnoException | null) => {
				
				// File already exists error can be ignored
				if (err === null || err?.code === 'EEXIST') {

					// Generate random number to prevent name collisions
					const fileId = Math.floor(Math.random() * 10000000);

					const inFileName = `input-${fileId}.asy`;
					const outFileName = `output-${fileId}.svg`;

					const inputPath = path.join(dirPath, inFileName);

					fs.writeFile(inputPath, source, (err: ErrnoException | null) => {
						if (err) reject(err);
						const command = 'asy "{input}" -o "{output}" -f svg'
							.replace('{input}', inFileName)
							.replace('{output}', outFileName);

						exec(command, {cwd: dirPath, timeout: this.settings.timeout}, (err: ExecException | null) => {
							if (err) reject(err);
							fs.readFile(path.join(dirPath, outFileName), function (err: ErrnoException | null, data: Buffer) {
								if (err) reject(err)
								resolve(data.toString());
							});
						});
					});
				}
			})
        });
    }

	copyLibraryFiles() {
        const folder = this.app.vault.getAbstractFileByPath(this.settings.library);
        if (folder !== null && folder instanceof TFolder) {
            Vault.recurseChildren(folder, async (child : TAbstractFile) => {
                if (child instanceof TFile) {
                    const file = child as TFile;
                    if (file.extension === 'asy') {
                        const libFile = await this.app.vault.read(file);
                        fs.writeFileSync(path.join(TEMP_DIR, file.name), libFile);
                    }
                }
            });
        }
    }

    onunload() {
    }

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

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

class ObsidianAsymptoteSettings extends PluginSettingTab {
    plugin: ObsidianAsymptote;

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

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

        containerEl.empty();

        new Setting(containerEl)
		.setName('Library')
		.setDesc('Folder of Asymptote library files (relative to vault root)')
		.addText((text: TextComponent) => {
			text
			.setPlaceholder('Enter Path')
			.setValue(this.plugin.settings.library)
			.onChange(async (value) => {
				this.plugin.settings.library = value;
				await this.plugin.saveSettings();
			})
		});

		new Setting(containerEl)
		.setName('Clean Temporary Directory')
		.addButton((button: ButtonComponent) => {
			button
			.setButtonText('Clear')
			.onClick((_: MouseEvent) => {
				fs.rm(TEMP_DIR, { recursive: true, force: true }, (err: ErrnoException | null) => {
					if (err === null) {
						new Notice('Directory Cleared');
					} else {
						new Notice('Error Clearing Directory')
					}
				});
			});
		});

        new Setting(containerEl)
        .setName('Timeout (ms)')
        .addSlider((slider : SliderComponent) => {
            slider
            .setLimits(0, 30000, 100)
            .setValue(this.plugin.settings.timeout)
            .onChange(async (value) => {
				this.plugin.settings.timeout = value;
				await this.plugin.saveSettings();
            });
        });

    }
}