From e9c07f1dc3f7a92c06af358b632a314d74bd1d19 Mon Sep 17 00:00:00 2001 From: Vanessa Date: Mon, 22 May 2023 10:32:54 +0800 Subject: [PATCH] :recycle: https://github.com/siyuan-note/siyuan/issues/7676 --- app/src/assets/scss/business/_block.scss | 146 +++++++++++------------ app/src/block/Panel.ts | 2 +- app/src/dialog/index.ts | 129 +++++++++++++++++++- app/src/protyle/toolbar/index.ts | 18 +-- 4 files changed, 204 insertions(+), 91 deletions(-) diff --git a/app/src/assets/scss/business/_block.scss b/app/src/assets/scss/business/_block.scss index 19d763c15..82e066d88 100644 --- a/app/src/assets/scss/business/_block.scss +++ b/app/src/assets/scss/business/_block.scss @@ -23,91 +23,88 @@ z-index: 206; } - &--move { - & > .block { - &__icons { - cursor: move; - border-radius: 4px 4px 0 0; + & > .block { + &__icons { + border-radius: 4px 4px 0 0; - .block__icon { - opacity: 1; - } + .block__icon { + opacity: 1; } + } - &__rd, - &__ld, - &__lt, - &__rt, - &__r, - &__l, - &__t, - &__d { - position: absolute; - } + &__rd, + &__ld, + &__lt, + &__rt, + &__r, + &__l, + &__t, + &__d { + position: absolute; + } - &__rd { - height: 16px; - width: 16px; - cursor: nwse-resize; - right: -8px; - bottom: -8px; - } + &__rd { + height: 16px; + width: 16px; + cursor: nwse-resize; + right: -8px; + bottom: -8px; + } - &__lt { - height: 16px; - width: 16px; - cursor: nwse-resize; - left: -8px; - top: -8px; - } + &__lt { + height: 16px; + width: 16px; + cursor: nwse-resize; + left: -8px; + top: -8px; + } - &__ld { - height: 16px; - width: 16px; - cursor: nesw-resize; - left: -8px; - bottom: -8px; - } + &__ld { + height: 16px; + width: 16px; + cursor: nesw-resize; + left: -8px; + bottom: -8px; + } - &__rt { - height: 16px; - width: 16px; - cursor: nesw-resize; - top: -8px; - right: -8px; - } + &__rt { + height: 16px; + width: 16px; + cursor: nesw-resize; + top: -8px; + right: -8px; + } - &__d { - height: 8px; - cursor: ns-resize; - left: 8px; - right: 8px; - bottom: -8px; - } + &__d { + height: 8px; + cursor: ns-resize; + left: 8px; + right: 8px; + bottom: -8px; + } - &__t { - height: 8px; - cursor: ns-resize; - left: 8px; - right: 8px; - top: -8px; - } + &__t { + height: 8px; + cursor: ns-resize; + left: 8px; + right: 8px; + top: -8px; + } - &__r { - width: 8px; - cursor: ew-resize; - top: 8px; - right: -8px; - bottom: 8px; - } + &__r { + width: 8px; + cursor: ew-resize; + top: 8px; + right: -8px; + bottom: 8px; + } - &__l { - width: 8px; - cursor: ew-resize; - top: 8px; - left: -8px; - bottom: 8px; - } + &__l { + width: 8px; + cursor: ew-resize; + top: 8px; + left: -8px; + bottom: 8px; } } } @@ -173,7 +170,6 @@ background-color: var(--b3-list-icon-hover); } - &--show { opacity: 1; diff --git a/app/src/block/Panel.ts b/app/src/block/Panel.ts index 53404b43f..da2958090 100644 --- a/app/src/block/Panel.ts +++ b/app/src/block/Panel.ts @@ -45,7 +45,7 @@ export class BlockPanel { this.isBacklink = options.isBacklink; this.element = document.createElement("div"); - this.element.classList.add("block__popover", "block__popover--move", "block__popover--top"); + this.element.classList.add("block__popover", "block__popover--top"); const parentElement = hasClosestByClassName(this.targetElement, "block__popover", true); let level = 1; diff --git a/app/src/dialog/index.ts b/app/src/dialog/index.ts index 6f1d1fcdb..94dfc58fd 100644 --- a/app/src/dialog/index.ts +++ b/app/src/dialog/index.ts @@ -1,8 +1,10 @@ import {genUUID} from "../util/genID"; import {isMobile} from "../util/functions"; +import {hasClosestByClassName} from "../protyle/util/hasClosest"; +import {Constants} from "../constants"; export class Dialog { - private destroyCallback: (options?:IObject) => void; + private destroyCallback: (options?: IObject) => void; public element: HTMLElement; private id: string; private disableClose: boolean; @@ -13,7 +15,7 @@ export class Dialog { content: string, width?: string height?: string, - destroyCallback?: (options?:IObject) => void + destroyCallback?: (options?: IObject) => void disableClose?: boolean disableAnimation?: boolean }) { @@ -55,11 +57,127 @@ export class Dialog { this.element.classList.add("b3-dialog--open"); }); } - // https://github.com/siyuan-note/siyuan/issues/6783 - window.siyuan.menus.menu.remove(); + /// if !MOBILE + this.element.addEventListener("mousedown", (event: MouseEvent & { target: HTMLElement }) => { + + if (hasClosestByClassName(event.target, "block__icon")) { + return; + } + let iconsElement = hasClosestByClassName(event.target, "block__icons"); + let type = "move"; + let x = event.clientX - parseInt(this.element.style.left); + let y = event.clientY - parseInt(this.element.style.top); + const height = this.element.clientHeight; + const width = this.element.clientWidth; + if (!iconsElement) { + x = event.clientX; + y = event.clientY; + iconsElement = hasClosestByClassName(event.target, "block__rd") || + hasClosestByClassName(event.target, "block__r") || + hasClosestByClassName(event.target, "block__rt") || + hasClosestByClassName(event.target, "block__d") || + hasClosestByClassName(event.target, "block__l") || + hasClosestByClassName(event.target, "block__ld") || + hasClosestByClassName(event.target, "block__lt") || + hasClosestByClassName(event.target, "block__t"); + if (!iconsElement) { + return; + } + type = iconsElement.className; + } + const documentSelf = document; + this.element.style.userSelect = "none"; + + documentSelf.ondragstart = () => false; + // https://github.com/siyuan-note/siyuan/issues/6783 + window.siyuan.menus.menu.remove(); + + + documentSelf.onmousemove = (moveEvent: MouseEvent) => { + if (!this.element) { + return; + } + if (type === "move") { + let positionX = moveEvent.clientX - x; + let positionY = moveEvent.clientY - y; + if (positionX > window.innerWidth - width) { + positionX = window.innerWidth - width; + } + if (positionY > window.innerHeight - height) { + positionY = window.innerHeight - height; + } + this.element.style.left = Math.max(positionX, 0) + "px"; + this.element.style.top = Math.max(positionY, Constants.SIZE_TOOLBAR_HEIGHT) + "px"; + } else { + if (type === "block__r" && + moveEvent.clientX - x + width > 200 && moveEvent.clientX - x + width < window.innerWidth) { + this.element.style.width = moveEvent.clientX - x + width + "px"; + } else if (type === "block__d" && + moveEvent.clientY - y + height > 160 && moveEvent.clientY - y + height < window.innerHeight - Constants.SIZE_TOOLBAR_HEIGHT) { + this.element.style.height = moveEvent.clientY - y + height + "px"; + this.element.style.maxHeight = ""; + } else if (type === "block__t" && + moveEvent.clientY > Constants.SIZE_TOOLBAR_HEIGHT && y - moveEvent.clientY + height > 160) { + this.element.style.top = moveEvent.clientY + "px"; + this.element.style.maxHeight = ""; + this.element.style.height = (y - moveEvent.clientY + height) + "px"; + } else if (type === "block__l" && + moveEvent.clientX > 0 && x - moveEvent.clientX + width > 200) { + this.element.style.left = moveEvent.clientX + "px"; + this.element.style.width = (x - moveEvent.clientX + width) + "px"; + } else if (type === "block__rd" && + moveEvent.clientX - x + width > 200 && moveEvent.clientX - x + width < window.innerWidth && + moveEvent.clientY - y + height > 160 && moveEvent.clientY - y + height < window.innerHeight - Constants.SIZE_TOOLBAR_HEIGHT) { + this.element.style.height = moveEvent.clientY - y + height + "px"; + this.element.style.maxHeight = ""; + this.element.style.width = moveEvent.clientX - x + width + "px"; + } else if (type === "block__rt" && + moveEvent.clientX - x + width > 200 && moveEvent.clientX - x + width < window.innerWidth && + moveEvent.clientY > Constants.SIZE_TOOLBAR_HEIGHT && y - moveEvent.clientY + height > 160) { + this.element.style.width = moveEvent.clientX - x + width + "px"; + this.element.style.top = moveEvent.clientY + "px"; + this.element.style.maxHeight = ""; + this.element.style.height = (y - moveEvent.clientY + height) + "px"; + } else if (type === "block__lt" && + moveEvent.clientX > 0 && x - moveEvent.clientX + width > 200 && + moveEvent.clientY > Constants.SIZE_TOOLBAR_HEIGHT && y - moveEvent.clientY + height > 160) { + this.element.style.left = moveEvent.clientX + "px"; + this.element.style.width = (x - moveEvent.clientX + width) + "px"; + this.element.style.top = moveEvent.clientY + "px"; + this.element.style.maxHeight = ""; + this.element.style.height = (y - moveEvent.clientY + height) + "px"; + } else if (type === "block__ld" && + moveEvent.clientX > 0 && x - moveEvent.clientX + width > 200 && + moveEvent.clientY - y + height > 160 && moveEvent.clientY - y + height < window.innerHeight - Constants.SIZE_TOOLBAR_HEIGHT) { + this.element.style.left = moveEvent.clientX + "px"; + this.element.style.width = (x - moveEvent.clientX + width) + "px"; + this.element.style.height = moveEvent.clientY - y + height + "px"; + this.element.style.maxHeight = ""; + } + } + }; + + documentSelf.onmouseup = () => { + if (!this.element) { + return; + } + if (window.siyuan.dragElement) { + // 反向链接拖拽 https://ld246.com/article/1632915506502 + window.siyuan.dragElement.style.opacity = ""; + window.siyuan.dragElement = undefined; + } + this.element.style.userSelect = "auto"; + documentSelf.onmousemove = null; + documentSelf.onmouseup = null; + documentSelf.ondragstart = null; + documentSelf.onselectstart = null; + documentSelf.onselect = null; + }; + }); + /// #endif } - public destroy(options?:IObject) { + public destroy(options?: IObject) { this.element.remove(); // https://github.com/siyuan-note/siyuan/issues/6783 window.siyuan.menus.menu.remove(); @@ -93,5 +211,4 @@ export class Dialog { } }); } - } diff --git a/app/src/protyle/toolbar/index.ts b/app/src/protyle/toolbar/index.ts index 3ac01ae6e..15d9c6290 100644 --- a/app/src/protyle/toolbar/index.ts +++ b/app/src/protyle/toolbar/index.ts @@ -888,22 +888,22 @@ export class Toolbar { this.subElement.style.width = ""; this.subElement.style.padding = "0"; } - this.subElement.innerHTML = `
+ this.subElement.innerHTML = `
${title} - - + + - + - + - + - + - +
-
`; +
`; const autoHeight = () => { textElement.style.height = textElement.scrollHeight + "px"; if (isMobile()) {