From ad0ec7489cf523a68cf437701eead013ac86645a Mon Sep 17 00:00:00 2001 From: james-xli Date: Sun, 12 May 2024 22:29:39 -0700 Subject: [PATCH 1/6] Add setting for max image width when viewing .note files Per issue #22, adds a max px width setting in the settings pane. Notes are still responsive to window size below the max width. --- main.ts | 17 ++++++++++++++++- supernote-typescript | 2 +- 2 files changed, 17 insertions(+), 2 deletions(-) diff --git a/main.ts b/main.ts index 7570d95..6343b0d 100644 --- a/main.ts +++ b/main.ts @@ -7,6 +7,7 @@ interface SupernotePluginSettings { showTOC: boolean; showExportButtons: boolean; collapseRecognizedText: boolean, + noteImageMaxWidth: number; } const DEFAULT_SETTINGS: SupernotePluginSettings = { @@ -15,7 +16,8 @@ const DEFAULT_SETTINGS: SupernotePluginSettings = { showTOC: true, showExportButtons: true, collapseRecognizedText: false, -}; + noteImageMaxWidth: 0, +} function generateTimestamp(): string { const date = new Date(); @@ -195,6 +197,9 @@ export class SupernoteView extends FileView { if (this.settings.invertColorsWhenDark) { imgElement.addClass("supernote-invert-dark"); } + if (this.settings.noteImageMaxWidth > 0) { + imgElement.setAttr('style', 'width: 100%; max-width: ' + this.settings.noteImageMaxWidth + 'px') + } imgElement.draggable = true; // Create a button to save image to vault @@ -461,6 +466,16 @@ class SupernoteSettingTab extends PluginSettingTab { .setValue(this.plugin.settings.collapseRecognizedText) .onChange(async (value) => { this.plugin.settings.collapseRecognizedText = value; + + new Setting(containerEl) + .setName('Note width in .note files') + .setDesc('Width of the note image when viewing .note files, in pixels. Does not affect exported images and markdown. Set to 0 to allow the image to scale freely.') + .addSlider(text => text + .setLimits(0, 1400, 50) // Width of an A6X2/Nomad page at 100% is 1404 px + .setDynamicTooltip() + .setValue(this.plugin.settings.noteImageMaxWidth) + .onChange(async (value) => { + this.plugin.settings.noteImageMaxWidth = value; await this.plugin.saveSettings(); }) ); diff --git a/supernote-typescript b/supernote-typescript index 57f19b7..3adba0e 160000 --- a/supernote-typescript +++ b/supernote-typescript @@ -1 +1 @@ -Subproject commit 57f19b7a2a5722cadf06dbb817ab53111ad4b0e2 +Subproject commit 3adba0e53de64a413461b3bf8a2403eaa55fbb8c From 4e7b98a92eba4261478611870a072a8f9a0b7ea1 Mon Sep 17 00:00:00 2001 From: james-xli Date: Sat, 18 May 2024 07:45:29 -0700 Subject: [PATCH 2/6] Remove special behavior when set to 0px; set default to 1400px I think this makes the setting behavior more intuitive, because the slider value now always means what it seems to mean. Previously, setting to 0px allowed the page to go to its full 1404px width, but that's basically the same as just setting 1400px for the max width. I set the lower bound at 100px so that a user can't accidentally make the pages disappear entirely. Note: I know pages in landscape orientation would have a width of 1872px, but I'm going with 1400px for now because: - This plugin doesn't seem to be parsing landscape notes correctly at the moment - 1400px is already very wide --- main.ts | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/main.ts b/main.ts index 6343b0d..b9c7ad2 100644 --- a/main.ts +++ b/main.ts @@ -17,6 +17,7 @@ const DEFAULT_SETTINGS: SupernotePluginSettings = { showExportButtons: true, collapseRecognizedText: false, noteImageMaxWidth: 0, + noteImageMaxWidth: 1400, // Default to (nearly) the full width of the image } function generateTimestamp(): string { @@ -197,9 +198,7 @@ export class SupernoteView extends FileView { if (this.settings.invertColorsWhenDark) { imgElement.addClass("supernote-invert-dark"); } - if (this.settings.noteImageMaxWidth > 0) { - imgElement.setAttr('style', 'width: 100%; max-width: ' + this.settings.noteImageMaxWidth + 'px') - } + imgElement.setAttr('style', 'width: 100%; max-width: ' + this.settings.noteImageMaxWidth + 'px') // Note width responsive to container width, up to the set max width imgElement.draggable = true; // Create a button to save image to vault @@ -471,7 +470,7 @@ class SupernoteSettingTab extends PluginSettingTab { .setName('Note width in .note files') .setDesc('Width of the note image when viewing .note files, in pixels. Does not affect exported images and markdown. Set to 0 to allow the image to scale freely.') .addSlider(text => text - .setLimits(0, 1400, 50) // Width of an A6X2/Nomad page at 100% is 1404 px + .setLimits(100, 1400, 50) // Width of an A5X/A6X2/Nomad page is 1404 px (with no upscaling) .setDynamicTooltip() .setValue(this.plugin.settings.noteImageMaxWidth) .onChange(async (value) => { From 67de896d3bf3064ed22668efb6577047afd746d8 Mon Sep 17 00:00:00 2001 From: james-xli Date: Sat, 18 May 2024 09:03:37 -0700 Subject: [PATCH 3/6] Update settings description: Remove reference to 0px behavior I removed the special 0px behavior in the previous commit but forgot to update this text in the settings description. --- main.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/main.ts b/main.ts index b9c7ad2..5c3c407 100644 --- a/main.ts +++ b/main.ts @@ -468,7 +468,7 @@ class SupernoteSettingTab extends PluginSettingTab { new Setting(containerEl) .setName('Note width in .note files') - .setDesc('Width of the note image when viewing .note files, in pixels. Does not affect exported images and markdown. Set to 0 to allow the image to scale freely.') + .setDesc('Width of the note image when viewing .note files, in pixels. Does not affect exported images and markdown.') .addSlider(text => text .setLimits(100, 1400, 50) // Width of an A5X/A6X2/Nomad page is 1404 px (with no upscaling) .setDynamicTooltip() From 47084d5c94c4c2cc34b47f0e5a5683cffa3e6fc4 Mon Sep 17 00:00:00 2001 From: james-xli Date: Sat, 18 May 2024 09:44:44 -0700 Subject: [PATCH 4/6] Clarify settings description --- main.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/main.ts b/main.ts index 5c3c407..9345680 100644 --- a/main.ts +++ b/main.ts @@ -467,8 +467,8 @@ class SupernoteSettingTab extends PluginSettingTab { this.plugin.settings.collapseRecognizedText = value; new Setting(containerEl) - .setName('Note width in .note files') - .setDesc('Width of the note image when viewing .note files, in pixels. Does not affect exported images and markdown.') + .setName('Max image width in .note files') + .setDesc('Maximum width of the note image when viewing .note files, in pixels. Does not affect exported images and markdown.') .addSlider(text => text .setLimits(100, 1400, 50) // Width of an A5X/A6X2/Nomad page is 1404 px (with no upscaling) .setDynamicTooltip() From abc8f3b0b09f2b66ad657c9ca83c4aee095cd8d7 Mon Sep 17 00:00:00 2001 From: james-xli Date: Sat, 8 Jun 2024 17:49:34 -0700 Subject: [PATCH 5/6] Fix errors introduced during rebase; update supernote-typescript to match current version in main --- main.ts | 4 +++- supernote-typescript | 2 +- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/main.ts b/main.ts index 9345680..066b2a2 100644 --- a/main.ts +++ b/main.ts @@ -16,7 +16,6 @@ const DEFAULT_SETTINGS: SupernotePluginSettings = { showTOC: true, showExportButtons: true, collapseRecognizedText: false, - noteImageMaxWidth: 0, noteImageMaxWidth: 1400, // Default to (nearly) the full width of the image } @@ -465,6 +464,9 @@ class SupernoteSettingTab extends PluginSettingTab { .setValue(this.plugin.settings.collapseRecognizedText) .onChange(async (value) => { this.plugin.settings.collapseRecognizedText = value; + await this.plugin.saveSettings(); + }) + ); new Setting(containerEl) .setName('Max image width in .note files') diff --git a/supernote-typescript b/supernote-typescript index 3adba0e..57f19b7 160000 --- a/supernote-typescript +++ b/supernote-typescript @@ -1 +1 @@ -Subproject commit 3adba0e53de64a413461b3bf8a2403eaa55fbb8c +Subproject commit 57f19b7a2a5722cadf06dbb817ab53111ad4b0e2 From 101ff45702cc9dda4efa8eaed8ab32bc12ee9cb2 Mon Sep 17 00:00:00 2001 From: james-xli Date: Sat, 8 Jun 2024 21:09:10 -0700 Subject: [PATCH 6/6] Add container for each page. Setting now limits both width and height instead of just width. Multiple pages can be visible horizontally. I think this should play nice with horizontal pages, but am unable to test because horizontal pages aren't working quite yet. Also changed the default setting to 800px, which is a nice medium size to be legible but not too big. Max setting now goes to 1900 px (slightly larger than the 1872 px long edge of a Nomad page). --- main.ts | 35 ++++++++++++++++++++--------------- styles.css | 15 +++++++++++++++ 2 files changed, 35 insertions(+), 15 deletions(-) diff --git a/main.ts b/main.ts index 066b2a2..542288f 100644 --- a/main.ts +++ b/main.ts @@ -7,7 +7,7 @@ interface SupernotePluginSettings { showTOC: boolean; showExportButtons: boolean; collapseRecognizedText: boolean, - noteImageMaxWidth: number; + noteImageMaxDim: number; } const DEFAULT_SETTINGS: SupernotePluginSettings = { @@ -16,7 +16,7 @@ const DEFAULT_SETTINGS: SupernotePluginSettings = { showTOC: true, showExportButtons: true, collapseRecognizedText: false, - noteImageMaxWidth: 1400, // Default to (nearly) the full width of the image + noteImageMaxDim: 800, // Sensible default for Nomad pages to be legible but not too big. Unit: px } function generateTimestamp(): string { @@ -165,8 +165,13 @@ export class SupernoteView extends FileView { for (let i = 0; i < images.length; i++) { const imageDataUrl = images[i].toDataURL(); + const pageContainer = container.createEl("div", { + cls: 'page-container', + }) + pageContainer.setAttr('style', 'max-width: ' + this.settings.noteImageMaxDim + 'px;') + if (images.length > 1 && this.settings.showTOC) { - const a = container.createEl("a"); + const a = pageContainer.createEl("a"); a.id = `page${i + 1}`; a.href = "#toc"; a.createEl("h3", { text: `Page ${i + 1}` }); @@ -178,31 +183,31 @@ export class SupernoteView extends FileView { // If Collapse Text setting is enabled, place the text into an HTML `details` element if (this.settings.collapseRecognizedText) { - text = container.createEl('details', { + text = pageContainer.createEl('details', { text: '\n' + sn.pages[i].text, + cls: 'page-recognized-text', }); text.createEl('summary', { text: `Page ${i + 1} Recognized Text` }); } else { - text = container.createEl('div', { + text = pageContainer.createEl('div', { text: sn.pages[i].text, + cls: 'page-recognized-text', }); } - - text.setAttr('style', 'user-select: text; white-space: pre-line; margin-top: 1.2em;'); } // Show the img of the page - const imgElement = container.createEl("img"); + const imgElement = pageContainer.createEl("img"); imgElement.src = imageDataUrl; if (this.settings.invertColorsWhenDark) { imgElement.addClass("supernote-invert-dark"); } - imgElement.setAttr('style', 'width: 100%; max-width: ' + this.settings.noteImageMaxWidth + 'px') // Note width responsive to container width, up to the set max width + imgElement.setAttr('style', 'max-height: ' + this.settings.noteImageMaxDim + 'px;') imgElement.draggable = true; // Create a button to save image to vault if (this.settings.showExportButtons) { - const saveButton = container.createEl("button", { + const saveButton = pageContainer.createEl("button", { text: "Save image to vault", cls: "mod-cta", }); @@ -469,14 +474,14 @@ class SupernoteSettingTab extends PluginSettingTab { ); new Setting(containerEl) - .setName('Max image width in .note files') - .setDesc('Maximum width of the note image when viewing .note files, in pixels. Does not affect exported images and markdown.') + .setName('Max image side length in .note files') + .setDesc('Maximum width and height (in pixels) of the note image when viewing .note files. Does not affect exported images and markdown.') .addSlider(text => text - .setLimits(100, 1400, 50) // Width of an A5X/A6X2/Nomad page is 1404 px (with no upscaling) + .setLimits(200, 1900, 100) // Resolution of an A5X/A6X2/Nomad page is 1404 x 1872 px (with no upscaling) .setDynamicTooltip() - .setValue(this.plugin.settings.noteImageMaxWidth) + .setValue(this.plugin.settings.noteImageMaxDim) .onChange(async (value) => { - this.plugin.settings.noteImageMaxWidth = value; + this.plugin.settings.noteImageMaxDim = value; await this.plugin.saveSettings(); }) ); diff --git a/styles.css b/styles.css index 5b07fc8..e050c0f 100644 --- a/styles.css +++ b/styles.css @@ -12,4 +12,19 @@ .theme-light img.supernote-invert-light { filter: invert(1); +} + +button.mod-cta { + display: block; +} + +.page-recognized-text { + user-select: text; + white-space: pre-line; + margin-top: 1.2em; +} + +div.page-container { + display: inline-block; + vertical-align: top; } \ No newline at end of file