0ct0pu5/siyuan
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

🎨 fix https://github.com/siyuan-note/siyuan/issues/9660

Browse source
This commit is contained in:
Vanessa 2023-11-15 18:40:01 +08:00
parent dc7f763054
commit 5cce04da49
6 changed files with 47 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/src/block/popover.ts
View file

@ -22,7 +22,7 @@ export const initBlockPopover = (app: App) => {
if (aElement) {
let tip = aElement.getAttribute("aria-label") || aElement.getAttribute("data-inline-memo-content");
if (aElement.classList.contains("av__celltext")) {
if (aElement.offsetWidth > aElement.parentElement.clientWidth - 11) {
if (aElement.offsetWidth > aElement.parentElement.clientWidth - 5) { // 只能减左边 padding，换行时字体会穿透到右侧 padding
if (aElement.querySelector(".av__cellicon")) {
tip = `${aElement.firstChild.textContent} → ${aElement.lastChild.textContent}`;
} else {

3
app/src/menus/index.ts
View file

@ -22,7 +22,8 @@ export class Menus {
return;
}
let target = event.target as HTMLElement;
while (target && !target.parentElement.isEqualNode(document.querySelector("body"))) {
while (target && target.parentElement // ⌃⇥ 后点击会为空
&& !target.parentElement.isEqualNode(document.querySelector("body"))) {
event.preventDefault();
const dataType = target.getAttribute("data-type");
if (dataType === "tab-header") {

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

@ -7,6 +7,7 @@ import {unicode2Emoji} from "../../../emoji";
import {focusBlock} from "../../util/selection";
import {isMac} from "../../util/compatibility";
import {hasClosestByClassName} from "../../util/hasClosest";
import {stickyRow} from "./row";
export const avRender = (element: Element, protyle: IProtyle, cb?: () => void) => {
let avElements: Element[] = [];
@ -240,12 +241,19 @@ ${cell.color ? `color:${cell.color};` : ""}">${text}</div>`;
if (left) {
e.querySelector(".av__scroll").scrollLeft = left;
}
const editRect = protyle.contentElement.getBoundingClientRect();
if (headerTransform) {
(e.querySelector(".av__row--header") as HTMLElement).style.transform = headerTransform;
} else {
stickyRow(e, editRect, "top");
}
if (footerTransform) {
(e.querySelector(".av__row--footer") as HTMLElement).style.transform = footerTransform;
} else {
stickyRow(e, editRect, "bottom");
}
if (selectCellId) {
const newCellElement = e.querySelector(`.av__row[data-id="${selectCellId.split(Constants.ZWSP)[0]}"] .av__cell[data-col-id="${selectCellId.split(Constants.ZWSP)[1]}"]`);
if (newCellElement) {

27
app/src/protyle/render/av/row.ts
View file

@ -89,3 +89,30 @@ export const insertAttrViewBlockAnimation = (blockElement: Element, size: number
});
previousElement.insertAdjacentHTML("afterend", html);
};
export const stickyRow = (blockElement: HTMLElement, elementRect: DOMRect, status: "top" | "bottom" | "all") => {
const scrollRect = blockElement.querySelector(".av__scroll").getBoundingClientRect();
const headerElement = blockElement.querySelector(".av__row--header") as HTMLElement;
if (headerElement && (status === "top" || status === "all")) {
const distance = Math.floor(elementRect.top - scrollRect.top);
if (distance > 0 && distance < scrollRect.height) {
headerElement.style.transform = `translateY(${distance}px)`;
} else {
headerElement.style.transform = "";
}
}
const footerElement = blockElement.querySelector(".av__row--footer") as HTMLElement;
if (footerElement && (status === "bottom" || status === "all")) {
if (footerElement.querySelector(".av__calc--ashow")) {
const distance = Math.ceil(elementRect.bottom - footerElement.parentElement.getBoundingClientRect().bottom);
if (distance < 0 && -distance < scrollRect.height) {
footerElement.style.transform = `translateY(${distance}px)`;
} else {
footerElement.style.transform = "";
}
} else {
footerElement.style.transform = "";
}
}
}

25
app/src/protyle/scroll/event.ts
View file

@ -4,6 +4,7 @@ import {fetchPost} from "../../util/fetch";
import {onGet} from "../util/onGet";
import {isMobile} from "../../util/functions";
import {hasClosestBlock, hasClosestByClassName} from "../util/hasClosest";
import {stickyRow} from "../render/av/row";
let getIndexTimeout: number;
export const scrollEvent = (protyle: IProtyle, element: HTMLElement) => {
@ -24,29 +25,7 @@ export const scrollEvent = (protyle: IProtyle, element: HTMLElement) => {
if (item.dataset.render !== "true") {
return;
}
const scrollRect = item.querySelector(".av__scroll").getBoundingClientRect();
const headerElement = item.querySelector(".av__row--header") as HTMLElement;
if (headerElement) {
const distance = Math.floor(elementRect.top - scrollRect.top);
if (distance > 0 && distance < scrollRect.height) {
headerElement.style.transform = `translateY(${distance}px)`;
} else {
headerElement.style.transform = "";
}
}
const footerElement = item.querySelector(".av__row--footer") as HTMLElement;
if (footerElement) {
if (footerElement.querySelector(".av__calc--ashow")) {
const distance = Math.ceil(elementRect.bottom - footerElement.parentElement.getBoundingClientRect().bottom);
if (distance < 0 && -distance < scrollRect.height) {
footerElement.style.transform = `translateY(${distance}px)`;
} else {
footerElement.style.transform = "";
}
} else {
footerElement.style.transform = "";
}
}
stickyRow(item, elementRect, "all");
});
if (!protyle.element.classList.contains("block__edit") && !isMobile()) {

14
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 {commonClick} from "./commonClick";
import {avClick, avContextmenu, updateAVName} from "../render/av/action";
import {updateHeader} from "../render/av/row";
import {stickyRow, updateHeader} from "../render/av/row";
export class WYSIWYG {
public lastHTMLs: { [key: string]: string } = {};
@ -382,14 +382,14 @@ export class WYSIWYG {
const oldWidth = dragElement.clientWidth;
const dragColId = dragElement.getAttribute("data-col-id");
let newWidth: string;
const scrollElement = nodeElement.querySelector(".av__scroll");
const contentRect = protyle.contentElement.getBoundingClientRect()
documentSelf.onmousemove = (moveEvent: MouseEvent) => {
newWidth = Math.max(oldWidth + (moveEvent.clientX - event.clientX), 58) + "px";
const scrollElement = hasClosestByClassName(dragElement, "av__scroll");
if (scrollElement) {
scrollElement.querySelectorAll(".av__row, .av__row--footer").forEach(item => {
(item.querySelector(`[data-col-id="${dragColId}"]`) as HTMLElement).style.width = newWidth;
});
}
scrollElement.querySelectorAll(".av__row, .av__row--footer").forEach(item => {
(item.querySelector(`[data-col-id="${dragColId}"]`) as HTMLElement).style.width = newWidth;
});
stickyRow(nodeElement, contentRect, "bottom");
};
documentSelf.onmouseup = () => {