github/siyuan
4
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2025-05-20 19:10:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

✨ https://github.com/siyuan-note/siyuan/issues/8694

Browse Source
This commit is contained in:
Vanessa 2023-07-10 19:02:59 +08:00
parent 96e7044baf
commit dd894b0457
5 changed files with 124 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/src/menus/Menu.ts
View File

@ -179,11 +179,11 @@ export class MenuItem {
if (this.element.getAttribute("disabled")) { if (this.element.getAttribute("disabled")) {
return; return;
} }
options.click(this.element); const keepOpen = options.click(this.element);
event.preventDefault(); event.preventDefault();
event.stopImmediatePropagation(); event.stopImmediatePropagation();
event.stopPropagation(); event.stopPropagation();
if (this.element.parentElement) { if (this.element.parentElement && !keepOpen) {
window.siyuan.menus.menu.remove(); window.siyuan.menus.menu.remove();
} }
}); });

1
app/src/protyle/render/av/openMenuPanel.ts
View File

@ -437,6 +437,7 @@ export const openMenuPanel = (protyle: IProtyle,
break; break;
} else if (type === "addSelectColAndCell") { } else if (type === "addSelectColAndCell") {
addSelectColAndCell(protyle, data, options, target, menuElement); addSelectColAndCell(protyle, data, options, target, menuElement);
window.siyuan.menus.menu.remove();
event.stopPropagation(); event.stopPropagation();
break; break;
} else if (type === "removeSelectCell") { } else if (type === "removeSelectCell") {

130
app/src/protyle/render/av/select.ts
View File

@ -112,9 +112,16 @@ export const removeSelectCell = (protyle: IProtyle, data: IAV, options: {
export const setSelectCol = (protyle: IProtyle, data: IAV, options: { export const setSelectCol = (protyle: IProtyle, data: IAV, options: {
cellElement: HTMLElement; cellElement: HTMLElement;
}, target: HTMLElement,) => { }, target: HTMLElement,) => {
const name = target.parentElement.dataset.name; const menuElement = hasClosestByClassName(target, "b3-menu");
const color = target.parentElement.dataset.color; if (!menuElement) {
return;
}
let name = target.parentElement.dataset.name;
let color = target.parentElement.dataset.color;
const menu = new Menu("av-select-option", () => { const menu = new Menu("av-select-option", () => {
if (name === inputElement.value) {
return;
}
transaction(protyle, [{ transaction(protyle, [{
action: "updateAttrViewColOption", action: "updateAttrViewColOption",
id: colId, id: colId,
@ -134,14 +141,43 @@ export const setSelectCol = (protyle: IProtyle, data: IAV, options: {
newName: name newName: name
}, },
}]); }]);
data.columns.find(column => {
if (column.id === colId) {
column.options.find((item) => {
if (item.name === name) {
item.name = inputElement.value;
return true;
}
});
return true;
}
});
data.rows.find(row => {
if (row.id === options.cellElement.parentElement.dataset.id) {
row.cells.find(cell => {
if (cell.id === options.cellElement.dataset.id) {
if (cell.valueType === "select") {
cell.value.select.content = inputElement.value;
} else {
cell.value.mSelect.find((item) => {
if (item.content === name) {
item.content = inputElement.value;
return true;
}
});
}
return true;
}
});
return true;
}
});
menuElement.innerHTML = getSelectHTML(data, options);
bindSelectEvent(protyle, data, menuElement, options);
}); });
if (menu.isOpen) { if (menu.isOpen) {
return; return;
} }
const menuElement = hasClosestByClassName(target, "b3-menu");
if (!menuElement) {
return;
}
const colId = options.cellElement.dataset.colId; const colId = options.cellElement.dataset.colId;
menu.addItem({ menu.addItem({
iconHTML: "", iconHTML: "",
@ -177,9 +213,30 @@ export const setSelectCol = (protyle: IProtyle, data: IAV, options: {
return true; return true;
} }
}); });
data.rows.find(row => {
if (row.id === options.cellElement.parentElement.dataset.id) {
row.cells.find(cell => {
if (cell.id === options.cellElement.dataset.id) {
if (cell.valueType === "select") {
cell.value.select = {
color: "",
content: ""
};
} else {
cell.value.mSelect.find((item, index) => {
if (item.content === newName) {
cell.value.mSelect.splice(index, 1);
return true;
}
});
}
return true;
}
});
return true;
}
})
menuElement.innerHTML = getSelectHTML(data, options); menuElement.innerHTML = getSelectHTML(data, options);
const cellRect = options.cellElement.getBoundingClientRect();
setPosition(menuElement, cellRect.left, cellRect.bottom, cellRect.height);
bindSelectEvent(protyle, data, menuElement, options); bindSelectEvent(protyle, data, menuElement, options);
}); });
} }
@ -190,7 +247,12 @@ export const setSelectCol = (protyle: IProtyle, data: IAV, options: {
accelerator: parseInt(color) === index + 1 ? '<svg class="svg" style="height: 30px; float: left;"><use xlink:href="#iconSelect"></use></svg>' : undefined, accelerator: parseInt(color) === index + 1 ? '<svg class="svg" style="height: 30px; float: left;"><use xlink:href="#iconSelect"></use></svg>' : undefined,
iconHTML: "", iconHTML: "",
label: `<span class="color__square" style="padding: 5px;margin: 2px;color: var(--b3-font-color${index + 1});background-color: var(--b3-font-background${index + 1});">A</span>`, label: `<span class="color__square" style="padding: 5px;margin: 2px;color: var(--b3-font-color${index + 1});background-color: var(--b3-font-background${index + 1});">A</span>`,
click() { click(element) {
if (element.lastElementChild.classList.contains("b3-menu__accelerator")) {
return
}
element.parentElement.querySelector(".b3-menu__accelerator")?.remove();
element.insertAdjacentHTML("beforeend", '<span class="b3-menu__accelerator"><svg class="svg" style="height: 30px; float: left;"><use xlink:href="#iconSelect"></use></svg></span>');
transaction(protyle, [{ transaction(protyle, [{
action: "updateAttrViewColOption", action: "updateAttrViewColOption",
id: colId, id: colId,
@ -212,12 +274,54 @@ export const setSelectCol = (protyle: IProtyle, data: IAV, options: {
newColor: color newColor: color
}, },
}]); }]);
data.columns.find(column => {
if (column.id === colId) {
column.options.find((item) => {
if (item.name === name) {
item.name = inputElement.value;
item.color = (index + 1).toString();
return true;
}
});
return true;
}
});
data.rows.find(row => {
if (row.id === options.cellElement.parentElement.dataset.id) {
row.cells.find(cell => {
if (cell.id === options.cellElement.dataset.id) {
if (cell.valueType === "select") {
cell.value.select = {
content: inputElement.value,
color: (index + 1).toString()
}
} else {
cell.value.mSelect.find((item) => {
if (item.content === name) {
item.content = inputElement.value;
item.color = (index + 1).toString();
return true;
}
});
}
return true;
}
});
return true;
}
});
name = inputElement.value;
color = (index + 1).toString();
menuElement.innerHTML = getSelectHTML(data, options);
bindSelectEvent(protyle, data, menuElement, options);
return true;
} }
}); });
}); });
const rect = target.getBoundingClientRect(); const rect = target.getBoundingClientRect();
menu.open({ menu.open({
x: rect.left, x: rect.right,
y: rect.bottom, y: rect.bottom,
w: rect.width, w: rect.width,
h: rect.height, h: rect.height,
@ -330,9 +434,7 @@ export const addSelectColAndCell = (protyle: IProtyle, data: IAV, options: {
id: cellId, id: cellId,
rowID: rowId, rowID: rowId,
parentID: data.id, parentID: data.id,
data: { data: cellData.value
[colData.type]: cellData.value
}
}], [{ }], [{
action: "removeAttrViewColOption", action: "removeAttrViewColOption",
id: colId, id: colId,
@ -379,7 +481,7 @@ export const getSelectHTML = (data: IAV, options: { cellElement: HTMLElement })
selectedHTML += `<div class="b3-chip" data-type="removeSelectCell" data-content="${item.content}" style="background-color:var(--b3-font-background${item.color});color:var(--b3-font-color${item.color})">${item.content}<svg class="b3-chip__close" data-type="remove-option"><use xlink:href="#iconCloseRound"></use></svg></div>`; selectedHTML += `<div class="b3-chip" data-type="removeSelectCell" data-content="${item.content}" style="background-color:var(--b3-font-background${item.color});color:var(--b3-font-color${item.color})">${item.content}<svg class="b3-chip__close" data-type="remove-option"><use xlink:href="#iconCloseRound"></use></svg></div>`;
}); });
} else if (cell.value.select.content) { } else if (cell.value.select.content) {
selectedHTML += `<div class="b3-chip" data-type="removeSelectCell" data-content="${cell.value.select.content}" style="background-color:var(--b3-font-background${cell.value.select.color})";color:var(--b3-font-color${cell.value.select.color})>${cell.value.select.content}<svg class="b3-chip__close" data-type="remove-option"><use xlink:href="#iconCloseRound"></use></svg></div>`; selectedHTML += `<div class="b3-chip" data-type="removeSelectCell" data-content="${cell.value.select.content}" style="background-color:var(--b3-font-background${cell.value.select.color});color:var(--b3-font-color${cell.value.select.color})">${cell.value.select.content}<svg class="b3-chip__close" data-type="remove-option"><use xlink:href="#iconCloseRound"></use></svg></div>`;
} }
return true; return true;
} }

