From 1926dfb4e7daba608a5a226b159cc321b1f1105a Mon Sep 17 00:00:00 2001 From: Vanessa Date: Sat, 1 Mar 2025 01:00:57 +0800 Subject: [PATCH] :art: https://github.com/siyuan-note/siyuan/issues/14226 --- app/src/protyle/breadcrumb/index.ts | 16 ------ app/src/protyle/gutter/index.ts | 35 +----------- app/src/protyle/toolbar/index.ts | 1 + app/src/protyle/ui/initUI.ts | 87 +++++++++++++++++++++++++++++ app/src/protyle/wysiwyg/index.ts | 32 ----------- 5 files changed, 89 insertions(+), 82 deletions(-) diff --git a/app/src/protyle/breadcrumb/index.ts b/app/src/protyle/breadcrumb/index.ts index 97fbbe497..126654e0c 100644 --- a/app/src/protyle/breadcrumb/index.ts +++ b/app/src/protyle/breadcrumb/index.ts @@ -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}); diff --git a/app/src/protyle/gutter/index.ts b/app/src/protyle/gutter/index.ts index 4b53b75e0..c6e136dd3 100644 --- a/app/src/protyle/gutter/index.ts +++ b/app/src/protyle/gutter/index.ts @@ -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; diff --git a/app/src/protyle/toolbar/index.ts b/app/src/protyle/toolbar/index.ts index 222c1bbaa..59e581d6d 100644 --- a/app/src/protyle/toolbar/index.ts +++ b/app/src/protyle/toolbar/index.ts @@ -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) => { diff --git a/app/src/protyle/ui/initUI.ts b/app/src/protyle/ui/initUI.ts index 8920e6c85..b6f5fb534 100644 --- a/app/src/protyle/ui/initUI.ts +++ b/app/src/protyle/ui/initUI.ts @@ -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) => { diff --git a/app/src/protyle/wysiwyg/index.ts b/app/src/protyle/wysiwyg/index.ts index ecaa4d893..1cb73ac36 100644 --- a/app/src/protyle/wysiwyg/index.ts +++ b/app/src/protyle/wysiwyg/index.ts @@ -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") {