github/siyuan
4
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2025-05-17 09:30:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Vanessa 2023-02-23 13:22:55 +08:00
parent d59c131170
commit c538c0a9e3
2 changed files with 111 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
app/src/assets/scss/_layout.scss
View File

@ -11,19 +11,23 @@
} }
} }
&--floatl, &__dockl,
&--floatr, &__dockr,
&--floatb { &__dockb {
transition: var(--b3-width-transition); transition: var(--b3-width-transition);
} }
& > .layout__dockresize {
display: none;
}
&--float { &--float {
position: fixed; position: fixed;
z-index: 3; z-index: 3;
min-height: auto; min-height: auto;
transition: transform .2s cubic-bezier(0, 0, .2, 1) 0ms, opacity .3s cubic-bezier(0, 0, .2, 1) 0ms; transition: transform .2s cubic-bezier(0, 0, .2, 1) 0ms, opacity .3s cubic-bezier(0, 0, .2, 1) 0ms;
&.layout--floatl { &.layout__dockl {
border-radius: 0 8px 8px 0; border-radius: 0 8px 8px 0;
border: 1px solid var(--b3-border-color); border: 1px solid var(--b3-border-color);
border-left: 0; border-left: 0;
@ -34,7 +38,7 @@
left: 0; left: 0;
} }
&.layout--floatr { &.layout__dockr {
border: 1px solid var(--b3-border-color); border: 1px solid var(--b3-border-color);
box-shadow: -8px 0px 24px rgb(140 149 159 / 20%); box-shadow: -8px 0px 24px rgb(140 149 159 / 20%);
border-right: 0; border-right: 0;
@ -43,15 +47,45 @@
top: 112px; top: 112px;
bottom: 82px; bottom: 82px;
right: 0; right: 0;
& > .layout__dockresize--lr {
border-top: 0;
border-right: 0;
border-left: 1px solid transparent;
left: 0;
}
} }
&.layout--floatb { &.layout__dockb {
border-top: 1px solid var(--b3-border-color); border-top: 1px solid var(--b3-border-color);
box-shadow: 0 -8px 24px rgb(140 149 159 / 20%); box-shadow: 0 -8px 24px rgb(140 149 159 / 20%);
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
} }
& > .layout__dockresize {
display: block;
cursor: row-resize;
height: 6px;
width: 100%;
position: absolute;
border-top: 1px solid transparent;
&:hover {
border-color: var(--b3-scroll-color);
}
&--lr {
cursor: col-resize;
width: 6px;
height: 100%;
right: 0;
top: 0;
bottom: 0;
border-right: 1px solid transparent;
}
}
} }
&__tab--active { &__tab--active {

98
app/src/layout/dock/index.ts
View File

@ -14,6 +14,7 @@ import {Inbox} from "./Inbox";
import {Protyle} from "../../protyle"; import {Protyle} from "../../protyle";
import {Backlink} from "./Backlink"; import {Backlink} from "./Backlink";
import {resetFloatDockSize} from "./util"; import {resetFloatDockSize} from "./util";
import {hasClosestByClassName} from "../../protyle/util/hasClosest";
export class Dock { export class Dock {
public element: HTMLElement; public element: HTMLElement;
@ -28,21 +29,24 @@ export class Dock {
case "Left": case "Left":
this.layout = window.siyuan.layout.layout.children[0].children[0] as Layout; this.layout = window.siyuan.layout.layout.children[0].children[0] as Layout;
this.resizeElement = this.layout.element.nextElementSibling as HTMLElement; this.resizeElement = this.layout.element.nextElementSibling as HTMLElement;
this.layout.element.classList.add("layout--floatl"); this.layout.element.classList.add("layout__dockl");
this.layout.element.insertAdjacentHTML("beforeend", `<div class="layout__dockresize layout__dockresize--lr"></div>`);
break; break;
case "Right": case "Right":
this.layout = window.siyuan.layout.layout.children[0].children[2] as Layout; this.layout = window.siyuan.layout.layout.children[0].children[2] as Layout;
this.resizeElement = this.layout.element.previousElementSibling as HTMLElement; this.resizeElement = this.layout.element.previousElementSibling as HTMLElement;
this.layout.element.classList.add("layout--floatr"); this.layout.element.classList.add("layout__dockr");
this.layout.element.insertAdjacentHTML("beforeend", `<div class="layout__dockresize layout__dockresize--lr"></div>`);
break; break;
case "Bottom": case "Bottom":
this.layout = window.siyuan.layout.layout.children[1] as Layout; this.layout = window.siyuan.layout.layout.children[1] as Layout;
this.resizeElement = this.layout.element.previousElementSibling as HTMLElement; this.resizeElement = this.layout.element.previousElementSibling as HTMLElement;
this.layout.element.classList.add("layout--floatb"); this.layout.element.classList.add("layout__dockb");
this.layout.element.insertAdjacentHTML("beforeend", `<div class="layout__dockresize"></div>`);
break; break;
} }
this.element = document.getElementById("dock" + options.position); this.element = document.getElementById("dock" + options.position);
const dockClass = (options.position === "Bottom" || options.position === "Top") ? ' class="fn__flex"' : ""; const dockClass = options.position === "Bottom" ? ' class="fn__flex"' : "";
this.element.innerHTML = `<div${dockClass}></div><div class="fn__flex-1"></div><div${dockClass}></div>`; this.element.innerHTML = `<div${dockClass}></div><div class="fn__flex-1"></div><div${dockClass}></div>`;
this.position = options.position; this.position = options.position;
this.pin = options.data.pin; this.pin = options.data.pin;
@ -57,6 +61,7 @@ export class Dock {
if (options.data.data[1]) { if (options.data.data[1]) {
this.genButton(options.data.data[1], 1); this.genButton(options.data.data[1], 1);
} }
this.element.classList.remove("fn__none");
} }
const activeElements = this.element.querySelectorAll(".dock__item--active"); const activeElements = this.element.querySelectorAll(".dock__item--active");
@ -93,16 +98,13 @@ export class Dock {
} }
}); });
this.layout.element.addEventListener("mouseleave", (event: MouseEvent & { toElement: HTMLElement }) => { this.layout.element.addEventListener("mouseleave", (event: MouseEvent & { toElement: HTMLElement }) => {
if (this.pin || event.toElement?.classList.contains("b3-menu")) { if (event.buttons !== 0 || this.pin || event.toElement?.classList.contains("b3-menu")) {
return; return;
} }
if (this.position === "Left" && event.clientX < 43) { if (this.position === "Left" && event.clientX < 43) {
return; return;
} }
if (this.position === "Right" && event.clientX > window.innerWidth - 41) { if (this.position === "Right" && event.clientX > window.innerWidth - 43) {
return;
}
if (this.position === "Top" && event.clientY < 75) {
return; return;
} }
if (this.position === "Bottom" && event.clientY > window.innerHeight - 73) { if (this.position === "Bottom" && event.clientY > window.innerHeight - 73) {
@ -110,6 +112,52 @@ export class Dock {
} }
this.hideDock(); this.hideDock();
}); });
this.layout.element.querySelector(".layout__dockresize").addEventListener("mousedown", (event: MouseEvent) => {
const documentSelf = document;
const direction = this.position === "Bottom" ? "tb" : "lr";
const x = event[direction === "lr" ? "clientX" : "clientY"];
const currentSize = direction === "lr" ? this.layout.element.clientWidth : this.layout.element.clientHeight;
documentSelf.onmousemove = (moveEvent: MouseEvent) => {
moveEvent.preventDefault();
moveEvent.stopPropagation();
let currentNowSize
if (this.position === "Left") {
currentNowSize = (currentSize + (moveEvent.clientX - x));
} else if (this.position === "Right") {
currentNowSize = (currentSize + (x - moveEvent.clientX));
} else {
currentNowSize = (currentSize + (x - moveEvent.clientY));
}
let minSize = 227;
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")) {
if (!item.classList.contains("fn__none") && !hasClosestByClassName(item, "fn__none")) {
minSize = 320;
return true;
}
}
});
if (currentNowSize < minSize && direction === "lr" ) {
return;
}
if (currentNowSize < 64 && direction === "tb" ) {
return;
}
this.layout.element.style[direction === "lr" ? "width" : "height"] = currentNowSize + "px";
};
documentSelf.onmouseup = () => {
documentSelf.onmousemove = null;
documentSelf.onmouseup = null;
documentSelf.ondragstart = null;
documentSelf.onselectstart = null;
documentSelf.onselect = null;
this.setSize();
};
});
if (window.siyuan.config.uiLayout.hideDock) { if (window.siyuan.config.uiLayout.hideDock) {
this.element.classList.add("fn__none"); this.element.classList.add("fn__none");
} }
@ -163,7 +211,7 @@ export class Dock {
this.layout.element.clientWidth === 0 && this.layout.element.style.width.startsWith("0")) { this.layout.element.clientWidth === 0 && this.layout.element.style.width.startsWith("0")) {
return; return;
} }
if (!reset && (this.position === "Top" || this.position === "Bottom") && if (!reset && this.position === "Bottom" &&
this.layout.element.clientHeight === 0 && this.layout.element.style.height.startsWith("0")) { this.layout.element.clientHeight === 0 && this.layout.element.style.height.startsWith("0")) {
return; return;
} }
@ -174,8 +222,6 @@ export class Dock {
this.layout.element.style.transform = `translateX(${this.element.clientWidth}px)`; this.layout.element.style.transform = `translateX(${this.element.clientWidth}px)`;
} else if (this.position === "Right") { } else if (this.position === "Right") {
this.layout.element.style.transform = `translateX(-${this.element.clientWidth}px)`; this.layout.element.style.transform = `translateX(-${this.element.clientWidth}px)`;
} else if (this.position === "Top") {
this.layout.element.style.transform = `translateY(${this.element.offsetHeight + document.getElementById("toolbar").offsetHeight}px)`;
} else if (this.position === "Bottom") { } else if (this.position === "Bottom") {
this.layout.element.style.transform = `translateY(-${this.element.offsetHeight + document.getElementById("status").offsetHeight}px)`; this.layout.element.style.transform = `translateY(-${this.element.offsetHeight + document.getElementById("status").offsetHeight}px)`;
} }
@ -191,8 +237,6 @@ export class Dock {
this.layout.element.style.transform = `translateX(-${this.layout.element.clientWidth + 8}px)`; this.layout.element.style.transform = `translateX(-${this.layout.element.clientWidth + 8}px)`;
} else if (this.position === "Right") { } else if (this.position === "Right") {
this.layout.element.style.transform = `translateX(${this.layout.element.clientWidth + 8}px)`; this.layout.element.style.transform = `translateX(${this.layout.element.clientWidth + 8}px)`;
} else if (this.position === "Top") {
this.layout.element.style.transform = `translateY(-${this.layout.element.clientHeight + 8}px)`;
} else if (this.position === "Bottom") { } else if (this.position === "Bottom") {
this.layout.element.style.transform = `translateY(${this.layout.element.clientHeight + 8}px)`; this.layout.element.style.transform = `translateY(${this.layout.element.clientHeight + 8}px)`;
} }
@ -376,25 +420,25 @@ export class Dock {
const anotherHasActive = this.element.querySelectorAll(`.dock__item--active[data-index="${anotherIndex}"]`).length > 0; const anotherHasActive = this.element.querySelectorAll(`.dock__item--active[data-index="${anotherIndex}"]`).length > 0;
const hasActive = this.element.querySelectorAll(`.dock__item--active[data-index="${index}"]`).length > 0; const hasActive = this.element.querySelectorAll(`.dock__item--active[data-index="${index}"]`).length > 0;
if (hasActive && anotherHasActive) { if (hasActive && anotherHasActive) {
let firstWnd = wnd; let lastWnd = wnd;
if (anotherIndex === 0) { if (anotherIndex === 0) {
firstWnd = anotherWnd;
anotherWnd.element.nextElementSibling.classList.remove("fn__none"); anotherWnd.element.nextElementSibling.classList.remove("fn__none");
} else { } else {
lastWnd = anotherWnd
anotherWnd.element.previousElementSibling.classList.remove("fn__none"); anotherWnd.element.previousElementSibling.classList.remove("fn__none");
} }
const firstActiveElement = this.element.querySelector('.dock__item--active[data-index="0"]'); const lastActiveElement = this.element.querySelector('.dock__item--active[data-index="1"]');
if (this.position === "Left" || this.position === "Right") { if (this.position === "Left" || this.position === "Right") {
const dataHeight = parseInt(firstActiveElement.getAttribute("data-height")); const dataHeight = parseInt(lastActiveElement.getAttribute("data-height"));
if (dataHeight !== 0 && !isNaN(dataHeight)) { if (dataHeight !== 0 && !isNaN(dataHeight)) {
firstWnd.element.style.height = dataHeight + "px"; lastWnd.element.style.height = dataHeight + "px";
firstWnd.element.classList.remove("fn__flex-1"); lastWnd.element.classList.remove("fn__flex-1");
} }
} else { } else {
const dataWidth = parseInt(firstActiveElement.getAttribute("data-width")); const dataWidth = parseInt(lastActiveElement.getAttribute("data-width"));
if (dataWidth !== 0 && !isNaN(dataWidth)) { if (dataWidth !== 0 && !isNaN(dataWidth)) {
firstWnd.element.style.width = dataWidth + "px"; lastWnd.element.style.width = dataWidth + "px";
firstWnd.element.classList.remove("fn__flex-1"); lastWnd.element.classList.remove("fn__flex-1");
} }
} }
} else { } else {
@ -485,12 +529,12 @@ export class Dock {
const activesElement = this.element.querySelectorAll(".dock__item--active"); const activesElement = this.element.querySelectorAll(".dock__item--active");
activesElement.forEach((item) => { activesElement.forEach((item) => {
if (this.position === "Left" || this.position === "Right") { if (this.position === "Left" || this.position === "Right") {
if (item.getAttribute("data-index") === "0" && activesElement.length > 1) { if (item.getAttribute("data-index") === "1" && activesElement.length > 1) {
item.setAttribute("data-height", (this.data[item.getAttribute("data-type")] as Model).parent.parent.element.clientHeight.toString()); item.setAttribute("data-height", (this.data[item.getAttribute("data-type")] as Model).parent.parent.element.clientHeight.toString());
} }
item.setAttribute("data-width", this.layout.element.clientWidth.toString()); item.setAttribute("data-width", this.layout.element.clientWidth.toString());
} else { } else {
if (item.getAttribute("data-index") === "0" && activesElement.length > 1) { if (item.getAttribute("data-index") === "1" && activesElement.length > 1) {
item.setAttribute("data-width", (this.data[item.getAttribute("data-type")] as Model).parent.parent.element.clientWidth.toString()); item.setAttribute("data-width", (this.data[item.getAttribute("data-type")] as Model).parent.parent.element.clientWidth.toString());
} }
item.setAttribute("data-height", this.layout.element.clientHeight.toString()); item.setAttribute("data-height", this.layout.element.clientHeight.toString());
@ -503,9 +547,9 @@ export class Dock {
this.element.querySelectorAll(".dock__item--active").forEach((item) => { this.element.querySelectorAll(".dock__item--active").forEach((item) => {
let size; let size;
if (this.position === "Left" || this.position === "Right") { if (this.position === "Left" || this.position === "Right") {
size = parseInt(item.getAttribute("data-width")) || (["graph", "globalGraph", "backlink"].includes(item.getAttribute("data-type")) ? 320 : 224); size = parseInt(item.getAttribute("data-width")) || (["graph", "globalGraph", "backlink"].includes(item.getAttribute("data-type")) ? 320 : 227);
} else { } else {
size = parseInt(item.getAttribute("data-height")) || 224; size = parseInt(item.getAttribute("data-height")) || 227;
} }
if (size > max) { if (size > max) {
max = size; max = size;