Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2025-12-31 22:08:48 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

🎨 https://github.com/siyuan-note/siyuan/issues/14226

Browse source
This commit is contained in:
Vanessa 2025-03-01 01:00:57 +08:00
parent 923b82bca4
commit 1926dfb4e7
5 changed files with 89 additions and 82 deletions
Download patch file Download diff file Expand all files Collapse all files

16
app/src/protyle/breadcrumb/index.ts
View file

@ -177,22 +177,6 @@ ${padHTML}
item.classList.remove("protyle-wysiwyg--hl");
});
});
this.element.addEventListener("mouseover", (event) => {
if (!protyle.selectElement.classList.contains("fn__none")) {
return;
}
const target = event.target as HTMLElement;
const svgElement = hasClosestByAttribute(target, "data-node-id", null);
if (svgElement) {
protyle.wysiwyg.element.querySelectorAll(".protyle-wysiwyg--hl").forEach(item => {
item.classList.remove("protyle-wysiwyg--hl");
});
const nodeElement = protyle.wysiwyg.element.querySelector(`[data-node-id="${svgElement.getAttribute("data-node-id")}"]`);
if (nodeElement) {
nodeElement.classList.add("protyle-wysiwyg--hl");
}
}
});
this.element.addEventListener("mousewheel", (event: WheelEvent) => {
this.element.scrollLeft = this.element.scrollLeft + event.deltaY;
}, {passive: true});

35
app/src/protyle/gutter/index.ts
View file

