Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2025-12-21 17:10:12 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

🎨 resize

Browse source
This commit is contained in:
Vanessa 2023-09-13 12:05:57 +08:00
parent da369e391a
commit 268b928267
14 changed files with 99 additions and 87 deletions
Download patch file Download diff file Expand all files Collapse all files

3
app/src/block/Panel.ts
View file

@ -15,6 +15,7 @@ import {fetchPost} from "../util/fetch";
import {showMessage} from "../dialog/message";
import {App} from "../index";
import {isMobile} from "../util/functions";
import {resize} from "../protyle/util/resize";
export class BlockPanel {
public element: HTMLElement;
@ -130,7 +131,7 @@ export class BlockPanel {
moveResize(this.element, (type: string) => {
if (type !== "move") {
this.editors.forEach(item => {
setPadding(item.protyle);
resize(item.protyle);
});
}
const pinElement = this.element.firstElementChild.querySelector('[data-type="pin"]');

1
app/src/boot/globalEvent/keydown.ts
View file

@ -245,7 +245,6 @@ const editKeydown = (app: App, event: KeyboardEvent) => {
}
if (matchHotKey(window.siyuan.config.keymap.editor.general.fullscreen.custom, event)) {
fullscreen(protyle.element);
setPadding(protyle);
event.preventDefault();
return true;
}

6
app/src/config/editor.ts
View file

@ -6,6 +6,7 @@ import {setPadding} from "../protyle/ui/initUI";
import {reloadProtyle} from "../protyle/util/reload";
import {updateHotkeyTip} from "../protyle/util/compatibility";
import {Constants} from "../constants";
import {resize} from "../protyle/util/resize";
export const editor = {
element: undefined as Element,
@ -343,11 +344,14 @@ export const editor = {
window.siyuan.config.editor = editorData;
getAllModels().editor.forEach((item) => {
reloadProtyle(item.editor.protyle, false);
setPadding(item.editor.protyle);
let isFullWidth = item.editor.protyle.wysiwyg.element.getAttribute(Constants.CUSTOM_SY_FULLWIDTH);
if (!isFullWidth) {
isFullWidth = window.siyuan.config.editor.fullWidth ? "true" : "false";
}
if (isFullWidth === "true" && item.editor.protyle.contentElement.getAttribute("data-fullwidth") === "true") {
return;
}
resize(item.editor.protyle);
if (isFullWidth === "true") {
item.editor.protyle.contentElement.setAttribute("data-fullwidth", "true");
} else {

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

@ -8,6 +8,7 @@ import {setModelsHash} from "../window/setHeader";
/// #endif
import {countBlockWord} from "../layout/status";
import {App} from "../index";
import {resize} from "../protyle/util/resize";
export class Editor extends Model {
public element: HTMLElement;
@ -58,7 +59,7 @@ export class Editor extends Model {
getAllModels().editor.forEach(item => {
if (!editor.protyle.element.isSameNode(item.element) && item.element.classList.contains("fullscreen")) {
item.element.classList.remove("fullscreen");
setPadding(item.editor.protyle);
resize(item.editor.protyle);
}
});
}

4
app/src/editor/util.ts
View file

@ -328,12 +328,12 @@ const switchEditor = (editor: Editor, options: IOpenFileOptions, allModels: IMod
allModels.editor.forEach((item) => {
if (!item.element.isSameNode(editor.element) && window.siyuan.editorIsFullscreen && item.element.classList.contains("fullscreen")) {
item.element.classList.remove("fullscreen");
setPadding(item.editor.protyle);
resize(item.editor.protyle);
}
});
if (window.siyuan.editorIsFullscreen) {
editor.element.classList.add("fullscreen");
setPadding(editor.editor.protyle);
resize(editor.editor.protyle);
}
if (options.keepCursor) {
editor.parent.headElement.setAttribute("keep-cursor", options.id);

5
app/src/protyle/breadcrumb/action.ts
View file

@ -7,6 +7,7 @@ import {Constants} from "../../constants";
import {hideAllElements, hideElements} from "../ui/hideElements";
import {hasClosestByClassName} from "../util/hasClosest";
import {reloadProtyle} from "../util/reload";
import {resize} from "../util/resize";
export const netImg2LocalAssets = (protyle: IProtyle) => {
if (protyle.element.querySelector(".wysiwygLoading")) {
@ -73,11 +74,11 @@ export const fullscreen = (element: Element, btnElement?: Element) => {
if (window.siyuan.editorIsFullscreen) {
if (!element.isSameNode(item.element) && item.element.classList.contains("fullscreen")) {
item.element.classList.remove("fullscreen");
setPadding(item.editor.protyle);
resize(item.editor.protyle);
}
} else if (item.element.classList.contains("fullscreen")) {
item.element.classList.remove("fullscreen");
setPadding(item.editor.protyle);
resize(item.editor.protyle);
}
});
/// #endif

1
app/src/protyle/breadcrumb/index.ts
View file

@ -405,7 +405,6 @@ export class Breadcrumb {
label: window.siyuan.languages.fullscreen,
click: () => {
fullscreen(protyle.element);
setPadding(protyle);
}
}).element);
/// #endif

2
app/src/protyle/index.ts
View file

@ -301,7 +301,7 @@ export class Protyle {
});
/// #endif
}
setPadding(this.protyle);
resize(this.protyle);
// 需等待 getDoc 完成后再执行，否则在无页签的时候 updatePanelByEditor 会执行2次
// 只能用 focusin，否则点击表格无法执行
this.protyle.wysiwyg.element.addEventListener("focusin", () => {

56
app/src/protyle/ui/initUI.ts
View file

@ -118,26 +118,31 @@ export const removeLoading = (protyle: IProtyle) => {
export const setPadding = (protyle: IProtyle) => {
if (protyle.options.action.includes(Constants.CB_GET_HISTORY)) {
return;
return {
width: 0,
padding: 0
};
}
let min16 = 16;
let min24 = 24;
const oldLeft = parseInt(protyle.wysiwyg.element.style.paddingLeft)
let left = 16;
let right = 24;
if (!isMobile()) {
let padding = (protyle.element.clientWidth - Constants.SIZE_EDITOR_WIDTH) / 2;
let isFullWidth = protyle.wysiwyg.element.getAttribute(Constants.CUSTOM_SY_FULLWIDTH);
if (!isFullWidth) {
isFullWidth = window.siyuan.config.editor.fullWidth ? "true" : "false";
}
let padding = (protyle.element.clientWidth - Constants.SIZE_EDITOR_WIDTH) / 2;
if (isFullWidth === "false" && padding > 96) {
if (padding > Constants.SIZE_EDITOR_WIDTH) {
// 超宽屏调整 https://ld246.com/article/1668266637363
padding = protyle.element.clientWidth * .382 / 1.382;
}
min16 = padding;
min24 = padding;
padding = Math.ceil(padding);
left = padding;
right = padding;
} else if (protyle.element.clientWidth > Constants.SIZE_EDITOR_WIDTH) {
min16 = 96;
min24 = 96;
left = 96;
right = 96;
}
}
let bottomHeight = "16px";
@ -149,37 +154,28 @@ export const setPadding = (protyle: IProtyle) => {
}
}
if (protyle.options.backlinkData) {
if ((min16 === min24 && protyle.wysiwyg.element.style.padding === `4px ${min16}px`) ||
(min16 !== min24 && protyle.wysiwyg.element.style.padding === `4px ${min16}px 4px ${min24}px`)) {
return true;
}
protyle.wysiwyg.element.style.padding = `4px ${min16}px 4px ${min24}px`;
protyle.wysiwyg.element.style.padding = `4px ${left}px 4px ${right}px`;
} else {
// https://github.com/siyuan-note/siyuan/issues/8859
if ((min16 === min24 && protyle.wysiwyg.element.style.padding === `16px ${min16}px ${bottomHeight}`) ||
(min16 !== min24 && protyle.wysiwyg.element.style.padding === `16px ${min16}px ${bottomHeight} ${min24}px`)) {
return true;
}
protyle.wysiwyg.element.style.padding = `16px ${min16}px ${bottomHeight} ${min24}px`;
protyle.wysiwyg.element.style.padding = `16px ${left}px ${bottomHeight} ${right}px`;
}
if (protyle.options.render.background) {
protyle.background.element.lastElementChild.setAttribute("style", `left:${min16}px`);
protyle.background.element.querySelector(".protyle-background__img .protyle-icons").setAttribute("style", `right:${min16}px`);
protyle.background.element.lastElementChild.setAttribute("style", `left:${left}px`);
protyle.background.element.querySelector(".protyle-background__img .protyle-icons").setAttribute("style", `right:${left}px`);
}
if (protyle.options.render.title) {
protyle.title.element.style.margin = `16px ${min16}px 0 ${min24}px`;
}
if (window.siyuan.config.editor.codeSyntaxHighlightLineNum) {
setTimeout(() => { // https://github.com/siyuan-note/siyuan/issues/5612
protyle.wysiwyg.element.querySelectorAll('.code-block [contenteditable="true"]').forEach((block: HTMLElement) => {
lineNumberRender(block);
});
}, 300);
protyle.title.element.style.margin = `16px ${left}px 0 ${right}px`;
}
if (window.siyuan.config.editor.displayBookmarkIcon) {
const editorAttrElement = document.getElementById("editorAttr");
if (editorAttrElement) {
editorAttrElement.innerHTML = `.protyle-wysiwyg--attr .b3-tooltips:after { max-width: ${protyle.wysiwyg.element.clientWidth - min16 - min24}px; }`;
editorAttrElement.innerHTML = `.protyle-wysiwyg--attr .b3-tooltips:after { max-width: ${protyle.wysiwyg.element.clientWidth - left - right}px; }`;
}
}
const oldWidth = protyle.wysiwyg.element.getAttribute("data-realwidth");
const newWidth = protyle.wysiwyg.element.clientWidth - parseInt(protyle.wysiwyg.element.style.paddingLeft) - parseInt(protyle.wysiwyg.element.style.paddingRight)
protyle.wysiwyg.element.setAttribute("data-realwidth", newWidth.toString());
return {
width: Math.abs(parseInt(oldWidth) - newWidth),
padding: Math.abs(oldLeft - parseInt(protyle.wysiwyg.element.style.paddingLeft))
};
};

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

@ -2,14 +2,15 @@ import {hideElements} from "../ui/hideElements";
import {setPadding} from "../ui/initUI";
import {hasClosestBlock} from "./hasClosest";
import {Constants} from "../../constants";
import {lineNumberRender} from "../render/highlightRender";
export const resize = (protyle: IProtyle) => {
hideElements(["gutter"], protyle);
if (setPadding(protyle)) {
return;
}
const abs = setPadding(protyle);
const MIN_ABS = 4;
// 不能 clearTimeout，否则 split 时左侧无法 resize
window.setTimeout(() => {
setTimeout(() => {
if (abs.width > MIN_ABS || isNaN(abs.width)) {
if (typeof echarts !== "undefined") {
protyle.wysiwyg.element.querySelectorAll('[data-subtype="echarts"], [data-subtype="mindmap"]').forEach((chartItem: HTMLElement) => {
const chartInstance = echarts.getInstanceById(chartItem.firstElementChild.nextElementSibling.getAttribute("_echarts_instance_"));
@ -18,19 +19,11 @@ export const resize = (protyle: IProtyle) => {
}
});
}
protyle.wysiwyg.element.querySelectorAll(".av").forEach((item: HTMLElement) => {
item.style.width = item.parentElement.clientWidth + "px";
if (item.getAttribute("data-render") === "true") {
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;
}
if (window.siyuan.config.editor.codeSyntaxHighlightLineNum) {
protyle.wysiwyg.element.querySelectorAll('.code-block [contenteditable="true"]').forEach((block: HTMLElement) => {
lineNumberRender(block);
});
}
// 保持光标位置不变 https://ld246.com/article/1673704873983/comment/1673765814595#comments
if (!protyle.disabled && protyle.toolbar.range) {
let rangeRect = protyle.toolbar.range.getBoundingClientRect();
@ -48,5 +41,21 @@ export const resize = (protyle: IProtyle) => {
protyle.toolbar.range.startContainer.parentElement.scrollIntoView(protyleRect.top > rangeRect.top);
}
}
}
if (abs.padding > MIN_ABS || abs.width > MIN_ABS || isNaN(abs.padding)) {
protyle.wysiwyg.element.querySelectorAll(".av").forEach((item: HTMLElement) => {
item.style.width = item.parentElement.clientWidth + "px";
if (item.getAttribute("data-render") === "true") {
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;
}
});
}
}, Constants.TIMEOUT_TRANSITION); // 等待 setPadding 动画结束
};

4
app/src/protyle/util/setEditMode.ts
View file

@ -2,6 +2,7 @@ import {setPadding} from "../ui/initUI";
import {hideElements} from "../ui/hideElements";
import {getAllModels} from "../../layout/getAll";
import {updateOutline} from "../../editor/util";
import {resize} from "./resize";
export const setEditMode = (protyle: IProtyle, type: TEditorMode) => {
if (type === "preview") {
@ -17,11 +18,9 @@ export const setEditMode = (protyle: IProtyle, type: TEditorMode) => {
}
protyle.preview.render(protyle);
} else if (type === "wysiwyg") {
setPadding(protyle);
if (!protyle.contentElement.classList.contains("fn__none")) {
return;
}
protyle.preview.element.classList.add("fn__none");
protyle.contentElement.classList.remove("fn__none");
if (protyle.options.render.scroll) {
@ -34,6 +33,7 @@ export const setEditMode = (protyle: IProtyle, type: TEditorMode) => {
/// #if !MOBILE
updateOutline(getAllModels(), protyle, true);
/// #endif
resize(protyle);
}
hideElements(["gutter", "toolbar", "select", "hint", "util"], protyle);
};

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

@ -120,14 +120,14 @@ export class WYSIWYG {
const ialKeys = Object.keys(ial);
for (let i = 0; i < this.element.attributes.length; i++) {
const oldKey = this.element.attributes[i].nodeName;
if (!["type", "class", "spellcheck", "contenteditable", "data-doc-type", "style", "scroll"].includes(oldKey) &&
if (!["type", "class", "spellcheck", "contenteditable", "data-doc-type", "style", "scroll", "data-realwidth"].includes(oldKey) &&
!ialKeys.includes(oldKey)) {
this.element.removeAttribute(oldKey);
i--;
}
}
ialKeys.forEach((key: string) => {
if (!["title-img", "title", "updated", "icon", "id", "type", "class", "spellcheck", "contenteditable", "data-doc-type", "style"].includes(key)) {
if (!["title-img", "title", "updated", "icon", "id", "type", "class", "spellcheck", "contenteditable", "data-doc-type", "style", "data-realwidth"].includes(key)) {
this.element.setAttribute(key, ial[key]);
}
});

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

@ -19,6 +19,7 @@ import {reloadProtyle} from "../util/reload";
import {countBlockWord} from "../../layout/status";
import {needLogin, needSubscribe} from "../../util/needSubscribe";
import {setPadding} from "../ui/initUI";
import {resize} from "../util/resize";
const removeTopElement = (updateElement: Element, protyle: IProtyle) => {
// 移动到其他文档中，该块需移除
@ -505,7 +506,7 @@ export const onTransaction = (protyle: IProtyle, operation: IOperation, isUndo:
}
protyle.wysiwyg.renderCustom(attrsResult);
if (data.new[Constants.CUSTOM_SY_FULLWIDTH] !== data.old[Constants.CUSTOM_SY_FULLWIDTH]) {
setPadding(protyle);
resize(protyle);
}
if (data.new[Constants.CUSTOM_SY_READONLY] !== data.old[Constants.CUSTOM_SY_READONLY]) {
let customReadOnly = data.new[Constants.CUSTOM_SY_READONLY];

7
app/src/search/util.ts
View file

@ -31,6 +31,7 @@ import {
renderPreview,
toggleAssetHistory
} from "./assets";
import {resize} from "../protyle/util/resize";
const toggleReplaceHistory = (replaceHistoryElement: Element, historyElement: Element, replaceInputElement: HTMLInputElement) => {
if (replaceHistoryElement.classList.contains("fn__none")) {
@ -320,7 +321,7 @@ export const genSearch = (app: App, config: ISearchOption, element: Element, clo
window.siyuan.storage[Constants.LOCAL_SEARCHKEYS][direction === "lr" ? (closeCB ? "col" : "colTab") : (closeCB ? "row" : "rowTab")] = nextElement[direction === "lr" ? "clientWidth" : "clientHeight"] + "px";
setStorageVal(Constants.LOCAL_SEARCHKEYS, window.siyuan.storage[Constants.LOCAL_SEARCHKEYS]);
if (direction === "lr") {
setPadding(edit.protyle);
resize(edit.protyle);
}
};
});
@ -589,7 +590,7 @@ export const genSearch = (app: App, config: ISearchOption, element: Element, clo
} else {
edit.protyle.element.classList.add("fn__flex-1");
}
setPadding(edit.protyle);
resize(edit.protyle);
if (isPopover) {
localData.layout = 0;
} else {
@ -610,7 +611,7 @@ export const genSearch = (app: App, config: ISearchOption, element: Element, clo
} else {
edit.protyle.element.classList.add("fn__flex-1");
}
setPadding(edit.protyle);
resize(edit.protyle);
if (isPopover) {
localData.layout = 1;
} else {