update resize_image: support PERSISTENT resize

obgnail · Sep 30, 2024 · e2759cf · e2759cf
1 parent 0bbc22a
commit e2759cf
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 12 deletions.
diff --git a/plugin/global/settings/settings.default.toml b/plugin/global/settings/settings.default.toml
@@ -336,10 +336,11 @@ ENABLE = true
 NAME = "图片调整"
 # 是否在右键菜单中可点击
 CLICKABLE = true
-# 修饰键
-MODIFIER_KEY = "alt"
-# 每次操作的缩放倍率
-SCALE = 0.1
+# 各个功能对应的修饰键（为空则不使用对应的功能）
+#   - TEMPORARY  : 临时修改图片大小
+#   - PERSISTENT : 将图片转为HTML格式，永久修改图片大小
+# 举例：【TEMPORARY = "alt"】：当鼠标悬停于图片，并且【alt+滚轮】后，就会临时修改图片大小
+MODIFIER_KEY = { TEMPORARY = "alt", PERSISTENT = "" }
 # 允许图片超出范围
 ALLOW_OVERSIZE = true
 # 图片水平位置：center/left/right

diff --git a/plugin/resize_image.js b/plugin/resize_image.js
@@ -1,17 +1,23 @@
 class resizeImagePlugin extends BasePlugin {
+    init = () => {
+        this.checklist = Object.entries(this.config.MODIFIER_KEY)
+            .filter(([_, modifier]) => Boolean(modifier))
+            .map(([type, modifier]) => ({ type, checker: this.utils.modifierKey(modifier) }))
+    }
+
     process = () => {
         this.utils.autoSaveConfig(this);
         this.recordResizeState(false);
 
-        const checker = this.utils.modifierKey(this.config.MODIFIER_KEY);
         this.utils.entities.eWrite.addEventListener("wheel", ev => {
-            if (!checker(ev)) return;
+            const zoom = this.checklist.find(e => e.checker(ev));
+            if (!zoom) return;
             const target = ev.target.closest("img");
             if (!target) return;
             ev.preventDefault();
             ev.stopPropagation();
-            const zoomOut = ev.deltaY > 0;
-            this.zoom(target, zoomOut, this.config.SCALE);
+            const zoomFunc = zoom.type === "TEMPORARY" ? this.zoomTemporary : this.zoomPersistent;
+            zoomFunc(target, ev.deltaY > 0);
         }, { passive: false, capture: true });
     }
 
@@ -60,9 +66,9 @@ class resizeImagePlugin extends BasePlugin {
         }
     }
 
-    zoom = (image, zoomOut, scale) => {
+    zoomTemporary = (image, zoomOut, scale = 0.1) => {
         let width = this.getWidth(image);
-        width = zoomOut ? width * (1 - scale) : width * (1 + this.config.SCALE);
+        width = zoomOut ? width * (1 - scale) : width * (1 + scale);
         const maxWidth = image.parentElement.offsetWidth;
         image.style.maxWidth = "";
 
@@ -80,6 +86,16 @@ class resizeImagePlugin extends BasePlugin {
         }
     }
 
+    zoomPersistent = (image, zoomOut, scale = 5) => {
+        const originZoom = image.style.zoom || "100%";
+        const nextZoom = Math.max(10, Math.min(parseInt(originZoom) + (zoomOut ? -scale : scale), 200)) + "%";
+        Object.assign(image.style, { position: "", width: "", maxWidth: "", left: "" });
+        const $span = $(image.closest(".md-image.md-img-loaded"));
+        if ($span.length === 1) {
+            File.editor.imgEdit.zoomAction($span, nextZoom);
+        }
+    }
+
     dynamicCallArgsGenerator = (anchorNode, meta) => {
         const args = [
             { arg_name: "记住图片放缩状态", arg_value: "record_resize_state", arg_state: this.config.RECORD_RESIZE },
@@ -109,8 +125,8 @@ class resizeImagePlugin extends BasePlugin {
         const callMap = {
             record_resize_state: () => this.recordResizeState(),
             allow_oversize: () => this.resetImageSize(),
-            zoom_out_20_percent: meta => this.zoom(meta.target, true, 0.2),
-            zoom_in_20_percent: meta => this.zoom(meta.target, false, 0.2),
+            zoom_out_20_percent: meta => this.zoomTemporary(meta.target, true, 0.2),
+            zoom_in_20_percent: meta => this.zoomTemporary(meta.target, false, 0.2),
             set_align_left: meta => this.setAlign("left", meta.target),
             set_align_center: meta => this.setAlign("center", meta.target),
             set_align_right: meta => this.setAlign("right", meta.target),