From 112fa750c726312c090523872873d9431faca3cb Mon Sep 17 00:00:00 2001 From: Vanessa Date: Mon, 3 Jun 2024 23:23:38 +0800 Subject: [PATCH] :art: fix https://github.com/siyuan-note/siyuan/issues/10247 --- app/src/boot/globalEvent/click.ts | 21 +------- app/src/layout/dock/index.ts | 80 ++++++++++++++++++++++++------- 2 files changed, 63 insertions(+), 38 deletions(-) diff --git a/app/src/boot/globalEvent/click.ts b/app/src/boot/globalEvent/click.ts index 061296f8b..46d2cd455 100644 --- a/app/src/boot/globalEvent/click.ts +++ b/app/src/boot/globalEvent/click.ts @@ -17,26 +17,7 @@ export const globalClick = (event: MouseEvent & { target: HTMLElement }) => { item.style.opacity = ""; item.classList.add("b3-tooltips"); }); - const original = JSON.parse(ghostElement.getAttribute("data-original")); - let dock - if (original.position === "Left") { - dock = window.siyuan.layout.leftDock; - } else if (original.position === "Right") { - dock = window.siyuan.layout.rightDock; - } else if (original.position === "Bottom") { - dock = window.siyuan.layout.bottomDock; - } - const previousElement = dock.element.querySelector(`.dock__item[data-type="${original.previousType}"]`) - const dockElement = dock.element.querySelector(`.dock__item[data-type="${original.type}"]`) - if (previousElement) { - previousElement.after(dockElement) - } else { - if (original.index === "0") { - dock.element.firstElementChild.prepend(dockElement) - } else { - dock.element.lastElementChild.previousElementSibling.prepend(dockElement) - } - } + document.querySelector("#dockMoveItem")?.remove(); } else { const startElement = ghostElement.parentElement.querySelector(`[data-node-id="${ghostElement.getAttribute("data-node-id")}"]`) as HTMLElement; startElement ? startElement.style.opacity = "" : ""; diff --git a/app/src/layout/dock/index.ts b/app/src/layout/dock/index.ts index 35b04d44b..9df2b6af1 100644 --- a/app/src/layout/dock/index.ts +++ b/app/src/layout/dock/index.ts @@ -143,12 +143,16 @@ export class Dock { documentSelf.ondragstart = () => false; let ghostElement: HTMLElement; let selectItem: HTMLElement; + const moveItem = document.createElement("span"); + moveItem.classList.add("dock__item", "fn__none"); + moveItem.style.background = "var(--b3-theme-primary-light)"; + moveItem.innerHTML = "" + moveItem.id = "dockMoveItem" documentSelf.onmousemove = (moveEvent: MouseEvent) => { if (window.siyuan.config.readonly || Math.abs(moveEvent.clientY - event.clientY) < 3 && Math.abs(moveEvent.clientX - event.clientX) < 3) { return; } - console.log(moveEvent.clientY - event.clientY) moveEvent.preventDefault(); moveEvent.stopPropagation(); if (!ghostElement) { @@ -181,29 +185,66 @@ export class Dock { const targetItem = hasClosestByClassName(moveEvent.target as HTMLElement, "dock__item") || hasClosestByClassName(moveEvent.target as HTMLElement, "dock__items") as HTMLElement; if (targetItem && selectItem && targetItem.isSameNode(selectItem)) { - if (selectItem.classList.contains("dock__item")) { + if (selectItem.classList.contains("dock__item--pin")) { + if (item.nextElementSibling?.isSameNode(selectItem)) { + moveItem.classList.add("fn__none") + } else { + moveItem.classList.remove("fn__none") + selectItem.before(moveItem); + } + } else if (selectItem.classList.contains("dock__item")) { const selectRect = selectItem.getBoundingClientRect(); if (selectItem.parentElement.parentElement.id === "dockBottom") { if (selectRect.left + selectRect.width / 2 > moveEvent.clientX) { - selectItem.before(item); + if (item.nextElementSibling?.isSameNode(selectItem)) { + moveItem.classList.add("fn__none") + } else { + moveItem.classList.remove("fn__none") + selectItem.before(moveItem); + } } else { - selectItem.after(item); + if (item.previousElementSibling?.isSameNode(selectItem)) { + moveItem.classList.add("fn__none") + } else { + moveItem.classList.remove("fn__none") + selectItem.after(moveItem); + } } } else { if (selectRect.top + selectRect.height / 2 > moveEvent.clientY) { - selectItem.before(item); + if (item.nextElementSibling?.isSameNode(selectItem)) { + moveItem.classList.add("fn__none") + } else { + moveItem.classList.remove("fn__none") + selectItem.before(moveItem); + } } else { - selectItem.after(item); + if (item.previousElementSibling?.isSameNode(selectItem)) { + moveItem.classList.add("fn__none") + } else { + moveItem.classList.remove("fn__none") + selectItem.after(moveItem); + } } } } else if (selectItem.childElementCount === 0) { - selectItem.append(item) + moveItem.classList.remove("fn__none") + selectItem.append(moveItem) + } else if (selectItem.childElementCount === 1 && selectItem.firstElementChild.id === "dockMoveItem") { + moveItem.classList.remove("fn__none"); } else if (selectItem.childElementCount === 1 && selectItem.firstElementChild.classList.contains("dock__item--pin")) { - selectItem.insertAdjacentElement("afterbegin", item); + moveItem.classList.remove("fn__none") + selectItem.insertAdjacentElement("afterbegin", moveItem); + } else if (selectItem.childElementCount === 2 && + selectItem.firstElementChild.id === "dockMoveItem" && selectItem.lastElementChild.classList.contains("dock__item--pin")) { + moveItem.classList.remove("fn__none") } return; } - if (!targetItem || targetItem.classList.contains("dock__item--pin") || targetItem.style.position === "fixed" || targetItem.isSameNode(item)) { + if (!targetItem || targetItem.style.position === "fixed" || targetItem.isSameNode(item) || targetItem.id === "dockMoveItem") { + if (targetItem && targetItem.isSameNode(item)) { + moveItem.classList.add("fn__none"); + } return; } selectItem = targetItem; @@ -221,15 +262,18 @@ export class Dock { } item.style.opacity = ""; item.classList.add("b3-tooltips"); - let dock - if (item.parentElement.parentElement.id === "dockBottom") { - dock = window.siyuan.layout.bottomDock; - } else if (item.parentElement.parentElement.id === "dockLeft") { - dock = window.siyuan.layout.leftDock; - } else if (item.parentElement.parentElement.id === "dockRight") { - dock = window.siyuan.layout.rightDock; + if (!moveItem.classList.contains("fn__none")) { + let dock + if (moveItem.parentElement.parentElement.id === "dockBottom") { + dock = window.siyuan.layout.bottomDock; + } else if (moveItem.parentElement.parentElement.id === "dockLeft") { + dock = window.siyuan.layout.leftDock; + } else if (moveItem.parentElement.parentElement.id === "dockRight") { + dock = window.siyuan.layout.rightDock; + } + dock.add(moveItem.parentElement.isSameNode(dock.element.firstElementChild) ? 0 : 1, item, moveItem.previousElementSibling?.getAttribute("data-type")); } - dock.add(item.parentElement.isSameNode(dock.element.firstElementChild) ? 0 : 1, item, item.previousElementSibling?.getAttribute("data-type")); + moveItem.remove(); }; }); @@ -684,7 +728,7 @@ export class Dock { this.showDock(); } - public add(index: number, sourceElement: Element, previousType?:string) { + public add(index: number, sourceElement: Element, previousType?: string) { sourceElement.setAttribute("data-height", ""); sourceElement.setAttribute("data-width", ""); const type = sourceElement.getAttribute("data-type");