diff --git a/app/src/layout/Wnd.ts b/app/src/layout/Wnd.ts index 202bbfad8..3e7391ef0 100644 --- a/app/src/layout/Wnd.ts +++ b/app/src/layout/Wnd.ts @@ -3,8 +3,11 @@ import {genUUID} from "../util/genID"; import { fixWndFlex1, getInstanceById, - getWndByLayout, JSONToCenter, - newModelByInitData, pdfIsLoading, saveLayout, + getWndByLayout, + JSONToCenter, + newModelByInitData, + pdfIsLoading, + saveLayout, setPanelFocus, switchWnd } from "./util"; @@ -20,7 +23,7 @@ import { } from "../protyle/util/hasClosest"; import {Constants} from "../constants"; /// #if !BROWSER -import {webFrame, ipcRenderer} from "electron"; +import {ipcRenderer, webFrame} from "electron"; import {setModelsHash, setTabPosition} from "../window/setHeader"; /// #endif import {Search} from "../search"; @@ -198,16 +201,24 @@ export class Wnd { } }); let dragleaveTimeout: number; + let headerDragCounter = 0; this.headersElement.parentElement.addEventListener("dragleave", function () { - clearTimeout(dragleaveTimeout); - // 窗口拖拽到新窗口时,不 drop 无法移除 clone 的元素 - dragleaveTimeout = window.setTimeout(() => { - document.querySelectorAll(".layout-tab-bar li[data-clone='true']").forEach(item => { - item.remove(); - }); - }, 1000); - const it = this as HTMLElement; - it.classList.remove("layout-tab-bars--drag"); + headerDragCounter--; + if (headerDragCounter === 0) { + clearTimeout(dragleaveTimeout); + // 窗口拖拽到新窗口时,不 drop 无法移除 clone 的元素 + dragleaveTimeout = window.setTimeout(() => { + document.querySelectorAll(".layout-tab-bar li[data-clone='true']").forEach(item => { + item.remove(); + }); + }, 1000); + const it = this as HTMLElement; + it.classList.remove("layout-tab-bars--drag"); + } + }); + this.headersElement.parentElement.addEventListener("dragenter", (event) => { + event.preventDefault(); + headerDragCounter++; }); this.headersElement.parentElement.addEventListener("drop", function (event: DragEvent & { target: HTMLElement diff --git a/app/src/layout/dock/Files.ts b/app/src/layout/dock/Files.ts index 71a9324de..3a8e7e3e0 100644 --- a/app/src/layout/dock/Files.ts +++ b/app/src/layout/dock/Files.ts @@ -451,7 +451,9 @@ export class Files extends Model { event.preventDefault(); return; } - liElement.classList.remove("dragover__top", "dragover__bottom", "dragover"); + this.element.querySelectorAll(".dragover, .dragover__bottom, .dragover__top").forEach((item: HTMLElement) => { + item.classList.remove("dragover", "dragover__bottom", "dragover__top"); + }); let gutterType = ""; for (const item of event.dataTransfer.items) { if (item.type.startsWith(Constants.SIYUAN_DROP_GUTTER)) { @@ -510,10 +512,18 @@ export class Files extends Model { liElement.classList.add("dragover"); event.preventDefault(); }); + let counter = 0; this.element.addEventListener("dragleave", () => { - this.element.querySelectorAll(".dragover, .dragover__bottom, .dragover__top").forEach((item: HTMLElement) => { - item.classList.remove("dragover", "dragover__bottom", "dragover__top"); - }); + counter--; + if (counter === 0) { + this.element.querySelectorAll(".dragover, .dragover__bottom, .dragover__top").forEach((item: HTMLElement) => { + item.classList.remove("dragover", "dragover__bottom", "dragover__top"); + }); + } + }); + this.element.addEventListener("dragenter", (event) => { + event.preventDefault(); + counter++; }); this.element.addEventListener("drop", async (event: DragEvent & { target: HTMLElement }) => { const newElement = this.element.querySelector(".dragover, .dragover__bottom, .dragover__top"); diff --git a/app/src/protyle/render/av/blockAttr.ts b/app/src/protyle/render/av/blockAttr.ts index d30aa6024..f1e2b1b0b 100644 --- a/app/src/protyle/render/av/blockAttr.ts +++ b/app/src/protyle/render/av/blockAttr.ts @@ -264,17 +264,27 @@ class="fn__flex-1 fn__flex${["url", "text", "number", "email", "phone", "block"] } event.preventDefault(); const nodeRect = targetElement.getBoundingClientRect(); - targetElement.classList.remove("dragover__bottom", "dragover__top"); + element.querySelectorAll(".dragover__bottom, .dragover__top").forEach((item: HTMLElement) => { + item.classList.remove("dragover__bottom", "dragover__top"); + }); if (event.clientY > nodeRect.top + nodeRect.height / 2) { targetElement.classList.add("dragover__bottom"); } else { targetElement.classList.add("dragover__top"); } }); + let counter = 0 element.addEventListener("dragleave", () => { - element.querySelectorAll(".dragover__bottom, .dragover__top").forEach((item: HTMLElement) => { - item.classList.remove("dragover__bottom", "dragover__top"); - }); + counter--; + if (counter === 0) { + element.querySelectorAll(".dragover__bottom, .dragover__top").forEach((item: HTMLElement) => { + item.classList.remove("dragover__bottom", "dragover__top"); + }); + } + }); + element.addEventListener("dragenter", (event) => { + event.preventDefault(); + counter++; }); element.addEventListener("dragend", () => { if (window.siyuan.dragElement) { diff --git a/app/src/protyle/render/av/openMenuPanel.ts b/app/src/protyle/render/av/openMenuPanel.ts index 3f89603c0..9ea920e55 100644 --- a/app/src/protyle/render/av/openMenuPanel.ts +++ b/app/src/protyle/render/av/openMenuPanel.ts @@ -1,10 +1,9 @@ import {transaction} from "../../wysiwyg/transaction"; import {fetchPost} from "../../../util/fetch"; -import {addCol} from "./col"; -import {bindEditEvent, duplicateCol, getColIconByType, getEditHTML} from "./col"; +import {addCol, bindEditEvent, duplicateCol, getColIconByType, getEditHTML} from "./col"; import {setPosition} from "../../../util/setPosition"; import {hasClosestByAttribute, hasClosestByClassName} from "../../util/hasClosest"; -import {bindSelectEvent, getSelectHTML, addColOptionOrCell, setColOption, removeCellOption} from "./select"; +import {addColOptionOrCell, bindSelectEvent, getSelectHTML, removeCellOption, setColOption} from "./select"; import {addFilter, getFiltersHTML, setFilter} from "./filter"; import {addSort, bindSortsEvent, getSortsHTML} from "./sort"; import {bindDateEvent, getDateHTML} from "./date"; @@ -457,7 +456,9 @@ export const openMenuPanel = (options: { event.preventDefault(); if (dragoverElement && targetElement.isSameNode(dragoverElement)) { const nodeRect = targetElement.getBoundingClientRect(); - targetElement.classList.remove("dragover__bottom", "dragover__top"); + avPanelElement.querySelectorAll(".dragover__bottom, .dragover__top").forEach((item: HTMLElement) => { + item.classList.remove("dragover__bottom", "dragover__top"); + }); if (event.clientY > nodeRect.top + nodeRect.height / 2) { targetElement.classList.add("dragover__bottom"); } else { @@ -467,10 +468,18 @@ export const openMenuPanel = (options: { } dragoverElement = targetElement; }); + let counter = 0 avPanelElement.addEventListener("dragleave", () => { - avPanelElement.querySelectorAll(".dragover__bottom, .dragover__top").forEach((item: HTMLElement) => { - item.classList.remove("dragover__bottom", "dragover__top"); - }); + counter--; + if (counter === 0) { + avPanelElement.querySelectorAll(".dragover__bottom, .dragover__top").forEach((item: HTMLElement) => { + item.classList.remove("dragover__bottom", "dragover__top"); + }); + } + }); + avPanelElement.addEventListener("dragenter", (event) => { + event.preventDefault(); + counter++; }); avPanelElement.addEventListener("dragend", () => { if (window.siyuan.dragElement) { diff --git a/app/src/protyle/util/editorCommonEvent.ts b/app/src/protyle/util/editorCommonEvent.ts index 5da609b80..64f0344db 100644 --- a/app/src/protyle/util/editorCommonEvent.ts +++ b/app/src/protyle/util/editorCommonEvent.ts @@ -4,7 +4,8 @@ import { hasClosestByAttribute, hasClosestByClassName, hasClosestByTag, - hasTopClosestByAttribute, isInEmbedBlock + hasTopClosestByAttribute, + isInEmbedBlock } from "./hasClosest"; import {Constants} from "../../constants"; import {paste} from "./paste"; @@ -1371,15 +1372,23 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => { dragoverElement = targetElement; } }); - editorElement.addEventListener("dragleave", (event) => { + let counter = 0 + editorElement.addEventListener("dragleave", (event: DragEvent & { target: HTMLElement }) => { if (protyle.disabled) { event.preventDefault(); event.stopPropagation(); return; } - editorElement.querySelectorAll(".dragover__left, .dragover__right, .dragover__bottom, .dragover__top, .dragover").forEach((item: HTMLElement) => { - item.classList.remove("dragover__top", "dragover__bottom", "dragover__left", "dragover__right", "dragover"); - }); + counter--; + if (counter === 0) { + editorElement.querySelectorAll(".dragover__left, .dragover__right, .dragover__bottom, .dragover__top, .dragover").forEach((item: HTMLElement) => { + item.classList.remove("dragover__top", "dragover__bottom", "dragover__left", "dragover__right", "dragover"); + }); + } + }); + editorElement.addEventListener("dragenter", (event) => { + event.preventDefault(); + counter++; }); };