From 1b6d831a07da354d1704dbf299bf1c8b83938d3f Mon Sep 17 00:00:00 2001
From: Vanessa <lly219@gmail.com>
Date: Tue, 10 Jun 2025 22:47:29 +0800
Subject: [PATCH] :art: https://github.com/siyuan-note/siyuan/issues/10414

---
 app/src/protyle/render/av/layout.ts        | 46 +++++++++++++++++-----
 app/src/protyle/render/av/openMenuPanel.ts |  8 ++--
 2 files changed, 41 insertions(+), 13 deletions(-)

diff --git a/app/src/protyle/render/av/layout.ts b/app/src/protyle/render/av/layout.ts
index 0e885ce21..6dd974b10 100644
--- a/app/src/protyle/render/av/layout.ts
+++ b/app/src/protyle/render/av/layout.ts
@@ -56,12 +56,12 @@ export const getLayoutHTML = (data: IAV) => {
     <button class="b3-menu__separator"></button>
     <button class="b3-menu__item" data-type="nobg">
         <div class="av__layout">
-            <div data-type="set-layoyt" data-view-type="${data.viewType}" class="av__layout-item${data.viewType === "table" ? " av__layout-item--select" : ""}">
+            <div data-type="set-layout" data-view-type="table" class="av__layout-item${data.viewType === "table" ? " av__layout-item--select" : ""}">
                 <svg><use xlink:href="#iconTable"></use></svg>
                 <div class="fn__hr"></div>
                 <div>${window.siyuan.languages.table}</div>
             </div>
-            <div data-type="set-layoyt" data-view-type="${data.viewType}" class="av__layout-item${data.viewType === "gallery" ? " av__layout-item--select" : ""}">
+            <div data-type="set-layout" data-view-type="gallery" class="av__layout-item${data.viewType === "gallery" ? " av__layout-item--select" : ""}">
                 <svg><use xlink:href="#iconGallery"></use></svg>
                 <div class="fn__hr"></div>
                 <div>${window.siyuan.languages.gallery}</div>
@@ -134,13 +134,13 @@ export const bindLayoutEvent = (options: {
             blockID,
             data: !checked
         }]);
-            options.blockElement.querySelectorAll(".av__gallery-img").forEach(item => {
-                if (checked) {
-                    item.classList.add("av__gallery-img--fit");
-                } else {
-                    item.classList.remove("av__gallery-img--fit");
-                }
-            })
+        options.blockElement.querySelectorAll(".av__gallery-img").forEach(item => {
+            if (checked) {
+                item.classList.add("av__gallery-img--fit");
+            } else {
+                item.classList.remove("av__gallery-img--fit");
+            }
+        });
     });
     const toggleIconElement = options.menuElement.querySelector('.b3-switch[data-type="toggle-gallery-icon"]') as HTMLInputElement;
     toggleIconElement.addEventListener("change", () => {
@@ -177,3 +177,31 @@ export const bindLayoutEvent = (options: {
         }]);
     });
 };
+
+export const updateLayout = (options: {
+    view: IAVGallery
+    nodeElement: Element,
+    protyle: IProtyle,
+    target: HTMLElement
+}) => {
+    if (options.target.classList.contains("av__layout-item--select")) {
+        return;
+    }
+    const avID = options.nodeElement.getAttribute("data-av-id");
+    const blockID = options.nodeElement.getAttribute("data-node-id");
+    const layout = options.target.getAttribute("data-view-type");
+    transaction(options.protyle, [{
+        action: "changeAttrViewLayout",
+        avID,
+        blockID,
+        layout
+    }], [{
+        action: "changeAttrViewLayout",
+        avID,
+        blockID,
+        layout: options.view.type
+    }]);
+    options.nodeElement.setAttribute("data-view-type", layout);
+    options.target.parentElement.querySelector(".av__layout-item--select").classList.remove("av__layout-item--select");
+    options.target.classList.add("av__layout-item--select");
+};
diff --git a/app/src/protyle/render/av/openMenuPanel.ts b/app/src/protyle/render/av/openMenuPanel.ts
index a48139994..55cf82749 100644
--- a/app/src/protyle/render/av/openMenuPanel.ts
+++ b/app/src/protyle/render/av/openMenuPanel.ts
@@ -37,7 +37,7 @@ import {updateCellsValue} from "./cell";
 import {openCalcMenu} from "./calc";
 import {escapeAttr, escapeHtml} from "../../../util/escape";
 import {Dialog} from "../../../dialog";
-import {bindLayoutEvent, getLayoutHTML} from "./layout";
+import {bindLayoutEvent, getLayoutHTML, updateLayout} from "./layout";
 import {setGalleryCover, setGallerySize} from "./gallery/util";
 
 export const openMenuPanel = (options: {
@@ -1382,11 +1382,11 @@ export const openMenuPanel = (options: {
                     event.stopPropagation();
                     break;
                 } else if (type === "set-layout") {
-                    setPageSize({
+                    updateLayout({
                         target,
                         protyle: options.protyle,
-                        avID,
-                        nodeElement: options.blockElement
+                        nodeElement: options.blockElement,
+                        view: data.view as IAVGallery
                     });
                     event.preventDefault();
                     event.stopPropagation();