diff --git a/app/src/protyle/render/av/col.ts b/app/src/protyle/render/av/col.ts index 9b3d28b66..6db90c4df 100644 --- a/app/src/protyle/render/av/col.ts +++ b/app/src/protyle/render/av/col.ts @@ -402,12 +402,14 @@ export const bindEditEvent = (options: { id: colId, avID, data: wrapElement.checked, - blockID: options.blockID + blockID: options.blockID, + viewID: options.data.viewID, }], [{ action: "setAttrViewColWrap", id: colId, avID, data: !wrapElement.checked, + viewID: options.data.viewID, blockID: options.blockID }]); colData.wrap = wrapElement.checked; @@ -693,6 +695,7 @@ export const showColMenu = (protyle: IProtyle, blockElement: Element, cellElemen const colId = cellElement.getAttribute("data-col-id"); const avID = blockElement.getAttribute("data-av-id"); const blockID = blockElement.getAttribute("data-node-id"); + const viewID = blockElement.getAttribute(Constants.CUSTOM_SY_AV_VIEW); const oldValue = cellElement.querySelector(".av__celltext").textContent.trim(); const oldDesc = cellElement.dataset.desc; const menu = new Menu(Constants.MENU_AV_HEADER_CELL, () => { @@ -975,7 +978,7 @@ export const showColMenu = (protyle: IProtyle, blockElement: Element, cellElemen action: "syncAttrViewTableColWidth", keyID: colId, avID, - id: blockElement.getAttribute(Constants.CUSTOM_SY_AV_VIEW), + id: viewID, }]); } }); @@ -992,13 +995,15 @@ export const showColMenu = (protyle: IProtyle, blockElement: Element, cellElemen id: colId, avID, data: wrapElement.checked, - blockID + blockID, + viewID }], [{ action: "setAttrViewColWrap", id: colId, avID, data: !wrapElement.checked, - blockID + blockID, + viewID }]); menu.close(); }); @@ -1051,7 +1056,7 @@ export const showColMenu = (protyle: IProtyle, blockElement: Element, cellElemen }, (response) => { duplicateCol({ blockElement, - viewID: blockElement.getAttribute(Constants.CUSTOM_SY_AV_VIEW), + viewID, protyle, colId, data: response.data diff --git a/app/src/protyle/render/av/gallery/util.ts b/app/src/protyle/render/av/gallery/util.ts index d9d142a2c..4af86610d 100644 --- a/app/src/protyle/render/av/gallery/util.ts +++ b/app/src/protyle/render/av/gallery/util.ts @@ -4,6 +4,7 @@ import {hasClosestByClassName} from "../../../util/hasClosest"; import {unicode2Emoji} from "../../../../emoji"; import {getColIconByType} from "../col"; import {avContextmenu} from "../action"; +import {Constants} from "../../../../constants"; export const setGalleryCover = (options: { view: IAVGallery @@ -128,6 +129,7 @@ export const setGallerySize = (options: { const menu = new Menu(); const avID = options.nodeElement.getAttribute("data-av-id"); const blockID = options.nodeElement.getAttribute("data-node-id"); + const viewID = options.nodeElement.getAttribute(Constants.CUSTOM_SY_AV_VIEW); const targetNameElement = options.target.querySelector(".b3-menu__accelerator"); menu.addItem({ iconHTML: "", @@ -138,12 +140,14 @@ export const setGallerySize = (options: { action: "setAttrViewCardSize", avID, blockID, - data: 0 + data: 0, + viewID }], [{ action: "setAttrViewCardSize", avID, blockID, - data: options.view.cardSize + data: options.view.cardSize, + viewID }]); options.view.cardSize = 0; targetNameElement.textContent = window.siyuan.languages.small; @@ -158,12 +162,14 @@ export const setGallerySize = (options: { action: "setAttrViewCardSize", avID, blockID, - data: 1 + data: 1, + viewID }], [{ action: "setAttrViewCardSize", avID, blockID, - data: options.view.cardSize + data: options.view.cardSize, + viewID }]); options.view.cardSize = 1; targetNameElement.textContent = window.siyuan.languages.medium; @@ -178,12 +184,14 @@ export const setGallerySize = (options: { action: "setAttrViewCardSize", avID, blockID, - data: 2 + data: 2, + viewID }], [{ action: "setAttrViewCardSize", avID, blockID, - data: options.view.cardSize + data: options.view.cardSize, + viewID }]); options.view.cardSize = 2; targetNameElement.textContent = window.siyuan.languages.large; @@ -222,6 +230,7 @@ export const setGalleryRatio = (options: { const menu = new Menu(); const avID = options.nodeElement.getAttribute("data-av-id"); const blockID = options.nodeElement.getAttribute("data-node-id"); + const viewID = options.nodeElement.getAttribute(Constants.CUSTOM_SY_AV_VIEW); const targetNameElement = options.target.querySelector(".b3-menu__accelerator"); [0, 1, 2, 3, 4, 5, 6].forEach(ratio => { menu.addItem({ @@ -233,12 +242,14 @@ export const setGalleryRatio = (options: { action: "setAttrViewCardAspectRatio", avID, blockID, - data: ratio + data: ratio, + viewID }], [{ action: "setAttrViewCardAspectRatio", avID, blockID, - data: options.view.cardAspectRatio + data: options.view.cardAspectRatio, + viewID }]); options.view.cardAspectRatio = ratio; targetNameElement.textContent = getCardAspectRatio(ratio); diff --git a/app/src/protyle/render/av/layout.ts b/app/src/protyle/render/av/layout.ts index 0d59ff72e..440e6aa7e 100644 --- a/app/src/protyle/render/av/layout.ts +++ b/app/src/protyle/render/av/layout.ts @@ -118,57 +118,60 @@ export const bindLayoutEvent = (options: { menuElement: HTMLElement blockElement: Element }) => { + const avID = options.blockElement.getAttribute("data-av-id"); + const blockID = options.blockElement.getAttribute("data-node-id"); + const viewID = options.blockElement.getAttribute(Constants.CUSTOM_SY_AV_VIEW); const toggleTitleElement = options.menuElement.querySelector('.b3-switch[data-type="toggle-view-title"]') as HTMLInputElement; toggleTitleElement.addEventListener("change", () => { - const avID = options.blockElement.getAttribute("data-av-id"); - const blockID = options.blockElement.getAttribute("data-node-id"); const checked = toggleTitleElement.checked; transaction(options.protyle, [{ action: "hideAttrViewName", avID, blockID, - data: !checked + data: !checked, + viewID }], [{ action: "hideAttrViewName", avID, blockID, - data: checked + data: checked, + viewID }]); options.data.view.hideAttrViewName = !checked; }); const toggleIconElement = options.menuElement.querySelector('.b3-switch[data-type="toggle-entries-icons"]') as HTMLInputElement; toggleIconElement.addEventListener("change", () => { - const avID = options.blockElement.getAttribute("data-av-id"); - const blockID = options.blockElement.getAttribute("data-node-id"); const checked = toggleIconElement.checked; transaction(options.protyle, [{ action: "setAttrViewShowIcon", avID, blockID, - data: checked + data: checked, + viewID }], [{ action: "setAttrViewShowIcon", avID, blockID, - data: !checked + data: !checked, + viewID }]); options.data.view.showIcon = checked; }); const toggleWrapElement = options.menuElement.querySelector('.b3-switch[data-type="toggle-entries-wrap"]') as HTMLInputElement; toggleWrapElement.addEventListener("change", () => { - const avID = options.blockElement.getAttribute("data-av-id"); - const blockID = options.blockElement.getAttribute("data-node-id"); const checked = toggleWrapElement.checked; transaction(options.protyle, [{ action: "setAttrViewWrapField", avID, blockID, - data: checked + data: checked, + viewID }], [{ action: "setAttrViewWrapField", avID, blockID, - data: !checked + data: !checked, + viewID }]); getFieldsByData(options.data).forEach(item => { item.wrap = checked; @@ -180,26 +183,24 @@ export const bindLayoutEvent = (options: { } const toggleFitElement = options.menuElement.querySelector('.b3-switch[data-type="toggle-gallery-fit"]') as HTMLInputElement; toggleFitElement.addEventListener("change", () => { - const avID = options.blockElement.getAttribute("data-av-id"); - const blockID = options.blockElement.getAttribute("data-node-id"); const checked = toggleFitElement.checked; transaction(options.protyle, [{ action: "setAttrViewFitImage", avID, blockID, - data: checked + data: checked, + viewID }], [{ action: "setAttrViewFitImage", avID, blockID, - data: !checked + data: !checked, + viewID }]); (options.data.view as IAVGallery).fitImage = checked; }); const toggleNameElement = options.menuElement.querySelector('.b3-switch[data-type="toggle-gallery-name"]') as HTMLInputElement; toggleNameElement.addEventListener("change", () => { - const avID = options.blockElement.getAttribute("data-av-id"); - const blockID = options.blockElement.getAttribute("data-node-id"); const checked = toggleNameElement.checked; transaction(options.protyle, [{ action: "setAttrViewDisplayFieldName", @@ -219,19 +220,19 @@ export const bindLayoutEvent = (options: { } const toggleBgElement = options.menuElement.querySelector('.b3-switch[data-type="toggle-kanban-bg"]') as HTMLInputElement; toggleBgElement.addEventListener("change", () => { - const avID = options.blockElement.getAttribute("data-av-id"); - const blockID = options.blockElement.getAttribute("data-node-id"); const checked = toggleBgElement.checked; transaction(options.protyle, [{ action: "setAttrViewFillColBackgroundColor", avID, blockID, - data: checked + data: checked, + viewID }], [{ action: "setAttrViewFillColBackgroundColor", avID, blockID, - data: !checked + data: !checked, + viewID }]); (options.data.view as IAVKanban).fillColBackgroundColor = checked; }); diff --git a/app/src/protyle/render/av/render.ts b/app/src/protyle/render/av/render.ts index 136fa01fa..9a0fcd72b 100644 --- a/app/src/protyle/render/av/render.ts +++ b/app/src/protyle/render/av/render.ts @@ -649,6 +649,9 @@ export const refreshAV = (protyle: IProtyle, operation: IOperation) => { } if (operation.action === "setAttrViewCardSize") { Array.from(protyle.wysiwyg.element.querySelectorAll(`.av[data-av-id="${operation.avID}"]`)).forEach((item: HTMLElement) => { + if (item.getAttribute(Constants.CUSTOM_SY_AV_VIEW) !== operation.viewID) { + return; + } if (item.getAttribute("data-av-type") === "kanban") { item.querySelectorAll(".av__kanban-group").forEach(galleryItem => { galleryItem.classList.remove("av__kanban-group--small", "av__kanban-group--big"); @@ -673,6 +676,9 @@ export const refreshAV = (protyle: IProtyle, operation: IOperation) => { } if (operation.action === "setAttrViewCardAspectRatio") { Array.from(protyle.wysiwyg.element.querySelectorAll(`.av[data-av-id="${operation.avID}"]`)).forEach((item: HTMLElement) => { + if (item.getAttribute(Constants.CUSTOM_SY_AV_VIEW) !== operation.viewID) { + return; + } item.querySelectorAll(".av__gallery-cover").forEach(coverItem => { coverItem.className = "av__gallery-cover av__gallery-cover--" + operation.data; }); @@ -681,6 +687,9 @@ export const refreshAV = (protyle: IProtyle, operation: IOperation) => { } if (operation.action === "hideAttrViewName") { Array.from(protyle.wysiwyg.element.querySelectorAll(`.av[data-av-id="${operation.avID}"]`)).forEach((item: HTMLElement) => { + if (item.getAttribute(Constants.CUSTOM_SY_AV_VIEW) !== operation.viewID) { + return; + } const titleElement = item.querySelector(".av__title"); if (titleElement) { if (!operation.data) { @@ -704,6 +713,9 @@ export const refreshAV = (protyle: IProtyle, operation: IOperation) => { } if (operation.action === "setAttrViewWrapField") { Array.from(protyle.wysiwyg.element.querySelectorAll(`.av[data-av-id="${operation.avID}"]`)).forEach((item: HTMLElement) => { + if (item.getAttribute(Constants.CUSTOM_SY_AV_VIEW) !== operation.viewID) { + return; + } item.querySelectorAll(".av__cell").forEach(fieldItem => { fieldItem.setAttribute("data-wrap", operation.data.toString()); }); @@ -712,6 +724,9 @@ export const refreshAV = (protyle: IProtyle, operation: IOperation) => { } if (operation.action === "setAttrViewFillColBackgroundColor") { Array.from(protyle.wysiwyg.element.querySelectorAll(`.av[data-av-id="${operation.avID}"]`)).forEach((avItem: HTMLElement) => { + if (avItem.getAttribute(Constants.CUSTOM_SY_AV_VIEW) !== operation.viewID) { + return; + } avItem.querySelectorAll(".av__kanban-group").forEach(item => { if (!operation.data) { item.removeAttribute("style"); @@ -730,17 +745,24 @@ export const refreshAV = (protyle: IProtyle, operation: IOperation) => { return; } if (operation.action === "setAttrViewFitImage") { - Array.from(protyle.wysiwyg.element.querySelectorAll(`.av[data-av-id="${operation.avID}"] .av__gallery-img`)).forEach((item: HTMLElement) => { + Array.from(protyle.wysiwyg.element.querySelectorAll(`.av[data-av-id="${operation.avID}"]`)).forEach((item: HTMLElement) => { + if (item.getAttribute(Constants.CUSTOM_SY_AV_VIEW) !== operation.viewID) { + return; + } + const imgElement = item.querySelector(".av__gallery-img"); if (operation.data) { - item.classList.add("av__gallery-img--fit"); + imgElement.classList.add("av__gallery-img--fit"); } else { - item.classList.remove("av__gallery-img--fit"); + imgElement.classList.remove("av__gallery-img--fit"); } }); return; } if (operation.action === "setAttrViewShowIcon") { Array.from(protyle.wysiwyg.element.querySelectorAll(`.av[data-av-id="${operation.avID}"]`)).forEach((item: HTMLElement) => { + if (item.getAttribute(Constants.CUSTOM_SY_AV_VIEW) !== operation.viewID) { + return; + } item.querySelectorAll('.av__cell[data-dtype="block"] .b3-menu__avemoji, .av__cell[data-dtype="relation"] .b3-menu__avemoji').forEach(cellItem => { if (operation.data) { cellItem.classList.remove("fn__none"); @@ -753,6 +775,9 @@ export const refreshAV = (protyle: IProtyle, operation: IOperation) => { } if (operation.action === "setAttrViewColWrap") { Array.from(protyle.wysiwyg.element.querySelectorAll(`.av[data-av-id="${operation.avID}"]`)).forEach((item: HTMLElement) => { + if (item.getAttribute(Constants.CUSTOM_SY_AV_VIEW) !== operation.viewID) { + return; + } item.querySelectorAll(`.av__cell[data-col-id="${operation.id}"],.av__cell[data-field-id="${operation.id}"]`).forEach(cellItem => { cellItem.setAttribute("data-wrap", operation.data.toString()); });