Skip to content

Commit

Permalink
🎨 #12516
Browse files Browse the repository at this point in the history
  • Loading branch information
@Vanessa219
Vanessa219 committed Nov 28, 2024
1 parent 5228511 commit d9a527a
Show file tree
Hide file tree
Showing 2 changed files with 12 additions and 11 deletions.
19 changes: 10 additions & 9 deletions app/src/menus/protyle.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1180,19 +1180,19 @@ 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");
inputElement.addEventListener("input", () => {
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"));
Expand All @@ -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", () => {
Expand Down Expand Up @@ -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", "")) {
Expand Down Expand Up @@ -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}%`);
});
Expand Down Expand Up @@ -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);
Expand Down
4 changes: 2 additions & 2 deletions app/src/protyle/wysiwyg/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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") {
Expand Down

0 comments on commit d9a527a

Please sign in to comment.