diff --git a/app/src/assets/scss/business/_av.scss b/app/src/assets/scss/business/_av.scss index 2ce1b7870..4423bfc38 100644 --- a/app/src/assets/scss/business/_av.scss +++ b/app/src/assets/scss/business/_av.scss @@ -1,6 +1,12 @@ .av { user-select: none; box-sizing: border-box; + display: flex; + max-width: 100%; + + &__container { + overflow: auto; + } &__pulse { width: 70%; @@ -369,13 +375,13 @@ } } } +} - &.protyle-wysiwyg--select, - &.protyle-wysiwyg--hl { - .av__row--header, - .av__row--footer { - background-color: transparent; - } +.protyle-wysiwyg--select, +.protyle-wysiwyg--hl { + .av__row--header, + .av__row--footer { + background-color: transparent; } } diff --git a/app/src/protyle/gutter/index.ts b/app/src/protyle/gutter/index.ts index c57fa7296..51a66808a 100644 --- a/app/src/protyle/gutter/index.ts +++ b/app/src/protyle/gutter/index.ts @@ -38,7 +38,6 @@ import {appearanceMenu} from "../toolbar/Font"; import {setPosition} from "../../util/setPosition"; import {avRender} from "../render/av/render"; import {emitOpenMenu} from "../../plugin/EventBus"; -import {resizeAV} from "../util/resize"; export class Gutter { public element: HTMLElement; @@ -1616,8 +1615,7 @@ export class Gutter { click: () => { this.genClick(nodeElements, protyle, (e: HTMLElement) => { if (e.classList.contains("av")) { - e.style.margin = ""; - resizeAV(e); + e.style.justifyContent = ""; } else { e.style.textAlign = "left"; } @@ -1630,8 +1628,7 @@ export class Gutter { click: () => { this.genClick(nodeElements, protyle, (e: HTMLElement) => { if (e.classList.contains("av")) { - e.style.margin = "0 auto"; - resizeAV(e); + e.style.justifyContent = "center"; } else { e.style.textAlign = "center"; } @@ -1644,8 +1641,7 @@ export class Gutter { click: () => { this.genClick(nodeElements, protyle, (e: HTMLElement) => { if (e.classList.contains("av")) { - e.style.margin = "0 0 0 auto"; - resizeAV(e); + e.style.justifyContent = "flex-end"; } else { e.style.textAlign = "right"; } @@ -1687,8 +1683,7 @@ export class Gutter { click: () => { this.genClick(nodeElements, protyle, (e: HTMLElement) => { if (e.classList.contains("av")) { - e.style.margin = ""; - resizeAV(e); + e.style.justifyContent = ""; } else { e.style.textAlign = ""; e.style.direction = ""; @@ -1708,7 +1703,6 @@ export class Gutter { this.genClick(nodeElements, protyle, (e: HTMLElement) => { e.style.width = item; e.style.flex = "none"; - resizeAV(e); }); } }); @@ -1754,7 +1748,6 @@ export class Gutter { id: e.getAttribute("data-node-id"), data: e.outerHTML }); - resizeAV(e); }); transaction(protyle, operations, undoOperations); window.siyuan.menus.menu.remove(); @@ -1771,7 +1764,6 @@ export class Gutter { if (e.style.width) { e.style.width = ""; e.style.flex = ""; - resizeAV(e); } }); } @@ -1902,6 +1894,7 @@ data-type="fold"> Math.floor(window.siyuan.config.editor.fontSize * 1.625) + 8 && rect.height < Math.floor(window.siyuan.config.editor.fontSize * 1.625) * 2 + 8)) { marginHeight = (rect.height - this.element.clientHeight) / 2; + } else if (nodeElement.getAttribute("data-type") === "NodeAttributeView" && contentTop < rect.top) { + marginHeight = 8; } - if (nodeElement.getAttribute("data-type") === "NodeAttributeView") { - const iconElement = nodeElement.querySelector(".item__graphic"); - let top = rect.top + 8 - if (iconElement) { - top = iconElement.getBoundingClientRect().top - (window.siyuan.config.editor.fontSize * 1.625 - 14) / 2; - } - // 防止遮挡可左右滚动的 cell - const maxTop = wysiwyg.parentElement.getBoundingClientRect().top - if (top < maxTop - 43) { - top = -1000 - } else if (top > maxTop - 43 && top <= maxTop) { - top = maxTop - } - this.element.style.top = `${top}px`; - } else { - this.element.style.top = `${Math.max(rect.top, wysiwyg.parentElement.getBoundingClientRect().top) + marginHeight}px`; - } + this.element.style.top = `${Math.max(rect.top, contentTop) + marginHeight}px`; let left = rect.left - this.element.clientWidth - space; if (nodeElement.getAttribute("data-type") === "NodeBlockQueryEmbed" && this.element.childElementCount === 1) { // 嵌入块为列表时 diff --git a/app/src/protyle/render/av/render.ts b/app/src/protyle/render/av/render.ts index 42ed89242..4e3732464 100644 --- a/app/src/protyle/render/av/render.ts +++ b/app/src/protyle/render/av/render.ts @@ -5,7 +5,6 @@ import {getCalcValue} from "./cell"; import * as dayjs from "dayjs"; import {unicode2Emoji} from "../../../emoji"; import {focusBlock} from "../../util/selection"; -import {resizeAV} from "../../util/resize"; import {isMac} from "../../util/compatibility"; export const avRender = (element: Element, protyle: IProtyle, cb?: () => void) => { @@ -173,7 +172,7 @@ ${cell.color ? `color:${cell.color};` : ""}">${text}`; `; }); setTimeout(() => { - e.firstElementChild.outerHTML = `
+ e.firstElementChild.outerHTML = `
${tabHTML} @@ -208,7 +207,8 @@ ${cell.color ? `color:${cell.color};` : ""}">${text}
`;
`; e.setAttribute("data-render", "true"); - resizeAV(e); + // 历史兼容 + e.style.margin = ""; if (left) { e.querySelector(".av__scroll").scrollLeft = left; } diff --git a/app/src/protyle/util/resize.ts b/app/src/protyle/util/resize.ts index aa4a06970..6dfe2e249 100644 --- a/app/src/protyle/util/resize.ts +++ b/app/src/protyle/util/resize.ts @@ -42,46 +42,5 @@ export const resize = (protyle: IProtyle) => { } } } - if (abs.padding > MIN_ABS || abs.width > MIN_ABS || isNaN(abs.padding)) { - protyle.wysiwyg.element.querySelectorAll(".av").forEach((item: HTMLElement) => { - resizeAV(item); - }); - } }, Constants.TIMEOUT_TRANSITION); // 等待 setPadding 动画结束 }; - -export const resizeAV = (item: HTMLElement) => { - if (!item.classList.contains("av") || item.getAttribute("data-render") !== "true") { - return; - } - const attrElement = item.querySelector(".protyle-attr") as HTMLElement - if (item.style.width.endsWith("%") || item.style.margin) { - const avHeaderElement = item.firstElementChild.firstElementChild as HTMLElement; - avHeaderElement.style.paddingLeft = ""; - avHeaderElement.style.paddingRight = ""; - const avBodyElement = item.querySelector(".av__scroll").firstElementChild as HTMLElement; - avBodyElement.style.paddingLeft = ""; - avBodyElement.style.paddingRight = ""; - attrElement.style.paddingRight = ""; - item.style.alignSelf = ""; - if (!item.style.width.endsWith("%")) { - item.style.width = ""; - item.style.maxWidth = "100%"; - } - } else { - const paddingLeft = item.parentElement.style.paddingLeft; - const paddingRight = item.parentElement.style.paddingRight; - const avHeaderElement = item.firstElementChild.firstElementChild as HTMLElement; - avHeaderElement.style.paddingLeft = paddingLeft; - avHeaderElement.style.paddingRight = paddingRight; - const avBodyElement = item.querySelector(".av__scroll").firstElementChild as HTMLElement; - avBodyElement.style.paddingLeft = paddingLeft; - avBodyElement.style.paddingRight = paddingRight; - attrElement.style.paddingRight = paddingRight; - item.style.alignSelf = "center"; - if (item.parentElement.clientWidth > 0) { - item.style.width = item.parentElement.clientWidth + "px"; - item.style.maxWidth = ""; - } - } -}; diff --git a/app/src/protyle/wysiwyg/index.ts b/app/src/protyle/wysiwyg/index.ts index 9789d372e..bb1f823a4 100644 --- a/app/src/protyle/wysiwyg/index.ts +++ b/app/src/protyle/wysiwyg/index.ts @@ -1455,8 +1455,7 @@ export class WYSIWYG { // database 行块标 const rowElement = hasClosestByClassName(event.target, "av__row"); if (rowElement && rowElement.dataset.id) { - const rowRect = rowElement.getBoundingClientRect(); - rowElement.firstElementChild.setAttribute("style", `left:${rowRect.left - 44}px;top:${rowRect.top}px`); + rowElement.firstElementChild.setAttribute("style", `left:${rowElement.parentElement.parentElement.getBoundingClientRect().left - 44}px;top:${rowElement.getBoundingClientRect().top}px`); } protyle.gutter.render(protyle, nodeElement, this.element); } diff --git a/app/src/protyle/wysiwyg/keydown.ts b/app/src/protyle/wysiwyg/keydown.ts index bb365b6c0..09bac08b8 100644 --- a/app/src/protyle/wysiwyg/keydown.ts +++ b/app/src/protyle/wysiwyg/keydown.ts @@ -69,8 +69,6 @@ import {escapeHtml} from "../../util/escape"; import {insertHTML} from "../util/insertHTML"; import {removeSearchMark} from "../toolbar/util"; import {avKeydown} from "../render/av/keydown"; -import {resizeAV} from "../util/resize"; - export const getContentByInlineHTML = (range: Range, cb: (content: string) => void) => { let html = ""; @@ -1147,8 +1145,7 @@ export const keydown = (protyle: IProtyle, editorElement: HTMLElement) => { } updateBatchTransaction(selectElements, protyle, (e: HTMLElement) => { if (e.classList.contains("av")) { - e.style.margin = ""; - resizeAV(e); + e.style.justifyContent = ""; } else { e.style.textAlign = "left"; } @@ -1169,8 +1166,7 @@ export const keydown = (protyle: IProtyle, editorElement: HTMLElement) => { } updateBatchTransaction(selectElements, protyle, (e: HTMLElement) => { if (e.classList.contains("av")) { - e.style.margin = "0 auto"; - resizeAV(e); + e.style.justifyContent = "center"; } else { e.style.textAlign = "center"; } @@ -1187,8 +1183,7 @@ export const keydown = (protyle: IProtyle, editorElement: HTMLElement) => { } updateBatchTransaction(selectElements, protyle, (e: HTMLElement) => { if (e.classList.contains("av")) { - e.style.margin = "0 0 0 auto"; - resizeAV(e); + e.style.justifyContent = "flex-end"; } else { e.style.textAlign = "right"; }