From 29e38975544437b9e1f828f37d5d36ddab291381 Mon Sep 17 00:00:00 2001 From: Kristoffer la Cour Date: Fri, 7 Jun 2024 11:28:59 +0200 Subject: [PATCH 1/5] Added the option to open images loaded from remote URL in the second window(s) --- src/main.ts | 128 ++++++++++++++++++++++++++++++---------------------- 1 file changed, 75 insertions(+), 53 deletions(-) diff --git a/src/main.ts b/src/main.ts index 27f02c7..eeccca1 100644 --- a/src/main.ts +++ b/src/main.ts @@ -12,6 +12,7 @@ import { Setting, TextComponent, TFile, + View, WorkspaceLeaf, WorkspaceWindow } from "obsidian"; @@ -119,7 +120,7 @@ class NamedWindow extends Component { } } - async loadFile(file: TFile) { + async loadFile(target: TFile | HTMLImageElement) { if (!(this.parent.app.vault.adapter instanceof FileSystemAdapter)) return; if (!this.window) { @@ -164,10 +165,18 @@ class NamedWindow extends Component { ); } - await this.leaf.openFile(file, { state: { mode: "preview" } }); + if (target instanceof TFile) + await this.leaf.openFile(target, { state: { mode: "preview" } }); + else if (target instanceof HTMLImageElement) + await this.leaf.view.contentEl.setChildrenInPlace([target.cloneNode(true)]); this.window.rootEl.querySelector(".status-bar")?.detach(); - this.adjust(this.leaf, /image/.test(getType(file.extension))); + + if (target instanceof TFile) + this.adjust(this.leaf, /image/.test(getType(target.extension))); + else if (target instanceof HTMLImageElement) + this.adjust(this.leaf, true); + if (this.parent.settings.useCustomWindowName) { this.window.win.electronWindow.setTitle( this.name !== DEFAULT_WINDOW_NAME @@ -175,9 +184,10 @@ class NamedWindow extends Component { : this.parent.settings.customWindowName ); } else { - this.window.win.electronWindow.setTitle(file.name); + this.window.win.electronWindow.setTitle(target.name); } } + /** * Save window position and size under a key specific to the host. This way, * sharing the vault with a second computer with a different monitor layout will not overwrite the @@ -370,6 +380,39 @@ export default class ImageWindow extends Plugin { get stylesheets() { return document.head.innerHTML; } + + addMenuItems(menu: Menu, target:TFile | HTMLImageElement) : void + { + menu.addItem((item) => { + item.setTitle("Open in second window") + .setIcon("open-elsewhere-glyph") + .onClick(async () => { + if (target instanceof TFile) + this.defaultWindow.loadFile(target); + else if (target instanceof HTMLImageElement) + this.defaultWindow.loadFile(target); + }); + }); + for (const [name, record] of Object.entries( + this.settings.windows + )) { + if (name === DEFAULT_WINDOW_NAME) continue; + menu.addItem((item) => { + item.setTitle(`Open in second window '${name}'`) + .setIcon("open-elsewhere-glyph") + .onClick(async () => { + const namedWindow = this.windows.get(record.id); + if (namedWindow !== undefined) { + if (target instanceof TFile) + namedWindow.loadFile(target); + else if (target instanceof HTMLImageElement) + namedWindow.loadFile(target); + } + }); + }); + } + } + async onload() { await this.loadSettings(); if ("DEFAULT" in this.settings.windows) { @@ -380,34 +423,39 @@ export default class ImageWindow extends Plugin { } this.addSettingTab(new ImageWindowSettingTab(this, this)); + // Track right clicks for editor context menu + let rightClickTarget:EventTarget = null; + let rightClickOnSameTarget = false; + + this.registerDomEvent(document, "mousedown", (event: MouseEvent) => { + // Check if it's the right button being pushed down + if(event.button !== 2) return; + rightClickTarget = event.target; + }); + + this.registerDomEvent(document, "mouseup", (event: MouseEvent) => { + // Check if it's the right button being lifted + if(event.button !== 2 || event.target != rightClickTarget) return; + rightClickOnSameTarget = true; + }); + this.registerEvent( this.app.workspace.on("file-menu", (menu, file) => { + if (!(this.app.vault.adapter instanceof FileSystemAdapter)) return; if (!(file instanceof TFile)) return; - menu.addItem((item) => { - item.setTitle("Open in second window") - .setIcon("open-elsewhere-glyph") - .onClick(async () => { - this.defaultWindow.loadFile(file); - }); - }); - for (const [name, record] of Object.entries( - this.settings.windows - )) { - if (name === DEFAULT_WINDOW_NAME) continue; - menu.addItem((item) => { - item.setTitle(`Open in second window '${name}'`) - .setIcon("open-elsewhere-glyph") - .onClick(async () => { - const namedWindow = this.windows.get(record.id); - if (namedWindow !== undefined) { - namedWindow.loadFile(file); - } - }); - }); - } + this.addMenuItems(menu, file); + }) + ); + + this.registerEvent( + this.app.workspace.on("editor-menu", (menu, file, info) => { + if (!(this.app.vault.adapter instanceof FileSystemAdapter)) + return; + if (rightClickOnSameTarget && rightClickTarget instanceof HTMLImageElement) + this.addMenuItems(menu, rightClickTarget); }) ); @@ -415,34 +463,8 @@ export default class ImageWindow extends Plugin { const target = event.target as HTMLElement; if (target.localName !== "img") return; - const imgPath = (target as HTMLImageElement).currentSrc; - const file = this.app.vault.resolveFileUrl(imgPath); - - if (!(file instanceof TFile)) return; const menu = new Menu(); - menu.addItem((item) => { - item.setTitle("Open in new window") - .setIcon("open-elsewhere-glyph") - .onClick(async () => { - this.defaultWindow.loadFile(file); - }); - }); - - for (const [name, record] of Object.entries( - this.settings.windows - )) { - if (name === DEFAULT_WINDOW_NAME) continue; - menu.addItem((item) => { - item.setTitle(`Open in window '${name}'`) - .setIcon("open-elsewhere-glyph") - .onClick(async () => { - const namedWindow = this.windows.get(record.id); - if (namedWindow !== undefined) { - namedWindow.loadFile(file); - } - }); - }); - } + this.addMenuItems(menu, target); menu.showAtPosition({ x: event.pageX, y: event.pageY }); }); From e2ef7c331041f2803e997a1220d86ad2958d053b Mon Sep 17 00:00:00 2001 From: Kristoffer la Cour Date: Fri, 7 Jun 2024 11:36:49 +0200 Subject: [PATCH 2/5] fixed small bug --- src/main.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/main.ts b/src/main.ts index eeccca1..6efa430 100644 --- a/src/main.ts +++ b/src/main.ts @@ -464,7 +464,7 @@ export default class ImageWindow extends Plugin { if (target.localName !== "img") return; const menu = new Menu(); - this.addMenuItems(menu, target); + this.addMenuItems(menu, target as HTMLImageElement); menu.showAtPosition({ x: event.pageX, y: event.pageY }); }); From add1795859a4049fed48827f4d313667ecad7ae8 Mon Sep 17 00:00:00 2001 From: Kristoffer la Cour Date: Fri, 7 Jun 2024 11:37:50 +0200 Subject: [PATCH 3/5] formatting --- src/main.ts | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/src/main.ts b/src/main.ts index 6efa430..a782848 100644 --- a/src/main.ts +++ b/src/main.ts @@ -187,7 +187,7 @@ class NamedWindow extends Component { this.window.win.electronWindow.setTitle(target.name); } } - + /** * Save window position and size under a key specific to the host. This way, * sharing the vault with a second computer with a different monitor layout will not overwrite the @@ -381,8 +381,7 @@ export default class ImageWindow extends Plugin { return document.head.innerHTML; } - addMenuItems(menu: Menu, target:TFile | HTMLImageElement) : void - { + addMenuItems(menu: Menu, target: TFile | HTMLImageElement): void { menu.addItem((item) => { item.setTitle("Open in second window") .setIcon("open-elsewhere-glyph") @@ -424,24 +423,24 @@ export default class ImageWindow extends Plugin { this.addSettingTab(new ImageWindowSettingTab(this, this)); // Track right clicks for editor context menu - let rightClickTarget:EventTarget = null; + let rightClickTarget: EventTarget = null; let rightClickOnSameTarget = false; this.registerDomEvent(document, "mousedown", (event: MouseEvent) => { // Check if it's the right button being pushed down - if(event.button !== 2) return; + if (event.button !== 2) return; rightClickTarget = event.target; }); - + this.registerDomEvent(document, "mouseup", (event: MouseEvent) => { // Check if it's the right button being lifted - if(event.button !== 2 || event.target != rightClickTarget) return; + if (event.button !== 2 || event.target != rightClickTarget) return; rightClickOnSameTarget = true; }); this.registerEvent( this.app.workspace.on("file-menu", (menu, file) => { - + if (!(this.app.vault.adapter instanceof FileSystemAdapter)) return; if (!(file instanceof TFile)) return; From 722c207cd3d3d535490aaf757ae58c091dabb2e5 Mon Sep 17 00:00:00 2001 From: Kristoffer la Cour Date: Fri, 7 Jun 2024 11:43:49 +0200 Subject: [PATCH 4/5] removed unused import --- src/main.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/main.ts b/src/main.ts index a782848..2420178 100644 --- a/src/main.ts +++ b/src/main.ts @@ -12,7 +12,6 @@ import { Setting, TextComponent, TFile, - View, WorkspaceLeaf, WorkspaceWindow } from "obsidian"; From 38005b63d1eae774f7f0b204e137251554328288 Mon Sep 17 00:00:00 2001 From: Kristoffer la Cour Date: Fri, 7 Jun 2024 11:49:25 +0200 Subject: [PATCH 5/5] simplifications --- src/main.ts | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/src/main.ts b/src/main.ts index 2420178..a1e1e5c 100644 --- a/src/main.ts +++ b/src/main.ts @@ -167,7 +167,7 @@ class NamedWindow extends Component { if (target instanceof TFile) await this.leaf.openFile(target, { state: { mode: "preview" } }); else if (target instanceof HTMLImageElement) - await this.leaf.view.contentEl.setChildrenInPlace([target.cloneNode(true)]); + this.leaf.view.contentEl.setChildrenInPlace([target.cloneNode(true)]); this.window.rootEl.querySelector(".status-bar")?.detach(); @@ -385,10 +385,7 @@ export default class ImageWindow extends Plugin { item.setTitle("Open in second window") .setIcon("open-elsewhere-glyph") .onClick(async () => { - if (target instanceof TFile) - this.defaultWindow.loadFile(target); - else if (target instanceof HTMLImageElement) - this.defaultWindow.loadFile(target); + this.defaultWindow.loadFile(target); }); }); for (const [name, record] of Object.entries( @@ -401,10 +398,7 @@ export default class ImageWindow extends Plugin { .onClick(async () => { const namedWindow = this.windows.get(record.id); if (namedWindow !== undefined) { - if (target instanceof TFile) - namedWindow.loadFile(target); - else if (target instanceof HTMLImageElement) - namedWindow.loadFile(target); + namedWindow.loadFile(target); } }); });