tpl
/
obsidian-sample-plugin
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fixed transparency bug

This commit is contained in:
Nathan-CSE 2025-05-08 16:30:37 +10:00
parent 4ca84ad75a
commit 1f1b43e0f5
1 changed files with 15 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
main.ts
View File

@ -3,12 +3,14 @@ import { App, Editor, MarkdownView, Modal, Notice, ColorComponent, TextComponent
interface GridBackgroundSettings { interface GridBackgroundSettings {
gridSize: number; gridSize: number;
gridColour: string; gridColour: string;
gridTransparency: number;
} }
const DEFAULT_SETTINGS: GridBackgroundSettings = { const DEFAULT_SETTINGS: GridBackgroundSettings = {
gridSize: 50, gridSize: 50,
gridColour: 'rgba(255, 255, 255, 0.05)' gridColour: 'rgba(255, 255, 255, 1)',
} gridTransparency: 0.05
};
export default class GridBackgroundPlugin extends Plugin { export default class GridBackgroundPlugin extends Plugin {
settings: GridBackgroundSettings; settings: GridBackgroundSettings;
@ -33,8 +35,8 @@ export default class GridBackgroundPlugin extends Plugin {
.markdown-source-view, .markdown-source-view,
.markdown-preview-view { .markdown-preview-view {
background-image: background-image:
linear-gradient(to right, ${this.settings.gridColour} 1px, transparent 1px), linear-gradient(to right, rgba(${this.settings.gridColour.match(/\d+, \d+, \d+/)?.[0]}, ${this.settings.gridTransparency}) 1px, transparent 1px),
linear-gradient(to bottom, ${this.settings.gridColour} 1px, transparent 1px); linear-gradient(to bottom, rgba(${this.settings.gridColour.match(/\d+, \d+, \d+/)?.[0]}, ${this.settings.gridTransparency}) 1px, transparent 1px);
background-size: ${this.settings.gridSize}px ${this.settings.gridSize}px; background-size: ${this.settings.gridSize}px ${this.settings.gridSize}px;
} }
`; `;
@ -133,15 +135,16 @@ class GridBackgroundSettingTab extends PluginSettingTab {
colour colour
.setValue(this.plugin.settings.gridColour) .setValue(this.plugin.settings.gridColour)
.onChange(async (value) => { .onChange(async (value) => {
this.plugin.settings.gridColour = value; let rgbValue: { r: number; g: number; b: number } = colour.getValueRgb();
const colourValue = `rgba(${rgbValue.r}, ${rgbValue.g}, ${rgbValue.b}, ${this.plugin.settings.gridTransparency})`;
console.log(colourValue)
this.plugin.settings.gridColour = colourValue;
await this.plugin.saveSettings(); await this.plugin.saveSettings();
}) })
}); });
// BUG: This transparency setting has some bugs -> sometimes it reads a previous colour value which overrides
// the intended colour. And sometimes the slider is off with the transparency values -> potentially a race
// condition?
new Setting(containerEl) new Setting(containerEl)
.setName('Grid Transparency') .setName('Grid Transparency')
.setDesc('Transparency of the grid lines') .setDesc('Transparency of the grid lines')
@ -149,44 +152,12 @@ class GridBackgroundSettingTab extends PluginSettingTab {
sliderComponent = sliderValue; sliderComponent = sliderValue;
sliderValue sliderValue
.setInstant(true) .setInstant(true)
.setValue((() => { .setValue(this.plugin.settings.gridTransparency * 100)
const match = this.plugin.settings.gridColour.match(/\d+/g);
if (match && match.length === 4) {
return parseFloat(match[3]) * 100; // Extract alpha value and convert to percentage
}
return 5; // Default to 5% transparency if gridColour is not properly formatted
})())
.setLimits(0, 100, 1) .setLimits(0, 100, 1)
.onChange(async (value) => { .onChange(async (value) => {
const alpha = (value / 100).toFixed(2); // Convert percentage back to alpha value this.plugin.settings.gridTransparency = value / 100;
this.plugin.updateGridColourAlpha(Number(alpha));
await this.plugin.saveSettings(); await this.plugin.saveSettings();
}); });
}) });
// TODO: Style this to reflect the current transparency value
// .addText(text => {
// textComponent = text;
// text
// .setPlaceholder('e.g. 20')
// .setValue(this.plugin.settings.gridSize.toString())
// .onChange(async (value) => {
// let parsedValue = parseInt(value) || 20;
// if (parsedValue < 20) {
// parsedValue = 20
// } else if (parsedValue > 100) {
// parsedValue = 100
// }
// textComponent.setValue(value.toString());
// this.plugin.settings.gridSize = parsedValue;
// await this.plugin.saveSettings();
// sliderComponent.setValue(parsedValue); // Update the slider when text changes
// })
// .inputEl.style.width = '40px'
// }
// )
} }
} }