From 27ffdc45d7089fbeec89cbd803ea6faacb876a0a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yingyi=20/=20=E9=A2=96=E9=80=B8?=
 <49649786+Zuoqiu-Yingyi@users.noreply.github.com>
Date: Wed, 29 Nov 2023 16:09:43 +0800
Subject: [PATCH] :bug: Fixed the issue that the gutters of attribute view
 overlapped with layout resize bar (#9772)

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

diff --git a/app/src/assets/scss/business/_av.scss b/app/src/assets/scss/business/_av.scss
index 118cb50bb..8100d7124 100644
--- a/app/src/assets/scss/business/_av.scss
+++ b/app/src/assets/scss/business/_av.scss
@@ -63,11 +63,8 @@
 
   &__gutters {
     @extend .protyle-gutters;
-    position: fixed;
-    top: 0;
-    left: -44px;
-    opacity: 0;
-    display: flex;
+    display: none;
+    z-index: 2;
 
     svg {
       height: 25px;
@@ -108,7 +105,7 @@
       }
 
       .av__gutters {
-        opacity: 1;
+        display: flex;
       }
     }
 
diff --git a/app/src/protyle/render/av/action.ts b/app/src/protyle/render/av/action.ts
index ec14a8670..86df8ad5c 100644
--- a/app/src/protyle/render/av/action.ts
+++ b/app/src/protyle/render/av/action.ts
@@ -69,7 +69,7 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
         return true;
     }
 
-    const gutterElement = hasClosestByClassName(event.target, "ariaLabel");
+    const gutterElement = hasClosestByClassName(event.target, "av__gutter");
     if (gutterElement && gutterElement.parentElement.classList.contains("av__gutters")) {
         const rowElement = hasClosestByClassName(gutterElement, "av__row");
         if (!rowElement) {
diff --git a/app/src/protyle/render/av/render.ts b/app/src/protyle/render/av/render.ts
index d43962b34..a3dcbd02e 100644
--- a/app/src/protyle/render/av/render.ts
+++ b/app/src/protyle/render/av/render.ts
@@ -115,8 +115,8 @@ style="width: ${column.width || "200px"}">${getCalcValue(column) || '<svg><use x
                 data.rows.forEach((row: IAVRow) => {
                     tableHTML += `<div class="av__row" data-id="${row.id}">
 <div class="av__gutters">
-    <button class="ariaLabel" data-action="add" data-position="right" aria-label="${isMac() ? window.siyuan.languages.addBelowAbove : window.siyuan.languages.addBelowAbove.replace("⌥", "Alt+")}"><svg><use xlink:href="#iconAdd"></use></svg></button>
-    <button class="ariaLabel" draggable="true" data-position="right" aria-label="${window.siyuan.languages.rowTip}"><svg><use xlink:href="#iconDrag"></use></svg></button>
+    <button class="av__gutter ariaLabel" data-action="add" data-position="right" aria-label="${isMac() ? window.siyuan.languages.addBelowAbove : window.siyuan.languages.addBelowAbove.replace("⌥", "Alt+")}"><svg><use xlink:href="#iconAdd"></use></svg></button>
+    <button class="av__gutter ariaLabel" draggable="true" data-position="right" aria-label="${window.siyuan.languages.rowTip}"><svg><use xlink:href="#iconDrag"></use></svg></button>
 </div>`;
                     if (pinIndex > -1) {
                         tableHTML += '<div class="av__colsticky"><div class="av__firstcol"><svg><use xlink:href="#iconUncheck"></use></svg></div>';
diff --git a/app/src/protyle/wysiwyg/index.ts b/app/src/protyle/wysiwyg/index.ts
index b3b717c8d..33433f3df 100644
--- a/app/src/protyle/wysiwyg/index.ts
+++ b/app/src/protyle/wysiwyg/index.ts
@@ -1459,7 +1459,13 @@ export class WYSIWYG {
                     // database 行块标
                     const rowElement = hasClosestByClassName(event.target, "av__row");
                     if (rowElement && rowElement.dataset.id) {
-                        rowElement.firstElementChild.setAttribute("style", `left:${rowElement.parentElement.parentElement.getBoundingClientRect().left - 44}px;top:${rowElement.getBoundingClientRect().top}px`);
+                        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`;
+                        }
                     }
                     protyle.gutter.render(protyle, nodeElement, this.element);
                 }