feat(webview): 添加图片菜单 | Add image menu.

Zuoqiu-Yingyi · Oct 20, 2023 · bdf7ee6 · bdf7ee6
1 parent c0bb54f
commit bdf7ee6
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 11 deletions.
diff --git a/src/assets/symbols/icon-webview-browser.symbol b/src/assets/symbols/icon-webview-browser.symbol
@@ -0,0 +1,6 @@
+<symbol id="icon-webview-browser"
+    fill="currentColor"
+    stroke-width="0"
+    viewBox="0 0 256 256">
+    <path d="M220,32H76A20,20,0,0,0,56,52V72H36A20,20,0,0,0,16,92V204a20,20,0,0,0,20,20H180a20,20,0,0,0,20-20V184h20a20,20,0,0,0,20-20V52A20,20,0,0,0,220,32ZM176,96v16H40V96Zm0,104H40V136H176Zm40-40H200V92a20,20,0,0,0-20-20H80V56H216Z"></path>
+</symbol>
diff --git a/src/assets/symbols/icon-webview-chromium.symbol b/src/assets/symbols/icon-webview-chromium.symbol
@@ -0,0 +1,7 @@
+<symbol id="icon-webview-chromium"
+    stroke="currentColor"
+    fill="currentColor"
+    stroke-width="0"
+    viewBox="0 0 16 16">
+    <path d="M4.036 6.977l-2.29-3.966c1.466-1.835 3.722-3.012 6.254-3.012 2.929 0 5.489 1.574 6.883 3.922h-6.528c-0.117-0.010-0.236-0.016-0.356-0.016-1.904 0-3.509 1.307-3.964 3.071zM10.864 5.078h4.585c0.355 0.905 0.551 1.891 0.551 2.922 0 4.388-3.533 7.95-7.909 7.999l3.272-5.667c0.461-0.662 0.731-1.466 0.731-2.332 0-1.143-0.471-2.178-1.23-2.922zM5.094 8c0-1.603 1.304-2.906 2.906-2.906s2.906 1.304 2.906 2.906c0 1.602-1.304 2.906-2.906 2.906s-2.906-1.304-2.906-2.906zM9.097 11.944l-2.29 3.967c-3.852-0.576-6.806-3.899-6.806-7.911 0-1.425 0.373-2.763 1.026-3.922l3.266 5.657c0.654 1.392 2.070 2.359 3.707 2.359 0.38 0 0.747-0.052 1.097-0.149z"></path>
+</symbol>
diff --git a/src/index.ts b/src/index.ts
@@ -45,6 +45,7 @@ import type {
     IClickBlockIconEvent,
     IClickEditorTitleIconEvent,
     IOpenMenuBlockRefEvent,
+    IOpenMenuImageEvent,
     IOpenMenuLinkEvent,
 } from "@workspace/types/siyuan/events";
 import type { BlockID } from "@workspace/types/siyuan";
@@ -54,6 +55,8 @@ import { washMenuItems } from "@workspace/utils/siyuan/menu/wash";
 import icon_webview_anchor from "./assets/symbols/icon-webview-anchor.symbol?raw";
 import icon_webview_title from "./assets/symbols/icon-webview-title.symbol?raw";
 import icon_webview_select from "./assets/symbols/icon-webview-select.symbol?raw";
+import icon_webview_chromium from "./assets/symbols/icon-webview-chromium.symbol?raw";
+import icon_webview_browser from "./assets/symbols/icon-webview-browser.symbol?raw";
 
 import Settings from "./components/Settings.svelte";
 import Webview from "./components/Webview.svelte"
@@ -126,6 +129,8 @@ export default class WebviewPlugin extends siyuan.Plugin {
             icon_webview_anchor,
             icon_webview_title,
             icon_webview_select,
+            icon_webview_chromium,
+            icon_webview_browser,
         ].join(""));
 
         /**
@@ -156,7 +161,7 @@ export default class WebviewPlugin extends siyuan.Plugin {
             hotkey: "⌘T", // 默认快捷键
             customHotkey: "", // 自定义快捷键
             callback: () => {
-                this.openWebviewTab("", this.i18n.menu.openNewTab.title);
+                this.openWebviewTab(undefined, this.i18n.menu.openNewTab.title);
             },
         });
 
@@ -181,6 +186,8 @@ export default class WebviewPlugin extends siyuan.Plugin {
                 this.eventBus.on("open-menu-blockref", this.blockRefMenuEventListener);
                 /* 超链接菜单 */
                 this.eventBus.on("open-menu-link", this.linkMenuEventListener);
+                /* 图片菜单 */
+                this.eventBus.on("open-menu-image", this.imageMenuEventListener);
             })
 
     }
