mirror of
https://github.com/siyuan-note/siyuan.git
synced 2025-12-18 23:50:13 +01:00
🚨
This commit is contained in:
parent
e5541921df
commit
8a4ab0daff
5 changed files with 47 additions and 47 deletions
|
|
@ -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,
|
||||||
|
|
|
||||||
|
|
@ -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)
|
item.lastElementChild.insertAdjacentHTML("beforebegin", html);
|
||||||
})
|
});
|
||||||
showHeaderCellMenu(protyle, blockElement, blockElement.querySelector(".av__row--header").lastElementChild.previousElementSibling as HTMLElement)
|
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);
|
||||||
}
|
};
|
||||||
|
|
|
||||||
|
|
@ -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();
|
||||||
})
|
});
|
||||||
}
|
};
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue