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

🎨 https://github.com/siyuan-note/siyuan/issues/10414

Browse source
This commit is contained in:
Vanessa 2025-06-11 16:15:16 +08:00
parent b46100b29c
commit c4c889f75f
4 changed files with 54 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

28
app/src/protyle/render/av/col.ts
View file

@ -16,6 +16,7 @@ import {setPosition} from "../../../util/setPosition";
import {duplicateNameAddOne} from "../../../util/functions";
import {Dialog} from "../../../dialog";
import {escapeAriaLabel, escapeAttr, escapeHtml} from "../../../util/escape";
import {getFieldsByData} from "./view";
export const duplicateCol = (options: {
protyle: IProtyle,
@ -25,10 +26,11 @@ export const duplicateCol = (options: {
data: IAV,
}) => {
let newColData: IAVColumn;
options.data.view.columns.find((item: IAVColumn, index) => {
const fields = getFieldsByData(options.data);
fields.find((item: IAVColumn, index) => {
if (item.id === options.colId) {
newColData = JSON.parse(JSON.stringify(item));
options.data.view.columns.splice(index + 1, 0, newColData);
fields.splice(index + 1, 0, newColData);
return true;
}
});
@ -74,7 +76,7 @@ export const getEditHTML = (options: {
isCustomAttr: boolean
}) => {
let colData: IAVColumn;
options.data.view.columns.find((item) => {
getFieldsByData(options.data).find((item) => {
if (item.id === options.colId) {
colData = item;
return true;
@ -190,12 +192,6 @@ export const getEditHTML = (options: {
}
return `<div class="b3-menu__items">
${html}
<button class="b3-menu__separator" data-id="separator_4"></button>
<label class="b3-menu__item" data-type="wrap">
<span class="fn__flex-center">${window.siyuan.languages.wrap}</span>
<span class="fn__space fn__flex-1"></span>
<input data-type="wrap" type="checkbox" class="b3-switch b3-switch--menu" ${colData.wrap ? " checked" : ""}>
</label>
</div>
<div class="b3-menu__items fn__none">
<button class="b3-menu__item" data-type="nobg" data-col-id="${colData.id}">
@ -233,7 +229,7 @@ export const bindEditEvent = (options: {
}) => {
const avID = options.data.id;
const colId = options.menuElement.querySelector(".b3-menu__item").getAttribute("data-col-id");
const colData = options.data.view.columns.find((item: IAVColumn) => item.id === colId);
const colData = getFieldsByData(options.data).find((item: IAVColumn) => item.id === colId);
const nameElement = options.menuElement.querySelector('[data-type="name"]') as HTMLInputElement;
nameElement.addEventListener("blur", () => {
const newValue = nameElement.value;
@ -614,7 +610,7 @@ const addAttrViewColAnimation = (options: {
// https://github.com/siyuan-note/siyuan/issues/14724
let colData;
if (options.data) {
colData = options.data.view.columns.find((item => item.id === options.id));
colData = getFieldsByData(options.data).find((item => item.id === options.id));
}
openMenuPanel({
protyle: options.protyle,
@ -1122,7 +1118,7 @@ const removeColByMenu = (options: {
export const removeCol = (options: {
protyle: IProtyle,
data: IAV,
fields: IAVColumn[],
avID: string,
blockID: string,
isCustomAttr: boolean
@ -1134,10 +1130,10 @@ export const removeCol = (options: {
}) => {
const colId = options.menuElement.querySelector(".b3-menu__item").getAttribute("data-col-id");
let previousID = "";
const colData = options.data.view.columns.find((item: IAVColumn, index) => {
const colData = options.fields.find((item: IAVColumn, index) => {
if (item.id === colId) {
previousID = options.data.view.columns[index - 1]?.id;
options.data.view.columns.splice(index, 1);
previousID = options.fields[index - 1]?.id;
options.fields.splice(index, 1);
return true;
}
});
@ -1169,7 +1165,7 @@ export const removeCol = (options: {
if (options.isCustomAttr) {
options.avPanelElement.remove();
} else {
options.menuElement.innerHTML = getPropertiesHTML(options.data.view);
options.menuElement.innerHTML = getPropertiesHTML(options.fields);
setPosition(options.menuElement,
options.tabRect.right - options.menuElement.clientWidth, options.tabRect.bottom,
options.tabRect.height);

5
app/src/protyle/render/av/gallery/render.ts
View file

@ -84,7 +84,10 @@ export const renderGallery = (options: {
}
galleryHTML += '<div class="av__gallery-fields">';
item.values.forEach(cell => {
item.values.forEach((cell, fieldsIndex) => {
if (view.fields[fieldsIndex].hidden) {
return;
}
let checkClass = "";
if (cell.valueType === "checkbox") {
checkClass = cell.value?.checkbox?.checked ? " av__cell-check" : " av__cell-uncheck";

69
app/src/protyle/render/av/openMenuPanel.ts
View file

@ -23,7 +23,7 @@ import {assetMenu} from "../../../menus/protyle";
import {
addView,
bindSwitcherEvent,
bindViewEvent,
bindViewEvent, getFieldsByData,
getSwitcherHTML,
getViewHTML,
openViewMenu
@ -76,12 +76,13 @@ export const openMenuPanel = (options: {
const isCustomAttr = !options.blockElement.classList.contains("av");
const data = response.data as IAV;
let html;
const fields = getFieldsByData(data);
if (options.type === "config") {
html = getViewHTML(data);
} else if (options.type === "properties") {
html = getPropertiesHTML(data.view);
html = getPropertiesHTML(fields);
} else if (options.type === "sorts") {
html = getSortsHTML(data.view.columns, data.view.sorts);
html = getSortsHTML(fields, data.view.sorts);
} else if (options.type === "switcher") {
html = getSwitcherHTML(data.views, data.viewID);
} else if (options.type === "filters") {
@ -93,14 +94,14 @@ export const openMenuPanel = (options: {
} else if (options.type === "edit") {
if (options.editData) {
if (options.editData.previousID) {
data.view.columns.find((item, index) => {
fields.find((item, index) => {
if (item.id === options.editData.previousID) {
data.view.columns.splice(index + 1, 0, options.editData.colData);
fields.splice(index + 1, 0, options.editData.colData);
return true;
}
});
} else {
data.view.columns.splice(0, 0, options.editData.colData);
fields.splice(0, 0, options.editData.colData);
}
}
html = getEditHTML({protyle: options.protyle, data, colId: options.colId, isCustomAttr});
@ -248,7 +249,7 @@ export const openMenuPanel = (options: {
data: oldData,
blockID
}]);
menuElement.innerHTML = getSortsHTML(data.view.columns, data.view.sorts);
menuElement.innerHTML = getSortsHTML(fields, data.view.sorts);
bindSortsEvent(options.protyle, menuElement, data, blockID);
return;
}
@ -336,7 +337,7 @@ export const openMenuPanel = (options: {
}
if (targetElement.querySelector('[data-type="setColOption"]')) {
const colId = options.cellElements ? options.cellElements[0].dataset.colId : menuElement.querySelector(".b3-menu__item").getAttribute("data-col-id");
const changeData = data.view.columns.find((column) => column.id === colId).options;
const changeData = fields.find((column) => column.id === colId).options;
const oldData = Object.assign([], changeData);
let targetOption: { name: string, color: string };
changeData.find((option, index: number) => {
@ -428,24 +429,24 @@ export const openMenuPanel = (options: {
blockID
}]);
let column: IAVColumn;
data.view.columns.find((item, index: number) => {
fields.find((item, index: number) => {
if (item.id === sourceId) {
column = data.view.columns.splice(index, 1)[0];
column = fields.splice(index, 1)[0];
return true;
}
});
data.view.columns.find((item, index: number) => {
fields.find((item, index: number) => {
if (item.id === targetId) {
if (isTop) {
data.view.columns.splice(index, 0, column);
fields.splice(index, 0, column);
} else {
data.view.columns.splice(index + 1, 0, column);
fields.splice(index + 1, 0, column);
}
return true;
}
});
}
menuElement.innerHTML = getPropertiesHTML(data.view);
menuElement.innerHTML = getPropertiesHTML(fields);
return;
}
});
@ -540,7 +541,7 @@ export const openMenuPanel = (options: {
} else if (type === "go-properties") {
// 复制列后点击返回到属性面板，宽度不一致，需重新计算
tabRect = options.blockElement.querySelector(".av__views").getBoundingClientRect();
menuElement.innerHTML = getPropertiesHTML(data.view);
menuElement.innerHTML = getPropertiesHTML(fields);
setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height);
window.siyuan.menus.menu.remove();
event.preventDefault();
@ -555,7 +556,7 @@ export const openMenuPanel = (options: {
event.stopPropagation();
break;
} else if (type === "goSorts") {
menuElement.innerHTML = getSortsHTML(data.view.columns, data.view.sorts);
menuElement.innerHTML = getSortsHTML(fields, data.view.sorts);
bindSortsEvent(options.protyle, menuElement, data, blockID);
setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height);
window.siyuan.menus.menu.remove();
@ -575,7 +576,7 @@ export const openMenuPanel = (options: {
blockID
}]);
data.view.sorts = [];
menuElement.innerHTML = getSortsHTML(data.view.columns, data.view.sorts);
menuElement.innerHTML = getSortsHTML(fields, data.view.sorts);
bindSortsEvent(options.protyle, menuElement, data, blockID);
setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height);
event.preventDefault();
@ -613,7 +614,7 @@ export const openMenuPanel = (options: {
data: oldSorts,
blockID
}]);
menuElement.innerHTML = getSortsHTML(data.view.columns, data.view.sorts);
menuElement.innerHTML = getSortsHTML(fields, data.view.sorts);
bindSortsEvent(options.protyle, menuElement, data, blockID);
setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height);
event.preventDefault();
@ -823,7 +824,7 @@ export const openMenuPanel = (options: {
} else if (type === "showAllCol") {
const doOperations: IOperation[] = [];
const undoOperations: IOperation[] = [];
data.view.columns.forEach((item: IAVColumn) => {
fields.forEach((item: IAVColumn) => {
if (item.hidden) {
doOperations.push({
action: "setAttrViewColHidden",
@ -844,7 +845,7 @@ export const openMenuPanel = (options: {
});
if (doOperations.length > 0) {
transaction(options.protyle, doOperations, undoOperations);
menuElement.innerHTML = getPropertiesHTML(data.view);
menuElement.innerHTML = getPropertiesHTML(fields);
setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height);
}
event.preventDefault();
@ -853,7 +854,7 @@ export const openMenuPanel = (options: {
} else if (type === "hideAllCol") {
const doOperations: IOperation[] = [];
const undoOperations: IOperation[] = [];
data.view.columns.forEach((item: IAVColumn) => {
fields.forEach((item: IAVColumn) => {
if (!item.hidden && item.type !== "block") {
doOperations.push({
action: "setAttrViewColHidden",
@ -874,7 +875,7 @@ export const openMenuPanel = (options: {
});
if (doOperations.length > 0) {
transaction(options.protyle, doOperations, undoOperations);
menuElement.innerHTML = getPropertiesHTML(data.view);
menuElement.innerHTML = getPropertiesHTML(fields);
setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height);
}
event.preventDefault();
@ -897,7 +898,7 @@ export const openMenuPanel = (options: {
const nameElement = avPanelElement.querySelector('.b3-text-field[data-type="name"]') as HTMLInputElement;
const name = nameElement.value;
let newName = name;
data.view.columns.find((item: IAVColumn) => {
fields.find((item: IAVColumn) => {
if (item.id === options.colId) {
item.type = target.dataset.newType as TAVCol;
if (getColNameByType(target.dataset.oldType as TAVCol) === name) {
@ -1023,7 +1024,7 @@ export const openMenuPanel = (options: {
protyle: options.protyle,
avElement: avPanelElement,
avID,
colsData: data.view.columns,
colsData: fields,
blockElement: options.blockElement,
});
event.preventDefault();
@ -1055,7 +1056,7 @@ export const openMenuPanel = (options: {
data: false,
blockID
}]);
data.view.columns.find((item: IAVColumn) => item.id === colId).hidden = true;
fields.find((item: IAVColumn) => item.id === colId).hidden = true;
if (isEdit) {
menuElement.innerHTML = getEditHTML({
protyle: options.protyle,
@ -1065,7 +1066,7 @@ export const openMenuPanel = (options: {
});
bindEditEvent({protyle: options.protyle, data, menuElement, isCustomAttr, blockID});
} else {
menuElement.innerHTML = getPropertiesHTML(data.view);
menuElement.innerHTML = getPropertiesHTML(fields);
}
setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height);
event.preventDefault();
@ -1087,7 +1088,7 @@ export const openMenuPanel = (options: {
data: true,
blockID
}]);
data.view.columns.find((item: IAVColumn) => item.id === colId).hidden = false;
fields.find((item: IAVColumn) => item.id === colId).hidden = false;
if (isEdit) {
menuElement.innerHTML = getEditHTML({
protyle: options.protyle,
@ -1097,7 +1098,7 @@ export const openMenuPanel = (options: {
});
bindEditEvent({protyle: options.protyle, data, menuElement, isCustomAttr, blockID});
} else {
menuElement.innerHTML = getPropertiesHTML(data.view);
menuElement.innerHTML = getPropertiesHTML(fields);
}
setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height);
event.preventDefault();
@ -1119,7 +1120,7 @@ export const openMenuPanel = (options: {
tabRect = options.blockElement.querySelector(".av__views").getBoundingClientRect();
}
const colId = menuElement.querySelector(".b3-menu__item").getAttribute("data-col-id");
const colData = data.view.columns.find((item: IAVColumn) => {
const colData = fields.find((item: IAVColumn) => {
if (item.id === colId) {
return true;
}
@ -1146,7 +1147,7 @@ export const openMenuPanel = (options: {
if (action === "delete" || (isDispatch && dialogEvent.detail === "Enter")) {
removeCol({
protyle: options.protyle,
data,
fields,
avID,
blockID,
menuElement,
@ -1161,7 +1162,7 @@ export const openMenuPanel = (options: {
} else if (action === "keep-relation") {
removeCol({
protyle: options.protyle,
data,
fields,
avID,
blockID,
menuElement,
@ -1184,7 +1185,7 @@ export const openMenuPanel = (options: {
} else {
removeCol({
protyle: options.protyle,
data,
fields,
avID,
blockID,
menuElement,
@ -1402,10 +1403,10 @@ export const openMenuPanel = (options: {
});
};
export const getPropertiesHTML = (data: IAVTable) => {
export const getPropertiesHTML = (fields: IAVColumn[]) => {
let showHTML = "";
let hideHTML = "";
data.columns.forEach((item: IAVColumn) => {
fields.forEach((item: IAVColumn) => {
if (item.hidden) {
hideHTML += `<button class="b3-menu__item" data-type="editCol" draggable="true" data-id="${item.id}">
<svg class="b3-menu__icon fn__grab"><use xlink:href="#iconDrag"></use></svg>

3
app/src/protyle/render/av/view.ts
View file

@ -390,3 +390,6 @@ export const getViewName = (type: string) => {
}
};
export const getFieldsByData = (data: IAV) => {
return data.viewType === "table" ? (data.view as IAVTable).columns : (data.view as IAVGallery).fields;
}