@@ -191,7 +198,7 @@ export default class WebviewPlugin extends siyuan.Plugin {
             /* 顶部工具栏菜单 */
             const menu = new siyuan.Menu(this.TOP_BAR_MENU_ID);
             this.tab_bar_item = this.addTopBar({
-                icon: "iconOpenWindow",
+                icon: "icon-webview-chromium",
                 title: this.i18n.displayName,
                 position: "right",
                 callback: (e) => {
@@ -222,6 +229,17 @@ export default class WebviewPlugin extends siyuan.Plugin {
                         },
                     });
 
+                    menu.addSeparator();
+
+                    /* 菜单项 - 打开空白页签窗口 */
+                    menu.addItem({
+                        icon: "iconLayout",
+                        label: this.i18n.menu.openNewTab.label,
+                        click: (_element) => {
+                            this.openWebviewTab(undefined, this.i18n.menu.openNewTab.title);
+                        },
+                    });
+
                     /* 菜单打开选项 */
                     const menu_open_options = {
                         x: 0,
@@ -262,6 +280,7 @@ export default class WebviewPlugin extends siyuan.Plugin {
         this.eventBus.off("click-editortitleicon", this.blockMenuEventListener);
         this.eventBus.off("open-menu-blockref", this.blockRefMenuEventListener);
         this.eventBus.off("open-menu-link", this.linkMenuEventListener);
+        this.eventBus.off("open-menu-image", this.imageMenuEventListener);
     }
 
     openSetting(): void {
@@ -312,20 +331,20 @@ export default class WebviewPlugin extends siyuan.Plugin {
      * @param options: 页签其他选项
      */
     public openWebviewTab(
-        href: string,
+        href: string = "about:blank",
         title?: string,
-        icon: string = "iconLanguage",
+        icon: string = "icon-webview-chromium",
         options: object = {},
     ) {
         siyuan.openTab({
             app: this.app,
             custom: {
                 icon,
-                title: title || this.name,
+                title: title || this.displayName,
                 id: this.WEBVIEW_TAB_ID,
                 data: {
                     href,
-                    title: title || this.name,
+                    title: title || this.displayName,
                 },
             },
             keepCursor: false,
@@ -669,7 +688,7 @@ export default class WebviewPlugin extends siyuan.Plugin {
         const submenu: siyuan.IMenuItemOption[] = [
             {
                 /* 在新页签中打开 */
-                icon: "iconMin",
+                icon: "iconAdd",
                 label: this.i18n.menu.openTab.label,
                 click: () => this.openWebviewTab(
                     href,
@@ -749,7 +768,7 @@ export default class WebviewPlugin extends siyuan.Plugin {
         });
 
         e.detail.menu.addItem({
-            icon: "iconLanguage",
+            icon: "icon-webview-chromium",
             label: this.i18n.displayName,
             submenu: washMenuItems(submenu),
         });
@@ -786,18 +805,34 @@ export default class WebviewPlugin extends siyuan.Plugin {
 
             /* 其他超链接 */
             default: {
-                submenu.push(...this.buildOpenLinkSubmenu(link.href, link.title, "iconLanguage"));
+                submenu.push(...this.buildOpenLinkSubmenu(link.href, link.title, "icon-webview-chromium"));
                 break;
             }
         }
 
         e.detail.menu.addItem({
-            icon: "iconLanguage",
+            icon: "icon-webview-chromium",
             label: this.i18n.displayName,
             submenu: washMenuItems(submenu),
         });
     }
 
+    /* 图片菜单 */
+    protected readonly imageMenuEventListener = (e: IOpenMenuImageEvent) => {
+        // this.logger.debug(e);
+
+        const element = e.detail.element.querySelector("img"); // 图片元素
+        if (element) {
+            const submenu = this.buildOpenLinkSubmenu(element.src, element.title || element.alt, "iconImage");
+
+            e.detail.menu.addItem({
+                icon: "icon-webview-chromium",
+                label: this.i18n.displayName,
+                submenu: washMenuItems(submenu),
+            });
+        }
+    }
+
     /* 块菜单 */
     protected readonly blockMenuEventListener = (e: IClickBlockIconEvent | IClickEditorTitleIconEvent) => {
         // this.logger.debug(e);
@@ -844,7 +879,7 @@ export default class WebviewPlugin extends siyuan.Plugin {
             submenu.push(...this.buildOpenBlockSubmenu(context.id, false));
 
             detail.menu.addItem({
-                icon: "iconLanguage",
+                icon: "icon-webview-chromium",
                 label: this.i18n.displayName,
                 submenu: washMenuItems(submenu),
             });