5
app/src/protyle/wysiwyg/transaction.ts
View File

@ -651,8 +651,9 @@ export const onTransaction = (protyle: IProtyle, operation: IOperation, focus: b
updateRef(protyle, operation.id); updateRef(protyle, operation.id);
} else if (operation.action === "append") { } else if (operation.action === "append") {
reloadProtyle(protyle, false); reloadProtyle(protyle, false);
} else if (["addAttrViewCol", "insertAttrViewBlock", "updateAttrViewCol", "updateAttrViewColOptions", "updateAttrViewCell", "sortAttrViewRow", } else if (["addAttrViewCol", "insertAttrViewBlock", "updateAttrViewCol", "updateAttrViewColOptions",
"sortAttrViewCol", "setAttrViewColHidden", "setAttrViewColWrap", "setAttrViewColWidth", "setAttrView"].includes(operation.action)) { "updateAttrViewColOption", "updateAttrViewCell", "sortAttrViewRow", "sortAttrViewCol", "setAttrViewColHidden",
"setAttrViewColWrap", "setAttrViewColWidth", "removeAttrViewColOption", "setAttrView"].includes(operation.action)) {
refreshAV(protyle, operation); refreshAV(protyle, operation);
} }
}; };

4
app/src/types/index.d.ts vendored
View File

@ -797,7 +797,7 @@ interface IModels {
interface IMenu { interface IMenu {
label?: string, label?: string,
click?: (element: HTMLElement) => void, click?: (element: HTMLElement) => boolean | void | Promise<boolean | void>
type?: "separator" | "submenu" | "readonly", type?: "separator" | "submenu" | "readonly",
accelerator?: string, accelerator?: string,
action?: string, action?: string,
@ -892,7 +892,7 @@ interface IAVCell {
value: { value: {
[key in TAVCol]?: IAVCellValue [key in TAVCol]?: IAVCellValue
} & { } & {
mSelect?: {content: string, color: string}[] mSelect?: { content: string, color: string }[]
}, },
valueType: TAVCol, valueType: TAVCol,
} }