github/siyuan
4
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2025-05-15 16:41:07 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Vanessa 2023-10-13 11:08:56 +08:00
parent 55fb8b19ab
commit ed31305d1d
6 changed files with 92 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/src/menus/protyle.ts
View File

@ -45,7 +45,7 @@ import {hideElements} from "../protyle/ui/hideElements";
import {emitOpenMenu} from "../plugin/EventBus"; import {emitOpenMenu} from "../plugin/EventBus";
import {openMobileFileById} from "../mobile/editor"; import {openMobileFileById} from "../mobile/editor";
import {openBacklink, openGraph} from "../layout/dock/util"; import {openBacklink, openGraph} from "../layout/dock/util";
import {updateHeader} from "../protyle/render/av/col"; import {updateHeader} from "../protyle/render/av/row";
export const fileAnnotationRefMenu = (protyle: IProtyle, refElement: HTMLElement) => { export const fileAnnotationRefMenu = (protyle: IProtyle, refElement: HTMLElement) => {
const nodeElement = hasClosestBlock(refElement); const nodeElement = hasClosestBlock(refElement);

58
app/src/protyle/render/av/action.ts
View File

@ -4,7 +4,8 @@ import {transaction} from "../../wysiwyg/transaction";
import {openEditorTab} from "../../../menus/util"; import {openEditorTab} from "../../../menus/util";
import {copySubMenu} from "../../../menus/commonMenuItem"; import {copySubMenu} from "../../../menus/commonMenuItem";
import {openCalcMenu, popTextCell} from "./cell"; import {openCalcMenu, popTextCell} from "./cell";
import {getColIconByType, showColMenu, updateHeader} from "./col"; import {getColIconByType, showColMenu} from "./col";
import {insertAttrViewBlockAnimation, updateHeader} from "./row";
import {emitOpenMenu} from "../../../plugin/EventBus"; import {emitOpenMenu} from "../../../plugin/EventBus";
import {addCol} from "./addCol"; import {addCol} from "./addCol";
import {openMenuPanel} from "./openMenuPanel"; import {openMenuPanel} from "./openMenuPanel";
@ -18,6 +19,7 @@ import {Constants} from "../../../constants";
import {openAsset} from "../../../editor/util"; import {openAsset} from "../../../editor/util";
import {getSearch, isMobile} from "../../../util/functions"; import {getSearch, isMobile} from "../../../util/functions";
import {unicode2Emoji} from "../../../emoji"; import {unicode2Emoji} from "../../../emoji";
import {selectRow} from "./row";
export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLElement }) => { export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLElement }) => {
const blockElement = hasClosestBlock(event.target); const blockElement = hasClosestBlock(event.target);
@ -61,30 +63,7 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
const checkElement = hasClosestByClassName(event.target, "av__firstcol"); const checkElement = hasClosestByClassName(event.target, "av__firstcol");
if (checkElement) { if (checkElement) {
window.siyuan.menus.menu.remove(); window.siyuan.menus.menu.remove();
const rowElement = checkElement.parentElement; selectRow(checkElement, "toggle");
const useElement = checkElement.querySelector("use");
if (rowElement.classList.contains("av__row--header")) {
if ("#iconCheck" === useElement.getAttribute("xlink:href")) {
rowElement.parentElement.querySelectorAll(".av__firstcol").forEach(item => {
item.querySelector("use").setAttribute("xlink:href", "#iconUncheck");
item.parentElement.classList.remove("av__row--select");
});
} else {
rowElement.parentElement.querySelectorAll(".av__firstcol").forEach(item => {
item.querySelector("use").setAttribute("xlink:href", "#iconCheck");
item.parentElement.classList.add("av__row--select");
});
}
} else {
if (useElement.getAttribute("xlink:href") === "#iconUncheck") {
checkElement.parentElement.classList.add("av__row--select");
useElement.setAttribute("xlink:href", "#iconCheck");
} else {
checkElement.parentElement.classList.remove("av__row--select");
useElement.setAttribute("xlink:href", "#iconUncheck");
}
}
updateHeader(rowElement);
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
return true; return true;
@ -176,11 +155,13 @@ 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 && !cellElement.parentElement.classList.contains("av__row--header")) { if (cellElement && !cellElement.parentElement.classList.contains("av__row--header")) {
cellElement.parentElement.parentElement.querySelectorAll(".av__row--select").forEach(item => { const type = cellElement.parentElement.parentElement.firstElementChild.querySelector(`[data-col-id="${cellElement.getAttribute("data-col-id")}"]`).getAttribute("data-dtype") as TAVCol;
item.querySelector(".av__firstcol use").setAttribute("xlink:href", "#iconUncheck"); if (type === "updated" || type === "created") {
item.classList.remove("av__row--select"); selectRow(cellElement.parentElement.querySelector(".av__firstcol"), "toggle");
}); } else {
popTextCell(protyle, [cellElement]); selectRow(cellElement.parentElement.querySelector(".av__firstcol"), "unselect");
popTextCell(protyle, [cellElement]);
}
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
return true; return true;
@ -367,20 +348,3 @@ export const removeAttrViewColAnimation = (blockElement: Element, id: string) =>
item.remove(); item.remove();
}); });
}; };
export const insertAttrViewBlockAnimation = (blockElement: Element, size: number, previousId: string, avId?: string) => {
const previousElement = blockElement.querySelector(`.av__row[data-id="${previousId}"]`) || blockElement.querySelector(".av__row--header");
let colHTML = "";
previousElement.querySelectorAll(".av__cell").forEach((item: HTMLElement) => {
colHTML += `<div class="av__cell" style="width: ${item.style.width}" ${item.getAttribute("data-block-id") ? ' data-detached="true"' : ""}><span class="av__pulse"></span></div>`;
});
let html = "";
new Array(size).fill(1).forEach(() => {
html += `<div class="av__row" data-avid="${avId}">
<div style="width: 24px"></div>
${colHTML}
</div>`;
});
previousElement.insertAdjacentHTML("afterend", html);
};

