mirror of
https://github.com/siyuan-note/siyuan.git
synced 2025-05-10 22:03:57 +08:00
1036 lines
46 KiB
TypeScript
1036 lines
46 KiB
TypeScript
import {Layout} from "./index";
|
||
import {genUUID} from "../util/genID";
|
||
import {
|
||
fixWndFlex1,
|
||
getInstanceById,
|
||
getWndByLayout,
|
||
JSONToCenter,
|
||
newModelByInitData,
|
||
pdfIsLoading,
|
||
saveLayout,
|
||
setPanelFocus,
|
||
switchWnd
|
||
} from "./util";
|
||
import {Tab} from "./Tab";
|
||
import {Model} from "./Model";
|
||
import {Editor} from "../editor";
|
||
import {Graph} from "./dock/Graph";
|
||
import {
|
||
hasClosestBlock,
|
||
hasClosestByAttribute,
|
||
hasClosestByClassName,
|
||
isInEmbedBlock
|
||
} from "../protyle/util/hasClosest";
|
||
import {Constants} from "../constants";
|
||
/// #if !BROWSER
|
||
import {ipcRenderer, webFrame} from "electron";
|
||
import {setModelsHash, setTabPosition} from "../window/setHeader";
|
||
/// #endif
|
||
import {Search} from "../search";
|
||
import {showMessage} from "../dialog/message";
|
||
import {openFileById, updatePanelByEditor} from "../editor/util";
|
||
import {scrollCenter} from "../util/highlightById";
|
||
import {getAllModels} from "./getAll";
|
||
import {clearCounter} from "./status";
|
||
import {saveScroll} from "../protyle/scroll/saveScroll";
|
||
import {Asset} from "../asset";
|
||
import {newFile} from "../util/newFile";
|
||
import {MenuItem} from "../menus/Menu";
|
||
import {escapeHtml} from "../util/escape";
|
||
import {getFrontend, isWindow} from "../util/functions";
|
||
import {hideAllElements} from "../protyle/ui/hideElements";
|
||
import {focusByOffset, getSelectionOffset} from "../protyle/util/selection";
|
||
import {Custom} from "./dock/Custom";
|
||
import {App} from "../index";
|
||
import {unicode2Emoji} from "../emoji";
|
||
import {closeWindow} from "../window/closeWin";
|
||
import {setTitle} from "../dialog/processSystem";
|
||
import {newCenterEmptyTab, resizeTabs} from "./tabUtil";
|
||
import {fullscreen} from "../protyle/breadcrumb/action";
|
||
import {setPadding} from "../protyle/ui/initUI";
|
||
import {setPosition} from "../util/setPosition";
|
||
import {clearOBG} from "./dock/util";
|
||
import {recordBeforeResizeTop} from "../protyle/util/resize";
|
||
|
||
export class Wnd {
|
||
private app: App;
|
||
public id: string;
|
||
public parent?: Layout;
|
||
public element: HTMLElement;
|
||
public headersElement: HTMLElement;
|
||
public children: Tab[] = [];
|
||
public resize?: Config.TUILayoutDirection;
|
||
|
||
constructor(app: App, resize?: Config.TUILayoutDirection, parentType?: Config.TUILayoutType) {
|
||
this.id = genUUID();
|
||
this.app = app;
|
||
this.resize = resize;
|
||
this.element = document.createElement("div");
|
||
this.element.classList.add("fn__flex-1", "fn__flex");
|
||
let dragHTML = '<div class="layout-tab-container__drag fn__none"></div>';
|
||
if (parentType === "left" || parentType === "right" || parentType === "bottom") {
|
||
dragHTML = "";
|
||
}
|
||
this.element.innerHTML = `<div data-type="wnd" data-id="${this.id}" class="fn__flex-column fn__flex fn__flex-1">
|
||
<div class="fn__flex fn__none">
|
||
<ul class="fn__flex layout-tab-bar"></ul>
|
||
<ul class="layout-tab-bar layout-tab-bar--readonly fn__flex-1">
|
||
<li class="item item--readonly">
|
||
<span data-type="new" class="block__icon block__icon--show ariaLabel${window.siyuan.config.readonly ? " fn__none" : ""}" aria-label="${window.siyuan.languages.newFile}"><svg><use xlink:href="#iconAdd"></use></svg></span>
|
||
<span class="fn__flex-1"></span>
|
||
<span data-type="more" data-menu="true" class="block__icon block__icon--show ariaLabel" aria-label="${window.siyuan.languages.switchTab}"><svg><use xlink:href="#iconDown"></use></svg></span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="layout-tab-container fn__flex-1">${dragHTML}</div>
|
||
</div>`;
|
||
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) => {
|
||
// 点击鼠标滚轮关闭
|
||
if (event.button !== 1) {
|
||
return;
|
||
}
|
||
let target = event.target as HTMLElement;
|
||
while (target && !target.isEqualNode(this.headersElement)) {
|
||
if (target.tagName === "LI") {
|
||
this.removeTab(target.getAttribute("data-id"));
|
||
window.siyuan.menus.menu.remove();
|
||
event.stopPropagation();
|
||
event.preventDefault();
|
||
const frontend = getFrontend();
|
||
if ((["desktop", "desktop-window"].includes(frontend) && window.siyuan.config.system.os === "linux") ||
|
||
(frontend === "browser-desktop" && navigator.userAgent.indexOf("Linux") !== -1)) {
|
||
const activeElement = document.activeElement;
|
||
window.addEventListener("paste", this.#preventPast, {
|
||
capture: true,
|
||
once: true
|
||
});
|
||
// TODO 保持原有焦点？https://github.com/siyuan-note/siyuan/pull/13395/files#r1877004077
|
||
if (activeElement instanceof HTMLElement) {
|
||
activeElement.focus();
|
||
}
|
||
// 如果在短时间内没有 paste 事件发生,移除监听
|
||
setTimeout(() => {
|
||
window.removeEventListener("paste", this.#preventPast, {
|
||
capture: true
|
||
});
|
||
}, Constants.TIMEOUT_INPUT);
|
||
}
|
||
break;
|
||
}
|
||
target = target.parentElement;
|
||
}
|
||
});
|
||
this.headersElement.addEventListener("mousewheel", (event: WheelEvent) => {
|
||
this.headersElement.scrollLeft = this.headersElement.scrollLeft + event.deltaY;
|
||
}, {passive: true});
|
||
|
||
this.headersElement.parentElement.addEventListener("click", (event) => {
|
||
let target = event.target as HTMLElement;
|
||
while (target && !target.isEqualNode(this.headersElement)) {
|
||
if (target.classList.contains("block__icon") && target.getAttribute("data-type") === "new") {
|
||
setPanelFocus(this.headersElement.parentElement.parentElement);
|
||
newFile({
|
||
app,
|
||
useSavePath: true
|
||
});
|
||
break;
|
||
} else if (target.classList.contains("block__icon") && target.getAttribute("data-type") === "more") {
|
||
this.renderTabList(target);
|
||
break;
|
||
} else if (target.tagName === "LI" && target.getAttribute("data-id") && !pdfIsLoading(this.element)) {
|
||
if (target.classList.contains("item--focus")) {
|
||
this.switchTab(target, true, true, false, false);
|
||
} else {
|
||
this.switchTab(target, true);
|
||
}
|
||
break;
|
||
}
|
||
target = target.parentElement;
|
||
}
|
||
});
|
||
this.headersElement.parentElement.addEventListener("dblclick", (event) => {
|
||
let target = event.target as HTMLElement;
|
||
while (target && !target.isEqualNode(this.headersElement)) {
|
||
if (window.siyuan.config.fileTree.openFilesUseCurrentTab && target.getAttribute("data-type") === "tab-header") {
|
||
target.classList.remove("item--unupdate");
|
||
break;
|
||
}
|
||
target = target.parentElement;
|
||
}
|
||
});
|
||
this.headersElement.parentElement.addEventListener("dragover", function (event: DragEvent & {
|
||
target: HTMLElement
|
||
}) {
|
||
const it = this as HTMLElement;
|
||
it.classList.remove("layout-tab-bars--drag");
|
||
if (event.dataTransfer.types.includes(Constants.SIYUAN_DROP_FILE)) {
|
||
event.preventDefault();
|
||
it.classList.add("layout-tab-bars--drag");
|
||
return;
|
||
}
|
||
// 不能使用 !window.siyuan.dragElement，因为移动页签到新窗口后，再把主窗口页签拖拽新窗口页签上时，该值为空
|
||
if (!event.dataTransfer.types.includes(Constants.SIYUAN_DROP_TAB)) {
|
||
return;
|
||
}
|
||
event.preventDefault();
|
||
let oldTabHeaderElement = window.siyuan.dragElement;
|
||
let exitDrag = false;
|
||
Array.from(it.firstElementChild.childNodes).find((item: HTMLElement) => {
|
||
if (item.style.opacity === "0.1") {
|
||
oldTabHeaderElement = item;
|
||
exitDrag = true;
|
||
return true;
|
||
}
|
||
});
|
||
if (!exitDrag && oldTabHeaderElement) {
|
||
if (oldTabHeaderElement.classList.contains("item--pin")) {
|
||
return;
|
||
}
|
||
oldTabHeaderElement = oldTabHeaderElement.cloneNode(true) as HTMLElement;
|
||
oldTabHeaderElement.setAttribute("data-clone", "true");
|
||
it.firstElementChild.append(oldTabHeaderElement);
|
||
return;
|
||
} else if (!exitDrag && !oldTabHeaderElement) { // 拖拽到新窗口
|
||
oldTabHeaderElement = document.createElement("li");
|
||
oldTabHeaderElement.style.opacity = "0.1";
|
||
oldTabHeaderElement.innerHTML = '<svg class="svg"><use xlink:href="#iconFile"></use></svg>';
|
||
oldTabHeaderElement.setAttribute("data-clone", "true");
|
||
it.firstElementChild.append(oldTabHeaderElement);
|
||
}
|
||
const newTabHeaderElement = hasClosestByAttribute(event.target, "data-type", "tab-header");
|
||
if (!newTabHeaderElement) {
|
||
if (!oldTabHeaderElement.classList.contains("item--pin")) {
|
||
it.classList.add("layout-tab-bars--drag");
|
||
}
|
||
return;
|
||
}
|
||
if (!newTabHeaderElement.isSameNode(oldTabHeaderElement) &&
|
||
((oldTabHeaderElement.classList.contains("item--pin") && newTabHeaderElement.classList.contains("item--pin")) ||
|
||
(!oldTabHeaderElement.classList.contains("item--pin") && !newTabHeaderElement.classList.contains("item--pin")))) {
|
||
const rect = newTabHeaderElement.getClientRects()[0];
|
||
if (event.clientX > rect.left + rect.width / 2) {
|
||
newTabHeaderElement.after(oldTabHeaderElement);
|
||
} else {
|
||
newTabHeaderElement.before(oldTabHeaderElement);
|
||
}
|
||
}
|
||
});
|
||
let dragleaveTimeout: number;
|
||
let headerDragCounter = 0;
|
||
this.headersElement.parentElement.addEventListener("dragleave", (event)=> {
|
||
if (!hasClosestByAttribute(event.target as HTMLElement, "data-clone", "true")) {
|
||
headerDragCounter--;
|
||
}
|
||
if (headerDragCounter === 0) {
|
||
this.headersElement.parentElement.classList.remove("layout-tab-bars--drag");
|
||
clearTimeout(dragleaveTimeout);
|
||
// 窗口拖拽到新窗口时，不 drop 无法移除 clone 的元素
|
||
dragleaveTimeout = window.setTimeout(() => {
|
||
document.querySelectorAll(".layout-tab-bar li[data-clone='true']").forEach(item => {
|
||
item.remove();
|
||
});
|
||
}, 1000);
|
||
}
|
||
});
|
||
this.headersElement.parentElement.addEventListener("dragenter", (event) => {
|
||
event.preventDefault();
|
||
if (!hasClosestByAttribute(event.target as HTMLElement, "data-clone", "true")) {
|
||
headerDragCounter++;
|
||
}
|
||
});
|
||
|
||
this.headersElement.parentElement.addEventListener("dragend", (event) => {
|
||
this.headersElement.parentElement.classList.remove("layout-tab-bars--drag");
|
||
});
|
||
|
||
this.headersElement.parentElement.addEventListener("drop", (event: DragEvent & {
|
||
target: HTMLElement
|
||
})=> {
|
||
this.headersElement.parentElement.classList.remove("layout-tab-bars--drag");
|
||
headerDragCounter = 0;
|
||
const it = this.headersElement;
|
||
if (event.dataTransfer.types.includes(Constants.SIYUAN_DROP_FILE)) {
|
||
// 文档树拖拽
|
||
setPanelFocus(it.parentElement);
|
||
event.dataTransfer.getData(Constants.SIYUAN_DROP_FILE).split(",").forEach(item => {
|
||
if (item) {
|
||
openFileById({
|
||
app,
|
||
id: item,
|
||
action: [Constants.CB_GET_FOCUS, Constants.CB_GET_SCROLL]
|
||
});
|
||
}
|
||
});
|
||
window.siyuan.dragElement = undefined;
|
||
return;
|
||
}
|
||
const tabData = JSON.parse(event.dataTransfer.getData(Constants.SIYUAN_DROP_TAB));
|
||
let oldTab = getInstanceById(tabData.id) as Tab;
|
||
const wnd = getInstanceById(it.parentElement.getAttribute("data-id")) as Wnd;
|
||
/// #if !BROWSER
|
||
if (!oldTab) { // 从主窗口拖拽到页签新窗口
|
||
if (wnd instanceof Wnd) {
|
||
JSONToCenter(app, tabData, wnd);
|
||
oldTab = wnd.children[wnd.children.length - 1];
|
||
ipcRenderer.send(Constants.SIYUAN_SEND_WINDOWS, {cmd: "closetab", data: tabData.id});
|
||
it.querySelector("li[data-clone='true']").remove();
|
||
wnd.switchTab(oldTab.headElement);
|
||
ipcRenderer.send(Constants.SIYUAN_CMD, "focus");
|
||
}
|
||
}
|
||
/// #endif
|
||
if (!oldTab) {
|
||
return;
|
||
}
|
||
|
||
const nextTabHeaderElement = (Array.from(it.firstElementChild.childNodes).find((item: HTMLElement) => {
|
||
if (item.style.opacity === "0.1") {
|
||
return true;
|
||
}
|
||
}) as HTMLElement)?.nextElementSibling;
|
||
|
||
if (!it.contains(oldTab.headElement)) {
|
||
// 从其他 Wnd 拖动过来
|
||
const cloneTabElement = it.querySelector("[data-clone='true']");
|
||
if (!cloneTabElement) {
|
||
return;
|
||
}
|
||
cloneTabElement.before(oldTab.headElement);
|
||
cloneTabElement.remove();
|
||
// 对象顺序
|
||
wnd.moveTab(oldTab, nextTabHeaderElement ? nextTabHeaderElement.getAttribute("data-id") : undefined);
|
||
resizeTabs();
|
||
return;
|
||
}
|
||
|
||
let tempTab: Tab;
|
||
oldTab.parent.children.find((item, index) => {
|
||
if (item.id === oldTab.id) {
|
||
tempTab = oldTab.parent.children.splice(index, 1)[0];
|
||
return true;
|
||
}
|
||
});
|
||
if (nextTabHeaderElement) {
|
||
oldTab.parent.children.find((item, index) => {
|
||
if (item.id === nextTabHeaderElement.getAttribute("data-id")) {
|
||
oldTab.parent.children.splice(index, 0, tempTab);
|
||
return true;
|
||
}
|
||
});
|
||
} else {
|
||
oldTab.parent.children.push(tempTab);
|
||
}
|
||
saveLayout();
|
||
});
|
||
|
||
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 }) => {
|
||
event.preventDefault();
|
||
if (!dragElement.nextElementSibling) {
|
||
return;
|
||
}
|
||
const rect = dragElement.parentElement.getBoundingClientRect();
|
||
const height = rect.height;
|
||
const width = rect.width;
|
||
const x = event.clientX - rect.left;
|
||
const y = event.clientY - rect.top;
|
||
if (x <= width / 8 || (x <= width / 3 && x > width / 8 && y >= height / 8 && y <= height * 7 / 8)) {
|
||
dragElement.setAttribute("style", "height:100%;width:50%;right:50%;bottom:0;left:0;top:0");
|
||
} else if (x >= width * 7 / 8 || (x >= width * 2 / 3 && x < width * 7 / 8 && y >= height / 8 && y <= height * 7 / 8)) {
|
||
dragElement.setAttribute("style", "height:100%;width:50%;right:0;bottom:0;left:50%;top:0");
|
||
} else if (y <= height / 8) {
|
||
dragElement.setAttribute("style", "height:50%;width:100%;right:0;bottom:50%;left:0;top:0");
|
||
} else if (y >= height * 7 / 8) {
|
||
dragElement.setAttribute("style", "height:50%;width:100%;right:0;bottom:0;left:0;top:50%");
|
||
} else {
|
||
dragElement.setAttribute("style", "height:100%;width:100%;right:0;bottom:0;top:0;left:0");
|
||
}
|
||
});
|
||
dragElement.addEventListener("dragleave", () => {
|
||
dragElement.classList.add("fn__none");
|
||
});
|
||
dragElement.addEventListener("drop", (event: DragEvent & { target: HTMLElement }) => {
|
||
dragElement.classList.add("fn__none");
|
||
const targetWndElement = event.target.parentElement.parentElement;
|
||
const targetWnd = getInstanceById(targetWndElement.getAttribute("data-id")) as Wnd;
|
||
const tabData = JSON.parse(event.dataTransfer.getData(Constants.SIYUAN_DROP_TAB));
|
||
let oldTab = getInstanceById(tabData.id) as Tab;
|
||
/// #if !BROWSER
|
||
if (!oldTab) { // 从主窗口拖拽到页签新窗口
|
||
JSONToCenter(app, tabData, this);
|
||
oldTab = this.children[this.children.length - 1];
|
||
ipcRenderer.send(Constants.SIYUAN_SEND_WINDOWS, {cmd: "closetab", data: tabData.id});
|
||
ipcRenderer.send(Constants.SIYUAN_CMD, "focus");
|
||
}
|
||
/// #endif
|
||
if (!oldTab) {
|
||
return;
|
||
}
|
||
|
||
if (dragElement.style.height === "50%" || dragElement.style.width === "50%") {
|
||
// split
|
||
if (dragElement.style.height === "50%") {
|
||
// split to bottom
|
||
const newWnd = targetWnd.split("tb");
|
||
newWnd.headersElement.append(oldTab.headElement);
|
||
newWnd.headersElement.parentElement.classList.remove("fn__none");
|
||
newWnd.moveTab(oldTab);
|
||
|
||
if (dragElement.style.bottom === "50%" && newWnd.element.previousElementSibling && targetWnd.element.parentElement) {
|
||
// 交换位置
|
||
switchWnd(newWnd, targetWnd);
|
||
}
|
||
} else if (dragElement.style.width === "50%") {
|
||
// split to right
|
||
const newWnd = targetWnd.split("lr");
|
||
newWnd.headersElement.append(oldTab.headElement);
|
||
newWnd.headersElement.parentElement.classList.remove("fn__none");
|
||
newWnd.moveTab(oldTab);
|
||
|
||
if (dragElement.style.right === "50%" && newWnd.element.previousElementSibling && targetWnd.element.parentElement) {
|
||
// 交换位置
|
||
switchWnd(newWnd, targetWnd);
|
||
}
|
||
}
|
||
resizeTabs();
|
||
/// #if !BROWSER
|
||
setTabPosition();
|
||
/// #endif
|
||
return;
|
||
}
|
||
|
||
if (targetWndElement.contains(document.querySelector(`[data-id="${tabData.id}"]`))) {
|
||
return;
|
||
}
|
||
if (targetWnd) {
|
||
targetWnd.headersElement.append(oldTab.headElement);
|
||
targetWnd.headersElement.parentElement.classList.remove("fn__none");
|
||
targetWnd.moveTab(oldTab);
|
||
resizeTabs();
|
||
}
|
||
});
|
||
}
|
||
|
||
public showHeading() {
|
||
const currentElement = this.headersElement.querySelector(".item--focus") as HTMLElement;
|
||
if (!currentElement) {
|
||
return;
|
||
}
|
||
if (currentElement.offsetLeft + currentElement.clientWidth > this.headersElement.scrollLeft + this.headersElement.clientWidth) {
|
||
this.headersElement.scrollLeft = currentElement.offsetLeft + currentElement.clientWidth - this.headersElement.clientWidth;
|
||
} else if (currentElement.offsetLeft < this.headersElement.scrollLeft) {
|
||
this.headersElement.scrollLeft = currentElement.offsetLeft;
|
||
}
|
||
}
|
||
|
||
public switchTab(target: HTMLElement, pushBack = false, update = true, resize = true, isSaveLayout = true) {
|
||
let currentTab: Tab;
|
||
let isInitActive = false;
|
||
this.children.forEach((item) => {
|
||
if (target === item.headElement) {
|
||
if (item.headElement && item.headElement.classList.contains("fn__none")) {
|
||
// https://github.com/siyuan-note/siyuan/issues/267
|
||
} else {
|
||
if (item.headElement) {
|
||
item.headElement.classList.add("item--focus");
|
||
if (item.headElement.getAttribute("data-init-active") === "true") {
|
||
item.headElement.removeAttribute("data-init-active");
|
||
isInitActive = true;
|
||
} else {
|
||
item.headElement.setAttribute("data-activetime", (new Date()).getTime().toString());
|
||
}
|
||
}
|
||
item.panelElement.classList.remove("fn__none");
|
||
}
|
||
currentTab = item;
|
||
} else {
|
||
item.headElement?.classList.remove("item--focus");
|
||
if (!item.panelElement.classList.contains("fn__none")) {
|
||
// 必须现判断，否则会触发 observer.observe(this.element, {attributeFilter: ["class"]}); 导致 https://ld246.com/article/1641198819303
|
||
item.panelElement.classList.add("fn__none");
|
||
}
|
||
}
|
||
});
|
||
// 在 JSONToLayout 中进行 focus
|
||
if (!isInitActive) {
|
||
setPanelFocus(this.headersElement.parentElement.parentElement, isSaveLayout);
|
||
}
|
||
if (currentTab && currentTab.headElement) {
|
||
const initData = currentTab.headElement.getAttribute("data-initdata");
|
||
if (initData) {
|
||
currentTab.addModel(newModelByInitData(this.app, currentTab, JSON.parse(initData)));
|
||
currentTab.headElement.removeAttribute("data-initdata");
|
||
if (isSaveLayout) {
|
||
saveLayout();
|
||
}
|
||
return;
|
||
}
|
||
}
|
||
|
||
if (currentTab && target === currentTab.headElement) {
|
||
if (currentTab.model instanceof Graph) {
|
||
currentTab.model.onGraph(false);
|
||
} else if (currentTab.model instanceof Asset && currentTab.model.pdfObject && currentTab.model.pdfObject.pdfViewer) {
|
||
// https://github.com/siyuan-note/siyuan/issues/5655
|
||
currentTab.model.pdfObject.pdfViewer.container.focus();
|
||
}
|
||
}
|
||
|
||
if (currentTab && currentTab.model instanceof Editor) {
|
||
const keepCursorId = currentTab.headElement.getAttribute("keep-cursor");
|
||
if (keepCursorId) {
|
||
// 在新页签中打开，但不跳转到新页签，但切换到新页签时需调整滚动
|
||
let nodeElement: HTMLElement;
|
||
Array.from(currentTab.model.editor.protyle.wysiwyg.element.querySelectorAll(`[data-node-id="${keepCursorId}"]`)).find((item: HTMLElement) => {
|
||
if (!isInEmbedBlock(item)) {
|
||
nodeElement = item;
|
||
return true;
|
||
}
|
||
});
|
||
if (nodeElement) {
|
||
if (!currentTab.model.editor.protyle.toolbar.range) {
|
||
const range = document.createRange();
|
||
range.selectNodeContents(nodeElement);
|
||
range.collapse();
|
||
currentTab.model.editor.protyle.toolbar.range = range;
|
||
}
|
||
scrollCenter(currentTab.model.editor.protyle, nodeElement, true);
|
||
} else {
|
||
openFileById({
|
||
app: this.app,
|
||
id: keepCursorId,
|
||
action: [Constants.CB_GET_FOCUS, Constants.CB_GET_SCROLL]
|
||
});
|
||
}
|
||
currentTab.headElement.removeAttribute("keep-cursor");
|
||
}
|
||
// focusin 触发前，layout__wnd--active 和 tab 已设置，需在调用里面更新
|
||
if (update) {
|
||
updatePanelByEditor({
|
||
protyle: currentTab.model.editor.protyle,
|
||
focus: true,
|
||
pushBackStack: pushBack,
|
||
reload: false,
|
||
resize,
|
||
});
|
||
}
|
||
if (window.siyuan.editorIsFullscreen) {
|
||
fullscreen(currentTab.model.editor.protyle.element);
|
||
setPadding(currentTab.model.editor.protyle);
|
||
}
|
||
} else {
|
||
clearOBG();
|
||
}
|
||
if (isSaveLayout) {
|
||
saveLayout();
|
||
}
|
||
}
|
||
|
||
public addTab(tab: Tab, keepCursor = false, isSaveLayout = true, activeTime?: string) {
|
||
if (keepCursor) {
|
||
tab.headElement?.classList.remove("item--focus");
|
||
tab.panelElement.classList.add("fn__none");
|
||
}
|
||
let oldFocusIndex = 0;
|
||
this.children.forEach((item, index) => {
|
||
if (item.headElement && item.headElement.classList.contains("item--focus")) {
|
||
oldFocusIndex = index;
|
||
let nextElement = item.headElement.nextElementSibling;
|
||
while (nextElement && nextElement.classList.contains("item--pin")) {
|
||
oldFocusIndex++;
|
||
nextElement = nextElement.nextElementSibling;
|
||
}
|
||
}
|
||
if (!keepCursor) {
|
||
item.headElement?.classList.remove("item--focus");
|
||
item.panelElement.classList.add("fn__none");
|
||
}
|
||
});
|
||
|
||
this.children.splice(oldFocusIndex + 1, 0, tab);
|
||
|
||
if (tab.headElement) {
|
||
this.headersElement.parentElement.classList.remove("fn__none");
|
||
if (this.headersElement.childElementCount === 0) {
|
||
this.headersElement.append(tab.headElement);
|
||
} else {
|
||
this.headersElement.children[oldFocusIndex].after(tab.headElement);
|
||
}
|
||
tab.headElement.querySelector(".item__close").addEventListener("click", (event) => {
|
||
if (tab.headElement.classList.contains("item--pin")) {
|
||
tab.unpin();
|
||
} else {
|
||
tab.parent.removeTab(tab.id);
|
||
}
|
||
window.siyuan.menus.menu.remove();
|
||
event.stopPropagation();
|
||
event.preventDefault();
|
||
});
|
||
tab.headElement.setAttribute("data-activetime", activeTime || (new Date()).getTime().toString());
|
||
}
|
||
const containerElement = this.element.querySelector(".layout-tab-container");
|
||
if (!containerElement.querySelector(".fn__flex-1")) {
|
||
// empty center
|
||
containerElement.append(tab.panelElement);
|
||
} else if (!containerElement.querySelector(".layout-tab-container__drag")) {
|
||
// Dock
|
||
containerElement.children[oldFocusIndex].after(tab.panelElement);
|
||
} else {
|
||
containerElement.children[oldFocusIndex + 1].after(tab.panelElement);
|
||
}
|
||
|
||
tab.parent = this;
|
||
if (tab.callback) {
|
||
tab.callback(tab);
|
||
}
|
||
// 移除 centerLayout 中的 empty
|
||
if (this.parent.type === "center" && this.children.length === 2 && !this.children[0].headElement) {
|
||
this.removeTab(this.children[0].id);
|
||
} else if (this.children.length > window.siyuan.config.fileTree.maxOpenTabCount) {
|
||
this.removeOverCounter(isSaveLayout);
|
||
}
|
||
/// #if !BROWSER
|
||
setTabPosition();
|
||
setModelsHash();
|
||
/// #endif
|
||
if (isSaveLayout) {
|
||
saveLayout();
|
||
}
|
||
}
|
||
|
||
#preventPast(event: ClipboardEvent) {
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
}
|
||
|
||
private renderTabList(target: HTMLElement) {
|
||
if (!window.siyuan.menus.menu.element.classList.contains("fn__none") &&
|
||
window.siyuan.menus.menu.element.getAttribute("data-name") === "tabList") {
|
||
window.siyuan.menus.menu.remove();
|
||
return;
|
||
}
|
||
window.siyuan.menus.menu.remove();
|
||
window.siyuan.menus.menu.element.classList.add("b3-menu--list");
|
||
Array.from(this.headersElement.children).forEach((item: HTMLElement) => {
|
||
const iconElement = item.querySelector(".item__icon");
|
||
const graphicElement = item.querySelector(".item__graphic");
|
||
let iconHTML = undefined;
|
||
if (iconElement) {
|
||
if (iconElement.firstElementChild?.tagName === "IMG") {
|
||
// 图标为图片的文档
|
||
iconHTML = `<img src="${iconElement.firstElementChild.getAttribute("src")}" class="b3-menu__icon">`;
|
||
} else {
|
||
// 有图标的文档
|
||
iconHTML = `<span class="b3-menu__icon">${iconElement.innerHTML}</span>`;
|
||
}
|
||
} else if (!graphicElement) {
|
||
// 没有图标的文档
|
||
iconHTML = unicode2Emoji(window.siyuan.storage[Constants.LOCAL_IMAGES].file, "b3-menu__icon", true);
|
||
}
|
||
window.siyuan.menus.menu.append(new MenuItem({
|
||
label: escapeHtml(item.querySelector(".item__text").textContent),
|
||
action: "iconCloseRound",
|
||
iconHTML,
|
||
icon: graphicElement ? graphicElement.firstElementChild.getAttribute("xlink:href").substring(1) : "",
|
||
bind: (element) => {
|
||
element.addEventListener("click", (itemEvent) => {
|
||
if (hasClosestByClassName(itemEvent.target as Element, "b3-menu__action")) {
|
||
this.removeTab(item.getAttribute("data-id"));
|
||
if (element.previousElementSibling || element.nextElementSibling) {
|
||
element.remove();
|
||
setPosition(window.siyuan.menus.menu.element, rect.left + rect.width - window.siyuan.menus.menu.element.clientWidth, rect.top + rect.height);
|
||
} else {
|
||
window.siyuan.menus.menu.remove();
|
||
}
|
||
} else {
|
||
this.switchTab(item, true);
|
||
this.showHeading();
|
||
window.siyuan.menus.menu.remove();
|
||
}
|
||
itemEvent.preventDefault();
|
||
itemEvent.stopPropagation();
|
||
});
|
||
},
|
||
current: item.classList.contains("item--focus")
|
||
}).element);
|
||
});
|
||
window.siyuan.menus.menu.element.setAttribute("data-name", "tabList");
|
||
const rect = target.getBoundingClientRect();
|
||
window.siyuan.menus.menu.popup({
|
||
x: rect.left + rect.width,
|
||
y: rect.top + rect.height,
|
||
isLeft: true
|
||
});
|
||
}
|
||
|
||
private removeOverCounter(isSaveLayout = false) {
|
||
let removeId: string;
|
||
let openTime: string;
|
||
let removeCount = 0;
|
||
this.children.forEach((item, index) => {
|
||
if (item.headElement.classList.contains("item--pin") || item.headElement.classList.contains("item--focus")) {
|
||
return;
|
||
}
|
||
removeCount++;
|
||
if (!openTime) {
|
||
openTime = item.headElement.getAttribute("data-activetime");
|
||
removeId = this.children[index].id;
|
||
} else if (item.headElement.getAttribute("data-activetime") < openTime) {
|
||
openTime = item.headElement.getAttribute("data-activetime");
|
||
removeId = this.children[index].id;
|
||
}
|
||
});
|
||
if (removeId) {
|
||
this.removeTab(removeId, false, false, isSaveLayout);
|
||
removeCount--;
|
||
}
|
||
if (removeCount > 0 && this.children.length > window.siyuan.config.fileTree.maxOpenTabCount) {
|
||
this.removeOverCounter(isSaveLayout);
|
||
}
|
||
}
|
||
|
||
private destroyModel(model: Model) {
|
||
if (!model) {
|
||
return;
|
||
}
|
||
if (model instanceof Editor && model.editor) {
|
||
window.siyuan.blockPanels.forEach((item) => {
|
||
if (item.element && model.editor.protyle.wysiwyg.element.contains(item.element)) {
|
||
item.destroy();
|
||
}
|
||
});
|
||
model.editor.destroy();
|
||
return;
|
||
}
|
||
if (model instanceof Search) {
|
||
model.editors.edit.destroy();
|
||
model.editors.unRefEdit.destroy();
|
||
return;
|
||
}
|
||
if (model instanceof Asset) {
|
||
if (model.pdfObject && model.pdfObject.pdfLoadingTask) {
|
||
model.pdfObject.pdfLoadingTask.destroy();
|
||
}
|
||
}
|
||
if (model instanceof Custom) {
|
||
if (model.destroy) {
|
||
model.destroy();
|
||
}
|
||
}
|
||
model.send("closews", {});
|
||
}
|
||
|
||
private removeTabAction = (id: string, closeAll = false, animate = true, isSaveLayout = true) => {
|
||
clearCounter();
|
||
this.children.find((item, index) => {
|
||
if (item.id === id) {
|
||
if (item.model instanceof Custom && item.model.beforeDestroy) {
|
||
item.model.beforeDestroy();
|
||
}
|
||
if (item.model instanceof Editor) {
|
||
saveScroll(item.model.editor.protyle);
|
||
}
|
||
if (this.children.length === 1) {
|
||
this.destroyModel(this.children[0].model);
|
||
this.children = [];
|
||
if (["bottom", "left", "right"].includes(this.parent.type)) {
|
||
item.panelElement.remove();
|
||
} else {
|
||
recordBeforeResizeTop();
|
||
this.remove();
|
||
}
|
||
// 关闭分屏页签后光标消失
|
||
const editors = getAllModels().editor;
|
||
if (editors.length === 0) {
|
||
clearOBG();
|
||
} else {
|
||
editors.forEach(item => {
|
||
if (!item.element.classList.contains("fn__none")) {
|
||
setPanelFocus(item.parent.parent.headersElement.parentElement.parentElement);
|
||
updatePanelByEditor({
|
||
protyle: item.editor.protyle,
|
||
focus: true,
|
||
pushBackStack: true,
|
||
reload: false,
|
||
resize: true,
|
||
});
|
||
return;
|
||
}
|
||
});
|
||
}
|
||
return;
|
||
}
|
||
if (item.headElement) {
|
||
if (item.headElement.classList.contains("item--focus")) {
|
||
let latestHeadElement: HTMLElement;
|
||
Array.from(item.headElement.parentElement.children).forEach((headItem: HTMLElement) => {
|
||
if (!headItem.isSameNode(item.headElement) &&
|
||
headItem.style.maxWidth !== "0px" // 不对比已移除但还在动画效果中的元素 https://github.com/siyuan-note/siyuan/issues/7878
|
||
) {
|
||
if (!latestHeadElement) {
|
||
latestHeadElement = headItem;
|
||
} else if (headItem.getAttribute("data-activetime") > latestHeadElement.getAttribute("data-activetime")) {
|
||
latestHeadElement = headItem;
|
||
}
|
||
}
|
||
});
|
||
if (latestHeadElement && !closeAll) {
|
||
this.switchTab(latestHeadElement, true, true, false, false);
|
||
this.showHeading();
|
||
}
|
||
}
|
||
if (animate) {
|
||
item.headElement.setAttribute("style", "max-width: 0px;");
|
||
setTimeout(() => {
|
||
item.headElement.remove();
|
||
}, 200);
|
||
} else {
|
||
item.headElement.remove();
|
||
}
|
||
}
|
||
item.panelElement.remove();
|
||
this.destroyModel(item.model);
|
||
this.children.splice(index, 1);
|
||
resizeTabs(false);
|
||
return true;
|
||
}
|
||
});
|
||
// 初始化移除窗口，但 centerLayout 还没有赋值 https://ld246.com/article/1658718634416
|
||
if (window.siyuan.layout.centerLayout) {
|
||
const wnd = getWndByLayout(window.siyuan.layout.centerLayout);
|
||
if (!wnd) {
|
||
/// #if !BROWSER
|
||
if (isWindow()) {
|
||
closeWindow(this.app);
|
||
return;
|
||
}
|
||
/// #endif
|
||
const wnd = new Wnd(this.app);
|
||
window.siyuan.layout.centerLayout.addWnd(wnd);
|
||
wnd.addTab(newCenterEmptyTab(this.app), false, false);
|
||
setTitle(window.siyuan.languages.siyuanNote);
|
||
}
|
||
}
|
||
if (isSaveLayout) {
|
||
saveLayout();
|
||
}
|
||
/// #if !BROWSER
|
||
webFrame.clearCache();
|
||
ipcRenderer.send(Constants.SIYUAN_CMD, "clearCache");
|
||
setTabPosition();
|
||
setModelsHash();
|
||
/// #endif
|
||
};
|
||
|
||
public removeTab(id: string, closeAll = false, animate = true, isSaveLayout = true) {
|
||
for (let index = 0; index < this.children.length; index++) {
|
||
const item = this.children[index];
|
||
if (item.id === id) {
|
||
if ((item.model instanceof Editor) && item.model.editor?.protyle) {
|
||
if (item.model.editor.protyle.upload.isUploading) {
|
||
showMessage(window.siyuan.languages.uploading);
|
||
return;
|
||
}
|
||
this.removeTabAction(id, closeAll, animate, isSaveLayout);
|
||
} else {
|
||
this.removeTabAction(id, closeAll, animate, isSaveLayout);
|
||
}
|
||
return;
|
||
}
|
||
}
|
||
}
|
||
|
||
public moveTab(tab: Tab, nextId?: string) {
|
||
let rangeData: {
|
||
id: string,
|
||
start: number,
|
||
end: number
|
||
};
|
||
if (tab.model instanceof Editor && tab.model.editor.protyle.toolbar.range) {
|
||
const blockElement = hasClosestBlock(tab.model.editor.protyle.toolbar.range.startContainer);
|
||
if (blockElement) {
|
||
const startEnd = getSelectionOffset(blockElement, undefined, tab.model.editor.protyle.toolbar.range);
|
||
rangeData = {
|
||
id: blockElement.getAttribute("data-node-id"),
|
||
start: startEnd.start,
|
||
end: startEnd.end
|
||
};
|
||
}
|
||
}
|
||
this.element.querySelector(".layout-tab-container").append(tab.panelElement);
|
||
if (rangeData && tab.model instanceof Editor) {
|
||
// DOM 移动后 range 会变化
|
||
const range = focusByOffset(tab.model.editor.protyle.wysiwyg.element.querySelector(`[data-node-id="${rangeData.id}"]`), rangeData.start, rangeData.end);
|
||
if (range) {
|
||
tab.model.editor.protyle.toolbar.range = range;
|
||
}
|
||
}
|
||
if (nextId) {
|
||
// 只能用 find https://github.com/siyuan-note/siyuan/issues/3455
|
||
this.children.find((item, index) => {
|
||
if (item.id === nextId) {
|
||
this.children.splice(index, 0, tab);
|
||
return true;
|
||
}
|
||
});
|
||
} else {
|
||
this.children.push(tab);
|
||
}
|
||
if (this.children.length > window.siyuan.config.fileTree.maxOpenTabCount) {
|
||
this.removeOverCounter();
|
||
}
|
||
|
||
const oldWnd = tab.parent;
|
||
if (oldWnd.children.length === 1) {
|
||
oldWnd.children = [];
|
||
oldWnd.remove();
|
||
} else {
|
||
oldWnd.children.find((item, index) => {
|
||
if (item.id === tab.id) {
|
||
oldWnd.children.splice(index, 1);
|
||
resizeTabs();
|
||
return true;
|
||
}
|
||
});
|
||
if (!oldWnd.headersElement.querySelector(".item--focus")) {
|
||
let latestHeadElement: HTMLElement;
|
||
Array.from(oldWnd.headersElement.children).forEach((headItem: HTMLElement) => {
|
||
if (!latestHeadElement) {
|
||
latestHeadElement = headItem;
|
||
} else if (headItem.getAttribute("data-activetime") > latestHeadElement.getAttribute("data-activetime")) {
|
||
latestHeadElement = headItem;
|
||
}
|
||
});
|
||
if (latestHeadElement) {
|
||
oldWnd.switchTab(latestHeadElement, true);
|
||
}
|
||
}
|
||
}
|
||
|
||
// https://github.com/siyuan-note/siyuan/issues/13551
|
||
this.switchTab(tab.headElement);
|
||
|
||
tab.parent = this;
|
||
hideAllElements(["toolbar"]);
|
||
/// #if !BROWSER
|
||
setTabPosition();
|
||
/// #endif
|
||
}
|
||
|
||
public split(direction: Config.TUILayoutDirection) {
|
||
if (this.children.length === 1 && !this.children[0].headElement) {
|
||
// 场景：没有打开的文档，点击标签面板打开
|
||
return this;
|
||
}
|
||
const wnd = new Wnd(this.app, direction);
|
||
if (direction === this.parent.direction) {
|
||
this.parent.addWnd(wnd, this.id);
|
||
} else if (this.parent.children.length === 1) {
|
||
// layout 仅含一个时，只需更新 direction
|
||
this.parent.direction = direction;
|
||
if (direction === "tb") {
|
||
this.parent.element.classList.add("fn__flex-column");
|
||
this.parent.element.classList.remove("fn__flex");
|
||
} else {
|
||
this.parent.element.classList.remove("fn__flex-column");
|
||
this.parent.element.classList.add("fn__flex");
|
||
}
|
||
this.parent.addWnd(wnd, this.id);
|
||
} else {
|
||
this.parent.children.find((item, index) => {
|
||
if (item.id === this.id) {
|
||
const layout = new Layout({
|
||
resize: item.resize,
|
||
direction,
|
||
});
|
||
this.parent.addLayout(layout, item.id);
|
||
const movedWnd = this.parent.children.splice(index, 1)[0];
|
||
if (movedWnd.resize) {
|
||
movedWnd.element.previousElementSibling.remove();
|
||
movedWnd.resize = undefined;
|
||
}
|
||
layout.addWnd.call(layout, movedWnd);
|
||
layout.addWnd.call(layout, wnd);
|
||
|
||
if (direction === "tb" && movedWnd.element.style.width) {
|
||
layout.element.style.width = movedWnd.element.style.width;
|
||
layout.element.classList.remove("fn__flex-1");
|
||
movedWnd.element.style.width = "";
|
||
movedWnd.element.classList.add("fn__flex-1");
|
||
} else if (direction === "lr" && movedWnd.element.style.height) {
|
||
layout.element.style.height = movedWnd.element.style.height;
|
||
layout.element.classList.remove("fn__flex-1");
|
||
movedWnd.element.style.height = "";
|
||
movedWnd.element.classList.add("fn__flex-1");
|
||
}
|
||
return true;
|
||
}
|
||
});
|
||
}
|
||
return wnd;
|
||
}
|
||
|
||
private remove() {
|
||
let layout = this.parent;
|
||
let element = this.element;
|
||
let id = this.id;
|
||
while (layout && layout.children.length === 1 && "center" !== layout.type) {
|
||
id = layout.id;
|
||
element = layout.element;
|
||
layout = layout.parent;
|
||
}
|
||
|
||
layout.children.find((item, index) => {
|
||
if (item.id === id) {
|
||
if (layout.children.length > 1) {
|
||
let previous = layout.children[index - 1];
|
||
if (index === 0) {
|
||
previous = layout.children[1];
|
||
}
|
||
if (layout.children.length === 2) {
|
||
if (layout.direction === "lr") {
|
||
previous.element.style.width = "";
|
||
} else {
|
||
previous.element.style.height = "";
|
||
}
|
||
previous.resize = undefined;
|
||
previous.element.classList.add("fn__flex-1");
|
||
}
|
||
// https://github.com/siyuan-note/siyuan/issues/5844
|
||
if (layout.children.length > 2 && index === 0) {
|
||
layout.children[1].resize = undefined;
|
||
}
|
||
}
|
||
layout.children.splice(index, 1);
|
||
return true;
|
||
}
|
||
});
|
||
if (element.previousElementSibling && element.previousElementSibling.classList.contains("layout__resize")) {
|
||
element.previousElementSibling.remove();
|
||
} else if (element.nextElementSibling && element.nextElementSibling.classList.contains("layout__resize")) {
|
||
element.nextElementSibling.remove();
|
||
}
|
||
element.remove();
|
||
fixWndFlex1(layout);
|
||
resizeTabs();
|
||
}
|
||
}
|