Skip to content

feat: add switch to reset to home point after dragging#218

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Wxh16144 wants to merge 6 commits into from
Closed

feat: add switch to reset to home point after dragging #218

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
d917ad7
feat: add switch to reset to home point after dragging
Wxh16144 Apr 7, 2023
4b96928
chore: update
Wxh16144 Apr 7, 2023
e573aba
feat: support preview - dragRebound control and add refresh operation…
suyi660 Apr 7, 2023
c0f9221
chore: update
Wxh16144 Apr 7, 2023
bd79848
chore: update logic
Wxh16144 Apr 7, 2023
650cd0e
test: update snap
Wxh16144 Apr 7, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/examples/basic.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -27,7 +27,7 @@ export default function Base() {
style={{
marginRight: 24,
}}
preview={{ mask: 'Click to Preview' }}
preview={{ mask: 'Click to Preview', resetPositionAfterDrag: false }}
/>
<Image
src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*ngiJQaLQELEAAAAAAAAAAABkARQnAQ"
Expand Down
6 changes: 6 additions & 0 deletions src/Image.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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;
Expand Down
11 changes: 9 additions & 2 deletions src/Operations.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -24,6 +24,7 @@ interface OperationsProps
scale: number;
onSwitchLeft: React.MouseEventHandler<HTMLDivElement>;
onSwitchRight: React.MouseEventHandler<HTMLDivElement>;
onRefresh: () => void;
onZoomIn: () => void;
onZoomOut: () => void;
onRotateRight: () => void;
Expand All@@ -49,14 +50,15 @@ const Operations: React.FC<OperationsProps> = (props) => {
onSwitchLeft,
onSwitchRight,
onClose,
onRefresh,
onZoomIn,
onZoomOut,
onRotateRight,
onRotateLeft,
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 = [
Expand All@@ -65,6 +67,11 @@ const Operations: React.FC<OperationsProps> = (props) => {
onClick: onClose,
type: 'close',
},
{
icon: refresh,
onClick: onRefresh,
type: 'refresh',
},
{
icon: zoomIn,
onClick: onZoomIn,
Expand DownExpand Up@@ -97,7 +104,7 @@ const Operations: React.FC<OperationsProps> = (props) => {
onClick: onFlipY,
type: 'flipY',
},
];
].filter((tool) => tool.icon !== undefined);

const operations = (
<>
Expand Down
12 changes: 12 additions & 0 deletions src/Preview.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -21,6 +21,7 @@ export interface PreviewProps extends Omit<IDialogPropTypes, 'onClose'> {
rotateRight?: React.ReactNode;
zoomIn?: React.ReactNode;
zoomOut?: React.ReactNode;
refresh?: React.ReactNode;
close?: React.ReactNode;
left?: React.ReactNode;
right?: React.ReactNode;
Expand All@@ -29,6 +30,7 @@ export interface PreviewProps extends Omit<IDialogPropTypes, 'onClose'> {
};
countRender?: (current: number, total: number) => string;
scaleStep?: number;
resetPositionAfterDrag?: boolean;
}

const Preview: React.FC<PreviewProps> = (props) => {
Expand All@@ -45,6 +47,7 @@ const Preview: React.FC<PreviewProps> = (props) => {
scaleStep = 0.5,
transitionName = 'zoom',
maskTransitionName = 'fade',
resetPositionAfterDrag = true,
...restProps
} = props;

Expand DownExpand Up@@ -74,6 +77,10 @@ const Preview: React.FC<PreviewProps> = (props) => {
resetTransform();
};

const onRefresh = ()=> {
resetTransform();
}

const onZoomIn = () => {
dispatchZoomChange(BASE_SCALE_RATIO + scaleStep);
};
Expand DownExpand Up@@ -118,6 +125,10 @@ const Preview: React.FC<PreviewProps> = (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;
Expand DownExpand Up@@ -298,6 +309,7 @@ const Preview: React.FC<PreviewProps> = (props) => {
onRotateLeft={onRotateLeft}
onFlipX={onFlipX}
onFlipY={onFlipY}
onRefresh={onRefresh}
onClose={onClose}
/>
</>
Expand Down
1 change: 0 additions & 1 deletion tests/__snapshots__/controlled.test.tsx.snap
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -5,7 +5,6 @@ exports[`Controlled With previewVisible 1`] = `
aria-modal="true"
class="rc-image-preview"
role="dialog"
style="display: none;"
>
<div
aria-hidden="true"
Expand Down
24 changes: 1 addition & 23 deletions tests/__snapshots__/preview.test.tsx.snap
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -75,29 +75,7 @@ exports[`Preview add rootClassName should be correct when open preview 1`] = `
>
<ul
class="rc-image-preview-operations"
>
<li
class="rc-image-preview-operations-operation rc-image-preview-operations-operation-close"
/>
<li
class="rc-image-preview-operations-operation rc-image-preview-operations-operation-zoomIn"
/>
<li
class="rc-image-preview-operations-operation rc-image-preview-operations-operation-zoomOut rc-image-preview-operations-operation-disabled"
/>
<li
class="rc-image-preview-operations-operation rc-image-preview-operations-operation-rotateRight"
/>
<li
class="rc-image-preview-operations-operation rc-image-preview-operations-operation-rotateLeft"
/>
<li
class="rc-image-preview-operations-operation rc-image-preview-operations-operation-flipX"
/>
<li
class="rc-image-preview-operations-operation rc-image-preview-operations-operation-flipY"
/>
</ul>
/>
</div>,
]
`;
1 change: 0 additions & 1 deletion tests/__snapshots__/previewGroup.test.tsx.snap
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -5,7 +5,6 @@ exports[`PreviewGroup With Controlled 1`] = `
aria-modal="true"
class="rc-image-preview"
role="dialog"
style="display: none;"
>
<div
aria-hidden="true"
Expand Down