From 87203b13645a7c2a05df79d7076fe0eac08bab0a Mon Sep 17 00:00:00 2001 From: Vanessa Date: Sun, 5 Jan 2025 11:09:36 +0800 Subject: [PATCH] :art: https://github.com/siyuan-note/siyuan/issues/13623 --- app/src/history/resizeSide.ts | 24 ++++++++++++++---------- app/src/protyle/toolbar/index.ts | 21 ++++++++------------- app/src/protyle/ui/initUI.ts | 13 +++++++++++++ app/src/protyle/util/resize.ts | 1 - 4 files changed, 35 insertions(+), 24 deletions(-) diff --git a/app/src/history/resizeSide.ts b/app/src/history/resizeSide.ts index c5c0afc8a..e4d71d488 100644 --- a/app/src/history/resizeSide.ts +++ b/app/src/history/resizeSide.ts @@ -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]); + } }; }); }; diff --git a/app/src/protyle/toolbar/index.ts b/app/src/protyle/toolbar/index.ts index 5ed741c82..49ace8eab 100644 --- a/app/src/protyle/toolbar/index.ts +++ b/app/src/protyle/toolbar/index.ts @@ -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 = `
-
+
@@ -1306,9 +1296,14 @@ export class Toolbar {
-
+
+
`; 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) => { diff --git a/app/src/protyle/ui/initUI.ts b/app/src/protyle/ui/initUI.ts index cacfb0835..46488d422 100644 --- a/app/src/protyle/ui/initUI.ts +++ b/app/src/protyle/ui/initUI.ts @@ -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); diff --git a/app/src/protyle/util/resize.ts b/app/src/protyle/util/resize.ts index 9c42fe1fd..ccef5e2c9 100644 --- a/app/src/protyle/util/resize.ts +++ b/app/src/protyle/util/resize.ts @@ -23,7 +23,6 @@ export const recordBeforeResizeTop = () => { if (!topElement) { return; } - console.log(topElement); topElement.setAttribute("data-resize-top", topElement.getBoundingClientRect().top.toString()); } });