This commit is contained in:
parent
c9b9761730
commit
112fa750c7
2 changed files with 63 additions and 38 deletions
|
@ -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 = "" : "";
|
||||
|
|
|
@ -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 = "<svg></svg>"
|
||||
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");
|
||||
|
|
Loading…
Add table
Reference in a new issue