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

🎨 fix https://github.com/siyuan-note/siyuan/issues/10920

Browse source
This commit is contained in:
Vanessa 2024-04-07 18:49:56 +08:00
parent a02c0a8a3a
commit 88accc65ad
2 changed files with 91 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -12,29 +12,35 @@ import {toggleUpdateRelationBtn} from "./relation";
import {bindRollupData, getRollupHTML} from "./rollup"; import {bindRollupData, getRollupHTML} from "./rollup";
import {Constants} from "../../../constants"; import {Constants} from "../../../constants";
import * as dayjs from "dayjs"; import * as dayjs from "dayjs";
import {setPosition} from "../../../util/setPosition";
export const duplicateCol = (options: { export const duplicateCol = (options: {
protyle: IProtyle, protyle: IProtyle,
type: TAVCol,
avID: string,
colId: string, colId: string,
newValue: string,
icon: string
viewID: string, viewID: string,
blockElement: Element blockElement: Element,
data: IAV,
}) => { }) => {
const id = Lute.NewNodeID(); let newColData: IAVColumn;
const nameMatch = options.newValue.match(/^(.*) \((\d+)\)$/); options.data.view.columns.find((item: IAVColumn, index) => {
if (nameMatch) { if (item.id === options.colId) {
options.newValue = `${nameMatch[1]} (${parseInt(nameMatch[2]) + 1})`; newColData = JSON.parse(JSON.stringify(item));
} else { options.data.view.columns.splice(index + 1, 0, newColData);
options.newValue = `${options.newValue} (1)`; return true;
} }
});
const nameMatch = newColData.name.match(/^(.*) \((\d+)\)$/);
if (nameMatch) {
newColData.name = `${nameMatch[1]} (${parseInt(nameMatch[2]) + 1})`;
} else {
newColData.name = `${newColData.name} (1)`;
}
newColData.id = Lute.NewNodeID();
const newUpdated = dayjs().format("YYYYMMDDHHmmss"); const newUpdated = dayjs().format("YYYYMMDDHHmmss");
const blockId = options.blockElement.getAttribute("data-node-id"); const blockId = options.blockElement.getAttribute("data-node-id");
if (["select", "mSelect", "rollup"].includes(options.type)) { if (["select", "mSelect", "rollup"].includes(newColData.type)) {
fetchPost("/api/av/renderAttributeView", { fetchPost("/api/av/renderAttributeView", {
id: options.avID, id: options.data.id,
viewID: options.viewID viewID: options.viewID
}, (response) => { }, (response) => {
const data = response.data as IAV; const data = response.data as IAV;
@ -47,16 +53,16 @@ export const duplicateCol = (options: {
}); });
transaction(options.protyle, [{ transaction(options.protyle, [{
action: "addAttrViewCol", action: "addAttrViewCol",
name: options.newValue, name: newColData.name,
avID: options.avID, avID: options.data.id,
type: options.type, type: newColData.type,
data: options.icon, data: newColData.icon,
previousID: options.colId, previousID: options.colId,
id id: newColData.id
}, { }, {
action: "updateAttrViewColOptions", action: "updateAttrViewColOptions",
id, id: newColData.id,
avID: options.avID, avID: options.data.id,
data: colOptions data: colOptions
}, { }, {
action: "doUpdateUpdated", action: "doUpdateUpdated",
@ -64,8 +70,8 @@ export const duplicateCol = (options: {
data: newUpdated, data: newUpdated,
}], [{ }], [{
action: "removeAttrViewCol", action: "removeAttrViewCol",
id, id: newColData.id,
avID: options.avID, avID: options.data.id,
}, { }, {
action: "doUpdateUpdated", action: "doUpdateUpdated",
id: blockId, id: blockId,
@ -75,11 +81,11 @@ export const duplicateCol = (options: {
} else { } else {
transaction(options.protyle, [{ transaction(options.protyle, [{
action: "addAttrViewCol", action: "addAttrViewCol",
name: options.newValue, name: newColData.name,
avID: options.avID, avID: options.data.id,
type: options.type, type: newColData.type,
data: options.icon, data: newColData.icon,
id, id: newColData.id,
previousID: options.colId, previousID: options.colId,
}, { }, {
action: "doUpdateUpdated", action: "doUpdateUpdated",
@ -87,8 +93,8 @@ export const duplicateCol = (options: {
data: newUpdated, data: newUpdated,
}], [{ }], [{
action: "removeAttrViewCol", action: "removeAttrViewCol",
id, id: newColData.id,
avID: options.avID, avID: options.data.id,
}, { }, {
action: "doUpdateUpdated", action: "doUpdateUpdated",
id: blockId, id: blockId,
@ -98,11 +104,12 @@ export const duplicateCol = (options: {
addAttrViewColAnimation({ addAttrViewColAnimation({
blockElement: options.blockElement, blockElement: options.blockElement,
protyle: options.protyle, protyle: options.protyle,
type: options.type, type: newColData.type,
name: options.newValue, name: newColData.name,
icon: options.icon, icon: newColData.icon,
previousID: options.colId, previousID: options.colId,
id data: options.data,
id: newColData.id,
}); });
options.blockElement.setAttribute("updated", newUpdated); options.blockElement.setAttribute("updated", newUpdated);
}; };
@ -521,11 +528,13 @@ const addAttrViewColAnimation = (options: {
name: string, name: string,
id: string, id: string,
icon?: string, icon?: string,
previousID: string previousID: string,
data?: IAV
}) => { }) => {
if (!options.blockElement) { if (!options.blockElement) {
return; return;
} }
const nodeId = options.blockElement.getAttribute("data-node-id");
if (options.blockElement.classList.contains("av")) { if (options.blockElement.classList.contains("av")) {
options.blockElement.querySelectorAll(".av__row").forEach((item, index) => { options.blockElement.querySelectorAll(".av__row").forEach((item, index) => {
let previousElement; let previousElement;
@ -548,7 +557,6 @@ const addAttrViewColAnimation = (options: {
previousElement.insertAdjacentHTML("afterend", html); previousElement.insertAdjacentHTML("afterend", html);
}); });
} else { } else {
const nodeId = options.blockElement.getAttribute("data-node-id");
options.blockElement.querySelector(".fn__hr").insertAdjacentHTML("beforebegin", `<div class="block__icons av__row" data-id="${nodeId}" data-col-id="${options.id}"> options.blockElement.querySelector(".fn__hr").insertAdjacentHTML("beforebegin", `<div class="block__icons av__row" data-id="${nodeId}" data-col-id="${options.id}">
<div class="block__icon" draggable="true"><svg><use xlink:href="#iconDrag"></use></svg></div> <div class="block__icon" draggable="true"><svg><use xlink:href="#iconDrag"></use></svg></div>
<div class="block__logo ariaLabel fn__pointer" data-type="editCol" data-position="parentW" aria-label="${getColNameByType(options.type)}"> <div class="block__logo ariaLabel fn__pointer" data-type="editCol" data-position="parentW" aria-label="${getColNameByType(options.type)}">
@ -560,6 +568,27 @@ const addAttrViewColAnimation = (options: {
</div> </div>
</div>`); </div>`);
} }
const menuElement = document.querySelector(".av__panel .b3-menu") as HTMLElement;
if (menuElement && options.data && options.blockElement.classList.contains("av")) {
menuElement.innerHTML = getEditHTML({
protyle: options.protyle,
data: options.data,
colId: options.id,
isCustomAttr: false
});
bindEditEvent({
protyle: options.protyle,
data: options.data,
menuElement,
isCustomAttr: false,
blockID: nodeId
});
const tabRect = options.blockElement.querySelector(".av__views").getBoundingClientRect();
if (tabRect) {
setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height);
}
return;
}
openMenuPanel({ openMenuPanel({
protyle: options.protyle, protyle: options.protyle,
blockElement: options.blockElement, blockElement: options.blockElement,
@ -567,7 +596,7 @@ const addAttrViewColAnimation = (options: {
colId: options.id, colId: options.id,
editData: { editData: {
previousID: options.previousID, previousID: options.previousID,
colData: genColDataByType(options.type, options.id), colData: genColDataByType(options.type, options.id, options.name),
} }
}); });
window.siyuan.menus.menu.remove(); window.siyuan.menus.menu.remove();
@ -824,16 +853,17 @@ export const showColMenu = (protyle: IProtyle, blockElement: Element, cellElemen
icon: "iconCopy", icon: "iconCopy",
label: window.siyuan.languages.duplicate, label: window.siyuan.languages.duplicate,
click() { click() {
fetchPost("/api/av/renderAttributeView", {
id: avID,
}, (response) => {
duplicateCol({ duplicateCol({
blockElement, blockElement,
viewID: blockElement.getAttribute(Constants.CUSTOM_SY_AV_VIEW), viewID: blockElement.getAttribute(Constants.CUSTOM_SY_AV_VIEW),
protyle, protyle,
type,
avID,
colId, colId,
icon: menu.element.querySelector(".block__icon").getAttribute("data-icon"), data: response.data
newValue: (window.siyuan.menus.menu.element.querySelector(".b3-text-field") as HTMLInputElement).value
}); });
})
} }
}); });
} }
@ -1476,12 +1506,12 @@ export const addCol = (protyle: IProtyle, blockElement: Element, previousID?: st
return menu; return menu;
}; };
const genColDataByType = (type: TAVCol, id: string) => { const genColDataByType = (type: TAVCol, id: string, name: string) => {
const colData: IAVColumn = { const colData: IAVColumn = {
hidden: false, hidden: false,
icon: "", icon: "",
id, id,
name: getColNameByType(type), name,
numberFormat: "", numberFormat: "",
pin: false, pin: false,
template: "", template: "",

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

@ -115,7 +115,7 @@ export const openMenuPanel = (options: {
avPanelElement = document.querySelector(".av__panel"); avPanelElement = document.querySelector(".av__panel");
let closeCB: () => void; let closeCB: () => void;
const menuElement = avPanelElement.lastElementChild as HTMLElement; const menuElement = avPanelElement.lastElementChild as HTMLElement;
const tabRect = options.blockElement.querySelector(`.av__views, .av__row[data-col-id="${options.colId}"] > .block__logo`)?.getBoundingClientRect(); let tabRect = options.blockElement.querySelector(`.av__views, .av__row[data-col-id="${options.colId}"] > .block__logo`)?.getBoundingClientRect();
if (["select", "date", "asset", "relation", "rollup"].includes(options.type)) { if (["select", "date", "asset", "relation", "rollup"].includes(options.type)) {
const cellRect = options.cellElements[options.cellElements.length - 1].getBoundingClientRect(); const cellRect = options.cellElements[options.cellElements.length - 1].getBoundingClientRect();
if (options.type === "select") { if (options.type === "select") {
@ -484,6 +484,8 @@ export const openMenuPanel = (options: {
event.stopPropagation(); event.stopPropagation();
break; break;
} else if (type === "go-properties") { } else if (type === "go-properties") {
// 复制列后点击返回到属性面板，宽度不一致，需重新计算
tabRect = options.blockElement.querySelector(".av__views").getBoundingClientRect();
menuElement.innerHTML = getPropertiesHTML(data.view); menuElement.innerHTML = getPropertiesHTML(data.view);
setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height); setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height);
event.preventDefault(); event.preventDefault();
@ -981,19 +983,13 @@ export const openMenuPanel = (options: {
event.stopPropagation(); event.stopPropagation();
break; break;
} else if (type === "duplicateCol") { } else if (type === "duplicateCol") {
const colId = menuElement.querySelector(".b3-menu__item").getAttribute("data-col-id");
const colData = data.view.columns.find((item: IAVColumn) => item.id === colId);
duplicateCol({ duplicateCol({
blockElement: options.blockElement, blockElement: options.blockElement,
protyle: options.protyle, protyle: options.protyle,
type: colData.type, colId: menuElement.querySelector(".b3-menu__item").getAttribute("data-col-id"),
avID, data,
colId,
icon: colData.icon,
newValue: colData.name,
viewID: data.viewID, viewID: data.viewID,
}); });
avPanelElement.remove();
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
break; break;
@ -1004,6 +1000,7 @@ export const openMenuPanel = (options: {
const colData = data.view.columns.find((item: IAVColumn, index) => { const colData = data.view.columns.find((item: IAVColumn, index) => {
if (item.id === colId) { if (item.id === colId) {
previousID = data.view.columns[index - 1]?.id; previousID = data.view.columns[index - 1]?.id;
data.view.columns.splice(index, 1);
return true; return true;
} }
}); });
@ -1030,7 +1027,14 @@ export const openMenuPanel = (options: {
}]); }]);
removeAttrViewColAnimation(options.blockElement, colId); removeAttrViewColAnimation(options.blockElement, colId);
options.blockElement.setAttribute("updated", newUpdated); options.blockElement.setAttribute("updated", newUpdated);
if (isCustomAttr) {
avPanelElement.remove(); avPanelElement.remove();
} else {
tabRect = options.blockElement.querySelector(".av__views").getBoundingClientRect();
menuElement.innerHTML = getPropertiesHTML(data.view);
setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height);
}
}); });
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
@ -1187,7 +1191,7 @@ export const openMenuPanel = (options: {
}); });
}; };
const getPropertiesHTML = (data: IAVTable) => { export const getPropertiesHTML = (data: IAVTable) => {
let showHTML = ""; let showHTML = "";
let hideHTML = ""; let hideHTML = "";
data.columns.forEach((item: IAVColumn) => { data.columns.forEach((item: IAVColumn) => {