Reset rotation and position on double click #119

harupy · 2022-04-24T05:56:21Z

What changes are proposed in this pull request?

Reset the image rotation and position on double click.

Where does this idea come from?

This idea comes from Plotly:
https://plotly.com/python/creating-and-updating-figures/

Quick demo:

reset-on-double-click.mov

vercel · 2022-04-24T05:56:26Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
image	✅ Ready (Inspect)	Visit Preview	Apr 27, 2022 at 7:13AM (UTC)

afc163 · 2022-04-24T07:04:10Z

src/Preview.tsx

+  const onDoubleClick: React.MouseEventHandler<HTMLBodyElement> = () => {
+    if (visible) {
+      setScale(1);
+      setPosition(initialPosition);
+    }
+  };


Suggested change

const onDoubleClick: React.MouseEventHandler<HTMLBodyElement> = () => {

if (visible) {

setScale(1);

setPosition(initialPosition);

}

};

const onDoubleClick: React.MouseEventHandler<HTMLBodyElement> = () => {

if (!visible) {

return;

}

setScale(1);

setPosition(initialPosition);

};

@afc163 Thanks for the quick review! Fixed!

harupy · 2022-04-24T07:11:34Z

Is the CI / coverage check failure related to this PR? I was able to reproduce the same error on the master branch by running npm run test.

afc163 · 2022-04-24T07:11:53Z

Rebase master to fix snapshot.

harupy · 2022-04-24T07:17:50Z

Rebase master to fix snapshot.

Done!

codecov · 2022-04-24T07:29:23Z

Codecov Report

Merging #119 (27a0fa9) into master (fd2d0a6) will not change coverage.
The diff coverage is 100.00%.

@@            Coverage Diff            @@
##            master      #119   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files            5         5           
  Lines          271       277    +6     
  Branches        81        84    +3     
=========================================
+ Hits           271       277    +6

Impacted Files	Coverage Δ
src/Preview.tsx	`100.00% <100.00%> (ø)`

📣 Codecov can now indicate which changes are the most critical in Pull Requests. Learn more

afc163 · 2022-04-24T07:32:34Z

src/Preview.tsx

@@ -248,6 +256,7 @@ const Preview: React.FC<PreviewProps> = props => {
      passive: false,
    });
    const onKeyDownListener = addEventListener(window, 'keydown', onKeyDown, false);
+    const onDoubleClickLister = addEventListener(window, 'dblclick', onDoubleClick, false);


useEffect return 内要卸载掉这些 addEventListener。

afc163 · 2022-04-24T07:32:52Z

src/Preview.tsx

+    }
+    setScale(1);
+    setPosition(initialPosition);
+  };


加个 useCallBack，不然每次刷新都进下面的 useEffect 了。

harupy · 2022-04-24T09:19:45Z

src/Preview.tsx

