feat: support configuration of label display

YuxinZhaozyx · YuxinZhaozyx · commit cebdba41ceea · 2025-11-12T18:01:42.000+08:00
diff --git a/README.md b/README.md
@@ -63,18 +63,10 @@ Click the menu button in the top-right corner of the image. If the block is reco
 + Method 1: Simply export your diagram as an SVG from any draw.io platform with the "Include a copy of my diagram" option enabled, then drag the resulting SVG file into SiYuan.
 + Method 2: Copy all content from any draw.io platform, type `/drawio` in the editor, and paste the copied content into the pop-up draw.io window.
 
-**Disable draw.io label:**
-
-Add CSS Snippet:
-
-```css
-.protyle-attr .label--embed-drawio {
-  display: none !important;
-}
-```
-
 ## Changelog
 
++ v0.2.2
+    + Optimize: add tag configuration, now you can set the display mode of tags in the configuration
 + v0.2.1
     + Feature: lightbox
 + v0.2.0
diff --git a/README_zh_CN.md b/README_zh_CN.md
@@ -57,16 +57,10 @@
 + 方案1：只需要在任意draw.io平台导出SVG图像时勾选 `包含绘图副本` 选项，再把SVG图像拖入思源笔记中即可，不用担心以后没法再迁移，这个SVG图像也是可以导入到任意draw.io再次编辑的。
 + 方案2：在任意draw.io平台内复制全部内容，在思源笔记中输入 `/drawio` 命令创建新draw.io图像，然后将复制的内容粘贴进弹出的draw.io窗口中即可。
 
-**移除draw.io标签:** 添加下列代码片段：
-
-```css
-.protyle-attr .label--embed-drawio {
-  display: none !important;
-}
-```
-
 ## 更新日志
 
++ v0.2.2
+    + 优化：增加标签的配置，现在可以在配置里设置标签的显示模式
 + v0.2.1
     + 新增功能：灯箱
 + v0.2.0
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "siyuan-embed-drawio",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "type": "module",
   "description": "This is a plugin for siyuan",
   "author": "",
