From c61aea83a2f9fe10232bf6bf460278f440743f66 Mon Sep 17 00:00:00 2001 From: Nathan-CSE Date: Wed, 7 May 2025 18:42:02 +1000 Subject: [PATCH] created basic functionality --- main.ts | 172 +++++++++++++++++++++----------------------------------- 1 file changed, 65 insertions(+), 107 deletions(-) diff --git a/main.ts b/main.ts index 2d07212..b2c10f6 100644 --- a/main.ts +++ b/main.ts @@ -1,134 +1,92 @@ import { App, Editor, MarkdownView, Modal, Notice, Plugin, PluginSettingTab, Setting } from 'obsidian'; -// Remember to rename these classes and interfaces! - -interface MyPluginSettings { - mySetting: string; +interface GridBackgroundSettings { + gridSize: number; + gridColour: string; } -const DEFAULT_SETTINGS: MyPluginSettings = { - mySetting: 'default' +const DEFAULT_SETTINGS: GridBackgroundSettings = { + gridSize: 50, + gridColour: 'rgba(255, 255, 255, 0.05)' } -export default class MyPlugin extends Plugin { - settings: MyPluginSettings; +export default class GridBackgroundPlugin extends Plugin { + settings: GridBackgroundSettings; async onload() { await this.loadSettings(); - // This creates an icon in the left ribbon. - const ribbonIconEl = this.addRibbonIcon('dice', 'Sample Plugin', (evt: MouseEvent) => { - // Called when the user clicks the icon. - new Notice('This is a notice!'); - }); - // Perform additional things with the ribbon - ribbonIconEl.addClass('my-plugin-ribbon-class'); + this.injectGridCSS(); + this.addSettingTab(new GridBackgroundSettingTab(this.app, this)); - // This adds a status bar item to the bottom of the app. Does not work on mobile apps. - const statusBarItemEl = this.addStatusBarItem(); - statusBarItemEl.setText('Status Bar Text'); - - // This adds a simple command that can be triggered anywhere - this.addCommand({ - id: 'open-sample-modal-simple', - name: 'Open sample modal (simple)', - callback: () => { - new SampleModal(this.app).open(); - } - }); - // This adds an editor command that can perform some operation on the current editor instance - this.addCommand({ - id: 'sample-editor-command', - name: 'Sample editor command', - editorCallback: (editor: Editor, view: MarkdownView) => { - console.log(editor.getSelection()); - editor.replaceSelection('Sample Editor Command'); - } - }); - // This adds a complex command that can check whether the current state of the app allows execution of the command - this.addCommand({ - id: 'open-sample-modal-complex', - name: 'Open sample modal (complex)', - checkCallback: (checking: boolean) => { - // Conditions to check - const markdownView = this.app.workspace.getActiveViewOfType(MarkdownView); - if (markdownView) { - // If checking is true, we're simply "checking" if the command can be run. - // If checking is false, then we want to actually perform the operation. - if (!checking) { - new SampleModal(this.app).open(); - } - - // This command will only show up in Command Palette when the check function returns true - return true; - } - } - }); - - // This adds a settings tab so the user can configure various aspects of the plugin - this.addSettingTab(new SampleSettingTab(this.app, this)); - - // If the plugin hooks up any global DOM events (on parts of the app that doesn't belong to this plugin) - // Using this function will automatically remove the event listener when this plugin is disabled. - this.registerDomEvent(document, 'click', (evt: MouseEvent) => { - console.log('click', evt); - }); - - // When registering intervals, this function will automatically clear the interval when the plugin is disabled. - this.registerInterval(window.setInterval(() => console.log('setInterval'), 5 * 60 * 1000)); } onunload() { - + const style = document.getElementById('grid-background-style'); + style?.remove(); } - async loadSettings() { - this.settings = Object.assign({}, DEFAULT_SETTINGS, await this.loadData()); - } + injectGridCSS() { + const style = document.createElement('style'); + style.id = 'grid-background-style'; + style.textContent = ` + .markdown-source-view, + .markdown-preview-view { + background-image: + linear-gradient(to right, ${this.settings.gridColour} 1px, transparent 1px), + linear-gradient(to bottom, ${this.settings.gridColour} 1px, transparent 1px); + background-size: ${this.settings.gridSize}px ${this.settings.gridSize}px; + } + `; + document.head.appendChild(style); + } - async saveSettings() { - await this.saveData(this.settings); - } + async loadSettings() { + this.settings = Object.assign({}, DEFAULT_SETTINGS, await this.loadData()); + } + + async saveSettings() { + await this.saveData(this.settings); + this.onunload(); + this.injectGridCSS(); + } } -class SampleModal extends Modal { - constructor(app: App) { - super(app); - } +class GridBackgroundSettingTab extends PluginSettingTab { + plugin: GridBackgroundPlugin; - onOpen() { - const {contentEl} = this; - contentEl.setText('Woah!'); - } - - onClose() { - const {contentEl} = this; - contentEl.empty(); - } -} - -class SampleSettingTab extends PluginSettingTab { - plugin: MyPlugin; - - constructor(app: App, plugin: MyPlugin) { + constructor(app: App, plugin: GridBackgroundPlugin) { super(app, plugin); this.plugin = plugin; } - display(): void { - const {containerEl} = this; + display(): void { + const { containerEl } = this; + containerEl.empty(); + containerEl.createEl('h2', { text: 'Grid Background Settings' }); - containerEl.empty(); + new Setting(containerEl) + .setName('Grid Size') + .setDesc('Spacing between grid lines (in px)') + .addText(text => + text + .setPlaceholder('e.g. 20') + .setValue(this.plugin.settings.gridSize.toString()) + .onChange(async (value) => { + this.plugin.settings.gridSize = parseInt(value) || 20; + await this.plugin.saveSettings(); + })); - new Setting(containerEl) - .setName('Setting #1') - .setDesc('It\'s a secret') - .addText(text => text - .setPlaceholder('Enter your secret') - .setValue(this.plugin.settings.mySetting) - .onChange(async (value) => { - this.plugin.settings.mySetting = value; - await this.plugin.saveSettings(); - })); - } + new Setting(containerEl) + .setName('Grid Colour') + .setDesc('Colour of the grid lines (rgba or hex)') + .addText(text => + text + .setPlaceholder('e.g. rgba(0,0,0,0.05)') + .setValue(this.plugin.settings.gridColour) + .onChange(async (value) => { + this.plugin.settings.gridColour = value; + await this.plugin.saveSettings(); + })); + } }