Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2025-12-23 10:00:13 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

🎨 fix https://github.com/siyuan-note/siyuan/issues/7187

Browse source
This commit is contained in:
Vanessa 2023-01-28 16:19:27 +08:00
parent 83afeb5a8b
commit 60a76346e3
2 changed files with 42 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

8
app/src/assets/scss/_layout.scss
View file

@ -106,6 +106,10 @@
} }
} }
&-bars--drag > .layout-tab-bar {
background-color: var(--b3-theme-primary-lightest);
}
&-bar { &-bar {
list-style: none; list-style: none;
align-items: center; align-items: center;
@ -117,10 +121,6 @@
display: none; display: none;
} }
&--drag {
background-color: var(--b3-theme-primary-lightest);
}
&--readonly { &--readonly {
flex-shrink: 0; flex-shrink: 0;
min-width: 71px; min-width: 71px;

75
app/src/layout/Wnd.ts
View file

@ -63,6 +63,10 @@ export class Wnd {
<div class="layout-tab-container fn__flex-1">${dragHTML}</div> <div class="layout-tab-container fn__flex-1">${dragHTML}</div>
</div>`; </div>`;
this.headersElement = this.element.querySelector(".layout-tab-bar"); this.headersElement = this.element.querySelector(".layout-tab-bar");
const dragElement = this.element.querySelector(".layout-tab-container__drag") as HTMLElement;
if (!dragElement) {
return;
}
this.headersElement.addEventListener("mousedown", (event) => { this.headersElement.addEventListener("mousedown", (event) => {
// 点击鼠标滚轮关闭 // 点击鼠标滚轮关闭
if (event.button !== 1) { if (event.button !== 1) {
@ -84,6 +88,7 @@ export class Wnd {
this.headersElement.addEventListener("mousewheel", (event: WheelEvent) => { this.headersElement.addEventListener("mousewheel", (event: WheelEvent) => {
this.headersElement.scrollLeft = this.headersElement.scrollLeft + event.deltaY; this.headersElement.scrollLeft = this.headersElement.scrollLeft + event.deltaY;
}, {passive: true}); }, {passive: true});
this.headersElement.parentElement.addEventListener("click", (event) => { this.headersElement.parentElement.addEventListener("click", (event) => {
let target = event.target as HTMLElement; let target = event.target as HTMLElement;
while (target && !target.isEqualNode(this.headersElement)) { while (target && !target.isEqualNode(this.headersElement)) {
@ -122,28 +127,11 @@ export class Wnd {
target = target.parentElement; target = target.parentElement;
} }
}); });
const dragElement = this.element.querySelector(".layout-tab-container__drag") as HTMLElement; this.headersElement.parentElement.addEventListener("dragover", function (event: DragEvent & { target: HTMLElement }) {
if (!dragElement) {
return;
}
this.element.addEventListener("dragenter", (event: DragEvent & { target: HTMLElement }) => {
if (event.dataTransfer.types.includes(Constants.SIYUAN_DROP_TAB)) {
const tabHeadersElement = hasClosestByClassName(event.target, "layout-tab-bar");
if (tabHeadersElement) {
return;
}
const tabPanelsElement = hasClosestByClassName(event.target, "layout-tab-container", true);
if (tabPanelsElement) {
dragElement.classList.remove("fn__none");
dragElement.setAttribute("style", "height:100%;width:100%;right:auto;bottom:auto");
}
}
});
this.headersElement.addEventListener("dragover", function (event: DragEvent & { target: HTMLElement }) {
const it = this as HTMLElement; const it = this as HTMLElement;
if (event.dataTransfer.types.includes(Constants.SIYUAN_DROP_FILE)) { if (event.dataTransfer.types.includes(Constants.SIYUAN_DROP_FILE)) {
event.preventDefault(); event.preventDefault();
it.style.opacity = ".1"; it.classList.add("layout-tab-bars--drag");
return; return;
} }
// 不能使用 !window.siyuan.dragElement，因为移动页签到新窗口后，再把主窗口页签拖拽新窗口页签上时，该值为空 // 不能使用 !window.siyuan.dragElement，因为移动页签到新窗口后，再把主窗口页签拖拽新窗口页签上时，该值为空
@ -151,35 +139,35 @@ export class Wnd {
return; return;
} }
event.preventDefault(); event.preventDefault();
const newTabHeaderElement = hasClosestByTag(event.target, "LI");
let oldTabHeaderElement = window.siyuan.dragElement; let oldTabHeaderElement = window.siyuan.dragElement;
let exitDrag = false; let exitDrag = false;
Array.from(it.childNodes).find((item: HTMLElement) => { Array.from(it.firstElementChild.childNodes).find((item: HTMLElement) => {
if (item.style.opacity === "0.1") { if (item.style.opacity === "0.1") {
oldTabHeaderElement = item; oldTabHeaderElement = item;
exitDrag = true; exitDrag = true;
return true; return true;
} }
}); });
if (!newTabHeaderElement && oldTabHeaderElement && !oldTabHeaderElement.classList.contains("item--pin")) {
it.classList.add("layout-tab-bar--drag");
}
if (!exitDrag && oldTabHeaderElement) { if (!exitDrag && oldTabHeaderElement) {
if (oldTabHeaderElement.classList.contains("item--pin")) { if (oldTabHeaderElement.classList.contains("item--pin")) {
return; return;
} }
oldTabHeaderElement = oldTabHeaderElement.cloneNode(true) as HTMLElement; oldTabHeaderElement = oldTabHeaderElement.cloneNode(true) as HTMLElement;
oldTabHeaderElement.setAttribute("data-clone", "true"); oldTabHeaderElement.setAttribute("data-clone", "true");
it.append(oldTabHeaderElement); it.firstElementChild.append(oldTabHeaderElement);
return; return;
} else if (!exitDrag && !oldTabHeaderElement) { // 拖拽到新窗口 } else if (!exitDrag && !oldTabHeaderElement) { // 拖拽到新窗口
oldTabHeaderElement = document.createElement("li"); oldTabHeaderElement = document.createElement("li");
oldTabHeaderElement.style.opacity = "0.1"; oldTabHeaderElement.style.opacity = "0.1";
oldTabHeaderElement.innerHTML = '<svg class="svg"><use xlink:href="#iconFile"></use></svg>'; oldTabHeaderElement.innerHTML = '<svg class="svg"><use xlink:href="#iconFile"></use></svg>';
oldTabHeaderElement.setAttribute("data-clone", "true"); oldTabHeaderElement.setAttribute("data-clone", "true");
it.append(oldTabHeaderElement); it.firstElementChild.append(oldTabHeaderElement);
} }
const newTabHeaderElement = hasClosestByAttribute(event.target, "data-type", "tab-header");
if (!newTabHeaderElement) { if (!newTabHeaderElement) {
if (!oldTabHeaderElement.classList.contains("item--pin")) {
it.classList.add("layout-tab-bars--drag");
}
return; return;
} }
if (!newTabHeaderElement.isSameNode(oldTabHeaderElement) && if (!newTabHeaderElement.isSameNode(oldTabHeaderElement) &&
@ -194,7 +182,7 @@ export class Wnd {
} }
}); });
let dragleaveTimeout: number; let dragleaveTimeout: number;
this.headersElement.addEventListener("dragleave", function () { this.headersElement.parentElement.addEventListener("dragleave", function () {
clearTimeout(dragleaveTimeout); clearTimeout(dragleaveTimeout);
// 窗口拖拽到新窗口时，不 drop 无法移除 clone 的元素 // 窗口拖拽到新窗口时，不 drop 无法移除 clone 的元素
dragleaveTimeout = window.setTimeout(() => { dragleaveTimeout = window.setTimeout(() => {
@ -203,14 +191,13 @@ export class Wnd {
}); });
}, 1000); }, 1000);
const it = this as HTMLElement; const it = this as HTMLElement;
it.classList.remove("layout-tab-bar--drag"); it.classList.remove("layout-tab-bars--drag");
it.style.opacity = "";
}); });
this.headersElement.addEventListener("drop", function (event: DragEvent & { target: HTMLElement }) { this.headersElement.parentElement.addEventListener("drop", function (event: DragEvent & { target: HTMLElement }) {
const it = this as HTMLElement; const it = this as HTMLElement;
if (event.dataTransfer.types.includes(Constants.SIYUAN_DROP_FILE)) { if (event.dataTransfer.types.includes(Constants.SIYUAN_DROP_FILE)) {
// 文档树拖拽 // 文档树拖拽
setPanelFocus(it.parentElement.parentElement); setPanelFocus(it.parentElement);
event.dataTransfer.getData(Constants.SIYUAN_DROP_FILE).split(",").forEach(item => { event.dataTransfer.getData(Constants.SIYUAN_DROP_FILE).split(",").forEach(item => {
if (item) { if (item) {
openFileById({ openFileById({
@ -220,14 +207,14 @@ export class Wnd {
} }
}); });
window.siyuan.dragElement = undefined; window.siyuan.dragElement = undefined;
it.style.opacity = ""; it.classList.remove("layout-tab-bars--drag");
return; return;
} }
const tabId = event.dataTransfer.getData(Constants.SIYUAN_DROP_TAB); const tabId = event.dataTransfer.getData(Constants.SIYUAN_DROP_TAB);
let oldTab = getInstanceById(tabId) as Tab; let oldTab = getInstanceById(tabId) as Tab;
const wnd = getInstanceById(it.parentElement.getAttribute("data-id")) as Wnd;
/// #if !BROWSER /// #if !BROWSER
if (!oldTab) { // 从主窗口拖拽到页签新窗口 if (!oldTab) { // 从主窗口拖拽到页签新窗口
const wnd = getInstanceById(this.parentElement.parentElement.getAttribute("data-id"));
if (wnd instanceof Wnd) { if (wnd instanceof Wnd) {
JSONToCenter(JSON.parse(event.dataTransfer.getData(Constants.SIYUAN_DROP_TABTOWINDOW)), wnd); JSONToCenter(JSON.parse(event.dataTransfer.getData(Constants.SIYUAN_DROP_TABTOWINDOW)), wnd);
oldTab = wnd.children[wnd.children.length - 1]; oldTab = wnd.children[wnd.children.length - 1];
@ -237,12 +224,12 @@ export class Wnd {
} }
} }
/// #endif /// #endif
it.classList.remove("layout-tab-bars--drag");
if (!oldTab) { if (!oldTab) {
return; return;
} }
it.classList.remove("layout-tab-bar--drag");
const nextTabHeaderElement = (Array.from(it.childNodes).find((item: HTMLElement) => { const nextTabHeaderElement = (Array.from(it.firstElementChild.childNodes).find((item: HTMLElement) => {
if (item.style.opacity === "0.1") { if (item.style.opacity === "0.1") {
return true; return true;
} }
@ -264,8 +251,7 @@ export class Wnd {
} }
} }
// 对象顺序 // 对象顺序
const newWnd = getInstanceById(it.parentElement.parentElement.getAttribute("data-id")) as Wnd; wnd.moveTab(oldTab, nextTabHeaderElement ? nextTabHeaderElement.getAttribute("data-id") : undefined);
newWnd.moveTab(oldTab, nextTabHeaderElement ? nextTabHeaderElement.getAttribute("data-id") : undefined);
resizeTabs(); resizeTabs();
return; return;
} }
@ -288,6 +274,21 @@ export class Wnd {
oldTab.parent.children.push(tempTab); oldTab.parent.children.push(tempTab);
} }
}); });
this.element.addEventListener("dragenter", (event: DragEvent & { target: HTMLElement }) => {
if (event.dataTransfer.types.includes(Constants.SIYUAN_DROP_TAB)) {
const tabHeadersElement = hasClosestByClassName(event.target, "layout-tab-bar");
if (tabHeadersElement) {
return;
}
const tabPanelsElement = hasClosestByClassName(event.target, "layout-tab-container", true);
if (tabPanelsElement) {
dragElement.classList.remove("fn__none");
dragElement.setAttribute("style", "height:100%;width:100%;right:auto;bottom:auto");
}
}
});
dragElement.addEventListener("dragover", (event: DragEvent & { layerX: number, layerY: number }) => { dragElement.addEventListener("dragover", (event: DragEvent & { layerX: number, layerY: number }) => {
event.preventDefault(); event.preventDefault();
if (!dragElement.nextElementSibling) { if (!dragElement.nextElementSibling) {