@@ -317,6 +325,7 @@ const Preview: React.FC<PreviewProps> = props => {
      >
        <img
          onMouseDown={onMouseDown}
+          onDoubleClick={onDoubleClick}


@afc163 What do you think about the current implementation?

harupy · 2022-04-24T09:55:35Z

src/Preview.tsx

+    if (!visible) {
+      return;


Suggested change

if (!visible) {

return;

if (visible) {

...

}

Can we use the initial approach to keep the test coverage 100%?

That is OK.

Got it, pushed a commit!

harupy · 2022-04-26T14:24:38Z

@afc163 Could you take another look?

harupy · 2022-04-27T02:49:52Z

Interesting. The coverage check complained ReferenceError: mount is not defined but mount is defined.

harupy · 2022-04-27T02:51:42Z

rebased on master

harupy · 2022-04-27T03:49:06Z

I was wrong. mount is not defined.

harupy · 2022-04-27T04:14:47Z

@afc163 Fixed tests!

src/Preview.tsx

Co-authored-by: afc163 <afc163@gmail.com>

harupy · 2022-04-27T05:55:55Z

@afc163 Any clue on why tests failed? npm test works on my machine.

afc163 · 2022-04-27T06:55:56Z

Reinstall lock files and node_modules and try again.

harupy · 2022-04-27T07:04:26Z

I forgot to pull the latest commit.

Signed-off-by: harupy <hkawamura0130@gmail.com>

vercel bot deployed to Preview April 24, 2022 05:59 View deployment

vercel bot deployed to Preview April 24, 2022 07:00 View deployment

afc163 reviewed Apr 24, 2022

View reviewed changes

vercel bot deployed to Preview April 24, 2022 07:10 View deployment

harupy force-pushed the reset-on-double-click branch from 07aed26 to c385470 Compare April 24, 2022 07:17

vercel bot deployed to Preview April 24, 2022 07:20 View deployment

afc163 reviewed Apr 24, 2022

View reviewed changes

vercel bot deployed to Preview April 24, 2022 07:43 View deployment

harupy requested a review from afc163 April 24, 2022 07:53

vercel bot deployed to Preview April 24, 2022 08:09 View deployment

vercel bot deployed to Preview April 24, 2022 08:44 View deployment

vercel bot deployed to Preview April 24, 2022 08:57 View deployment

vercel bot deployed to Preview April 24, 2022 09:06 View deployment

harupy commented Apr 24, 2022

View reviewed changes

vercel bot deployed to Preview April 27, 2022 02:13 View deployment

harupy added 6 commits April 27, 2022 11:51

Reset rotation and position on double click

47ba8f3

add tests

73c1fd1

address comment

80163e1

use useCallback

2b05c5d

fix typo

03b27a0

use img onDoubleClick prop

170557b

harupy added 3 commits April 27, 2022 11:51

remove onDoubleClick from useEffect deps

1b98448

fix tests

2bd86d5

fix coverage

8c0d923

harupy force-pushed the reset-on-double-click branch from 27306b9 to 8c0d923 Compare April 27, 2022 02:51

vercel bot deployed to Preview April 27, 2022 02:54 View deployment

fix tests

7022d57

vercel bot deployed to Preview April 27, 2022 04:17 View deployment

afc163 reviewed Apr 27, 2022

View reviewed changes

src/Preview.tsx Show resolved Hide resolved

Update src/Preview.tsx

f1d16ac

Co-authored-by: afc163 <afc163@gmail.com>

vercel bot deployed to Preview April 27, 2022 04:32 View deployment

fix conditions

27a0fa9

Signed-off-by: harupy <hkawamura0130@gmail.com>

vercel bot deployed to Preview April 27, 2022 07:13 View deployment

afc163 merged commit bf1150a into react-component:master Apr 27, 2022

harupy deleted the reset-on-double-click branch April 28, 2022 02:41

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Reset rotation and position on double click #119

Reset rotation and position on double click #119

harupy commented Apr 24, 2022 •

edited

Loading

vercel bot commented Apr 24, 2022 •

edited

Loading

afc163 Apr 24, 2022

harupy Apr 24, 2022

harupy commented Apr 24, 2022

afc163 commented Apr 24, 2022

harupy commented Apr 24, 2022

codecov bot commented Apr 24, 2022 •

edited

Loading

afc163 Apr 24, 2022

afc163 Apr 24, 2022

harupy Apr 24, 2022

harupy Apr 24, 2022

harupy Apr 24, 2022

afc163 Apr 27, 2022

harupy Apr 27, 2022

harupy commented Apr 26, 2022

harupy commented Apr 27, 2022

harupy commented Apr 27, 2022

harupy commented Apr 27, 2022

harupy commented Apr 27, 2022

harupy commented Apr 27, 2022 •

edited

Loading

afc163 commented Apr 27, 2022

harupy commented Apr 27, 2022

Reset rotation and position on double click #119

Reset rotation and position on double click #119

Conversation

harupy commented Apr 24, 2022 • edited Loading

What changes are proposed in this pull request?

Where does this idea come from?

Quick demo:

vercel bot commented Apr 24, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

harupy commented Apr 24, 2022

afc163 commented Apr 24, 2022

harupy commented Apr 24, 2022

codecov bot commented Apr 24, 2022 • edited Loading

Codecov Report

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

harupy commented Apr 26, 2022

harupy commented Apr 27, 2022

harupy commented Apr 27, 2022

harupy commented Apr 27, 2022

harupy commented Apr 27, 2022

harupy commented Apr 27, 2022 • edited Loading

afc163 commented Apr 27, 2022

harupy commented Apr 27, 2022

harupy commented Apr 24, 2022 •

edited

Loading

vercel bot commented Apr 24, 2022 •

edited

Loading

codecov bot commented Apr 24, 2022 •

edited

Loading

harupy commented Apr 27, 2022 •

edited

Loading