From e280349e2115b8da3208eadf3fcd3a2f37f2585d Mon Sep 17 00:00:00 2001 From: obgnail Date: Mon, 30 Sep 2024 00:58:30 +0800 Subject: [PATCH 1/8] update multi_highlighter --- plugin/multi_highlighter/index.js | 25 +++---------------------- 1 file changed, 3 insertions(+), 22 deletions(-) diff --git a/plugin/multi_highlighter/index.js b/plugin/multi_highlighter/index.js index ff5fd69d..9115ca98 100644 --- a/plugin/multi_highlighter/index.js +++ b/plugin/multi_highlighter/index.js @@ -69,24 +69,16 @@ class multiHighlighterPlugin extends BasePlugin { this.entities.input.addEventListener("keydown", ev => { if (ev.key === "Enter") { - ev.stopPropagation(); - ev.preventDefault(); this.highlight(); } else if (ev.key === "Escape" || ev.key === "Backspace" && this.config.BACKSPACE_TO_HIDE && !this.entities.input.value) { - ev.stopPropagation(); - ev.preventDefault(); this.clearHighlight(true); this.hide(); } }) - this.entities.caseOption.addEventListener("click", ev => { this.entities.caseOption.classList.toggle("select"); this.config.CASE_SENSITIVE = !this.config.CASE_SENSITIVE; - ev.preventDefault(); - ev.stopPropagation(); }) - this.utils.entities.eContent.addEventListener("mousedown", ev => { if (this.multiHighlighter.length() !== 0 && !ev.target.closest("#plugin-multi-highlighter")) { this.clearHighlight(true); @@ -97,9 +89,6 @@ class multiHighlighterPlugin extends BasePlugin { const target = ev.target.closest(".plugin-multi-highlighter-result-item"); if (!target) return; - ev.stopPropagation(); - ev.preventDefault(); - // 当用户切换文档时 if (this.utils.getFilePath() !== this.lastHighlightFilePath) { this.highlight(); @@ -154,13 +143,8 @@ class multiHighlighterPlugin extends BasePlugin { }) if (this.config.SHOW_RUN_BUTTON) { - this.entities.runButton.addEventListener("click", ev => { - this.highlight(); - ev.preventDefault(); - ev.stopPropagation(); - }) + this.entities.runButton.addEventListener("click", ev => this.highlight()) } - if (this.config.ALLOW_DRAG) { this.utils.dragFixedModal(this.entities.input, this.entities.modal); } @@ -168,13 +152,11 @@ class multiHighlighterPlugin extends BasePlugin { processAddCodeBlock = () => { let hasMarker = false; - const before = cid => { if (this.multiHighlighter.length() !== 0) { hasMarker = !!this.entities.write.querySelector(`.md-fences[cid=${cid}] marker`); } } - const after = cid => { if (!hasMarker || this.multiHighlighter.length() === 0) return; @@ -184,9 +166,9 @@ class multiHighlighterPlugin extends BasePlugin { if (!fence) return; const tokens = this.multiHighlighter.getTokens(); - if (this.config.USE_LIST_THRESHOLD > tokens.length + const shouldRefresh = this.config.USE_LIST_THRESHOLD > tokens.length || this.config.CLEAR_LIST_THRESHOLD > 0 && this.fenceMultiHighlighterList.length === this.config.CLEAR_LIST_THRESHOLD - ) { + if (shouldRefresh) { this.clearFenceMultiHighlighterList(); this.multiHighlighter.removeHighlight(); this.multiHighlighter.highlight(); @@ -205,7 +187,6 @@ class multiHighlighterPlugin extends BasePlugin { } } } - this.utils.eventHub.addEventListener(this.utils.eventHub.eventType.beforeAddCodeBlock, before); this.utils.eventHub.addEventListener(this.utils.eventHub.eventType.afterAddCodeBlock, after, 999); } From 8e99abb6c86b044bfd32bb8c648c10779503cf16 Mon Sep 17 00:00:00 2001 From: obgnail Date: Mon, 30 Sep 2024 01:37:40 +0800 Subject: [PATCH 2/8] update multi_highlighter --- plugin/global/settings/settings.default.toml | 2 - plugin/global/styles/multi_highlighter.css | 10 +-- plugin/multi_highlighter/index.js | 69 +++++++------------- 3 files changed, 26 insertions(+), 55 deletions(-) diff --git a/plugin/global/settings/settings.default.toml b/plugin/global/settings/settings.default.toml index 9f83ae7d..5348d147 100644 --- a/plugin/global/settings/settings.default.toml +++ b/plugin/global/settings/settings.default.toml @@ -167,8 +167,6 @@ STYLE_COLOR = [ DEFAULT_COLOR = "#dd6699" # 大小写敏感（此处配置的是默认值，使用时可以在页面通过点击按钮重新设置） CASE_SENSITIVE = false -# 显示【执行】按钮（我嫌弃它丑就没开启，如果你是鼠标党，可以置为true） -SHOW_RUN_BUTTON = false # 切换到其他文件时自动重新搜索 RESEARCH_WHILE_OPEN_FILE = true # 点击关键字时显示当前的索引数 diff --git a/plugin/global/styles/multi_highlighter.css b/plugin/global/styles/multi_highlighter.css index ac0180bd..8c483c2f 100644 --- a/plugin/global/styles/multi_highlighter.css +++ b/plugin/global/styles/multi_highlighter.css @@ -10,7 +10,7 @@ } #plugin-multi-highlighter-input input { - width: ${run_style.input_width}; + width: 100%; font-size: 14px; line-height: 25px; max-height: 27px; @@ -32,7 +32,7 @@ #plugin-multi-highlighter-input .plugin-multi-highlighter-option-btn { position: absolute; padding: 1px; - right: ${run_style.case_button_right}; + right: 6px; line-height: 10px; border-radius: 3px; cursor: pointer; @@ -46,12 +46,6 @@ color: var(--active-file-text-color); } -#plugin-multi-highlighter-input .run-highlight { - margin-left: 4px; - cursor: pointer; - display: ${run_style.run_button_display}; -} - #plugin-multi-highlighter-result { display: inline-flex; flex-wrap: wrap; diff --git a/plugin/multi_highlighter/index.js b/plugin/multi_highlighter/index.js index 9115ca98..3f17fdeb 100644 --- a/plugin/multi_highlighter/index.js +++ b/plugin/multi_highlighter/index.js @@ -21,11 +21,6 @@ const { InstantSearch } = require("./highlighter"); class multiHighlighterPlugin extends BasePlugin { styleTemplate = () => ({ - run_style: { - input_width: this.config.SHOW_RUN_BUTTON ? "95%" : "100%", - case_button_right: this.config.SHOW_RUN_BUTTON ? "32px" : "6px", - run_button_display: this.config.SHOW_RUN_BUTTON ? "" : "none", - }, colors_style: this.config.STYLE_COLOR.map((color, idx) => `.plugin-search-hit${idx} { background-color: ${color}; }`).join("\n") }) @@ -36,7 +31,6 @@ class multiHighlighterPlugin extends BasePlugin { -
@@ -47,21 +41,19 @@ class multiHighlighterPlugin extends BasePlugin { init = () => { this.entities = { write: this.utils.entities.eWrite, - modal: document.getElementById('plugin-multi-highlighter'), + modal: document.querySelector("#plugin-multi-highlighter"), input: document.querySelector("#plugin-multi-highlighter-input input"), - runButton: document.querySelector("#plugin-multi-highlighter-input .run-highlight"), + result: document.querySelector("#plugin-multi-highlighter-result"), caseOption: document.querySelector(".plugin-multi-highlighter-option-btn"), - result: document.getElementById("plugin-multi-highlighter-result"), } - this.multiHighlighter = new multiHighlighter(); this.fenceMultiHighlighterList = []; // 为了解决fence惰性加载的问题 this.lastHighlightFilePath = ""; - this.showMarkerInfo = { idxOfFence: -1, idxOfWrite: -1 }; + this.activeMarkerInfo = { idxOfFence: -1, idxOfWrite: -1 }; } process = () => { - this.processAddCodeBlock(); + this.onAddCodeBlock(); this.utils.eventHub.addEventListener(this.utils.eventHub.eventType.otherFileOpened, this.utils.debounce(() => { this.config.RESEARCH_WHILE_OPEN_FILE && this.utils.isShow(this.entities.modal) && this.highlight(); @@ -111,7 +103,7 @@ class multiHighlighterPlugin extends BasePlugin { let nextIdx; if (ev.button === 0) { // 鼠标左键 nextIdx = (targetIdx === resultList.length - 1) ? 0 : targetIdx + 1; - } else if (ev.button === 2) { //鼠标右键 + } else if (ev.button === 2) { // 鼠标右键 nextIdx = (targetIdx === 0 || targetIdx === -1) ? resultList.length - 1 : targetIdx - 1; } @@ -121,11 +113,11 @@ class multiHighlighterPlugin extends BasePlugin { return; } - this.showMarkerInfo.idxOfWrite = this.whichMarker(this.entities.write, next); + this.activeMarkerInfo.idxOfWrite = this.whichMarker(this.entities.write, next); const fence = next.closest("#write .md-fences"); if (fence && !fence.classList.contains("modeLoaded")) { - this.showMarkerInfo.idxOfFence = this.whichMarker(fence, next); + this.activeMarkerInfo.idxOfFence = this.whichMarker(fence, next); // scroll到Fence，触发intersectionObserver，进而触发File.editor.fences.addCodeBlock函数 this.utils.scroll(next); } else { @@ -141,16 +133,21 @@ class multiHighlighterPlugin extends BasePlugin { } } }) - - if (this.config.SHOW_RUN_BUTTON) { - this.entities.runButton.addEventListener("click", ev => this.highlight()) - } if (this.config.ALLOW_DRAG) { this.utils.dragFixedModal(this.entities.input, this.entities.modal); } } - processAddCodeBlock = () => { + onAddCodeBlock = () => { + const scrollToMarker = (parent, idx) => setTimeout(() => { + const markers = parent.querySelectorAll("marker"); + const nthMarker = markers && markers[idx]; + if (nthMarker) { + this.utils.scroll(nthMarker); + this.showIfNeed(nthMarker); + } + }, 120); + let hasMarker = false; const before = cid => { if (this.multiHighlighter.length() !== 0) { @@ -159,31 +156,30 @@ class multiHighlighterPlugin extends BasePlugin { } const after = cid => { if (!hasMarker || this.multiHighlighter.length() === 0) return; - hasMarker = false; - const fence = this.entities.write.querySelector(`.md-fences[cid=${cid}]`); if (!fence) return; const tokens = this.multiHighlighter.getTokens(); const shouldRefresh = this.config.USE_LIST_THRESHOLD > tokens.length || this.config.CLEAR_LIST_THRESHOLD > 0 && this.fenceMultiHighlighterList.length === this.config.CLEAR_LIST_THRESHOLD + if (shouldRefresh) { this.clearFenceMultiHighlighterList(); this.multiHighlighter.removeHighlight(); this.multiHighlighter.highlight(); - if (this.showMarkerInfo.idxOfWrite !== -1) { - this.getAndShowMarker(this.entities.write, this.showMarkerInfo.idxOfWrite); - this.showMarkerInfo.idxOfWrite = -1; + if (this.activeMarkerInfo.idxOfWrite !== -1) { + scrollToMarker(this.entities.write, this.activeMarkerInfo.idxOfWrite); + this.activeMarkerInfo.idxOfWrite = -1; } } else { const fenceMultiHighlighter = new multiHighlighter(this); fenceMultiHighlighter.new(tokens, fence, this.config.CASE_SENSITIVE, "plugin-search-hit"); fenceMultiHighlighter.highlight(); this.fenceMultiHighlighterList.push(fenceMultiHighlighter); - if (this.showMarkerInfo.idxOfFence !== -1) { - this.getAndShowMarker(fence, this.showMarkerInfo.idxOfFence); - this.showMarkerInfo.idxOfFence = -1; + if (this.activeMarkerInfo.idxOfFence !== -1) { + scrollToMarker(fence, this.activeMarkerInfo.idxOfFence); + this.activeMarkerInfo.idxOfFence = -1; } } } @@ -290,13 +286,6 @@ class multiHighlighterPlugin extends BasePlugin { return -1 } - getMarker = (parent, idx) => { - const markers = parent.querySelectorAll("marker"); - if (markers) { - return markers[idx]; - } - } - hide = () => { this.clearHighlight(); this.utils.hide(this.entities.modal); @@ -313,16 +302,6 @@ class multiHighlighterPlugin extends BasePlugin { } } - getAndShowMarker = (parent, idx) => { - setTimeout(() => { - const nthMarker = this.getMarker(parent, idx); - if (nthMarker) { - this.utils.scroll(nthMarker); - this.showIfNeed(nthMarker); - } - }, 120); - } - call = () => this.toggleModal(); } From da1f557eadf8a3d1ff99f5b421cb8c780bd4e38b Mon Sep 17 00:00:00 2001 From: obgnail Date: Mon, 30 Sep 2024 02:15:06 +0800 Subject: [PATCH 3/8] update multi_highlighter --- plugin/global/settings/settings.default.toml | 6 - plugin/multi_highlighter/index.js | 145 +++++++++---------- 2 files changed, 66 insertions(+), 85 deletions(-) diff --git a/plugin/global/settings/settings.default.toml b/plugin/global/settings/settings.default.toml index 5348d147..ecb90f6a 100644 --- a/plugin/global/settings/settings.default.toml +++ b/plugin/global/settings/settings.default.toml @@ -169,12 +169,6 @@ DEFAULT_COLOR = "#dd6699" CASE_SENSITIVE = false # 切换到其他文件时自动重新搜索 RESEARCH_WHILE_OPEN_FILE = true -# 点击关键字时显示当前的索引数 -SHOW_CURRENT_INDEX = true -# 定位时高亮关键字出现提示边框 -SHOW_KEYWORD_OUTLINE = true -# 定位时高亮关键字提示所在行 -SHOW_KEYWORD_BAR = true # DO NOT edit this field unless you know what you are doing # 性能选项：关键字数量大于X时使用fenceMultiHighlighterList（以空间换时间）。若<0，则总是使用 # 此选项用在当搜索了很多关键字时，保证有较快的响应速度 diff --git a/plugin/multi_highlighter/index.js b/plugin/multi_highlighter/index.js index 3f17fdeb..9972fb49 100644 --- a/plugin/multi_highlighter/index.js +++ b/plugin/multi_highlighter/index.js @@ -49,7 +49,36 @@ class multiHighlighterPlugin extends BasePlugin { this.multiHighlighter = new multiHighlighter(); this.fenceMultiHighlighterList = []; // 为了解决fence惰性加载的问题 this.lastHighlightFilePath = ""; - this.activeMarkerInfo = { idxOfFence: -1, idxOfWrite: -1 }; + this.markerHelper = { + idxOfFence: -1, + idxOfWrite: -1, + getMarkerIdx(parent, marker) { + return Array.prototype.indexOf.call(parent.getElementsByTagName("marker"), marker) + }, + scrollToMarker(parent, idx) { + setTimeout(() => { + const markers = parent.getElementsByTagName("marker"); + const marker = markers && markers[idx]; + if (marker) { + this.utils.scroll(marker); + this.highlightMarker(marker); + } + }, 120); + }, + highlightMarker: marker => { + document.querySelectorAll(".plugin-multi-highlighter-move").forEach(ele => ele.classList.remove("plugin-multi-highlighter-move")); + marker.classList.add("plugin-multi-highlighter-move"); + + const writeRect = this.entities.write.getBoundingClientRect(); + const markerRect = marker.getBoundingClientRect(); + const bar = document.createElement("div"); + bar.classList.add("plugin-multi-highlighter-bar"); + bar.style.height = markerRect.height + "px"; + bar.style.width = writeRect.width + "px"; + marker.appendChild(bar); + setTimeout(() => this.utils.removeElement(bar), 3000); + }, + } } process = () => { @@ -113,24 +142,22 @@ class multiHighlighterPlugin extends BasePlugin { return; } - this.activeMarkerInfo.idxOfWrite = this.whichMarker(this.entities.write, next); + this.markerHelper.idxOfWrite = this.markerHelper.getMarkerIdx(this.entities.write, next); const fence = next.closest("#write .md-fences"); if (fence && !fence.classList.contains("modeLoaded")) { - this.activeMarkerInfo.idxOfFence = this.whichMarker(fence, next); + this.markerHelper.idxOfFence = this.markerHelper.getMarkerIdx(fence, next); // scroll到Fence，触发intersectionObserver，进而触发File.editor.fences.addCodeBlock函数 this.utils.scroll(next); } else { - this.handleHiddenElement(next); + this._handleHiddenElement(next); this.utils.scroll(next); - this.showIfNeed(next); + this.markerHelper.highlightMarker(next); } target.setAttribute("cur", nextIdx + ""); - if (this.config.SHOW_CURRENT_INDEX) { - const searcher = this.multiHighlighter.getHighlighter(idx); - if (searcher) { - target.innerText = `${searcher.token.text} (${nextIdx + 1}/${searcher.matches.length})`; - } + const searcher = this.multiHighlighter.getHighlighter(idx); + if (searcher) { + target.innerText = `${searcher.token.text} (${nextIdx + 1}/${searcher.matches.length})`; } }) if (this.config.ALLOW_DRAG) { @@ -139,15 +166,6 @@ class multiHighlighterPlugin extends BasePlugin { } onAddCodeBlock = () => { - const scrollToMarker = (parent, idx) => setTimeout(() => { - const markers = parent.querySelectorAll("marker"); - const nthMarker = markers && markers[idx]; - if (nthMarker) { - this.utils.scroll(nthMarker); - this.showIfNeed(nthMarker); - } - }, 120); - let hasMarker = false; const before = cid => { if (this.multiHighlighter.length() !== 0) { @@ -168,18 +186,18 @@ class multiHighlighterPlugin extends BasePlugin { this.clearFenceMultiHighlighterList(); this.multiHighlighter.removeHighlight(); this.multiHighlighter.highlight(); - if (this.activeMarkerInfo.idxOfWrite !== -1) { - scrollToMarker(this.entities.write, this.activeMarkerInfo.idxOfWrite); - this.activeMarkerInfo.idxOfWrite = -1; + if (this.markerHelper.idxOfWrite !== -1) { + this.markerHelper.scrollToMarker(this.entities.write, this.markerHelper.idxOfWrite); + this.markerHelper.idxOfWrite = -1; } } else { const fenceMultiHighlighter = new multiHighlighter(this); fenceMultiHighlighter.new(tokens, fence, this.config.CASE_SENSITIVE, "plugin-search-hit"); fenceMultiHighlighter.highlight(); this.fenceMultiHighlighterList.push(fenceMultiHighlighter); - if (this.activeMarkerInfo.idxOfFence !== -1) { - scrollToMarker(fence, this.activeMarkerInfo.idxOfFence); - this.activeMarkerInfo.idxOfFence = -1; + if (this.markerHelper.idxOfFence !== -1) { + this.markerHelper.scrollToMarker(fence, this.markerHelper.idxOfFence); + this.markerHelper.idxOfFence = -1; } } } @@ -194,7 +212,15 @@ class multiHighlighterPlugin extends BasePlugin { } clearHighlight = (refreshFences = false) => { - const fences = refreshFences ? this.getNeedRefreshFences() : []; + const getNeedRefreshFences = () => { + const set = new Set(); + this.entities.write.getElementsByTagName("marker").forEach(el => { + const target = el.closest(".md-fences[cid]"); + target && set.add(target.getAttribute("cid")); + }) + return set + } + const fences = refreshFences ? getNeedRefreshFences() : []; this.multiHighlighter.clear(); this.clearFenceMultiHighlighterList(); this.entities.write.querySelectorAll(".plugin-multi-highlighter-bar").forEach(this.utils.removeElement); @@ -204,16 +230,21 @@ class multiHighlighterPlugin extends BasePlugin { }); } - getNeedRefreshFences = () => { - const set = new Set(); - this.entities.write.getElementsByTagName("marker").forEach(el => { - const target = el.closest(".md-fences[cid]"); - target && set.add(target.getAttribute("cid")); - }) - return set + highlight = (refreshResult = true) => { + let input = this.entities.input.value.trim(); + if (!input) return; + if (!this.config.CASE_SENSITIVE) { + input = input.toLowerCase(); + } + const keyArr = this.utils.searchStringParser.getQueryTokens(input); + this.lastHighlightFilePath = this.utils.getFilePath(); + this._doSearch(keyArr, refreshResult); + return true; } - doSearch = (keyArr, refreshResult = true) => { + setInputValue = value => this.entities.input.value = value; + + _doSearch = (keyArr, refreshResult = true) => { this.clearHighlight(); this.multiHighlighter.new(keyArr, this.entities.write, this.config.CASE_SENSITIVE, "plugin-search-hit"); @@ -230,21 +261,7 @@ class multiHighlighterPlugin extends BasePlugin { this.utils.show(this.entities.result); } - setInputValue = value => this.entities.input.value = value; - - highlight = (refreshResult = true) => { - let input = this.entities.input.value.trim(); - if (!input) return; - if (!this.config.CASE_SENSITIVE) { - input = input.toLowerCase(); - } - const keyArr = this.utils.searchStringParser.getQueryTokens(input); - this.lastHighlightFilePath = this.utils.getFilePath(); - this.doSearch(keyArr, refreshResult); - return true; - } - - handleHiddenElement = marker => { + _handleHiddenElement = marker => { const inline = marker.closest('#write span[md-inline="image"], #write span[md-inline="link"], #write span[md-inline="inline_math"]'); if (inline) { inline.classList.add("md-expand"); @@ -256,36 +273,6 @@ class multiHighlighterPlugin extends BasePlugin { } } - showIfNeed = marker => { - if (this.config.SHOW_KEYWORD_OUTLINE) { - document.querySelectorAll(".plugin-multi-highlighter-move").forEach(ele => ele.classList.remove("plugin-multi-highlighter-move")); - marker.classList.add("plugin-multi-highlighter-move"); - } - - if (this.config.SHOW_KEYWORD_BAR) { - const writeRect = this.entities.write.getBoundingClientRect(); - const markerRect = marker.getBoundingClientRect(); - - const bar = document.createElement("div"); - bar.classList.add("plugin-multi-highlighter-bar"); - bar.style.height = markerRect.height + "px"; - bar.style.width = writeRect.width + "px"; - marker.appendChild(bar); - - setTimeout(() => this.utils.removeElement(bar), 3000); - } - } - - whichMarker = (parent, marker) => { - const markers = parent.getElementsByTagName("marker"); - for (let idx = 0; idx < markers.length; idx++) { - if (markers[idx] === marker) { - return idx - } - } - return -1 - } - hide = () => { this.clearHighlight(); this.utils.hide(this.entities.modal); From 67aa71d50628da3ec166f96acff89ec237e06c2c Mon Sep 17 00:00:00 2001 From: obgnail Date: Mon, 30 Sep 2024 02:18:04 +0800 Subject: [PATCH 4/8] update multi_highlighter --- plugin/multi_highlighter/index.js | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/plugin/multi_highlighter/index.js b/plugin/multi_highlighter/index.js index 9972fb49..7b1fc100 100644 --- a/plugin/multi_highlighter/index.js +++ b/plugin/multi_highlighter/index.js @@ -52,16 +52,14 @@ class multiHighlighterPlugin extends BasePlugin { this.markerHelper = { idxOfFence: -1, idxOfWrite: -1, - getMarkerIdx(parent, marker) { - return Array.prototype.indexOf.call(parent.getElementsByTagName("marker"), marker) - }, - scrollToMarker(parent, idx) { + getMarkerIdx: (parent, marker) => Array.prototype.indexOf.call(parent.getElementsByTagName("marker"), marker), + scrollToMarker: (parent, idx) => { setTimeout(() => { const markers = parent.getElementsByTagName("marker"); const marker = markers && markers[idx]; if (marker) { this.utils.scroll(marker); - this.highlightMarker(marker); + this.markerHelper.highlightMarker(marker); } }, 120); }, From c80d531e89655904c6896d497b5e4fdd15089eb8 Mon Sep 17 00:00:00 2001 From: obgnail Date: Mon, 30 Sep 2024 02:35:16 +0800 Subject: [PATCH 5/8] update multi_highligher --- plugin/multi_highlighter/index.js | 21 +++++++++++++-------- plugin/search_multi.js | 4 +++- 2 files changed, 16 insertions(+), 9 deletions(-) diff --git a/plugin/multi_highlighter/index.js b/plugin/multi_highlighter/index.js index 7b1fc100..99f2dad4 100644 --- a/plugin/multi_highlighter/index.js +++ b/plugin/multi_highlighter/index.js @@ -229,19 +229,14 @@ class multiHighlighterPlugin extends BasePlugin { } highlight = (refreshResult = true) => { - let input = this.entities.input.value.trim(); - if (!input) return; - if (!this.config.CASE_SENSITIVE) { - input = input.toLowerCase(); - } - const keyArr = this.utils.searchStringParser.getQueryTokens(input); + const keyArr = this._splitKeyword(this.entities.input.value); + if (!keyArr || keyArr.length === 0) return false; + this.lastHighlightFilePath = this.utils.getFilePath(); this._doSearch(keyArr, refreshResult); return true; } - setInputValue = value => this.entities.input.value = value; - _doSearch = (keyArr, refreshResult = true) => { this.clearHighlight(); @@ -271,6 +266,16 @@ class multiHighlighterPlugin extends BasePlugin { } } + _splitKeyword = str => { + const regex = /[^\s"']+|"([^"]*)"|'([^']*)'/g; + let result = []; + let match; + while ((match = regex.exec(str))) { + result.push(match[1] || match[2] || match[0]); + } + return result; + } + hide = () => { this.clearHighlight(); this.utils.hide(this.entities.modal); diff --git a/plugin/search_multi.js b/plugin/search_multi.js index 9b25bb25..75493c80 100644 --- a/plugin/search_multi.js +++ b/plugin/search_multi.js @@ -285,7 +285,9 @@ class LinkHelper { } syncOption = () => { - this.highlighter.setInputValue(this.searcher.entities.input.value); + const keyArr = this.utils.searchStringParser.getQueryTokens(this.searcher.entities.input.value); + const value = keyArr.map(key => key.includes(" ") ? `"${key}"` : key).join(" "); + document.querySelector("#plugin-multi-highlighter-input input").value = value; if (this.searcher.config.CASE_SENSITIVE !== this.highlighter.config.CASE_SENSITIVE) { document.querySelector(".plugin-multi-highlighter-option-btn").click(); } From 1e2d70f7bf872726ef8f086443a27773337ecc7a Mon Sep 17 00:00:00 2001 From: obgnail Date: Mon, 30 Sep 2024 12:08:08 +0800 Subject: [PATCH 6/8] update multi_highlighter --- plugin/global/settings/settings.default.toml | 11 ----------- plugin/multi_highlighter/index.js | 20 ++++++++++++-------- 2 files changed, 12 insertions(+), 19 deletions(-) diff --git a/plugin/global/settings/settings.default.toml b/plugin/global/settings/settings.default.toml index ecb90f6a..c30d7c54 100644 --- a/plugin/global/settings/settings.default.toml +++ b/plugin/global/settings/settings.default.toml @@ -162,21 +162,10 @@ STYLE_COLOR = [ '#bbeeff', '#ffbbcc', '#88ee88', '#ccbbff', '#ffee88', '#FFFFa0', '#88cccc', '#ffbb88', '#cccccc', '#ffaabb', '#99ccff', '#ff99cc', '#66cc66', '#cc99ff', '#ffcc66', '#FFFF80', '#dd9966', '#aaaaaa', '#66aaaa', '#dd6699', ] -# 当搜索关键字数量超出STYLE_COLOR范围时面板显示的颜色 -# 20个关键字肯定够用了，此选项没太大意义。就算20个真的不够用，那我也是建议你给STYLE_COLOR选项新增一些颜色，而不是修改此选项 -DEFAULT_COLOR = "#dd6699" # 大小写敏感（此处配置的是默认值，使用时可以在页面通过点击按钮重新设置） CASE_SENSITIVE = false # 切换到其他文件时自动重新搜索 RESEARCH_WHILE_OPEN_FILE = true -# DO NOT edit this field unless you know what you are doing -# 性能选项：关键字数量大于X时使用fenceMultiHighlighterList（以空间换时间）。若<0，则总是使用 -# 此选项用在当搜索了很多关键字时，保证有较快的响应速度 -USE_LIST_THRESHOLD = -1 -# DO NOT edit this field unless you know what you are doing -# 性能选项：当fenceMultiHighlighterList数量超过X时，clear之（以时间换空间）。若<0，则总不启用 -# 此选项用在当上一个策略使用太多次后，花费时间去回收空间，保证不会占用太大内存 -CLEAR_LIST_THRESHOLD = 12 ############### commander ############### diff --git a/plugin/multi_highlighter/index.js b/plugin/multi_highlighter/index.js index 99f2dad4..1f5e6902 100644 --- a/plugin/multi_highlighter/index.js +++ b/plugin/multi_highlighter/index.js @@ -46,8 +46,15 @@ class multiHighlighterPlugin extends BasePlugin { result: document.querySelector("#plugin-multi-highlighter-result"), caseOption: document.querySelector(".plugin-multi-highlighter-option-btn"), } + // 当搜索关键字数量超出STYLE_COLOR范围时面板显示的颜色 + this.defaultColor = "#dd6699"; + // 关键字数量大于X时使用fenceMultiHighlighterList（以空间换时间）。若<0，则总是不使用。此选项用在当搜索了很多关键字时，保证有较快的响应速度 + this.useListThreshold = -1; + // 当fenceMultiHighlighterList数量超过X时，clear之（以时间换空间）。若<0，则总不启用。此选项用在当上一个策略使用太多次后，花费时间去回收空间，保证不会占用太大内存 + this.clearListThresold = 12; + // 为了解决fence惰性加载的问题 + this.fenceMultiHighlighterList = []; this.multiHighlighter = new multiHighlighter(); - this.fenceMultiHighlighterList = []; // 为了解决fence惰性加载的问题 this.lastHighlightFilePath = ""; this.markerHelper = { idxOfFence: -1, @@ -99,9 +106,8 @@ class multiHighlighterPlugin extends BasePlugin { this.config.CASE_SENSITIVE = !this.config.CASE_SENSITIVE; }) this.utils.entities.eContent.addEventListener("mousedown", ev => { - if (this.multiHighlighter.length() !== 0 && !ev.target.closest("#plugin-multi-highlighter")) { - this.clearHighlight(true); - } + const shouldClear = this.multiHighlighter.length() !== 0 && !ev.target.closest("#plugin-multi-highlighter"); + shouldClear && this.clearHighlight(true); }, true) this.entities.result.addEventListener("mousedown", ev => { @@ -177,9 +183,7 @@ class multiHighlighterPlugin extends BasePlugin { if (!fence) return; const tokens = this.multiHighlighter.getTokens(); - const shouldRefresh = this.config.USE_LIST_THRESHOLD > tokens.length - || this.config.CLEAR_LIST_THRESHOLD > 0 && this.fenceMultiHighlighterList.length === this.config.CLEAR_LIST_THRESHOLD - + const shouldRefresh = this.useListThreshold > tokens.length || this.clearListThresold > 0 && this.fenceMultiHighlighterList.length === this.clearListThresold if (shouldRefresh) { this.clearFenceMultiHighlighterList(); this.multiHighlighter.removeHighlight(); @@ -245,7 +249,7 @@ class multiHighlighterPlugin extends BasePlugin { if (refreshResult) { const itemList = this.multiHighlighter.getList().map((searcher, idx) => { - const color = (idx < this.config.STYLE_COLOR.length) ? this.config.STYLE_COLOR[idx] : this.config.DEFAULT_COLOR; + const color = (idx < this.config.STYLE_COLOR.length) ? this.config.STYLE_COLOR[idx] : this.defaultColor; return `
${searcher.token.text} (${searcher.matches.length})
`; }) From 0bbc22aede30276d48279cd56f46504c511e720f Mon Sep 17 00:00:00 2001 From: obgnail Date: Mon, 30 Sep 2024 12:23:44 +0800 Subject: [PATCH 7/8] update resize_image --- README.md | 2 +- plugin/global/settings/settings.default.toml | 2 ++ plugin/resize_image.js | 8 ++++---- 3 files changed, 7 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index f1001fd8..146ef8c8 100644 --- a/README.md +++ b/README.md @@ -732,7 +732,7 @@ icon = "\\f040" ### resize_image：调整图片大小 -功能：`ctrl+鼠标滚轮滚动`：调整图片大小。 +功能：`alt+鼠标滚轮滚动`：调整图片大小。 ![resize-image](assets/resize-image.gif) diff --git a/plugin/global/settings/settings.default.toml b/plugin/global/settings/settings.default.toml index c30d7c54..b75badb8 100644 --- a/plugin/global/settings/settings.default.toml +++ b/plugin/global/settings/settings.default.toml @@ -336,6 +336,8 @@ ENABLE = true NAME = "图片调整" # 是否在右键菜单中可点击 CLICKABLE = true +# 修饰键 +MODIFIER_KEY = "alt" # 每次操作的缩放倍率 SCALE = 0.1 # 允许图片超出范围 diff --git a/plugin/resize_image.js b/plugin/resize_image.js index 4c4896a0..b302484b 100644 --- a/plugin/resize_image.js +++ b/plugin/resize_image.js @@ -3,16 +3,16 @@ class resizeImagePlugin extends BasePlugin { this.utils.autoSaveConfig(this); this.recordResizeState(false); + const checker = this.utils.modifierKey(this.config.MODIFIER_KEY); this.utils.entities.eWrite.addEventListener("wheel", ev => { - if (!this.utils.metaKeyPressed(ev)) return; + if (!checker(ev)) return; const target = ev.target.closest("img"); if (!target) return; - + ev.preventDefault(); ev.stopPropagation(); - const zoomOut = ev.deltaY > 0; this.zoom(target, zoomOut, this.config.SCALE); - }, { passive: true, capture: true }); + }, { passive: false, capture: true }); } recordResizeState = (needChange = true) => { From e2759cf86e2556907417e222c3f7b80fb5b7652b Mon Sep 17 00:00:00 2001 From: obgnail Date: Mon, 30 Sep 2024 17:08:45 +0800 Subject: [PATCH 8/8] update resize_image: support PERSISTENT resize --- plugin/global/settings/settings.default.toml | 9 +++--- plugin/resize_image.js | 32 +++++++++++++++----- 2 files changed, 29 insertions(+), 12 deletions(-) diff --git a/plugin/global/settings/settings.default.toml b/plugin/global/settings/settings.default.toml index b75badb8..71c73fc3 100644 --- a/plugin/global/settings/settings.default.toml +++ b/plugin/global/settings/settings.default.toml @@ -336,10 +336,11 @@ ENABLE = true NAME = "图片调整" # 是否在右键菜单中可点击 CLICKABLE = true -# 修饰键 -MODIFIER_KEY = "alt" -# 每次操作的缩放倍率 -SCALE = 0.1 +# 各个功能对应的修饰键（为空则不使用对应的功能） +# - TEMPORARY : 临时修改图片大小 +# - PERSISTENT : 将图片转为HTML格式，永久修改图片大小 +# 举例：【TEMPORARY = "alt"】：当鼠标悬停于图片，并且【alt+滚轮】后，就会临时修改图片大小 +MODIFIER_KEY = { TEMPORARY = "alt", PERSISTENT = "" } # 允许图片超出范围 ALLOW_OVERSIZE = true # 图片水平位置：center/left/right diff --git a/plugin/resize_image.js b/plugin/resize_image.js index b302484b..ff30a8c9 100644 --- a/plugin/resize_image.js +++ b/plugin/resize_image.js @@ -1,17 +1,23 @@ class resizeImagePlugin extends BasePlugin { + init = () => { + this.checklist = Object.entries(this.config.MODIFIER_KEY) + .filter(([_, modifier]) => Boolean(modifier)) + .map(([type, modifier]) => ({ type, checker: this.utils.modifierKey(modifier) })) + } + process = () => { this.utils.autoSaveConfig(this); this.recordResizeState(false); - const checker = this.utils.modifierKey(this.config.MODIFIER_KEY); this.utils.entities.eWrite.addEventListener("wheel", ev => { - if (!checker(ev)) return; + const zoom = this.checklist.find(e => e.checker(ev)); + if (!zoom) return; const target = ev.target.closest("img"); if (!target) return; ev.preventDefault(); ev.stopPropagation(); - const zoomOut = ev.deltaY > 0; - this.zoom(target, zoomOut, this.config.SCALE); + const zoomFunc = zoom.type === "TEMPORARY" ? this.zoomTemporary : this.zoomPersistent; + zoomFunc(target, ev.deltaY > 0); }, { passive: false, capture: true }); } @@ -60,9 +66,9 @@ class resizeImagePlugin extends BasePlugin { } } - zoom = (image, zoomOut, scale) => { + zoomTemporary = (image, zoomOut, scale = 0.1) => { let width = this.getWidth(image); - width = zoomOut ? width * (1 - scale) : width * (1 + this.config.SCALE); + width = zoomOut ? width * (1 - scale) : width * (1 + scale); const maxWidth = image.parentElement.offsetWidth; image.style.maxWidth = ""; @@ -80,6 +86,16 @@ class resizeImagePlugin extends BasePlugin { } } + zoomPersistent = (image, zoomOut, scale = 5) => { + const originZoom = image.style.zoom || "100%"; + const nextZoom = Math.max(10, Math.min(parseInt(originZoom) + (zoomOut ? -scale : scale), 200)) + "%"; + Object.assign(image.style, { position: "", width: "", maxWidth: "", left: "" }); + const $span = $(image.closest(".md-image.md-img-loaded")); + if ($span.length === 1) { + File.editor.imgEdit.zoomAction($span, nextZoom); + } + } + dynamicCallArgsGenerator = (anchorNode, meta) => { const args = [ { arg_name: "记住图片放缩状态", arg_value: "record_resize_state", arg_state: this.config.RECORD_RESIZE }, @@ -109,8 +125,8 @@ class resizeImagePlugin extends BasePlugin { const callMap = { record_resize_state: () => this.recordResizeState(), allow_oversize: () => this.resetImageSize(), - zoom_out_20_percent: meta => this.zoom(meta.target, true, 0.2), - zoom_in_20_percent: meta => this.zoom(meta.target, false, 0.2), + zoom_out_20_percent: meta => this.zoomTemporary(meta.target, true, 0.2), + zoom_in_20_percent: meta => this.zoomTemporary(meta.target, false, 0.2), set_align_left: meta => this.setAlign("left", meta.target), set_align_center: meta => this.setAlign("center", meta.target), set_align_right: meta => this.setAlign("right", meta.target),