Refactor settings

src/SmilesBlock.ts

@@ -7,8 +7,9 @@ import {
 import { gDrawer } from './global/drawer';
 
 import { gDataview, isPluginEnabled, getDataview } from './global/dataview';
-import { ChemPluginSettings, DEFAULT_SD_OPTIONS } from './settings/base';
+import { ChemPluginSettings } from './settings/base';
 import { addBlock, removeBlock } from './global/blocks';
+import { themes } from './settings/theme';
 
 import { i18n } from 'src/lib/i18n';
 
@@ -47,7 +48,8 @@ export class SmilesBlock extends MarkdownRenderChild {
 			this.renderCell(rows[0], div, this.theme);
 		} else {
 			const table = this.el.createDiv({ cls: 'chem-table' });
-			const maxWidth = this.settings.options?.width ?? 300;
+			const maxWidth =
+				this.settings.smilesDrawerOptions.moleculeOptions.width ?? 300;
 
 			rows.forEach((row) => {
 				const cell = table.createDiv({ cls: 'chem-cell' });
@@ -62,7 +64,8 @@ export class SmilesBlock extends MarkdownRenderChild {
 			});
 
 			table.style.gridTemplateColumns = `repeat(auto-fill, minmax(${
-				this.settings.options.width?.toString() ?? '300'
+				this.settings.smilesDrawerOptions.moleculeOptions.width?.toString() ??
+				'300'
 			}px, 1fr)`;
 		}
 	}
@@ -146,7 +149,7 @@ export class SmilesBlock extends MarkdownRenderChild {
 				errorCb(error, target.createEl('div'));
 			}
 		);
-		if (this.settings.options.scale == 0)
+		if (this.settings.smilesDrawerOptions.moleculeOptions.scale == 0)
 			svg.style.width = `${this.settings.imgWidth.toString()}px`;
 		return svg;
 	};
@@ -223,7 +226,7 @@ export class SmilesBlock extends MarkdownRenderChild {
 
 			// Apply background color
 			if (!this.settings.copy.transparent) {
-				ctx.fillStyle = DEFAULT_SD_OPTIONS.themes[copyTheme].BACKGROUND;
+				ctx.fillStyle = themes.copyTheme.BACKGROUND;
 				ctx.fillRect(0, 0, canvas.width, canvas.height);
 			}
 

src/SmilesInline.ts

@@ -112,7 +112,7 @@ export function inlinePlugin(settings: ChemPluginSettings) {
 				errorCb(error, target.createEl('div'));
 			}
 		);
-		if (settings.options.scale == 0)
+		if (settings.smilesDrawerOptions.moleculeOptions.scale == 0)
 			svg.style.width = `${settings.imgWidth.toString()}px`;
 		return svg;
 	};

src/global/drawer.ts

@@ -1,10 +1,20 @@
-import { DEFAULT_SD_OPTIONS, SMILES_DRAWER_OPTIONS } from 'src/settings/base';
+import {
+	DEFAULT_SD_OPTIONS,
+	SD_MoleculeOptions,
+	SD_ReactionOptions,
+} from 'src/settings/smilesDrawerOptions';
 import SmilesDrawer from 'smiles-drawer';
 
 export let gDrawer = new SmilesDrawer.SmiDrawer(DEFAULT_SD_OPTIONS);
 
