Improve width config

src/SmilesBlock.ts

@@ -43,9 +43,6 @@ export class SmilesBlock extends MarkdownRenderChild {
 				const cell = table.createDiv({ cls: 'chem-cell' });
 				const svgcell = cell.createSvg('svg');
 				this.renderCell(row, svgcell);
-
-				// option1: keep the original size, according to the max
-				// option2: resize and limiting this
 				if (parseFloat(svgcell.style.width) > maxWidth)
 					svgcell.style.width = `${maxWidth.toString()}px`;
 			});
@@ -67,7 +64,8 @@ export class SmilesBlock extends MarkdownRenderChild {
 					: this.settings.lightTheme
 			);
 		});
-		console.log(this.settings.options.scale);
+		if (this.settings.options.scale == 0)
+			target.style.width = `${this.settings.imgWidth}px`;
 	};
 
 	async onload() {

src/blocks.ts

@@ -23,3 +23,9 @@ export const refreshBlocks = () => {
 		block.render();
 	});
 };
+
+export const clearBlocks = () => {
+	gBlocks.forEach((block) => {
+		removeBlock(block);
+	});
+};

src/drawer.ts

@@ -6,3 +6,7 @@ export let gDrawer = new SmilesDrawer.SvgDrawer(DEFAULT_SD_OPTIONS);
 export const setDrawer = (options: Partial<SMILES_DRAWER_OPTIONS>) => {
 	gDrawer = new SmilesDrawer.SvgDrawer({ ...DEFAULT_SD_OPTIONS, ...options });
 };
+
+export const clearDrawer = () => {
+	gDrawer = {};
+};

src/main.ts

@@ -2,9 +2,9 @@ import { Plugin, MarkdownPostProcessorContext } from 'obsidian';
 import { DEFAULT_SETTINGS, ChemPluginSettings } from './settings/base';
 import { ChemSettingTab } from './settings/SettingTab';
 import { SmilesBlock } from './SmilesBlock';
-import { setBlocks } from './blocks';
 
-import { setDrawer } from './drawer';
+import { setBlocks, clearBlocks } from './blocks';
+import { setDrawer, clearDrawer } from './drawer';
 import { setObserver, detachObserver } from './themeObserver';
 
 export default class ChemPlugin extends Plugin {
@@ -29,6 +29,8 @@ export default class ChemPlugin extends Plugin {
 
 	async onunload() {
 		detachObserver();
+		clearBlocks();
+		clearDrawer();
 	}
 
 	async loadSettings() {

src/settings/LivePreview.ts

@@ -0,0 +1,91 @@
+import { ChemPluginSettings } from '../settings/base';
+
+import SmilesDrawer from 'smiles-drawer';
+import { gDrawer } from '../drawer';
+
+/**
+ * Refer to plugin abcjs
+ * This class abstraction is needed to support load/unload hooks
+ * "If your post processor requires lifecycle management, for example, to clear an interval, kill a subprocess, etc when this element is removed from the app..."
+ * https://marcus.se.net/obsidian-plugin-docs/reference/typescript/interfaces/MarkdownPostProcessorContext#addchild
+ */
+export class LivePreview {
+	container: HTMLDivElement;
+	lightCard: HTMLDivElement;
+	darkCard: HTMLDivElement;
+	settings: ChemPluginSettings;
+
+	constructor(
+		private readonly el: HTMLElement,
+		private readonly argSettings: ChemPluginSettings
+	) {
+		this.container = this.el.createEl('div');
+		this.container.style.display = `flex`;
+		this.container.style.flexWrap = `wrap`;
+		this.container.style.justifyContent = `center`;
+
+		this.lightCard = this.container.createEl('div', {
+			cls: 'chemcard theme-light',
+		});
+		this.darkCard = this.container.createEl('div', {
+			cls: 'chemcard theme-dark',
+		});
+
+		this.settings = this.argSettings;
+	}
+
+	render = () => {
+		this.lightCard.empty();
+		const lightWidth = this.renderCell(
+			this.settings.sample1,
+			this.lightCard,
+			this.settings.lightTheme
+		);
+
+		this.darkCard.empty();
+		const darkWidth = this.renderCell(
+			this.settings.sample2,
+			this.darkCard,
+			this.settings.darkTheme
+		);
+
+		if (this.settings.options.scale == 0)
+			this.container.style.gridTemplateColumns = `repeat(auto-fill, minmax(${
+				this.settings?.imgWidth ?? '300'
+			}px, 1fr)`;
+		else
+			this.container.style.gridTemplateColumns = `repeat(auto-fill, minmax(${(lightWidth >
+			darkWidth
+				? lightWidth
+				: darkWidth
+			).toString()}px, 1fr)`;
+	};
+
+	updateSettings = (argSettings: ChemPluginSettings) => {
+		this.settings = argSettings;
+	};
+
+	private renderCell = (
+		source: string,
+		target: HTMLElement,
+		style: string
+	) => {
+		const svg = target.createSvg('svg') as SVGSVGElement;
+		SmilesDrawer.parse(source, (tree: object) => {
+			gDrawer.draw(tree, svg, style);
+		});
+		if (this.settings.options.scale == 0)
+			svg.style.width = `${this.settings?.imgWidth ?? '300'}px`;
+		else if (
+			parseFloat(svg.style.width) > (this.settings.options?.width ?? 300)
+		) {
+			svg.style.width = `${(
+				this.settings.options?.width ?? 300
+			).toString()}px`;
+			svg.style.height = `${(
+				this.settings.options?.height ?? 300
+			).toString()}px`;
+		}
+		return parseFloat(svg.style.width);
+	};
+}