Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2025-12-22 09:30:14 +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-20 23:30:08 +08:00
parent a208740195
commit 1b41f30bbd
4 changed files with 73 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -102,7 +102,8 @@
display: block; display: block;
} }
&--select { &--select,
&--hl {
&:not(.av__row--header) .av__cell, &:not(.av__row--header) .av__cell,
&:not(.av__row--header) .av__firstcol { &:not(.av__row--header) .av__firstcol {
background-color: var(--b3-av-background-hl); background-color: var(--b3-av-background-hl);
@ -324,6 +325,7 @@
@extend .av__checkbox; @extend .av__checkbox;
opacity: 0; opacity: 0;
padding: 9.5px 5px; padding: 9.5px 5px;
cursor: pointer;
} }
&:hover svg { &:hover svg {

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

@ -185,8 +185,13 @@ export class Gutter {
window.siyuan.menus.menu.remove(); window.siyuan.menus.menu.remove();
return; return;
} }
const gutterRect = buttonElement.getBoundingClientRect();
if (buttonElement.dataset.type === "NodeAttributeViewRowMenu" || buttonElement.dataset.type === "NodeAttributeViewRow") { if (buttonElement.dataset.type === "NodeAttributeViewRowMenu" || buttonElement.dataset.type === "NodeAttributeViewRow") {
const rowElement = protyle.wysiwyg.element.querySelector(`.av__row[data-id="${buttonElement.dataset.nodeId}"]`) as HTMLElement; const rowElement = Array.from(protyle.wysiwyg.element.querySelectorAll(`.av[data-node-id="${buttonElement.dataset.nodeId}"] .av__row[data-id="${buttonElement.dataset.rowId}"]`)).find((item: HTMLElement) => {
if (!hasClosestByAttribute(item, "data-type", "NodeBlockQueryEmbed")) {
return true;
}
});
if (!rowElement) { if (!rowElement) {
return; return;
} }
@ -194,11 +199,10 @@ export class Gutter {
if (!blockElement) { if (!blockElement) {
return; return;
} }
blockElement.querySelector(".av__cell--select")?.classList.remove("av__cell--select");
if (buttonElement.dataset.type === "NodeAttributeViewRow") { if (buttonElement.dataset.type === "NodeAttributeViewRow") {
const avID = blockElement.getAttribute("data-av-id"); const avID = blockElement.getAttribute("data-av-id");
const srcIDs = [Lute.NewNodeID()]; const srcIDs = [Lute.NewNodeID()];
const previousID = event.altKey ? (rowElement.previousElementSibling.getAttribute("data-id") || "") : buttonElement.dataset.nodeId; const previousID = event.altKey ? (rowElement.previousElementSibling.getAttribute("data-id") || "") : buttonElement.dataset.rowId;
transaction(protyle, [{ transaction(protyle, [{
action: "insertAttrViewBlock", action: "insertAttrViewBlock",
avID, avID,
@ -212,19 +216,19 @@ export class Gutter {
}]); }]);
insertAttrViewBlockAnimation(blockElement, srcIDs, previousID, avID); insertAttrViewBlockAnimation(blockElement, srcIDs, previousID, avID);
} else { } else {
const gutterRect = buttonElement.getBoundingClientRect(); avContextmenu(protyle, rowElement as HTMLElement, {
avContextmenu(protyle, rowElement, {
x: gutterRect.left, x: gutterRect.left,
y: gutterRect.bottom, y: gutterRect.bottom,
w: gutterRect.width, w: gutterRect.width,
h: gutterRect.height h: gutterRect.height,
isLeft: true
}); });
} }
return; return;
} }
if (isOnlyMeta(event)) { if (isOnlyMeta(event)) {
zoomOut({protyle, id}); zoomOut({protyle, id});
} else if (event.altKey) { } else if (event.altKey && !protyle.disabled) {
let foldElement: Element; let foldElement: Element;
Array.from(protyle.wysiwyg.element.querySelectorAll(`[data-node-id="${id}"]`)).find(item => { Array.from(protyle.wysiwyg.element.querySelectorAll(`[data-node-id="${id}"]`)).find(item => {
if (!hasClosestByAttribute(item.parentElement, "data-type", "NodeBlockQueryEmbed") && if (!hasClosestByAttribute(item.parentElement, "data-type", "NodeBlockQueryEmbed") &&
@ -276,7 +280,7 @@ export class Gutter {
foldElement.classList.remove("protyle-wysiwyg--hl"); foldElement.classList.remove("protyle-wysiwyg--hl");
} else if (window.siyuan.shiftIsPressed && !protyle.disabled) { } else if (window.siyuan.shiftIsPressed && !protyle.disabled) {
openAttr(protyle.wysiwyg.element.querySelector(`[data-node-id="${id}"]`), "bookmark", protyle); openAttr(protyle.wysiwyg.element.querySelector(`[data-node-id="${id}"]`), "bookmark", protyle);
} else { } else if (!window.siyuan.ctrlIsPressed && !window.siyuan.altIsPressed && !window.siyuan.shiftIsPressed) {
this.renderMenu(protyle, buttonElement); this.renderMenu(protyle, buttonElement);
// https://ld246.com/article/1648433751993 // https://ld246.com/article/1648433751993
if (!protyle.toolbar.range) { if (!protyle.toolbar.range) {
@ -285,7 +289,7 @@ export class Gutter {
if (isMobile()) { if (isMobile()) {
window.siyuan.menus.menu.fullscreen(); window.siyuan.menus.menu.fullscreen();
} else { } else {
window.siyuan.menus.menu.popup({x: event.clientX - 16, y: event.clientY - 16, isLeft: true}); window.siyuan.menus.menu.popup({x: gutterRect.left, y: gutterRect.bottom, isLeft: true});
window.siyuan.menus.menu.element.setAttribute("data-from", hasClosestByClassName(protyle.element, "block__edit") ? "popover" : "app"); window.siyuan.menus.menu.element.setAttribute("data-from", hasClosestByClassName(protyle.element, "block__edit") ? "popover" : "app");
focusByRange(protyle.toolbar.range); focusByRange(protyle.toolbar.range);
} }
@ -293,14 +297,32 @@ export class Gutter {
}); });
this.element.addEventListener("contextmenu", (event: MouseEvent & { target: HTMLInputElement }) => { this.element.addEventListener("contextmenu", (event: MouseEvent & { target: HTMLInputElement }) => {
const buttonElement = hasClosestByTag(event.target, "BUTTON"); const buttonElement = hasClosestByTag(event.target, "BUTTON");
if (!buttonElement || protyle.disabled || buttonElement.getAttribute("data-type") === "fold") { if (!buttonElement || buttonElement.getAttribute("data-type") === "fold") {
return; return;
} }
if (!window.siyuan.ctrlIsPressed && !window.siyuan.altIsPressed && !window.siyuan.shiftIsPressed) { if (!window.siyuan.ctrlIsPressed && !window.siyuan.altIsPressed && !window.siyuan.shiftIsPressed) {
const gutterRect = buttonElement.getBoundingClientRect();
if (buttonElement.dataset.type === "NodeAttributeViewRowMenu") {
const rowElement = Array.from(protyle.wysiwyg.element.querySelectorAll(`.av[data-node-id="${buttonElement.dataset.nodeId}"] .av__row[data-id="${buttonElement.dataset.rowId}"]`)).find((item: HTMLElement) => {
if (!hasClosestByAttribute(item, "data-type", "NodeBlockQueryEmbed")) {
return true;
}
});
if (rowElement) {
avContextmenu(protyle, rowElement as HTMLElement, {
x: gutterRect.left,
y: gutterRect.bottom,
w: gutterRect.width,
h: gutterRect.height,
isLeft: true
});
}
} else if (buttonElement.dataset.type !== "NodeAttributeViewRow") {
this.renderMenu(protyle, buttonElement); this.renderMenu(protyle, buttonElement);
window.siyuan.menus.menu.popup({x: event.clientX - 16, y: event.clientY - 16, isLeft: true}); window.siyuan.menus.menu.popup({x: gutterRect.left, y: gutterRect.bottom, isLeft: true});
window.siyuan.menus.menu.element.setAttribute("data-from", hasClosestByClassName(protyle.element, "block__edit") ? "popover" : "app"); window.siyuan.menus.menu.element.setAttribute("data-from", hasClosestByClassName(protyle.element, "block__edit") ? "popover" : "app");
} }
}
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
}); });
@ -309,28 +331,37 @@ export class Gutter {
if (!buttonElement) { if (!buttonElement) {
return; return;
} }
if (buttonElement.getAttribute("data-type") === "fold") { const type = buttonElement.getAttribute("data-type");
Array.from(protyle.wysiwyg.element.querySelectorAll(".protyle-wysiwyg--hl")).forEach(hlItem => { if (type === "fold" || type === "NodeAttributeViewRow") {
hlItem.classList.remove("protyle-wysiwyg--hl"); Array.from(protyle.wysiwyg.element.querySelectorAll(".protyle-wysiwyg--hl, .av__row--hl")).forEach(item => {
item.classList.remove("protyle-wysiwyg--hl", "av__row--hl");
}); });
return; return;
} }
Array.from(protyle.wysiwyg.element.querySelectorAll(`[data-node-id="${buttonElement.getAttribute("data-node-id")}"]`)).find(item => { Array.from(protyle.wysiwyg.element.querySelectorAll(`[data-node-id="${buttonElement.getAttribute("data-node-id")}"]`)).find(item => {
if (!hasClosestByAttribute(item.parentElement, "data-type", "NodeBlockQueryEmbed") && this.isMatchNode(item)) { if (!hasClosestByAttribute(item.parentElement, "data-type", "NodeBlockQueryEmbed") && this.isMatchNode(item)) {
Array.from(protyle.wysiwyg.element.querySelectorAll(".protyle-wysiwyg--hl")).forEach(hlItem => { const rowItem = item.querySelector(`.av__row[data-id="${buttonElement.dataset.rowId}"]`)
Array.from(protyle.wysiwyg.element.querySelectorAll(".protyle-wysiwyg--hl, av__row--hl")).forEach(hlItem => {
if (!item.isSameNode(hlItem)) { if (!item.isSameNode(hlItem)) {
hlItem.classList.remove("protyle-wysiwyg--hl"); hlItem.classList.remove("protyle-wysiwyg--hl");
} }
if (rowItem && !rowItem.isSameNode(hlItem)) {
rowItem.classList.remove("av__row--hl");
}
}); });
if (type === "NodeAttributeViewRowMenu") {
rowItem.classList.add("av__row--hl");
} else {
item.classList.add("protyle-wysiwyg--hl"); item.classList.add("protyle-wysiwyg--hl");
}
return true; return true;
} }
}); });
event.preventDefault(); event.preventDefault();
}); });
this.element.addEventListener("mouseleave", (event: MouseEvent & { target: HTMLInputElement }) => { this.element.addEventListener("mouseleave", (event: MouseEvent & { target: HTMLInputElement }) => {
Array.from(protyle.wysiwyg.element.querySelectorAll(".protyle-wysiwyg--hl")).forEach(item => { Array.from(protyle.wysiwyg.element.querySelectorAll(".protyle-wysiwyg--hl, .av__row--hl")).forEach(item => {
item.classList.remove("protyle-wysiwyg--hl"); item.classList.remove("protyle-wysiwyg--hl", "av__row--hl");
}); });
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
@ -1869,12 +1900,13 @@ export class Gutter {
if (isShow) { if (isShow) {
type = nodeElement.getAttribute("data-type"); type = nodeElement.getAttribute("data-type");
} }
const dataNodeId = nodeElement.getAttribute("data-node-id")
if (type === "NodeAttributeView" && target) { if (type === "NodeAttributeView" && target) {
const rowElement = hasClosestByClassName(target, "av__row"); const rowElement = hasClosestByClassName(target, "av__row");
if (rowElement && !rowElement.classList.contains("av__row--header")) { if (rowElement && !rowElement.classList.contains("av__row--header")) {
element = rowElement; element = rowElement;
html = `<button data-type="NodeAttributeViewRow" data-node-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 = `<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="${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>` <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>`
break; break;
} }
} }
@ -1901,7 +1933,7 @@ export class Gutter {
} }
index += 1; index += 1;
const buttonHTML = `<button class="ariaLabel" data-position="right" aria-label="${this.gutterTip}" const buttonHTML = `<button class="ariaLabel" data-position="right" aria-label="${this.gutterTip}"
data-type="${type}" data-subtype="${nodeElement.getAttribute("data-subtype")}" data-node-id="${nodeElement.getAttribute("data-node-id")}"> data-type="${type}" data-subtype="${nodeElement.getAttribute("data-subtype")}" data-node-id="${dataNodeId}">
<svg><use xlink:href="#${getIconByType(type, nodeElement.getAttribute("data-subtype"))}"></use></svg> <svg><use xlink:href="#${getIconByType(type, nodeElement.getAttribute("data-subtype"))}"></use></svg>
<span ${protyle.disabled ? "" : 'draggable="true"'}></span> <span ${protyle.disabled ? "" : 'draggable="true"'}></span>
</button>`; </button>`;
@ -1945,10 +1977,16 @@ data-type="fold"><svg style="width:10px${fold && fold === "1" ? "" : ";transform
if (buttonsElement.length !== html.split("</button>").length - 1) { if (buttonsElement.length !== html.split("</button>").length - 1) {
match = false; match = false;
} else { } else {
buttonsElement.forEach(item => { Array.from(buttonsElement).find(item => {
const id = item.getAttribute("data-node-id"); const id = item.getAttribute("data-node-id");
if (id && html.indexOf(id) === -1) { if (id && html.indexOf(id) === -1) {
match = false; match = false;
return true
}
const rowId = item.getAttribute("data-row-id");
if (rowId && html.indexOf(rowId) === -1) {
match = false;
return true;
} }
}); });
} }

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

@ -256,6 +256,9 @@ export const avContextmenu = (protyle: IProtyle, rowElement: HTMLElement, positi
if (!blockElement) { if (!blockElement) {
return false; return false;
} }
blockElement.querySelectorAll(".av__cell--select").forEach(item => {
item.classList.remove("av__cell--select");
});
if (!rowElement.classList.contains("av__row--select")) { if (!rowElement.classList.contains("av__row--select")) {
blockElement.querySelectorAll(".av__row--select").forEach(item => { blockElement.querySelectorAll(".av__row--select").forEach(item => {
item.classList.remove("av__row--select"); item.classList.remove("av__row--select");

5
app/src/protyle/render/av/render.ts
View file

@ -297,6 +297,11 @@ export const refreshAV = (protyle: IProtyle, operation: IOperation, isUndo: bool
if (!isUndo && operation.action === "insertAttrViewBlock" && operation.isDetached && isCurrent) { if (!isUndo && operation.action === "insertAttrViewBlock" && operation.isDetached && isCurrent) {
popTextCell(protyle, [item.querySelector(`.av__row[data-id="${operation.srcIDs[0]}"] .av__cell[data-detached="true"]`)], "block"); popTextCell(protyle, [item.querySelector(`.av__row[data-id="${operation.srcIDs[0]}"] .av__cell[data-detached="true"]`)], "block");
} }
if (operation.action === "insertAttrViewBlock") {
item.querySelectorAll(".av__cell--select").forEach((cellElement: HTMLElement) => {
cellElement.classList.remove("av__cell--select");
});
}
}, ["addAttrViewView", "duplicateAttrViewView"].includes(operation.action) ? operation.id : }, ["addAttrViewView", "duplicateAttrViewView"].includes(operation.action) ? operation.id :
(operation.action === "removeAttrViewView" ? null : undefined)); (operation.action === "removeAttrViewView" ? null : undefined));
}); });