Vanessa 2022-11-23 22:05:29 +08:00
parent fdd9973d24
commit ad3aaab34a
5 changed files with 575 additions and 146 deletions

View file

@ -20,7 +20,8 @@ import {insertHTML} from "./insertHTML";
import {isBrowser} from "../../util/functions";
import {hideElements} from "../ui/hideElements";
const moveTo = async (protyle: IProtyle, sourceElements: Element[], targetElement: Element, isSameDoc: boolean, position: InsertPosition) => {
const moveTo = async (protyle: IProtyle, sourceElements: Element[], targetElement: Element,
isSameDoc: boolean, position: InsertPosition, isCopy: boolean) => {
let topSourceElement;
const doOperations: IOperation[] = [];
const undoOperations: IOperation[] = [];
@ -43,28 +44,57 @@ const moveTo = async (protyle: IProtyle, sourceElements: Element[], targetElemen
item.removeAttribute("fold");
foldHeadingIds.push({id, parentID});
}
undoOperations.push({
action: "move",
id,
previousID: item.previousElementSibling?.getAttribute("data-node-id"),
parentID,
});
if (!isSameDoc) {
let copyId
let copyElement
if (isCopy) {
copyId = Lute.NewNodeID();
undoOperations.push({
action: "delete",
id: copyId,
});
} else {
undoOperations.push({
action: "move",
id,
previousID: item.previousElementSibling?.getAttribute("data-node-id"),
parentID,
});
}
if (!isSameDoc && !isCopy) {
// 打开两个相同的文档
const sameElement = protyle.wysiwyg.element.querySelector(`[data-node-id="${id}"]`);
if (sameElement) {
sameElement.remove();
}
}
tempTargetElement.insertAdjacentElement(position, item);
doOperations.push({
action: "move",
id,
previousID: position === "afterend" ? targetId : item.previousElementSibling?.getAttribute("data-node-id"), // 不能使用常量,移动后会被修改
parentID: item.parentElement?.getAttribute("data-node-id") || protyle.block.parentID || protyle.block.rootID,
});
if (isCopy) {
copyElement = item.cloneNode(true) as HTMLElement;
copyElement.setAttribute("data-node-id", copyId);
copyElement.querySelectorAll("[data-node-id]").forEach((e) => {
const newId = Lute.NewNodeID();
e.setAttribute("data-node-id", newId);
e.setAttribute("updated", newId.split("-")[0]);
});
tempTargetElement.insertAdjacentElement(position, copyElement);
doOperations.push({
action: "insert",
id: copyId,
data: copyElement.outerHTML,
previousID: position === "afterend" ? targetId : item.previousElementSibling?.getAttribute("data-node-id"), // 不能使用常量,移动后会被修改
parentID: item.parentElement?.getAttribute("data-node-id") || protyle.block.parentID || protyle.block.rootID,
});
} else {
tempTargetElement.insertAdjacentElement(position, item);
doOperations.push({
action: "move",
id,
previousID: position === "afterend" ? targetId : item.previousElementSibling?.getAttribute("data-node-id"), // 不能使用常量,移动后会被修改
parentID: item.parentElement?.getAttribute("data-node-id") || protyle.block.parentID || protyle.block.rootID,
});
}
if (position !== "afterend") {
tempTargetElement = item;
tempTargetElement = isCopy ? copyElement : item;
}
});
undoOperations.reverse();
@ -353,7 +383,7 @@ const dragSb = async (protyle: IProtyle, sourceElements: Element[], targetElemen
focusBlock(sourceElements[0]);
};
const dragSame = async (protyle: IProtyle, sourceElements: Element[], targetElement: Element, isBottom: boolean) => {
const dragSame = async (protyle: IProtyle, sourceElements: Element[], targetElement: Element, isBottom: boolean, isCopy: boolean) => {
const isSameDoc = protyle.element.contains(sourceElements[0]);
const doOperations: IOperation[] = [];
const undoOperations: IOperation[] = [];
@ -425,7 +455,7 @@ const dragSame = async (protyle: IProtyle, sourceElements: Element[], targetElem
id: newSourceElement.getAttribute("data-node-id"),
});
} else {
const moveToResult = await moveTo(protyle, sourceElements, targetElement, isSameDoc, "afterend");
const moveToResult = await moveTo(protyle, sourceElements, targetElement, isSameDoc, "afterend", isCopy);
doOperations.push(...moveToResult.doOperations);
undoOperations.push(...moveToResult.undoOperations);
topSourceElement = moveToResult.topSourceElement;
@ -485,7 +515,7 @@ const dragSame = async (protyle: IProtyle, sourceElements: Element[], targetElem
id: newSourceElement.getAttribute("data-node-id"),
});
} else {
const moveToResult = await moveTo(protyle, sourceElements, targetElement, isSameDoc, "beforebegin");
const moveToResult = await moveTo(protyle, sourceElements, targetElement, isSameDoc, "beforebegin", isCopy);
doOperations.push(...moveToResult.doOperations);
undoOperations.push(...moveToResult.undoOperations);
topSourceElement = moveToResult.topSourceElement;
@ -515,7 +545,8 @@ const dragSame = async (protyle: IProtyle, sourceElements: Element[], targetElem
});
});
}
if (oldSourceParentElement && oldSourceParentElement.classList.contains("list") &&
if (!isCopy &&
oldSourceParentElement && oldSourceParentElement.classList.contains("list") &&
oldSourceParentElement.getAttribute("data-subtype") === "o" &&
!oldSourceParentElement.isSameNode(sourceElements[0].parentElement) && oldSourceParentElement.childElementCount > 1) {
Array.from(oldSourceParentElement.children).forEach((item) => {
@ -550,7 +581,7 @@ const dragSame = async (protyle: IProtyle, sourceElements: Element[], targetElem
}
// 删除空元素
if (topSourceElement) {
if (!isCopy && topSourceElement) {
doOperations.push({
action: "delete",
id: topSourceElement.getAttribute("data-node-id"),
@ -572,12 +603,12 @@ const dragSame = async (protyle: IProtyle, sourceElements: Element[], targetElem
}
}
}
if (oldSourceParentElement && oldSourceParentElement.classList.contains("sb") && oldSourceParentElement.childElementCount === 2) {
if (!isCopy && oldSourceParentElement && oldSourceParentElement.classList.contains("sb") && oldSourceParentElement.childElementCount === 2) {
// 拖拽后sb 只剩下一个元素
const sbData = cancelSB(protyle, oldSourceParentElement);
doOperations.push(sbData.doOperations[0], sbData.doOperations[1]);
undoOperations.splice(0, 0, sbData.undoOperations[0], sbData.undoOperations[1]);
} else if (oldSourceParentElement && oldSourceParentElement.classList.contains("protyle-wysiwyg") && oldSourceParentElement.childElementCount === 0) {
} else if (!isCopy && oldSourceParentElement && oldSourceParentElement.classList.contains("protyle-wysiwyg") && oldSourceParentElement.childElementCount === 0) {
/// #if !MOBILE
// 拖拽后,根文档原内容为空,且不为悬浮窗
const protyleElement = hasClosestByClassName(oldSourceParentElement, "protyle", true);
@ -599,7 +630,7 @@ const dragSame = async (protyle: IProtyle, sourceElements: Element[], targetElem
}
/// #endif
}
if (isSameDoc) {
if (isSameDoc || isCopy) {
transaction(protyle, doOperations, undoOperations);
} else {
// 跨文档不支持撤销
@ -686,7 +717,7 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => {
if (targetElement.parentElement.getAttribute("data-type") === "NodeSuperBlock" &&
targetElement.parentElement.getAttribute("data-sb-layout") === "col") {
if (targetClass.includes("dragover__left") || targetClass.includes("dragover__right")) {
dragSame(protyle, sourceElements, targetElement, targetClass.includes("dragover__right"));
dragSame(protyle, sourceElements, targetElement, targetClass.includes("dragover__right"), event.ctrlKey);
} else {
dragSb(protyle, sourceElements, targetElement, targetClass.includes("dragover__bottom"), "row");
}
@ -694,7 +725,7 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => {
if (targetClass.includes("dragover__left") || targetClass.includes("dragover__right")) {
dragSb(protyle, sourceElements, targetElement, targetClass.includes("dragover__right"), "col");
} else {
dragSame(protyle, sourceElements, targetElement, targetClass.includes("dragover__bottom"));
dragSame(protyle, sourceElements, targetElement, targetClass.includes("dragover__bottom"), event.ctrlKey);
}
}
}