Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2026-01-08 01:38:50 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

🎨 https://github.com/siyuan-note/siyuan/issues/9791

Browse source
This commit is contained in:
Vanessa 2023-12-21 00:33:48 +08:00
parent 9bcbedafe2
commit 27a10a669d
3 changed files with 56 additions and 81 deletions
Download patch file Download diff file Expand all files Collapse all files

13
app/src/protyle/gutter/index.ts
View file

@ -64,8 +64,9 @@ export class Gutter {
const buttonElement = event.target.parentElement;
let selectIds: string[] = []
let selectElements: Element[] = []
let avElement: Element;
if (buttonElement.dataset.rowId) {
const avElement = Array.from(protyle.wysiwyg.element.querySelectorAll(`.av[data-node-id="${buttonElement.dataset.nodeId}"]`)).find((item: HTMLElement) => {
avElement = Array.from(protyle.wysiwyg.element.querySelectorAll(`.av[data-node-id="${buttonElement.dataset.nodeId}"]`)).find((item: HTMLElement) => {
if (!hasClosestByAttribute(item, "data-type", "NodeBlockQueryEmbed")) {
return true;
}
@ -108,7 +109,7 @@ export class Gutter {
});
buttonElement.style.opacity = "0.1";
window.siyuan.dragElement = protyle.wysiwyg.element;
window.siyuan.dragElement = avElement as HTMLElement || protyle.wysiwyg.element;
event.dataTransfer.setData(`${Constants.SIYUAN_DROP_GUTTER}${buttonElement.getAttribute("data-type")}${Constants.ZWSP}${buttonElement.getAttribute("data-subtype")}${Constants.ZWSP}${selectIds}`,
protyle.wysiwyg.element.innerHTML);
});
@ -1922,8 +1923,10 @@ export class Gutter {
const rowElement = hasClosestByClassName(target, "av__row");
if (rowElement && !rowElement.classList.contains("av__row--header")) {
element = rowElement;
html = `<button data-type="NodeAttributeViewRow" data-node-id="${dataNodeId}" data-row-id="${rowElement.dataset.id}" class="ariaLabel" data-position="right" aria-label="${isMac() ? window.siyuan.languages.addBelowAbove : window.siyuan.languages.addBelowAbove.replace("⌥", "Alt+")}"><svg><use xlink:href="#iconAdd"></use></svg></button>
<button data-type="NodeAttributeViewRowMenu" data-node-id="${dataNodeId}" data-row-id="${rowElement.dataset.id}" class="ariaLabel" data-position="right" aria-label="${window.siyuan.languages.rowTip}"><svg><use xlink:href="#iconDrag"></use></svg><span ${protyle.disabled ? "" : 'draggable="true"'}></span></button>`
html = `<button data-type="NodeAttributeViewRowMenu" data-node-id="${dataNodeId}" data-row-id="${rowElement.dataset.id}" class="ariaLabel" data-position="right" aria-label="${window.siyuan.languages.rowTip}"><svg><use xlink:href="#iconDrag"></use></svg><span ${protyle.disabled ? "" : 'draggable="true"'}></span></button>`
if (!protyle.disabled) {
html = `<button data-type="NodeAttributeViewRow" data-node-id="${dataNodeId}" data-row-id="${rowElement.dataset.id}" class="ariaLabel" data-position="right" aria-label="${isMac() ? window.siyuan.languages.addBelowAbove : window.siyuan.languages.addBelowAbove.replace("⌥", "Alt+")}"><svg><use xlink:href="#iconAdd"></use></svg></button>${html}`
}
break;
}
}
@ -2001,7 +2004,7 @@ data-type="fold"><svg style="width:10px${fold && fold === "1" ? "" : ";transform
return true
}
const rowId = item.getAttribute("data-row-id");
if (rowId && html.indexOf(rowId) === -1) {
if ((rowId && html.indexOf(rowId) === -1) || (!rowId && html.indexOf("NodeAttributeViewRowMenu") > -1)) {
match = false;
return true;
}

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

@ -276,15 +276,19 @@ export const avContextmenu = (protyle: IProtyle, rowElement: HTMLElement, positi
rowElement.querySelector(".av__firstcol use").setAttribute("xlink:href", "#iconCheck");
const rowElements = blockElement.querySelectorAll(".av__row--select:not(.av__row--header)");
updateHeader(rowElement);
menu.addItem({
icon: "iconTrashcan",
label: window.siyuan.languages.delete,
click() {
deleteRow(blockElement, protyle);
}
});
if (!protyle.disabled) {
menu.addItem({
icon: "iconTrashcan",
label: window.siyuan.languages.delete,
click() {
deleteRow(blockElement, protyle);
}
});
}
if (rowElements.length === 1 && !rowElements[0].querySelector('[data-detached="true"]')) {
menu.addSeparator();
if (!protyle.disabled) {
menu.addSeparator();
}
openEditorTab(protyle.app, rowElements[0].getAttribute("data-id"));
menu.addItem({
label: window.siyuan.languages.copy,
@ -293,37 +297,39 @@ export const avContextmenu = (protyle: IProtyle, rowElement: HTMLElement, positi
submenu: copySubMenu(rowElements[0].getAttribute("data-id"))
});
}
menu.addSeparator();
const editAttrSubmenu: IMenu[] = [];
rowElement.parentElement.querySelectorAll(".av__row--header .av__cell").forEach((cellElement: HTMLElement) => {
let hideBlock = false;
const selectElements: HTMLElement[] = Array.from(blockElement.querySelectorAll(`.av__row--select:not(.av__row--header) .av__cell[data-col-id="${cellElement.dataset.colId}"]`));
if (cellElement.dataset.dtype === "block") {
selectElements.find(item => {
if (!item.dataset.detached) {
hideBlock = true;
return true;
}
});
}
const type = cellElement.getAttribute("data-dtype") as TAVCol;
if (!hideBlock && !["updated", "created"].includes(type)) {
const icon = cellElement.dataset.icon;
editAttrSubmenu.push({
iconHTML: icon ? unicode2Emoji(icon, "b3-menu__icon", true) : `<svg class="b3-menu__icon"><use xlink:href="#${getColIconByType(type)}"></use></svg>`,
label: cellElement.querySelector(".av__celltext").textContent.trim(),
click() {
popTextCell(protyle, selectElements);
}
});
}
});
menu.addItem({
icon: "iconAttr",
label: window.siyuan.languages.attr,
type: "submenu",
submenu: editAttrSubmenu
});
if (!protyle.disabled) {
menu.addSeparator();
const editAttrSubmenu: IMenu[] = [];
rowElement.parentElement.querySelectorAll(".av__row--header .av__cell").forEach((cellElement: HTMLElement) => {
let hideBlock = false;
const selectElements: HTMLElement[] = Array.from(blockElement.querySelectorAll(`.av__row--select:not(.av__row--header) .av__cell[data-col-id="${cellElement.dataset.colId}"]`));
if (cellElement.dataset.dtype === "block") {
selectElements.find(item => {
if (!item.dataset.detached) {
hideBlock = true;
return true;
}
});
}
const type = cellElement.getAttribute("data-dtype") as TAVCol;
if (!hideBlock && !["updated", "created"].includes(type)) {
const icon = cellElement.dataset.icon;
editAttrSubmenu.push({
iconHTML: icon ? unicode2Emoji(icon, "b3-menu__icon", true) : `<svg class="b3-menu__icon"><use xlink:href="#${getColIconByType(type)}"></use></svg>`,
label: cellElement.querySelector(".av__celltext").textContent.trim(),
click() {
popTextCell(protyle, selectElements);
}
});
}
});
menu.addItem({
icon: "iconAttr",
label: window.siyuan.languages.attr,
type: "submenu",
submenu: editAttrSubmenu
});
}
if (protyle?.app?.plugins) {
emitOpenMenu({
plugins: protyle.app.plugins,

40
app/src/protyle/util/editorCommonEvent.ts
View file

@ -726,40 +726,6 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => {
event.dataTransfer.setData(`${Constants.SIYUAN_DROP_GUTTER}NodeAttributeView${Constants.ZWSP}Col${Constants.ZWSP}${[target.parentElement.getAttribute("data-col-id")]}`,
target.innerHTML);
return;
} else if (target.classList.contains("ariaLabel")) {
const blockElement = hasClosestBlock(target);
if (!blockElement) {
return;
}
const rowElement = target.parentElement.parentElement;
const selectIds = [];
const rowElements = [];
if (rowElement.classList.contains("av__row--select")) {
rowElement.parentElement.querySelectorAll(".av__row--select:not(.av__row--header)").forEach((item) => {
selectIds.push(item.getAttribute("data-id"));
rowElements.push(item);
});
} else {
selectIds.push(rowElement.getAttribute("data-id"));
rowElements.push(rowElement);
}
const ghostElement = document.createElement("div");
ghostElement.className = protyle.wysiwyg.element.className;
rowElements.forEach(item => {
ghostElement.append(item.cloneNode(true));
});
ghostElement.setAttribute("style", `position:fixed;opacity:.1;width:${rowElements[0].clientWidth}px;padding:0;`);
document.body.append(ghostElement);
event.dataTransfer.setDragImage(ghostElement, 0, 0);
setTimeout(() => {
ghostElement.remove();
});
window.siyuan.dragElement = rowElement;
event.dataTransfer.setData(`${Constants.SIYUAN_DROP_GUTTER}NodeAttributeView${Constants.ZWSP}Row${Constants.ZWSP}${selectIds}`,
rowElement.innerHTML);
return;
}
}
// 选中编辑器中的文字进行拖拽
@ -899,7 +865,7 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => {
previousID = targetElement.previousElementSibling?.getAttribute("data-id") || "";
}
const avID = blockElement.getAttribute("data-av-id");
if (gutterTypes[0] === "nodeattributeview" && gutterTypes[1] === "row") {
if (gutterTypes[0] === "nodeattributeviewrowmenu") {
// 行内拖拽
const doOperations: IOperation[] = [];
const undoOperations: IOperation[] = [];
@ -1155,9 +1121,9 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => {
targetElement = false;
}
}
} else if (targetElement && gutterType && gutterType.startsWith(`${Constants.SIYUAN_DROP_GUTTER}NodeAttributeView${Constants.ZWSP}Row${Constants.ZWSP}`.toLowerCase())) {
} else if (targetElement && gutterType && gutterType.startsWith(`${Constants.SIYUAN_DROP_GUTTER}NodeAttributeViewRowMenu${Constants.ZWSP}`.toLowerCase())) {
// 行只能拖拽当前 av 中
if (!targetElement.classList.contains("av__row") || !targetElement.parentElement.isSameNode(window.siyuan.dragElement.parentElement)) {
if (!targetElement.classList.contains("av__row") || !window.siyuan.dragElement.contains(targetElement)) {
targetElement = false;
}
}