From d917ad74cd0b7946d700f81b6708883674c10d3b Mon Sep 17 00:00:00 2001 From: wuxh Date: Fri, 7 Apr 2023 20:52:21 +0800 Subject: [PATCH 1/6] feat: add switch to reset to home point after dragging --- docs/examples/basic.tsx | 1 + src/Image.tsx | 8 ++++++++ src/Preview.tsx | 6 ++++++ 3 files changed, 15 insertions(+) diff --git a/docs/examples/basic.tsx b/docs/examples/basic.tsx index 12ce82c0..b0e5e92f 100644 --- a/docs/examples/basic.tsx +++ b/docs/examples/basic.tsx @@ -45,6 +45,7 @@ export default function Base() { src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" width={200} height={100} + resetPositionAfterDrag={false} /> ); diff --git a/src/Image.tsx b/src/Image.tsx index 11c284a9..308b9f9e 100644 --- a/src/Image.tsx +++ b/src/Image.tsx @@ -38,6 +38,12 @@ export interface ImageProps fallback?: string; rootClassName?: string; preview?: boolean | ImagePreviewType; + /** + * whether to reset the position after drag + * @default true + * @since 5.17.0 + */ + resetPositionAfterDrag?: boolean; /** * @deprecated since version 3.2.1 */ @@ -73,6 +79,7 @@ const ImageInternal: CompoundedComponent = ({ height, style, preview = true, + resetPositionAfterDrag = true, className, onClick, onError, @@ -286,6 +293,7 @@ const ImageInternal: CompoundedComponent = ({ icons={icons} scaleStep={scaleStep} rootClassName={rootClassName} + resetPositionAfterDrag={resetPositionAfterDrag} {...dialogProps} /> )} diff --git a/src/Preview.tsx b/src/Preview.tsx index c6f78932..ccd74dcb 100644 --- a/src/Preview.tsx +++ b/src/Preview.tsx @@ -29,6 +29,7 @@ export interface PreviewProps extends Omit { }; countRender?: (current: number, total: number) => string; scaleStep?: number; + resetPositionAfterDrag?: boolean; } const Preview: React.FC = (props) => { @@ -45,6 +46,7 @@ const Preview: React.FC = (props) => { scaleStep = 0.5, transitionName = 'zoom', maskTransitionName = 'fade', + resetPositionAfterDrag = true, ...restProps } = props; @@ -118,6 +120,10 @@ const Preview: React.FC = (props) => { if (visible && isMoving) { setMoving(false); + if(!resetPositionAfterDrag){ + return; + } + /** No need to restore the position when the picture is not moved, So as not to interfere with the click */ const { transformX, transformY } = downPositionRef.current; const hasChangedPosition = transform.x !== transformX && transform.y !== transformY; From 4b96928d01a6ec3e35add262e57e50fdf3fed77b Mon Sep 17 00:00:00 2001 From: wuxh Date: Fri, 7 Apr 2023 21:00:57 +0800 Subject: [PATCH 2/6] chore: update --- docs/examples/basic.tsx | 3 +-- src/Image.tsx | 14 ++++++-------- 2 files changed, 7 insertions(+), 10 deletions(-) diff --git a/docs/examples/basic.tsx b/docs/examples/basic.tsx index b0e5e92f..adb78dd9 100644 --- a/docs/examples/basic.tsx +++ b/docs/examples/basic.tsx @@ -27,7 +27,7 @@ export default function Base() { style={{ marginRight: 24, }} - preview={{ mask: 'Click to Preview' }} + preview={{ mask: 'Click to Preview', resetPositionAfterDrag: false }} /> ); diff --git a/src/Image.tsx b/src/Image.tsx index 308b9f9e..33073634 100644 --- a/src/Image.tsx +++ b/src/Image.tsx @@ -22,6 +22,12 @@ export interface ImagePreviewType maskClassName?: string; icons?: PreviewProps['icons']; scaleStep?: number; + /** + * whether to reset the position after drag + * @default true + * @since 5.17.0 + */ + resetPositionAfterDrag?: boolean; } let uuid = 0; @@ -38,12 +44,6 @@ export interface ImageProps fallback?: string; rootClassName?: string; preview?: boolean | ImagePreviewType; - /** - * whether to reset the position after drag - * @default true - * @since 5.17.0 - */ - resetPositionAfterDrag?: boolean; /** * @deprecated since version 3.2.1 */ @@ -79,7 +79,6 @@ const ImageInternal: CompoundedComponent = ({ height, style, preview = true, - resetPositionAfterDrag = true, className, onClick, onError, @@ -293,7 +292,6 @@ const ImageInternal: CompoundedComponent = ({ icons={icons} scaleStep={scaleStep} rootClassName={rootClassName} - resetPositionAfterDrag={resetPositionAfterDrag} {...dialogProps} /> )} From e573aba9a1f904d46fd89c580ed82745581454b4 Mon Sep 17 00:00:00 2001 From: suyi Date: Fri, 7 Apr 2023 14:16:19 +0700 Subject: [PATCH 3/6] feat: support preview - dragRebound control and add refresh operation (#216) (cherry picked from commit 670d17587fa15e7aa7118aff4384b86bf48a2fcf) # Conflicts: # src/Image.tsx # src/Preview.tsx --- docs/examples/basic.tsx | 4 ++++ src/Image.tsx | 2 ++ src/Operations.tsx | 9 ++++++++- src/Preview.tsx | 12 ++++++++++++ 4 files changed, 26 insertions(+), 1 deletion(-) diff --git a/docs/examples/basic.tsx b/docs/examples/basic.tsx index adb78dd9..bc0c6393 100644 --- a/docs/examples/basic.tsx +++ b/docs/examples/basic.tsx @@ -35,6 +35,10 @@ export default function Base() { style={{ marginRight: 24, }} + preview={{ + dragRebound: false, + mask: 'close drag rebound' + }} /> = ({ maskClassName, icons, scaleStep, + dragRebound, ...dialogProps }: ImagePreviewType = typeof preview === 'object' ? preview : {}; const src = previewSrc ?? imgSrc; @@ -288,6 +289,7 @@ const ImageInternal: CompoundedComponent = ({ mousePosition={mousePosition} src={mergedSrc} alt={alt} + dragRebound={dragRebound} getContainer={getPreviewContainer} icons={icons} scaleStep={scaleStep} diff --git a/src/Operations.tsx b/src/Operations.tsx index 606db304..f5faba6f 100644 --- a/src/Operations.tsx +++ b/src/Operations.tsx @@ -24,6 +24,7 @@ interface OperationsProps scale: number; onSwitchLeft: React.MouseEventHandler; onSwitchRight: React.MouseEventHandler; + onRefresh: ()=> void; onZoomIn: () => void; onZoomOut: () => void; onRotateRight: () => void; @@ -49,6 +50,7 @@ const Operations: React.FC = (props) => { onSwitchLeft, onSwitchRight, onClose, + onRefresh, onZoomIn, onZoomOut, onRotateRight, @@ -56,7 +58,7 @@ const Operations: React.FC = (props) => { onFlipX, onFlipY } = props; - const { rotateLeft, rotateRight, zoomIn, zoomOut, close, left, right, flipX, flipY } = icons; + const { rotateLeft, rotateRight, refresh, zoomIn, zoomOut, close, left, right, flipX, flipY } = icons; const toolClassName = `${prefixCls}-operations-operation`; const iconClassName = `${prefixCls}-operations-icon`; const tools = [ @@ -65,6 +67,11 @@ const Operations: React.FC = (props) => { onClick: onClose, type: 'close', }, + { + icon: refresh, + onClick: onRefresh, + type: 'refresh', + }, { icon: zoomIn, onClick: onZoomIn, diff --git a/src/Preview.tsx b/src/Preview.tsx index ccd74dcb..955ad3fd 100644 --- a/src/Preview.tsx +++ b/src/Preview.tsx @@ -21,6 +21,7 @@ export interface PreviewProps extends Omit { rotateRight?: React.ReactNode; zoomIn?: React.ReactNode; zoomOut?: React.ReactNode; + refresh?: React.ReactNode; close?: React.ReactNode; left?: React.ReactNode; right?: React.ReactNode; @@ -76,6 +77,16 @@ const Preview: React.FC = (props) => { resetTransform(); }; + const onRefresh = ()=> { + console.log('refresh'); + updateTransform({ + rotate: 0, + x: 0, + y: 0, + scale: 1, + }) + } + const onZoomIn = () => { dispatchZoomChange(BASE_SCALE_RATIO + scaleStep); }; @@ -304,6 +315,7 @@ const Preview: React.FC = (props) => { onRotateLeft={onRotateLeft} onFlipX={onFlipX} onFlipY={onFlipY} + onRefresh={onRefresh} onClose={onClose} /> From c0f9221abb7ed268b562dba945987dcaa545c1d7 Mon Sep 17 00:00:00 2001 From: wuxh Date: Fri, 7 Apr 2023 21:09:17 +0800 Subject: [PATCH 4/6] chore: update --- docs/examples/basic.tsx | 4 ---- src/Image.tsx | 2 -- src/Operations.tsx | 2 +- src/Preview.tsx | 8 +------- 4 files changed, 2 insertions(+), 14 deletions(-) diff --git a/docs/examples/basic.tsx b/docs/examples/basic.tsx index bc0c6393..adb78dd9 100644 --- a/docs/examples/basic.tsx +++ b/docs/examples/basic.tsx @@ -35,10 +35,6 @@ export default function Base() { style={{ marginRight: 24, }} - preview={{ - dragRebound: false, - mask: 'close drag rebound' - }} /> = ({ maskClassName, icons, scaleStep, - dragRebound, ...dialogProps }: ImagePreviewType = typeof preview === 'object' ? preview : {}; const src = previewSrc ?? imgSrc; @@ -289,7 +288,6 @@ const ImageInternal: CompoundedComponent = ({ mousePosition={mousePosition} src={mergedSrc} alt={alt} - dragRebound={dragRebound} getContainer={getPreviewContainer} icons={icons} scaleStep={scaleStep} diff --git a/src/Operations.tsx b/src/Operations.tsx index f5faba6f..8a9a5d87 100644 --- a/src/Operations.tsx +++ b/src/Operations.tsx @@ -24,7 +24,7 @@ interface OperationsProps scale: number; onSwitchLeft: React.MouseEventHandler; onSwitchRight: React.MouseEventHandler; - onRefresh: ()=> void; + onRefresh: () => void; onZoomIn: () => void; onZoomOut: () => void; onRotateRight: () => void; diff --git a/src/Preview.tsx b/src/Preview.tsx index 955ad3fd..36203833 100644 --- a/src/Preview.tsx +++ b/src/Preview.tsx @@ -78,13 +78,7 @@ const Preview: React.FC = (props) => { }; const onRefresh = ()=> { - console.log('refresh'); - updateTransform({ - rotate: 0, - x: 0, - y: 0, - scale: 1, - }) + resetTransform(); } const onZoomIn = () => { From bd79848f5d70180bc44b7783ca13faf1361deebe Mon Sep 17 00:00:00 2001 From: wuxh Date: Fri, 7 Apr 2023 21:24:11 +0800 Subject: [PATCH 5/6] chore: update logic --- src/Operations.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Operations.tsx b/src/Operations.tsx index 8a9a5d87..a6d0d2bc 100644 --- a/src/Operations.tsx +++ b/src/Operations.tsx @@ -104,7 +104,7 @@ const Operations: React.FC = (props) => { onClick: onFlipY, type: 'flipY', }, - ]; + ].filter((tool) => tool.icon !== undefined); const operations = ( <> From 650cd0ebe0ad5316301b7149526e597d490ba3b7 Mon Sep 17 00:00:00 2001 From: wuxh Date: Fri, 7 Apr 2023 21:25:22 +0800 Subject: [PATCH 6/6] test: update snap --- tests/__snapshots__/controlled.test.tsx.snap | 1 - tests/__snapshots__/preview.test.tsx.snap | 24 +------------------ .../__snapshots__/previewGroup.test.tsx.snap | 1 - 3 files changed, 1 insertion(+), 25 deletions(-) diff --git a/tests/__snapshots__/controlled.test.tsx.snap b/tests/__snapshots__/controlled.test.tsx.snap index 2e03b331..80235349 100644 --- a/tests/__snapshots__/controlled.test.tsx.snap +++ b/tests/__snapshots__/controlled.test.tsx.snap @@ -5,7 +5,6 @@ exports[`Controlled With previewVisible 1`] = ` aria-modal="true" class="rc-image-preview" role="dialog" - style="display: none;" > , ] `; diff --git a/tests/__snapshots__/previewGroup.test.tsx.snap b/tests/__snapshots__/previewGroup.test.tsx.snap index 9fc138fe..cf811b73 100644 --- a/tests/__snapshots__/previewGroup.test.tsx.snap +++ b/tests/__snapshots__/previewGroup.test.tsx.snap @@ -5,7 +5,6 @@ exports[`PreviewGroup With Controlled 1`] = ` aria-modal="true" class="rc-image-preview" role="dialog" - style="display: none;" >