Skip to content

Commit

Permalink
v0.0.7
Browse files Browse the repository at this point in the history 
图片缩放兼容 v3.1.14 格式
  • Loading branch information
@Misuzu2027
Misuzu2027 committed Dec 4, 2024
1 parent 56921e6 commit 31420b8
Show file tree
Hide file tree
Showing 5 changed files with 66 additions and 24 deletions.
2 changes: 1 addition & 1 deletion plugin.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"name": "syplugin-misuzu-custom",
"author": "Misuzu2027",
"url": "https://github.com/Misuzu2027/syplugin-misuzu-custom",
"version": "0.0.6",
"version": "0.0.7",
"minAppVersion": "3.0.14",
"backends": [
"all"
Expand Down
2 changes: 1 addition & 1 deletion public/i18n/en_US.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
"MiddleClickToggleDocTree": "Middle-click to expand/collapse notebooks or documents",
"Image": "Image",
"MiddleClickResizeImageWidth": "Middle-click to resize image width",
"MiddleClickResizeImageWidthDesc":"Units are required. Example: 200px. px: fixed width; vw: viewport percentage.",
"MiddleClickResizeImageWidthDesc":"Units are required. Example: 200px, px: fixed width; 25%, %: viewport percentage.",
"ZoomWidthLoadedImagesCurrentDocument": "Zoom the width of loaded images in the current document",
"ShowTopBatchZoomBtn": "Show a batch image zoom button at the top"
}
2 changes: 1 addition & 1 deletion public/i18n/zh_CN.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
"MiddleClickToggleDocTree":"中键展开/折叠笔记本或文档",
"Image":"图片",
"MiddleClickResizeImageWidth":"中键图片缩放宽度",
"MiddleClickResizeImageWidthDesc":"需要加上单位，例：200px。px:固定宽度；vw:视窗的比例。",
"MiddleClickResizeImageWidthDesc":"需要加上单位，例：200px，px:固定宽度；25%，%:视窗的比例。",
"ZoomWidthLoadedImagesCurrentDocument":"缩放当前文档已加载图片的宽度",
"ShowTopBatchZoomBtn":"顶部显示批量缩放图片按钮"
}
57 changes: 43 additions & 14 deletions src/components/img/ImageScalingService.ts
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@

import { EnvConfig } from "@/config/EnvConfig";
import { SettingService } from "@/service/SettingService";
import { hasClosestByTagName, isPixelOrViewportWidth } from "@/utils/html-util";
import { hasClosestByClassName, hasClosestByTagName, isPixelOrViewportWidth, isPxOrPercentWidth } from "@/utils/html-util";
import Instance from "@/utils/Instance";
import { confirmDialog, getActiveTab } from "@/utils/siyuan-util";
import { showMessage } from "siyuan";
import { isStrBlank } from "@/utils/string-util";
import { isStrBlank, isStrNotBlank } from "@/utils/string-util";

