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

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

Browse source
This commit is contained in:
Vanessa 2023-07-18 01:03:35 +08:00
parent 3dcf72fc32
commit 35b8e1e893
6 changed files with 224 additions and 130 deletions
Download patch file Download diff file Expand all files Collapse all files

1
app/src/assets/scss/business/_av.scss
View file

@ -239,6 +239,7 @@
.b3-menu { .b3-menu {
max-height: 70vh; max-height: 70vh;
min-width: 200px;
&__item .b3-chip { &__item .b3-chip {
max-width: 196px; max-width: 196px;

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

@ -70,7 +70,7 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
const headerMoreElement = hasClosestByAttribute(event.target, "data-type", "av-header-more"); const headerMoreElement = hasClosestByAttribute(event.target, "data-type", "av-header-more");
if (headerMoreElement) { if (headerMoreElement) {
openMenuPanel(protyle, blockElement, "properties"); openMenuPanel({protyle, blockElement, type: "properties"});
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
return true; return true;
@ -78,7 +78,7 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
const moreElement = hasClosestByAttribute(event.target, "data-type", "av-more"); const moreElement = hasClosestByAttribute(event.target, "data-type", "av-more");
if (moreElement) { if (moreElement) {
openMenuPanel(protyle, blockElement, "config"); openMenuPanel({protyle, blockElement, type: "config"});
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
return true; return true;
@ -86,7 +86,7 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
const sortsElement = hasClosestByAttribute(event.target, "data-type", "av-sort"); const sortsElement = hasClosestByAttribute(event.target, "data-type", "av-sort");
if (sortsElement) { if (sortsElement) {
openMenuPanel(protyle, blockElement, "sorts"); openMenuPanel({protyle, blockElement, type: "sorts"});
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
return true; return true;
@ -94,7 +94,7 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
const filtersElement = hasClosestByAttribute(event.target, "data-type", "av-filter"); const filtersElement = hasClosestByAttribute(event.target, "data-type", "av-filter");
if (filtersElement) { if (filtersElement) {
openMenuPanel(protyle, blockElement, "filters"); openMenuPanel({protyle, blockElement, type: "filters"});
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
return true; return true;

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

@ -292,7 +292,7 @@ export const popTextCell = (protyle: IProtyle, cellElements: HTMLElement[]) => {
} else if (type === "number") { } else if (type === "number") {
html = `<input type="number" value="${cellElements[0].textContent}" ${style} class="b3-text-field">`; html = `<input type="number" value="${cellElements[0].textContent}" ${style} class="b3-text-field">`;
} else if (["select", "mSelect"].includes(type) && blockElement) { } else if (["select", "mSelect"].includes(type) && blockElement) {
openMenuPanel(protyle, blockElement, "select", {cellElements}); openMenuPanel({protyle, blockElement, type: "select", cellElements});
return; return;
} }
window.siyuan.menus.menu.remove(); window.siyuan.menus.menu.remove();

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

@ -8,11 +8,60 @@ import {openMenuPanel} from "./openMenuPanel";
export const getEditHTML = (options: { export const getEditHTML = (options: {
protyle: IProtyle, protyle: IProtyle,
blockElement: HTMLElement, colId: string,
cellElement: HTMLElement,
data: IAV data: IAV
}) => { }) => {
// TODO let colData: IAVColumn
options.data.view.columns.find((item) => {
if (item.id === options.colId) {
colData = item;
return true;
}
})
let html = `<button class="b3-menu__item" data-type="nobg" data-col-id="${options.colId}">
<span class="block__icon" style="padding: 8px;margin-left: -4px;" data-type="goProperties">
<svg><use xlink:href="#iconLeft"></use></svg>
</span>
<span class="b3-menu__label ft__center">${window.siyuan.languages.edit}</span>
<svg class="b3-menu__action" data-type="close" style="opacity: 1"><use xlink:href="#iconCloseRound"></use></svg>
</button>
<button class="b3-menu__separator"></button>
<button class="b3-menu__item">
<svg class="b3-menu__icon" style=""><use xlink:href="#${getColIconByType(colData.type)}"></use></svg>
<span class="b3-menu__label"><input style="margin: 4px 0" class="b3-text-field" type="text" value="${colData.name}"></span>
</button>`;
if (colData.options && colData.options.length > 0) {
html += `<button class="b3-menu__separator"></button>
<button class="b3-menu__item">
<svg class="b3-menu__icon" style=""><use xlink:href="#iconAdd"></use></svg>
<span class="b3-menu__label"><input style="margin: 4px 0" class="b3-text-field" type="text" placeholder="Enter ${window.siyuan.languages.addAttr}"></span>
</button>`
colData.options.forEach(item => {
html += `<button class="b3-menu__item${html ? "" : " b3-menu__item--current"}" draggable="true" data-name="${item.name}" data-color="${item.color}">
<svg class="b3-menu__icon"><use xlink:href="#iconDrag"></use></svg>
<div class="fn__flex-1">
<span class="b3-chip" style="background-color:var(--b3-font-background${item.color});color:var(--b3-font-color${item.color})">
<span class="fn__ellipsis">${item.name}</span>
</span>
</div>
<svg class="b3-menu__action" data-type="setColOption"><use xlink:href="#iconEdit"></use></svg>
</button>`;
});
}
return `${html}
<button class="b3-menu__separator"></button>
<button class="b3-menu__item">
<svg class="b3-menu__icon" style=""><use xlink:href="#icon${colData.hidden ? "Eye" : "Eyeoff"}"></use></svg>
<span class="b3-menu__label">${colData.hidden ? window.siyuan.languages.showCol : window.siyuan.languages.hideCol}</span>
</button>
<button class="b3-menu__item">
<svg class="b3-menu__icon" style=""><use xlink:href="#iconCopy"></use></svg>
<span class="b3-menu__label">${window.siyuan.languages.duplicate}</span>
</button>
<button class="b3-menu__item">
<svg class="b3-menu__icon" style=""><use xlink:href="#iconTrashcan"></use></svg>
<span class="b3-menu__label">${window.siyuan.languages.delete}</span>
</button>`;
}; };
export const getColIconByType = (type: TAVCol) => { export const getColIconByType = (type: TAVCol) => {
@ -105,7 +154,7 @@ export const showColMenu = (protyle: IProtyle, blockElement: HTMLElement, cellEl
icon: "iconEdit", icon: "iconEdit",
label: window.siyuan.languages.edit, label: window.siyuan.languages.edit,
click() { click() {
openMenuPanel(protyle, blockElement, "edit", {cellElement}); openMenuPanel({protyle, blockElement, type: "edit", colId});
} }
}); });
} }

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

@ -4,36 +4,39 @@ import {addCol} from "./addCol";
import {getColIconByType, getEditHTML} from "./col"; import {getColIconByType, getEditHTML} from "./col";
import {setPosition} from "../../../util/setPosition"; import {setPosition} from "../../../util/setPosition";
import {hasClosestByAttribute} from "../../util/hasClosest"; import {hasClosestByAttribute} from "../../util/hasClosest";
import {bindSelectEvent, getSelectHTML, addSelectColAndCell, setSelectCol, removeSelectCell} from "./select"; import {bindSelectEvent, getSelectHTML, addColOptionOrCell, setColOption, removeCellOption} from "./select";
import {addFilter, getFiltersHTML, setFilter} from "./filter"; import {addFilter, getFiltersHTML, setFilter} from "./filter";
import {addSort, bindSortsEvent, getSortsHTML} from "./sort"; import {addSort, bindSortsEvent, getSortsHTML} from "./sort";
export const openMenuPanel = (protyle: IProtyle, export const openMenuPanel = (options: {
protyle: IProtyle,
blockElement: HTMLElement, blockElement: HTMLElement,
type: "select" | "properties" | "config" | "sorts" | "filters" | "edit" = "config", type: "select" | "properties" | "config" | "sorts" | "filters" | "edit",
options?: any) => { colId?: string, // for edit
cellElements?: HTMLElement[] // for select
}) => {
let avPanelElement = document.querySelector(".av__panel"); let avPanelElement = document.querySelector(".av__panel");
if (avPanelElement) { if (avPanelElement) {
avPanelElement.remove(); avPanelElement.remove();
return; return;
} }
window.siyuan.menus.menu.remove(); window.siyuan.menus.menu.remove();
const avId = blockElement.getAttribute("data-av-id"); const avId = options.blockElement.getAttribute("data-av-id");
fetchPost("/api/av/renderAttributeView", {id: avId}, (response) => { fetchPost("/api/av/renderAttributeView", {id: avId}, (response) => {
const data = response.data as IAV; const data = response.data as IAV;
let html; let html;
if (type === "config") { if (options.type === "config") {
html = getConfigHTML(data.view); html = getConfigHTML(data.view);
} else if (type === "properties") { } else if (options.type === "properties") {
html = getPropertiesHTML(data.view); html = getPropertiesHTML(data.view);
} else if (type === "sorts") { } else if (options.type === "sorts") {
html = getSortsHTML(data.view.columns, data.view.sorts); html = getSortsHTML(data.view.columns, data.view.sorts);
} else if (type === "filters") { } else if (options.type === "filters") {
html = getFiltersHTML(data.view); html = getFiltersHTML(data.view);
} else if (type === "select") { } else if (options.type === "select") {
html = getSelectHTML(data.view, options); html = getSelectHTML(data.view, options.cellElements);
} else if (type === "edit") { } else if (options.type === "edit") {
html = getEditHTML({protyle, data, blockElement, cellElement: options.cellElement}); html = getEditHTML({protyle: options.protyle, data, colId: options.colId});
} }
document.body.insertAdjacentHTML("beforeend", `<div class="av__panel"> document.body.insertAdjacentHTML("beforeend", `<div class="av__panel">
@ -42,17 +45,17 @@ export const openMenuPanel = (protyle: IProtyle,
</div>`); </div>`);
avPanelElement = document.querySelector(".av__panel"); avPanelElement = document.querySelector(".av__panel");
const menuElement = avPanelElement.lastElementChild as HTMLElement; const menuElement = avPanelElement.lastElementChild as HTMLElement;
const tabRect = blockElement.querySelector(".layout-tab-bar").getBoundingClientRect(); const tabRect = options.blockElement.querySelector(".layout-tab-bar").getBoundingClientRect();
if (type === "select") { if (options.type === "select") {
const cellRect = options.cellElements[options.cellElements.length - 1].getBoundingClientRect(); const cellRect = options.cellElements[options.cellElements.length - 1].getBoundingClientRect();
setPosition(menuElement, cellRect.left, cellRect.bottom, cellRect.height); setPosition(menuElement, cellRect.left, cellRect.bottom, cellRect.height);
bindSelectEvent(protyle, data, menuElement, options); bindSelectEvent(options.protyle, data, menuElement, options.cellElements);
menuElement.querySelector("input").select(); menuElement.querySelector("input").select();
menuElement.querySelector("input").focus(); menuElement.querySelector("input").focus();
} else { } else {
setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height); setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height);
if (type === "sorts") { if (options.type === "sorts") {
bindSortsEvent(protyle, menuElement, data); bindSortsEvent(options.protyle, menuElement, data);
} }
} }
avPanelElement.addEventListener("dragstart", (event) => { avPanelElement.addEventListener("dragstart", (event) => {
@ -64,7 +67,7 @@ export const openMenuPanel = (protyle: IProtyle,
window.siyuan.dragElement.style.opacity = ""; window.siyuan.dragElement.style.opacity = "";
const sourceElement = window.siyuan.dragElement; const sourceElement = window.siyuan.dragElement;
window.siyuan.dragElement = undefined; window.siyuan.dragElement = undefined;
if (protyle.disabled) { if (options.protyle.disabled) {
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
return; return;
@ -81,8 +84,8 @@ export const openMenuPanel = (protyle: IProtyle,
type = "sorts"; type = "sorts";
} else if (targetElement.querySelector('[data-type="removeFilter"]')) { } else if (targetElement.querySelector('[data-type="removeFilter"]')) {
type = "filters"; type = "filters";
} else if (targetElement.querySelector('[data-type="setSelectCol"]')) { } else if (targetElement.querySelector('[data-type="setColOption"]')) {
const colId = options.cellElements[0].dataset.colId; const colId = options.cellElements ? options.cellElements[0].dataset.colId : menuElement.firstElementChild.getAttribute("data-col-id");
const changeData = data.view.columns.find((column) => column.id === colId).options; const changeData = data.view.columns.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 };
@ -102,7 +105,7 @@ export const openMenuPanel = (protyle: IProtyle,
return true; return true;
} }
}); });
transaction(protyle, [{ transaction(options.protyle, [{
action: "updateAttrViewColOptions", action: "updateAttrViewColOptions",
id: colId, id: colId,
avID: data.id, avID: data.id,
@ -113,8 +116,16 @@ export const openMenuPanel = (protyle: IProtyle,
avID: data.id, avID: data.id,
data: oldData, data: oldData,
}]); }]);
menuElement.innerHTML = getSelectHTML(data.view, options); if (options.cellElements) {
bindSelectEvent(protyle, data, menuElement, options); menuElement.innerHTML = getSelectHTML(data.view, options.cellElements);
bindSelectEvent(options.protyle, data, menuElement, options.cellElements);
} else {
menuElement.innerHTML = getEditHTML({
protyle: options.protyle,
data,
colId
});
}
return; return;
} }
const sourceId = sourceElement.dataset.id; const sourceId = sourceElement.dataset.id;
@ -140,7 +151,7 @@ export const openMenuPanel = (protyle: IProtyle,
} }
}); });
transaction(protyle, [{ transaction(options.protyle, [{
action: "setAttrViewSorts", action: "setAttrViewSorts",
avID: avId, avID: avId,
data: changeData data: changeData
@ -150,7 +161,7 @@ export const openMenuPanel = (protyle: IProtyle,
data: oldData data: oldData
}]); }]);
menuElement.innerHTML = getSortsHTML(data.view.columns, data.view.sorts); menuElement.innerHTML = getSortsHTML(data.view.columns, data.view.sorts);
bindSortsEvent(protyle, menuElement, data); bindSortsEvent(options.protyle, menuElement, data);
return; return;
} }
if (type === "filters") { if (type === "filters") {
@ -174,7 +185,7 @@ export const openMenuPanel = (protyle: IProtyle,
} }
}); });
transaction(protyle, [{ transaction(options.protyle, [{
action: "setAttrViewFilters", action: "setAttrViewFilters",
avID: avId, avID: avId,
data: changeData data: changeData
@ -186,7 +197,7 @@ export const openMenuPanel = (protyle: IProtyle,
menuElement.innerHTML = getFiltersHTML(data.view); menuElement.innerHTML = getFiltersHTML(data.view);
return; return;
} }
transaction(protyle, [{ transaction(options.protyle, [{
action: "sortAttrViewCol", action: "sortAttrViewCol",
avID: avId, 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")) || "",
@ -270,12 +281,12 @@ export const openMenuPanel = (protyle: IProtyle,
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(protyle, menuElement, data); bindSortsEvent(options.protyle, menuElement, data);
setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height); setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height);
event.stopPropagation(); event.stopPropagation();
break; break;
} else if (type === "removeSorts") { } else if (type === "removeSorts") {
transaction(protyle, [{ transaction(options.protyle, [{
action: "setAttrViewSorts", action: "setAttrViewSorts",
avID: avId, avID: avId,
data: [] data: []
@ -286,12 +297,19 @@ export const openMenuPanel = (protyle: IProtyle,
}]); }]);
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(protyle, menuElement, data); bindSortsEvent(options.protyle, menuElement, data);
setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height); setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height);
event.stopPropagation(); event.stopPropagation();
break; break;
} else if (type === "addSort") { } else if (type === "addSort") {
addSort({data, rect: target.getBoundingClientRect(), menuElement, tabRect, avId, protyle}); addSort({
data,
rect: target.getBoundingClientRect(),
menuElement,
tabRect,
avId,
protyle: options.protyle
});
event.stopPropagation(); event.stopPropagation();
break; break;
} else if (type === "removeSort") { } else if (type === "removeSort") {
@ -302,7 +320,7 @@ export const openMenuPanel = (protyle: IProtyle,
return true; return true;
} }
}); });
transaction(protyle, [{ transaction(options.protyle, [{
action: "setAttrViewSorts", action: "setAttrViewSorts",
avID: avId, avID: avId,
data: data.view.sorts data: data.view.sorts
@ -312,7 +330,7 @@ export const openMenuPanel = (protyle: IProtyle,
data: oldSorts data: oldSorts
}]); }]);
menuElement.innerHTML = getSortsHTML(data.view.columns, data.view.sorts); menuElement.innerHTML = getSortsHTML(data.view.columns, data.view.sorts);
bindSortsEvent(protyle, menuElement, data); bindSortsEvent(options.protyle, menuElement, data);
setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height); setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height);
event.stopPropagation(); event.stopPropagation();
break; break;
@ -322,7 +340,7 @@ export const openMenuPanel = (protyle: IProtyle,
event.stopPropagation(); event.stopPropagation();
break; break;
} else if (type === "removeFilters") { } else if (type === "removeFilters") {
transaction(protyle, [{ transaction(options.protyle, [{
action: "setAttrViewFilters", action: "setAttrViewFilters",
avID: avId, avID: avId,
data: [] data: []
@ -337,7 +355,14 @@ export const openMenuPanel = (protyle: IProtyle,
event.stopPropagation(); event.stopPropagation();
break; break;
} else if (type === "addFilter") { } else if (type === "addFilter") {
addFilter({data, rect: target.getBoundingClientRect(), menuElement, tabRect, avId, protyle}); addFilter({
data,
rect: target.getBoundingClientRect(),
menuElement,
tabRect,
avId,
protyle: options.protyle
});
event.stopPropagation(); event.stopPropagation();
break; break;
} else if (type === "removeFilter") { } else if (type === "removeFilter") {
@ -349,7 +374,7 @@ export const openMenuPanel = (protyle: IProtyle,
return true; return true;
} }
}); });
transaction(protyle, [{ transaction(options.protyle, [{
action: "setAttrViewFilters", action: "setAttrViewFilters",
avID: avId, avID: avId,
data: data.view.filters data: data.view.filters
@ -367,7 +392,7 @@ export const openMenuPanel = (protyle: IProtyle,
if (item.column === target.parentElement.parentElement.dataset.id) { if (item.column === target.parentElement.parentElement.dataset.id) {
setFilter({ setFilter({
filter: item, filter: item,
protyle, protyle: options.protyle,
data, data,
target target
}); });
@ -378,7 +403,7 @@ export const openMenuPanel = (protyle: IProtyle,
break; break;
} else if (type === "newCol") { } else if (type === "newCol") {
avPanelElement.remove(); avPanelElement.remove();
const addMenu = addCol(protyle, blockElement); const addMenu = addCol(options.protyle, options.blockElement);
addMenu.open({ addMenu.open({
x: tabRect.right, x: tabRect.right,
y: tabRect.bottom, y: tabRect.bottom,
@ -408,7 +433,7 @@ export const openMenuPanel = (protyle: IProtyle,
} }
}); });
if (doOperations.length > 0) { if (doOperations.length > 0) {
transaction(protyle, doOperations, undoOperations); transaction(options.protyle, doOperations, undoOperations);
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);
} }
@ -435,15 +460,23 @@ export const openMenuPanel = (protyle: IProtyle,
} }
}); });
if (doOperations.length > 0) { if (doOperations.length > 0) {
transaction(protyle, doOperations, undoOperations); transaction(options.protyle, doOperations, undoOperations);
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.stopPropagation(); event.stopPropagation();
break; break;
} else if (type === "editCol") {
menuElement.innerHTML = getEditHTML({
protyle: options.protyle,
data,
colId: target.parentElement.dataset.id
});
event.stopPropagation();
break;
} else if (type === "hideCol") { } else if (type === "hideCol") {
const colId = target.parentElement.getAttribute("data-id"); const colId = target.parentElement.getAttribute("data-id");
transaction(protyle, [{ transaction(options.protyle, [{
action: "setAttrViewColHidden", action: "setAttrViewColHidden",
id: colId, id: colId,
avID: avId, avID: avId,
@ -461,7 +494,7 @@ export const openMenuPanel = (protyle: IProtyle,
break; break;
} else if (type === "showCol") { } else if (type === "showCol") {
const colId = target.parentElement.getAttribute("data-id"); const colId = target.parentElement.getAttribute("data-id");
transaction(protyle, [{ transaction(options.protyle, [{
action: "setAttrViewColHidden", action: "setAttrViewColHidden",
id: colId, id: colId,
avID: avId, avID: avId,
@ -477,17 +510,17 @@ export const openMenuPanel = (protyle: IProtyle,
setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height); setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height);
event.stopPropagation(); event.stopPropagation();
break; break;
} else if (type === "setSelectCol") { } else if (type === "setColOption") {
setSelectCol(protyle, data, options, target); setColOption(options.protyle, data, target, options.cellElements);
event.stopPropagation(); event.stopPropagation();
break; break;
} else if (type === "addSelectColAndCell") { } else if (type === "addColOptionOrCell") {
addSelectColAndCell(protyle, data, options, target, menuElement); addColOptionOrCell(options.protyle, data, options.cellElements, target, menuElement);
window.siyuan.menus.menu.remove(); window.siyuan.menus.menu.remove();
event.stopPropagation(); event.stopPropagation();
break; break;
} else if (type === "removeSelectCell") { } else if (type === "removeCellOption") {
removeSelectCell(protyle, data, options, target.parentElement); removeCellOption(options.protyle, data, options.cellElements, target.parentElement);
event.stopPropagation(); event.stopPropagation();
break; break;
} }
@ -511,7 +544,7 @@ const getPropertiesHTML = (data: IAVTable) => {
</span> </span>
</div> </div>
<svg class="b3-menu__action" data-type="showCol"><use xlink:href="#iconEyeoff"></use></svg> <svg class="b3-menu__action" data-type="showCol"><use xlink:href="#iconEyeoff"></use></svg>
<svg class="b3-menu__action"><use xlink:href="#iconEdit"></use></svg> <svg class="b3-menu__action" data-type="editCol"><use xlink:href="#iconEdit"></use></svg>
</button>`; </button>`;
} else { } else {
showHTML += `<button class="b3-menu__item" draggable="true" data-id="${item.id}"> showHTML += `<button class="b3-menu__item" draggable="true" data-id="${item.id}">
@ -523,7 +556,7 @@ const getPropertiesHTML = (data: IAVTable) => {
</span> </span>
</div> </div>
<svg class="b3-menu__action${item.type === "block" ? " fn__none" : ""}" data-type="hideCol"><use xlink:href="#iconEye"></use></svg> <svg class="b3-menu__action${item.type === "block" ? " fn__none" : ""}" data-type="hideCol"><use xlink:href="#iconEye"></use></svg>
<svg class="b3-menu__action${item.type === "block" ? " fn__none" : ""}"><use xlink:href="#iconEdit"></use></svg> <svg class="b3-menu__action" data-type="editCol"><use xlink:href="#iconEdit"></use></svg>
</button>`; </button>`;
} }
}); });

99
app/src/protyle/render/av/select.ts
View file

@ -3,6 +3,7 @@ import {transaction} from "../../wysiwyg/transaction";
import {hasClosestByClassName} from "../../util/hasClosest"; import {hasClosestByClassName} from "../../util/hasClosest";
import {confirmDialog} from "../../../dialog/confirmDialog"; import {confirmDialog} from "../../../dialog/confirmDialog";
import {upDownHint} from "../../../util/upDownHint"; import {upDownHint} from "../../../util/upDownHint";
import {getEditHTML} from "./col";
const filterSelectHTML = (key: string, options: { name: string, color: string }[]) => { const filterSelectHTML = (key: string, options: { name: string, color: string }[]) => {
let html = ""; let html = "";
@ -12,14 +13,14 @@ const filterSelectHTML = (key: string, options: { name: string, color: string }[
if (!key || if (!key ||
(key.toLowerCase().indexOf(item.name.toLowerCase()) > -1 || (key.toLowerCase().indexOf(item.name.toLowerCase()) > -1 ||
item.name.toLowerCase().indexOf(key.toLowerCase()) > -1)) { item.name.toLowerCase().indexOf(key.toLowerCase()) > -1)) {
html += `<button data-type="addSelectColAndCell" class="b3-menu__item${html ? "" : " b3-menu__item--current"}" draggable="true" data-name="${item.name}" data-color="${item.color}"> html += `<button data-type="addColOptionOrCell" class="b3-menu__item${html ? "" : " b3-menu__item--current"}" draggable="true" data-name="${item.name}" data-color="${item.color}">
<svg class="b3-menu__icon"><use xlink:href="#iconDrag"></use></svg> <svg class="b3-menu__icon"><use xlink:href="#iconDrag"></use></svg>
<div class="fn__flex-1"> <div class="fn__flex-1">
<span class="b3-chip" style="background-color:var(--b3-font-background${item.color});color:var(--b3-font-color${item.color})"> <span class="b3-chip" style="background-color:var(--b3-font-background${item.color});color:var(--b3-font-color${item.color})">
<span class="fn__ellipsis">${item.name}</span> <span class="fn__ellipsis">${item.name}</span>
</span> </span>
</div> </div>
<svg class="b3-menu__action" data-type="setSelectCol"><use xlink:href="#iconEdit"></use></svg> <svg class="b3-menu__action" data-type="setColOption"><use xlink:href="#iconEdit"></use></svg>
</button>`; </button>`;
} }
if (key === item.name) { if (key === item.name) {
@ -29,7 +30,7 @@ const filterSelectHTML = (key: string, options: { name: string, color: string }[
} }
if (!hasMatch && key) { if (!hasMatch && key) {
const colorIndex = (options?.length || 0) % 13 + 1; const colorIndex = (options?.length || 0) % 13 + 1;
html = `<button data-type="addSelectColAndCell" class="b3-menu__item${html ? "" : " b3-menu__item--current"}" data-name="${key}" data-color="${colorIndex}"> html = `<button data-type="addColOptionOrCell" class="b3-menu__item${html ? "" : " b3-menu__item--current"}" data-name="${key}" data-color="${colorIndex}">
<svg class="b3-menu__icon"><use xlink:href="#iconAdd"></use></svg> <svg class="b3-menu__icon"><use xlink:href="#iconAdd"></use></svg>
<div class="fn__flex-1"> <div class="fn__flex-1">
<span class="b3-chip" style="background-color:var(--b3-font-background${colorIndex});color:var(--b3-font-color${colorIndex})"> <span class="b3-chip" style="background-color:var(--b3-font-background${colorIndex});color:var(--b3-font-color${colorIndex})">
@ -42,16 +43,14 @@ const filterSelectHTML = (key: string, options: { name: string, color: string }[
return html; return html;
}; };
export const removeSelectCell = (protyle: IProtyle, data: IAV, options: { export const removeCellOption = (protyle: IProtyle, data: IAV, cellElements: HTMLElement[], target: HTMLElement) => {
cellElements: HTMLElement[]
}, target: HTMLElement) => {
if (!target) { if (!target) {
return; return;
} }
const colId = options.cellElements[0].dataset.colId; const colId = cellElements[0].dataset.colId;
const doOperations: IOperation[] = []; const doOperations: IOperation[] = [];
const undoOperations: IOperation[] = []; const undoOperations: IOperation[] = [];
options.cellElements.forEach(item => { cellElements.forEach(item => {
const rowID = item.parentElement.dataset.id; const rowID = item.parentElement.dataset.id;
const cellId = item.dataset.id; const cellId = item.dataset.id;
let cellData: IAVCell; let cellData: IAVCell;
@ -97,16 +96,15 @@ export const removeSelectCell = (protyle: IProtyle, data: IAV, options: {
target.remove(); target.remove();
}; };
export const setSelectCol = (protyle: IProtyle, data: IAV, options: { export const setColOption = (protyle: IProtyle, data: IAV, target: HTMLElement, cellElements?: HTMLElement[]) => {
cellElements: HTMLElement[];
}, target: HTMLElement,) => {
const menuElement = hasClosestByClassName(target, "b3-menu"); const menuElement = hasClosestByClassName(target, "b3-menu");
if (!menuElement) { if (!menuElement) {
return; return;
} }
const colId = cellElements ? cellElements[0].dataset.colId : menuElement.firstElementChild.getAttribute("data-col-id");
let name = target.parentElement.dataset.name; let name = target.parentElement.dataset.name;
let color = target.parentElement.dataset.color; let color = target.parentElement.dataset.color;
const menu = new Menu("av-select-option", () => { const menu = new Menu("av-col-option", () => {
if (name === inputElement.value) { if (name === inputElement.value) {
return; return;
} }
@ -140,10 +138,14 @@ export const setSelectCol = (protyle: IProtyle, data: IAV, options: {
return true; return true;
} }
}); });
if (!cellElements) {
menuElement.innerHTML = getEditHTML({protyle, data, colId});
} else {
cellElements.forEach((cellElement: HTMLMediaElement) => {
data.view.rows.find(row => { data.view.rows.find(row => {
if (row.id === options.cellElements[0].parentElement.dataset.id) { if (row.id === cellElement.parentElement.dataset.id) {
row.cells.find(cell => { row.cells.find(cell => {
if (cell.id === options.cellElements[0].dataset.id) { if (cell.id === cellElement.dataset.id) {
cell.value.mSelect.find((item) => { cell.value.mSelect.find((item) => {
if (item.content === name) { if (item.content === name) {
item.content = inputElement.value; item.content = inputElement.value;
@ -156,13 +158,14 @@ export const setSelectCol = (protyle: IProtyle, data: IAV, options: {
return true; return true;
} }
}); });
menuElement.innerHTML = getSelectHTML(data.view, options); })
bindSelectEvent(protyle, data, menuElement, options); menuElement.innerHTML = getSelectHTML(data.view, cellElements);
bindSelectEvent(protyle, data, menuElement, cellElements);
}
}); });
if (menu.isOpen) { if (menu.isOpen) {
return; return;
} }
const colId = options.cellElements[0].dataset.colId;
menu.addItem({ menu.addItem({
iconHTML: "", iconHTML: "",
label: `<input class="b3-text-field" style="margin: 4px 0" value="${name}">` label: `<input class="b3-text-field" style="margin: 4px 0" value="${name}">`
@ -197,10 +200,14 @@ export const setSelectCol = (protyle: IProtyle, data: IAV, options: {
return true; return true;
} }
}); });
if (!cellElements) {
menuElement.innerHTML = getEditHTML({protyle, data, colId});
} else {
cellElements.forEach((cellElement: HTMLElement) => {
data.view.rows.find(row => { data.view.rows.find(row => {
if (row.id === options.cellElements[0].parentElement.dataset.id) { if (row.id === cellElement.parentElement.dataset.id) {
row.cells.find(cell => { row.cells.find(cell => {
if (cell.id === options.cellElements[0].dataset.id) { if (cell.id === cellElement.dataset.id) {
cell.value.mSelect.find((item, index) => { cell.value.mSelect.find((item, index) => {
if (item.content === newName) { if (item.content === newName) {
cell.value.mSelect.splice(index, 1); cell.value.mSelect.splice(index, 1);
@ -213,8 +220,10 @@ export const setSelectCol = (protyle: IProtyle, data: IAV, options: {
return true; return true;
} }
}); });
menuElement.innerHTML = getSelectHTML(data.view, options); })
bindSelectEvent(protyle, data, menuElement, options); menuElement.innerHTML = getSelectHTML(data.view, cellElements);
bindSelectEvent(protyle, data, menuElement, cellElements);
}
}); });
} }
}); });
@ -264,10 +273,14 @@ export const setSelectCol = (protyle: IProtyle, data: IAV, options: {
return true; return true;
} }
}); });
if (!cellElements) {
menuElement.innerHTML = getEditHTML({protyle, data, colId});
} else {
cellElements.forEach((cellElement: HTMLElement) => {
data.view.rows.find(row => { data.view.rows.find(row => {
if (row.id === options.cellElements[0].parentElement.dataset.id) { if (row.id === cellElement.parentElement.dataset.id) {
row.cells.find(cell => { row.cells.find(cell => {
if (cell.id === options.cellElements[0].dataset.id) { if (cell.id === cellElement.dataset.id) {
cell.value.mSelect.find((item) => { cell.value.mSelect.find((item) => {
if (item.content === name) { if (item.content === name) {
item.content = inputElement.value; item.content = inputElement.value;
@ -281,10 +294,12 @@ export const setSelectCol = (protyle: IProtyle, data: IAV, options: {
return true; return true;
} }
}); });
})
menuElement.innerHTML = getSelectHTML(data.view, cellElements);
bindSelectEvent(protyle, data, menuElement, cellElements);
}
name = inputElement.value; name = inputElement.value;
color = (index + 1).toString(); color = (index + 1).toString();
menuElement.innerHTML = getSelectHTML(data.view, options);
bindSelectEvent(protyle, data, menuElement, options);
return true; return true;
} }
}); });
@ -300,11 +315,9 @@ export const setSelectCol = (protyle: IProtyle, data: IAV, options: {
inputElement.select(); inputElement.select();
}; };
export const bindSelectEvent = (protyle: IProtyle, data: IAV, menuElement: HTMLElement, options: { export const bindSelectEvent = (protyle: IProtyle, data: IAV, menuElement: HTMLElement, cellElements: HTMLElement[]) => {
cellElements: HTMLElement[]
}) => {
const inputElement = menuElement.querySelector("input"); const inputElement = menuElement.querySelector("input");
const colId = options.cellElements[0].dataset.colId; const colId = cellElements[0].dataset.colId;
let colData: IAVColumn; let colData: IAVColumn;
data.view.columns.find((item: IAVColumn) => { data.view.columns.find((item: IAVColumn) => {
if (item.id === colId) { if (item.id === colId) {
@ -336,18 +349,16 @@ export const bindSelectEvent = (protyle: IProtyle, data: IAV, menuElement: HTMLE
if (!currentElement) { if (!currentElement) {
currentElement = menuElement.querySelector(".b3-menu__item--current"); currentElement = menuElement.querySelector(".b3-menu__item--current");
} }
addSelectColAndCell(protyle, data, options, currentElement, menuElement); addColOptionOrCell(protyle, data, cellElements, currentElement, menuElement);
} else if (event.key === "Backspace" && inputElement.value === "") { } else if (event.key === "Backspace" && inputElement.value === "") {
removeSelectCell(protyle, data, options, inputElement.previousElementSibling as HTMLElement); removeCellOption(protyle, data, cellElements, inputElement.previousElementSibling as HTMLElement);
} else if (event.key === "Escape") { } else if (event.key === "Escape") {
menuElement.parentElement.remove(); menuElement.parentElement.remove();
} }
}); });
}; };
export const addSelectColAndCell = (protyle: IProtyle, data: IAV, options: { export const addColOptionOrCell = (protyle: IProtyle, data: IAV, cellElements: HTMLElement[], currentElement: HTMLElement, menuElement: HTMLElement) => {
cellElements: HTMLElement[]
}, currentElement: HTMLElement, menuElement: HTMLElement) => {
let hasSelected = false; let hasSelected = false;
Array.from(menuElement.querySelectorAll(".b3-chips .b3-chip")).find((item: HTMLElement) => { Array.from(menuElement.querySelectorAll(".b3-chips .b3-chip")).find((item: HTMLElement) => {
if (item.dataset.content === currentElement.dataset.name) { if (item.dataset.content === currentElement.dataset.name) {
@ -360,10 +371,10 @@ export const addSelectColAndCell = (protyle: IProtyle, data: IAV, options: {
return; return;
} }
const colId = options.cellElements[0].dataset.colId; const colId = cellElements[0].dataset.colId;
let cellIndex = 0; let cellIndex = 0;
Array.from(options.cellElements[0].parentElement.querySelectorAll(".av__cell")).find((item: HTMLElement, index) => { Array.from(cellElements[0].parentElement.querySelectorAll(".av__cell")).find((item: HTMLElement, index) => {
if (item.dataset.id === options.cellElements[0].dataset.id) { if (item.dataset.id === cellElements[0].dataset.id) {
cellIndex = index; cellIndex = index;
return true; return true;
} }
@ -381,7 +392,7 @@ export const addSelectColAndCell = (protyle: IProtyle, data: IAV, options: {
const cellDoOperations: IOperation[] = []; const cellDoOperations: IOperation[] = [];
const cellUndoOperations: IOperation[] = []; const cellUndoOperations: IOperation[] = [];
options.cellElements.forEach(item => { cellElements.forEach(item => {
let cellData: IAVCell; let cellData: IAVCell;
const rowID = item.parentElement.dataset.id; const rowID = item.parentElement.dataset.id;
data.view.rows.find(row => { data.view.rows.find(row => {
@ -460,14 +471,14 @@ export const addSelectColAndCell = (protyle: IProtyle, data: IAV, options: {
if (colData.type === "select") { if (colData.type === "select") {
menuElement.parentElement.remove(); menuElement.parentElement.remove();
} else { } else {
menuElement.innerHTML = getSelectHTML(data.view, options); menuElement.innerHTML = getSelectHTML(data.view, cellElements);
bindSelectEvent(protyle, data, menuElement, options); bindSelectEvent(protyle, data, menuElement, cellElements);
menuElement.querySelector("input").focus(); menuElement.querySelector("input").focus();
} }
}; };
export const getSelectHTML = (data: IAVTable, options: { cellElements: HTMLElement[] }) => { export const getSelectHTML = (data: IAVTable, cellElements: HTMLElement[]) => {
const colId = options.cellElements[0].dataset["colId"]; const colId = cellElements[0].dataset["colId"];
const colData = data.columns.find(item => { const colData = data.columns.find(item => {
if (item.id === colId) { if (item.id === colId) {
return item; return item;
@ -476,7 +487,7 @@ export const getSelectHTML = (data: IAVTable, options: { cellElements: HTMLEleme
const commonOptions: { content: string, color: string }[][] = []; const commonOptions: { content: string, color: string }[][] = [];
const allUniqueOptions: { content: string, color: string }[] = []; const allUniqueOptions: { content: string, color: string }[] = [];
options.cellElements.forEach((cellElement) => { cellElements.forEach((cellElement) => {
data.rows.find(row => { data.rows.find(row => {
if (cellElement.parentElement.dataset.id === row.id) { if (cellElement.parentElement.dataset.id === row.id) {
const commonOption: { content: string, color: string }[] = []; const commonOption: { content: string, color: string }[] = [];
@ -514,7 +525,7 @@ export const getSelectHTML = (data: IAVTable, options: { cellElements: HTMLEleme
} }
}); });
if (everyRowHas && selectedHTML.indexOf(`data-content="${unique.content}"`) === -1) { if (everyRowHas && selectedHTML.indexOf(`data-content="${unique.content}"`) === -1) {
selectedHTML += `<div class="b3-chip b3-chip--middle" data-content="${unique.content}" style="background-color:var(--b3-font-background${unique.color});color:var(--b3-font-color${unique.color})">${unique.content}<svg class="b3-chip__close" data-type="removeSelectCell"><use xlink:href="#iconCloseRound"></use></svg></div>`; selectedHTML += `<div class="b3-chip b3-chip--middle" data-content="${unique.content}" style="background-color:var(--b3-font-background${unique.color});color:var(--b3-font-color${unique.color})">${unique.content}<svg class="b3-chip__close" data-type="removeCellOption"><use xlink:href="#iconCloseRound"></use></svg></div>`;
} }
}); });