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

🎨 https://github.com/siyuan-note/siyuan/issues/13623

Browse source
This commit is contained in:
Vanessa 2025-01-05 11:09:36 +08:00
parent bc5b2b2291
commit 87203b1364
4 changed files with 35 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

24
app/src/history/resizeSide.ts
View file

@ -2,37 +2,41 @@ import {Constants} from "../constants";
import {setStorageVal} from "../protyle/util/compatibility";
import {hasClosestByClassName} from "../protyle/util/hasClosest";
export const resizeSide = (targetElement: HTMLElement, element: HTMLElement, key:string) => {
export const resizeSide = (targetElement: HTMLElement, previousElement: HTMLElement, key?: string) => {
targetElement.addEventListener("mousedown", (event: MouseEvent & { target: HTMLElement }) => {
const dialogBodyElement = hasClosestByClassName(element, "b3-dialog__body");
if (!dialogBodyElement) {
const parentElement = hasClosestByClassName(previousElement, "b3-dialog__body") || hasClosestByClassName(previousElement, "protyle-util");
if (!parentElement) {
return;
}
dialogBodyElement.style.userSelect = "none";
parentElement.style.userSelect = "none";
parentElement.style.pointerEvents = "none";
const documentSelf = document;
documentSelf.ondragstart = () => false;
const x = event.clientX;
const width = element.clientWidth;
const maxWidth = dialogBodyElement.clientWidth - 256;
const width = previousElement.clientWidth;
const maxWidth = parentElement.clientWidth - 256;
documentSelf.onmousemove = (moveEvent: MouseEvent) => {
const newWidth = width + (moveEvent.clientX - x);
if (newWidth < 256 || newWidth > maxWidth) {
return;
}
element.style.width = newWidth + "px";
previousElement.style.width = newWidth + "px";
};
documentSelf.onmouseup = () => {
dialogBodyElement.style.userSelect = "auto";
parentElement.style.userSelect = "auto";
parentElement.style.pointerEvents = "";
documentSelf.onmousemove = null;
documentSelf.onmouseup = null;
documentSelf.ondragstart = null;
documentSelf.onselectstart = null;
documentSelf.onselect = null;
window.siyuan.storage[Constants.LOCAL_HISTORY][key] = element.clientWidth + "px";
setStorageVal(Constants.LOCAL_HISTORY, window.siyuan.storage[Constants.LOCAL_HISTORY]);
if (key) {
window.siyuan.storage[Constants.LOCAL_HISTORY][key] = previousElement.clientWidth + "px";
setStorageVal(Constants.LOCAL_HISTORY, window.siyuan.storage[Constants.LOCAL_HISTORY]);
}
};
});
};

21
app/src/protyle/toolbar/index.ts
View file

@ -28,9 +28,6 @@ import {blockRender} from "../render/blockRender";
/// #if !BROWSER
import {openBy} from "../../editor/util";
/// #endif
/// #if !MOBILE
import {moveResize} from "../../dialog/moveResize";
/// #endif
import {fetchPost} from "../../util/fetch";
import {isArrayEqual, isMobile} from "../../util/functions";
import * as dayjs from "dayjs";
@ -48,6 +45,7 @@ import {addScript} from "../util/addScript";
import {confirmDialog} from "../../dialog/confirmDialog";
import {pasteAsPlainText, pasteEscaped, pasteText} from "../util/paste";
import {escapeHtml} from "../../util/escape";
import {resizeSide} from "../../history/resizeSide";
export class Toolbar {
public element: HTMLElement;
@ -986,14 +984,6 @@ export class Toolbar {
});
}, Constants.TIMEOUT_LOAD);
};
/// #if !MOBILE
moveResize(this.subElement, () => {
const pinElement = headerElement.querySelector('[data-type="pin"]');
pinElement.querySelector("svg use").setAttribute("xlink:href", "#iconUnpin");
pinElement.setAttribute("aria-label", window.siyuan.languages.unpin);
this.subElement.firstElementChild.setAttribute("data-drag", "true");
});
/// #endif
const textElement = this.subElement.querySelector(".b3-text-field") as HTMLTextAreaElement;
if (types.includes("NodeHTMLBlock")) {
textElement.value = Lute.UnEscapeHTMLStr(renderElement.querySelector("protyle-html").getAttribute("data-content") || "");
@ -1296,7 +1286,7 @@ export class Toolbar {
this.subElement.style.width = "";
this.subElement.style.padding = "";
this.subElement.innerHTML = `<div style="max-height:50vh" class="fn__flex">
<div class="fn__flex-column" style="${isMobile() ? "width: 100%" : "width: 280px"}">
<div class="fn__flex-column" style="${isMobile() ? "width: 100%" : "width: 256px"}">
<div class="fn__flex" style="margin: 0 8px 4px 8px">
<input class="b3-text-field fn__flex-1"/>
<span class="fn__space"></span>
@ -1306,9 +1296,14 @@ export class Toolbar {
</div>
<div class="b3-list fn__flex-1 b3-list--background" style="position: relative"><img style="margin: 0 auto;display: block;width: 64px;height: 64px" src="/stage/loading-pure.svg"></div>
</div>
<div style="width: 520px;${isMobile() || window.outerWidth < window.outerWidth / 2 + 520 ? "display:none" : ""};overflow: auto;"></div>
<div class="toolbarResize" style=" cursor: col-resize;
box-shadow: 2px 0 0 0 var(--b3-theme-surface) inset, 3px 0 0 0 var(--b3-border-color) inset;
width: 5px;
margin-left: -2px;"></div>
<div style="width: 520px;${isMobile() || window.outerWidth < window.outerWidth / 2 + 520 ? "display:none;" : ""}overflow: auto;"></div>
</div>`;
const listElement = this.subElement.querySelector(".b3-list");
resizeSide(this.subElement.querySelector(".toolbarResize"), listElement.parentElement);
const previewElement = this.subElement.firstElementChild.lastElementChild;
let previewPath: string;
listElement.addEventListener("mouseover", (event) => {

13
app/src/protyle/ui/initUI.ts
View file

@ -12,6 +12,9 @@ import {getContenteditableElement, getLastBlock} from "../wysiwyg/getBlock";
import {genEmptyElement} from "../../block/util";
import {transaction} from "../wysiwyg/transaction";
import {focusByRange} from "../util/selection";
/// #if !MOBILE
import {moveResize} from "../../dialog/moveResize";
/// #endif
export const initUI = (protyle: IProtyle) => {
protyle.contentElement = document.createElement("div");
@ -47,6 +50,16 @@ export const initUI = (protyle: IProtyle) => {
protyle.element.appendChild(protyle.toolbar.element);
protyle.element.appendChild(protyle.toolbar.subElement);
/// #if !MOBILE
moveResize(protyle.toolbar.subElement, () => {
const pinElement = protyle.toolbar.subElement.querySelector('.block__icons [data-type="pin"]');
if (pinElement) {
pinElement.querySelector("svg use").setAttribute("xlink:href", "#iconUnpin");
pinElement.setAttribute("aria-label", window.siyuan.languages.unpin);
protyle.toolbar.subElement.firstElementChild.setAttribute("data-drag", "true");
}
});
/// #endif
protyle.element.append(protyle.highlight.styleElement);

1
app/src/protyle/util/resize.ts
View file

@ -23,7 +23,6 @@ export const recordBeforeResizeTop = () => {
if (!topElement) {
return;
}
console.log(topElement);
topElement.setAttribute("data-resize-top", topElement.getBoundingClientRect().top.toString());
}
});