github/siyuan
4
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2025-05-17 01:21:14 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Vanessa 2023-01-25 13:18:12 +08:00
parent 981e598149
commit d44bc4d93a
2 changed files with 70 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
app/src/assets/scss/_block.scss
View File

@ -33,35 +33,80 @@
}
}
&__nwse,
&__ew,
&__ns {
&__rd,
&__ld,
&__lt,
&__rt,
&__r,
&__l,
&__t,
&__d {
position: absolute;
}
&__nwse {
&__rd {
height: 16px;
width: 8px;
width: 16px;
cursor: nwse-resize;
right: -8px;
bottom: -8px;
}
&__ns {
height: 8px;
cursor: ns-resize;
left: 0;
right: 0;
&__lt {
height: 16px;
width: 16px;
cursor: nwse-resize;
left: -8px;
top: -8px;
}
&__ld {
height: 16px;
width: 16px;
cursor: nesw-resize;
left: -8px;
bottom: -8px;
}
&__ew {
&__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: 0;
top: 8px;
right: -8px;
bottom: 8px;
}
&__l {
width: 8px;
cursor: ew-resize;
top: 8px;
left: -8px;
bottom: 8px;
}
}
}
}

25
app/src/block/Panel.ts
View File

@ -71,19 +71,18 @@ export class BlockPanel {
if (!iconsElement) {
x = event.clientX - this.element.clientWidth;
y = event.clientY - this.element.clientHeight;
iconsElement = hasClosestByClassName(event.target, "block__nwse");
type = "nwse-resize";
if (!iconsElement) {
iconsElement = hasClosestByClassName(event.target, "block__ns");
type = "ns-resize";
if (!iconsElement) {
iconsElement = hasClosestByClassName(event.target, "block__ew");
type = "ew-resize";
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";
@ -106,10 +105,10 @@ export class BlockPanel {
this.element.style.left = Math.max(positionX, 0) + "px";
this.element.style.top = Math.max(positionY, Constants.SIZE_TOOLBAR_HEIGHT) + "px";
} else {
if (positionX > 200 && positionX < window.innerWidth && (type === "nwse-resize" || type === "ew-resize")) {
if (positionX > 200 && positionX < window.innerWidth && (type === "block__rd" || type === "block__r")) {
this.element.style.width = positionX + "px";
}
if (positionY > 65 && positionY < window.innerHeight - Constants.SIZE_TOOLBAR_HEIGHT && (type === "nwse-resize" || type === "ns-resize")) {
if (positionY > 65 && positionY < window.innerHeight - Constants.SIZE_TOOLBAR_HEIGHT && (type === "block__rd" || type === "block__d")) {
this.element.style.height = positionY + "px";
this.element.style.maxHeight = "";
}
@ -262,7 +261,7 @@ export class BlockPanel {
});
}
if (html) {
html += '</div><div class="block__nwse"></div><div class="block__ew"></div><div class="block__ns"></div>';
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>';
}
this.element.innerHTML = html;
const observer = new IntersectionObserver((e) => {