siyuan/app/src/protyle/render/av/action.ts

164 lines
5.2 KiB
TypeScript
Raw Normal View History

2023-06-12 12:42:22 +08:00
import {Menu} from "../../../plugin/Menu";
import {hasClosestBlock, hasClosestByAttribute, hasClosestByClassName} from "../../util/hasClosest";
import {transaction} from "../../wysiwyg/transaction";
import {openEditorTab} from "../../../menus/util";
import {copySubMenu} from "../../../menus/commonMenuItem";
import {popTextCell, showHeaderCellMenu} from "./cell";
import {getColIconByType} from "./col";
import {emitOpenMenu} from "../../../plugin/EventBus";
export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLElement }) => {
2023-06-08 22:56:52 +08:00
const blockElement = hasClosestBlock(event.target);
2023-06-10 17:56:45 +08:00
if (!blockElement) {
return false;
2023-06-10 17:56:45 +08:00
}
2023-06-08 22:56:52 +08:00
const addElement = hasClosestByAttribute(event.target, "data-type", "av-header-add");
2023-06-10 17:56:45 +08:00
if (addElement) {
2023-06-08 22:56:52 +08:00
const menu = new Menu("av-header-add");
menu.addItem({
icon: "iconAlignLeft",
label: window.siyuan.languages.text,
click() {
2023-06-08 22:56:52 +08:00
const id = Lute.NewNodeID();
const type = "text";
transaction(protyle, [{
action: "addAttrViewCol",
name: "Text",
parentID: blockElement.getAttribute("data-av-id"),
type,
id
}], [{
action: "removeAttrViewCol",
id,
parentID: blockElement.getAttribute("data-av-id"),
}]);
}
2023-06-08 22:56:52 +08:00
});
const addRect = addElement.getBoundingClientRect();
menu.open({
x: addRect.left,
y: addRect.bottom,
h: addRect.height
2023-06-08 22:56:52 +08:00
});
event.preventDefault();
event.stopPropagation();
2023-06-08 22:56:52 +08:00
return true;
}
2023-06-10 17:56:45 +08:00
const checkElement = hasClosestByClassName(event.target, "av__firstcol");
if (checkElement) {
// TODO
2023-06-10 17:56:45 +08:00
event.preventDefault();
event.stopPropagation();
return true;
}
2023-06-08 22:56:52 +08:00
const cellElement = hasClosestByClassName(event.target, "av__cell");
2023-06-10 17:56:45 +08:00
if (cellElement) {
if (cellElement.parentElement.classList.contains("av__row--header")) {
2023-06-10 17:45:04 +08:00
showHeaderCellMenu(protyle, blockElement, cellElement);
event.preventDefault();
event.stopPropagation();
} else {
2023-06-10 17:45:04 +08:00
popTextCell(protyle, cellElement);
}
2023-06-08 22:56:52 +08:00
return true;
}
2023-06-08 22:56:52 +08:00
return false;
};
export const avContextmenu = (protyle: IProtyle, event: MouseEvent & { detail: any }, target: HTMLElement) => {
const rowElement = hasClosestByClassName(target, "av__row");
if (!rowElement) {
return false;
}
const blockElement = hasClosestBlock(rowElement);
if (!blockElement) {
return false;
}
2023-06-10 17:56:45 +08:00
event.preventDefault();
event.stopPropagation();
blockElement.querySelectorAll(".av__row--select").forEach(item => {
item.classList.remove("av__row--select");
});
const rowId = rowElement.getAttribute("data-id");
const menu = new Menu("av-row");
2023-06-10 17:56:45 +08:00
if (menu.isOpen) {
return true;
2023-06-10 17:56:45 +08:00
}
rowElement.classList.add("av__row--select");
menu.addItem({
icon: "iconCopy",
label: window.siyuan.languages.duplicate,
click() {
}
});
menu.addItem({
icon: "iconTrashcan",
label: window.siyuan.languages.delete,
click() {
transaction(protyle, [{
action: "removeAttrViewBlock",
id: blockElement.getAttribute("data-node-id"),
parentID: blockElement.getAttribute("data-av-id"),
}], [{
action: "insertAttrViewBlock",
id: blockElement.getAttribute("data-node-id"),
parentID: blockElement.getAttribute("data-av-id"),
previousID: rowElement.previousElementSibling?.getAttribute("data-id") || "",
srcIDs: [rowId],
}]);
rowElement.remove();
}
});
menu.addSeparator();
openEditorTab(protyle.app, rowId);
menu.addItem({
label: window.siyuan.languages.copy,
icon: "iconCopy",
type: "submenu",
submenu: copySubMenu(rowId)
});
menu.addSeparator();
menu.addItem({
icon: "iconEdit",
label: window.siyuan.languages.edit,
click() {
}
2023-06-10 17:45:04 +08:00
});
const editAttrSubmenu: IMenu[] = [];
rowElement.parentElement.querySelectorAll(".av__row--header .av__cell").forEach((cellElement) => {
editAttrSubmenu.push({
icon: getColIconByType(cellElement.getAttribute("data-dtype") as TAVCol),
label: cellElement.textContent.trim(),
click() {
}
2023-06-10 17:45:04 +08:00
});
});
menu.addItem({
icon: "iconList",
label: window.siyuan.languages.attr,
type: "submenu",
submenu: editAttrSubmenu
2023-06-10 17:45:04 +08:00
});
if (protyle?.app?.plugins) {
emitOpenMenu({
plugins: protyle.app.plugins,
type: "open-menu-av",
detail: {
protyle,
element: hasClosestByClassName(target, "av__cell"),
},
separatorPosition: "top",
});
}
menu.open({
x: event.clientX,
y: event.clientY,
});
return true;
2023-06-10 17:45:04 +08:00
};