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

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

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