export class ImageScalingService {

Expand All @@ -31,11 +31,22 @@ export class ImageScalingService {
return;
}



let divElement = document.createElement("div");
const tipSpan = document.createElement("p");
tipSpan.textContent = EnvConfig.ins.plugin.i18n.MiddleClickResizeImageWidthDesc;
const brElement = document.createElement("br");
const widthInput = document.createElement("input");
widthInput.className = "b3-text-field fn__block";

confirmDialog(EnvConfig.ins.plugin.i18n.ZoomWidthLoadedImagesCurrentDocument
, widthInput, (): boolean => {
divElement.append(tipSpan);
divElement.append(brElement);
divElement.append(widthInput);
confirmDialog(
EnvConfig.ins.plugin.i18n.ZoomWidthLoadedImagesCurrentDocument
, divElement
, (): boolean => {
return batchUpdateCurDocImageWidth(widthInput.value);
});
}
Expand Down Expand Up @@ -93,8 +104,9 @@ function handleImageZoomMousedown(event: MouseEvent) {
let layoutTabContainerElement = clickElement.parentElement;

// 图片宽度，目前思源只支持 px,vw。
if (!isPixelOrViewportWidth(imageWidthValue)) {
if (!isPxOrPercentWidth(imageWidthValue)) {
showImageFaileMessage("宽度格式不正确");
event.preventDefault();
return;
}

Expand All @@ -107,8 +119,8 @@ function handleImageZoomMousedown(event: MouseEvent) {
}
layoutTabContainerElement = layoutTabContainerElement.parentElement;
}
// 默认只读模式
let isReadonly = true;
// 默认非只读模式
let isReadonly = false;
if (layoutTabContainerElement) {
let readonlyButton = layoutTabContainerElement.querySelector('[data-type="readonly"]');
if (readonlyButton) {
Expand All @@ -120,7 +132,7 @@ function handleImageZoomMousedown(event: MouseEvent) {
event.preventDefault();
return;
}
let flag = zoomImageWith(event.target as HTMLElement, imageWidthValue);
let flag = zoomImageWith(clickElement, imageWidthValue);
if (flag) {
event.preventDefault();
}
Expand All @@ -131,6 +143,9 @@ function handleImageZoomMousedown(event: MouseEvent) {


function zoomImageWith(target: HTMLElement, width: string): boolean {
if (!target || isStrBlank(width)) {
return;
}
// 创建一个 mousedown 事件
const mouseDownEvent = new MouseEvent('mousedown', {
bubbles: true, // 事件是否冒泡
Expand All @@ -144,16 +159,22 @@ function zoomImageWith(target: HTMLElement, width: string): boolean {
view: window // 视图环境
});

let imgElement = hasClosestByTagName(target, "img");
if (!imgElement) {
let imgParentSpanElement = hasClosestByTagName(target, "span");
if (!imgParentSpanElement) {
return;
}
let dragElement = imgElement.parentElement.querySelector(".protyle-action__drag");
let dragElement = imgParentSpanElement.parentElement.querySelector(".protyle-action__drag");
if (!dragElement) {
return;
}
let imgSpanElement = hasClosestByClassName(imgParentSpanElement, "img", "span");
if (imgSpanElement && isStrNotBlank(imgSpanElement.style.width)) {
imgSpanElement.removeAttribute('style')
// imgSpanElement.style.width = '';
}

dragElement.dispatchEvent(mouseDownEvent);
imgElement.style.width = width;
imgParentSpanElement.style.width = width;
dragElement.dispatchEvent(mouseUpEvent);
return true;
}
Expand Down Expand Up @@ -274,7 +295,7 @@ function batchUpdateCurDocImageWidth(width: string): boolean {
showImageFaileMessage("宽度为空");
return;
}
if (!isPixelOrViewportWidth(width)) {
if (!isPxOrPercentWidth(width)) {
showImageFaileMessage("宽度格式不正确");
return;
}
Expand All @@ -284,7 +305,7 @@ function batchUpdateCurDocImageWidth(width: string): boolean {
return;
}
// 默认只读模式
let isReadonly = true;
let isReadonly = false;
let readonlyButton = currentDocument.querySelector('[data-type="readonly"]');
if (readonlyButton) {
isReadonly = readonlyButton.querySelector("use").getAttribute("xlink:href") !== "#iconUnlock";
Expand Down Expand Up @@ -313,4 +334,12 @@ function showImageFaileMessage(reason: string) {
4000,
"info",
);
}

function showImageSuccessMessage(reason: string) {
showMessage(
`批量设置当前文档图片宽度完成！`,
3000,
"info",
);
}
27 changes: 20 additions & 7 deletions src/utils/html-util.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { isArrayEmpty } from "./array-util";
import { isStrBlank } from "./string-util";
import { isStrBlank, isStrNotBlank } from "./string-util";

export const escapeAttr = (html: string) => {
return html.replace(/"/g, """).replace(/'/g, "'");
Expand Down Expand Up @@ -275,15 +275,16 @@ export function hasClosestByTagName(element: HTMLElement | null, tagName: string
if (!element || isStrBlank(tagName)) {
return false;
}
let tagNameUpper = tagName.toUpperCase();
// 检查传入的元素是否存在，并且是否是标签名
if (element && element.tagName == tagName.toUpperCase()) {
if (element && element.tagName == tagNameUpper) {
return element;
}

// 如果没有找到，检查父级元素
while (element && element.parentElement && element.tagName !== "BODY") {
element = element.parentElement;
if (element.classList.contains(tagName)) {
if (element.tagName == tagNameUpper) {
return element;
}
}
Expand All @@ -293,13 +294,19 @@ export function hasClosestByTagName(element: HTMLElement | null, tagName: string



export function hasClosestByClassName(element: HTMLElement | null, className: string): HTMLElement | false {
export function hasClosestByClassName(element: HTMLElement | null, className: string, tagName?: string): HTMLElement | false {
if (!element || isStrBlank(className)) {
return false;
}
// 检查传入的元素是否存在，并且是否具有指定的类名
if (element && element.classList.contains(className)) {
return element;
if (element
&& element.classList.contains(className)
) {
if (isStrBlank(tagName)) {
return element;
} else if (element.tagName == tagName.toUpperCase()) {
return element;
}
}

// 如果没有找到，检查父级元素
Expand Down Expand Up @@ -335,6 +342,12 @@ export function hasClosestById(element: HTMLElement | null, id: string): HTMLEle
}

export function isPixelOrViewportWidth(str: string): boolean {
const regex = /^\d+(?:\.\d+)?(px|vw)$/;
const regex = /^\d+(?:\.\d+)?(px|vw|%)$/;
return regex.test(str);
}


export function isPxOrPercentWidth(str: string): boolean {
const regex = /^\d+(?:\.\d+)?(px|%)$/;
return regex.test(str);
}

0 comments on commit 31420b8

Please sign in to comment.