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

fixed universal colour settings and lined paper setting

This commit is contained in:
Nathan-CSE 2025-05-08 21:45:30 +10:00
parent 7c5a6a6b0d
commit 29695b3de0
1 changed files with 25 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
main.ts
View File

@ -8,18 +8,15 @@ interface PaperSettings {
interface GridSettings { interface GridSettings {
gridSize: number; gridSize: number;
gridColour: string;
} }
interface LinedSettings { interface LinedSettings {
lineHeight: number; lineHeight: number;
lineColour: string;
} }
interface BulletSettings { interface BulletSettings {
dotSize: number; dotSize: number;
dotSpacing: number; dotSpacing: number;
dotColour: string;
} }
interface PluginSettings { interface PluginSettings {
@ -37,16 +34,13 @@ const DEFAULT_SETTINGS: PluginSettings = {
}, },
grid: { grid: {
gridSize: 50, gridSize: 50,
gridColour: 'rgba(255, 255, 255, 1)',
}, },
lined: { lined: {
lineHeight: 20, lineHeight: 20,
lineColour: 'rgba(255, 255, 255, 1)',
}, },
bullet: { bullet: {
dotSize: 5, dotSize: 5,
dotSpacing: 20, dotSpacing: 20,
dotColour: 'rgba(255, 255, 255, 1)',
}, },
}; };
@ -80,8 +74,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, rgba(${validColour.match(/\d+, \d+, \d+/)?.[0]}, ${transparency}) 1px, transparent 1px), linear-gradient(to right, transparent ${gridSize - 1}px, rgba(${validColour.match(/\d+, \d+, \d+/)?.[0]}, ${transparency}) 1px),
linear-gradient(to bottom, rgba(${validColour.match(/\d+, \d+, \d+/)?.[0]}, ${transparency}) 1px, transparent 1px); linear-gradient(to bottom, transparent ${gridSize - 1}px, rgba(${validColour.match(/\d+, \d+, \d+/)?.[0]}, ${transparency}) 1px);
background-size: ${gridSize}px ${gridSize}px; background-size: ${gridSize}px ${gridSize}px;
} }
`; `;
@ -90,7 +84,13 @@ export default class GridBackgroundPlugin extends Plugin {
cssContent = ` cssContent = `
.markdown-source-view, .markdown-source-view,
.markdown-preview-view { .markdown-preview-view {
background-image: linear-gradient(to bottom, rgba(${validColour.match(/\d+, \d+, \d+/)?.[0]}, ${transparency}) 1px, transparent ${lineHeight - 1}px); background-image: repeating-linear-gradient(
to bottom,
rgba(${validColour.match(/\d+, \d+, \d+/)?.[0]}, ${transparency}) 0px,
rgba(${validColour.match(/\d+, \d+, \d+/)?.[0]}, ${transparency}) 1px,
transparent 1px,
transparent ${lineHeight}px
);
} }
`; `;
} else if (paperType === 'bullet') { } else if (paperType === 'bullet') {
@ -123,6 +123,7 @@ class GridBackgroundSettingTab extends PluginSettingTab {
plugin: GridBackgroundPlugin; plugin: GridBackgroundPlugin;
sliderGridSize: SliderComponent; sliderGridSize: SliderComponent;
constructor(app: App, plugin: GridBackgroundPlugin) { constructor(app: App, plugin: GridBackgroundPlugin) {
super(app, plugin); super(app, plugin);
this.plugin = plugin; this.plugin = plugin;
@ -133,6 +134,8 @@ class GridBackgroundSettingTab extends PluginSettingTab {
containerEl.empty(); containerEl.empty();
containerEl.createEl('h2', { text: 'Paper Background Settings' }); containerEl.createEl('h2', { text: 'Paper Background Settings' });
let pageColour: ColorComponent;
// Paper Type Selection // Paper Type Selection
new Setting(containerEl) new Setting(containerEl)
.setName('Paper Type') .setName('Paper Type')
@ -146,7 +149,7 @@ class GridBackgroundSettingTab extends PluginSettingTab {
.onChange(async (value) => { .onChange(async (value) => {
this.plugin.settings.paper.paperType = value as 'grid' | 'lined' | 'bullet'; this.plugin.settings.paper.paperType = value as 'grid' | 'lined' | 'bullet';
await this.plugin.saveSettings(); await this.plugin.saveSettings();
this.display(); // Refresh settings UI this.display();
}); });
}); });
@ -167,14 +170,20 @@ class GridBackgroundSettingTab extends PluginSettingTab {
// Universal Colour Setting // Universal Colour Setting
new Setting(containerEl) new Setting(containerEl)
.setName('Universal Colour') .setName('Universal Colour')
.setDesc('Set the colour for the paper background (RGBA)') .setDesc('Set the colour for the lines/dots/grids)')
.addText(text => { .addColorPicker(colour => {
text pageColour = colour;
colour
.setValue(this.plugin.settings.paper.colour) .setValue(this.plugin.settings.paper.colour)
.onChange(async (value) => { .onChange(async (value) => {
this.plugin.settings.paper.colour = value; let rgbValue: { r: number; g: number; b: number } = colour.getValueRgb();
const colourValue = `rgba(${rgbValue.r}, ${rgbValue.g}, ${rgbValue.b}, ${this.plugin.settings.paper.transparency})`;
console.log(colourValue)
this.plugin.settings.paper.colour = colourValue;
await this.plugin.saveSettings(); await this.plugin.saveSettings();
}); })
}); });
// Specific Settings Based on Paper Type // Specific Settings Based on Paper Type