From d44bc4d93aa93985207aa0a909a025beb749bc9c Mon Sep 17 00:00:00 2001
From: Vanessa <lly219@gmail.com>
Date: Wed, 25 Jan 2023 13:18:12 +0800
Subject: [PATCH] :art: https://github.com/siyuan-note/siyuan/issues/3659

---
 app/src/assets/scss/_block.scss | 69 +++++++++++++++++++++++++++------
 app/src/block/Panel.ts          | 27 +++++++------
 2 files changed, 70 insertions(+), 26 deletions(-)

diff --git a/app/src/assets/scss/_block.scss b/app/src/assets/scss/_block.scss
index a4c934624..717e5f68c 100644
--- a/app/src/assets/scss/_block.scss
+++ b/app/src/assets/scss/_block.scss
@@ -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;
+        }
       }
     }
   }
diff --git a/app/src/block/Panel.ts b/app/src/block/Panel.ts
index e0ffc758e..18de398b3 100644
--- a/app/src/block/Panel.ts
+++ b/app/src/block/Panel.ts
@@ -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";
+                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) {
-                    iconsElement = hasClosestByClassName(event.target, "block__ns");
-                    type = "ns-resize";
-                    if (!iconsElement) {
-                        iconsElement = hasClosestByClassName(event.target, "block__ew");
-                        type = "ew-resize";
-                        if (!iconsElement) {
-                            return;
-                        }
-                    }
+                    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) => {