Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2025-12-23 10:00:13 +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 19:12:39 +08:00
parent 5228511bd3
commit d9a527a082
2 changed files with 12 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1180,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" style="margin: 4px 8px 4px 0" value="${imgElement.style.width.endsWith("px") ? parseInt(imgElement.style.width) : ""}" type="number" placeholder="${window.siyuan.languages.width}">px <input class="b3-text-field" style="margin: 4px 8px 4px 0" value="${imgElement.parentElement.style.width.endsWith("px") ? parseInt(imgElement.parentElement.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");
@ -1188,11 +1188,11 @@ export const imgMenu = (protyle: IProtyle, range: Range, assetElement: HTMLEleme
rangeElement.value = "0"; rangeElement.value = "0";
rangeElement.parentElement.setAttribute("aria-label", inputElement.value ? (inputElement.value + "px") : window.siyuan.languages.default); rangeElement.parentElement.setAttribute("aria-label", inputElement.value ? (inputElement.value + "px") : window.siyuan.languages.default);
imgElement.style.width = inputElement.value ? (inputElement.value + "px") : ""; imgElement.parentElement.style.width = inputElement.value ? (inputElement.value + "px") : "";
imgElement.style.height = ""; imgElement.style.height = "";
}); });
inputElement.addEventListener("blur", () => { inputElement.addEventListener("blur", () => {
if (inputElement.value === imgElement.style.width.replace("px", "")) { if (inputElement.value === imgElement.parentElement.style.width.replace("px", "")) {
return; return;
} }
nodeElement.setAttribute("updated", dayjs().format("YYYYMMDDHHmmss")); nodeElement.setAttribute("updated", dayjs().format("YYYYMMDDHHmmss"));
@ -1212,13 +1212,14 @@ 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 ? 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.parentElement.style.width ? imgElement.parentElement.style.width.replace("vw", "%") : window.siyuan.languages.default}" class="b3-tooltips b3-tooltips__n${isMobile() ? "" : " fn__size200"}">
<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"> <input style="box-sizing: border-box" value="${(imgElement.parentElement.style.width.endsWith("%")||imgElement.parentElement.style.width.endsWith("vw")) ? parseInt(imgElement.parentElement.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 + "%"; imgElement.parentElement.style.width = rangeElement.value + "%";
imgElement.style.height = "";
rangeElement.parentElement.setAttribute("aria-label", `${rangeElement.value}%`); rangeElement.parentElement.setAttribute("aria-label", `${rangeElement.value}%`);
}); });
rangeElement.addEventListener("change", () => { rangeElement.addEventListener("change", () => {
@ -1250,7 +1251,7 @@ 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") : "";
imgElement.style.width = ""; imgElement.parentElement.style.width = "";
}); });
inputElement.addEventListener("blur", () => { inputElement.addEventListener("blur", () => {
if (inputElement.value === imgElement.style.height.replace("px", "")) { if (inputElement.value === imgElement.style.height.replace("px", "")) {
@ -1279,7 +1280,7 @@ export const imgMenu = (protyle: IProtyle, range: Range, assetElement: HTMLEleme
bind(element) { bind(element) {
rangeHeightElement = element.querySelector("input"); rangeHeightElement = element.querySelector("input");
rangeHeightElement.addEventListener("input", () => { rangeHeightElement.addEventListener("input", () => {
imgElement.style.width = ""; imgElement.parentElement.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}%`);
}); });
@ -1819,7 +1820,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"));
imgElement.style.width = label === window.siyuan.languages.default ? "" : label; imgElement.parentElement.style.width = label === window.siyuan.languages.default ? "" : label;
imgElement.style.height = ""; imgElement.style.height = "";
updateTransaction(protyle, id, nodeElement.outerHTML, html); updateTransaction(protyle, id, nodeElement.outerHTML, html);
focusBlock(nodeElement); focusBlock(nodeElement);

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

@ -675,9 +675,9 @@ export class WYSIWYG {
} }
if (moveEvent.clientX > x - dragWidth + 8 && moveEvent.clientX < mostRight) { if (moveEvent.clientX > x - dragWidth + 8 && moveEvent.clientX < mostRight) {
if ((dragElement.tagName === "IMG" && !dragElement.parentElement.parentElement.style.minWidth && nodeElement.style.textAlign !== "center") || !isCenter) { if ((dragElement.tagName === "IMG" && !dragElement.parentElement.parentElement.style.minWidth && nodeElement.style.textAlign !== "center") || !isCenter) {
dragElement.style.width = Math.max(17, dragWidth + (moveEvent.clientX - x)) + "px"; dragElement.parentElement.style.width = Math.max(17, dragWidth + (moveEvent.clientX - x)) + "px";
} else { } else {
dragElement.style.width = Math.max(17, dragWidth + (moveEvent.clientX - x) * 2) + "px"; dragElement.parentElement.style.width = Math.max(17, dragWidth + (moveEvent.clientX - x) * 2) + "px";
} }
} }
if (dragElement.tagName !== "IMG") { if (dragElement.tagName !== "IMG") {