tweaked with some settings

This commit is contained in:
Nathan-CSE 2025-05-07 19:15:22 +10:00
parent c61aea83a2
commit 7c6293fa41
2 changed files with 42 additions and 14 deletions

38
main.ts
View File

@ -1,4 +1,4 @@
import { App, Editor, MarkdownView, Modal, Notice, Plugin, PluginSettingTab, Setting } from 'obsidian'; import { App, Editor, MarkdownView, Modal, Notice, ColorComponent, TextComponent, SliderComponent, Plugin, PluginSettingTab, Setting } from 'obsidian';
interface GridBackgroundSettings { interface GridBackgroundSettings {
gridSize: number; gridSize: number;
@ -54,6 +54,7 @@ export default class GridBackgroundPlugin extends Plugin {
class GridBackgroundSettingTab extends PluginSettingTab { class GridBackgroundSettingTab extends PluginSettingTab {
plugin: GridBackgroundPlugin; plugin: GridBackgroundPlugin;
sliderGridSize: SliderComponent;
constructor(app: App, plugin: GridBackgroundPlugin) { constructor(app: App, plugin: GridBackgroundPlugin) {
super(app, plugin); super(app, plugin);
@ -65,17 +66,44 @@ class GridBackgroundSettingTab extends PluginSettingTab {
containerEl.empty(); containerEl.empty();
containerEl.createEl('h2', { text: 'Grid Background Settings' }); containerEl.createEl('h2', { text: 'Grid Background Settings' });
new Setting(containerEl) const gridSizeSetting = new Setting(containerEl)
.setName('Grid Size') .setName('Grid Size')
.setDesc('Spacing between grid lines (in px)') .setDesc('Spacing between grid lines (in px)');
.addText(text =>
const gridSizeSlider = gridSizeSetting.addSlider(sliderValue =>
sliderValue
.setInstant(true)
.setValue(this.plugin.settings.gridSize)
.setLimits(20, 100, 1)
.onChange(async (value) => {
this.plugin.settings.gridSize = value || 20;
(gridSizeText.components[0] as TextComponent).setValue(value.toString());
await this.plugin.saveSettings();
})
);
const gridSizeText = gridSizeSetting.addText(text =>
text text
.setPlaceholder('e.g. 20') .setPlaceholder('e.g. 20')
.setValue(this.plugin.settings.gridSize.toString()) .setValue(this.plugin.settings.gridSize.toString())
.onChange(async (value) => { .onChange(async (value) => {
this.plugin.settings.gridSize = parseInt(value) || 20; this.plugin.settings.gridSize = parseInt(value) || 20;
(gridSizeText.components[0] as TextComponent).setValue(value.toString());
await this.plugin.saveSettings(); await this.plugin.saveSettings();
})); })
);
gridSizeSetting.addButton(button =>
button
.setButtonText('Reset')
.setCta()
.onClick(async () => {
this.plugin.settings.gridSize = DEFAULT_SETTINGS.gridSize;
(gridSizeText.components[0] as TextComponent).setValue(this.plugin.settings.gridSize.toString());
(gridSizeSlider.components[0] as SliderComponent).setValue(this.plugin.settings.gridSize);
await this.plugin.saveSettings();
})
);
new Setting(containerEl) new Setting(containerEl)
.setName('Grid Colour') .setName('Grid Colour')

View File

@ -1,9 +1,9 @@
{ {
"id": "sample-plugin", "id": "grid-background",
"name": "Sample Plugin", "name": "Grid Background",
"version": "1.0.0", "version": "1.0.0",
"minAppVersion": "0.15.0", "minAppVersion": "0.15.0",
"description": "Adds a customizable grid background to note views.", "description": "Adds a customisable grid background to note views.",
"author": "Nathan Nguyen", "author": "Nathan Nguyen",
"isDesktopOnly": false "isDesktopOnly": false
} }