-export const setDrawer = (options: Partial<SMILES_DRAWER_OPTIONS>) => {
-	gDrawer = new SmilesDrawer.SmiDrawer({ ...DEFAULT_SD_OPTIONS, ...options });
+export const setDrawer = (
+	moleculeOptions: Partial<SD_MoleculeOptions>,
+	reactionOptions: Partial<SD_ReactionOptions>
+) => {
+	gDrawer = new SmilesDrawer.SmiDrawer(
+		{ ...DEFAULT_SD_OPTIONS.moleculeOptions, ...moleculeOptions },
+		{ ...DEFAULT_SD_OPTIONS.reactionOptions, ...reactionOptions }
+	);
 };
 
 export const clearDrawer = () => {

src/main.ts

@@ -1,11 +1,7 @@
 import { Plugin, MarkdownPostProcessorContext } from 'obsidian';
-import {
-	DEFAULT_SETTINGS,
-	ChemPluginSettings,
-	SETTINGS_VERSION,
-} from './settings/base';
+import { ChemPluginSettings } from './settings/base';
 import { ChemSettingTab } from './settings/SettingTab';
-import { updateSettingsVersion } from './settings/update';
+import { migrateSettings } from './settings/base';
 import { SmilesBlock } from './SmilesBlock';
 import { inlinePlugin } from './SmilesInline';
 
@@ -23,7 +19,10 @@ export default class ChemPlugin extends Plugin {
 		// this.addRibbonIcon('hexagon', 'This is Chem Plugin', () => {});
 
 		// initialize global variables
-		setDrawer(this.settings.options);
+		setDrawer(
+			this.settings.smilesDrawerOptions.moleculeOptions,
+			this.settings.smilesDrawerOptions.reactionOptions
+		);
 		setBlocks();
 		setObserver();
 		// editor extension
@@ -44,17 +43,7 @@ export default class ChemPlugin extends Plugin {
 	}
 
 	async loadSettings() {
-		const candidate = Object.assign({}, await this.loadData());
-		if ('version' in candidate && candidate.version == SETTINGS_VERSION)
-			this.settings = Object.assign({}, DEFAULT_SETTINGS, candidate);
-		else if (Object.keys(candidate).length === 0)
-			this.settings = Object.assign({}, DEFAULT_SETTINGS);
-		else
-			this.settings = Object.assign(
-				{},
-				DEFAULT_SETTINGS,
-				updateSettingsVersion(candidate)
-			);
+		this.settings = migrateSettings(await this.loadData());
 	}
 
 	async saveSettings() {

src/settings/LivePreview.ts

@@ -42,7 +42,7 @@ export class LivePreview {
 			this.settings.darkTheme
 		);
 
-		if (this.settings.options.scale == 0)
+		if (this.settings.smilesDrawerOptions.moleculeOptions.scale == 0)
 			this.container.style.gridTemplateColumns = `repeat(auto-fill, minmax(${(
 				this.settings?.imgWidth ?? 300
 			).toString()}px, 1fr)`;
@@ -83,15 +83,18 @@ export class LivePreview {
 			container.style.display = `grid`;
 			container.style.alignContent = `center`;
 
-			if (this.settings.options.scale == 0)
+			if (this.settings.smilesDrawerOptions.moleculeOptions.scale == 0)
 				container.style.width = `${(
 					this.settings?.imgWidth ?? 300
 				).toString()}px`;
 			else if (
-				container.offsetWidth > (this.settings.options?.width ?? 300)
+				container.offsetWidth >
+				(this.settings.smilesDrawerOptions.moleculeOptions?.width ??
+					300)
 			) {
 				container.style.width = `${(
-					this.settings.options?.width ?? 300
+					this.settings.smilesDrawerOptions.moleculeOptions?.width ??
+					300
 				).toString()}px`;
 			}
 		};
@@ -106,20 +109,22 @@ export class LivePreview {
 				errorCb(error, target.createEl('div'));
 			}
 		);
-		if (this.settings.options.scale == 0)
+		if (this.settings.smilesDrawerOptions.moleculeOptions.scale == 0)
 			svg.style.width = `${(
 				this.settings?.imgWidth ?? 300
 			).toString()}px`;
 		else if (
-			parseFloat(svg.style.width) > (this.settings.options?.width ?? 300)
+			parseFloat(svg.style.width) >
+			(this.settings.smilesDrawerOptions.moleculeOptions?.width ?? 300)
 		) {
 			const r =
 				parseFloat(svg.style.width) / parseFloat(svg.style.height);
 			svg.style.width = `${(
-				this.settings.options?.width ?? 300
+				this.settings.smilesDrawerOptions.moleculeOptions?.width ?? 300
 			).toString()}px`;
 			svg.style.height = `${(
-				(this.settings.options?.width ?? 300) / r
+				(this.settings.smilesDrawerOptions.moleculeOptions?.width ??
+					300) / r
 			).toString()}px`;
 		}
 		return parseFloat(svg.style.width);