29
app/src/protyle/render/av/col.ts
View File

@ -306,35 +306,6 @@ export const getColIconByType = (type: TAVCol) => {
} }
}; };
export const updateHeader = (rowElement: HTMLElement) => {
const blockElement = hasClosestBlock(rowElement);
if (!blockElement) {
return;
}
const selectCount = rowElement.parentElement.querySelectorAll(".av__row--select:not(.av__row--header)").length;
const diffCount = rowElement.parentElement.childElementCount - 3 - selectCount;
const headElement = rowElement.parentElement.firstElementChild;
const headUseElement = headElement.querySelector("use");
const counterElement = blockElement.querySelector(".av__counter");
const avHeadElement = blockElement.querySelector(".av__header") as HTMLElement;
if (diffCount === 0 && rowElement.parentElement.childElementCount - 3 !== 0) {
headElement.classList.add("av__row--select");
headUseElement.setAttribute("xlink:href", "#iconCheck");
} else if (diffCount === rowElement.parentElement.childElementCount - 3) {
headElement.classList.remove("av__row--select");
headUseElement.setAttribute("xlink:href", "#iconUncheck");
counterElement.classList.add("fn__none");
avHeadElement.style.position = "";
return;
} else if (diffCount > 0) {
headElement.classList.add("av__row--select");
headUseElement.setAttribute("xlink:href", "#iconIndeterminateCheck");
}
counterElement.classList.remove("fn__none");
counterElement.innerHTML = `${selectCount} selected`;
avHeadElement.style.position = "sticky";
};
export const addAttrViewColAnimation = (options: { export const addAttrViewColAnimation = (options: {
blockElement: Element, blockElement: Element,
protyle: IProtyle, protyle: IProtyle,

74
app/src/protyle/render/av/row.ts Normal file
View File

@ -0,0 +1,74 @@
import {hasClosestBlock} from "../../util/hasClosest";
export const selectRow = (checkElement: Element, type: "toggle" | "select" | "unselect") => {
const rowElement = checkElement.parentElement;
const useElement = checkElement.querySelector("use");
if (rowElement.classList.contains("av__row--header")) {
if ("#iconCheck" === useElement.getAttribute("xlink:href")) {
rowElement.parentElement.querySelectorAll(".av__firstcol").forEach(item => {
item.querySelector("use").setAttribute("xlink:href", "#iconUncheck");
item.parentElement.classList.remove("av__row--select");
});
} else {
rowElement.parentElement.querySelectorAll(".av__firstcol").forEach(item => {
item.querySelector("use").setAttribute("xlink:href", "#iconCheck");
item.parentElement.classList.add("av__row--select");
});
}
} else {
if (type === "select" || (useElement.getAttribute("xlink:href") === "#iconUncheck" && type === "toggle")) {
checkElement.parentElement.classList.add("av__row--select");
useElement.setAttribute("xlink:href", "#iconCheck");
} else if (type === "unselect" || (useElement.getAttribute("xlink:href") === "#iconCheck" && type === "toggle")) {
checkElement.parentElement.classList.remove("av__row--select");
useElement.setAttribute("xlink:href", "#iconUncheck");
}
}
updateHeader(rowElement);
}
export const updateHeader = (rowElement: HTMLElement) => {
const blockElement = hasClosestBlock(rowElement);
if (!blockElement) {
return;
}
const selectCount = rowElement.parentElement.querySelectorAll(".av__row--select:not(.av__row--header)").length;
const diffCount = rowElement.parentElement.childElementCount - 3 - selectCount;
const headElement = rowElement.parentElement.firstElementChild;
const headUseElement = headElement.querySelector("use");
const counterElement = blockElement.querySelector(".av__counter");
const avHeadElement = blockElement.querySelector(".av__header") as HTMLElement;
if (diffCount === 0 && rowElement.parentElement.childElementCount - 3 !== 0) {
headElement.classList.add("av__row--select");
headUseElement.setAttribute("xlink:href", "#iconCheck");
} else if (diffCount === rowElement.parentElement.childElementCount - 3) {
headElement.classList.remove("av__row--select");
headUseElement.setAttribute("xlink:href", "#iconUncheck");
counterElement.classList.add("fn__none");
avHeadElement.style.position = "";
return;
} else if (diffCount > 0) {
headElement.classList.add("av__row--select");
headUseElement.setAttribute("xlink:href", "#iconIndeterminateCheck");
}
counterElement.classList.remove("fn__none");
counterElement.innerHTML = `${selectCount} selected`;
avHeadElement.style.position = "sticky";
};
export const insertAttrViewBlockAnimation = (blockElement: Element, size: number, previousId: string, avId?: string) => {
const previousElement = blockElement.querySelector(`.av__row[data-id="${previousId}"]`) || blockElement.querySelector(".av__row--header");
let colHTML = "";
previousElement.querySelectorAll(".av__cell").forEach((item: HTMLElement) => {
colHTML += `<div class="av__cell" style="width: ${item.style.width}" ${item.getAttribute("data-block-id") ? ' data-detached="true"' : ""}><span class="av__pulse"></span></div>`;
});
let html = "";
new Array(size).fill(1).forEach(() => {
html += `<div class="av__row" data-avid="${avId}">
<div style="width: 24px"></div>
${colHTML}
</div>`;
});
previousElement.insertAdjacentHTML("afterend", html);
};

2
app/src/protyle/util/editorCommonEvent.ts
View File

@ -19,7 +19,7 @@ import {uploadLocalFiles} from "../upload";
import {insertHTML} from "./insertHTML"; import {insertHTML} from "./insertHTML";
import {isBrowser} from "../../util/functions"; import {isBrowser} from "../../util/functions";
import {hideElements} from "../ui/hideElements"; import {hideElements} from "../ui/hideElements";
import {insertAttrViewBlockAnimation} from "../render/av/action"; import {insertAttrViewBlockAnimation} from "../render/av/row";
const moveToNew = (protyle: IProtyle, sourceElements: Element[], targetElement: Element, newSourceElement: Element, const moveToNew = (protyle: IProtyle, sourceElements: Element[], targetElement: Element, newSourceElement: Element,
isSameDoc: boolean, isBottom: boolean, isCopy: boolean) => { isSameDoc: boolean, isBottom: boolean, isCopy: boolean) => {

8
app/src/protyle/wysiwyg/index.ts
View File

@ -76,7 +76,7 @@ import {removeSearchMark} from "../toolbar/util";
import {activeBlur, hideKeyboardToolbar} from "../../mobile/util/keyboardToolbar"; import {activeBlur, hideKeyboardToolbar} from "../../mobile/util/keyboardToolbar";
import {commonClick} from "./commonClick"; import {commonClick} from "./commonClick";
import {avClick, avContextmenu, updateAVName} from "../render/av/action"; import {avClick, avContextmenu, updateAVName} from "../render/av/action";
import {updateHeader} from "../render/av/col"; import {updateHeader} from "../render/av/row";
export class WYSIWYG { export class WYSIWYG {
public lastHTMLs: { [key: string]: string } = {}; public lastHTMLs: { [key: string]: string } = {};
@ -187,10 +187,12 @@ export class WYSIWYG {
private setEmptyOutline(protyle: IProtyle, element: HTMLElement) { private setEmptyOutline(protyle: IProtyle, element: HTMLElement) {
// 图片移除选择状态应放在前面，否则 https://github.com/siyuan-note/siyuan/issues/4173 // 图片移除选择状态应放在前面，否则 https://github.com/siyuan-note/siyuan/issues/4173
protyle.wysiwyg.element.querySelectorAll(".img--select, .av__cell--select, .av__row--select").forEach((item: HTMLElement) => { protyle.wysiwyg.element.querySelectorAll(".img--select, .av__cell--select, .av__row--select").forEach((item: HTMLElement) => {
if (item.classList.contains("av__row--select")) { if (item.classList.contains("av__row--select") && !hasClosestByClassName(element, "av")) {
updateHeader(item); updateHeader(item);
item.classList.remove("av__row--select");
} }
item.classList.remove("img--select", "av__cell--select", "av__row--select"); item.classList.remove("img--select", "av__cell--select");
}); });
let nodeElement = element; let nodeElement = element;