Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2025-12-16 14:40:12 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

♻️

Browse source
This commit is contained in:
Vanessa 2025-11-14 23:55:07 +08:00
parent 92d2700852
commit e62064ce5b
2 changed files with 54 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

94
app/src/protyle/render/av/render.ts
View file

@ -502,7 +502,7 @@ export const avRender = async (element: Element, protyle: IProtyle, cb?: (data:
}; };
} }
const activeIds: IIds[] = []; const activeIds: IIds[] = [];
e.querySelectorAll(".av__cell--active").forEach((item: HTMLElement) => { e.querySelectorAll(".av__cell--active").forEach((item) => {
activeIds.push({ activeIds.push({
groupId: (hasClosestByClassName(item, "av__body") as HTMLElement).dataset.groupId || "", groupId: (hasClosestByClassName(item, "av__body") as HTMLElement).dataset.groupId || "",
rowId: (hasClosestByClassName(item, "av__row") as HTMLElement).dataset.id, rowId: (hasClosestByClassName(item, "av__row") as HTMLElement).dataset.id,
@ -624,9 +624,23 @@ const refreshTimeouts: {
[key: string]: number; [key: string]: number;
} = {}; } = {};
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) => 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;
};
export const refreshAV = (protyle: IProtyle, operation: IOperation) => { export const refreshAV = (protyle: IProtyle, operation: IOperation) => {
if (operation.action === "setAttrViewName") { if (operation.action === "setAttrViewName") {
getAVElements(protyle, operation.id).forEach((item: HTMLElement) => { getAVElements(protyle, operation.id).forEach((item) => {
const titleElement = item.querySelector(".av__title") as HTMLElement; const titleElement = item.querySelector(".av__title") as HTMLElement;
if (!titleElement) { if (!titleElement) {
return; return;
@ -634,8 +648,10 @@ export const refreshAV = (protyle: IProtyle, operation: IOperation) => {
titleElement.textContent = operation.data; titleElement.textContent = operation.data;
titleElement.dataset.title = operation.data; titleElement.dataset.title = operation.data;
}); });
} else if (operation.action === "setAttrViewColWidth") { return;
getAVElements(protyle, operation.avID, operation.viewID).forEach((item: HTMLElement) => { }
if (operation.action === "setAttrViewColWidth") {
getAVElements(protyle, operation.avID, operation.viewID).forEach((item) => {
const cellElement = item.querySelector(`.av__cell[data-col-id="${operation.id}"]`) as HTMLElement; const cellElement = item.querySelector(`.av__cell[data-col-id="${operation.id}"]`) as HTMLElement;
if (!cellElement || cellElement.style.width === operation.data) { if (!cellElement || cellElement.style.width === operation.data) {
return; return;
@ -645,8 +661,9 @@ export const refreshAV = (protyle: IProtyle, operation: IOperation) => {
}); });
}); });
return; return;
} else if (operation.action === "setAttrViewCardSize") { }
getAVElements(protyle, operation.avID, operation.viewID).forEach((item: HTMLElement) => { if (operation.action === "setAttrViewCardSize") {
getAVElements(protyle, operation.avID, operation.viewID).forEach((item) => {
if (item.getAttribute("data-av-type") === "kanban") { if (item.getAttribute("data-av-type") === "kanban") {
item.querySelectorAll(".av__kanban-group").forEach(galleryItem => { item.querySelectorAll(".av__kanban-group").forEach(galleryItem => {
galleryItem.classList.remove("av__kanban-group--small", "av__kanban-group--big"); galleryItem.classList.remove("av__kanban-group--small", "av__kanban-group--big");
@ -668,15 +685,17 @@ export const refreshAV = (protyle: IProtyle, operation: IOperation) => {
} }
}); });
return; return;
} else if (operation.action === "setAttrViewCardAspectRatio") { }
getAVElements(protyle, operation.avID, operation.viewID).forEach((item: HTMLElement) => { if (operation.action === "setAttrViewCardAspectRatio") {
getAVElements(protyle, operation.avID, operation.viewID).forEach((item) => {
item.querySelectorAll(".av__gallery-cover").forEach(coverItem => { item.querySelectorAll(".av__gallery-cover").forEach(coverItem => {
coverItem.className = "av__gallery-cover av__gallery-cover--" + operation.data; coverItem.className = "av__gallery-cover av__gallery-cover--" + operation.data;
}); });
}); });
return; return;
} else if (operation.action === "hideAttrViewName") { }
getAVElements(protyle, operation.avID, operation.viewID).forEach((item: HTMLElement) => { if (operation.action === "hideAttrViewName") {
getAVElements(protyle, operation.avID, operation.viewID).forEach((item) => {
const titleElement = item.querySelector(".av__title"); const titleElement = item.querySelector(".av__title");
if (titleElement) { if (titleElement) {
if (!operation.data) { if (!operation.data) {
@ -697,16 +716,18 @@ export const refreshAV = (protyle: IProtyle, operation: IOperation) => {
} }
}); });
return; return;
} else if (operation.action === "setAttrViewWrapField") { }
getAVElements(protyle, operation.avID, operation.viewID).forEach((item: HTMLElement) => { if (operation.action === "setAttrViewWrapField") {
getAVElements(protyle, operation.avID, operation.viewID).forEach((item) => {
item.querySelectorAll(".av__cell").forEach(fieldItem => { item.querySelectorAll(".av__cell").forEach(fieldItem => {
fieldItem.setAttribute("data-wrap", operation.data.toString()); fieldItem.setAttribute("data-wrap", operation.data.toString());
}); });
}); });
return; return;
} else if (operation.action === "setAttrViewFillColBackgroundColor") { }
getAVElements(protyle, operation.avID, operation.viewID).forEach((item: HTMLElement) => { if (operation.action === "setAttrViewFillColBackgroundColor") {
item.querySelectorAll(".av__kanban-group").forEach(item => { getAVElements(protyle, operation.avID, operation.viewID).forEach((avItem: HTMLElement) => {
avItem.querySelectorAll(".av__kanban-group").forEach(item => {
if (!operation.data) { if (!operation.data) {
item.removeAttribute("style"); item.removeAttribute("style");
return; return;
@ -722,8 +743,9 @@ export const refreshAV = (protyle: IProtyle, operation: IOperation) => {
}); });
}); });
return; return;
} else if (operation.action === "setAttrViewFitImage") { }
getAVElements(protyle, operation.avID, operation.viewID).forEach((item: HTMLElement) => { if (operation.action === "setAttrViewFitImage") {
getAVElements(protyle, operation.avID, operation.viewID).forEach((item) => {
const imgElement = item.querySelector(".av__gallery-img"); const imgElement = item.querySelector(".av__gallery-img");
if (operation.data) { if (operation.data) {
imgElement.classList.add("av__gallery-img--fit"); imgElement.classList.add("av__gallery-img--fit");
@ -732,8 +754,9 @@ export const refreshAV = (protyle: IProtyle, operation: IOperation) => {
} }
}); });
return; return;
} else if (operation.action === "setAttrViewShowIcon") { }
getAVElements(protyle, operation.avID, operation.viewID).forEach((item: HTMLElement) => { if (operation.action === "setAttrViewShowIcon") {
getAVElements(protyle, operation.avID, operation.viewID).forEach((item) => {
item.querySelectorAll('.av__cell[data-dtype="block"] .b3-menu__avemoji, .av__cell[data-dtype="relation"] .b3-menu__avemoji').forEach(cellItem => { item.querySelectorAll('.av__cell[data-dtype="block"] .b3-menu__avemoji, .av__cell[data-dtype="relation"] .b3-menu__avemoji').forEach(cellItem => {
if (operation.data) { if (operation.data) {
cellItem.classList.remove("fn__none"); cellItem.classList.remove("fn__none");
@ -743,15 +766,17 @@ export const refreshAV = (protyle: IProtyle, operation: IOperation) => {
}); });
}); });
return; return;
} else if (operation.action === "setAttrViewColWrap") { }
getAVElements(protyle, operation.avID, operation.viewID).forEach((item: HTMLElement) => { if (operation.action === "setAttrViewColWrap") {
getAVElements(protyle, operation.avID, operation.viewID).forEach((item) => {
item.querySelectorAll(`.av__cell[data-col-id="${operation.id}"],.av__cell[data-field-id="${operation.id}"]`).forEach(cellItem => { 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()); cellItem.setAttribute("data-wrap", operation.data.toString());
}); });
}); });
return; return;
} else if (operation.action === "foldAttrViewGroup") { }
getAVElements(protyle, operation.avID).forEach((item: HTMLElement) => { if (operation.action === "foldAttrViewGroup") {
getAVElements(protyle, operation.avID).forEach((item) => {
const foldElement = item.querySelector(`[data-type="av-group-fold"][data-id="${operation.id}"]`); const foldElement = item.querySelector(`[data-type="av-group-fold"][data-id="${operation.id}"]`);
if (foldElement) { if (foldElement) {
if (operation.data) { if (operation.data) {
@ -777,12 +802,12 @@ export const refreshAV = (protyle: IProtyle, operation: IOperation) => {
attrElement.removeAttribute("data-rendering"); attrElement.removeAttribute("data-rendering");
renderAVAttribute(attrElement.parentElement, attrElement.dataset.nodeId, protyle); renderAVAttribute(attrElement.parentElement, attrElement.dataset.nodeId, protyle);
} }
getAVElements(protyle, avID).forEach((item: HTMLElement) => { getAVElements(protyle, avID).forEach((item) => {
item.removeAttribute("data-render"); item.removeAttribute("data-render");
if (operation.action === "sortAttrViewRow") { if (operation.action === "sortAttrViewRow") {
clearSelect(["cell"], item); clearSelect(["cell"], item);
} else if (operation.action === "sortAttrViewCol") { } else if (operation.action === "sortAttrViewCol") {
item.querySelectorAll(".av__cell--active").forEach((item: HTMLElement) => { item.querySelectorAll(".av__cell--active").forEach((item) => {
item.classList.remove("av__cell--active"); item.classList.remove("av__cell--active");
item.querySelector(".av__drag-fill")?.remove(); item.querySelector(".av__drag-fill")?.remove();
}); });
@ -800,10 +825,7 @@ export const refreshAV = (protyle: IProtyle, operation: IOperation) => {
}); });
} else if (operation.action === "removeAttrViewView") { } else if (operation.action === "removeAttrViewView") {
item.querySelectorAll(".av__body").forEach((bodyItem: HTMLElement) => { item.querySelectorAll(".av__body").forEach((bodyItem: HTMLElement) => {
const viewID = getViewIDByAVElement(item); bodyItem.dataset.pageSize = item.querySelector(`.av__views > .layout-tab-bar .item[data-id="${getViewIDByAVElement(item)}"]`)?.getAttribute("data-page");
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") { } else if (operation.action === "sortAttrViewView" && operation.data === "unRefresh") {
const viewTabElement = item.querySelector(`.av__views > .layout-tab-bar > .item[data-id="${operation.id}"]`) as HTMLElement; const viewTabElement = item.querySelector(`.av__views > .layout-tab-bar > .item[data-id="${operation.id}"]`) as HTMLElement;
@ -860,17 +882,3 @@ export const refreshAV = (protyle: IProtyle, operation: IOperation) => {
}); });
}, ["insertAttrViewBlock"].includes(operation.action) ? 2 : 100); }, ["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;
};

6
app/src/protyle/wysiwyg/index.ts
View file

@ -754,21 +754,21 @@ export class WYSIWYG {
if (!newWidth || newWidth === oldWidth) { if (!newWidth || newWidth === oldWidth) {
return; return;
} }
const viewId = nodeElement.getAttribute(Constants.CUSTOM_SY_AV_VIEW); const viewID = nodeElement.getAttribute(Constants.CUSTOM_SY_AV_VIEW);
transaction(protyle, [{ transaction(protyle, [{
action: "setAttrViewColWidth", action: "setAttrViewColWidth",
id: dragColId, id: dragColId,
avID: avId, avID: avId,
data: newWidth + "px", data: newWidth + "px",
blockID, blockID,
viewID: viewId // https://github.com/siyuan-note/siyuan/issues/11019 viewID // https://github.com/siyuan-note/siyuan/issues/11019
}], [{ }], [{
action: "setAttrViewColWidth", action: "setAttrViewColWidth",
id: dragColId, id: dragColId,
avID: avId, avID: avId,
data: oldWidth + "px", data: oldWidth + "px",
blockID, blockID,
viewID: viewId viewID
}]); }]);
}; };
this.preventClick = true; this.preventClick = true;