From 25109b906fc4df4d19ea8aa507ed278307b43322 Mon Sep 17 00:00:00 2001 From: Vanessa Date: Sat, 14 Oct 2023 10:49:35 +0800 Subject: [PATCH] =?UTF-8?q?:art:=20=E6=95=B0=E6=8D=AE=E5=BA=93=E5=9D=97?= =?UTF-8?q?=E9=80=82=E9=85=8D=E5=A4=96=E8=A7=82=E5=92=8C=E5=AE=BD=E5=BA=A6?= =?UTF-8?q?=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/src/protyle/gutter/index.ts | 51 ++++++++++++++++------------- app/src/protyle/render/av/render.ts | 18 +++------- app/src/protyle/util/resize.ts | 45 ++++++++++++++++++------- 3 files changed, 67 insertions(+), 47 deletions(-) diff --git a/app/src/protyle/gutter/index.ts b/app/src/protyle/gutter/index.ts index f11634e4607..b5a4649ccbf 100644 --- a/app/src/protyle/gutter/index.ts +++ b/app/src/protyle/gutter/index.ts @@ -38,6 +38,7 @@ 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; @@ -710,12 +711,7 @@ export class Gutter { if (!isMobile()) { appearanceElement.lastElementChild.classList.add("b3-menu__submenu--row"); } - selectsElement.find((item) => { - if (!item.classList.contains("NodeAttributeView")) { - this.genAlign(selectsElement, protyle); - return true; - } - }); + this.genAlign(selectsElement, protyle); this.genWidths(selectsElement, protyle); window.siyuan.menus.menu.append(new MenuItem({type: "separator"}).element); window.siyuan.menus.menu.append(new MenuItem({ @@ -1515,9 +1511,7 @@ export class Gutter { if (!isMobile()) { appearanceElement.lastElementChild.classList.add("b3-menu__submenu--row"); } - if (type !== "NodeAttributeView") { - this.genAlign([nodeElement], protyle); - } + this.genAlign([nodeElement], protyle); this.genWidths([nodeElement], protyle); } window.siyuan.menus.menu.append(new MenuItem({type: "separator"}).element); @@ -1621,7 +1615,10 @@ export class Gutter { accelerator: window.siyuan.config.keymap.editor.general.alignLeft.custom, click: () => { this.genClick(nodeElements, protyle, (e: HTMLElement) => { - if (!e.classList.contains("NodeAttributeView")) { + if (e.classList.contains("av")) { + e.style.margin = "" + resizeAV(e); + } else { e.style.textAlign = "left"; } }); @@ -1632,7 +1629,10 @@ export class Gutter { accelerator: window.siyuan.config.keymap.editor.general.alignCenter.custom, click: () => { this.genClick(nodeElements, protyle, (e: HTMLElement) => { - if (!e.classList.contains("NodeAttributeView")) { + if (e.classList.contains("av")) { + e.style.margin = "0 auto"; + resizeAV(e); + } else { e.style.textAlign = "center"; } }); @@ -1643,7 +1643,10 @@ export class Gutter { accelerator: window.siyuan.config.keymap.editor.general.alignRight.custom, click: () => { this.genClick(nodeElements, protyle, (e: HTMLElement) => { - if (!e.classList.contains("NodeAttributeView")) { + if (e.classList.contains("av")) { + e.style.margin = "0 0 0 auto"; + resizeAV(e); + } else { e.style.textAlign = "right"; } }); @@ -1653,9 +1656,7 @@ export class Gutter { icon: "iconMenu", click: () => { this.genClick(nodeElements, protyle, (e: HTMLElement) => { - if (!e.classList.contains("NodeAttributeView")) { - e.style.textAlign = "justify"; - } + e.style.textAlign = "justify"; }); } }, { @@ -1665,9 +1666,7 @@ export class Gutter { icon: "iconLtr", click: () => { this.genClick(nodeElements, protyle, (e: HTMLElement) => { - if (!e.classList.contains("NodeAttributeView")) { - e.style.direction = "ltr"; - } + e.style.direction = "ltr"; }); } }, { @@ -1675,7 +1674,7 @@ export class Gutter { icon: "iconRtl", click: () => { this.genClick(nodeElements, protyle, (e: HTMLElement) => { - if (!e.classList.contains("NodeAttributeView")) { + if (!e.classList.contains("av")) { e.style.direction = "rtl"; } }); @@ -1687,8 +1686,13 @@ export class Gutter { icon: "iconTrashcan", click: () => { this.genClick(nodeElements, protyle, (e: HTMLElement) => { - e.style.textAlign = ""; - e.style.direction = ""; + if (e.classList.contains("av")) { + e.style.margin = ""; + resizeAV(e); + } else { + e.style.textAlign = ""; + e.style.direction = ""; + } }); } }] @@ -1704,6 +1708,7 @@ export class Gutter { this.genClick(nodeElements, protyle, (e: HTMLElement) => { e.style.width = item; e.style.flex = "none"; + resizeAV(e); }); } }); @@ -1743,12 +1748,13 @@ export class Gutter { }); }); rangeElement.addEventListener("change", () => { - nodeElements.forEach((e) => { + nodeElements.forEach((e: HTMLElement) => { operations.push({ action: "update", id: e.getAttribute("data-node-id"), data: e.outerHTML }); + resizeAV(e); }); transaction(protyle, operations, undoOperations); window.siyuan.menus.menu.remove(); @@ -1765,6 +1771,7 @@ export class Gutter { if (e.style.width) { e.style.width = ""; e.style.flex = ""; + resizeAV(e); } }); } diff --git a/app/src/protyle/render/av/render.ts b/app/src/protyle/render/av/render.ts index 6b1cefa0397..23434489686 100644 --- a/app/src/protyle/render/av/render.ts +++ b/app/src/protyle/render/av/render.ts @@ -5,6 +5,7 @@ import {getCalcValue} from "./cell"; import * as dayjs from "dayjs"; import {unicode2Emoji} from "../../../emoji"; import {focusBlock} from "../../util/selection"; +import {resizeAV} from "../../util/resize"; export const avRender = (element: Element, protyle: IProtyle, cb?: () => void) => { let avElements: Element[] = []; @@ -169,12 +170,9 @@ ${cell.color ? `color:${cell.color};` : ""}">${text}`; ${item.name} `; }); - const setWidth = e.style.width.endsWith("%"); - const paddingLeft = setWidth ? "" : e.parentElement.style.paddingLeft; - const paddingRight = setWidth ? "" : e.parentElement.style.paddingRight; setTimeout(() => { e.firstElementChild.outerHTML = `
-
+
${tabHTML}
@@ -195,7 +193,7 @@ ${cell.color ? `color:${cell.color};` : ""}">${text}
`;
-
+
${tableHTML}
@@ -205,16 +203,8 @@ ${cell.color ? `color:${cell.color};` : ""}">${text}
`;
`; - if (e.parentElement.clientWidth > 0) { - e.style.maxWidth = e.parentElement.clientWidth + "px"; - } - if (setWidth) { - e.style.alignSelf = ""; - } else { - e.style.width = ""; - e.style.alignSelf = "center"; - } e.setAttribute("data-render", "true"); + resizeAV(e); 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 4b045a161e3..79c2da1c076 100644 --- a/app/src/protyle/util/resize.ts +++ b/app/src/protyle/util/resize.ts @@ -44,18 +44,41 @@ 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) => { - item.style.maxWidth = item.parentElement.clientWidth + "px"; - if (item.getAttribute("data-render") === "true" && !item.style.width.endsWith("%")) { - 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; - } + resizeAV(item); }); } }, Constants.TIMEOUT_TRANSITION); // 等待 setPadding 动画结束 }; + +export const resizeAV = (item: HTMLElement) => { + if (!item.classList.contains("av") || item.getAttribute("data-render") !== "true") { + return + } + 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 = ""; + 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; + item.style.alignSelf = "center"; + if (item.parentElement.clientWidth > 0) { + item.style.width = item.parentElement.clientWidth + "px"; + item.style.maxWidth = ""; + } + } +}