This commit is contained in:
Vanessa 2023-06-10 17:45:04 +08:00
parent e5541921df
commit 8a4ab0daff
5 changed files with 47 additions and 47 deletions

View file

@ -472,7 +472,7 @@ export const initFileMenu = (app: App, notebookId: string, pathString: string, l
}).element); }).element);
window.siyuan.menus.menu.append(new MenuItem({type: "separator"}).element); window.siyuan.menus.menu.append(new MenuItem({type: "separator"}).element);
} }
openEditorTab(app, id, notebookId, pathString) openEditorTab(app, id, notebookId, pathString);
if (!window.siyuan.config.readonly) { if (!window.siyuan.config.readonly) {
window.siyuan.menus.menu.append(new MenuItem({ window.siyuan.menus.menu.append(new MenuItem({
label: window.siyuan.languages.fileHistory, label: window.siyuan.languages.fileHistory,

View file

@ -7,7 +7,7 @@ import {copySubMenu} from "../../../menus/commonMenuItem";
import {popTextCell} from "./cell"; import {popTextCell} from "./cell";
const showHeaderCellMenu = (protyle: IProtyle, blockElement: HTMLElement, cellElement: HTMLElement) => { const showHeaderCellMenu = (protyle: IProtyle, blockElement: HTMLElement, cellElement: HTMLElement) => {
const type = cellElement.getAttribute("data-dtype") as TAVCol const type = cellElement.getAttribute("data-dtype") as TAVCol;
const menu = new Menu("av-header-cell"); const menu = new Menu("av-header-cell");
menu.addItem({ menu.addItem({
icon: getIconByType(type), icon: getIconByType(type),
@ -67,7 +67,7 @@ const showHeaderCellMenu = (protyle: IProtyle, blockElement: HTMLElement, cellEl
icon: "iconTrashcan", icon: "iconTrashcan",
label: window.siyuan.languages.delete, label: window.siyuan.languages.delete,
click() { click() {
const id = cellElement.getAttribute("data-id") const id = cellElement.getAttribute("data-id");
transaction(protyle, [{ transaction(protyle, [{
action: "removeAttrViewCol", action: "removeAttrViewCol",
id, id,
@ -79,7 +79,7 @@ const showHeaderCellMenu = (protyle: IProtyle, blockElement: HTMLElement, cellEl
type: type, type: type,
id id
}]); }]);
removeCol(cellElement) removeCol(cellElement);
} }
}); });
menu.addSeparator(); menu.addSeparator();
@ -123,7 +123,7 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
id, id,
parentID: blockElement.getAttribute("data-av-id"), parentID: blockElement.getAttribute("data-av-id"),
}]); }]);
addCol(protyle, blockElement, id, type) addCol(protyle, blockElement, id, type);
} }
}); });
const addRect = addElement.getBoundingClientRect(); const addRect = addElement.getBoundingClientRect();
@ -140,11 +140,11 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
const cellElement = hasClosestByClassName(event.target, "av__cell"); const cellElement = hasClosestByClassName(event.target, "av__cell");
if (cellElement && blockElement) { if (cellElement && blockElement) {
if (cellElement.parentElement.classList.contains("av__row--header")) { if (cellElement.parentElement.classList.contains("av__row--header")) {
showHeaderCellMenu(protyle, blockElement, cellElement) showHeaderCellMenu(protyle, blockElement, cellElement);
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
} else { } else {
popTextCell(protyle, cellElement) popTextCell(protyle, cellElement);
} }
return true; return true;
} }
@ -202,22 +202,22 @@ export const avContextmenu = (protyle: IProtyle, event: MouseEvent & { detail: a
click() { click() {
} }
}) });
const editAttrSubmenu: IMenu[] = [] const editAttrSubmenu: IMenu[] = [];
rowElement.parentElement.querySelectorAll(".av__row--header .av__cell").forEach((cellElement) => { rowElement.parentElement.querySelectorAll(".av__row--header .av__cell").forEach((cellElement) => {
editAttrSubmenu.push({ editAttrSubmenu.push({
icon: getIconByType(cellElement.getAttribute("data-dtype") as TAVCol), icon: getIconByType(cellElement.getAttribute("data-dtype") as TAVCol),
label: cellElement.textContent.trim(), label: cellElement.textContent.trim(),
click() { click() {
} }
}) });
}); });
menu.addItem({ menu.addItem({
icon: "iconList", icon: "iconList",
label: window.siyuan.languages.attr, label: window.siyuan.languages.attr,
type: "submenu", type: "submenu",
submenu: editAttrSubmenu submenu: editAttrSubmenu
}) });
menu.open({ menu.open({
x: event.clientX, x: event.clientX,
y: event.clientY, y: event.clientY,
@ -225,55 +225,55 @@ export const avContextmenu = (protyle: IProtyle, event: MouseEvent & { detail: a
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
return true; return true;
} };
const addCol = (protyle: IProtyle, blockElement: HTMLElement, id: string, type: TAVCol) => { const addCol = (protyle: IProtyle, blockElement: HTMLElement, id: string, type: TAVCol) => {
let index = "0" let index = "0";
blockElement.querySelectorAll(".av__row--header .av__cell").forEach((item) => { blockElement.querySelectorAll(".av__row--header .av__cell").forEach((item) => {
const dataIndex = item.getAttribute("data-index") const dataIndex = item.getAttribute("data-index");
if (dataIndex > index) { if (dataIndex > index) {
index = dataIndex index = dataIndex;
} }
}) });
blockElement.querySelectorAll(".av__row").forEach((item, index) => { blockElement.querySelectorAll(".av__row").forEach((item, index) => {
let html = '' let html = "";
if (index === 0) { if (index === 0) {
html = `<div class="av__cell" data-index="${index}" data-id="${id}" data-dtype="${type}" data-wrap="false" style="width: 200px;"> html = `<div class="av__cell" data-index="${index}" data-id="${id}" data-dtype="${type}" data-wrap="false" style="width: 200px;">
<svg><use xlink:href="#iconAlignLeft"></use></svg> <svg><use xlink:href="#iconAlignLeft"></use></svg>
<span>Text</span> <span>Text</span>
</div>` </div>`;
} else { } else {
html = `<div class="av__cell" data-index="${index}" style="width: 200px;"></div>` html = `<div class="av__cell" data-index="${index}" style="width: 200px;"></div>`;
}
item.lastElementChild.insertAdjacentHTML("beforebegin", html)
})
showHeaderCellMenu(protyle, blockElement, blockElement.querySelector(".av__row--header").lastElementChild.previousElementSibling as HTMLElement)
} }
item.lastElementChild.insertAdjacentHTML("beforebegin", html);
});
showHeaderCellMenu(protyle, blockElement, blockElement.querySelector(".av__row--header").lastElementChild.previousElementSibling as HTMLElement);
};
const removeCol = (cellElement: HTMLElement) => { const removeCol = (cellElement: HTMLElement) => {
const index = cellElement.getAttribute("data-index") const index = cellElement.getAttribute("data-index");
const blockElement = hasClosestBlock(cellElement); const blockElement = hasClosestBlock(cellElement);
if (!blockElement) { if (!blockElement) {
return false; return false;
} }
blockElement.querySelectorAll(".av__row").forEach((item) => { blockElement.querySelectorAll(".av__row").forEach((item) => {
item.querySelector(`[data-index="${index}"]`).remove; item.querySelector(`[data-index="${index}"]`).remove;
}) });
} };
export const addAVRow = (blockElement: HTMLElement, ids: string[], previousID: string) => { export const addAVRow = (blockElement: HTMLElement, ids: string[], previousID: string) => {
const rowElement = previousID ? blockElement.querySelector(`[data-id=${previousID}]`) : blockElement.querySelector(".av__row--header") const rowElement = previousID ? blockElement.querySelector(`[data-id=${previousID}]`) : blockElement.querySelector(".av__row--header");
let html = '' let html = "";
ids.forEach((id) => { ids.forEach((id) => {
html += `<div class="av__row"><div class="av__firstcol"><svg><use xlink:href="#iconUncheck"></use></svg></div>`; html += "<div class=\"av__row\"><div class=\"av__firstcol\"><svg><use xlink:href=\"#iconUncheck\"></use></svg></div>";
Array.from(rowElement.children).forEach((item: HTMLElement, index) => { Array.from(rowElement.children).forEach((item: HTMLElement, index) => {
if (index === 0 || index === rowElement.childElementCount - 1) { if (index === 0 || index === rowElement.childElementCount - 1) {
return return;
} }
html += `<div class="av__cell" data-index="${index}" style="width: ${item.style.width};>${id}</div>`; html += `<div class="av__cell" data-index="${index}" style="width: ${item.style.width};>${id}</div>`;
}) });
html += "<div></div></div>"; html += "<div></div></div>";
}) });
rowElement.insertAdjacentHTML("afterend", html); rowElement.insertAdjacentHTML("afterend", html);
} };

View file

@ -3,8 +3,8 @@ import {hasClosestBlock} from "../../util/hasClosest";
export const popTextCell = (protyle: IProtyle, cellElement: HTMLElement) => { export const popTextCell = (protyle: IProtyle, cellElement: HTMLElement) => {
const type = cellElement.parentElement.parentElement.firstElementChild.children[parseInt(cellElement.getAttribute("data-index")) + 1].getAttribute("data-dtype") as TAVCol; const type = cellElement.parentElement.parentElement.firstElementChild.children[parseInt(cellElement.getAttribute("data-index")) + 1].getAttribute("data-dtype") as TAVCol;
const cellRect = cellElement.getBoundingClientRect() const cellRect = cellElement.getBoundingClientRect();
let html = "" let html = "";
if (type === "block") { if (type === "block") {
html = `<textarea style="position:absolute;left: ${cellRect.left}px;top: ${cellRect.top}px" class="b3-text-field fn__size200">${cellElement.textContent}</textarea>`; html = `<textarea style="position:absolute;left: ${cellRect.left}px;top: ${cellRect.top}px" class="b3-text-field fn__size200">${cellElement.textContent}</textarea>`;
} }
@ -16,33 +16,33 @@ export const popTextCell = (protyle: IProtyle, cellElement: HTMLElement) => {
if (inputElement) { if (inputElement) {
inputElement.select(); inputElement.select();
inputElement.addEventListener("blur", () => { inputElement.addEventListener("blur", () => {
updateCellValue(protyle, cellElement, type) updateCellValue(protyle, cellElement, type);
}) });
inputElement.addEventListener("keydown", (event) => { inputElement.addEventListener("keydown", (event) => {
if (event.isComposing) { if (event.isComposing) {
return return;
} }
if (event.key === "Escape" || event.key === "Enter") { if (event.key === "Escape" || event.key === "Enter") {
updateCellValue(protyle, cellElement, type) updateCellValue(protyle, cellElement, type);
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
} }
}) });
} }
avMaskElement.addEventListener("click", (event) => { avMaskElement.addEventListener("click", (event) => {
if ((event.target as HTMLElement).classList.contains("av__mask")) { if ((event.target as HTMLElement).classList.contains("av__mask")) {
avMaskElement?.remove(); avMaskElement?.remove();
} }
}) });
}; };
const updateCellValue = (protyle: IProtyle, cellElement: HTMLElement, type: TAVCol) => { const updateCellValue = (protyle: IProtyle, cellElement: HTMLElement, type: TAVCol) => {
const avMaskElement = document.querySelector(".av__mask"); const avMaskElement = document.querySelector(".av__mask");
const inputElement = avMaskElement.querySelector(".b3-text-field") as HTMLInputElement; const inputElement = avMaskElement.querySelector(".b3-text-field") as HTMLInputElement;
const blockElement = hasClosestBlock(cellElement) const blockElement = hasClosestBlock(cellElement);
if (!blockElement) { if (!blockElement) {
return return;
} }
transaction(protyle, [{ transaction(protyle, [{
action: "updateAttrViewCell", action: "updateAttrViewCell",
@ -60,5 +60,5 @@ const updateCellValue = (protyle: IProtyle, cellElement: HTMLElement, type: TAVC
cellElement.textContent = inputElement.value; cellElement.textContent = inputElement.value;
setTimeout(() => { setTimeout(() => {
avMaskElement.remove(); avMaskElement.remove();
}) });
} };

View file

@ -29,7 +29,7 @@ export const avRender = (element: Element) => {
const data = response.data.av; const data = response.data.av;
// header // header
let tableHTML = '<div class="av__row av__row--header"><div class="av__firstcol"><svg style="height: 42px"><use xlink:href="#iconUncheck"></use></svg></div>'; let tableHTML = '<div class="av__row av__row--header"><div class="av__firstcol"><svg style="height: 42px"><use xlink:href="#iconUncheck"></use></svg></div>';
let index = 0 let index = 0;
data.columns.forEach((column: IAVColumn) => { data.columns.forEach((column: IAVColumn) => {
if (column.hidden) { if (column.hidden) {
return; return;

View file

@ -814,7 +814,7 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => {
id: targetElement.getAttribute("data-node-id"), id: targetElement.getAttribute("data-node-id"),
parentID: targetElement.getAttribute("data-av-id"), parentID: targetElement.getAttribute("data-av-id"),
}]); }]);
addAVRow(blockElement, sourceIds, previousID) addAVRow(blockElement, sourceIds, previousID);
} }
return; return;
} }