@ -444,39 +444,6 @@ export class Gutter {
event.preventDefault();
event.stopPropagation();
});
this.element.addEventListener("mouseover", (event: MouseEvent & { target: HTMLInputElement }) => {
const buttonElement = hasClosestByTag(event.target, "BUTTON");
if (!buttonElement) {
return;
}
const type = buttonElement.getAttribute("data-type");
if (type === "fold" || type === "NodeAttributeViewRow") {
Array.from(protyle.wysiwyg.element.querySelectorAll(".protyle-wysiwyg--hl, .av__row--hl")).forEach(item => {
item.classList.remove("protyle-wysiwyg--hl", "av__row--hl");
});
return;
}
Array.from(protyle.wysiwyg.element.querySelectorAll(`[data-node-id="${buttonElement.getAttribute("data-node-id")}"]`)).find(item => {
if (!isInEmbedBlock(item) && this.isMatchNode(item)) {
const rowItem = item.querySelector(`.av__row[data-id="${buttonElement.dataset.rowId}"]`);
Array.from(protyle.wysiwyg.element.querySelectorAll(".protyle-wysiwyg--hl, .av__row--hl")).forEach(hlItem => {
if (!item.isSameNode(hlItem)) {
hlItem.classList.remove("protyle-wysiwyg--hl");
}
if (rowItem && !rowItem.isSameNode(hlItem)) {
rowItem.classList.remove("av__row--hl");
}
});
if (type === "NodeAttributeViewRowMenu") {
rowItem.classList.add("av__row--hl");
} else {
item.classList.add("protyle-wysiwyg--hl");
}
return true;
}
});
event.preventDefault();
});
this.element.addEventListener("mouseleave", (event: MouseEvent & { target: HTMLInputElement }) => {
Array.from(protyle.wysiwyg.element.querySelectorAll(".protyle-wysiwyg--hl, .av__row--hl")).forEach(item => {
item.classList.remove("protyle-wysiwyg--hl", "av__row--hl");
@ -491,7 +458,7 @@ export class Gutter {
}, {passive: true});
}
private isMatchNode(item: Element) {
public isMatchNode(item: Element) {
const itemRect = item.getBoundingClientRect();
// 原本为4，由于 https://github.com/siyuan-note/siyuan/issues/12166 改为 6
let gutterTop = this.element.getBoundingClientRect().top + 6;

1
app/src/protyle/toolbar/index.ts
View file

@ -1348,6 +1348,7 @@ export class Toolbar {
}
previewPath = currentPath;
previewTemplate(previewPath, previewElement, protyle.block.parentID);
event.stopPropagation();
});
const inputElement = this.subElement.querySelector("input");
inputElement.addEventListener("keydown", (event: KeyboardEvent) => {

87
app/src/protyle/ui/initUI.ts
View file

@ -14,6 +14,13 @@ import {transaction} from "../wysiwyg/transaction";
import {focusByRange} from "../util/selection";
/// #if !MOBILE
import {moveResize} from "../../dialog/moveResize";
import {
hasClosestBlock,
hasClosestByAttribute,
hasClosestByClassName,
hasClosestByTag,
isInEmbedBlock
} from "../util/hasClosest";
/// #endif
export const initUI = (protyle: IProtyle) => {
@ -164,6 +171,86 @@ export const initUI = (protyle: IProtyle) => {
}
}
});
/// if !MOBILE
let overAttr = false;
protyle.element.addEventListener("mouseover", (event: KeyboardEvent & { target: HTMLElement }) => {
// attr
const attrElement = hasClosestByClassName(event.target, "protyle-attr");
if (attrElement && !attrElement.parentElement.classList.contains("protyle-title")) {
overAttr = true;
attrElement.parentElement.classList.add("protyle-wysiwyg--hl");
return;
} else if (overAttr) {
const hlElement = protyle.wysiwyg.element.querySelector(".protyle-wysiwyg--hl");
if (hlElement) {
hlElement.classList.remove("protyle-wysiwyg--hl");
}
overAttr = false;
}
const nodeElement = hasClosestBlock(event.target);
if (protyle.options.render.gutter && nodeElement) {
if (nodeElement && (nodeElement.classList.contains("list") || nodeElement.classList.contains("li"))) {
// 光标在列表下部应显示右侧的元素，而不是列表本身。放在 windowEvent 中的 mousemove 下处理
return;
}
const embedElement = isInEmbedBlock(nodeElement);
if (embedElement) {
protyle.gutter.render(protyle, embedElement, protyle.wysiwyg.element);
} else {
protyle.gutter.render(protyle, nodeElement, protyle.wysiwyg.element, event.target);
}
return;
}
// gutter
const buttonElement = hasClosestByTag(event.target, "BUTTON");
if (buttonElement && buttonElement.parentElement.classList.contains("protyle-gutters")) {
const type = buttonElement.getAttribute("data-type");
if (type === "fold" || type === "NodeAttributeViewRow") {
Array.from(protyle.wysiwyg.element.querySelectorAll(".protyle-wysiwyg--hl, .av__row--hl")).forEach(item => {
item.classList.remove("protyle-wysiwyg--hl", "av__row--hl");
});
return;
}
Array.from(protyle.wysiwyg.element.querySelectorAll(`[data-node-id="${buttonElement.getAttribute("data-node-id")}"]`)).find(item => {
if (!isInEmbedBlock(item) && protyle.gutter.isMatchNode(item)) {
const rowItem = item.querySelector(`.av__row[data-id="${buttonElement.dataset.rowId}"]`);
Array.from(protyle.wysiwyg.element.querySelectorAll(".protyle-wysiwyg--hl, .av__row--hl")).forEach(hlItem => {
if (!item.isSameNode(hlItem)) {
hlItem.classList.remove("protyle-wysiwyg--hl");
}
if (rowItem && !rowItem.isSameNode(hlItem)) {
rowItem.classList.remove("av__row--hl");
}
});
if (type === "NodeAttributeViewRowMenu") {
rowItem.classList.add("av__row--hl");
} else {
item.classList.add("protyle-wysiwyg--hl");
}
return true;
}
});
event.preventDefault();
return;
}
// 面包屑
if (protyle.selectElement.classList.contains("fn__none")) {
const svgElement = hasClosestByAttribute(event.target, "data-node-id", null);
if (svgElement && svgElement.parentElement.classList.contains("protyle-breadcrumb__bar")) {
protyle.wysiwyg.element.querySelectorAll(".protyle-wysiwyg--hl").forEach(item => {
item.classList.remove("protyle-wysiwyg--hl");
});
const nodeElement = protyle.wysiwyg.element.querySelector(`[data-node-id="${svgElement.getAttribute("data-node-id")}"]`);
if (nodeElement) {
nodeElement.classList.add("protyle-wysiwyg--hl");
}
}
}
});
/// endif
};
export const addLoading = (protyle: IProtyle, msg?: string) => {

32
app/src/protyle/wysiwyg/index.ts
View file

@ -1900,38 +1900,6 @@ export class WYSIWYG {
}
}, {passive: true});
let overAttr = false;
this.element.addEventListener("mouseover", (event: MouseEvent & { target: Element }) => {
const attrElement = hasClosestByClassName(event.target, "protyle-attr");
if (attrElement) {
overAttr = true;
attrElement.parentElement.classList.add("protyle-wysiwyg--hl");
return;
} else if (overAttr) {
const hlElement = protyle.wysiwyg.element.querySelector(".protyle-wysiwyg--hl");
if (hlElement) {
hlElement.classList.remove("protyle-wysiwyg--hl");
}
overAttr = false;
}
if (hasClosestByClassName(event.target, "protyle-action") || !protyle.options.render.gutter) {
return;
}
const nodeElement = hasClosestBlock(event.target);
if (nodeElement && (nodeElement.classList.contains("list") || nodeElement.classList.contains("li"))) {
// 光标在列表下部应显示右侧的元素，而不是列表本身。放在 windowEvent 中的 mousemove 下处理
return;
}
if (nodeElement) {
const embedElement = isInEmbedBlock(nodeElement);
if (embedElement) {
protyle.gutter.render(protyle, embedElement, this.element);
} else {
protyle.gutter.render(protyle, nodeElement, this.element, event.target);
}
}
});
this.element.addEventListener("paste", (event: ClipboardEvent & { target: HTMLElement }) => {
// https://github.com/siyuan-note/siyuan/issues/11241
if (event.target.localName === "input" && event.target.getAttribute("data-type") === "av-search") {