diff --git a/app/src/protyle/render/av/render.ts b/app/src/protyle/render/av/render.ts index 9a0fcd72b..23e75b52a 100644 --- a/app/src/protyle/render/av/render.ts +++ b/app/src/protyle/render/av/render.ts @@ -626,7 +626,7 @@ const refreshTimeouts: { export const refreshAV = (protyle: IProtyle, operation: IOperation) => { if (operation.action === "setAttrViewName") { - Array.from(protyle.wysiwyg.element.querySelectorAll(`.av[data-av-id="${operation.id}"]`)).forEach((item: HTMLElement) => { + getAVElements(protyle, operation.id).forEach((item: HTMLElement) => { const titleElement = item.querySelector(".av__title") as HTMLElement; if (!titleElement) { return; @@ -634,11 +634,10 @@ export const refreshAV = (protyle: IProtyle, operation: IOperation) => { titleElement.textContent = operation.data; titleElement.dataset.title = operation.data; }); - } - if (operation.action === "setAttrViewColWidth") { - Array.from(protyle.wysiwyg.element.querySelectorAll(`.av[data-av-id="${operation.avID}"]`)).forEach((item: HTMLElement) => { + } else if (operation.action === "setAttrViewColWidth") { + getAVElements(protyle, operation.avID, operation.viewID).forEach((item: HTMLElement) => { const cellElement = item.querySelector(`.av__cell[data-col-id="${operation.id}"]`) as HTMLElement; - if (!cellElement || cellElement.style.width === operation.data || item.getAttribute(Constants.CUSTOM_SY_AV_VIEW) !== operation.keyID) { + if (!cellElement || cellElement.style.width === operation.data) { return; } item.querySelectorAll(".av__row").forEach(rowItem => { @@ -646,12 +645,8 @@ export const refreshAV = (protyle: IProtyle, operation: IOperation) => { }); }); return; - } - 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; - } + } else if (operation.action === "setAttrViewCardSize") { + getAVElements(protyle, operation.avID, operation.viewID).forEach((item: HTMLElement) => { 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,23 +668,15 @@ export const refreshAV = (protyle: IProtyle, operation: IOperation) => { } }); return; - } - 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; - } + } else if (operation.action === "setAttrViewCardAspectRatio") { + getAVElements(protyle, operation.avID, operation.viewID).forEach((item: HTMLElement) => { item.querySelectorAll(".av__gallery-cover").forEach(coverItem => { coverItem.className = "av__gallery-cover av__gallery-cover--" + operation.data; }); }); return; - } - 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; - } + } else if (operation.action === "hideAttrViewName") { + getAVElements(protyle, operation.avID, operation.viewID).forEach((item: HTMLElement) => { const titleElement = item.querySelector(".av__title"); if (titleElement) { if (!operation.data) { @@ -710,24 +697,16 @@ export const refreshAV = (protyle: IProtyle, operation: IOperation) => { } }); return; - } - 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; - } + } else if (operation.action === "setAttrViewWrapField") { + getAVElements(protyle, operation.avID, operation.viewID).forEach((item: HTMLElement) => { item.querySelectorAll(".av__cell").forEach(fieldItem => { fieldItem.setAttribute("data-wrap", operation.data.toString()); }); }); return; - } - 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 => { + } else if (operation.action === "setAttrViewFillColBackgroundColor") { + getAVElements(protyle, operation.avID, operation.viewID).forEach((item: HTMLElement) => { + item.querySelectorAll(".av__kanban-group").forEach(item => { if (!operation.data) { item.removeAttribute("style"); return; @@ -743,12 +722,8 @@ export const refreshAV = (protyle: IProtyle, operation: IOperation) => { }); }); return; - } - if (operation.action === "setAttrViewFitImage") { - 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; - } + } else if (operation.action === "setAttrViewFitImage") { + getAVElements(protyle, operation.avID, operation.viewID).forEach((item: HTMLElement) => { const imgElement = item.querySelector(".av__gallery-img"); if (operation.data) { imgElement.classList.add("av__gallery-img--fit"); @@ -757,12 +732,8 @@ export const refreshAV = (protyle: IProtyle, operation: IOperation) => { } }); 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; - } + } else if (operation.action === "setAttrViewShowIcon") { + getAVElements(protyle, operation.avID, operation.viewID).forEach((item: HTMLElement) => { 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"); @@ -772,20 +743,15 @@ export const refreshAV = (protyle: IProtyle, operation: IOperation) => { }); }); return; - } - 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; - } + } else if (operation.action === "setAttrViewColWrap") { + getAVElements(protyle, operation.avID, operation.viewID).forEach((item: HTMLElement) => { 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()); }); }); return; - } - if (operation.action === "foldAttrViewGroup") { - Array.from(protyle.wysiwyg.element.querySelectorAll(`.av[data-av-id="${operation.avID}"]`)).forEach((item: HTMLElement) => { + } else if (operation.action === "foldAttrViewGroup") { + getAVElements(protyle, operation.avID).forEach((item: HTMLElement) => { const foldElement = item.querySelector(`[data-type="av-group-fold"][data-id="${operation.id}"]`); if (foldElement) { if (operation.data) { @@ -811,7 +777,7 @@ export const refreshAV = (protyle: IProtyle, operation: IOperation) => { attrElement.removeAttribute("data-rendering"); renderAVAttribute(attrElement.parentElement, attrElement.dataset.nodeId, protyle); } - Array.from(protyle.wysiwyg.element.querySelectorAll(`.av[data-av-id="${avID}"]`)).forEach((item: HTMLElement) => { + getAVElements(protyle, avID).forEach((item: HTMLElement) => { item.removeAttribute("data-render"); if (operation.action === "sortAttrViewRow") { clearSelect(["cell"], item); @@ -834,7 +800,10 @@ export const refreshAV = (protyle: IProtyle, operation: IOperation) => { }); } else if (operation.action === "removeAttrViewView") { item.querySelectorAll(".av__body").forEach((bodyItem: HTMLElement) => { - bodyItem.dataset.pageSize = item.querySelector(`.av__views > .layout-tab-bar .item[data-id="${item.getAttribute(Constants.CUSTOM_SY_AV_VIEW)}"]`)?.getAttribute("data-page"); + const viewID = getViewIDByAVElement(item); + if (viewID) { + bodyItem.dataset.pageSize = item.querySelector(`.av__views > .layout-tab-bar .item[data-id="${viewID}"]`)?.getAttribute("data-page"); + } }); } else if (operation.action === "sortAttrViewView" && operation.data === "unRefresh") { const viewTabElement = item.querySelector(`.av__views > .layout-tab-bar > .item[data-id="${operation.id}"]`) as HTMLElement; @@ -891,3 +860,17 @@ export const refreshAV = (protyle: IProtyle, operation: IOperation) => { }); }, ["insertAttrViewBlock"].includes(operation.action) ? 2 : 100); }; + +const getAVElements = (protyle: IProtyle, avID: string, viewID?: string): HTMLElement[] => { + const elements = Array.from(protyle.wysiwyg.element.querySelectorAll(`.av[data-av-id="${avID}"]`)) as HTMLElement[]; + if (viewID) { + return elements.filter((item: HTMLElement) => getViewIDByAVElement(item) === viewID); + } + return elements; +}; + +const getViewIDByAVElement = (avElement: HTMLElement): string | null => { + return avElement.getAttribute(Constants.CUSTOM_SY_AV_VIEW) + || avElement.querySelector(".layout-tab-bar .item--focus")?.getAttribute("data-id") // 旧版本的数据库块没有 CUSTOM_SY_AV_VIEW 属性,所以在视图元素上获取 viewID + || null; +}; diff --git a/app/src/protyle/wysiwyg/index.ts b/app/src/protyle/wysiwyg/index.ts index eb018d5f2..bafb3005e 100644 --- a/app/src/protyle/wysiwyg/index.ts +++ b/app/src/protyle/wysiwyg/index.ts @@ -761,14 +761,14 @@ export class WYSIWYG { avID: avId, data: newWidth + "px", blockID, - keyID: viewId // 仅前端使用,用于推送时不影响其他视图 https://github.com/siyuan-note/siyuan/issues/11019 + viewID: viewId // https://github.com/siyuan-note/siyuan/issues/11019 }], [{ action: "setAttrViewColWidth", id: dragColId, avID: avId, data: oldWidth + "px", blockID, - keyID: viewId + viewID: viewId }]); }; this.preventClick = true; diff --git a/app/src/types/index.d.ts b/app/src/types/index.d.ts index f42ff385b..0b41363e4 100644 --- a/app/src/types/index.d.ts +++ b/app/src/types/index.d.ts @@ -566,7 +566,7 @@ interface IOperation { srcIDs?: string[] // removeAttrViewBlock 专享 srcs?: IOperationSrcs[] // insertAttrViewBlock 专享 ignoreDefaultFill?: boolean // insertAttrViewBlock 专享 - viewID?: string // insertAttrViewBlock 专享 + viewID?: string // 多个属性视图操作使用,用于推送时不影响其他视图 name?: string // addAttrViewCol 专享 type?: TAVCol // addAttrViewCol 专享 deckID?: string // add/removeFlashcards 专享 diff --git a/kernel/model/attribute_view.go b/kernel/model/attribute_view.go index 1aa75fab0..60910112f 100644 --- a/kernel/model/attribute_view.go +++ b/kernel/model/attribute_view.go @@ -458,6 +458,7 @@ func syncAttrViewTableColWidth(operation *Operation) (err error) { } err = av.SaveAttributeView(attrView) + ReloadAttrView(attrView.ID) return }