Skip to content

Commit

Permalink
update readme
Browse files Browse the repository at this point in the history
  • Loading branch information
obgnail committed Sep 7, 2023
1 parent c14e376 commit b7c3441
Show file tree
Hide file tree
Showing 5 changed files with 90 additions and 47 deletions.
46 changes: 29 additions & 17 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 ⭐ 就更好了 : )
Expand Down Expand Up @@ -316,6 +317,17 @@ const BUILTIN = [



### markmap:提供 markmap 支持

使用方式:

- 方式一:右键菜单 -> 启用插件 -> markmap
- 方式二:直接点击右下角的 markmap 按钮

![markmap](assets/markmap.gif)



### read_only:只读模式

只读模式下文档不可编辑。
Expand Down
Binary file added assets/markmap.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
19 changes: 12 additions & 7 deletions plugin/global/core/plugin.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 的宽高
Expand All @@ -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";
}
})
Expand All @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion plugin/global/settings/settings.user.toml
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
############### test ###############
[test]
ENABLE = true
ENABLE = false
70 changes: 48 additions & 22 deletions plugin/markmap/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}
})
Expand All @@ -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();
Expand All @@ -217,30 +230,43 @@ 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");
} else {
button.className = "plugin-markmap-icon ion-arrow-expand";
button.setAttribute("action", "expand");
}
this.drawToc();
await this.drawToc();
}

setRect = rect => {
Expand Down

0 comments on commit b7c3441

Please sign in to comment.