Vanessa 2023-05-22 11:33:06 +08:00
parent cc9dce106a
commit 5b33f9c9ce
7 changed files with 230 additions and 336 deletions

View file

@ -31,6 +31,7 @@
@import "business/export";
@import "business/card";
@import "business/custom";
@import "business/resize";
/*
.status: 2

View file

@ -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;
}
}
}

View 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;
}
}

View file

@ -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) => {

View file

@ -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--;
}

View file

@ -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
}

View 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);
}
};
});
}