Merge pull request #880 from obgnail/dev

Dev
obgnail · Nov 30, 2024 · 34ba7a5 · 34ba7a5
2 parents 2d73d91 + a24dda7
commit 34ba7a5
Show file tree

Hide file tree

Showing 19 changed files with 419 additions and 455 deletions.
diff --git a/README.md b/README.md
@@ -867,8 +867,6 @@ Typora 自带 ripgrep。此插件支持使用内建的 ripgrep 进行文件搜
 
 功能：以声明的形式，为【任意插件系统函数】或【任意自定义函数】绑定快捷键。
 
-具体使用请参考 [hotkey.default.toml](https://github.com/obgnail/typora_plugin/blob/master/plugin/global/settings/hotkey.default.toml)。
-
 
 
 ### quickButton：于右下角添加功能按钮（高级）
@@ -912,7 +910,7 @@ Typora 自带 ripgrep。此插件支持使用内建的 ripgrep 进行文件搜
 
 ## 致谢
 
-- Apache：[ECharts](https://echarts.apache.org/zh/index.html)
+- Apache：[ECharts](https://echarts.apache.org/zh/index.html) | [draw.io](https://github.com/jgraph/drawio)
 - MIT：[markmap](https://markmap.js.org/) | [Chart.js](https://www.chartjs.org/) | [abcjs](https://github.com/paulrosen/abcjs) | [tui.calendar](https://github.com/nhn/tui.calendar) | [Marp](https://marp.app/) | [WaveDrom](https://wavedrom.com/) | [DataTables](https://github.com/DataTables/DataTables) | [markdownlint](https://github.com/DavidAnson/markdownlint)
 - no-licence：[typora-tabbar-plugin](https://github.com/gatziourasd/typora-tabbar-plugin) | [typora-side-by-side](https://github.com/gruvw/typora-side-by-side) | [md-padding](https://github.com/harttle/md-padding)
 

diff --git a/plugin/custom/plugins/abc/index.js b/plugin/custom/plugins/abc/index.js
@@ -1,20 +1,21 @@
 class abcPlugin extends BaseCustomPlugin {
-    init = () => this.ABCJS = null;
+    init = () => this.ABCJS = null
 
-    callback = anchorNode => this.utils.insertText(anchorNode, this.config.TEMPLATE);
+    callback = anchorNode => this.utils.insertText(anchorNode, this.config.TEMPLATE)
 
     process = () => {
-        this.utils.thirdPartyDiagramParser.register({
+        const parser = this.utils.thirdPartyDiagramParser
+        parser.register({
             lang: this.config.LANGUAGE,
             mappingLang: this.config.LANGUAGE,
             destroyWhenUpdate: false,
             interactiveMode: this.config.INTERACTIVE_MODE,
             checkSelector: ".plugin-notation-content",
             wrapElement: '<div class="plugin-notation-content"></div>',
-            css: {
+            setStyleFunc: parser.STYLE_SETTER_SIMPLE({
                 height: this.config.DEFAULT_FENCE_HEIGHT,
                 "background-color": this.config.DEFAULT_FENCE_BACKGROUND_COLOR
-            },
+            }),
             lazyLoadFunc: this.lazyLoad,
             createFunc: this.create,
             updateFunc: null,
@@ -26,15 +27,15 @@ class abcPlugin extends BaseCustomPlugin {
     }
 
     create = ($wrap, content) => {
-        const visualOptions = Object.assign({}, this.config.VISUAL_OPTIONS); // set prototype
-        this.ABCJS.renderAbc($wrap[0], content, visualOptions);
+        const options = { ...this.config.VISUAL_OPTIONS }  // set prototype
+        this.ABCJS.renderAbc($wrap[0], content, options)
     }
 
     versionGetter = () => this.ABCJS && this.ABCJS.signature
 
-    lazyLoad = () => this.ABCJS = require("./abcjs-basic-min");
+    lazyLoad = () => this.ABCJS = require("./abcjs-basic-min.js")
 }
 
 module.exports = {
     plugin: abcPlugin
-};
+}
diff --git a/plugin/custom/plugins/calendar/index.js b/plugin/custom/plugins/calendar/index.js
@@ -1,20 +1,21 @@
 class calendarPlugin extends BaseCustomPlugin {
-    init = () => this.Calendar = null;
+    init = () => this.Calendar = null
 
     callback = anchorNode => this.utils.insertText(anchorNode, this.config.TEMPLATE)
 
     process = () => {
-        this.utils.thirdPartyDiagramParser.register({
+        const parser = this.utils.thirdPartyDiagramParser
+        parser.register({
             lang: this.config.LANGUAGE,
             mappingLang: "javascript",
             destroyWhenUpdate: false,
             interactiveMode: this.config.INTERACTIVE_MODE,
             checkSelector: ".plugin-calender-content",
             wrapElement: '<div class="plugin-calender-content"></div>',
-            css: {
+            setStyleFunc: parser.STYLE_SETTER({
                 height: this.config.DEFAULT_FENCE_HEIGHT,
                 "background-color": this.config.DEFAULT_FENCE_BACKGROUND_COLOR
-            },
+            }),
             lazyLoadFunc: this.lazyLoad,
             createFunc: this.create,
             updateFunc: null,
@@ -26,28 +27,28 @@ class calendarPlugin extends BaseCustomPlugin {
     }
 
     create = ($wrap, content) => {
-        const Calendar = this.Calendar;
-        const calendar = new this.Calendar($wrap[0]);
-        let option = {};
-        eval(content);
-        calendar.setOptions(option);
-        return calendar;
+        const Calendar = this.Calendar
+        const calendar = new this.Calendar($wrap[0])
+        let option = {}
+        eval(content)
+        calendar.setOptions(option)
+        return calendar
     }
 
     destroy = instance => {
-        instance.clear();
-        instance.destroy();
+        instance.clear()
+        instance.destroy()
     }
 
     versionGetter = () => "2.1.3"
 
     lazyLoad = () => {
-        this.utils.insertStyleFile("plugin-calendar-style", "./plugin/custom/plugins/calendar/toastui-calendar.min.css");
-        const { Calendar } = require("./toastui-calendar.min.js");
-        this.Calendar = Calendar;
+        this.utils.insertStyleFile("plugin-calendar-style", "./plugin/custom/plugins/calendar/toastui-calendar.min.css")
+        const { Calendar } = require("./toastui-calendar.min.js")
+        this.Calendar = Calendar
     }
 }
 
 module.exports = {
     plugin: calendarPlugin
-};
+}
diff --git a/plugin/custom/plugins/chart/index.js b/plugin/custom/plugins/chart/index.js
@@ -1,20 +1,21 @@
 class chartPlugin extends BaseCustomPlugin {
-    init = () => this.ChartPkg = null;
+    init = () => this.ChartPkg = null
 
     callback = anchorNode => this.utils.insertText(anchorNode, this.config.TEMPLATE)
 
     process = () => {
-        this.utils.thirdPartyDiagramParser.register({
+        const parser = this.utils.thirdPartyDiagramParser
+        parser.register({
             lang: this.config.LANGUAGE,
             mappingLang: "javascript",
             destroyWhenUpdate: false,
             interactiveMode: this.config.INTERACTIVE_MODE,
             checkSelector: ".plugin-chart-content",
             wrapElement: '<div class="plugin-chart-content"><canvas></canvas></div>',
-            css: {
+            setStyleFunc: parser.STYLE_SETTER({
                 height: this.config.DEFAULT_FENCE_HEIGHT,
                 "background-color": this.config.DEFAULT_FENCE_BACKGROUND_COLOR
-            },
+            }),
             lazyLoadFunc: this.lazyLoad,
             createFunc: this.create,
             updateFunc: null,
@@ -26,36 +27,36 @@ class chartPlugin extends BaseCustomPlugin {
     }
 
     create = ($wrap, content) => {
-        const $canvas = $wrap.find('canvas');
+        const $canvas = $wrap.find("canvas")
         if ($canvas.length) {
-            const ctx = $canvas[0].getContext('2d');
-            return this.drawChart(ctx, content);
+            const ctx = $canvas[0].getContext("2d")
+            return this.drawChart(ctx, content)
         }
     }
 
     destroy = instance => {
-        instance.clear();
-        instance.destroy();
+        instance.clear()
+        instance.destroy()
     }
 
     drawChart = (ctx, content) => {
-        let config = {};
-        const Chart = this.ChartPkg.Chart;
-        eval(content);
-        return new Chart(ctx, config);
+        let config = {}
+        const Chart = this.ChartPkg.Chart
+        eval(content)
+        return new Chart(ctx, config)
     }
 
     beforeExport = (preview, instance) => {
-        const img = new Image();
-        img.src = instance.toBase64Image();
-        $(preview).html(img);
+        const img = new Image()
+        img.src = instance.toBase64Image()
+        $(preview).html(img)
     }
 
     versionGetter = () => this.ChartPkg && this.ChartPkg.version
 
-    lazyLoad = () => this.ChartPkg = require("./chart.min.js");
+    lazyLoad = () => this.ChartPkg = require("./chart.min.js")
 }
 
 module.exports = {
     plugin: chartPlugin
-};
+}
diff --git a/plugin/custom/plugins/drawIO/index.js b/plugin/custom/plugins/drawIO/index.js
@@ -1,23 +1,21 @@
 class drawIOPlugin extends BaseCustomPlugin {
-    init = () => {
-        this.hasLoaded = null
-        this.defaultConfig = this._getDefaultConfig()
-    }
+    init = () => this.defaultConfig = this._getDefaultConfig()
 
     callback = anchorNode => this.utils.insertText(anchorNode, this.config.TEMPLATE)
 
     process = () => {
-        this.utils.thirdPartyDiagramParser.register({
+        const parser = this.utils.thirdPartyDiagramParser
+        parser.register({
             lang: this.config.LANGUAGE,
             mappingLang: "javascript",
             destroyWhenUpdate: false,
             interactiveMode: this.config.INTERACTIVE_MODE,
             checkSelector: ".plugin-drawio-content",
             wrapElement: '<div class="plugin-drawio-content"></div>',
-            css: {
+            setStyleFunc: parser.STYLE_SETTER({
                 height: this.config.DEFAULT_FENCE_HEIGHT,
                 "background-color": this.config.DEFAULT_FENCE_BACKGROUND_COLOR,
-            },
+            }),
             lazyLoadFunc: this.lazyLoad,
             createFunc: this.create,
             updateFunc: null,
@@ -55,7 +53,7 @@ class drawIOPlugin extends BaseCustomPlugin {
             }
         } catch (e) {
             const from = isNetwork ? "网络" : "本地"
-            throw new Error(`读取${from}文件失败: ${source}\n\n${e}`)
+            throw new Error(`从${from}读取.drawio源文件失败: ${source}\n\n${e}`)
         }
     }
 
@@ -69,8 +67,8 @@ class drawIOPlugin extends BaseCustomPlugin {
     _refresh = this.utils.debounce(() => window.GraphViewer.processElements(), 100)
 
     _memorizedFetch = this.utils.memorize(async url => {
-        console.log(`memorized fetch url: ${url}`)
-        const resp = await this.utils.fetch(url, { timeout: 60 * 1000 })
+        console.debug(`memorized fetch url: ${url}`)
+        const resp = await this.utils.fetch(url, { timeout: 30 * 1000 })
         return resp.text()
     })
 
@@ -95,14 +93,10 @@ class drawIOPlugin extends BaseCustomPlugin {
     }
 
     lazyLoad = async () => {
-        if (!this.hasLoaded) {
-            const from = this.config.RESOURCE_URI
-            const path = this.utils.isNetworkImage(from) ? from : `file:///${this.utils.Package.Path.resolve(from)}`
-            await $.getScript(path)
-            this.hasLoaded = true
-
-            window.GraphViewer.prototype.toolbarZIndex = 7
-        }
+        const from = this.config.RESOURCE_URI
+        const path = this.utils.isNetworkImage(from) ? from : `file:///${this.utils.Package.Path.resolve(from)}`
+        await $.getScript(path)
+        window.GraphViewer.prototype.toolbarZIndex = 7
     }
 
     versionGetter = () => "24.8.9"

diff --git a/plugin/custom/plugins/echarts/index.js b/plugin/custom/plugins/echarts/index.js
@@ -1,23 +1,24 @@
 class echartsPlugin extends BaseCustomPlugin {
     init = () => {
-        this.echartsPkg = null;
-        this.exportType = this.config.EXPORT_TYPE.toLowerCase();
+        this.echartsPkg = null
+        this.exportType = this.config.EXPORT_TYPE.toLowerCase()
     }
 
     callback = anchorNode => this.utils.insertText(anchorNode, this.config.TEMPLATE)
 
     process = () => {
-        this.utils.thirdPartyDiagramParser.register({
+        const parser = this.utils.thirdPartyDiagramParser
+        parser.register({
             lang: this.config.LANGUAGE,
             mappingLang: "javascript",
             destroyWhenUpdate: false,
             interactiveMode: this.config.INTERACTIVE_MODE,
             checkSelector: ".plugin-echarts-content",
             wrapElement: '<div class="plugin-echarts-content"></div>',
-            css: {
+            setStyleFunc: parser.STYLE_SETTER({
                 height: this.config.DEFAULT_FENCE_HEIGHT,
                 "background-color": this.config.DEFAULT_FENCE_BACKGROUND_COLOR
-            },
+            }),
             lazyLoadFunc: this.lazyLoad,
             createFunc: this.create,
             updateFunc: null,
@@ -29,46 +30,46 @@ class echartsPlugin extends BaseCustomPlugin {
     }
 
     create = ($wrap, content) => {
-        const myChart = this.echartsPkg.init($wrap[0], null, { renderer: this.config.RENDERER });
-        this.drawChart(myChart, content);
-        return myChart;
+        const myChart = this.echartsPkg.init($wrap[0], null, { renderer: this.config.RENDERER })
+        this.drawChart(myChart, content)
+        return myChart
     }
 
     drawChart = (myChart, content, resize = false) => {
-        // chart.showLoading();
-        let echarts = this.echartsPkg;
-        let option = {};
-        eval(content);
-        myChart.clear();
-        myChart.setOption(option);
+        // chart.showLoading()
+        let echarts = this.echartsPkg
+        let option = {}
+        eval(content)
+        myChart.clear()
+        myChart.setOption(option)
         if (resize) {
-            myChart.resize();
+            myChart.resize()
         }
-        // chart.hideLoading();
+        // chart.hideLoading()
     }
 
     destroy = instance => {
-        instance.clear();
-        instance.dispose();
+        instance.clear()
+        instance.dispose()
     }
 
     beforeExport = (preview, instance) => {
-        instance.setOption({ animation: false });
+        instance.setOption({ animation: false })
         if (this.exportType === "png" || this.exportType === "jpg") {
-            const img = new Image();
-            img.src = instance.getDataURL({ type: this.exportType });
-            $(preview).html(img);
+            const img = new Image()
+            img.src = instance.getDataURL({ type: this.exportType })
+            $(preview).html(img)
         } else if (this.exportType === "svg") {
-            const svg = instance.renderToSVGString();
-            $(preview).html(svg);
+            const svg = instance.renderToSVGString()
+            $(preview).html(svg)
         }
     }
 
     versionGetter = () => this.echartsPkg && this.echartsPkg.version
 
-    lazyLoad = () => this.echartsPkg = require("./echarts.min");
+    lazyLoad = () => this.echartsPkg = require("./echarts.min.js")
 }
 
 module.exports = {
     plugin: echartsPlugin
-};
+}