diff --git a/app/src/layout/dock/Files.ts b/app/src/layout/dock/Files.ts index effa0ac91..0f5befa42 100644 --- a/app/src/layout/dock/Files.ts +++ b/app/src/layout/dock/Files.ts @@ -273,8 +273,6 @@ export class Files extends Model { setPanelFocus(this.element.parentElement); } }); - // b3-list-item--focus 样式会遮挡拖拽排序的上下线条 - let focusElement: HTMLElement; this.element.addEventListener("dragstart", (event: DragEvent & { target: HTMLElement }) => { if (isTouchDevice()) { event.stopPropagation(); @@ -282,31 +280,31 @@ export class Files extends Model { return; } window.getSelection().removeAllRanges(); - focusElement = this.element.querySelector(".b3-list-item--focus"); - if (focusElement) { - focusElement.classList.remove("b3-list-item--focus"); - } const liElement = hasClosestByTag(event.target, "LI"); if (liElement) { - const ulElement = hasTopClosestByTag(liElement, "UL"); - event.dataTransfer.setData("text/html", liElement.outerHTML); - if (ulElement) { - event.dataTransfer.setData(Constants.SIYUAN_DROP_FILE, ulElement.getAttribute("data-url")); + let selectElements: Element[] = Array.from(this.element.querySelectorAll(".b3-list-item--focus")) + if (!liElement.classList.contains("b3-list-item--focus")) { + selectElements.forEach((item) => { + item.classList.remove("b3-list-item--focus"); + }) + liElement.classList.add("b3-list-item--focus"); + selectElements = [liElement]; } + selectElements.forEach((item: HTMLElement) => { + item.style.opacity = "0.1"; + }) + const img = new Image(); + // TODO: drag preview + img.src = `data:image/png;base64,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`; + event.dataTransfer.setDragImage(img, 10, 10); + event.dataTransfer.setData(Constants.SIYUAN_DROP_FILE, Constants.SIYUAN_DROP_FILE); event.dataTransfer.dropEffect = "move"; - liElement.style.opacity = "0.1"; - window.siyuan.dragElement = liElement; } }); this.element.addEventListener("dragend", (event: DragEvent & { target: HTMLElement }) => { - const liElement = hasClosestByTag(event.target, "LI"); - if (liElement) { - liElement.style.opacity = "1"; - } - if (focusElement) { - focusElement.classList.add("b3-list-item--focus"); - focusElement = undefined; - } + this.element.querySelectorAll(".b3-list-item--focus").forEach((item: HTMLElement) => { + item.style.opacity = "" + }) window.siyuan.dragElement = undefined; }); this.element.addEventListener("dragover", (event: DragEvent & { target: HTMLElement }) => { @@ -314,29 +312,34 @@ export class Files extends Model { return; } const liElement = hasClosestByTag(event.target, "LI"); - if (!liElement || !window.siyuan.dragElement || liElement.isSameNode(window.siyuan.dragElement)) { + if (!liElement || liElement.classList.contains("b3-list-item--focus")) { event.preventDefault(); return; } liElement.classList.remove("dragover__top", "dragover__bottom", "dragover"); - const sourceType = window.siyuan.dragElement.getAttribute("data-type"); - if (window.siyuan.dragElement.parentElement?.classList.contains("protyle-gutters")) { - if (["NodeListItem", "NodeHeading"].includes(sourceType)) { - // 编辑器情景菜单拖拽 + if (window.siyuan.dragElement?.parentElement?.classList.contains("protyle-gutters")) { + if (["NodeListItem", "NodeHeading"].includes(window.siyuan.dragElement.getAttribute("data-type"))) { + // 块标拖拽 liElement.classList.add("dragover"); } event.preventDefault(); return; } - + let sourceOnlyRoot = true + Array.from(this.element.querySelectorAll(".b3-list-item--focus")).find((item: HTMLElement) => { + if (item.getAttribute("data-type") === "navigation-file") { + sourceOnlyRoot = false + return true; + } + }) const targetType = liElement.getAttribute("data-type"); - if (sourceType === "navigation-root" && targetType !== "navigation-root") { + if (sourceOnlyRoot && targetType !== "navigation-root") { event.preventDefault(); return; } if (window.siyuan.config.fileTree.sort === 6 && // 防止文档拖拽到笔记本外 - !(sourceType === "navigation-file" && targetType === "navigation-root")) { + !(!sourceOnlyRoot && targetType === "navigation-root")) { const nodeRect = liElement.getBoundingClientRect(); if (event.clientY > nodeRect.top + 20) { liElement.classList.add("dragover__bottom"); @@ -347,7 +350,7 @@ export class Files extends Model { } } if (liElement.classList.contains("dragover__top") || liElement.classList.contains("dragover__bottom") || - (targetType === "navigation-root" && sourceType === "navigation-root")) { + (targetType === "navigation-root" && sourceOnlyRoot)) { event.preventDefault(); return; } @@ -371,10 +374,10 @@ export class Files extends Model { } const toURL = newUlElement.getAttribute("data-url"); const toPath = newElement.getAttribute("data-path"); - const fromType = window.siyuan.dragElement.getAttribute("data-type"); - if (newElement.classList.contains("dragover") && ["NodeListItem", "NodeHeading"].includes(fromType)) { - // 编辑器情景菜单拖拽 - if (fromType === "NodeHeading") { + const gutterType = window.siyuan.dragElement?.getAttribute("data-type") + if (newElement.classList.contains("dragover") && ["NodeListItem", "NodeHeading"].includes(gutterType)) { + // 块标拖拽 + if (gutterType === "NodeHeading") { fetchPost("/api/filetree/heading2Doc", { targetNoteBook: toURL, srcHeadingID: window.siyuan.dragElement.getAttribute("data-node-id"), @@ -392,92 +395,95 @@ export class Files extends Model { newElement.classList.remove("dragover", "dragover__bottom", "dragover__top"); return; } - - const fromURL = event.dataTransfer.getData(Constants.SIYUAN_DROP_FILE); - const fromPath = window.siyuan.dragElement.getAttribute("data-path"); - if ((!fromURL || !fromPath || fromPath === toPath) && fromType !== "navigation-root") { + if (!event.dataTransfer.getData(Constants.SIYUAN_DROP_FILE)) { newElement.classList.remove("dragover", "dragover__bottom", "dragover__top"); return; } + let sourceOnlyRoot = true + const fromPaths: string[] = [] + this.element.querySelectorAll(".b3-list-item--focus").forEach((item: HTMLElement) => { + if (item.getAttribute("data-type") === "navigation-file") { + sourceOnlyRoot = false + } + fromPaths.push(item.getAttribute("data-path")) + }) if (newElement.classList.contains("dragover")) { await fetchPost("/api/filetree/moveDoc", { - fromNotebook: fromURL, - toNotebook: toURL, - fromPath, + fromPaths, toPath, }); } - if ((newElement.classList.contains("dragover__bottom") || newElement.classList.contains("dragover__top")) && window.siyuan.config.fileTree.sort === 6) { - if (fromType === "navigation-root") { - if (newElement.classList.contains("dragover__top")) { - newElement.parentElement.before(window.siyuan.dragElement.parentElement); - } else { - newElement.parentElement.after(window.siyuan.dragElement.parentElement); - } - const notebooks: string[] = []; - Array.from(this.element.children).forEach(item => { - notebooks.push(item.getAttribute("data-url")); - }); - fetchPost("/api/notebook/changeSortNotebook", { - notebooks, - }); - } else { - let hasMove = false; - const toDir = pathPosix().dirname(toPath); - if (fromType !== "navigation-root" && (toDir !== pathPosix().dirname(fromPath) || fromURL !== toURL)) { - await fetchPost("/api/filetree/moveDoc", { - fromNotebook: fromURL, - toNotebook: toURL, - fromPath, - toPath: toDir === "/" ? "/" : toDir + ".sy", - }); - window.siyuan.dragElement.setAttribute("data-path", pathPosix().join(toDir, window.siyuan.dragElement.getAttribute("data-node-id") + ".sy")); - hasMove = true; - } - let nextULElement; - if (window.siyuan.dragElement.nextElementSibling && window.siyuan.dragElement.nextElementSibling.tagName === "UL") { - nextULElement = window.siyuan.dragElement.nextElementSibling; - } - if (newElement.classList.contains("dragover__bottom")) { - if (newElement.nextElementSibling && newElement.nextElementSibling.tagName === "UL") { - newElement.nextElementSibling.after(window.siyuan.dragElement); - } else { - newElement.after(window.siyuan.dragElement); - } - } else if (newElement.classList.contains("dragover__top")) { - newElement.before(window.siyuan.dragElement); - } - if (nextULElement) { - window.siyuan.dragElement.after(nextULElement); - } - const paths: string[] = []; - Array.from(newElement.parentElement.children).forEach(item => { - if (item.tagName === "LI") { - paths.push(item.getAttribute("data-path")); - } - }); - fetchPost("/api/filetree/changeSort", { - paths, - notebook: toURL - }, () => { - if (hasMove) { - // 移动并排序后，会推送 moveDoc，但此时还没有 sort。 https://github.com/siyuan-note/siyuan/issues/4270 - fetchPost("/api/filetree/listDocsByPath", { - notebook: toURL, - path: pathPosix().dirname(toPath), - sort: window.siyuan.config.fileTree.sort, - }, response => { - if (response.data.path === "/" && response.data.files.length === 0) { - showMessage(window.siyuan.languages.emptyContent); - return; - } - this.onLsHTML(response.data); - }); - } - }); - } - } - newElement.classList.remove("dragover", "dragover__bottom", "dragover__top"); + // if ((newElement.classList.contains("dragover__bottom") || newElement.classList.contains("dragover__top")) && window.siyuan.config.fileTree.sort === 6) { + // if (fromType === "navigation-root") { + // if (newElement.classList.contains("dragover__top")) { + // newElement.parentElement.before(window.siyuan.dragElement.parentElement); + // } else { + // newElement.parentElement.after(window.siyuan.dragElement.parentElement); + // } + // const notebooks: string[] = []; + // Array.from(this.element.children).forEach(item => { + // notebooks.push(item.getAttribute("data-url")); + // }); + // fetchPost("/api/notebook/changeSortNotebook", { + // notebooks, + // }); + // } else { + // let hasMove = false; + // const toDir = pathPosix().dirname(toPath); + // if (fromType !== "navigation-root" && (toDir !== pathPosix().dirname(fromPath) || fromURL !== toURL)) { + // await fetchPost("/api/filetree/moveDoc", { + // fromNotebook: fromURL, + // toNotebook: toURL, + // fromPath, + // toPath: toDir === "/" ? "/" : toDir + ".sy", + // }); + // window.siyuan.dragElement.setAttribute("data-path", pathPosix().join(toDir, window.siyuan.dragElement.getAttribute("data-node-id") + ".sy")); + // hasMove = true; + // } + // let nextULElement; + // if (window.siyuan.dragElement.nextElementSibling && window.siyuan.dragElement.nextElementSibling.tagName === "UL") { + // nextULElement = window.siyuan.dragElement.nextElementSibling; + // } + // if (newElement.classList.contains("dragover__bottom")) { + // if (newElement.nextElementSibling && newElement.nextElementSibling.tagName === "UL") { + // newElement.nextElementSibling.after(window.siyuan.dragElement); + // } else { + // newElement.after(window.siyuan.dragElement); + // } + // } else if (newElement.classList.contains("dragover__top")) { + // newElement.before(window.siyuan.dragElement); + // } + // if (nextULElement) { + // window.siyuan.dragElement.after(nextULElement); + // } + // const paths: string[] = []; + // Array.from(newElement.parentElement.children).forEach(item => { + // if (item.tagName === "LI") { + // paths.push(item.getAttribute("data-path")); + // } + // }); + // fetchPost("/api/filetree/changeSort", { + // paths, + // notebook: toURL + // }, () => { + // if (hasMove) { + // // 移动并排序后，会推送 moveDoc，但此时还没有 sort。 https://github.com/siyuan-note/siyuan/issues/4270 + // fetchPost("/api/filetree/listDocsByPath", { + // notebook: toURL, + // path: pathPosix().dirname(toPath), + // sort: window.siyuan.config.fileTree.sort, + // }, response => { + // if (response.data.path === "/" && response.data.files.length === 0) { + // showMessage(window.siyuan.languages.emptyContent); + // return; + // } + // this.onLsHTML(response.data); + // }); + // } + // }); + // } + // } + // newElement.classList.remove("dragover", "dragover__bottom", "dragover__top"); }); this.init(); setPanelFocus(this.element.parentElement); diff --git a/app/src/mobile/util/MobileFiles.ts b/app/src/mobile/util/MobileFiles.ts index d31351350..a9bef6afc 100644 --- a/app/src/mobile/util/MobileFiles.ts +++ b/app/src/mobile/util/MobileFiles.ts @@ -713,8 +713,7 @@ export class MobileFiles extends Model { if (item.count && item.count > 0) { countHTML = `${item.count}`; } - return `