Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Fixing zoom on pan issue. (#1474)

Browse Source 
* FIxing zoom on pan issue.

* Adding a disabled label to 1x zoom.

* Adding comments.

* Update PropertyPaneConfigResponse.tsx

Co-authored-by: Nikhil Nandagopal <nikhil.nandagopal@gmail.com>
Co-authored-by: Nikhil Nandagopal <nikhil@appsmith.com>
This commit is contained in:
satbir121 2020-11-02 15:21:14 +05:30 committed by GitHub
parent ac70e5be4d
commit 51cb0d82a2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 21 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
app/client/src/components/designSystems/appsmith/ImageComponent.tsx
View File

@ -52,8 +52,10 @@ class ImageComponent extends React.Component<
zoomingState: ZoomingState; zoomingState: ZoomingState;
} }
> { > {
isPanning: boolean;
constructor(props: ImageComponentProps) { constructor(props: ImageComponentProps) {
super(props); super(props);
this.isPanning = false;
this.state = { this.state = {
imageError: false, imageError: false,
zoomingState: ZoomingState.MAX_ZOOMED_OUT, zoomingState: ZoomingState.MAX_ZOOMED_OUT,
@ -61,7 +63,8 @@ class ImageComponent extends React.Component<
} }
render() { render() {
const { maxZoomLevel } = this.props; const { maxZoomLevel } = this.props;
const zoomActive = maxZoomLevel !== undefined && maxZoomLevel > 1; const zoomActive =
maxZoomLevel !== undefined && maxZoomLevel > 1 && !this.isPanning;
const isZoomingIn = this.state.zoomingState === ZoomingState.MAX_ZOOMED_OUT; const isZoomingIn = this.state.zoomingState === ZoomingState.MAX_ZOOMED_OUT;
let cursor = "inherit"; let cursor = "inherit";
if (zoomActive) { if (zoomActive) {
@ -74,6 +77,12 @@ class ImageComponent extends React.Component<
onPanningStart={() => { onPanningStart={() => {
this.props.disableDrag(true); this.props.disableDrag(true);
}} }}
onPanning={() => {
this.isPanning = true;
}}
onPanningStop={() => {
this.props.disableDrag(false);
}}
options={{ options={{
maxScale: maxZoomLevel, maxScale: maxZoomLevel,
disabled: !zoomActive, disabled: !zoomActive,
@ -85,14 +94,12 @@ class ImageComponent extends React.Component<
wheel={{ wheel={{
disabled: !zoomActive, disabled: !zoomActive,
}} }}
onPanningStop={() => {
this.props.disableDrag(false);
}}
doubleClick={{ doubleClick={{
disabled: true, disabled: true,
}} }}
onZoomChange={(zoom: any) => { onZoomChange={(zoom: any) => {
if (zoomActive) { if (zoomActive) {
//Check max zoom
if ( if (
maxZoomLevel === zoom.scale && maxZoomLevel === zoom.scale &&
// Added for preventing infinite loops // Added for preventing infinite loops
@ -101,6 +108,7 @@ class ImageComponent extends React.Component<
this.setState({ this.setState({
zoomingState: ZoomingState.MAX_ZOOMED_IN, zoomingState: ZoomingState.MAX_ZOOMED_IN,
}); });
// Check min zoom
} else if ( } else if (
zoom.scale === 1 && zoom.scale === 1 &&
this.state.zoomingState !== ZoomingState.MAX_ZOOMED_OUT this.state.zoomingState !== ZoomingState.MAX_ZOOMED_OUT
@ -124,12 +132,15 @@ class ImageComponent extends React.Component<
cursor, cursor,
}} }}
onClick={(event: React.MouseEvent<HTMLElement>) => { onClick={(event: React.MouseEvent<HTMLElement>) => {
if (!this.isPanning) {
if (isZoomingIn) { if (isZoomingIn) {
zoomIn(event); zoomIn(event);
} else { } else {
zoomOut(event); zoomOut(event);
} }
this.props.onClick && this.props.onClick(event); this.props.onClick && this.props.onClick(event);
}
this.isPanning = false;
}} }}
> >
<img <img

2
app/client/src/mockResponses/PropertyPaneConfigResponse.tsx
View File

@ -302,7 +302,7 @@ const PropertyPaneConfigResponse: PropertyPaneConfigsResponse["data"] = {
controlType: "DROP_DOWN", controlType: "DROP_DOWN",
options: [ options: [
{ {
label: "1x", label: "1x (No Zoom)",
value: 1, value: 1,
}, },
{ {