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

🎨 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
Show stats 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: "",
type: "readonly",
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>`,
bind(element) {
const inputElement = element.querySelector("input");
@ -1188,11 +1188,11 @@ export const imgMenu = (protyle: IProtyle, range: Range, assetElement: HTMLEleme
rangeElement.value = "0";
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 = "";
});
inputElement.addEventListener("blur", () => {
if (inputElement.value === imgElement.style.width.replace("px", "")) {
if (inputElement.value === imgElement.parentElement.style.width.replace("px", "")) {
return;
}
nodeElement.setAttribute("updated", dayjs().format("YYYYMMDDHHmmss"));
@ -1212,13 +1212,14 @@ export const imgMenu = (protyle: IProtyle, range: Range, assetElement: HTMLEleme
}, {
iconHTML: "",
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"}">
<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">
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.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>`,
bind(element) {
rangeElement = element.querySelector("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.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);
imgElement.style.height = inputElement.value ? (inputElement.value + "px") : "";
imgElement.style.width = "";
imgElement.parentElement.style.width = "";
});
inputElement.addEventListener("blur", () => {
if (inputElement.value === imgElement.style.height.replace("px", "")) {
@ -1279,7 +1280,7 @@ export const imgMenu = (protyle: IProtyle, range: Range, assetElement: HTMLEleme
bind(element) {
rangeHeightElement = element.querySelector("input");
rangeHeightElement.addEventListener("input", () => {
imgElement.style.width = "";
imgElement.parentElement.style.width = "";
imgElement.style.height = rangeHeightElement.value + "vh";
rangeHeightElement.parentElement.setAttribute("aria-label", `${rangeHeightElement.value}%`);
});
@ -1819,7 +1820,7 @@ const genImageWidthMenu = (label: string, imgElement: HTMLElement, protyle: IPro
label,
click() {
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 = "";
updateTransaction(protyle, id, nodeElement.outerHTML, html);
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 ((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 {
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") {