Feat(image_viewer): Support Drags Image (#1199)

Author: obgnail

README-cn.md

@@ -364,7 +364,7 @@ Typora 侧边栏的【文件】和【大纲】不能同时显示，为了解决
 
 一站式图片查看，并且提供简单图片编辑。
 
-![image-reviewer](./assets/image-reviewer.png)
+![image_viewer](./assets/image_viewer.png)
 
 ### static_markers
 

README.md

@@ -358,7 +358,7 @@ The rendering performance of large files in Typora is very poor. Use this plugin
 
 One-stop image viewing, and provides simple image editing.
 
-![image-reviewer](./assets/image-reviewer.png)
+![image_viewer](./assets/image_viewer.png)
 
 ### static_markers
 

assets/image-reviewer.png assets/image_viewer.pngassets/image-reviewer.png renamed to assets/image_viewer.png

@@ -34,6 +34,10 @@
   transition: transform 0.2s ease 0s;
 }
 
+#plugin-image-viewer .viewer-image.dragging {
+  transition: none !important;
+}
+
 #plugin-image-viewer .viewer-item {
   position: absolute;
   z-index: 99999;

plugin/global/styles/image_viewer.css

@@ -355,6 +355,8 @@ class ImageViewerPlugin extends BasePlugin {
   }
 
   process = () => {
+    this._handleImageInteraction()
+
     this.utils.eventHub.addEventListener(this.utils.eventHub.eventType.toggleSettingPage, hide => hide && this.close())
 
     if (this.config.CLICK_MASK_TO_EXIT) {
@@ -374,11 +376,6 @@ class ImageViewerPlugin extends BasePlugin {
       const fn = fnList[ev.deltaY > 0 ? 1 : 0]
       if (typeof fn === "function") fn()
     }, { passive: false })
-    this.entities.image.addEventListener("mousedown", ev => {
-      const fnList = this.getFnList(ev, "MOUSEDOWN")
-      const fn = fnList[ev.button]
-      if (typeof fn === "function") fn()
-    })
     this.entities.ops.addEventListener("click", ev => {
       const target = ev.target.closest("[option]")
       if (!target) return
@@ -406,6 +403,54 @@ class ImageViewerPlugin extends BasePlugin {
     }, { passive: true })
   }
 
+  _handleImageInteraction = () => {
+    const raf = this.utils.getRafManager()
+
+    this.entities.image.addEventListener("mousedown", ev => {
+      const executeAction = () => {
+        const fnList = this.getFnList(ev, "MOUSEDOWN")
+        const fn = fnList[ev.button]
+        if (typeof fn === "function") fn()
+      }
+
+      if (ev.button !== 0) {
+        executeAction()
+        return
+      }
+
+      ev.preventDefault()
+
+      let isMoved = false
+      const startX = ev.clientX
+      const startY = ev.clientY
+      const initialTx = this.operations.state.translateX
+      const initialTy = this.operations.state.translateY
+
+      this.entities.image.classList.add("dragging")
+
+      const onMouseMove = ev => {
+        const deltaX = ev.clientX - startX
+        const deltaY = ev.clientY - startY
+        if (!isMoved && Math.max(Math.abs(deltaX), Math.abs(deltaY)) > 3) isMoved = true
+        raf.schedule(() => {
+          this.operations.state.translateX = initialTx + deltaX
+          this.operations.state.translateY = initialTy + deltaY
+          this.operations.apply(false)
+        })
+      }
+      const onMouseUp = () => {
+        document.removeEventListener("mousemove", onMouseMove)
+        document.removeEventListener("mouseup", onMouseUp)
+        this.entities.image.classList.remove("dragging")
+        raf.cancel()
+        if (!isMoved) executeAction()
+      }
+
+      document.addEventListener("mousemove", onMouseMove)
+      document.addEventListener("mouseup", onMouseUp)
+    })
+  }
+
   getFnList = (ev, method) => {
     const modifiers = []
     if (this.utils.metaKeyPressed(ev)) modifiers.push("CTRL")