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

🎨 https://github.com/siyuan-note/siyuan/pull/9280

Browse source
This commit is contained in:
Vanessa 2023-11-09 19:50:39 +08:00
parent f5da5b78c1
commit 49015413cd
6 changed files with 27 additions and 89 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -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;
}
}

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

@ -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"><svg style="width:10px${fold && fold === "1" ? "" : ";transform
this.element.innerHTML = html;
this.element.classList.remove("fn__none");
this.element.style.width = "";
const contentTop = wysiwyg.parentElement.getBoundingClientRect().top
let rect = element.getBoundingClientRect();
let marginHeight = 0;
if (listItem) {
@ -1913,24 +1906,10 @@ data-type="fold"><svg style="width:10px${fold && fold === "1" ? "" : ";transform
} else if (rect.height < Math.floor(window.siyuan.config.editor.fontSize * 1.625) + 8 ||
(rect.height > 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) {
// 嵌入块为列表时

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

@ -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}</div>`;
</div>`;
});
setTimeout(() => {
e.firstElementChild.outerHTML = `<div>
e.firstElementChild.outerHTML = `<div class="av__container">
<div class="av__header">
<div class="layout-tab-bar fn__flex">
${tabHTML}
@ -208,7 +207,8 @@ ${cell.color ? `color:${cell.color};` : ""}">${text}</div>`;
</div>
</div>`;
e.setAttribute("data-render", "true");
resizeAV(e);
// 历史兼容
e.style.margin = "";
if (left) {
e.querySelector(".av__scroll").scrollLeft = left;
}

41
app/src/protyle/util/resize.ts
View file

@ -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 = "";
}
}
};

3
app/src/protyle/wysiwyg/index.ts
View file

@ -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);
}

11
app/src/protyle/wysiwyg/keydown.ts
View file

@ -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";
}