diff --git a/README.md b/README.md index 451090b0..f466b336 100644 --- a/README.md +++ b/README.md @@ -18,23 +18,24 @@ | 8 | fence_enhance | 一键复制代码，折叠代码 | √ | | 9 | commander | 命令行环境 | √ | | 10 | mindmap | 根据文档大纲一键生成思维导图 | √ | -| 11 | read_only | 只读模式 | √ | -| 12 | blur | 模糊模式 | √ | -| 13 | kanban | 看板 | √ | -| 14 | file_counter | 显示目录下的文件数 | √ | -| 15 | outline | 以表格、图片、代码块形式的大纲 | √ | -| 16 | auto_number | 章节、表格、图片、代码块等自动编号 | √ | -| 17 | datatables | 表格增强（搜索、过滤、分页、排序等） | √ | -| 18 | resize_table | 调整表格行高列宽 | √ | -| 19 | resize_image | 调整图片显示大小 | √ | -| 20 | export_enhance | 导出 html 时避免图片丢失 | √ | -| 21 | go_top | 一键到文章顶部 | √ | -| 22 | truncate_text | 暂时隐藏内容，提高大文件渲染性能 | √ | -| 23 | custom | 用户自定义命令（高级） | √ | -| 24 | plugin_updater | 一键更新插件 | √ | -| 25 | right_click_menu | 右键菜单统一管理、调用插件 | √ | -| 26 | mermaid_replace | 替换 mermaid 组件 | × | -| 27 | old_window_tab | 标签页管理（已废弃） | × | +| 11 | markmap | 提供 markmap 支持 | √ | +| 12 | read_only | 只读模式 | √ | +| 13 | blur | 模糊模式 | √ | +| 14 | kanban | 看板 | √ | +| 15 | file_counter | 显示目录下的文件数 | √ | +| 16 | outline | 以表格、图片、代码块形式的大纲 | √ | +| 17 | auto_number | 章节、表格、图片、代码块等自动编号 | √ | +| 18 | datatables | 表格增强（搜索、过滤、分页、排序等） | √ | +| 19 | resize_table | 调整表格行高列宽 | √ | +| 20 | resize_image | 调整图片显示大小 | √ | +| 21 | export_enhance | 导出 html 时避免图片丢失 | √ | +| 22 | go_top | 一键到文章顶部 | √ | +| 23 | truncate_text | 暂时隐藏内容，提高大文件渲染性能 | √ | +| 24 | custom | 用户自定义命令（高级） | √ | +| 25 | plugin_updater | 一键更新插件 | √ | +| 26 | right_click_menu | 右键菜单统一管理、调用插件 | √ | +| 27 | mermaid_replace | 替换 mermaid 组件 | × | +| 28 | old_window_tab | 标签页管理（已废弃） | × | > 如果各位有其他的需求，或发现 BUG，欢迎提 issue。如果能给我颗 star ⭐ 就更好了 : ) @@ -316,6 +317,17 @@ const BUILTIN = [ +### markmap：提供 markmap 支持 + +使用方式： + +- 方式一：右键菜单 -> 启用插件 -> markmap +- 方式二：直接点击右下角的 markmap 按钮 + +![markmap](assets/markmap.gif) + + + ### read_only：只读模式 只读模式下文档不可编辑。 diff --git a/assets/markmap.gif b/assets/markmap.gif new file mode 100644 index 00000000..5c9d8db3 Binary files /dev/null and b/assets/markmap.gif differ diff --git a/plugin/global/core/plugin.js b/plugin/global/core/plugin.js index 7f976e65..d5aacc3e 100644 --- a/plugin/global/core/plugin.js +++ b/plugin/global/core/plugin.js @@ -259,7 +259,7 @@ class utils { static resizeFixedModal = ( handleElement, resizeElement, - width = true, height = true, + resizeWidth = true, resizeHeight = true, onMouseDown = null, onMouseMove = null, onMouseUp = null ) => { // 鼠标按下时记录当前鼠标位置和 div 的宽高 @@ -280,15 +280,19 @@ class utils { // 鼠标移动时计算宽高差值并设置 div 的新宽高 function mousemove(e) { requestAnimationFrame(() => { - const deltaX = e.clientX - startX; - const deltaY = e.clientY - startY; + let deltaX = e.clientX - startX; + let deltaY = e.clientY - startY; if (onMouseMove) { - onMouseMove(deltaX, deltaY); + const result = onMouseMove(deltaX, deltaY); + if (result) { + deltaX = result.deltaX; + deltaY = result.deltaY; + } } - if (width) { + if (resizeWidth) { resizeElement.style.width = startWidth + deltaX + "px"; } - if (height) { + if (resizeHeight) { resizeElement.style.height = startHeight + deltaY + "px"; } }) @@ -302,13 +306,14 @@ class utils { } } - static dragFixedModal = (handleElement, moveElement, withMetaKey = true) => { + static dragFixedModal = (handleElement, moveElement, withMetaKey = true, onMouseDown = null) => { handleElement.addEventListener("mousedown", ev => { if (withMetaKey && !this.metaKeyPressed(ev) || ev.button !== 0) return; ev.stopPropagation(); const rect = moveElement.getBoundingClientRect(); const shiftX = ev.clientX - rect.left; const shiftY = ev.clientY - rect.top; + onMouseDown && onMouseDown(); const onMouseMove = ev => { if (withMetaKey && !this.metaKeyPressed(ev) || ev.button !== 0) return; diff --git a/plugin/global/settings/settings.user.toml b/plugin/global/settings/settings.user.toml index c54e8f7e..d511f986 100644 --- a/plugin/global/settings/settings.user.toml +++ b/plugin/global/settings/settings.user.toml @@ -1,3 +1,3 @@ ############### test ############### [test] -ENABLE = true +ENABLE = false diff --git a/plugin/markmap/index.js b/plugin/markmap/index.js index 0729a726..dc352abd 100644 --- a/plugin/markmap/index.js +++ b/plugin/markmap/index.js @@ -153,29 +153,45 @@ class markmapPlugin extends global._basePlugin { () => this.entities.modal.style.display === "block" && this.drawToc() ) - this.utils.dragFixedModal(this.entities.header.querySelector(`.plugin-markmap-icon[action="move"]`), this.entities.modal, false); + this.utils.dragFixedModal(this.entities.header.querySelector(`.plugin-markmap-icon[action="move"]`), this.entities.modal, false, this.waitUnpin); this.utils.resizeFixedModal( this.entities.resize, this.entities.modal, true, true, null, null, - () => this.setFullScreenIcon(this.entities.fullScreen, false) + async () => { + await this.waitUnpin(); + await this.setFullScreenIcon(this.entities.fullScreen, false); + } ); let contentStartTop = 0; + let minHeight = 0; this.utils.resizeFixedModal( this.entities.grip, this.entities.modal, false, true, - () => contentStartTop = this.entities.content.getBoundingClientRect().top, - (deltaX, deltaY) => this.entities.content.style.top = contentStartTop + deltaY + "px", + () => { + contentStartTop = this.entities.content.getBoundingClientRect().top; + const headerTop = this.entities.header.getBoundingClientRect().top; + minHeight = this.entities.header.firstElementChild.getBoundingClientRect().height * this.entities.header.childElementCount + headerTop; + }, + (deltaX, deltaY) => { + let newTop = contentStartTop + deltaY; + if (newTop < minHeight) { + deltaY = minHeight - contentStartTop; + newTop = minHeight; + } + this.entities.content.style.top = newTop + "px"; + return {deltaX, deltaY} + }, this.drawToc ); this.entities.header.addEventListener("click", ev => { - const target = ev.target.closest(".plugin-markmap-icon"); - if (target) { - const action = target.getAttribute("action"); - if (action !== "move" && this[action]) { + const button = ev.target.closest(".plugin-markmap-icon"); + if (button) { + const action = button.getAttribute("action"); + if (action !== "move" && action !== "resize" && this[action]) { ev.stopPropagation(); ev.preventDefault(); - this[action](target); + this.onButtonClick(action, button); } } }) @@ -189,16 +205,13 @@ class markmapPlugin extends global._basePlugin { call = async type => { if (type === "current_toc") { - await this.drawToc() + await this.drawToc(); } } - close = () => { - this.pinUtils.isPin && this.pin(); - this.entities.modal.style.display = ""; - } + close = () => this.entities.modal.style.display = ""; - pin = () => { + pin = async () => { this.pinUtils.isPin = !this.pinUtils.isPin; if (this.pinUtils.isPin) { this.contentOriginRect = this.entities.content.getBoundingClientRect(); @@ -217,22 +230,35 @@ class markmapPlugin extends global._basePlugin { this.entities.modal.style.boxShadow = ""; this.entities.content.style.top = this.contentOriginRect.top + "px"; this.entities.grip.style.display = ""; - this.drawToc(); + await this.drawToc(); + } + } + + waitUnpin = async () => { + if (this.pinUtils.isPin) { + await this.pin(); + } + } + + onButtonClick = async (action, button) => { + if (action !== "pin") { + await this.waitUnpin(); } + this[action](button); } - expand = button => { + expand = async button => { this.originRect = this.entities.modal.getBoundingClientRect(); this.setRect(this.entities.content.getBoundingClientRect()); - this.setFullScreenIcon(button, true); + await this.setFullScreenIcon(button, true); } - shrink = button => { + shrink = async button => { this.setRect(this.originRect); - this.setFullScreenIcon(button, false) + await this.setFullScreenIcon(button, false) } - setFullScreenIcon = (button, fullScreen) => { + setFullScreenIcon = async (button, fullScreen) => { if (fullScreen) { button.className = "plugin-markmap-icon ion-arrow-shrink"; button.setAttribute("action", "shrink"); @@ -240,7 +266,7 @@ class markmapPlugin extends global._basePlugin { button.className = "plugin-markmap-icon ion-arrow-expand"; button.setAttribute("action", "expand"); } - this.drawToc(); + await this.drawToc(); } setRect = rect => {