From 03546a8b1ece6c3fdfeda76f88bd7abdc84fabf0 Mon Sep 17 00:00:00 2001
From: Vanessa <lly219@gmail.com>
Date: Wed, 29 Nov 2023 16:41:47 +0800
Subject: [PATCH] :recycle: https://github.com/siyuan-note/siyuan/pull/9772

---
 app/src/assets/scss/business/_av.scss | 8 ++++++--
 app/src/protyle/render/av/action.ts   | 2 +-
 app/src/protyle/wysiwyg/index.ts      | 9 ++-------
 3 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/app/src/assets/scss/business/_av.scss b/app/src/assets/scss/business/_av.scss
index 8100d7124..8a91ae9fb 100644
--- a/app/src/assets/scss/business/_av.scss
+++ b/app/src/assets/scss/business/_av.scss
@@ -63,7 +63,11 @@
 
   &__gutters {
     @extend .protyle-gutters;
-    display: none;
+    position: fixed;
+    top: 0;
+    left: -44px;
+    opacity: 0;
+    display: flex;
     z-index: 2;
 
     svg {
@@ -105,7 +109,7 @@
       }
 
       .av__gutters {
-        display: flex;
+        opacity: 1;
       }
     }
 
diff --git a/app/src/protyle/render/av/action.ts b/app/src/protyle/render/av/action.ts
index 86df8ad5c..48c4c95f0 100644
--- a/app/src/protyle/render/av/action.ts
+++ b/app/src/protyle/render/av/action.ts
@@ -70,7 +70,7 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
     }
 
     const gutterElement = hasClosestByClassName(event.target, "av__gutter");
-    if (gutterElement && gutterElement.parentElement.classList.contains("av__gutters")) {
+    if (gutterElement) {
         const rowElement = hasClosestByClassName(gutterElement, "av__row");
         if (!rowElement) {
             return;
diff --git a/app/src/protyle/wysiwyg/index.ts b/app/src/protyle/wysiwyg/index.ts
index 33433f3df..1730e378f 100644
--- a/app/src/protyle/wysiwyg/index.ts
+++ b/app/src/protyle/wysiwyg/index.ts
@@ -1459,13 +1459,8 @@ export class WYSIWYG {
                     // database 行块标
                     const rowElement = hasClosestByClassName(event.target, "av__row");
                     if (rowElement && rowElement.dataset.id) {
-                        const scrollElement = hasClosestByClassName(rowElement, "av__scroll");
-                        const guttersElement = rowElement.querySelector<HTMLElement>(".av__gutters");
-                        if (scrollElement && guttersElement) {
-                            const width = guttersElement.offsetWidth;
-                            guttersElement.style.top = `${rowElement.getBoundingClientRect().top}px`;
-                            guttersElement.style.left = `${scrollElement.getBoundingClientRect().left - width}px`;
-                        }
+                        const guttersElement = rowElement.querySelector(".av__gutters");
+                        guttersElement.setAttribute("style", `left:${rowElement.parentElement.parentElement.getBoundingClientRect().left - guttersElement.clientWidth}px;top:${rowElement.getBoundingClientRect().top}px`);
                     }
                     protyle.gutter.render(protyle, nodeElement, this.element);
                 }