Merge pull request #690 from obgnail/dev

Dev

plugin/custom/plugins/pluginUpdater.js

@@ -61,7 +61,7 @@ class pluginUpdaterPlugin extends BaseCustomPlugin {
             title = "更新失败";
             components = [{ type: "span", label: "发生未知错误，请向开发者反馈" }];
         }
-        setTimeout(() => this.utils.dialog.modal({ title, components, width: "600px" }, callback), 50);
+        this.utils.dialog.modal({ title, components, width: "600px" }, callback);
     }
 
     getProxy = async () => (this.config.proxy || (await new ProxyGetter(this).getProxy()) || "").trim()

plugin/global/core/utils/mixin/dialog.js

@@ -2,7 +2,7 @@ class dialog {
     constructor(utils) {
         this.utils = utils;
         this.entities = null;
-        this.reset();
+        this.set();
     }
 
     html = () => `
@@ -16,10 +16,10 @@ class dialog {
         </dialog>
     `
 
-    reset = () => {
-        this.modalOption = null;
-        this.submitCallback = null;
-        this.cancelCallback = null;
+    set = (modal, submit, cancel) => {
+        this.modalOption = modal;
+        this.submitCallback = submit;
+        this.cancelCallback = cancel;
     }
 
     process = async () => {
@@ -36,20 +36,21 @@ class dialog {
         this.entities.submit.addEventListener("click", () => this.onButtonClick(this.submitCallback))
     }
 
-    onButtonClick = async cb => {
+    onButtonClick = async callback => {
+        const { components } = this.modalOption || {};  // 先取出来，接下来this.modalOption会被置为空
         this.entities.body.querySelectorAll(".form-group[component-id]").forEach(el => {
             const id = el.getAttribute("component-id");
-            const c = this.modalOption.components.find(c => c.id === id);
-            if (c) {
-                c.submit = this.getWidgetValue(c.type, el);
+            const component = components.find(c => c.id === id);
+            if (component) {
+                component.submit = this.getWidgetValue(component.type, el);
             }
         })
+        this.set();
         this.entities.modal.close();
-        if (cb) {
-            await cb(this.modalOption.components);
-        }
-        this.reset();
         this.entities.body.innerHTML = "";
+        if (callback) {
+            await callback(components);
+        }
     }
 
     checkComponents = components => {
@@ -59,7 +60,7 @@ class dialog {
         }
     }
 
-    attachEvent = modal => {
+    attachEvent = (modal, onload) => {
         if (!modal || !modal.components) return;
         modal.components.forEach(component => {
             Object.entries(component).forEach(([event, func]) => {
@@ -68,6 +69,7 @@ class dialog {
                 widget[event] = func;
             })
         })
+        onload && onload(this.entities.modal);
     }
 
     getWidgetValue = (type, widget) => {
@@ -90,8 +92,8 @@ class dialog {
         }
     }
 
-    newWidget = component => {
-        if (!component) return;
+    newSingleWidget = component => {
+        if (!component) return "";
 
         let label = "label";
         let inner = "";
@@ -143,28 +145,53 @@ class dialog {
         return `<div class="form-group" component-id="${component.id}">${label_}${inner}</div>`;
     }
 
+    newGroupWidget = components => {
+        const fieldset = components[0].fieldset;
+        const group = components.map(this.newSingleWidget);
+        return `<fieldset><legend>${fieldset}</legend>${group.join("")}</fieldset>`
+    }
+
+    newWidget = components => {
+        const nested = [];
+        const fieldsetMap = {};
+        components.forEach(c => {
+            if (!c.fieldset) {
+                nested.push(c);
+                return;
+            }
+            if (fieldsetMap[c.fieldset]) {
+                fieldsetMap[c.fieldset].push(c);
+                return;
+            }
+            fieldsetMap[c.fieldset] = [c];
+            nested.push(fieldsetMap[c.fieldset]);
+        })
+        return nested.map(ele => Array.isArray(ele) ? this.newGroupWidget(ele) : this.newSingleWidget(ele))
+    }
+
+    setComponentsId = components => components.forEach(component => component.id = this.utils.randomString());
+
+    assemblyForm = (title, components, width, height) => {
+        this.entities.title.innerText = title;
+        this.entities.modal.style.setProperty("--plugin-custom-modal-width", width);
+        this.entities.body.style.setProperty("--plugin-custom-modal-body-height", height);
+        this.entities.body.innerHTML = `<form role="form">${this.newWidget(components).join("")}</form>`;
+    }
+
     /**
-     * @param {{title, width, height, onload, components: [{label, type, value, ...}]}} modal: 组件配置
+     * @param {{title, width, height, onload, components: [{label, type, value, fieldset, ...arg}]}} modal: 组件配置
      * @param {null | function(components): null} submitCallback: 当用户点击【确认】后的回调函数
      * @param {null | function(components): null} cancelCallback: 当用户点击【取消】后的回调函数
      */
     modal = (modal, submitCallback, cancelCallback) => {
         if (!modal) return;
-
-        this.modalOption = modal;
-        this.submitCallback = submitCallback;
-        this.cancelCallback = cancelCallback;
-
+        this.set(modal, submitCallback, cancelCallback);
         const { title, width = "", height = "", components, onload } = modal;
         this.checkComponents(components);
-        this.entities.title.innerText = title;
-        this.entities.modal.style.setProperty("--plugin-custom-modal-width", width);
-        this.entities.body.style.setProperty("--plugin-custom-modal-body-height", height);
-        components.forEach(component => component.id = this.utils.randomString());
-        this.entities.body.innerHTML = `<form role="form">${components.map(this.newWidget).join("")}</form>`;
-        this.attachEvent(modal);
+        this.setComponentsId(components);
+        this.assemblyForm(title, components, width, height);
+        this.attachEvent(modal, onload);
         this.entities.modal.showModal();
-        onload && onload(this.entities.modal);
     }
 }
 

plugin/global/settings/custom_plugin.default.toml

@@ -783,11 +783,11 @@ order = 1
 hotkey = ""
 # 是否转义标题内容
 escape_header = true
-# 右键侧边栏的【大纲】按钮触发
+# 右键点击侧边栏的【大纲】按钮触发
 right_click_outline_button_to_toggle = true
 # 当pin到页面右侧时，占据页面的20%宽度
 width_percent_when_pin_right = 20
-# 每次打开 Typora 时，默认弹出右侧菜单栏
+# 每次打开Typora时，默认弹出右侧菜单栏
 default_show_toc = false
 
 
@@ -813,16 +813,16 @@ modal_width_percent = 90
 modal_height_percent = 70
 # 本插件是通过后缀名来判断是否是资源的
 # 什么后缀判定为资源
-resource_suffix = [".jpg", ".jpeg", ".png", ".gif", ".svg", ".webp", ".webm", ".bmp", ".mp3", ".mp4", ".ogg", ".image", ".jfif", ".gif!large"]
+resource_suffix = [".jpg", ".jpeg", ".png", ".gif", ".svg", ".tiff", ".ico", ".webp", ".webm", ".bmp", ".mp3", ".mp4", ".ogg", ".image", ".jfif", ".gif!large", ".gif!small"]
+# 对于无后缀名的文件视为资源
+collect_file_without_suffix = true
 # 忽略的目录
 ignore_folders = [".git", "node_modules"]
-# 对于无后缀名的文件是否加入资源列表
-collect_file_without_suffix = true
 # 是否忽略html标签<img src="example.jpg">里的资源（markdown是支持插入html的，此选项问是否要忽略img标签）
 ignore_img_html_element = false
 # 什么后缀判定为md文件
 markdown_suffix = [".md", ".markdown", ".mdown", ".mmd", ".rmarkdown", ".mkd", ".mdwn", ".mdtxt", ".rmd", ".mdtext"]
-# 自动打开报告文件
+# 下载报告时，自动打开报告文件
 auto_open = true
 
 

plugin/global/settings/settings.default.toml

@@ -17,9 +17,9 @@ PERFORMANCE_MODE = true
 # 低于0.9.98版本的Typora运行此插件系统时，提出不兼容警告
 SHOW_INCOMPATIBLE_WARNING = true
 # 如何退出交互状态的代码块
+# 如果你使用了图表插件（kanban、markmap、echarts等等）并且开启交互模式（INTERACTIVE_MODE置为true），那么列表至少填入一个，否则你将无法退出交互模式
 # - click_exit_button:  为图表添加一个【编辑】按钮，当点击【编辑】按钮时退出交互模式
 # - ctrl_click_fence:   ctrl+click图表退出交互模式
-# 如果你使用了图表插件（kanban、markmap、echarts等等）并且开启交互模式（INTERACTIVE_MODE置为true），那么列表至少填入一个，否则你将无法退出交互模式
 EXIT_INTERACTIVE_MODE = ["click_exit_button"]
 
 
@@ -253,7 +253,7 @@ COMMIT_EXEC_SHOW = "echo"
 #   3. $m: 当前挂载目录（侧边栏的根目录）
 BUILTIN = [
     { name = "", shell = "cmd/bash", cmd = "" }, # dummy
-    { name = "Explorer", shell = "powershell", hotkey = "ctrl+alt+e", cmd = "explorer $d" },
+    { name = "Explorer", shell = "powershell", cmd = "explorer $d" },
     { name = "Vscode", shell = "cmd/bash", cmd = "code $f" },
     { name = "WT", shell = "cmd/bash", cmd = "cd $d && wt" },
     { name = "GitCommit", shell = "cmd/bash", cmd = 'cd $m && git add . && git commit -m "update"' },

plugin/global/styles/markmap.css

@@ -80,6 +80,7 @@ ${show_outline}
 }
 
 .plugin-markmap-icon[action="resize"] svg {
+    fill: currentColor;
     height: 1.1em;
     width: 1.1em;
 }

plugin/global/styles/text_stylize.css

@@ -8,6 +8,7 @@
 }
 
 #plugin-text-stylize .stylize-tool > [action] {
+    fill: currentColor;
     cursor: pointer;
     width: 25px;
     height: 25px;

plugin/markmap/index.js

@@ -383,6 +383,26 @@ class tocMarkmap {
             return { label: label, type: "range", value: value, min: 1, max: 100, step: 1, callback }
         }
 
+        const svgBorderH = () => {
+            const { BORDER_WHEN_DOWNLOAD_SVG: border } = this.config;
+            const callback = width => {
+                const defaultValue = 50;
+                width = parseInt(width);
+                border[0] = isNaN(width) ? defaultValue : width;
+            };
+            return { label: "导出图形的左右边框宽度", type: "range", value: border[0], min: 1, max: 200, step: 1, callback }
+        }
+
+        const svgBorderV = () => {
+            const { BORDER_WHEN_DOWNLOAD_SVG: border } = this.config;
+            const callback = width => {
+                const defaultValue = 50;
+                width = parseInt(width);
+                border[1] = isNaN(width) ? defaultValue : width;
+            };
+            return { label: "导出图形的上下边框宽度", type: "range", value: border[1], min: 1, max: 200, step: 1, callback }
+        }
+
         const downloadFolder = () => {
             const label = "导出文件目录" + _genInfo("为空则使用 temp 目录");
             const value = this.config.FOLDER_WHEN_DOWNLOAD_SVG || this.utils.tempFolder;
@@ -464,8 +484,8 @@ class tocMarkmap {
 
         const components = [
             colorScheme, colorFreezeLevel, expandLevel, fitRatio, spacingHorizontal,
-            spacingVertical, maxWidth, duration, localeHeightRatio, downloadFolder, downloadFileName,
-            ability, further
+            spacingVertical, maxWidth, duration, localeHeightRatio, svgBorderH, svgBorderV,
+            downloadFolder, downloadFileName, ability, further,
         ].map(f => f());
         this.utils.dialog.modal({ title: "设置", components }, async components => {
             components.forEach(c => c.callback(c.submit));