diff --git a/plugin.json b/plugin.json
@@ -2,7 +2,7 @@
   "name": "siyuan-embed-drawio",
   "author": "Yuxin Zhao",
   "url": "https://github.com/YuxinZhaozyx/siyuan-embed-drawio",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "minAppVersion": "3.3.0",
   "disabledInPublish": true,
   "backends": [
diff --git a/src/i18n/en_US.json b/src/i18n/en_US.json
@@ -1,4 +1,9 @@
 {
   "editDrawio": "Edit draw.io",
-  "drawioLightbox": "draw.io Lightbox"
+  "drawioLightbox": "draw.io Lightbox",
+  "labelDisplay": "Label Display",
+  "labelDisplayDescription": "Label display in image block top right corner (Changes require refresh of document)",
+  "noLabel": "No Label",
+  "showLabelAlways": "Show Label Always",
+  "showLabelOnHover": "Show Label On Hover"
 }
diff --git a/src/i18n/zh_CN.json b/src/i18n/zh_CN.json
@@ -1,4 +1,9 @@
 {
   "editDrawio": "编辑 draw.io",
-  "drawioLightbox": "draw.io 灯箱"
+  "drawioLightbox": "draw.io 灯箱",
+  "labelDisplay": "标签显示",
+  "labelDisplayDescription": "图像块右上角的标签显示（修改后需刷新文档生效）",
+  "noLabel": "不显示标签",
+  "showLabelAlways": "始终显示标签",
+  "showLabelOnHover": "悬停时显示标签"
 }
diff --git a/src/index.scss b/src/index.scss
@@ -38,4 +38,8 @@
 
 html[data-theme-mode="dark"] img[data-src^="assets/drawio-"][data-src$=".svg"] {
     filter: invert(0.8) brightness(1.2);
+}
+
+div[data-type='NodeParagraph']:not(:hover) .protyle-attr .label--embed-drawio:not(.label--embed-drawio--always) {
+  display: none !important;
 }
diff --git a/src/index.ts b/src/index.ts
@@ -7,7 +7,7 @@ import {
 } from "siyuan";
 import "@/index.scss";
 import PluginInfoString from '@/../plugin.json';
-import { unescapeHTML, escapeHTML, base64ToUnicode } from "./utils";
+import { base64ToUnicode, HTMLToElement } from "./utils";
 import defaultImageContent from "@/../default.svg?raw";
 
 let PluginInfo = {
@@ -22,6 +22,8 @@ const {
   version,
 } = PluginInfo
 
+const STORAGE_NAME = "config.json";
+
 export default class DrawioPlugin extends Plugin {
   // Run as mobile
   public isMobile: boolean
@@ -40,14 +42,19 @@ export default class DrawioPlugin extends Plugin {
   private _openMenuImageHandler;
   private _globalKeyDownHandler;
 
+  private settingItems: SettingItem[];
+
   async onload() {
     this.initMetaInfo();
+    this.initSetting();
 
     this._mutationObserver = this.setAddImageBlockMuatationObserver(document.body, (blockElement: HTMLElement) => {
+      if (this.data[STORAGE_NAME].labelDisplay === "noLabel") return;
+
       const imageElement = blockElement.querySelector("img") as HTMLImageElement;
       if (imageElement) {
         const imageURL = imageElement.getAttribute("data-src");
-        this.getDrawioImageInfo(imageURL).then((imageInfo) => {
+        this.getDrawioImageInfo(imageURL, false).then((imageInfo) => {
           this.updateAttrLabel(imageInfo, blockElement);
         });
       }
@@ -77,8 +84,105 @@ export default class DrawioPlugin extends Plugin {
     if (this._globalKeyDownHandler) document.documentElement.removeEventListener("keydown", this._globalKeyDownHandler);
   }
 
-  // openSetting() {
-  // }
+  openSetting() {
+    const dialogHTML = `
+<div class="b3-dialog__content"></div>
+<div class="b3-dialog__action">
+  <button class="b3-button b3-button--cancel" data-type="cancel">${window.siyuan.languages.cancel}</button>
+  <div class="fn__space"></div>
+  <button class="b3-button b3-button--text" data-type="confirm">${window.siyuan.languages.save}</button>
+</div>
+    `;
+
+    const dialog = new Dialog({
+      title: this.displayName,
+      content: dialogHTML,
+      width: this.isMobile ? "92vw" : "768px",
+      height: "80vh",
+      hideCloseIcon: this.isMobile,
+    });
+
+    // 配置的处理拷贝自思源源码
+    const contentElement = dialog.element.querySelector(".b3-dialog__content");
+    this.settingItems.forEach((item) => {
+      let html = "";
+      let actionElement = item.actionElement;
+      if (!item.actionElement && item.createActionElement) {
+        actionElement = item.createActionElement();
+      }
+      const tagName = actionElement?.classList.contains("b3-switch") ? "label" : "div";
+      if (typeof item.direction === "undefined") {
+        item.direction = (!actionElement || "TEXTAREA" === actionElement.tagName) ? "row" : "column";
+      }
+      if (item.direction === "row") {
+        html = `<${tagName} class="b3-label">
+    <div class="fn__block">
+        ${item.title}
+        ${item.description ? `<div class="b3-label__text">${item.description}</div>` : ""}
+        <div class="fn__hr"></div>
+    </div>
+</${tagName}>`;
+      } else {
+        html = `<${tagName} class="fn__flex b3-label config__item">
+    <div class="fn__flex-1">
+        ${item.title}
+        ${item.description ? `<div class="b3-label__text">${item.description}</div>` : ""}
+    </div>
+    <span class="fn__space${actionElement ? "" : " fn__none"}"></span>
+</${tagName}>`;
+      }
+      contentElement.insertAdjacentHTML("beforeend", html);
+      if (actionElement) {
+        if (["INPUT", "TEXTAREA"].includes(actionElement.tagName)) {
+          dialog.bindInput(actionElement as HTMLInputElement, () => {
+            (dialog.element.querySelector(".b3-dialog__action [data-type='confirm']") as HTMLElement).dispatchEvent(new CustomEvent("click"));
+          });
+        }
+        if (item.direction === "row") {
+          contentElement.lastElementChild.lastElementChild.insertAdjacentElement("beforeend", actionElement);
+          actionElement.classList.add("fn__block");
+        } else {
+          actionElement.classList.remove("fn__block");
+          actionElement.classList.add("fn__flex-center", "fn__size200");
+          contentElement.lastElementChild.insertAdjacentElement("beforeend", actionElement);
+        }
+      }
+    });
+
+    (dialog.element.querySelector(".b3-dialog__action [data-type='cancel']") as HTMLElement).addEventListener("click", () => {
+      dialog.destroy();
+    });
+    (dialog.element.querySelector(".b3-dialog__action [data-type='confirm']") as HTMLElement).addEventListener("click", () => {
+      this.data[STORAGE_NAME].labelDisplay = (dialog.element.querySelector("[data-type='labelDisplay']") as HTMLSelectElement).value;
+      this.saveData(STORAGE_NAME, this.data[STORAGE_NAME]);
+      dialog.destroy();
+    });
+  }
+
+  private async initSetting() {
+    await this.loadData(STORAGE_NAME);
+    if (!this.data[STORAGE_NAME]) {
+      this.data[STORAGE_NAME] = {
+        labelDisplay: "showLabelOnHover",
+      };
+    }
+
+    this.settingItems = [
+      {
+        title: "标签显示",
+        direction: "column",
+        description: "图像块右上角的标签显示（修改后需刷新文档生效）",
+        createActionElement: () => {
+          const options = ["noLabel", "showLabelAlways", "showLabelOnHover"];
+          const optionsHTML = options.map(option => {
+            const isSelected = String(option) === String(this.data[STORAGE_NAME].labelDisplay);
+            return `<option value="${option}"${isSelected ? " selected" : ""}>${this.i18n[option]}</option>`;
+          }).join("");
+          return HTMLToElement(`<select class="b3-select fn__flex-center" data-type="labelDisplay">${optionsHTML}</select>`);
+        },
+      },
+    ];
+  }
 
   private initMetaInfo() {
     const frontEnd = getFrontend();
@@ -129,11 +233,11 @@ export default class DrawioPlugin extends Plugin {
     return mutationObserver;
   }
 
-  public async getDrawioImageInfo(imageURL: string): Promise<DrawioImageInfo | null> {
+  public async getDrawioImageInfo(imageURL: string, reload: boolean): Promise<DrawioImageInfo | null> {
     const imageURLRegex = /^assets\/.+\.svg$/;
     if (!imageURLRegex.test(imageURL)) return null;
 
-    const svgContent = await this.getDrawioImage(imageURL);
+    const svgContent = await this.getDrawioImage(imageURL, reload);
     if (!svgContent) return null;
 
     if (!svgContent.includes("mxfile")) return null;
@@ -175,8 +279,8 @@ export default class DrawioPlugin extends Plugin {
     });
   }
 
-  public async getDrawioImage(imageURL: string): Promise<string> {
-    const response = await fetch(imageURL, { cache: 'reload' });
+  public async getDrawioImage(imageURL: string, reload: boolean): Promise<string> {
+    const response = await fetch(imageURL, { cache: reload ? 'reload' : 'default' });
     if (!response.ok) return "";
     const svgContent = await response.text();
     return svgContent;
@@ -198,6 +302,8 @@ export default class DrawioPlugin extends Plugin {
   public updateAttrLabel(imageInfo: DrawioImageInfo, blockElement: HTMLElement) {
     if (!imageInfo) return;
 
+    if (this.data[STORAGE_NAME].labelDisplay === "noLabel") return;
+
     const attrElement = blockElement.querySelector(".protyle-attr") as HTMLDivElement;
     if (attrElement) {
       const pageCount = (imageInfo.data.match(/name=&quot;/g) || []).length;
@@ -208,6 +314,9 @@ export default class DrawioPlugin extends Plugin {
       } else {
         labelElement = document.createElement("div");
         labelElement.classList.add("label--embed-drawio");
+        if (this.data[STORAGE_NAME].labelDisplay === "showLabelAlways") {
+          labelElement.classList.add("label--embed-drawio--always");
+        }
         labelElement.innerHTML = labelHTML;
         attrElement.prepend(labelElement);
       }
@@ -218,7 +327,7 @@ export default class DrawioPlugin extends Plugin {
     const selectedElement = detail.element;
     const imageElement = selectedElement.querySelector("img") as HTMLImageElement;
     const imageURL = imageElement.dataset.src;
-    this.getDrawioImageInfo(imageURL).then((imageInfo: DrawioImageInfo) => {
+    this.getDrawioImageInfo(imageURL, true).then((imageInfo: DrawioImageInfo) => {
       if (imageInfo) {
         window.siyuan.menus.menu.addItem({
           id: "edit-drawio",
@@ -255,7 +364,7 @@ export default class DrawioPlugin extends Plugin {
     <div class="edit-dialog-header resize__move"></div>
     <div class="edit-dialog-container">
         <div class="edit-dialog-editor">
-            <iframe src="/plugins/siyuan-embed-drawio/draw/index.html?proto=json&embed=1${this.isMobile?"&ui=min":""}&lang=${window.siyuan.config.lang.split('_')[0]}"></iframe>
+            <iframe src="/plugins/siyuan-embed-drawio/draw/index.html?proto=json&embed=1${this.isMobile ? "&ui=min" : ""}&lang=${window.siyuan.config.lang.split('_')[0]}"></iframe>
         </div>
         <div class="fn__hr--b"></div>
     </div>
@@ -294,8 +403,8 @@ export default class DrawioPlugin extends Plugin {
 
     const onSave = (message: any) => {
       postMessage({
-        action: 'export', 
-        format:'xmlsvg'
+        action: 'export',
+        format: 'xmlsvg'
       });
     }
 
@@ -310,7 +419,7 @@ export default class DrawioPlugin extends Plugin {
 
         this.updateDrawioImage(imageInfo, () => {
           postMessage({
-            action: 'status', 
+            action: 'status',
             messageKey: 'allChangesSaved',
             modified: false
           });
@@ -332,13 +441,10 @@ export default class DrawioPlugin extends Plugin {
     }
 
     const messageEventHandler = (event) => {
-      if (event.data && event.data.length > 0)
-      {
-        try
-        {
+      if (event.data && event.data.length > 0) {
+        try {
           var message = JSON.parse(event.data);
-          if (message != null)
-          {
+          if (message != null) {
             // console.log(message.event);
             if (message.event == "init") {
               onInit(message);
@@ -354,8 +460,7 @@ export default class DrawioPlugin extends Plugin {
             }
           }
         }
-        catch (err)
-        {
+        catch (err) {
           console.error(err);
         }
       }
@@ -373,7 +478,7 @@ export default class DrawioPlugin extends Plugin {
     <div class="edit-dialog-header resize__move"></div>
     <div class="edit-dialog-container">
         <div class="edit-dialog-editor">
-            <iframe src="/plugins/siyuan-embed-drawio/draw/index.html?proto=json&embed=1${this.isMobile?"&ui=min":""}&lang=${window.siyuan.config.lang.split('_')[0]}&lightbox=1"></iframe>
+            <iframe src="/plugins/siyuan-embed-drawio/draw/index.html?proto=json&embed=1${this.isMobile ? "&ui=min" : ""}&lang=${window.siyuan.config.lang.split('_')[0]}&lightbox=1"></iframe>
         </div>
         <div class="fn__hr--b"></div>
     </div>
@@ -411,21 +516,17 @@ export default class DrawioPlugin extends Plugin {
     }
 
     const messageEventHandler = (event) => {
-      if (event.data && event.data.length > 0)
-      {
-        try
-        {
+      if (event.data && event.data.length > 0) {
+        try {
           var message = JSON.parse(event.data);
-          if (message != null)
-          {
+          if (message != null) {
             // console.log(message.event);
             if (message.event == "init") {
               onInit(message);
             }
           }
         }
-        catch (err)
-        {
+        catch (err) {
           console.error(err);
         }
       }
diff --git a/src/types/index.d.ts b/src/types/index.d.ts
@@ -152,3 +152,11 @@ interface DrawioImageInfo {
   imageURL: string;
   data: string;
 }
+
+interface SettingItem {
+    title?: string;
+    description?: string;
+    direction?: "row" | "column";
+    actionElement?: HTMLElement;
+    createActionElement?: () => HTMLElement;
+}
diff --git a/src/utils/index.ts b/src/utils/index.ts

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "siyuan-embed-drawio",`
`3`		`- "version": "0.2.1",`
	`3`	`+ "version": "0.2.2",`
`4`	`4`	`"type": "module",`
`5`	`5`	`"description": "This is a plugin for siyuan",`
`6`	`6`	`"author": "",`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,9 @@`
`1`	`1`	`{`
`2`	`2`	`"editDrawio": "Edit draw.io",`
`3`		`- "drawioLightbox": "draw.io Lightbox"`
	`3`	`+ "drawioLightbox": "draw.io Lightbox",`
	`4`	`+ "labelDisplay": "Label Display",`
	`5`	`+ "labelDisplayDescription": "Label display in image block top right corner (Changes require refresh of document)",`
	`6`	`+ "noLabel": "No Label",`
	`7`	`+ "showLabelAlways": "Show Label Always",`
	`8`	`+ "showLabelOnHover": "Show Label On Hover"`
`4`	`9`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,9 @@`
`1`	`1`	`{`
`2`	`2`	`"editDrawio": "编辑 draw.io",`
`3`		`- "drawioLightbox": "draw.io 灯箱"`
	`3`	`+ "drawioLightbox": "draw.io 灯箱",`
	`4`	`+ "labelDisplay": "标签显示",`
	`5`	`+ "labelDisplayDescription": "图像块右上角的标签显示（修改后需刷新文档生效）",`
	`6`	`+ "noLabel": "不显示标签",`
	`7`	`+ "showLabelAlways": "始终显示标签",`
	`8`	`+ "showLabelOnHover": "悬停时显示标签"`
`4`	`9`	`}`
Original file line number	Diff line number	Diff line change
`@@ -38,4 +38,8 @@`
`38`	`38`
`39`	`39`	`html[data-theme-mode="dark"] img[data-src^="assets/drawio-"][data-src$=".svg"] {`
`40`	`40`	`filter: invert(0.8) brightness(1.2);`
	`41`	`+}`
	`42`	`+`
	`43`	`+div[data-type='NodeParagraph']:not(:hover) .protyle-attr .label--embed-drawio:not(.label--embed-drawio--always) {`
	`44`	`+ display: none !important;`
`41`	`45`	`}`