From b2e8a471448b67bc8b4e273fcfb2564a7fcd1a58 Mon Sep 17 00:00:00 2001 From: Acylation <532117255@qq.com> Date: Thu, 13 Jul 2023 19:55:04 +0800 Subject: [PATCH] Adapting setting tab --- src/settings/SettingTab.ts | 201 +++++++++++++++++++++---------------- 1 file changed, 117 insertions(+), 84 deletions(-) diff --git a/src/settings/SettingTab.ts b/src/settings/SettingTab.ts index 4e22023..4d896f5 100644 --- a/src/settings/SettingTab.ts +++ b/src/settings/SettingTab.ts @@ -27,11 +27,53 @@ export class ChemSettingTab extends PluginSettingTab { containerEl.empty(); - // TODO: Check styling instructions and remove this - containerEl.createEl('h2', { text: 'Style Preferences' }); + const scaleSetting = new Setting(containerEl) + .setName('Scale') + .setDesc( + 'Adjust the global molecule scale. Set to zero to unify image widths, otherwise the structures will share the same bond length.' + ) + .addExtraButton((button) => { + button + .setIcon('rotate-ccw') + .setTooltip('Restore default') + .onClick(async () => { + this.plugin.settings.options.scale = 1; + scaleSlider.setValue(50); + await this.plugin.saveSettings(); + setDrawer({ + ...DEFAULT_SD_OPTIONS, + ...this.plugin.settings.options, + }); + onSettingsChange(); + unifyBondLength(); + }); + }); + + const scaleLabel = scaleSetting.controlEl.createDiv('slider-readout'); + scaleLabel.setText( + (this.plugin.settings.options.scale ?? 1.0).toFixed(2).toString() + ); + + const scaleSlider = new SliderComponent(scaleSetting.controlEl) + .setValue(50 * (this.plugin.settings.options.scale ?? 1.0)) + .setLimits(0.0, 100, 0.5) + .onChange(async (value) => { + this.plugin.settings.options.scale = value / 50; + scaleLabel.setText((value / 50).toFixed(2).toString()); + await this.plugin.saveSettings(); + setDrawer({ + ...DEFAULT_SD_OPTIONS, + ...this.plugin.settings.options, + }); + onSettingsChange(); + if (value == 0) unifyImageWidth(); + else unifyBondLength(); + }); + + const widthSettings = new Setting(containerEl); new Setting(containerEl) - .setName('Light Theme') + .setName('Light theme') .setDesc('Active when Obsidian is under light mode.') .addDropdown((dropdown) => dropdown @@ -45,7 +87,7 @@ export class ChemSettingTab extends PluginSettingTab { ); new Setting(containerEl) - .setName('Dark Theme') + .setName('Dark theme') .setDesc('Active when Obsidian is under dark mode.') .addDropdown((dropdown) => dropdown @@ -58,10 +100,10 @@ export class ChemSettingTab extends PluginSettingTab { }) ); - containerEl.createEl('h2', { text: 'Live Preview' }); + new Setting(containerEl).setName('Live Preview').setHeading(); new Setting(containerEl) - .setName('Sample Smiles 1') + .setName('Sample SMILES strings') .setDesc('Input smiles strings to see the styled structure.') .addText((text) => text @@ -75,11 +117,7 @@ export class ChemSettingTab extends PluginSettingTab { await this.plugin.saveSettings(); onSettingsChange(); }) - ); - - new Setting(containerEl) - .setName('Sample Smiles 2') - .setDesc('Input smiles strings to see the styled structure.') + ) .addText((text) => text .setPlaceholder(SAMPLE_SMILES_2) @@ -95,81 +133,19 @@ export class ChemSettingTab extends PluginSettingTab { ); const preview = new LivePreview(containerEl, this.plugin.settings); - preview.render(); //initialize - new Setting(containerEl) - .setName('Advanced Settings') - .setDesc('Configure smiles drawer options.') - .setHeading(); + new Setting(containerEl).setName('Advanced Settings').setHeading(); new Setting(containerEl) - .setName('Image Width') - .setDesc('Adjust the width of the molecule image.') - .addText((text) => { - text.setValue(this.plugin.settings?.imgWidth ?? '300') - .setPlaceholder('300') - .onChange(async (value) => { - if (value == '') { - value = '300'; - } - this.plugin.settings.imgWidth = value; - await this.plugin.saveSettings(); - onSettingsChange(); - }); - }); - - const scaleSetting = new Setting(containerEl) - .setName('Scale') - .setDesc('Adjust the global molecule scale.') - .addExtraButton((button) => { - button - .setIcon('rotate-ccw') - .setTooltip('Restore default') - .onClick(async () => { - this.plugin.settings.options.scale = 1; - scaleSlider.setValue(50); - await this.plugin.saveSettings(); - setDrawer({ - ...DEFAULT_SD_OPTIONS, - ...this.plugin.settings.options, - }); - onSettingsChange(); - }); - }); - - const scaleLabel = scaleSetting.controlEl.createDiv('slider-readout'); - scaleLabel.setText( - (this.plugin.settings.options.scale ?? 1.0).toFixed(2).toString() - ); - - const scaleSlider = new SliderComponent(scaleSetting.controlEl) - .setValue(50 * (this.plugin.settings.options.scale ?? 1.0)) - .setLimits(0.0, 100, 0.5) - .onChange(async (value) => { - this.plugin.settings.options.scale = value / 50; - scaleLabel.setText((value / 50).toFixed(2).toString()); - await this.plugin.saveSettings(); - setDrawer({ - ...DEFAULT_SD_OPTIONS, - ...this.plugin.settings.options, - }); - onSettingsChange(); - }); - - new Setting(containerEl) - .setName('Max width in table') // width limitation - .setDesc('Maximum width in multiline') - .addText((text) => - text + .setName('Compact drawing') + .setDesc('Linearize simple structures and functional groups.') + .addToggle((toggle) => + toggle .setValue( - this.plugin.settings.options.width?.toString() ?? '300' + this.plugin.settings.options?.compactDrawing ?? false ) .onChange(async (value) => { - if (value == '') { - value = '300'; - } - this.plugin.settings.options.width = parseInt(value); - this.plugin.settings.options.height = parseInt(value); + this.plugin.settings.options.compactDrawing = value; await this.plugin.saveSettings(); setDrawer({ ...DEFAULT_SD_OPTIONS, @@ -180,15 +156,15 @@ export class ChemSettingTab extends PluginSettingTab { ); new Setting(containerEl) - .setName('Compact Drawing') - .setDesc('Linearize simple structures and functional groups.') + .setName('Show terminal carbons') + .setDesc('Explictly draw terminal carbons.') .addToggle((toggle) => toggle .setValue( - this.plugin.settings.options.compactDrawing ?? false + this.plugin.settings.options?.terminalCarbons ?? false ) .onChange(async (value) => { - this.plugin.settings.options.compactDrawing = value; + this.plugin.settings.options.terminalCarbons = value; await this.plugin.saveSettings(); setDrawer({ ...DEFAULT_SD_OPTIONS, @@ -202,6 +178,63 @@ export class ChemSettingTab extends PluginSettingTab { preview.updateSettings(this.plugin.settings); preview.render(); }; + + const unifyBondLength = () => { + widthSettings.controlEl.empty(); + widthSettings + .setName('Maximum width') + .setDesc( + 'Crop structure images that are too large in a multiline block.' + ) + .addText((text) => + text + .setValue( + this.plugin.settings.options.width?.toString() ?? + '300' + ) + .onChange(async (value) => { + if (value == '') { + value = '300'; + } + this.plugin.settings.options.width = + parseInt(value); + this.plugin.settings.options.height = + parseInt(value); + await this.plugin.saveSettings(); + setDrawer({ + ...DEFAULT_SD_OPTIONS, + ...this.plugin.settings.options, + }); + onSettingsChange(); + }) + ); + }; + + const unifyImageWidth = () => { + widthSettings.controlEl.empty(); + widthSettings + .setName('Image width') + .setDesc( + "Adjust the width of the molecule image. Only valid when 'scale' is set to zero." + ) + .addText((text) => { + text.setValue(this.plugin.settings?.imgWidth ?? '300') + .setPlaceholder('300') + .onChange(async (value) => { + if (value == '') { + value = '300'; + } + this.plugin.settings.imgWidth = value; + await this.plugin.saveSettings(); + onSettingsChange(); + }); + }); + }; + + // initialize + preview.render(); + if ((this.plugin.settings.options?.scale ?? 1) == 0) unifyImageWidth(); + else unifyBondLength(); } hide(): void {