From 5cad47203aa80a487de28c87072f0b5250f2285b Mon Sep 17 00:00:00 2001
From: Vanessa <lly219@gmail.com>
Date: Sun, 11 Jun 2023 22:01:30 +0800
Subject: [PATCH] :art: https://github.com/siyuan-note/siyuan/issues/7536
 gutter and resize

---
 app/src/assets/scss/business/_av.scss | 15 +++++++++++++++
 app/src/protyle/render/av/render.ts   | 17 ++++++++++-------
 app/src/protyle/util/resize.ts        | 17 ++++++++++++++++-
 3 files changed, 41 insertions(+), 8 deletions(-)

diff --git a/app/src/assets/scss/business/_av.scss b/app/src/assets/scss/business/_av.scss
index f813acc90..b1ca53e5e 100644
--- a/app/src/assets/scss/business/_av.scss
+++ b/app/src/assets/scss/business/_av.scss
@@ -1,5 +1,15 @@
 .av {
   user-select: none;
+  box-sizing: border-box;
+
+  &__gutters {
+    @extend .protyle-gutters;
+    position: absolute;
+    top: 5px;
+    left: -26px;
+    opacity: 0;
+    padding-right: 4px;
+  }
 
   &__mask {
     position: fixed;
@@ -18,6 +28,11 @@
   &__row {
     display: flex;
     border-bottom: 1px solid var(--b3-theme-surface-lighter);
+    position: relative;
+
+    &:hover .av__gutters {
+      opacity: 1;
+    }
 
     &--header .av__cell {
       display: flex;
diff --git a/app/src/protyle/render/av/render.ts b/app/src/protyle/render/av/render.ts
index 10000f71a..0cb7a092a 100644
--- a/app/src/protyle/render/av/render.ts
+++ b/app/src/protyle/render/av/render.ts
@@ -49,19 +49,22 @@ export const avRender = (element: Element) => {
 
                 // body
                 data.rows.forEach((row: IAVRow) => {
-                    tableHTML += `<div class="av__row" data-id="${row.id}"><div class="av__firstcol"><svg><use xlink:href="#iconUncheck"></use></svg></div>`;
+                    tableHTML += `<div class="av__row" data-id="${row.id}">
+<div class="av__gutters">
+    <button><svg><use xlink:href="#iconLine"></use></svg></button>
+</div>
+<div class="av__firstcol"><svg><use xlink:href="#iconUncheck"></use></svg></div>`;
                     row.cells.forEach((cell, index) => {
                         tableHTML += `<div class="av__cell" data-index="${index}" style="width: ${data.columns[index].width || 200}px;${cell.bgColor ? `background-color:${cell.bgColor};` : ""}${cell.color ? `color:${cell.color};` : ""}">${cell.renderValue?.content || ""}</div>`;
                     });
                     tableHTML += "<div></div></div>";
                 });
-                const paddingLeft = parseInt(e.parentElement.style.paddingLeft) - 20;
-                const paddingRight = parseInt(e.parentElement.style.paddingRight) - 20
-                // 48: padding for gutter icon
-                e.style.width = (e.parentElement.clientWidth - 48) + "px";
+                const paddingLeft = e.parentElement.style.paddingLeft;
+                const paddingRight = e.parentElement.style.paddingRight;
+                e.style.width = e.parentElement.clientWidth + "px";
                 e.style.alignSelf = "center";
                 e.firstElementChild.outerHTML = `<div>
-    <div style="padding-left: ${paddingLeft}px;padding-right: ${paddingRight}px">
+    <div style="padding-left: ${paddingLeft};padding-right: ${paddingRight};">
         <div>
             <div>tab1</div>
         </div>
@@ -70,7 +73,7 @@ export const avRender = (element: Element) => {
         </div>
     </div>
     <div class="av__scroll">
-        <div style="padding-left: ${paddingLeft}px;padding-right: ${paddingRight}px;float: left;">
+        <div style="padding-left: ${paddingLeft};padding-right: ${paddingRight};float: left;">
             ${tableHTML}
             <div class="block__icon block__icon--show">
                 <div class="fn__space"></div>
diff --git a/app/src/protyle/util/resize.ts b/app/src/protyle/util/resize.ts
index 26a6650b1..c2cf52738 100644
--- a/app/src/protyle/util/resize.ts
+++ b/app/src/protyle/util/resize.ts
@@ -3,10 +3,12 @@ import {setPadding} from "../ui/initUI";
 import {hasClosestBlock} from "./hasClosest";
 import {Constants} from "../../constants";
 
+let resizeTimeout: number;
 export const resize = (protyle: IProtyle) => {
     hideElements(["gutter"], protyle);
     setPadding(protyle);
-    setTimeout(() => {
+    clearTimeout(resizeTimeout);
+    resizeTimeout = window.setTimeout(() => {
         if (typeof echarts !== "undefined") {
             protyle.wysiwyg.element.querySelectorAll('[data-subtype="echarts"], [data-subtype="mindmap"]').forEach((chartItem: HTMLElement) => {
                 const chartInstance = echarts.getInstanceById(chartItem.firstElementChild.nextElementSibling.getAttribute("_echarts_instance_"));
@@ -15,6 +17,19 @@ export const resize = (protyle: IProtyle) => {
                 }
             });
         }
+        protyle.wysiwyg.element.querySelectorAll(".av").forEach((item: HTMLElement) => {
+            item.style.width = item.parentElement.clientWidth + "px";
+            if (item.getAttribute("data-render") === "true") {
+                const paddingLeft = item.parentElement.style.paddingLeft;
+                const paddingRight = item.parentElement.style.paddingRight;
+                const avHeaderElement = item.firstElementChild.firstElementChild as HTMLElement;
+                avHeaderElement.style.paddingLeft = paddingLeft;
+                avHeaderElement.style.paddingRight = paddingRight;
+                const avBodyElement = item.querySelector(".av__scroll").firstElementChild as HTMLElement
+                avBodyElement.style.paddingLeft = paddingLeft;
+                avBodyElement.style.paddingRight = paddingRight;
+            }
+        });
         // 保持光标位置不变 https://ld246.com/article/1673704873983/comment/1673765814595#comments
         if (!protyle.disabled && protyle.toolbar.range) {
             let rangeRect = protyle.toolbar.range.getBoundingClientRect();