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 {duplicateNameAddOne} from "../../../util/functions";
import {Dialog} from "../../../dialog"; import {Dialog} from "../../../dialog";
import {escapeAriaLabel, escapeAttr, escapeHtml} from "../../../util/escape"; import {escapeAriaLabel, escapeAttr, escapeHtml} from "../../../util/escape";
import {getFieldsByData} from "./view";
export const duplicateCol = (options: { export const duplicateCol = (options: {
protyle: IProtyle, protyle: IProtyle,
@ -25,10 +26,11 @@ export const duplicateCol = (options: {
data: IAV, data: IAV,
}) => { }) => {
let newColData: IAVColumn; 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) { if (item.id === options.colId) {
newColData = JSON.parse(JSON.stringify(item)); newColData = JSON.parse(JSON.stringify(item));
options.data.view.columns.splice(index + 1, 0, newColData); fields.splice(index + 1, 0, newColData);
return true; return true;
} }
}); });
@ -74,7 +76,7 @@ export const getEditHTML = (options: {
isCustomAttr: boolean isCustomAttr: boolean
}) => { }) => {
let colData: IAVColumn; let colData: IAVColumn;
options.data.view.columns.find((item) => { getFieldsByData(options.data).find((item) => {
if (item.id === options.colId) { if (item.id === options.colId) {
colData = item; colData = item;
return true; return true;
@ -190,12 +192,6 @@ export const getEditHTML = (options: {
} }
return `<div class="b3-menu__items"> return `<div class="b3-menu__items">
${html} ${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>
<div class="b3-menu__items fn__none"> <div class="b3-menu__items fn__none">
<button class="b3-menu__item" data-type="nobg" data-col-id="${colData.id}"> <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 avID = options.data.id;
const colId = options.menuElement.querySelector(".b3-menu__item").getAttribute("data-col-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; const nameElement = options.menuElement.querySelector('[data-type="name"]') as HTMLInputElement;
nameElement.addEventListener("blur", () => { nameElement.addEventListener("blur", () => {
const newValue = nameElement.value; const newValue = nameElement.value;
@ -614,7 +610,7 @@ const addAttrViewColAnimation = (options: {
// https://github.com/siyuan-note/siyuan/issues/14724 // https://github.com/siyuan-note/siyuan/issues/14724
let colData; let colData;
if (options.data) { 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({ openMenuPanel({
protyle: options.protyle, protyle: options.protyle,
@ -1122,7 +1118,7 @@ const removeColByMenu = (options: {
export const removeCol = (options: { export const removeCol = (options: {
protyle: IProtyle, protyle: IProtyle,
data: IAV, fields: IAVColumn[],
avID: string, avID: string,
blockID: string, blockID: string,
isCustomAttr: boolean isCustomAttr: boolean
@ -1134,10 +1130,10 @@ export const removeCol = (options: {
}) => { }) => {
const colId = options.menuElement.querySelector(".b3-menu__item").getAttribute("data-col-id"); const colId = options.menuElement.querySelector(".b3-menu__item").getAttribute("data-col-id");
let previousID = ""; let previousID = "";
const colData = options.data.view.columns.find((item: IAVColumn, index) => { const colData = options.fields.find((item: IAVColumn, index) => {
if (item.id === colId) { if (item.id === colId) {
previousID = options.data.view.columns[index - 1]?.id; previousID = options.fields[index - 1]?.id;
options.data.view.columns.splice(index, 1); options.fields.splice(index, 1);
return true; return true;
} }
}); });
@ -1169,7 +1165,7 @@ export const removeCol = (options: {
if (options.isCustomAttr) { if (options.isCustomAttr) {
options.avPanelElement.remove(); options.avPanelElement.remove();
} else { } else {
options.menuElement.innerHTML = getPropertiesHTML(options.data.view); options.menuElement.innerHTML = getPropertiesHTML(options.fields);
setPosition(options.menuElement, setPosition(options.menuElement,
options.tabRect.right - options.menuElement.clientWidth, options.tabRect.bottom, options.tabRect.right - options.menuElement.clientWidth, options.tabRect.bottom,
options.tabRect.height); 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">'; galleryHTML += '<div class="av__gallery-fields">';
item.values.forEach(cell => { item.values.forEach((cell, fieldsIndex) => {
if (view.fields[fieldsIndex].hidden) {
return;
}
let checkClass = ""; let checkClass = "";
if (cell.valueType === "checkbox") { if (cell.valueType === "checkbox") {
checkClass = cell.value?.checkbox?.checked ? " av__cell-check" : " av__cell-uncheck"; 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 { import {
addView, addView,
bindSwitcherEvent, bindSwitcherEvent,
bindViewEvent, bindViewEvent, getFieldsByData,
getSwitcherHTML, getSwitcherHTML,
getViewHTML, getViewHTML,
openViewMenu openViewMenu
@ -76,12 +76,13 @@ export const openMenuPanel = (options: {
const isCustomAttr = !options.blockElement.classList.contains("av"); const isCustomAttr = !options.blockElement.classList.contains("av");
const data = response.data as IAV; const data = response.data as IAV;
let html; let html;
const fields = getFieldsByData(data);
if (options.type === "config") { if (options.type === "config") {
html = getViewHTML(data); html = getViewHTML(data);
} else if (options.type === "properties") { } else if (options.type === "properties") {
html = getPropertiesHTML(data.view); html = getPropertiesHTML(fields);
} else if (options.type === "sorts") { } else if (options.type === "sorts") {
html = getSortsHTML(data.view.columns, data.view.sorts); html = getSortsHTML(fields, data.view.sorts);
} else if (options.type === "switcher") { } else if (options.type === "switcher") {
html = getSwitcherHTML(data.views, data.viewID); html = getSwitcherHTML(data.views, data.viewID);
} else if (options.type === "filters") { } else if (options.type === "filters") {
@ -93,14 +94,14 @@ export const openMenuPanel = (options: {
} else if (options.type === "edit") { } else if (options.type === "edit") {
if (options.editData) { if (options.editData) {
if (options.editData.previousID) { if (options.editData.previousID) {
data.view.columns.find((item, index) => { fields.find((item, index) => {
if (item.id === options.editData.previousID) { 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; return true;
} }
}); });
} else { } 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}); html = getEditHTML({protyle: options.protyle, data, colId: options.colId, isCustomAttr});
@ -248,7 +249,7 @@ export const openMenuPanel = (options: {
data: oldData, data: oldData,
blockID blockID
}]); }]);
menuElement.innerHTML = getSortsHTML(data.view.columns, data.view.sorts); menuElement.innerHTML = getSortsHTML(fields, data.view.sorts);
bindSortsEvent(options.protyle, menuElement, data, blockID); bindSortsEvent(options.protyle, menuElement, data, blockID);
return; return;
} }
@ -336,7 +337,7 @@ export const openMenuPanel = (options: {
} }
if (targetElement.querySelector('[data-type="setColOption"]')) { 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 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); const oldData = Object.assign([], changeData);
let targetOption: { name: string, color: string }; let targetOption: { name: string, color: string };
changeData.find((option, index: number) => { changeData.find((option, index: number) => {
@ -428,24 +429,24 @@ export const openMenuPanel = (options: {
blockID blockID
}]); }]);
let column: IAVColumn; let column: IAVColumn;
data.view.columns.find((item, index: number) => { fields.find((item, index: number) => {
if (item.id === sourceId) { if (item.id === sourceId) {
column = data.view.columns.splice(index, 1)[0]; column = fields.splice(index, 1)[0];
return true; return true;
} }
}); });
data.view.columns.find((item, index: number) => { fields.find((item, index: number) => {
if (item.id === targetId) { if (item.id === targetId) {
if (isTop) { if (isTop) {
data.view.columns.splice(index, 0, column); fields.splice(index, 0, column);
} else { } else {
data.view.columns.splice(index + 1, 0, column); fields.splice(index + 1, 0, column);
} }
return true; return true;
} }
}); });
} }
menuElement.innerHTML = getPropertiesHTML(data.view); menuElement.innerHTML = getPropertiesHTML(fields);
return; return;
} }
}); });
@ -540,7 +541,7 @@ export const openMenuPanel = (options: {
} else if (type === "go-properties") { } else if (type === "go-properties") {
// 复制列后点击返回到属性面板，宽度不一致，需重新计算 // 复制列后点击返回到属性面板，宽度不一致，需重新计算
tabRect = options.blockElement.querySelector(".av__views").getBoundingClientRect(); 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); setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height);
window.siyuan.menus.menu.remove(); window.siyuan.menus.menu.remove();
event.preventDefault(); event.preventDefault();
@ -555,7 +556,7 @@ export const openMenuPanel = (options: {
event.stopPropagation(); event.stopPropagation();
break; break;
} else if (type === "goSorts") { } 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); bindSortsEvent(options.protyle, menuElement, data, blockID);
setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height); setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height);
window.siyuan.menus.menu.remove(); window.siyuan.menus.menu.remove();
@ -575,7 +576,7 @@ export const openMenuPanel = (options: {
blockID blockID
}]); }]);
data.view.sorts = []; 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); bindSortsEvent(options.protyle, menuElement, data, blockID);
setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height); setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height);
event.preventDefault(); event.preventDefault();
@ -613,7 +614,7 @@ export const openMenuPanel = (options: {
data: oldSorts, data: oldSorts,
blockID blockID
}]); }]);
menuElement.innerHTML = getSortsHTML(data.view.columns, data.view.sorts); menuElement.innerHTML = getSortsHTML(fields, data.view.sorts);
bindSortsEvent(options.protyle, menuElement, data, blockID); bindSortsEvent(options.protyle, menuElement, data, blockID);
setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height); setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height);
event.preventDefault(); event.preventDefault();
@ -823,7 +824,7 @@ export const openMenuPanel = (options: {
} else if (type === "showAllCol") { } else if (type === "showAllCol") {
const doOperations: IOperation[] = []; const doOperations: IOperation[] = [];
const undoOperations: IOperation[] = []; const undoOperations: IOperation[] = [];
data.view.columns.forEach((item: IAVColumn) => { fields.forEach((item: IAVColumn) => {
if (item.hidden) { if (item.hidden) {
doOperations.push({ doOperations.push({
action: "setAttrViewColHidden", action: "setAttrViewColHidden",
@ -844,7 +845,7 @@ export const openMenuPanel = (options: {
}); });
if (doOperations.length > 0) { if (doOperations.length > 0) {
transaction(options.protyle, doOperations, undoOperations); transaction(options.protyle, doOperations, undoOperations);
menuElement.innerHTML = getPropertiesHTML(data.view); menuElement.innerHTML = getPropertiesHTML(fields);
setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height); setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height);
} }
event.preventDefault(); event.preventDefault();
@ -853,7 +854,7 @@ export const openMenuPanel = (options: {
} else if (type === "hideAllCol") { } else if (type === "hideAllCol") {
const doOperations: IOperation[] = []; const doOperations: IOperation[] = [];
const undoOperations: IOperation[] = []; const undoOperations: IOperation[] = [];
data.view.columns.forEach((item: IAVColumn) => { fields.forEach((item: IAVColumn) => {
if (!item.hidden && item.type !== "block") { if (!item.hidden && item.type !== "block") {
doOperations.push({ doOperations.push({
action: "setAttrViewColHidden", action: "setAttrViewColHidden",
@ -874,7 +875,7 @@ export const openMenuPanel = (options: {
}); });
if (doOperations.length > 0) { if (doOperations.length > 0) {
transaction(options.protyle, doOperations, undoOperations); transaction(options.protyle, doOperations, undoOperations);
menuElement.innerHTML = getPropertiesHTML(data.view); menuElement.innerHTML = getPropertiesHTML(fields);
setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height); setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height);
} }
event.preventDefault(); event.preventDefault();
@ -897,7 +898,7 @@ export const openMenuPanel = (options: {
const nameElement = avPanelElement.querySelector('.b3-text-field[data-type="name"]') as HTMLInputElement; const nameElement = avPanelElement.querySelector('.b3-text-field[data-type="name"]') as HTMLInputElement;
const name = nameElement.value; const name = nameElement.value;
let newName = name; let newName = name;
data.view.columns.find((item: IAVColumn) => { fields.find((item: IAVColumn) => {
if (item.id === options.colId) { if (item.id === options.colId) {
item.type = target.dataset.newType as TAVCol; item.type = target.dataset.newType as TAVCol;
if (getColNameByType(target.dataset.oldType as TAVCol) === name) { if (getColNameByType(target.dataset.oldType as TAVCol) === name) {
@ -1023,7 +1024,7 @@ export const openMenuPanel = (options: {
protyle: options.protyle, protyle: options.protyle,
avElement: avPanelElement, avElement: avPanelElement,
avID, avID,
colsData: data.view.columns, colsData: fields,
blockElement: options.blockElement, blockElement: options.blockElement,
}); });
event.preventDefault(); event.preventDefault();
@ -1055,7 +1056,7 @@ export const openMenuPanel = (options: {
data: false, data: false,
blockID blockID
}]); }]);
data.view.columns.find((item: IAVColumn) => item.id === colId).hidden = true; fields.find((item: IAVColumn) => item.id === colId).hidden = true;
if (isEdit) { if (isEdit) {
menuElement.innerHTML = getEditHTML({ menuElement.innerHTML = getEditHTML({
protyle: options.protyle, protyle: options.protyle,
@ -1065,7 +1066,7 @@ export const openMenuPanel = (options: {
}); });
bindEditEvent({protyle: options.protyle, data, menuElement, isCustomAttr, blockID}); bindEditEvent({protyle: options.protyle, data, menuElement, isCustomAttr, blockID});
} else { } else {
menuElement.innerHTML = getPropertiesHTML(data.view); menuElement.innerHTML = getPropertiesHTML(fields);
} }
setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height); setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height);
event.preventDefault(); event.preventDefault();
@ -1087,7 +1088,7 @@ export const openMenuPanel = (options: {
data: true, data: true,
blockID blockID
}]); }]);
data.view.columns.find((item: IAVColumn) => item.id === colId).hidden = false; fields.find((item: IAVColumn) => item.id === colId).hidden = false;
if (isEdit) { if (isEdit) {
menuElement.innerHTML = getEditHTML({ menuElement.innerHTML = getEditHTML({
protyle: options.protyle, protyle: options.protyle,
@ -1097,7 +1098,7 @@ export const openMenuPanel = (options: {
}); });
bindEditEvent({protyle: options.protyle, data, menuElement, isCustomAttr, blockID}); bindEditEvent({protyle: options.protyle, data, menuElement, isCustomAttr, blockID});
} else { } else {
menuElement.innerHTML = getPropertiesHTML(data.view); menuElement.innerHTML = getPropertiesHTML(fields);
} }
setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height); setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height);
event.preventDefault(); event.preventDefault();
@ -1119,7 +1120,7 @@ export const openMenuPanel = (options: {
tabRect = options.blockElement.querySelector(".av__views").getBoundingClientRect(); tabRect = options.blockElement.querySelector(".av__views").getBoundingClientRect();
} }
const colId = menuElement.querySelector(".b3-menu__item").getAttribute("data-col-id"); 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) { if (item.id === colId) {
return true; return true;
} }
@ -1146,7 +1147,7 @@ export const openMenuPanel = (options: {
if (action === "delete" || (isDispatch && dialogEvent.detail === "Enter")) { if (action === "delete" || (isDispatch && dialogEvent.detail === "Enter")) {
removeCol({ removeCol({
protyle: options.protyle, protyle: options.protyle,
data, fields,
avID, avID,
blockID, blockID,
menuElement, menuElement,
@ -1161,7 +1162,7 @@ export const openMenuPanel = (options: {
} else if (action === "keep-relation") { } else if (action === "keep-relation") {
removeCol({ removeCol({
protyle: options.protyle, protyle: options.protyle,
data, fields,
avID, avID,
blockID, blockID,
menuElement, menuElement,
@ -1184,7 +1185,7 @@ export const openMenuPanel = (options: {
} else { } else {
removeCol({ removeCol({
protyle: options.protyle, protyle: options.protyle,
data, fields,
avID, avID,
blockID, blockID,
menuElement, menuElement,
@ -1402,10 +1403,10 @@ export const openMenuPanel = (options: {
}); });
}; };
export const getPropertiesHTML = (data: IAVTable) => { export const getPropertiesHTML = (fields: IAVColumn[]) => {
let showHTML = ""; let showHTML = "";
let hideHTML = ""; let hideHTML = "";
data.columns.forEach((item: IAVColumn) => { fields.forEach((item: IAVColumn) => {
if (item.hidden) { if (item.hidden) {
hideHTML += `<button class="b3-menu__item" data-type="editCol" draggable="true" data-id="${item.id}"> 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> <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;
}