From a47aaa05314a1711bb0ba1fbc7cb332a9fda6624 Mon Sep 17 00:00:00 2001
From: liuzhikang <1739711875@qq.com>
Date: Thu, 13 Oct 2022 16:11:32 +0800
Subject: [PATCH] Feature:1.add onImagesClick function.(if you wish for only
 click the images without move event to close the Viewer)

---
 README.md            | 1 +
 src/ViewerCanvas.tsx | 7 +++++++
 src/ViewerCore.tsx   | 6 ++++++
 src/ViewerProps.ts   | 2 ++
 4 files changed, 16 insertions(+)

diff --git a/README.md b/README.md
index 851ac6532..a13c088b0 100644
--- a/README.md
+++ b/README.md
@@ -80,6 +80,7 @@ I'm sorry, ssr is not currently supported in `3.x`, it will be fixed in `4.0`.
 | rotatable    | boolean      | true    | whether to show 'rotate' button | false |
 | scalable     | boolean      | true    | whether to show 'scale' button | false |
 | onMaskClick  | (e) => void  |   -     | callback function when mask is clicked | false |
+| onImagesClick  | (e) => void  |   -     | callback function when over images is clicked but not move | false |
 | downloadable     | boolean      |  false  | whether to show 'download' | false |
 | noClose      | boolean      |  false  | to not render close button | false |
 | noNavbar     | boolean      |  false  | to not render the navbar | false |
diff --git a/src/ViewerCanvas.tsx b/src/ViewerCanvas.tsx
index 971c8803e..747401c53 100644
--- a/src/ViewerCanvas.tsx
+++ b/src/ViewerCanvas.tsx
@@ -20,6 +20,7 @@ export interface ViewerCanvasProps {
   drag: boolean;
   container: HTMLElement;
   onCanvasMouseDown: (e: React.MouseEvent<HTMLDivElement>) => void;
+  onImagesMouseDown: (e: React.MouseEvent<HTMLDivElement>) => void;
 }
 
 export interface ViewerCanvasState {
@@ -30,6 +31,7 @@ export interface ViewerCanvasState {
 
 export default function ViewerCanvas(props: ViewerCanvasProps) {
   const isMouseDown = React.useRef(false);
+  const isMouseMove = React.useRef(false);
   const prePosition = React.useRef({
     x: 0,
     y: 0,
@@ -107,11 +109,16 @@ export default function ViewerCanvas(props: ViewerCanvasProps) {
         x: e.clientX,
         y: e.clientY,
       });
+      isMouseMove.current = true
     }
   };
 
   function handleMouseUp(e) {
     isMouseDown.current = false;
+    if(!isMouseMove.current && props.onImagesMouseDown) {
+      props.onImagesMouseDown()
+    }
+    isMouseMove.current = false
   }
 
   function bindWindowResizeEvent(remove?: boolean) {
diff --git a/src/ViewerCore.tsx b/src/ViewerCore.tsx
index 7835332ad..2466b8024 100644
--- a/src/ViewerCore.tsx
+++ b/src/ViewerCore.tsx
@@ -58,6 +58,7 @@ export default (props: ViewerProps) => {
     rotatable = true,
     scalable = true,
     onMaskClick = noop,
+    onImagesClick = noop,
     changeable = true,
     customToolbar = (toolbars) => toolbars,
     zoomSpeed = .05,
@@ -461,6 +462,10 @@ export default (props: ViewerProps) => {
     onMaskClick(e);
   }
 
+  function handleImagesMouseDown(e) {
+    onImagesClick(e);
+  }
+
   function bindEvent(remove: boolean = false) {
     let funcName = 'addEventListener';
     if (remove) {
@@ -684,6 +689,7 @@ export default (props: ViewerProps) => {
         drag={drag}
         container={props.container}
         onCanvasMouseDown={handleCanvasMouseDown}
+        onImagesMouseDown={handleImagesMouseDown}
       />
       {props.noFooter || (
         <div className={`${prefixCls}-footer`} style={{ zIndex: zIndex + 5 }}>
diff --git a/src/ViewerProps.ts b/src/ViewerProps.ts
index ea1574be3..0d55db89c 100644
--- a/src/ViewerProps.ts
+++ b/src/ViewerProps.ts
@@ -48,6 +48,8 @@ interface ViewerProps {
   scalable?: boolean;
   /** callback function when mask is clicked */
   onMaskClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+  /** callback function when over images is clicked but not move */
+  onImagesClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
   /** 是否显示下载按钮 */
   downloadable?: boolean;
   /** 图片是否可循环 */