From 94f69ed9ca2cc1bbfb26fa22596d3b522d82780d Mon Sep 17 00:00:00 2001
From: Kigoal <i@kigoal.cc>
Date: Sun, 10 Oct 2021 00:08:10 +0800
Subject: [PATCH] feat(image): esc keyboard support & dblclick event (#1247)

* feat(image):support `Escape` shortcut key

* feat(image):modify `n-image-preview-container` css `position` to `fixed`

* feat(image):support `Escape` shortcut key

* feat(image):support `double-click` zoom in and out

* feat(image):support `double-click` zoom in and out

* feat(image):support `double-click` zoom in and out
---
 src/image/src/ImagePreview.tsx     | 9 +++++++++
 src/image/src/styles/index.cssr.ts | 2 +-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/image/src/ImagePreview.tsx b/src/image/src/ImagePreview.tsx
index 8ba764505..4098d0101 100644
--- a/src/image/src/ImagePreview.tsx
+++ b/src/image/src/ImagePreview.tsx
@@ -81,6 +81,9 @@ export default defineComponent({
         case 'ArrowRight':
           props.onNext?.()
           break
+        case 'Escape':
+          toggleShow()
+          break
       }
     }
 
@@ -149,6 +152,10 @@ export default defineComponent({
       on('mousemove', document, handleMouseMove)
       on('mouseup', document, handleMouseUp)
     }
+    function handlePreviewDblclick (): void {
+      scale = scale === 1 ? 2 : 1
+      derivePreviewStyle()
+    }
 
     let scale = 1
     let rotate = 0
@@ -230,6 +237,7 @@ export default defineComponent({
       appear: useIsMounted(),
       displayed: displayedRef,
       handlePreviewMousedown,
+      handlePreviewDblclick,
       syncTransformOrigin,
       handleAfterLeave: () => {
         rotate = 0
@@ -363,6 +371,7 @@ export default defineComponent({
                                 <img
                                   draggable={false}
                                   onMousedown={this.handlePreviewMousedown}
+                                  onDblclick={this.handlePreviewDblclick}
                                   class={`${clsPrefix}-image-preview`}
                                   key={this.previewSrc}
                                   src={this.previewSrc}
diff --git a/src/image/src/styles/index.cssr.ts b/src/image/src/styles/index.cssr.ts
index c1f25b016..e00b215f8 100644
--- a/src/image/src/styles/index.cssr.ts
+++ b/src/image/src/styles/index.cssr.ts
@@ -10,7 +10,7 @@ export default c([
     cB('image-container', 'position: fixed;')
   ]),
   cB('image-preview-container', `
-    position: absolute;
+    position: fixed;
     left: 0;
     right: 0;
     top: 0;