mirror of
https://github.com/siyuan-note/siyuan.git
synced 2025-09-22 00:20:47 +02:00
This commit is contained in:
parent
cc9dce106a
commit
5b33f9c9ce
7 changed files with 230 additions and 336 deletions
|
@ -31,6 +31,7 @@
|
|||
@import "business/export";
|
||||
@import "business/card";
|
||||
@import "business/custom";
|
||||
@import "business/resize";
|
||||
|
||||
/*
|
||||
.status: 2
|
||||
|
|
|
@ -23,88 +23,11 @@
|
|||
z-index: 206;
|
||||
}
|
||||
|
||||
& > .block {
|
||||
&__icons {
|
||||
border-radius: 4px 4px 0 0;
|
||||
& > .block__icons {
|
||||
border-radius: 4px 4px 0 0;
|
||||
|
||||
.block__icon {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&__rd,
|
||||
&__ld,
|
||||
&__lt,
|
||||
&__rt,
|
||||
&__r,
|
||||
&__l,
|
||||
&__t,
|
||||
&__d {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
&__rd {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
cursor: nwse-resize;
|
||||
right: -8px;
|
||||
bottom: -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;
|
||||
}
|
||||
|
||||
&__rt {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
cursor: nesw-resize;
|
||||
top: -8px;
|
||||
right: -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;
|
||||
}
|
||||
|
||||
&__r {
|
||||
width: 8px;
|
||||
cursor: ew-resize;
|
||||
top: 8px;
|
||||
right: -8px;
|
||||
bottom: 8px;
|
||||
}
|
||||
|
||||
&__l {
|
||||
width: 8px;
|
||||
cursor: ew-resize;
|
||||
top: 8px;
|
||||
left: -8px;
|
||||
bottom: 8px;
|
||||
& > .resize__move {
|
||||
height: 42px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
80
app/src/assets/scss/business/resize.scss
Normal file
80
app/src/assets/scss/business/resize.scss
Normal file
|
@ -0,0 +1,80 @@
|
|||
.resize {
|
||||
&__move {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&__rd,
|
||||
&__ld,
|
||||
&__lt,
|
||||
&__rt,
|
||||
&__r,
|
||||
&__l,
|
||||
&__t,
|
||||
&__d {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
&__rd {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
cursor: nwse-resize;
|
||||
right: -8px;
|
||||
bottom: -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;
|
||||
}
|
||||
|
||||
&__rt {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
cursor: nesw-resize;
|
||||
top: -8px;
|
||||
right: -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;
|
||||
}
|
||||
|
||||
&__r {
|
||||
width: 8px;
|
||||
cursor: ew-resize;
|
||||
top: 8px;
|
||||
right: -8px;
|
||||
bottom: 8px;
|
||||
}
|
||||
|
||||
&__l {
|
||||
width: 8px;
|
||||
cursor: ew-resize;
|
||||
top: 8px;
|
||||
left: -8px;
|
||||
bottom: 8px;
|
||||
}
|
||||
}
|
|
@ -12,6 +12,7 @@ import {disabledProtyle} from "../protyle/util/onGet";
|
|||
import {fetchPost} from "../util/fetch";
|
||||
import {showMessage} from "../dialog/message";
|
||||
import {App} from "../index";
|
||||
import {moveResize} from "../dialog/moveResize";
|
||||
|
||||
export class BlockPanel {
|
||||
public element: HTMLElement;
|
||||
|
@ -66,134 +67,6 @@ export class BlockPanel {
|
|||
}
|
||||
}
|
||||
document.body.insertAdjacentElement("beforeend", this.element);
|
||||
this.element.addEventListener("mousedown", (event: MouseEvent & { target: HTMLElement }) => {
|
||||
document.querySelectorAll(".block__popover--top").forEach(item => {
|
||||
item.classList.remove("block__popover--top");
|
||||
});
|
||||
if (this.element && window.siyuan.blockPanels.length > 1) {
|
||||
this.element.classList.add("block__popover--top");
|
||||
}
|
||||
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;
|
||||
|
||||
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;
|
||||
if (type !== "move") {
|
||||
this.editors.forEach(item => {
|
||||
setPadding(item.protyle);
|
||||
});
|
||||
} else {
|
||||
const pinElement = this.element.firstElementChild.querySelector('[data-type="pin"]');
|
||||
pinElement.classList.add("block__icon--active");
|
||||
pinElement.setAttribute("aria-label", window.siyuan.languages.unpin);
|
||||
this.element.setAttribute("data-pin", "true");
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
if (this.targetElement) {
|
||||
this.targetElement.style.cursor = "wait";
|
||||
|
@ -219,6 +92,13 @@ export class BlockPanel {
|
|||
}
|
||||
});
|
||||
this.element.addEventListener("click", (event) => {
|
||||
document.querySelectorAll(".block__popover--top").forEach(item => {
|
||||
item.classList.remove("block__popover--top");
|
||||
});
|
||||
if (this.element && window.siyuan.blockPanels.length > 1) {
|
||||
this.element.classList.add("block__popover--top");
|
||||
}
|
||||
|
||||
let target = event.target as HTMLElement;
|
||||
while (target && !target.isEqualNode(this.element)) {
|
||||
if (target.classList.contains("block__icon") || target.classList.contains("block__logo")) {
|
||||
|
@ -247,6 +127,17 @@ export class BlockPanel {
|
|||
target = target.parentElement;
|
||||
}
|
||||
});
|
||||
moveResize(this.element, (type: string) => {
|
||||
if (type !== "move") {
|
||||
this.editors.forEach(item => {
|
||||
setPadding(item.protyle);
|
||||
});
|
||||
}
|
||||
const pinElement = this.element.firstElementChild.querySelector('[data-type="pin"]');
|
||||
pinElement.classList.add("block__icon--active");
|
||||
pinElement.setAttribute("aria-label", window.siyuan.languages.unpin);
|
||||
this.element.setAttribute("data-pin", "true");
|
||||
})
|
||||
this.render();
|
||||
}
|
||||
|
||||
|
@ -324,15 +215,15 @@ export class BlockPanel {
|
|||
let openHTML = "";
|
||||
/// #if !BROWSER
|
||||
if (this.nodeIds.length === 1) {
|
||||
openHTML = `<span data-type="open" class="block__icon b3-tooltips b3-tooltips__sw" aria-label="${window.siyuan.languages.openByNewWindow}"><svg><use xlink:href="#iconOpenWindow"></use></svg></span>
|
||||
openHTML = `<span data-type="open" class="block__icon block__icon--show b3-tooltips b3-tooltips__sw" aria-label="${window.siyuan.languages.openByNewWindow}"><svg><use xlink:href="#iconOpenWindow"></use></svg></span>
|
||||
<span class="fn__space"></span>`;
|
||||
}
|
||||
/// #endif
|
||||
let html = `<div class="block__icons block__icons--menu">
|
||||
<span class="fn__space fn__flex-1"></span>${openHTML}
|
||||
<span data-type="pin" class="block__icon b3-tooltips b3-tooltips__sw" aria-label="${window.siyuan.languages.pin}"><svg><use xlink:href="#iconPin"></use></svg></span>
|
||||
<span class="fn__space fn__flex-1 resize__move"></span>${openHTML}
|
||||
<span data-type="pin" class="block__icon block__icon--show b3-tooltips b3-tooltips__sw" aria-label="${window.siyuan.languages.pin}"><svg><use xlink:href="#iconPin"></use></svg></span>
|
||||
<span class="fn__space"></span>
|
||||
<span data-type="close" class="block__icon b3-tooltips b3-tooltips__sw" aria-label="${window.siyuan.languages.close}"><svg style="width: 10px"><use xlink:href="#iconClose"></use></svg></span>
|
||||
<span data-type="close" class="block__icon block__icon--show b3-tooltips b3-tooltips__sw" aria-label="${window.siyuan.languages.close}"><svg style="width: 10px"><use xlink:href="#iconClose"></use></svg></span>
|
||||
</div>
|
||||
<div class="block__content">`;
|
||||
if (this.nodeIds.length === 0) {
|
||||
|
@ -343,7 +234,7 @@ export class BlockPanel {
|
|||
});
|
||||
}
|
||||
if (html) {
|
||||
html += '</div><div class="block__rd"></div><div class="block__ld"></div><div class="block__lt"></div><div class="block__rt"></div><div class="block__r"></div><div class="block__d"></div><div class="block__t"></div><div class="block__l"></div>';
|
||||
html += '</div><div class="resize__rd"></div><div class="resize__ld"></div><div class="resize__lt"></div><div class="resize__rt"></div><div class="resize__r"></div><div class="resize__d"></div><div class="resize__t"></div><div class="resize__l"></div>';
|
||||
}
|
||||
this.element.innerHTML = html;
|
||||
const observer = new IntersectionObserver((e) => {
|
||||
|
|
|
@ -694,9 +694,6 @@ export const globalShortcut = (app: App) => {
|
|||
if (item.targetElement && item.element.getAttribute("data-pin") === "false" &&
|
||||
parseInt(item.element.getAttribute("data-level")) > (maxEditLevels[item.element.getAttribute("data-oid")] || 0)) {
|
||||
item.destroy();
|
||||
if (item.esc) {
|
||||
item.esc();
|
||||
}
|
||||
destroyBlock = true;
|
||||
i--;
|
||||
}
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
import {genUUID} from "../util/genID";
|
||||
import {isMobile} from "../util/functions";
|
||||
import {hasClosestByClassName} from "../protyle/util/hasClosest";
|
||||
import {Constants} from "../constants";
|
||||
import {moveResize} from "./moveResize";
|
||||
|
||||
export class Dialog {
|
||||
private destroyCallback: (options?: IObject) => void;
|
||||
|
@ -29,8 +28,9 @@ export class Dialog {
|
|||
<div class="b3-dialog__scrim"${options.transparent ? 'style="background-color:transparent"' : ""}></div>
|
||||
<div class="b3-dialog__container" style="width:${options.width || "auto"}">
|
||||
<svg ${(isMobile() && options.title) ? 'style="top:0;right:0;"' : ""} class="b3-dialog__close${this.disableClose ? " fn__none" : ""}"><use xlink:href="#iconCloseRound"></use></svg>
|
||||
<div class="b3-dialog__header${options.title ? "" : " fn__none"}" onselectstart="return false;">${options.title || ""}</div>
|
||||
<div class="resize__move b3-dialog__header${options.title ? "" : " fn__none"}" onselectstart="return false;">${options.title || ""}</div>
|
||||
<div style="height:${options.height || "auto"}">${options.content}</div>
|
||||
<div class="resize__rd"></div><div class="resize__ld"></div><div class="resize__lt"></div><div class="resize__rt"></div><div class="resize__r"></div><div class="resize__d"></div><div class="resize__t"></div><div class="resize__l"></div>
|
||||
</div></div>`;
|
||||
|
||||
this.element.querySelector(".b3-dialog__scrim").addEventListener("click", (event) => {
|
||||
|
@ -58,122 +58,7 @@ export class Dialog {
|
|||
});
|
||||
}
|
||||
/// 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;
|
||||
};
|
||||
});
|
||||
moveResize(this.element.querySelector(".b3-dialog__container"));
|
||||
/// #endif
|
||||
}
|
||||
|
||||
|
|
117
app/src/dialog/moveResize.ts
Normal file
117
app/src/dialog/moveResize.ts
Normal file
|
@ -0,0 +1,117 @@
|
|||
import {hasClosestByClassName} from "../protyle/util/hasClosest";
|
||||
import {Constants} from "../constants";
|
||||
|
||||
export const moveResize = (element: HTMLElement, afterCB?: (type: string) => void) => {
|
||||
element.addEventListener("mousedown", (event: MouseEvent & { target: HTMLElement }) => {
|
||||
let iconsElement = hasClosestByClassName(event.target, "resize__move");
|
||||
let x = event.clientX - parseInt(element.style.left);
|
||||
let y = event.clientY - parseInt(element.style.top);
|
||||
const height = element.clientHeight;
|
||||
const width = element.clientWidth;
|
||||
if (!iconsElement) {
|
||||
x = event.clientX;
|
||||
y = event.clientY;
|
||||
iconsElement = hasClosestByClassName(event.target, "resize__rd") ||
|
||||
hasClosestByClassName(event.target, "resize__r") ||
|
||||
hasClosestByClassName(event.target, "resize__rt") ||
|
||||
hasClosestByClassName(event.target, "resize__d") ||
|
||||
hasClosestByClassName(event.target, "resize__l") ||
|
||||
hasClosestByClassName(event.target, "resize__ld") ||
|
||||
hasClosestByClassName(event.target, "resize__lt") ||
|
||||
hasClosestByClassName(event.target, "resize__t");
|
||||
|
||||
}
|
||||
if (!iconsElement) {
|
||||
return;
|
||||
}
|
||||
const type = iconsElement.className.split("resize__")[1].split(" ")[0];
|
||||
const documentSelf = document;
|
||||
element.style.userSelect = "none";
|
||||
|
||||
documentSelf.ondragstart = () => false;
|
||||
|
||||
documentSelf.onmousemove = (moveEvent: MouseEvent) => {
|
||||
if (!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;
|
||||
}
|
||||
element.style.left = Math.max(positionX, 0) + "px";
|
||||
element.style.top = Math.max(positionY, Constants.SIZE_TOOLBAR_HEIGHT) + "px";
|
||||
} else {
|
||||
if (type === "r" &&
|
||||
moveEvent.clientX - x + width > 200 && moveEvent.clientX - x + width < window.innerWidth) {
|
||||
element.style.width = moveEvent.clientX - x + width + "px";
|
||||
} else if (type === "d" &&
|
||||
moveEvent.clientY - y + height > 160 && moveEvent.clientY - y + height < window.innerHeight - Constants.SIZE_TOOLBAR_HEIGHT) {
|
||||
element.style.height = moveEvent.clientY - y + height + "px";
|
||||
element.style.maxHeight = "";
|
||||
} else if (type === "t" &&
|
||||
moveEvent.clientY > Constants.SIZE_TOOLBAR_HEIGHT && y - moveEvent.clientY + height > 160) {
|
||||
element.style.top = moveEvent.clientY + "px";
|
||||
element.style.maxHeight = "";
|
||||
element.style.height = (y - moveEvent.clientY + height) + "px";
|
||||
} else if (type === "l" &&
|
||||
moveEvent.clientX > 0 && x - moveEvent.clientX + width > 200) {
|
||||
element.style.left = moveEvent.clientX + "px";
|
||||
element.style.width = (x - moveEvent.clientX + width) + "px";
|
||||
} else if (type === "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) {
|
||||
element.style.height = moveEvent.clientY - y + height + "px";
|
||||
element.style.maxHeight = "";
|
||||
element.style.width = moveEvent.clientX - x + width + "px";
|
||||
} else if (type === "rt" &&
|
||||
moveEvent.clientX - x + width > 200 && moveEvent.clientX - x + width < window.innerWidth &&
|
||||
moveEvent.clientY > Constants.SIZE_TOOLBAR_HEIGHT && y - moveEvent.clientY + height > 160) {
|
||||
element.style.width = moveEvent.clientX - x + width + "px";
|
||||
element.style.top = moveEvent.clientY + "px";
|
||||
element.style.maxHeight = "";
|
||||
element.style.height = (y - moveEvent.clientY + height) + "px";
|
||||
} else if (type === "lt" &&
|
||||
moveEvent.clientX > 0 && x - moveEvent.clientX + width > 200 &&
|
||||
moveEvent.clientY > Constants.SIZE_TOOLBAR_HEIGHT && y - moveEvent.clientY + height > 160) {
|
||||
element.style.left = moveEvent.clientX + "px";
|
||||
element.style.width = (x - moveEvent.clientX + width) + "px";
|
||||
element.style.top = moveEvent.clientY + "px";
|
||||
element.style.maxHeight = "";
|
||||
element.style.height = (y - moveEvent.clientY + height) + "px";
|
||||
} else if (type === "ld" &&
|
||||
moveEvent.clientX > 0 && x - moveEvent.clientX + width > 200 &&
|
||||
moveEvent.clientY - y + height > 160 && moveEvent.clientY - y + height < window.innerHeight - Constants.SIZE_TOOLBAR_HEIGHT) {
|
||||
element.style.left = moveEvent.clientX + "px";
|
||||
element.style.width = (x - moveEvent.clientX + width) + "px";
|
||||
element.style.height = moveEvent.clientY - y + height + "px";
|
||||
element.style.maxHeight = "";
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
documentSelf.onmouseup = () => {
|
||||
if (!element) {
|
||||
return;
|
||||
}
|
||||
if (window.siyuan.dragElement) {
|
||||
// 反向链接拖拽 https://ld246.com/article/1632915506502
|
||||
window.siyuan.dragElement.style.opacity = "";
|
||||
window.siyuan.dragElement = undefined;
|
||||
}
|
||||
element.style.userSelect = "auto";
|
||||
documentSelf.onmousemove = null;
|
||||
documentSelf.onmouseup = null;
|
||||
documentSelf.ondragstart = null;
|
||||
documentSelf.onselectstart = null;
|
||||
documentSelf.onselect = null;
|
||||
if (afterCB) {
|
||||
afterCB(type);
|
||||
}
|
||||
};
|
||||
});
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue