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/10443

Browse source
This commit is contained in:
Vanessa 2024-03-04 17:42:54 +08:00
parent d519732c79
commit f2c2a7592c
14 changed files with 203 additions and 94 deletions
Download patch file Download diff file Expand all files Collapse all files

10
app/src/protyle/gutter/index.ts
View file

@ -231,6 +231,7 @@ export class Gutter {
previousID, previousID,
srcIDs, srcIDs,
isDetached: true, isDetached: true,
blockID: id,
}], [{ }], [{
action: "removeAttrViewBlock", action: "removeAttrViewBlock",
srcIDs, srcIDs,
@ -803,6 +804,7 @@ export class Gutter {
avID, avID,
srcIDs: sourceIds, srcIDs: sourceIds,
isDetached: false, isDetached: false,
blockID: listItemElement.dataset.blockId
}], [{ }], [{
action: "removeAttrViewBlock", action: "removeAttrViewBlock",
srcIDs: sourceIds, srcIDs: sourceIds,
@ -1245,13 +1247,14 @@ export class Gutter {
icon: "iconDatabase", icon: "iconDatabase",
click: () => { click: () => {
openSearchAV("", nodeElement as HTMLElement, (listItemElement) => { openSearchAV("", nodeElement as HTMLElement, (listItemElement) => {
const sourceIds: string[] = [nodeElement.getAttribute("data-node-id")]; const sourceIds: string[] = [id];
const avID = listItemElement.dataset.avId; const avID = listItemElement.dataset.avId;
transaction(protyle, [{ transaction(protyle, [{
action: "insertAttrViewBlock", action: "insertAttrViewBlock",
avID, avID,
srcIDs: sourceIds, srcIDs: sourceIds,
isDetached: false, isDetached: false,
blockID: listItemElement.dataset.blockId
}], [{ }], [{
action: "removeAttrViewBlock", action: "removeAttrViewBlock",
srcIDs: sourceIds, srcIDs: sourceIds,
@ -1408,7 +1411,8 @@ export class Gutter {
label: window.siyuan.languages.export + " CSV", label: window.siyuan.languages.export + " CSV",
click() { click() {
fetchPost("/api/export/exportAttributeView", { fetchPost("/api/export/exportAttributeView", {
id: nodeElement.getAttribute("data-av-id") id: nodeElement.getAttribute("data-av-id"),
blockID: id,
}, response => { }, response => {
openByMobile(response.data.zip); openByMobile(response.data.zip);
}); });
@ -1705,7 +1709,7 @@ export class Gutter {
label: window.siyuan.languages.addToDeck, label: window.siyuan.languages.addToDeck,
icon: "iconRiffCard", icon: "iconRiffCard",
click() { click() {
makeCard(protyle.app, [nodeElement.getAttribute("data-node-id")]); makeCard(protyle.app, [id]);
} }
}).element); }).element);
} }

1
app/src/protyle/header/openTitleMenu.ts
View file

@ -62,6 +62,7 @@ export const openTitleMenu = (protyle: IProtyle, position: IPosition) => {
avID, avID,
srcIDs: sourceIds, srcIDs: sourceIds,
isDetached: false, isDetached: false,
blockID: listItemElement.dataset.nodeId
}], [{ }], [{
action: "removeAttrViewBlock", action: "removeAttrViewBlock",
srcIDs: sourceIds, srcIDs: sourceIds,

2
app/src/protyle/render/av/action.ts
View file

@ -80,6 +80,7 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
avID, avID,
srcIDs, srcIDs,
isDetached: true, isDetached: true,
blockID: blockElement.dataset.nodeId,
}], [{ }], [{
action: "removeAttrViewBlock", action: "removeAttrViewBlock",
srcIDs, srcIDs,
@ -150,6 +151,7 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
previousID, previousID,
srcIDs, srcIDs,
isDetached: true, isDetached: true,
blockID: blockElement.dataset.nodeId,
}], [{ }], [{
action: "removeAttrViewBlock", action: "removeAttrViewBlock",
srcIDs, srcIDs,

4
app/src/protyle/render/av/blockAttr.ts
View file

@ -208,11 +208,13 @@ class="fn__flex-1 fn__flex${["url", "text", "number", "email", "phone", "block"]
avID: dragBlockElement.dataset.avId, avID: dragBlockElement.dataset.avId,
previousID: isBottom ? targetElement.dataset.colId : targetElement.previousElementSibling?.getAttribute("data-col-id"), previousID: isBottom ? targetElement.dataset.colId : targetElement.previousElementSibling?.getAttribute("data-col-id"),
id: window.siyuan.dragElement.dataset.colId, id: window.siyuan.dragElement.dataset.colId,
blockID: id
}, { }, {
action: "sortAttrViewCol", action: "sortAttrViewCol",
avID: dragBlockElement.dataset.avId, avID: dragBlockElement.dataset.avId,
previousID: window.siyuan.dragElement.previousElementSibling?.getAttribute("data-col-id"), previousID: window.siyuan.dragElement.previousElementSibling?.getAttribute("data-col-id"),
id id,
blockID: id
}]); }]);
if (isBottom) { if (isBottom) {
targetElement.after(window.siyuan.dragElement); targetElement.after(window.siyuan.dragElement);

87
app/src/protyle/render/av/calc.ts
View file

@ -10,7 +10,8 @@ const calcItem = (options: {
colId: string, colId: string,
data?: IAV, // rollup data?: IAV, // rollup
target: HTMLElement, target: HTMLElement,
avId: string avId: string,
blockID: string
}) => { }) => {
options.menu.addItem({ options.menu.addItem({
iconHTML: "", iconHTML: "",
@ -23,14 +24,16 @@ const calcItem = (options: {
id: options.colId, id: options.colId,
data: { data: {
operator: options.operator operator: options.operator
} },
blockID: options.blockID
}], [{ }], [{
action: "setAttrViewColCalc", action: "setAttrViewColCalc",
avID: options.avId, avID: options.avId,
id: options.colId, id: options.colId,
data: { data: {
operator: options.oldOperator operator: options.oldOperator
} },
blockID: options.blockID
}]); }]);
} else { } else {
options.target.querySelector(".b3-menu__accelerator").textContent = getNameByOperator(options.operator, true); options.target.querySelector(".b3-menu__accelerator").textContent = getNameByOperator(options.operator, true);
@ -71,17 +74,23 @@ const calcItem = (options: {
}); });
}; };
export const openCalcMenu = (protyle: IProtyle, calcElement: HTMLElement, data?: IAV, rollupId?: string) => { export const openCalcMenu = (protyle: IProtyle, calcElement: HTMLElement, panelData?: {
data: IAV,
colId: string,
blockID: string
}) => {
let rowElement: HTMLElement | false; let rowElement: HTMLElement | false;
let type; let type;
let colId; let colId;
let avId; let avId;
let oldOperator; let oldOperator;
if (data) { let blockID;
avId = data.id; if (panelData) {
avId = panelData.data.id;
type = calcElement.dataset.colType as TAVCol; type = calcElement.dataset.colType as TAVCol;
oldOperator = calcElement.dataset.calc; oldOperator = calcElement.dataset.calc;
colId = rollupId; colId = panelData.colId;
blockID = panelData.blockID;
} else { } else {
const blockElement = hasClosestBlock(calcElement); const blockElement = hasClosestBlock(calcElement);
if (!blockElement) { if (!blockElement) {
@ -96,6 +105,7 @@ export const openCalcMenu = (protyle: IProtyle, calcElement: HTMLElement, data?:
colId = calcElement.dataset.colId; colId = calcElement.dataset.colId;
avId = blockElement.dataset.avId; avId = blockElement.dataset.avId;
oldOperator = calcElement.dataset.operator; oldOperator = calcElement.dataset.operator;
blockID = blockElement.dataset.nodeId;
} }
const menu = new Menu("av-calc", () => { const menu = new Menu("av-calc", () => {
if (rowElement) { if (rowElement) {
@ -112,7 +122,8 @@ export const openCalcMenu = (protyle: IProtyle, calcElement: HTMLElement, data?:
avId, avId,
oldOperator, oldOperator,
operator: "", operator: "",
data, data: panelData?.data,
blockID,
target: calcElement target: calcElement
}); });
calcItem({ calcItem({
@ -122,7 +133,8 @@ export const openCalcMenu = (protyle: IProtyle, calcElement: HTMLElement, data?:
avId, avId,
oldOperator, oldOperator,
operator: "Count all", operator: "Count all",
data, data: panelData?.data,
blockID,
target: calcElement target: calcElement
}); });
if (type !== "checkbox") { if (type !== "checkbox") {
@ -133,7 +145,8 @@ export const openCalcMenu = (protyle: IProtyle, calcElement: HTMLElement, data?:
avId, avId,
oldOperator, oldOperator,
operator: "Count values", operator: "Count values",
data, data: panelData?.data,
blockID,
target: calcElement target: calcElement
}); });
calcItem({ calcItem({
@ -143,7 +156,8 @@ export const openCalcMenu = (protyle: IProtyle, calcElement: HTMLElement, data?:
avId, avId,
oldOperator, oldOperator,
operator: "Count unique values", operator: "Count unique values",
data, data: panelData?.data,
blockID,
target: calcElement target: calcElement
}); });
calcItem({ calcItem({
@ -153,7 +167,8 @@ export const openCalcMenu = (protyle: IProtyle, calcElement: HTMLElement, data?:
avId, avId,
oldOperator, oldOperator,
operator: "Count empty", operator: "Count empty",
data, data: panelData?.data,
blockID,
target: calcElement target: calcElement
}); });
calcItem({ calcItem({
@ -163,7 +178,8 @@ export const openCalcMenu = (protyle: IProtyle, calcElement: HTMLElement, data?:
avId, avId,
oldOperator, oldOperator,
operator: "Count not empty", operator: "Count not empty",
data, data: panelData?.data,
blockID,
target: calcElement target: calcElement
}); });
calcItem({ calcItem({
@ -173,7 +189,8 @@ export const openCalcMenu = (protyle: IProtyle, calcElement: HTMLElement, data?:
avId, avId,
oldOperator, oldOperator,
operator: "Percent empty", operator: "Percent empty",
data, data: panelData?.data,
blockID,
target: calcElement target: calcElement
}); });
calcItem({ calcItem({
@ -183,7 +200,8 @@ export const openCalcMenu = (protyle: IProtyle, calcElement: HTMLElement, data?:
avId, avId,
oldOperator, oldOperator,
operator: "Percent not empty", operator: "Percent not empty",
data, data: panelData?.data,
blockID,
target: calcElement target: calcElement
}); });
} else { } else {
@ -194,7 +212,8 @@ export const openCalcMenu = (protyle: IProtyle, calcElement: HTMLElement, data?:
avId, avId,
oldOperator, oldOperator,
operator: "Checked", operator: "Checked",
data, data: panelData?.data,
blockID,
target: calcElement target: calcElement
}); });
calcItem({ calcItem({
@ -204,7 +223,8 @@ export const openCalcMenu = (protyle: IProtyle, calcElement: HTMLElement, data?:
avId, avId,
oldOperator, oldOperator,
operator: "Unchecked", operator: "Unchecked",
data, data: panelData?.data,
blockID,
target: calcElement target: calcElement
}); });
calcItem({ calcItem({
@ -214,7 +234,8 @@ export const openCalcMenu = (protyle: IProtyle, calcElement: HTMLElement, data?:
avId, avId,
oldOperator, oldOperator,
operator: "Percent checked", operator: "Percent checked",
data, data: panelData?.data,
blockID,
target: calcElement target: calcElement
}); });
calcItem({ calcItem({
@ -224,7 +245,8 @@ export const openCalcMenu = (protyle: IProtyle, calcElement: HTMLElement, data?:
avId, avId,
oldOperator, oldOperator,
operator: "Percent unchecked", operator: "Percent unchecked",
data, data: panelData?.data,
blockID,
target: calcElement target: calcElement
}); });
} }
@ -236,7 +258,8 @@ export const openCalcMenu = (protyle: IProtyle, calcElement: HTMLElement, data?:
avId, avId,
oldOperator, oldOperator,
operator: "Sum", operator: "Sum",
data, data: panelData?.data,
blockID,
target: calcElement target: calcElement
}); });
calcItem({ calcItem({
@ -246,7 +269,8 @@ export const openCalcMenu = (protyle: IProtyle, calcElement: HTMLElement, data?:
avId, avId,
oldOperator, oldOperator,
operator: "Average", operator: "Average",
data, data: panelData?.data,
blockID,
target: calcElement target: calcElement
}); });
calcItem({ calcItem({
@ -256,7 +280,8 @@ export const openCalcMenu = (protyle: IProtyle, calcElement: HTMLElement, data?:
avId, avId,
oldOperator, oldOperator,
operator: "Median", operator: "Median",
data, data: panelData?.data,
blockID,
target: calcElement target: calcElement
}); });
calcItem({ calcItem({
@ -266,7 +291,8 @@ export const openCalcMenu = (protyle: IProtyle, calcElement: HTMLElement, data?:
avId, avId,
oldOperator, oldOperator,
operator: "Min", operator: "Min",
data, data: panelData?.data,
blockID,
target: calcElement target: calcElement
}); });
calcItem({ calcItem({
@ -276,7 +302,8 @@ export const openCalcMenu = (protyle: IProtyle, calcElement: HTMLElement, data?:
avId, avId,
oldOperator, oldOperator,
operator: "Max", operator: "Max",
data, data: panelData?.data,
blockID,
target: calcElement target: calcElement
}); });
calcItem({ calcItem({
@ -286,7 +313,8 @@ export const openCalcMenu = (protyle: IProtyle, calcElement: HTMLElement, data?:
avId, avId,
oldOperator, oldOperator,
operator: "Range", operator: "Range",
data, data: panelData?.data,
blockID,
target: calcElement target: calcElement
}); });
} else if (["date", "created", "updated"].includes(type)) { } else if (["date", "created", "updated"].includes(type)) {
@ -297,7 +325,8 @@ export const openCalcMenu = (protyle: IProtyle, calcElement: HTMLElement, data?:
avId, avId,
oldOperator, oldOperator,
operator: "Earliest", operator: "Earliest",
data, data: panelData?.data,
blockID,
target: calcElement target: calcElement
}); });
calcItem({ calcItem({
@ -307,7 +336,8 @@ export const openCalcMenu = (protyle: IProtyle, calcElement: HTMLElement, data?:
avId, avId,
oldOperator, oldOperator,
operator: "Latest", operator: "Latest",
data, data: panelData?.data,
blockID,
target: calcElement target: calcElement
}); });
calcItem({ calcItem({
@ -317,7 +347,8 @@ export const openCalcMenu = (protyle: IProtyle, calcElement: HTMLElement, data?:
avId, avId,
oldOperator, oldOperator,
operator: "Range", operator: "Range",
data, data: panelData?.data,
blockID,
target: calcElement target: calcElement
}); });
} }

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

@ -496,6 +496,7 @@ export const showColMenu = (protyle: IProtyle, blockElement: Element, cellElemen
const type = cellElement.getAttribute("data-dtype") as TAVCol; const type = cellElement.getAttribute("data-dtype") as TAVCol;
const colId = cellElement.getAttribute("data-col-id"); const colId = cellElement.getAttribute("data-col-id");
const avID = blockElement.getAttribute("data-av-id"); const avID = blockElement.getAttribute("data-av-id");
const blockID = blockElement.getAttribute("data-node-id");
const oldValue = cellElement.querySelector(".av__celltext").textContent.trim(); const oldValue = cellElement.querySelector(".av__celltext").textContent.trim();
const menu = new Menu("av-header-cell", () => { const menu = new Menu("av-header-cell", () => {
const newValue = (menu.element.querySelector(".b3-text-field") as HTMLInputElement).value; const newValue = (menu.element.querySelector(".b3-text-field") as HTMLInputElement).value;
@ -598,11 +599,13 @@ export const showColMenu = (protyle: IProtyle, blockElement: Element, cellElemen
data: [{ data: [{
column: colId, column: colId,
order: "ASC" order: "ASC"
}] }],
blockID
}], [{ }], [{
action: "setAttrViewSorts", action: "setAttrViewSorts",
avID: response.data.id, avID: response.data.id,
data: response.data.view.sorts data: response.data.view.sorts,
blockID
}]); }]);
}); });
} }
@ -620,11 +623,13 @@ export const showColMenu = (protyle: IProtyle, blockElement: Element, cellElemen
data: [{ data: [{
column: colId, column: colId,
order: "DESC" order: "DESC"
}] }],
blockID
}], [{ }], [{
action: "setAttrViewSorts", action: "setAttrViewSorts",
avID: response.data.id, avID: response.data.id,
data: response.data.view.sorts data: response.data.view.sorts,
blockID
}]); }]);
}); });
} }
@ -702,12 +707,14 @@ export const showColMenu = (protyle: IProtyle, blockElement: Element, cellElemen
action: "setAttrViewColHidden", action: "setAttrViewColHidden",
id: colId, id: colId,
avID, avID,
data: true data: true,
blockID
}], [{ }], [{
action: "setAttrViewColHidden", action: "setAttrViewColHidden",
id: colId, id: colId,
avID, avID,
data: false data: false,
blockID
}]); }]);
} }
}); });
@ -721,12 +728,14 @@ export const showColMenu = (protyle: IProtyle, blockElement: Element, cellElemen
action: "setAttrViewColPin", action: "setAttrViewColPin",
id: colId, id: colId,
avID, avID,
data: !isPin data: !isPin,
blockID
}], [{ }], [{
action: "setAttrViewColPin", action: "setAttrViewColPin",
id: colId, id: colId,
avID, avID,
data: isPin data: isPin,
blockID
}]); }]);
updateAttrViewCellAnimation(blockElement.querySelector(`.av__row--header .av__cell[data-col-id="${colId}"]`), undefined, {pin: !isPin}); updateAttrViewCellAnimation(blockElement.querySelector(`.av__row--header .av__cell[data-col-id="${colId}"]`), undefined, {pin: !isPin});
} }
@ -779,12 +788,14 @@ export const showColMenu = (protyle: IProtyle, blockElement: Element, cellElemen
action: "setAttrViewColWrap", action: "setAttrViewColWrap",
id: colId, id: colId,
avID, avID,
data: inputElement.checked data: inputElement.checked,
blockID
}], [{ }], [{
action: "setAttrViewColWrap", action: "setAttrViewColWrap",
id: colId, id: colId,
avID, avID,
data: !inputElement.checked data: !inputElement.checked,
blockID
}]); }]);
}); });
} }

13
app/src/protyle/render/av/filter.ts
View file

@ -65,6 +65,7 @@ export const setFilter = async (options: {
if (rectTarget.height === 0) { if (rectTarget.height === 0) {
rectTarget = options.protyle.wysiwyg.element.querySelector(`[data-col-id="${options.target.dataset.colId}"]`).getBoundingClientRect(); rectTarget = options.protyle.wysiwyg.element.querySelector(`[data-col-id="${options.target.dataset.colId}"]`).getBoundingClientRect();
} }
const blockID = options.blockElement.getAttribute("data-node-id")
const menu = new Menu("set-filter-" + options.filter.column, () => { const menu = new Menu("set-filter-" + options.filter.column, () => {
const oldFilters = JSON.parse(JSON.stringify(options.data.view.filters)); const oldFilters = JSON.parse(JSON.stringify(options.data.view.filters));
const selectElement = menu.element.querySelector(".b3-select") as HTMLSelectElement; const selectElement = menu.element.querySelector(".b3-select") as HTMLSelectElement;
@ -153,11 +154,13 @@ export const setFilter = async (options: {
transaction(options.protyle, [{ transaction(options.protyle, [{
action: "setAttrViewFilters", action: "setAttrViewFilters",
avID: options.data.id, avID: options.data.id,
data: options.data.view.filters data: options.data.view.filters,
blockID
}], [{ }], [{
action: "setAttrViewFilters", action: "setAttrViewFilters",
avID: options.data.id, avID: options.data.id,
data: oldFilters data: oldFilters,
blockID
}]); }]);
const menuElement = hasClosestByClassName(options.target, "b3-menu"); const menuElement = hasClosestByClassName(options.target, "b3-menu");
if (menuElement) { if (menuElement) {
@ -408,11 +411,13 @@ export const setFilter = async (options: {
transaction(options.protyle, [{ transaction(options.protyle, [{
action: "setAttrViewFilters", action: "setAttrViewFilters",
avID: options.data.id, avID: options.data.id,
data: options.data.view.filters data: options.data.view.filters,
blockID
}], [{ }], [{
action: "setAttrViewFilters", action: "setAttrViewFilters",
avID: options.data.id, avID: options.data.id,
data: oldFilters data: oldFilters,
blockID
}]); }]);
const menuElement = hasClosestByClassName(options.target, "b3-menu"); const menuElement = hasClosestByClassName(options.target, "b3-menu");
if (menuElement) { if (menuElement) {

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

@ -51,6 +51,7 @@ export const openMenuPanel = (options: {
} }
window.siyuan.menus.menu.remove(); window.siyuan.menus.menu.remove();
const avID = options.blockElement.getAttribute("data-av-id"); const avID = options.blockElement.getAttribute("data-av-id");
const blockID = options.blockElement.getAttribute("data-node-id");
fetchPost("/api/av/renderAttributeView", { fetchPost("/api/av/renderAttributeView", {
id: avID, id: avID,
pageSize: parseInt(options.blockElement.getAttribute("data-page-size")) || undefined, pageSize: parseInt(options.blockElement.getAttribute("data-page-size")) || undefined,
@ -154,7 +155,7 @@ export const openMenuPanel = (options: {
} else { } else {
setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height); setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height);
if (options.type === "sorts") { if (options.type === "sorts") {
bindSortsEvent(options.protyle, menuElement, data); bindSortsEvent(options.protyle, menuElement, data, blockID);
} else if (options.type === "edit") { } else if (options.type === "edit") {
bindEditEvent({protyle: options.protyle, data, menuElement, isCustomAttr}); bindEditEvent({protyle: options.protyle, data, menuElement, isCustomAttr});
} else if (options.type === "config") { } else if (options.type === "config") {
@ -214,14 +215,16 @@ export const openMenuPanel = (options: {
transaction(options.protyle, [{ transaction(options.protyle, [{
action: "setAttrViewSorts", action: "setAttrViewSorts",
avID, avID,
data: changeData data: changeData,
blockID
}], [{ }], [{
action: "setAttrViewSorts", action: "setAttrViewSorts",
avID, avID,
data: oldData data: oldData,
blockID
}]); }]);
menuElement.innerHTML = getSortsHTML(data.view.columns, data.view.sorts); menuElement.innerHTML = getSortsHTML(data.view.columns, data.view.sorts);
bindSortsEvent(options.protyle, menuElement, data); bindSortsEvent(options.protyle, menuElement, data, blockID);
return; return;
} }
if (targetElement.querySelector('[data-type="removeFilter"]')) { if (targetElement.querySelector('[data-type="removeFilter"]')) {
@ -248,11 +251,13 @@ export const openMenuPanel = (options: {
transaction(options.protyle, [{ transaction(options.protyle, [{
action: "setAttrViewFilters", action: "setAttrViewFilters",
avID, avID,
data: changeData data: changeData,
blockID
}], [{ }], [{
action: "setAttrViewFilters", action: "setAttrViewFilters",
avID, avID,
data: oldData data: oldData,
blockID
}]); }]);
menuElement.innerHTML = getFiltersHTML(data.view); menuElement.innerHTML = getFiltersHTML(data.view);
return; return;
@ -261,11 +266,13 @@ export const openMenuPanel = (options: {
transaction(options.protyle, [{ transaction(options.protyle, [{
action: "sortAttrViewView", action: "sortAttrViewView",
avID, avID,
blockID,
id: sourceId, id: sourceId,
previousID: isTop ? targetElement.previousElementSibling?.getAttribute("data-id") : targetElement.getAttribute("data-id") previousID: isTop ? targetElement.previousElementSibling?.getAttribute("data-id") : targetElement.getAttribute("data-id")
}], [{ }], [{
action: "sortAttrViewView", action: "sortAttrViewView",
avID, avID,
blockID,
id: sourceId, id: sourceId,
previousID: sourceElement.previousElementSibling?.getAttribute("data-id") previousID: sourceElement.previousElementSibling?.getAttribute("data-id")
}]); }]);
@ -366,11 +373,13 @@ export const openMenuPanel = (options: {
avID, avID,
previousID: (targetElement.classList.contains("dragover__top") ? targetElement.previousElementSibling?.getAttribute("data-id") : targetElement.getAttribute("data-id")) || "", previousID: (targetElement.classList.contains("dragover__top") ? targetElement.previousElementSibling?.getAttribute("data-id") : targetElement.getAttribute("data-id")) || "",
id: sourceId, id: sourceId,
blockID,
}], [{ }], [{
action: "sortAttrViewCol", action: "sortAttrViewCol",
avID, avID,
previousID: sourceElement.previousElementSibling?.getAttribute("data-id") || "", previousID: sourceElement.previousElementSibling?.getAttribute("data-id") || "",
id: sourceId, id: sourceId,
blockID
}]); }]);
let column: IAVColumn; let column: IAVColumn;
data.view.columns.find((item, index: number) => { data.view.columns.find((item, index: number) => {
@ -459,7 +468,7 @@ export const openMenuPanel = (options: {
break; break;
} else if (type === "goSorts") { } else if (type === "goSorts") {
menuElement.innerHTML = getSortsHTML(data.view.columns, data.view.sorts); menuElement.innerHTML = getSortsHTML(data.view.columns, data.view.sorts);
bindSortsEvent(options.protyle, menuElement, data); 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();
event.stopPropagation(); event.stopPropagation();
@ -468,15 +477,17 @@ export const openMenuPanel = (options: {
transaction(options.protyle, [{ transaction(options.protyle, [{
action: "setAttrViewSorts", action: "setAttrViewSorts",
avID, avID,
data: [] data: [],
blockID
}], [{ }], [{
action: "setAttrViewSorts", action: "setAttrViewSorts",
avID, avID,
data: data.view.sorts data: data.view.sorts,
blockID
}]); }]);
data.view.sorts = []; data.view.sorts = [];
menuElement.innerHTML = getSortsHTML(data.view.columns, data.view.sorts); menuElement.innerHTML = getSortsHTML(data.view.columns, data.view.sorts);
bindSortsEvent(options.protyle, menuElement, data); 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();
event.stopPropagation(); event.stopPropagation();
@ -488,7 +499,8 @@ export const openMenuPanel = (options: {
menuElement, menuElement,
tabRect, tabRect,
avId: avID, avId: avID,
protyle: options.protyle protyle: options.protyle,
blockID,
}); });
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
@ -504,14 +516,16 @@ export const openMenuPanel = (options: {
transaction(options.protyle, [{ transaction(options.protyle, [{
action: "setAttrViewSorts", action: "setAttrViewSorts",
avID, avID,
data: data.view.sorts data: data.view.sorts,
blockID
}], [{ }], [{
action: "setAttrViewSorts", action: "setAttrViewSorts",
avID, avID,
data: oldSorts data: oldSorts,
blockID
}]); }]);
menuElement.innerHTML = getSortsHTML(data.view.columns, data.view.sorts); menuElement.innerHTML = getSortsHTML(data.view.columns, data.view.sorts);
bindSortsEvent(options.protyle, menuElement, data); 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();
event.stopPropagation(); event.stopPropagation();
@ -526,11 +540,13 @@ export const openMenuPanel = (options: {
transaction(options.protyle, [{ transaction(options.protyle, [{
action: "setAttrViewFilters", action: "setAttrViewFilters",
avID, avID,
data: [] data: [],
blockID
}], [{ }], [{
action: "setAttrViewFilters", action: "setAttrViewFilters",
avID, avID,
data: data.view.filters data: data.view.filters,
blockID
}]); }]);
data.view.filters = []; data.view.filters = [];
menuElement.innerHTML = getFiltersHTML(data.view); menuElement.innerHTML = getFiltersHTML(data.view);
@ -563,11 +579,13 @@ export const openMenuPanel = (options: {
transaction(options.protyle, [{ transaction(options.protyle, [{
action: "setAttrViewFilters", action: "setAttrViewFilters",
avID, avID,
data: data.view.filters data: data.view.filters,
blockID
}], [{ }], [{
action: "setAttrViewFilters", action: "setAttrViewFilters",
avID, avID,
data: oldFilters data: oldFilters,
blockID
}]); }]);
menuElement.innerHTML = getFiltersHTML(data.view); menuElement.innerHTML = getFiltersHTML(data.view);
setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height); setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height);
@ -655,12 +673,12 @@ export const openMenuPanel = (options: {
transaction(options.protyle, [{ transaction(options.protyle, [{
action: "hideAttrViewName", action: "hideAttrViewName",
avID, avID,
id: data.viewID, blockID,
data: true data: true
}], [{ }], [{
action: "hideAttrViewName", action: "hideAttrViewName",
avID, avID,
id: data.viewID, blockID,
data: false data: false
}]); }]);
options.blockElement.querySelector(".av__title").classList.add("av__title--hide"); options.blockElement.querySelector(".av__title").classList.add("av__title--hide");
@ -668,12 +686,12 @@ export const openMenuPanel = (options: {
transaction(options.protyle, [{ transaction(options.protyle, [{
action: "hideAttrViewName", action: "hideAttrViewName",
avID, avID,
id: data.viewID, blockID,
data: false data: false
}], [{ }], [{
action: "hideAttrViewName", action: "hideAttrViewName",
avID, avID,
id: data.viewID, blockID,
data: true data: true
}]); }]);
options.blockElement.querySelector(".av__title").classList.remove("av__title--hide"); options.blockElement.querySelector(".av__title").classList.remove("av__title--hide");
@ -688,11 +706,13 @@ export const openMenuPanel = (options: {
action: "duplicateAttrViewView", action: "duplicateAttrViewView",
avID, avID,
previousID: data.viewID, previousID: data.viewID,
id id,
blockID
}], [{ }], [{
action: "removeAttrViewView", action: "removeAttrViewView",
avID, avID,
id id,
blockID
}]); }]);
options.blockElement.setAttribute("custom-sy-av-view", id) options.blockElement.setAttribute("custom-sy-av-view", id)
avPanelElement.remove(); avPanelElement.remove();
@ -706,7 +726,8 @@ export const openMenuPanel = (options: {
transaction(options.protyle, [{ transaction(options.protyle, [{
action: "removeAttrViewView", action: "removeAttrViewView",
avID, avID,
id: data.viewID id: data.viewID,
blockID
}]); }]);
} }
avPanelElement.remove(); avPanelElement.remove();
@ -754,13 +775,15 @@ export const openMenuPanel = (options: {
action: "setAttrViewColHidden", action: "setAttrViewColHidden",
id: item.id, id: item.id,
avID, avID,
data: false data: false,
blockID,
}); });
undoOperations.push({ undoOperations.push({
action: "setAttrViewColHidden", action: "setAttrViewColHidden",
id: item.id, id: item.id,
avID, avID,
data: true data: true,
blockID
}); });
item.hidden = false; item.hidden = false;
} }
@ -782,13 +805,15 @@ export const openMenuPanel = (options: {
action: "setAttrViewColHidden", action: "setAttrViewColHidden",
id: item.id, id: item.id,
avID, avID,
data: true data: true,
blockID
}); });
undoOperations.push({ undoOperations.push({
action: "setAttrViewColHidden", action: "setAttrViewColHidden",
id: item.id, id: item.id,
avID, avID,
data: false data: false,
blockID
}); });
item.hidden = true; item.hidden = true;
} }
@ -872,7 +897,7 @@ export const openMenuPanel = (options: {
event.stopPropagation(); event.stopPropagation();
break; break;
} else if (type === "goSearchRollupCalc") { } else if (type === "goSearchRollupCalc") {
openCalcMenu(options.protyle, target, data, options.colId); openCalcMenu(options.protyle, target, {data, colId: options.colId, blockID});
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
break; break;
@ -904,12 +929,14 @@ export const openMenuPanel = (options: {
action: "setAttrViewColHidden", action: "setAttrViewColHidden",
id: colId, id: colId,
avID, avID,
data: true data: true,
blockID
}], [{ }], [{
action: "setAttrViewColHidden", action: "setAttrViewColHidden",
id: colId, id: colId,
avID, avID,
data: false data: false,
blockID
}]); }]);
data.view.columns.find((item: IAVColumn) => item.id === colId).hidden = true; data.view.columns.find((item: IAVColumn) => item.id === colId).hidden = true;
if (isEdit) { if (isEdit) {
@ -934,12 +961,14 @@ export const openMenuPanel = (options: {
action: "setAttrViewColHidden", action: "setAttrViewColHidden",
id: colId, id: colId,
avID, avID,
data: false data: false,
blockID
}], [{ }], [{
action: "setAttrViewColHidden", action: "setAttrViewColHidden",
id: colId, id: colId,
avID, avID,
data: true data: true,
blockID
}]); }]);
data.view.columns.find((item: IAVColumn) => item.id === colId).hidden = false; data.view.columns.find((item: IAVColumn) => item.id === colId).hidden = false;
if (isEdit) { if (isEdit) {

4
app/src/protyle/render/av/row.ts
View file

@ -169,14 +169,17 @@ const updatePageSize = (options: {
return; return;
} }
options.nodeElement.setAttribute("data-page-size", options.newPageSize); options.nodeElement.setAttribute("data-page-size", options.newPageSize);
const blockID = options.nodeElement.getAttribute("data-node-id")
transaction(options.protyle, [{ transaction(options.protyle, [{
action: "setAttrViewPageSize", action: "setAttrViewPageSize",
avID: options.avID, avID: options.avID,
data: parseInt(options.newPageSize), data: parseInt(options.newPageSize),
blockID
}], [{ }], [{
action: "setAttrViewPageSize", action: "setAttrViewPageSize",
data: parseInt(options.currentPageSize), data: parseInt(options.currentPageSize),
avID: options.avID, avID: options.avID,
blockID
}]); }]);
document.querySelector(".av__panel")?.remove(); document.querySelector(".av__panel")?.remove();
}; };
@ -270,6 +273,7 @@ export const deleteRow = (blockElement: HTMLElement, protyle: IProtyle) => {
previousID: item.previousElementSibling?.getAttribute("data-id") || "", previousID: item.previousElementSibling?.getAttribute("data-id") || "",
srcIDs: [item.getAttribute("data-id")], srcIDs: [item.getAttribute("data-id")],
isDetached: item.querySelector('.av__cell[data-detached="true"]') ? true : false, isDetached: item.querySelector('.av__cell[data-detached="true"]') ? true : false,
blockID: blockElement.dataset.nodeId
}); });
}); });
transaction(protyle, [{ transaction(protyle, [{

19
app/src/protyle/render/av/sort.ts
View file

@ -10,7 +10,8 @@ export const addSort = (options: {
menuElement: HTMLElement, menuElement: HTMLElement,
tabRect: DOMRect, tabRect: DOMRect,
avId: string, avId: string,
protyle: IProtyle protyle: IProtyle,
blockID: string,
}) => { }) => {
const menu = new Menu("av-add-sort"); const menu = new Menu("av-add-sort");
options.data.view.columns.forEach((column) => { options.data.view.columns.forEach((column) => {
@ -34,14 +35,16 @@ export const addSort = (options: {
transaction(options.protyle, [{ transaction(options.protyle, [{
action: "setAttrViewSorts", action: "setAttrViewSorts",
avID: options.data.id, avID: options.data.id,
data: options.data.view.sorts data: options.data.view.sorts,
blockID: options.blockID,
}], [{ }], [{
action: "setAttrViewSorts", action: "setAttrViewSorts",
avID: options.data.id, avID: options.data.id,
data: oldSorts data: oldSorts,
blockID: options.blockID,
}]); }]);
options.menuElement.innerHTML = getSortsHTML(options.data.view.columns, options.data.view.sorts); options.menuElement.innerHTML = getSortsHTML(options.data.view.columns, options.data.view.sorts);
bindSortsEvent(options.protyle, options.menuElement, options.data); bindSortsEvent(options.protyle, options.menuElement, options.data, options.blockID);
setPosition(options.menuElement, options.tabRect.right - options.menuElement.clientWidth, options.tabRect.bottom, options.tabRect.height); setPosition(options.menuElement, options.tabRect.right - options.menuElement.clientWidth, options.tabRect.bottom, options.tabRect.height);
} }
}); });
@ -54,7 +57,7 @@ export const addSort = (options: {
}); });
}; };
export const bindSortsEvent = (protyle: IProtyle, menuElement: HTMLElement, data: IAV) => { export const bindSortsEvent = (protyle: IProtyle, menuElement: HTMLElement, data: IAV, blockID: string) => {
menuElement.querySelectorAll("select").forEach((item: HTMLSelectElement) => { menuElement.querySelectorAll("select").forEach((item: HTMLSelectElement) => {
item.addEventListener("change", () => { item.addEventListener("change", () => {
const colId = item.parentElement.getAttribute("data-id"); const colId = item.parentElement.getAttribute("data-id");
@ -73,11 +76,13 @@ export const bindSortsEvent = (protyle: IProtyle, menuElement: HTMLElement, data
transaction(protyle, [{ transaction(protyle, [{
action: "setAttrViewSorts", action: "setAttrViewSorts",
avID: data.id, avID: data.id,
data: data.view.sorts data: data.view.sorts,
blockID
}], [{ }], [{
action: "setAttrViewSorts", action: "setAttrViewSorts",
avID: data.id, avID: data.id,
data: oldSort data: oldSort,
blockID
}]); }]);
}); });
}); });

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

@ -48,11 +48,13 @@ export const openViewMenu = (options: { protyle: IProtyle, blockElement: HTMLEle
action: "duplicateAttrViewView", action: "duplicateAttrViewView",
avID: options.blockElement.dataset.avId, avID: options.blockElement.dataset.avId,
previousID: options.element.dataset.id, previousID: options.element.dataset.id,
id id,
blockID: options.blockElement.dataset.nodeId
}], [{ }], [{
action: "removeAttrViewView", action: "removeAttrViewView",
avID: options.blockElement.dataset.avId, avID: options.blockElement.dataset.avId,
id id,
blockID: options.blockElement.dataset.nodeId
}]); }]);
options.blockElement.setAttribute("custom-sy-av-view", id) options.blockElement.setAttribute("custom-sy-av-view", id)
} }
@ -68,7 +70,8 @@ export const openViewMenu = (options: { protyle: IProtyle, blockElement: HTMLEle
transaction(options.protyle, [{ transaction(options.protyle, [{
action: "removeAttrViewView", action: "removeAttrViewView",
avID: options.blockElement.dataset.avId, avID: options.blockElement.dataset.avId,
id: options.element.dataset.id id: options.element.dataset.id,
blockID: options.blockElement.dataset.nodeId
}]); }]);
} }
} }
@ -199,11 +202,13 @@ export const addView = (protyle: IProtyle, blockElement: Element) => {
transaction(protyle, [{ transaction(protyle, [{
action: "addAttrViewView", action: "addAttrViewView",
avID, avID,
id id,
blockID: blockElement.getAttribute("data-node-id")
}], [{ }], [{
action: "removeAttrViewView", action: "removeAttrViewView",
avID, avID,
id id,
blockID: blockElement.getAttribute("data-node-id")
}]); }]);
blockElement.setAttribute("custom-sy-av-view", id); blockElement.setAttribute("custom-sy-av-view", id);
}; };

6
app/src/protyle/util/editorCommonEvent.ts
View file

@ -847,11 +847,13 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => {
avID, avID,
previousID, previousID,
id: gutterTypes[2], id: gutterTypes[2],
blockID: blockElement.dataset.nodeId,
}], [{ }], [{
action: "sortAttrViewCol", action: "sortAttrViewCol",
avID, avID,
previousID: oldPreviousID, previousID: oldPreviousID,
id: gutterTypes[2], id: gutterTypes[2],
blockID: blockElement.dataset.nodeId,
}]); }]);
} }
} else if (targetElement.classList.contains("av__row")) { } else if (targetElement.classList.contains("av__row")) {
@ -876,12 +878,14 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => {
avID, avID,
previousID, previousID,
id: item, id: item,
blockID: blockElement.dataset.nodeId,
}); });
undoOperations.push({ undoOperations.push({
action: "sortAttrViewRow", action: "sortAttrViewRow",
avID, avID,
previousID: undoPreviousId, previousID: undoPreviousId,
id: item, id: item,
blockID: blockElement.dataset.nodeId,
}); });
}); });
transaction(protyle, doOperations, undoOperations); transaction(protyle, doOperations, undoOperations);
@ -892,6 +896,7 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => {
previousID, previousID,
srcIDs: sourceIds, srcIDs: sourceIds,
isDetached: false, isDetached: false,
blockID: blockElement.dataset.nodeId
}], [{ }], [{
action: "removeAttrViewBlock", action: "removeAttrViewBlock",
srcIDs: sourceIds, srcIDs: sourceIds,
@ -952,6 +957,7 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => {
previousID, previousID,
srcIDs: ids, srcIDs: ids,
isDetached: false, isDetached: false,
blockID: blockElement.dataset.nodeId,
}], [{ }], [{
action: "removeAttrViewBlock", action: "removeAttrViewBlock",
srcIDs: ids, srcIDs: ids,

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

@ -412,6 +412,7 @@ export class WYSIWYG {
return; return;
} }
const avId = nodeElement.getAttribute("data-av-id"); const avId = nodeElement.getAttribute("data-av-id");
const blockID = nodeElement.dataset.nodeId;
const dragElement = target.parentElement; const dragElement = target.parentElement;
const oldWidth = dragElement.clientWidth; const oldWidth = dragElement.clientWidth;
const dragColId = dragElement.getAttribute("data-col-id"); const dragColId = dragElement.getAttribute("data-col-id");
@ -439,12 +440,14 @@ export class WYSIWYG {
action: "setAttrViewColWidth", action: "setAttrViewColWidth",
id: dragColId, id: dragColId,
avID: avId, avID: avId,
data: newWidth data: newWidth,
blockID
}], [{ }], [{
action: "setAttrViewColWidth", action: "setAttrViewColWidth",
id: dragColId, id: dragColId,
avID: avId, avID: avId,
data: oldWidth + "px" data: oldWidth + "px",
blockID
}]); }]);
}; };
this.preventClick = true; this.preventClick = true;

1
app/src/types/index.d.ts vendored
View file

@ -454,6 +454,7 @@ interface IScrollAttr {
interface IOperation { interface IOperation {
action: TOperation, // move， delete 不需要传 data action: TOperation, // move， delete 不需要传 data
id?: string, id?: string,
blockID?: string,
isTwoWay?: boolean, // 是否双向关联 isTwoWay?: boolean, // 是否双向关联
backRelationKeyID?: string, // 双向关联的目标关联列 ID backRelationKeyID?: string, // 双向关联的目标关联列 ID
avID?: string, // av avID?: string, // av