From 1412ca6026df4aab3d2a6b7a03ad7c2669a1c17c Mon Sep 17 00:00:00 2001 From: Vanessa Date: Fri, 15 Nov 2024 22:25:41 +0800 Subject: [PATCH] :art: https://github.com/siyuan-note/siyuan/issues/13107 --- app/src/layout/dock/index.ts | 12 ++++--- app/src/layout/util.ts | 61 ++++++++++++++++++++++++++++++++++-- 2 files changed, 66 insertions(+), 7 deletions(-) diff --git a/app/src/layout/dock/index.ts b/app/src/layout/dock/index.ts index 2e72fbd8d..88447508a 100644 --- a/app/src/layout/dock/index.ts +++ b/app/src/layout/dock/index.ts @@ -332,7 +332,7 @@ export class Dock { } else { currentNowSize = (currentSize + (x - moveEvent.clientY)); } - let minSize = 227; + let minSize = 232; Array.from(this.layout.element.querySelectorAll(".file-tree")).find((item) => { if (item.classList.contains("sy__backlink") || item.classList.contains("sy__graph") || item.classList.contains("sy__globalGraph") || item.classList.contains("sy__inbox")) { @@ -817,12 +817,14 @@ export class Dock { activesElement.forEach((item) => { if (this.position === "Left" || this.position === "Right") { if (item.getAttribute("data-index") === "1" && activesElement.length > 1) { - item.setAttribute("data-height", (this.data[item.getAttribute("data-type") as TDock] as Model).parent.parent.element.clientHeight.toString()); + const dockElement = (this.data[item.getAttribute("data-type") as TDock] as Model).parent.parent.element + item.setAttribute("data-height", dockElement.style.height ? dockElement.clientHeight.toString() : ""); } item.setAttribute("data-width", this.layout.element.clientWidth.toString()); } else { if (item.getAttribute("data-index") === "1" && activesElement.length > 1) { - item.setAttribute("data-width", (this.data[item.getAttribute("data-type") as TDock] as Model).parent.parent.element.clientWidth.toString()); + const dockElement = (this.data[item.getAttribute("data-type") as TDock] as Model).parent.parent.element + item.setAttribute("data-width", dockElement.style.width ? dockElement.clientWidth.toString() : ""); } item.setAttribute("data-height", this.layout.element.clientHeight.toString()); } @@ -834,9 +836,9 @@ export class Dock { this.element.querySelectorAll(".dock__item--active").forEach((item) => { let size; if (this.position === "Left" || this.position === "Right") { - size = parseInt(item.getAttribute("data-width")) || (["graph", "globalGraph", "backlink"].includes(item.getAttribute("data-type")) ? 320 : 227); + size = parseInt(item.getAttribute("data-width")) || (["graph", "globalGraph", "backlink"].includes(item.getAttribute("data-type")) ? 320 : 232); } else { - size = parseInt(item.getAttribute("data-height")) || 227; + size = parseInt(item.getAttribute("data-height")) || 232; } if (size > max) { max = size; diff --git a/app/src/layout/util.ts b/app/src/layout/util.ts index e31fd5f54..aeb01ed03 100644 --- a/app/src/layout/util.ts +++ b/app/src/layout/util.ts @@ -495,7 +495,7 @@ export const JSONToLayout = (app: App, isStart: boolean) => { zoomIn: idZoomIn.isZoomIn }); } else { - let latestTabHeaderElement:HTMLElement; + let latestTabHeaderElement: HTMLElement; document.querySelectorAll('li[data-type="tab-header"][data-init-active="true"]').forEach((item: HTMLElement) => { if (!latestTabHeaderElement) { latestTabHeaderElement = item; @@ -779,7 +779,7 @@ export const addResize = (obj: Layout | Wnd) => { } const getMinSize = (element: HTMLElement) => { - let minSize = 227; + let minSize = 232; Array.from(element.querySelectorAll(".file-tree")).find((item) => { if (item.classList.contains("sy__backlink") || item.classList.contains("sy__graph") || item.classList.contains("sy__globalGraph") || item.classList.contains("sy__inbox")) { @@ -791,6 +791,7 @@ export const addResize = (obj: Layout | Wnd) => { }); return minSize; }; + const resizeWnd = (resizeElement: HTMLElement, direction: string) => { const setSize = (item: HTMLElement, direction: string) => { if (item.classList.contains("fn__flex-1")) { @@ -901,6 +902,62 @@ export const addResize = (obj: Layout | Wnd) => { resizeElement.classList.add("layout__resize"); obj.element.insertAdjacentElement("beforebegin", resizeElement); resizeWnd(resizeElement, obj.resize); + + resizeElement.addEventListener("dblclick", () => { + const previousElement = resizeElement.previousElementSibling as HTMLElement; + const nextElement = resizeElement.nextElementSibling as HTMLElement; + if (previousElement && nextElement) { + const bigType = ["graph", "inbox", "globalGraph", "backlink"] + let size = 232 + nextElement.style.transition = "none"; + previousElement.style.transition = "none"; + if (resizeElement.classList.contains("layout__resize--lr")) { + if (previousElement.classList.contains("layout__dockl")) { + document.querySelectorAll("#dockLeft .dock__item--active").forEach(item => { + if (bigType.includes(item.getAttribute("data-type"))) { + size = 320 + } + }) + previousElement.style.width = size + 'px' + window.siyuan.layout.leftDock.setSize(); + } else if (nextElement.classList.contains("layout__dockr")) { + document.querySelectorAll("#dockRight .dock__item--active").forEach(item => { + if (bigType.includes(item.getAttribute("data-type"))) { + size = 320 + } + }) + nextElement.style.width = size + 'px' + window.siyuan.layout.rightDock.setSize(); + } else { + previousElement.style.width = '' + nextElement.style.width = '' + previousElement.classList.add("fn__flex-1") + nextElement.classList.add("fn__flex-1") + if (resizeElement.parentElement.classList.contains("layout__dockb")) { + window.siyuan.layout.bottomDock.setSize(); + } + } + } else { + if (nextElement.classList.contains("layout__dockb")) { + nextElement.style.height = '232px' + window.siyuan.layout.bottomDock.setSize(); + } else { + previousElement.style.height = '' + nextElement.style.height = '' + previousElement.classList.add("fn__flex-1") + nextElement.classList.add("fn__flex-1") + if (resizeElement.parentElement.classList.contains("layout__dockl")) { + window.siyuan.layout.leftDock.setSize(); + } else if (resizeElement.parentElement.classList.contains("layout__dockr")) { + window.siyuan.layout.rightDock.setSize(); + } + } + } + resizeTabs(); + nextElement.style.transition = ""; + previousElement.style.transition = ""; + } + }); }; export const adjustLayout = (layout: Layout = window.siyuan.layout.centerLayout.parent) => {