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

🎨 https://github.com/siyuan-note/siyuan/issues/12516

Browse source
This commit is contained in:
Vanessa 2024-11-28 11:14:26 +08:00
parent cc6a92e5a1
commit 0d161fdaeb
3 changed files with 23 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

8
app/src/assets/scss/component/_typography.scss
View file

@ -441,14 +441,18 @@
} }
.protyle-action__title { .protyle-action__title {
width: 100%; display: flex;
display: block;
font-size: 85%; font-size: 85%;
color: var(--b3-theme-on-surface); color: var(--b3-theme-on-surface);
word-break: break-word; word-break: break-word;
white-space: break-spaces; white-space: break-spaces;
line-height: normal; line-height: normal;
padding: 4px 0; padding: 4px 0;
& > span {
flex-grow: 1;
width: 0;
}
} }
} }

30
app/src/menus/protyle.ts
View file

@ -1173,7 +1173,6 @@ export const imgMenu = (protyle: IProtyle, range: Range, assetElement: HTMLEleme
alignImgLeft(protyle, nodeElement, [assetElement], id, html); alignImgLeft(protyle, nodeElement, [assetElement], id, html);
} }
}).element); }).element);
const width = imgElement.style.width.endsWith("vw") ? parseInt(imgElement.style.width) : 0;
let rangeElement: HTMLInputElement; let rangeElement: HTMLInputElement;
window.siyuan.menus.menu.append(new MenuItem({ window.siyuan.menus.menu.append(new MenuItem({
label: window.siyuan.languages.width, label: window.siyuan.languages.width,
@ -1181,7 +1180,7 @@ export const imgMenu = (protyle: IProtyle, range: Range, assetElement: HTMLEleme
iconHTML: "", iconHTML: "",
type: "readonly", type: "readonly",
label: `<div class="fn__flex-center"> label: `<div class="fn__flex-center">
<input class="b3-text-field" value="${imgElement.style.width.endsWith("px") ? parseInt(imgElement.style.width) : ""}" type="number" style="margin: 4px" placeholder="${window.siyuan.languages.width}"> px <input class="b3-text-field" style="margin: 4px 8px 4px 0" value="${imgElement.style.width.endsWith("px") ? parseInt(imgElement.style.width) : ""}" type="number" placeholder="${window.siyuan.languages.width}">px
</div>`, </div>`,
bind(element) { bind(element) {
const inputElement = element.querySelector("input"); const inputElement = element.querySelector("input");
@ -1213,13 +1212,13 @@ export const imgMenu = (protyle: IProtyle, range: Range, assetElement: HTMLEleme
}, { }, {
iconHTML: "", iconHTML: "",
type: "readonly", type: "readonly",
label: `<div style="margin: 4px 0;" aria-label="${imgElement.style.width.endsWith("px") ? imgElement.style.width : (imgElement.style.width?.replace("vw", "%") || window.siyuan.languages.default)}" class="b3-tooltips b3-tooltips__n${isMobile() ? "" : " fn__size200"}"> label: `<div style="margin: 4px 0;" aria-label="${imgElement.style.width ? imgElement.style.width.replace("vw", "%") : window.siyuan.languages.default}" class="b3-tooltips b3-tooltips__n${isMobile() ? "" : " fn__size200"}">
<input style="box-sizing: border-box" value="${width}" class="b3-slider fn__block" max="100" min="1" step="1" type="range"> <input style="box-sizing: border-box" value="${(imgElement.style.width.endsWith("%")||imgElement.style.width.endsWith("vw")) ? parseInt(imgElement.style.width) : 0}" class="b3-slider fn__block" max="100" min="1" step="1" type="range">
</div>`, </div>`,
bind(element) { bind(element) {
rangeElement = element.querySelector("input"); rangeElement = element.querySelector("input");
rangeElement.addEventListener("input", () => { rangeElement.addEventListener("input", () => {
imgElement.style.width = rangeElement.value + "vw"; imgElement.style.width = rangeElement.value + "%";
rangeElement.parentElement.setAttribute("aria-label", `${rangeElement.value}%`); rangeElement.parentElement.setAttribute("aria-label", `${rangeElement.value}%`);
}); });
rangeElement.addEventListener("change", () => { rangeElement.addEventListener("change", () => {
@ -1236,14 +1235,13 @@ export const imgMenu = (protyle: IProtyle, range: Range, assetElement: HTMLEleme
] ]
}).element); }).element);
let rangeHeightElement: HTMLInputElement; let rangeHeightElement: HTMLInputElement;
const height = imgElement.style.height.endsWith("vh") ? parseInt(imgElement.style.height) : 0;
window.siyuan.menus.menu.append(new MenuItem({ window.siyuan.menus.menu.append(new MenuItem({
label: window.siyuan.languages.height, label: window.siyuan.languages.height,
submenu: [{ submenu: [{
iconHTML: "", iconHTML: "",
type: "readonly", type: "readonly",
label: `<div class="fn__flex-center"> label: `<div class="fn__flex-center">
<input class="b3-text-field" value="${imgElement.style.height.endsWith("px") ? parseInt(imgElement.style.height) : ""}" type="number" style="margin: 4px" placeholder="${window.siyuan.languages.height}"> px <input class="b3-text-field" value="${imgElement.style.height.endsWith("px") ? parseInt(imgElement.style.height) : ""}" type="number" style="margin: 4px 8px 4px 0" placeholder="${window.siyuan.languages.height}">px
</div>`, </div>`,
bind(element) { bind(element) {
const inputElement = element.querySelector("input"); const inputElement = element.querySelector("input");
@ -1252,7 +1250,6 @@ export const imgMenu = (protyle: IProtyle, range: Range, assetElement: HTMLEleme
rangeHeightElement.parentElement.setAttribute("aria-label", inputElement.value ? (inputElement.value + "px") : window.siyuan.languages.default); rangeHeightElement.parentElement.setAttribute("aria-label", inputElement.value ? (inputElement.value + "px") : window.siyuan.languages.default);
imgElement.style.height = inputElement.value ? (inputElement.value + "px") : ""; imgElement.style.height = inputElement.value ? (inputElement.value + "px") : "";
assetElement.style.width = "";
imgElement.style.width = ""; imgElement.style.width = "";
}); });
inputElement.addEventListener("blur", () => { inputElement.addEventListener("blur", () => {
@ -1276,13 +1273,12 @@ export const imgMenu = (protyle: IProtyle, range: Range, assetElement: HTMLEleme
}, { }, {
iconHTML: "", iconHTML: "",
type: "readonly", type: "readonly",
label: `<div style="margin: 4px 0;" aria-label="${imgElement.style.height.endsWith("vh") ? parseInt(imgElement.style.height) + "%" : (imgElement.style.height || window.siyuan.languages.default)}" class="b3-tooltips b3-tooltips__n${isMobile() ? "" : " fn__size200"}"> label: `<div style="margin: 4px 0;" aria-label="${imgElement.style.height ? imgElement.style.height.replace("vh", "%") : window.siyuan.languages.default}" class="b3-tooltips b3-tooltips__n${isMobile() ? "" : " fn__size200"}">
<input style="box-sizing: border-box" value="${height}" class="b3-slider fn__block" max="100" min="1" step="1" type="range"> <input style="box-sizing: border-box" value="${imgElement.style.height.endsWith("vh") ? parseInt(imgElement.style.height) : 0}" class="b3-slider fn__block" max="100" min="1" step="1" type="range">
</div>`, </div>`,
bind(element) { bind(element) {
rangeHeightElement = element.querySelector("input"); rangeHeightElement = element.querySelector("input");
rangeHeightElement.addEventListener("input", () => { rangeHeightElement.addEventListener("input", () => {
assetElement.style.width = "";
imgElement.style.width = ""; imgElement.style.width = "";
imgElement.style.height = rangeHeightElement.value + "vh"; imgElement.style.height = rangeHeightElement.value + "vh";
rangeHeightElement.parentElement.setAttribute("aria-label", `${rangeHeightElement.value}%`); rangeHeightElement.parentElement.setAttribute("aria-label", `${rangeHeightElement.value}%`);
@ -1823,11 +1819,7 @@ const genImageWidthMenu = (label: string, imgElement: HTMLElement, protyle: IPro
label, label,
click() { click() {
nodeElement.setAttribute("updated", dayjs().format("YYYYMMDDHHmmss")); nodeElement.setAttribute("updated", dayjs().format("YYYYMMDDHHmmss"));
if (label === window.siyuan.languages.default) { imgElement.style.width = label === window.siyuan.languages.default ? "" : label;
imgElement.style.width = "";
} else {
imgElement.style.width = label.replace("%", "vw");
}
imgElement.style.height = ""; imgElement.style.height = "";
updateTransaction(protyle, id, nodeElement.outerHTML, html); updateTransaction(protyle, id, nodeElement.outerHTML, html);
focusBlock(nodeElement); focusBlock(nodeElement);
@ -1841,11 +1833,7 @@ const genImageHeightMenu = (label: string, imgElement: HTMLElement, protyle: IPr
label, label,
click() { click() {
nodeElement.setAttribute("updated", dayjs().format("YYYYMMDDHHmmss")); nodeElement.setAttribute("updated", dayjs().format("YYYYMMDDHHmmss"));
if (label === window.siyuan.languages.default) { imgElement.style.height = label === window.siyuan.languages.default ? "" : parseInt(label) + "vh";
imgElement.style.height = "";
} else {
imgElement.style.height = parseInt(label) + "vh";
}
imgElement.style.width = ""; imgElement.style.width = "";
updateTransaction(protyle, id, nodeElement.outerHTML, html); updateTransaction(protyle, id, nodeElement.outerHTML, html);
focusBlock(nodeElement); focusBlock(nodeElement);

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

@ -671,7 +671,6 @@ export class WYSIWYG {
const dragHeight = dragElement.clientHeight; const dragHeight = dragElement.clientHeight;
documentSelf.onmousemove = (moveEvent: MouseEvent) => { documentSelf.onmousemove = (moveEvent: MouseEvent) => {
if (dragElement.tagName === "IMG") { if (dragElement.tagName === "IMG") {
dragElement.parentElement.parentElement.style.width = "";
dragElement.style.height = ""; dragElement.style.height = "";
} }
if (moveEvent.clientX > x - dragWidth + 8 && moveEvent.clientX < mostRight) { if (moveEvent.clientX > x - dragWidth + 8 && moveEvent.clientX < mostRight) {
@ -772,11 +771,11 @@ export class WYSIWYG {
} }
// 多选节点 // 多选节点
let x = event.clientX; let clentX = event.clientX;
if (event.clientX > mostRight) { if (event.clientX > mostRight) {
x = mostRight; clentX = mostRight;
} else if (event.clientX < mostLeft) { } else if (event.clientX < mostLeft) {
x = mostLeft; clentX = mostLeft;
} }
const mostTop = rect.top + (protyle.options.render.breadcrumb ? protyle.breadcrumb.element.parentElement.clientHeight : 0); const mostTop = rect.top + (protyle.options.render.breadcrumb ? protyle.breadcrumb.element.parentElement.clientHeight : 0);
@ -880,7 +879,7 @@ export class WYSIWYG {
let newLeft = 0; let newLeft = 0;
let newWidth = 0; let newWidth = 0;
let newHeight = 0; let newHeight = 0;
if (moveEvent.clientX < x) { if (moveEvent.clientX < clentX) {
if (moveEvent.clientX < mostLeft) { if (moveEvent.clientX < mostLeft) {
// 向左越界 // 向左越界
newLeft = mostLeft; newLeft = mostLeft;
@ -888,16 +887,16 @@ export class WYSIWYG {
// 向左 // 向左
newLeft = moveEvent.clientX; newLeft = moveEvent.clientX;
} }
newWidth = x - newLeft; newWidth = clentX - newLeft;
} else { } else {
if (moveEvent.clientX > mostRight) { if (moveEvent.clientX > mostRight) {
// 向右越界 // 向右越界
newLeft = x; newLeft = clentX;
newWidth = mostRight - newLeft; newWidth = mostRight - newLeft;
} else { } else {
// 向右 // 向右
newLeft = x; newLeft = clentX;
newWidth = moveEvent.clientX - x; newWidth = moveEvent.clientX - clentX;
} }
} }