Skip to content

Commit

Permalink
Adapting setting tab
Browse files Browse the repository at this point in the history
  • Loading branch information
@Acylation
Acylation committed Jul 13, 2023
1 parent d5cfee2 commit b2e8a47
Showing 1 changed file with 117 additions and 84 deletions.
201 changes: 117 additions & 84 deletions src/settings/SettingTab.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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)
Expand All @@ -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,
Expand All @@ -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,
Expand All @@ -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 {
Expand Down

0 comments on commit b2e8a47

Please sign in to comment.